/* ========================================
   CUGINIPARTY - PIZZA
======================================== */


/* ========================================
   START SCREEN
======================================== */

.pizza-start-screen {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.pizza-hero-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #fff7ed,
            #fed7aa 55%,
            #fecaca
        );

    font-size: 54px;

    box-shadow:
        0 20px 50px
        rgba(249, 115, 22, 0.18);
}

.pizza-kicker {
    color: #ea580c;

    font-size: 0.68rem;
    font-weight: 1000;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.pizza-start-screen h1 {
    margin: 7px 0 0;

    color:
        var(--text-color, #111827);

    font-size:
        clamp(2.2rem, 7vw, 4rem);

    font-weight: 1000;

    letter-spacing: -0.07em;
}

.pizza-hero-text {
    max-width: 650px;

    margin: 14px auto 30px;

    color:
        var(--muted-text, #6b7280);

    font-size: 0.98rem;
    line-height: 1.65;
}


/* ========================================
   HOW TO
======================================== */

.pizza-how-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    max-width: 840px;
    margin: 0 auto 25px;
}

.pizza-how-card {
    padding: 17px 10px;

    border-radius: 18px;

    background:
        var(--card-bg, #ffffff);

    border:
        1px solid
        var(--border-color, #e5e7eb);

    box-shadow:
        0 10px 25px
        rgba(15, 23, 42, 0.05);
}

.pizza-how-card span {
    display: block;

    margin-bottom: 7px;

    font-size: 27px;
}

.pizza-how-card strong,
.pizza-how-card small {
    display: block;
}

.pizza-how-card strong {
    color:
        var(--text-color, #111827);

    font-size: 0.77rem;
    font-weight: 1000;
}

.pizza-how-card small {
    margin-top: 4px;

    color:
        var(--muted-text, #6b7280);

    font-size: 0.60rem;
    line-height: 1.4;
}


/* ========================================
   START TITLES
======================================== */

.pizza-section-title {
    margin: 8px 0 12px;

    color:
        var(--text-color, #111827);

    font-size: 0.76rem;
    font-weight: 1000;

    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.pizza-mode-title {
    margin-top: 5px;
}


/* ========================================
   DIFFICULTY
======================================== */

.pizza-difficulty-row {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    max-width: 650px;
    margin: 0 auto 18px;
}

.pizza-difficulty {
    padding: 13px;

    border:
        2px solid
        var(--border-color, #e5e7eb);

    border-radius: 17px;

    background:
        var(--card-bg, #ffffff);

    color:
        var(--text-color, #111827);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.pizza-difficulty:hover {
    transform: translateY(-2px);
}

.pizza-difficulty.selected {
    border-color: #ea580c;

    background:
        linear-gradient(
            145deg,
            #fff7ed,
            #ffedd5
        );

    box-shadow:
        0 12px 30px
        rgba(234, 88, 12, 0.12);
}

.pizza-difficulty span {
    display: block;

    margin-bottom: 4px;

    font-size: 22px;
}

.pizza-difficulty strong,
.pizza-difficulty small {
    display: block;
}

.pizza-difficulty strong {
    font-size: 0.80rem;
    font-weight: 1000;
}

.pizza-difficulty small {
    margin-top: 3px;

    color:
        var(--muted-text, #6b7280);

    font-size: 0.60rem;
}


/* ========================================
   TIME MODE
======================================== */

.pizza-time-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    max-width: 650px;
    margin: 0 auto 24px;
}

.pizza-time-option {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px 15px;

    border:
        2px solid
        var(--border-color, #e5e7eb);

    border-radius: 17px;

    background:
        var(--card-bg, #ffffff);

    color:
        var(--text-color, #111827);

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.pizza-time-option:hover {
    transform: translateY(-2px);
}

.pizza-time-option.selected {
    border-color: #ea580c;

    background:
        linear-gradient(
            145deg,
            #fff7ed,
            #ffedd5
        );

    box-shadow:
        0 12px 30px
        rgba(234, 88, 12, 0.10);
}

.pizza-time-option > span {
    font-size: 25px;
}

.pizza-time-option strong,
.pizza-time-option small {
    display: block;
}

.pizza-time-option strong {
    font-size: 0.78rem;
    font-weight: 1000;
}

.pizza-time-option small {
    margin-top: 3px;

    color:
        var(--muted-text, #6b7280);

    font-size: 0.59rem;
}

.pizza-main-button {
    min-width: 250px !important;

    box-shadow:
        0 15px 35px
        rgba(234, 88, 12, 0.20);
}


/* ========================================
   GAME SCREEN
======================================== */

.pizza-game-screen {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;
    padding: 15px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(234, 88, 12, 0.13),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #18181b,
            #030712
        );

    border:
        1px solid
        rgba(255,255,255,0.10);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,0.34);

    box-sizing: border-box;
    overflow: hidden;
}

.pizza-game-screen[hidden],
.pizza-end-screen[hidden] {
    display: none;
}


/* ========================================
   GAME HEADER
======================================== */

.pizza-game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;
}

.pizza-title-block {
    display: flex;
    align-items: center;

    gap: 10px;
}

.pizza-title-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        rgba(234, 88, 12, 0.16);

    font-size: 21px;
}

.pizza-small-label {
    display: block;

    margin-bottom: 2px;

    color:
        rgba(255,255,255,0.38);

    font-size: 0.46rem;
    font-weight: 1000;

    letter-spacing: 0.14em;
}

.pizza-title-block h2 {
    margin: 0;

    color: #ffffff;

    font-size: 1.14rem;
    font-weight: 1000;
}

.pizza-header-right {
    display: flex;
    align-items: center;

    gap: 8px;
}

.pizza-mode-badge {
    display: inline-flex;
    align-items: center;

    padding: 7px 10px;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.07);

    color:
        rgba(255,255,255,0.72);

    font-size: 0.58rem;
    font-weight: 900;
}

.pizza-exit-button {
    width: auto !important;
    min-width: 80px !important;

    margin: 0 !important;
}


/* ========================================
   STATS
======================================== */

.pizza-stats {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 7px;

    margin-bottom: 8px;
}

.pizza-stat {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 8px;

    border-radius: 13px;

    background:
        rgba(255,255,255,0.06);

    border:
        1px solid
        rgba(255,255,255,0.08);
}

.pizza-stat > span {
    font-size: 16px;
}

.pizza-stat small,
.pizza-stat strong {
    display: block;
}

.pizza-stat small {
    margin-bottom: 2px;

    color:
        rgba(255,255,255,0.38);

    font-size: 0.48rem;
    font-weight: 900;

    text-transform: uppercase;
}

.pizza-stat strong {
    color: #ffffff;

    font-size: 0.80rem;
    font-weight: 1000;

    font-variant-numeric: tabular-nums;
}


/* ========================================
   TIMER
======================================== */

.pizza-timer-section.hidden {
    display: none;
}

.pizza-timer-bar {
    width: 100%;
    height: 6px;

    margin-bottom: 10px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.08);
}

.pizza-timer-bar-fill {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #f59e0b,
            #ef4444
        );

    transform-origin: left center;

    transition:
        width 0.1s linear;
}


/* ========================================
   ORDER
======================================== */

.pizza-order-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 12px;
    padding: 12px 14px;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(234,88,12,0.13),
            rgba(255,255,255,0.04)
        );

    border:
        1px solid
        rgba(255,255,255,0.08);
}

.pizza-order-heading {
    display: flex;
    align-items: center;

    gap: 9px;

    flex: 0 0 auto;
}

.pizza-order-heading > span {
    font-size: 22px;
}

.pizza-order-heading small,
.pizza-order-heading strong {
    display: block;
}

.pizza-order-heading small {
    margin-bottom: 2px;

    color:
        rgba(255,255,255,0.38);

    font-size: 0.46rem;
    font-weight: 900;

    text-transform: uppercase;
}

.pizza-order-heading strong {
    color: #ffffff;

    font-size: 0.90rem;
    font-weight: 1000;
}

.pizza-order-ingredients {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 6px;
}

.pizza-required-ingredient {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 6px 8px;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.08);

    color: #ffffff;

    font-size: 0.62rem;
    font-weight: 800;
}

.pizza-required-ingredient.done {
    background:
        rgba(34,197,94,0.18);

    color:
        #86efac;
}

.pizza-required-ingredient.done::after {
    content: "✓";

    font-weight: 1000;
}


/* ========================================
   REQUIRED INGREDIENT VISUALS
======================================== */

.pizza-order-visual {
    position: relative;

    display: block;

    width: 22px;
    height: 18px;

    flex-shrink: 0;
}

.pizza-order-visual::before {
    content: "";

    position: absolute;
}


/* Pomodoro */

.pizza-order-tomato::before {
    width: 18px;
    height: 18px;

    left: 2px;
    top: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 28%,
            #ff9b76,
            #ec4431 52%,
            #ad2018 100%
        );
}


/* Mozzarella */

.pizza-order-cheese::before {
    width: 20px;
    height: 14px;

    left: 1px;
    top: 2px;

    border-radius:
        48% 58% 45% 55%;

    background:
        linear-gradient(
            135deg,
            #fff8d1,
            #ffd95b
        );
}


/* Salame */

.pizza-order-salami::before {
    width: 18px;
    height: 18px;

    left: 2px;
    top: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #f57f68,
            #db3e31 48%,
            #a8201a 100%
        );
}


/* Funghi */

.pizza-order-mushroom::before {
    width: 21px;
    height: 13px;

    left: 0;
    top: 3px;

    border-radius:
        12px 12px 5px 5px;

    background:
        linear-gradient(
            180deg,
            #f9ead8,
            #c69d75
        );
}


/* Olive */

.pizza-order-olive::before {
    width: 18px;
    height: 18px;

    left: 2px;
    top: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #a2c846 0 22%,
            #367534 25% 62%,
            #214826 100%
        );
}


/* Peperoni */

.pizza-order-pepper::before {
    width: 22px;
    height: 7px;

    left: 0;
    top: 6px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #15863d,
            #5bc74d,
            #178138
        );

    transform:
        rotate(-17deg);
}


/* Cipolla */

.pizza-order-onion::before {
    width: 20px;
    height: 15px;

    left: 1px;
    top: 2px;

    border-radius: 50%;

    border:
        3px solid
        #cc83ce;
}


/* Mais */

.pizza-order-corn::before {
    width: 8px;
    height: 8px;

    left: 2px;
    top: 5px;

    border-radius: 50%;

    background: #f7c83e;

    box-shadow:
        7px 0 0 #f7c83e,
        3px 6px 0 #f7c83e,
        10px 6px 0 #f7c83e;
}


/* Basilico */

.pizza-order-basil::before {
    width: 20px;
    height: 13px;

    left: 1px;
    top: 3px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            #7acb53,
            #2f782f
        );

    transform:
        rotate(-18deg);
}


/* Peperoncino */

.pizza-order-chili::before {
    width: 22px;
    height: 6px;

    left: 0;
    top: 6px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #7a1d14,
            #ef492a,
            #a72018
        );

    transform:
        rotate(-12deg);
}


