@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

        img, canvas {
            max-width: 100%;
            height: auto;
        }

        body {
            margin: 0;
            padding: 10px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-x: hidden; /* Prohibeix moure's a esquerra/dreta */
            overflow-y: auto;   /* PERMET L'SCROLL VERTICAL */
            background: radial-gradient(circle, #fbf7f0 0%, #e3d5ca 100%);
            font-family: 'Press Start 2P', cursive;
                font-size: 12px;
            text-align: center;
            color: #2b2d42;
            user-select: none;
            image-rendering: pixelated;
            }
        h1 { font-size: 24px; color: #1b4332; margin: 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
        .subtitle { font-style: italic; color: #52b788; margin-bottom: 20px; font-weight: bold; }

        /* Contenidor del Calçot */
        #zona-click {
            position: relative; /* Això permet que els fills absoluts se situïn aquí */
            width: 100%;
            height: auto; /* Deixa que s'ajusti */
            display: flex;
            justify-content: center;
            margin: 10px 0;
        }
        #calcot {
            width: 150px; /* Mida més raonable per a mòbil */
            height: auto;
            cursor: pointer;
            image-rendering: pixelated; /* Aquest és el secret per al Pixel Art! */
            transition: transform 0.1s ease;
            filter: drop-shadow(0px 5px 0px #000); /* Ombra retro */
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            -webkit-tap-highlight-color: transparent; /* Això és el que treu el blau al mòbil */
            outline: none;
        }

        /* Animació de rebot al clicar */
        #calcot:active {
            transform: scale(0.80); /* El calçot s'encongeix un pèl al clicar */
        }

        /* Animació de flotació suau quan està quiet */
        .flotar {
            animation: flotant 3s ease-in-out infinite;
        }
        @keyframes flotant {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        /* Marcador de punts animat */
        .marcador { font-size: 32px; font-weight: 900; color: #1b4332; margin: 5px 0; }
        .submarcador { font-size: 18px; color: #40916c; font-weight: 600; margin-bottom: 20px; }

        /* Estils per a la producció per segon */
        .produccio-segon {
            font-size: 16px;
            color: #40916c; /* Un verd suau */
            font-weight: bold;
            margin-bottom: 15px;
            text-shadow: 1px 1px 0px #fff; /* Perquè es vegi bé sobre el fons */
        }

        /* Estils generals per a TOTS els botons (incloent navegació i compres) */
        .botó, .btn-nav, .btn-tancar { /* Aplica aquests estils a tots els tipus de botó */
            padding: 15px 25px; /* Mida del botó */
            font-size: 14px; /* Mida de la lletra */
            background-color: #d94e34; /* Color base (taronja/vermell) */
            color: white;
            border: 4px solid #000; /* Vora negra pixelada */
            cursor: pointer;
            font-weight: bold;
            box-shadow: 4px 4px 0px #000; /* Ombra retro */
            transition: none; /* Sense transicions suaus */
            text-transform: uppercase; /* Lletres majúscules */
            width: 90%; /* Amplada per a mòbil */
            max-width: 350px; /* Amplada màxima */
            margin: 10px auto; /* Centrat i espai */
        }

        /* Estil quan el botó es passa per sobre (hover) */
        .botó:hover:not(:disabled),
        .btn-nav:hover:not(:disabled),
        .btn-tancar:hover:not(:disabled) {
            background-color: #bc3b23; /* Color lleugerament més fosc */
        }

        /* Estil quan es CLICA el botó */
        .botó:active:not(:disabled),
        .btn-nav:active:not(:disabled),
        .btn-tancar:active:not(:disabled) {
            background-color: #9c2f1a; /* Color encara més fosc */
            transform: translate(2px, 2px); /* El botó es mou lleugerament cap avall */
            box-shadow: 2px 2px 0px #000; /* L'ombra es redueix */
        }

        /* Botons Deshabilitats */
        .botó:disabled,
        .btn-nav:disabled,
        .btn-tancar:disabled {
            background-color: #7f8c8d;
            border-color: #333;
            box-shadow: 4px 4px 0px #333;
            cursor: not-allowed;
        }

        /* Estil dels números que floten cap amunt (+1) */
        .numero-flotant {
            position: absolute;
            font-size: 28px;
            font-weight: bold;
            color: #2d6a4f;
            pointer-events: none;
            animation: pujarIesvair 0.8s ease-out forwards;
            text-shadow: 1px 1px 0px white;
            z-index: 10; /* Perquè surti per sobre de la imatge */
        }
        @keyframes pujarIesvair {
            0% { opacity: 1; transform: translateY(0) scale(1); }
            100% { opacity: 0; transform: translateY(-120px) scale(1.2); }
        }

        /* Estil dels calçots petits que surten volant */
        .particula {
            position: absolute;
            pointer-events: none;
            animation: explosio 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
            /* Elimina el font-size si en tenies un */
        }
        @keyframes explosio {
            0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
            100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; }
        }

        /* Filtre per fer que els emojis semblin més "retro" */
        #calcot, .particula, .numero-flotant {
            image-rendering: pixelated; /* Evita que el navegador els suavitzi */
            filter: contrast(1.2) brightness(1.1) saturate(1.2);
            /* Això fa que els colors siguin més vius i les vores més marcades */
        }

        .tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
        .tabs button {
            padding: 10px 20px;
            border: 4px solid #000;
            background: #e3d5ca;
            cursor: pointer;
            font-family: 'Press Start 2P', cursive;
        }

        /* Pantalles de menú (Overlays) */
        /* Això fa que les pestanyes tapin tota la pantalla */
        .tab-content {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background-color: #e3d5ca;
            z-index: 1000; /* Molt alt */
            display: none;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

        /* Botó de tancar per a cada pantalla de menú */
        /* El botó de tancar gran */
.btn-tancar {
    padding: 10px 20px; /* Més petit que els altres */
    font-size: 12px;
    margin-bottom: 20px;
    background-color: #d94e34; /* El mateix vermell */
}

        .titol-joc {
            display: flex;
            align-items: center;
    justify-content: center;
            gap: 15px; /* Espai entre icona i text */
}

        .icona-titol {
            width: 40px;          /* Ajusta la mida de la icona aquí */
            height: 40px;
            image-rendering: pixelated; /* Si la icona també és pixel art */
}

        .icona-inventari {
            width: 30px;
            height: 30px;
            image-rendering: pixelated;
            margin: 2px;
}

        /* 1. Partícules que cauen */
        /* El calçot que cau ha de tenir un z-index menor que les pestanyes */
        .calcot-caient {
            position: fixed;
            top: -50px;
            z-index: 5; /* Per sota dels menús */
            pointer-events: none;
            animation: caure linear forwards;
        }

        @keyframes caure {
            0% { transform: translateY(0px) rotate(0deg); }
            100% { transform: translateY(110vh) rotate(360deg); }
        }

        #cuina, #botiga, #stats {
    width: 100%;
            max-width: 400px; /* Limita l'ample per a mòbils */
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 20px; /* Aire al final de la pàgina */
}

        /* 2. Pantalles (Cuina, Botiga, Stats) */
        .pantalla, .tab-content {
            position: relative;
            z-index: 10; /* Per sobre de les partícules */
            background: transparent; /* IMPORTANT: Transparent per veure les partícules */
}

        /* Pantalla principal */
        #cuina {
            position: relative;
            z-index: 1; /* Està al fons */
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
        }

        /* El menú d'accés ràpid */
        .menu-principal {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-bottom: 20px;
        }

        /* Estils per a mòbils */
        @media (max-width: 600px) {
            body {
            padding: 10px;
                font-size: 14px;
        }
            h1 { font-size: 20px; }

            #zona-click {
                width: 100%;
                height: 200px;
            }

            #calcot {
                font-size: 100px; /* Emojis més petits en mòbil */
        }

            .botó {
                width: 90%; /* Botons amples */
                padding: 10px;
    font-size: 12px;
}

            .icona-inventari {
                width: 25px;
                height: 25px;
            }
        }

        /* Elimina el recuadre al clicar */
        #calcot:focus,
        .botó:focus,
        button:focus,
        input:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        .card {
            background: #fbf7f0;
            border: 4px solid #000;
            padding: 10px;
            margin: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
    width: 90%;
}

/* Estils per a la secció de compres */
.seccio-compres {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}

/* El botó de prestigi, a banda */
#botoPrestigi {
    margin-top: 20px;
    background-color: #ffd700;
    color: #000;
    width: 90%;
    max-width: 350px;
}

/* La cuina principal */
.pantalla-principal {
    position: relative;
    z-index: 100; /* Per sobre de les partícules (z-index: 5), per sota dels menús (z-index: 1000) */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 150px; /* Marge inferior per si el dock es tanca */
}

/* Ajust per separar l'inventari del combo */
#inventari {
    margin-top: 15px; /* Més espai per sobre */
    font-size: 24px;
    min-height: 40px;
    display: flex; /* Align items horitzontalment */
    gap: 10px; /* Espai entre les icones */
    justify-content: center;
}

/* Si les icones de l'inventari són massa grans, ajusta aquí */
.icona-inventari {
    width: 30px;
    height: 30px;
}

.cost {
    font-weight: bold;
    color: #fff; /* Blanc per destacar */
    margin: 0 5px; /* Petits marges laterals */
}