/* ========================================
   KITCHEN
======================================== */

.pizza-kitchen {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    gap: 13px;
}

.pizza-workspace,
.pizza-ingredients-panel {
    min-width: 0;

    padding: 13px;

    border-radius: 20px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid
        rgba(255,255,255,0.08);
}

.pizza-workspace-title {
    margin-bottom: 10px;

    color:
        rgba(255,255,255,0.72);

    font-size: 0.65rem;
    font-weight: 1000;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* ========================================
   PIZZA BOARD
======================================== */

.pizza-board {
    position: relative;

    width: min(470px, 100%);

    aspect-ratio: 1 / 1;

    margin: 0 auto 8px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.pizza-board-shadow {
    position: absolute;

    width: 76%;
    height: 20%;

    bottom: 8%;

    border-radius: 50%;

    background:
        rgba(0,0,0,0.38);

    filter: blur(14px);
}

.pizza-board-wood {
    position: absolute;

    width: 93%;
    height: 93%;

    border-radius: 50%;

    background:
        repeating-radial-gradient(
            circle,
            #7a431f 0 9px,
            #5d3017 10px 12px
        );

    box-shadow:
        inset 0 0 0 6px
        rgba(30,15,5,0.38),

        0 18px 40px
        rgba(0,0,0,0.48);
}


/* ========================================
   PIZZA BASE
======================================== */

.pizza-base {
    position: relative;

    width: 82%;
    height: 82%;

    border-radius: 50%;

    z-index: 2;

    filter:
        drop-shadow(
            0 12px 15px
            rgba(0,0,0,0.18)
        );
}


/* ========================================
   CRUST
======================================== */

.pizza-crust {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #ffe0a4 0%,
            #f7b85b 25%,
            #d87b23 65%,
            #9a4914 100%
        );

    box-shadow:
        inset 0 0 0 5px
        rgba(120,55,13,0.25),

        inset 0 -8px 12px
        rgba(89,41,8,0.20);
}

.pizza-crust-inner {
    position: absolute;

    inset: 7%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 36% 25%,
            #fff0c7 0%,
            #f9d995 42%,
            #e4a04c 75%,
            #c87526 100%
        );

    box-shadow:
        inset 0 4px 10px
        rgba(255,255,255,0.28);
}


/* ========================================
   SAUCE
======================================== */

.pizza-sauce {
    position: absolute;

    inset: 13%;

    z-index: 2;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 30%,
            #f86b43 0%,
            #e33b25 42%,
            #b51e15 78%,
            #8f160f 100%
        );

    box-shadow:
        inset 0 0 0 3px
        rgba(117,20,12,0.18),

        inset 0 8px 15px
        rgba(255,130,80,0.20),

        0 0 12px
        rgba(155,25,10,0.15);

    opacity: 0;

    transform:
        scale(0.93);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    pointer-events: none;
}

.pizza-sauce.active {
    opacity: 1;

    transform:
        scale(1);
}

.pizza-sauce-inner {
    position: absolute;

    inset: 3%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(255,170,115,0.18),
            transparent 18%
        ),

        radial-gradient(
            circle at 68% 38%,
            rgba(255,170,115,0.10),
            transparent 15%
        ),

        radial-gradient(
            circle at 35% 70%,
            rgba(255,170,115,0.12),
            transparent 17%
        ),

        radial-gradient(
            circle at 70% 75%,
            rgba(255,170,115,0.10),
            transparent 14%
        );

    opacity: 0.8;
}


/* ========================================
   CHEESE
======================================== */

.pizza-cheese-layer {
    position: absolute;

    inset: 14.5%;

    z-index: 3;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at 20% 25%,
            #fffbe0 0%,
            transparent 14%
        ),

        radial-gradient(
            ellipse at 65% 28%,
            #fff9cd 0%,
            transparent 18%
        ),

        radial-gradient(
            ellipse at 35% 65%,
            #fff5ba 0%,
            transparent 17%
        ),

        radial-gradient(
            ellipse at 75% 67%,
            #ffe99b 0%,
            transparent 18%
        ),

        radial-gradient(
            circle at 50% 50%,
            #ffe996,
            #f6d36b
        );

    box-shadow:
        inset 0 0 14px
        rgba(185,120,24,0.13);

    opacity: 0;

    transform:
        scale(0.93);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    pointer-events: none;
}

.pizza-cheese-layer.active {
    opacity: 1;

    transform:
        scale(1);
}

.pizza-cheese-layer::before {
    content: "";

    position: absolute;

    inset: 4%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at 15% 20%,
            rgba(255,255,255,0.70) 0 5%,
            transparent 6%
        ),

        radial-gradient(
            ellipse at 38% 30%,
            rgba(255,255,255,0.55) 0 7%,
            transparent 8%
        ),

        radial-gradient(
            ellipse at 66% 20%,
            rgba(255,255,255,0.60) 0 5%,
            transparent 6%
        ),

        radial-gradient(
            ellipse at 78% 47%,
            rgba(255,255,255,0.45) 0 7%,
            transparent 8%
        ),

        radial-gradient(
            ellipse at 22% 57%,
            rgba(255,255,255,0.50) 0 6%,
            transparent 7%
        ),

        radial-gradient(
            ellipse at 54% 72%,
            rgba(255,255,255,0.65) 0 6%,
            transparent 7%
        );

    filter: blur(1px);

    opacity: 0.75;
}

.pizza-cheese-layer::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at 27% 32%,
            rgba(190,123,25,0.20) 0 3%,
            transparent 4%
        ),

        radial-gradient(
            ellipse at 72% 32%,
            rgba(190,123,25,0.20) 0 3%,
            transparent 4%
        ),

        radial-gradient(
            ellipse at 57% 57%,
            rgba(190,123,25,0.18) 0 2.5%,
            transparent 3.5%
        ),

        radial-gradient(
            ellipse at 32% 75%,
            rgba(190,123,25,0.18) 0 3%,
            transparent 4%
        );
}


/* ========================================
   TOPPINGS
======================================== */

.pizza-toppings {
    position: absolute;

    inset: 14%;

    z-index: 4;

    border-radius: 50%;

    overflow: hidden;

    pointer-events: none;
}

.pizza-topping {
    position: absolute;

    transform:
        translate(-50%, -50%);

    animation:
        pizzaIngredientDrop
        0.22s ease;
}

@keyframes pizzaIngredientDrop {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.45);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

}


/* ========================================
   TOPPING - TOMATO
======================================== */

.pizza-topping.tomato {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 28%,
            #ff9a71 0 11%,
            #ef4631 35%,
            #bd231c 100%
        );

    border:
        2px solid
        rgba(141,25,18,0.35);

    box-shadow:
        inset 0 0 0 4px
        rgba(255,140,110,0.20),

        0 2px 4px
        rgba(0,0,0,0.16);
}

.pizza-topping.tomato::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 5px;
    height: 5px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background: #f8c58d;

    box-shadow:
        -7px -5px 0 #f8c58d,
        7px -4px 0 #f8c58d,
        -5px 6px 0 #f8c58d,
        6px 6px 0 #f8c58d;
}


/* ========================================
   TOPPING - OLIVE
======================================== */

.pizza-topping.olive {
    width: 24px;
    height: 24px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #9ec53f 0 22%,
            #326d2c 24% 62%,
            #204a24 100%
        );

    box-shadow:
        0 2px 4px
        rgba(0,0,0,0.16);
}


/* ========================================
   TOPPING - MUSHROOM
======================================== */

.pizza-topping.mushroom {
    width: 34px;
    height: 18px;

    border-radius:
        18px 18px 8px 8px;

    background:
        linear-gradient(
            180deg,
            #f7ead7 0%,
            #d3b18b 55%,
            #987452 100%
        );

    border:
        1px solid
        rgba(103,72,46,0.22);

    transform:
        translate(-50%, -50%)
        rotate(var(--rotation, 0deg));
}


/* ========================================
   TOPPING - SALAMI
======================================== */

.pizza-topping.salami {
    width: 31px;
    height: 25px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #f57a62,
            #db3c2f 50%,
            #a51d19 100%
        );

    border:
        2px solid
        rgba(116,24,19,0.25);
}

.pizza-topping.salami::before {
    content: "";

    position: absolute;

    width: 5px;
    height: 4px;

    top: 5px;
    left: 8px;

    border-radius: 50%;

    background: #8e2119;

    box-shadow:
        10px 5px 0 #8e2119,
        4px 12px 0 #8e2119;
}


/* ========================================
   TOPPING - PEPPER
======================================== */

.pizza-topping.pepper {
    width: 34px;
    height: 11px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #13863a,
            #49bc48,
            #168438
        );

    transform:
        translate(-50%, -50%)
        rotate(var(--rotation, 0deg));

    box-shadow:
        0 2px 4px
        rgba(0,0,0,0.14);
}


/* ========================================
   TOPPING - ONION
======================================== */

.pizza-topping.onion {
    width: 27px;
    height: 17px;

    border-radius: 50%;

    border:
        4px solid
        #ca83ce;

    box-shadow:
        inset 0 0 0 2px
        #f2b7ec;
}


/* ========================================
   TOPPING - CORN
======================================== */

.pizza-topping.corn {
    width: 16px;
    height: 16px;

    border-radius: 48%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #fff58f,
            #f7c83d 60%,
            #d89b17 100%
        );
}


/* ========================================
   TOPPING - BASIL
======================================== */

.pizza-topping.basil {
    width: 28px;
    height: 17px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            #79c84c,
            #2f7b2f
        );

    transform:
        translate(-50%, -50%)
        rotate(var(--rotation, 0deg));
}


/* ========================================
   TOPPING - CHILI
======================================== */

.pizza-topping.chili {
    width: 31px;
    height: 9px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #7d1c14,
            #f04729,
            #aa2116
        );

    transform:
        translate(-50%, -50%)
        rotate(var(--rotation, 0deg));
}


/* ========================================
   COOKING OVERLAY
======================================== */

.pizza-cooking-overlay {
    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    border-radius: 50%;

    background:
        rgba(106,42,9,0.35);

    backdrop-filter: blur(2px);
}

.pizza-cooking-overlay[hidden] {
    display: none;
}

.pizza-fire {
    font-size: 46px;

    animation:
        pizzaFire
        0.4s
        ease-in-out
        infinite
        alternate;
}

@keyframes pizzaFire {

    from {
        transform:
            translateY(3px)
            scale(0.95);
    }

    to {
        transform:
            translateY(-3px)
            scale(1.05);
    }

}

.pizza-cooking-overlay span {
    color: #ffffff;

    font-size: 0.72rem;
    font-weight: 1000;

    text-shadow:
        0 2px 6px
        rgba(0,0,0,0.5);
}


/* ========================================
   ACTIONS
======================================== */

.pizza-action-message {
    min-height: 19px;

    margin-bottom: 9px;

    color:
        rgba(255,255,255,0.48);

    text-align: center;

    font-size: 0.62rem;
    font-weight: 800;
}

.pizza-actions {
    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;
}

.pizza-actions .game-button {
    width: auto;
    min-width: 135px;

    margin: 0;
}

.pizza-cook-button:not(:disabled) {
    box-shadow:
        0 10px 28px
        rgba(249,115,22,0.25);
}

.pizza-cook-button:disabled {
    opacity: 0.42;

    cursor: not-allowed;
}


/* ========================================
   INGREDIENTS
======================================== */

.pizza-ingredients-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}

.pizza-ingredient {
    position: relative;

    min-width: 0;
    min-height: 88px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 8px;

    border:
        1px solid
        rgba(255,255,255,0.10);

    border-radius: 14px;

    background:
        rgba(255,255,255,0.055);

    color: #ffffff;

    cursor: pointer;

    transition:
        transform 0.13s ease,
        background 0.13s ease,
        border-color 0.13s ease;
}

.pizza-ingredient:hover {
    transform:
        translateY(-2px);

    background:
        rgba(255,255,255,0.09);
}

.pizza-ingredient:active {
    transform:
        scale(0.94);
}

.pizza-ingredient:disabled {
    opacity: 0.55;

    cursor: not-allowed;
}

.pizza-ingredient.selected {
    border-color:
        rgba(34,197,94,0.55);

    background:
        rgba(34,197,94,0.12);
}

.pizza-ingredient-visual {
    position: relative;

    width: 38px;
    height: 30px;

    display: block;
}


/* ========================================
   INGREDIENT ICONS
======================================== */

/* Pomodoro */

.pizza-ingredient-visual.tomato::before {
    content: "";

    position: absolute;

    width: 27px;
    height: 27px;

    left: 5px;
    top: 1px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 28%,
            #ff9b76,
            #ec4431 52%,
            #ad2018 100%
        );
}


/* Mozzarella */

.pizza-ingredient-visual.cheese::before {
    content: "▰";

    position: absolute;

    left: 3px;
    top: -7px;

    color: #ffd95b;

    font-size: 33px;

    transform:
        rotate(8deg);
}


/* Salame */

.pizza-ingredient-visual.salami::before {
    content: "";

    position: absolute;

    width: 27px;
    height: 27px;

    left: 5px;
    top: 1px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #f57f68,
            #db3e31 48%,
            #a8201a 100%
        );
}


/* Funghi */

.pizza-ingredient-visual.mushroom::before {
    content: "";

    position: absolute;

    width: 33px;
    height: 20px;

    left: 2px;
    top: 4px;

    border-radius:
        18px 18px 7px 7px;

    background:
        linear-gradient(
            180deg,
            #f9ead8,
            #c69d75
        );
}


/* Olive */

.pizza-ingredient-visual.olive::before {
    content: "";

    position: absolute;

    width: 26px;
    height: 26px;

    left: 5px;
    top: 1px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #a2c846 0 22%,
            #367534 25% 62%,
            #214826 100%
        );
}


/* Peperoni */

.pizza-ingredient-visual.pepper::before {
    content: "";

    position: absolute;

    width: 35px;
    height: 9px;

    left: 1px;
    top: 10px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #15863d,
            #5bc74d,
            #178138
        );

    transform:
        rotate(-17deg);
}


/* Cipolla */

.pizza-ingredient-visual.onion::before {
    content: "";

    position: absolute;

    width: 29px;
    height: 22px;

    left: 4px;
    top: 4px;

    border-radius: 50%;

    border:
        4px solid
        #cc83ce;

    box-shadow:
        inset 0 0 0 2px
        #f1b9ea;
}


/* Mais */

.pizza-ingredient-visual.corn::before {
    content: "•••";

    position: absolute;

    left: 4px;
    top: -4px;

    color: #f7c83e;

    font-size: 31px;

    letter-spacing: 1px;
}


/* Basilico */

.pizza-ingredient-visual.basil::before {
    content: "";

    position: absolute;

    width: 28px;
    height: 17px;

    left: 4px;
    top: 6px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            #7acb53,
            #2f782f
        );

    transform:
        rotate(-18deg);
}


/* Peperoncino */

.pizza-ingredient-visual.chili::before {
    content: "";

    position: absolute;

    width: 33px;
    height: 8px;

    left: 2px;
    top: 11px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #7a1d14,
            #ef492a,
            #a72018
        );

    transform:
        rotate(-12deg);
}


/* ========================================
   INGREDIENT TEXT
======================================== */

.pizza-ingredient-name {
    color:
        rgba(255,255,255,0.76);

    font-size: 0.56rem;
    font-weight: 900;

    text-align: center;
}

.pizza-ingredient-count {
    position: absolute;

    top: 5px;
    right: 6px;

    min-width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        #ea580c;

    color: #ffffff;

    font-size: 0.50rem;
    font-weight: 1000;
}

.pizza-ingredient-help {
    margin-top: 10px;

    color:
        rgba(255,255,255,0.30);

    text-align: center;

    font-size: 0.54rem;
}


/* ========================================
   END SCREEN
======================================== */

.pizza-end-screen {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;
    padding: 20px;
}

.pizza-end-card {
    position: relative;

    overflow: hidden;

    padding:
        45px
        35px
        35px;

    border-radius: 30px;

    background:
        var(--card-bg, #ffffff);

    border:
        1px solid
        var(--border-color, #e5e7eb);

    box-shadow:
        0 30px 85px
        rgba(0,0,0,0.15);

    text-align: center;
}

.pizza-end-icon {
    width: 96px;
    height: 96px;

    margin: 0 auto 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 29px;

    background:
        linear-gradient(
            135deg,
            #fff7ed,
            #fed7aa
        );

    font-size: 50px;
}

.pizza-end-kicker {
    color: #ea580c;

    font-size: 0.67rem;
    font-weight: 1000;

    letter-spacing: 0.16em;
}

.pizza-end-card h2 {
    margin:
        7px
        0
        0;

    color:
        var(--text-color, #111827);

    font-size:
        clamp(2rem, 6vw, 3.3rem);

    font-weight: 1000;

    letter-spacing: -0.06em;
}

.pizza-end-card p {
    max-width: 510px;

    margin: 12px auto 0;

    color:
        var(--muted-text, #6b7280);

    font-size: 0.90rem;

    line-height: 1.6;
}

.pizza-results {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    max-width: 500px;

    margin: 25px auto 15px;
}

.pizza-results > div {
    padding: 15px;

    border-radius: 16px;

    background:
        var(--secondary-bg, #f3f4f6);
}

.pizza-results span,
.pizza-results strong {
    display: block;
}

.pizza-results span {
    margin-bottom: 5px;

    color:
        var(--muted-text, #6b7280);

    font-size: 0.66rem;
    font-weight: 800;
}

.pizza-results strong {
    color:
        var(--text-color, #111827);

    font-size: 1rem;
    font-weight: 1000;

    font-variant-numeric: tabular-nums;
}

.pizza-end-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 16px;

    border-radius: 999px;

    background:
        #ffedd5;

    color:
        #c2410c;

    font-size: 0.72rem;
    font-weight: 1000;
}


/* ========================================
   DARK MODE
======================================== */

body.dark-mode .pizza-start-screen h1 {
    color: #f3f4fa;
}

body.dark-mode .pizza-hero-text {
    color: #aeb2c3;
}

body.dark-mode .pizza-section-title {
    color: #f3f4fa;
}

body.dark-mode .pizza-how-card {
    background: #181b29;

    border-color:
        rgba(255,255,255,0.07);
}

body.dark-mode .pizza-how-card strong {
    color: #ffffff;
}

body.dark-mode .pizza-how-card small {
    color: #aeb2c3;
}

body.dark-mode .pizza-difficulty,
body.dark-mode .pizza-time-option {
    background: #181b29;

    border-color:
        rgba(255,255,255,0.08);

    color: #ffffff;
}

body.dark-mode .pizza-difficulty.selected,
body.dark-mode .pizza-time-option.selected {
    background:
        linear-gradient(
            145deg,
            #2a1b12,
            #302019
        );

    border-color:
        #fb923c;
}

body.dark-mode .pizza-difficulty small,
body.dark-mode .pizza-time-option small {
    color: #aeb2c3;
}

body.dark-mode .pizza-end-card {
    background: #181b29;

    border-color:
        rgba(255,255,255,0.07);
}

body.dark-mode .pizza-end-card h2 {
    color: #ffffff;
}

body.dark-mode .pizza-end-card p {
    color: #aeb2c3;
}

body.dark-mode .pizza-results > div {
    background: #272a35;
}

body.dark-mode .pizza-results span {
    color: #aeb2c3;
}

body.dark-mode .pizza-results strong {
    color: #ffffff;
}

body.dark-mode .pizza-end-badge {
    background:
        rgba(234,88,12,0.18);

    color:
        #fdba74;
}


/* ========================================
   RESPONSIVE - TABLET
======================================== */

@media (max-width: 900px) {

    .pizza-how-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .pizza-kitchen {
        grid-template-columns: 1fr;
    }

    .pizza-ingredients-panel {
        order: 2;
    }

}


/* ========================================
   RESPONSIVE - MOBILE
======================================== */

@media (max-width: 620px) {

    /* ------------------------------------
       START
    ------------------------------------ */

    .pizza-start-screen {
        padding: 10px;
    }

    .pizza-hero-icon {
        width: 78px;
        height: 78px;

        border-radius: 23px;

        font-size: 40px;
    }

    .pizza-hero-text {
        font-size: 0.84rem;
    }

    .pizza-how-grid {
        gap: 7px;
    }

    .pizza-how-card {
        padding: 13px 8px;
    }

    .pizza-how-card span {
        font-size: 23px;
    }

    .pizza-how-card strong {
        font-size: 0.68rem;
    }

    .pizza-how-card small {
        font-size: 0.54rem;
    }

    .pizza-difficulty-row,
    .pizza-time-row {
        gap: 6px;
    }

    .pizza-difficulty,
    .pizza-time-option {
        padding: 10px 7px;
    }

    .pizza-difficulty span {
        font-size: 19px;
    }

    .pizza-difficulty strong,
    .pizza-time-option strong {
        font-size: 0.66rem;
    }

    .pizza-difficulty small,
    .pizza-time-option small {
        font-size: 0.50rem;
    }

    .pizza-time-option {
        gap: 7px;
    }

    .pizza-time-option > span {
        font-size: 20px;
    }

    .pizza-main-button {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 360px;
    }


    /* ------------------------------------
       GAME CONTAINER
    ------------------------------------ */

    .pizza-game-screen {
        min-height:
            calc(100svh - 14px);

        display: flex;
        flex-direction: column;

        padding: 7px;

        border-radius: 22px;
    }


    /* ------------------------------------
       HEADER
    ------------------------------------ */

    .pizza-game-header {
        flex: 0 0 auto;

        margin-bottom: 5px;
    }

    .pizza-header-right {
        gap: 5px;
    }

    .pizza-mode-badge {
        padding: 6px 8px;

        font-size: 0.48rem;
    }

    .pizza-title-icon {
        width: 35px;
        height: 35px;

        border-radius: 10px;

        font-size: 18px;
    }

    .pizza-small-label {
        font-size: 0.38rem;
    }

    .pizza-title-block h2 {
        font-size: 0.92rem;
    }


    /* ------------------------------------
       STATS
    ------------------------------------ */

    .pizza-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 5px;

        flex: 0 0 auto;

        margin-bottom: 5px;
    }

    .pizza-stat {
        justify-content: flex-start;

        padding: 7px;
    }

    .pizza-stat > span {
        font-size: 14px;
    }

    .pizza-stat small {
        font-size: 0.42rem;
    }

    .pizza-stat strong {
        font-size: 0.68rem;
    }


    /* ------------------------------------
       TIMER
    ------------------------------------ */

    .pizza-timer-section {
        flex: 0 0 auto;

        margin-bottom: 4px;
    }

    .pizza-timer-bar {
        height: 5px;

        margin-bottom: 6px;
    }


    /* ------------------------------------
       ORDER
    ------------------------------------ */

    .pizza-order-panel {
        flex: 0 0 auto;

        flex-direction: column;
        align-items: stretch;

        gap: 5px;

        margin-bottom: 5px;
        padding: 7px 9px;
    }

    .pizza-order-heading {
        gap: 6px;
    }

    .pizza-order-heading > span {
        font-size: 18px;
    }

    .pizza-order-heading strong {
        font-size: 0.74rem;
    }

    .pizza-order-heading small {
        font-size: 0.38rem;
    }

    .pizza-order-ingredients {
        justify-content: flex-start;

        gap: 5px;

        max-height: none;

        overflow: visible;
    }

    .pizza-required-ingredient {
        min-height: 34px;

        padding: 6px 9px;

        gap: 6px;

        border-radius: 9px;

        font-size: 0.56rem;
    }

    .pizza-required-ingredient > span:last-child {
        font-size: 0.56rem;
        font-weight: 900;
    }

    .pizza-order-visual {
        width: 24px;
        height: 20px;
    }


    /* ------------------------------------
       KITCHEN
    ------------------------------------ */

    .pizza-kitchen {
        flex: 1;

        min-height: 0;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr);

        grid-template-rows:
            minmax(270px, 1fr)
            auto;

        gap: 5px;
    }

    .pizza-workspace,
    .pizza-ingredients-panel {
        padding: 6px;

        border-radius: 16px;
    }


    /* ------------------------------------
       PIZZA
    ------------------------------------ */

    .pizza-workspace {
        min-height: 0;

        display: flex;
        flex-direction: column;
    }

    .pizza-workspace-title {
        flex: 0 0 auto;

        margin-bottom: 3px;

        font-size: 0.50rem;
    }

    .pizza-board {
        flex: 1;

        min-height: 0;

        width:
            min(330px, 100%);

        margin:
            0 auto
            2px;
    }


    /* ------------------------------------
       MOBILE TOPPINGS
    ------------------------------------ */

    .pizza-topping.tomato,
    .pizza-topping.salami {
        transform:
            translate(-50%, -50%)
            scale(0.82);
    }

    .pizza-topping.mushroom,
    .pizza-topping.pepper,
    .pizza-topping.basil,
    .pizza-topping.chili {
        transform:
            translate(-50%, -50%)
            rotate(var(--rotation, 0deg))
            scale(0.84);
    }

    .pizza-topping.olive,
    .pizza-topping.corn,
    .pizza-topping.onion {
        transform:
            translate(-50%, -50%)
            scale(0.84);
    }


    /* ------------------------------------
       ACTION MESSAGE
    ------------------------------------ */

    .pizza-action-message {
        flex: 0 0 auto;

        min-height: 14px;

        margin:
            1px
            0
            2px;

        font-size: 0.50rem;
    }


    /* ------------------------------------
       ACTION BUTTONS
    ------------------------------------ */

    .pizza-actions {
        flex: 0 0 auto;

        gap: 4px;
    }

    .pizza-actions .game-button {
        min-width: 105px;

        padding:
            7px
            10px;

        font-size: 0.60rem;
    }


    /* ------------------------------------
       INGREDIENT PANEL
    ------------------------------------ */

    .pizza-ingredients-panel {
        flex: 0 0 auto;

        overflow: hidden;
    }

    .pizza-ingredients-panel .pizza-workspace-title {
        margin-bottom: 3px;
    }

    .pizza-ingredients-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 5px;
    }

    .pizza-ingredient {
        min-height: 82px;

        padding:
            7px
            4px;

        gap: 3px;

        border-radius: 11px;
    }

    .pizza-ingredient-visual {
        width: 42px;
        height: 34px;

        flex-shrink: 0;

        transform:
            scale(1.05);
    }

    .pizza-ingredient-name {
        font-size: 0.46rem;

        line-height: 1.1;
    }

    .pizza-ingredient-count {
        top: 2px;
        right: 3px;

        min-width: 14px;
        height: 14px;

        font-size: 0.40rem;
    }

    .pizza-ingredient-help {
        display: none;
    }


    /* ------------------------------------
       END
    ------------------------------------ */

    .pizza-end-card {
        padding:
            34px
            17px
            26px;

        border-radius: 23px;
    }

    .pizza-results {
        gap: 7px;
    }

    .pizza-results > div {
        padding: 12px;
    }

}


/* ========================================
   RESPONSIVE - SMALL PHONES
======================================== */

@media (max-width: 390px) {

    .pizza-board {
        width:
            min(300px, 100%);
    }

    .pizza-ingredients-grid {
        gap: 4px;
    }

    .pizza-ingredient {
        min-height: 76px;

        padding:
            6px
            3px;
    }

    .pizza-ingredient-name {
        font-size: 0.43rem;
    }

    .pizza-required-ingredient {
        padding:
            5px
            7px;

        font-size: 0.52rem;
    }

    .pizza-required-ingredient > span:last-child {
        font-size: 0.52rem;
    }

}