:root {
    --lemon-chiffon: #fbf8cc;
    --powder-petal: #fde4cf;
    --cotton-rose: #ffcfd2;
    --pink-orchid: #f1c0e8;
    --mauve: #cfbaf0;
    --baby-blue-ice: #a3c4f3;
    --frosted-blue: #90dbf4;
    --electric-aqua: #8eecf5;
    --aquamarine: #98f5e1;
    --celadon: #b9fbc0;
    --scale: 1.5rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    image-rendering: pixelated;
    font-family: monospace;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    image-rendering: pixelated;
}

#game {
    display: grid;
    grid-template-areas:
        "hud hud hud"
        "order bento palette"
        "order combo-popup palette";
    grid-template-columns: calc(var(--scale) * 13) calc(var(--scale) * 18) calc(var(--scale) * 13);
    grid-template-rows: calc(var(--scale) * 4) 1fr auto;
    gap: calc(var(--scale) * 0.75);
    padding: calc(var(--scale) * 1);
    background: var(--powder-petal);
    border: calc(var(--scale) * 0.25) solid #333;
    box-shadow: calc(var(--scale) * 0.375) calc(var(--scale) * 0.375) 0 #333;
}

/*HUD*/
#hud {
    grid-area: hud;
    display: flex;
    align-items: center;
    gap: calc(var(--scale) * 0.75);
    background: var(--lemon-chiffon);
    border: calc(var(--scale) * 0.1875) solid #333;
    padding: 0 calc(var(--scale) * 0.75);
    box-shadow: calc(var(--scale) * 0.1875) calc(var(--scale) * 0.1875) 0 #333;
}

#score-label,
#timer-label,
#customer-label {
    font-size: calc(var(--scale) * 0.625);
    letter-spacing: 1px;
    color: #555;
}

#score,
#timer,
#customer-count {
    font-size: calc(var(--scale) * 1.125);
    font-weight: bold;
    color: #333;
    min-width: calc(var(--scale) * 2.5);
}

#timer.urgent {
    color: #e05252;
    animation: blink 0.5s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/*ORDER PANEL*/
#order-panel {
    grid-area: order;
    background: var(--cotton-rose);
    border: calc(var(--scale) * 0.1875) solid #333;
    box-shadow: calc(var(--scale) * 0.1875) calc(var(--scale) * 0.1875) 0 #333;
    padding: calc(var(--scale) * 0.625);
    display: flex;
    flex-direction: column;
    gap: calc(var(--scale) * 0.5);
}

#order-title,
#palette-title {
    font-size: calc(var(--scale) * 0.6875);
    letter-spacing: 2px;
    text-align: center;
    color: #333;
    border-bottom: 2px solid #333;
    padding-bottom: calc(var(--scale) * 0.25);
}

#order-grid {
    display: grid;
    grid-template-columns: repeat(3, calc(var(--scale) * 3));
    grid-template-rows: repeat(3, calc(var(--scale) * 3));
    gap: calc(var(--scale) * 0.25);
    justify-content: center;
}

.order-cell {
    width: calc(var(--scale) * 3);
    height: calc(var(--scale) * 3);
    background: var(--lemon-chiffon);
    border: 2px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.order-cell.combo-pair {
    outline: 2px dashed #e08c2a;
    outline-offset: -2px;
}

#combo-hints {
    font-size: calc(var(--scale) * 0.5625);
    color: #555;
    letter-spacing: 1px;
    line-height: 1.6;
    padding-top: calc(var(--scale) * 0.25);
    border-top: 2px solid #333;
}

/*BENTO GRID*/
#bento-grid {
    grid-area: bento;
    display: grid;
    grid-template-columns: repeat(3, calc(var(--scale) * 4.5));
    grid-template-rows: repeat(3, calc(var(--scale) * 4.5));
    gap: calc(var(--scale) * 0.375);
    justify-content: center;
    align-content: center;
    background: var(--electric-aqua);
    border: calc(var(--scale) * 0.1875) solid #333;
    box-shadow: calc(var(--scale) * 0.1875) calc(var(--scale) * 0.1875) 0 #333;
    padding: calc(var(--scale) * 0.75);
}

.bento-cell {
    width: calc(var(--scale) * 4.5);
    height: calc(var(--scale) * 4.5);
    background: var(--lemon-chiffon);
    border: calc(var(--scale) * 0.1875) solid #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
    position: relative;
}

.bento-cell:hover {
    background: var(--aquamarine);
}

.bento-cell.correct {
    background: var(--celadon);
    border-color: #2a7a3b;
}

.bento-cell.wrong {
    background: var(--cotton-rose);
    border-color: #b03030;
}

.bento-cell.combo-glow {
    box-shadow: 0 0 0 calc(var(--scale) * 0.1875) #e08c2a;
}

.bento-cell.focused {
    outline: 3px solid #333;
    outline-offset: -3px;
    background: var(---frosted-blue);
}

/*PALETTE*/
#palette-panel {
    grid-area: palette;
    background: var(--pink-orchid);
    border: calc(var(--scale) * 0.1875) solid #333;
    padding: calc(var(--scale) * 0.625);
    display: flex;
    flex-direction: column;
    gap: calc(var(--scale) * 0.5);
}

#palette {
    display: grid;
    grid-template-columns: repeat(2, calc(var(--scale) * 3));
    gap: calc(var(--scale) * 0.375);
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(var(--scale) * 20);
}


.palette-item {
    width: calc(var(--scale) * 3);
    height: calc(var(--scale) * 3);
    background: var(--lemon-chiffon);
    border: 2px solid #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.palette-item:hover {
    background: var(--frosted-blue);
}

.palette-item.selected {
    border: 3px solid #333;
    background: var(--baby-blue-ice);
    box-shadow: 2px 2px 0 #333;
}

/* REGULAR SPRITE (3rem = 48px) */
.sprite {
    width: calc(var(--scale) * 3);
    height: calc(var(--scale) * 3);
    image-rendering: pixelated;
    background-repeat: no-repeat;
    /* Scales the 192px native file width up by 2x to match the 48px container */
    background-size: 384px auto;
}

/* SMALL SPRITE (1.5rem = 24px) */
.sprite-sm {
    width: calc(var(--scale) * 1.5);
    height: calc(var(--scale) * 1.5);
    image-rendering: pixelated;
    background-repeat: no-repeat;
    /* Matches the 192px native sheet scale perfectly at 1x sizing */
    background-size: 192px auto;
}

/*COMBO POPUP*/
#combo-popup {
    grid-area: combo-popup;
    min-height: calc(var(--scale) * 2);
    display: flex;
    flex-direction: column;
    gap: calc(var(--scale) * 0.25);
    align-items: center;
}

.combo-toast {
    background: var(--lemon-chiffon);
    border: 2px solid #333;
    box-shadow: 2px 2px 0 #333;
    padding: calc(var(--scale) * 0.25) calc(var(--scale) * 0.625);
    font-size: calc(var(--scale) * 0.625);
    letter-spacing: 1px;
    color: #333;
    animation: pop 0.2s ease-out, fadeout 0.5s ease-in 1.5s forwards;
}

@keyframes pop {
    0% {
        transform: scale(0.7);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fadeout {
    to {
        opacity: 0;
    }
}

/*OVERLAY*/
#overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--scale) * 1);
    z-index: 10;
}

#overlay.hidden {
    display: none;
}

#overlay-text {
    background: var(--lemon-chiffon);
    border: 4px solid #333;
    box-shadow: 5px 5px 0 #333;
    padding: calc(var(--scale) * 1.5) calc(var(--scale) * 2);
    font-size: calc(var(--scale) * 0.875);
    letter-spacing: 2px;
    color: #333;
    text-align: center;
    line-height: 2;
}

#overlay-btn {
    background: var(--celadon);
    border: 3px solid #333;
    box-shadow: 3px 3px 0 #333;
    padding: calc(var(--scale) * 0.5) calc(var(--scale) * 1.5);
    font-size: calc(var(--scale) * 0.8125);
    font-family: monospace;
    letter-spacing: 2px;
    cursor: pointer;
}

#overlay-btn:hover {
    background: var(--aquamarine);
}

/*CELL POP*/
@keyframes cell-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/*CELL SHAKE*/
@keyframes cell-shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    50% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(0);
    }
}

/*COMBO GLOW PULSE*/
@keyframes combo-pulse {
    0% {
        box-shadow: 0 0 0 3px #e08c2a;
    }

    50% {
        box-shadow: 0 0 0 8px #e08c2a88;
    }

    100% {
        box-shadow: 0 0 0 3px #e08c2a;
    }
}

/*COMBO TOAST SLIDE IN*/
@keyframes slide-in {
    0% {
        transform: translateX(120%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/*PALETTE BOUNCE IN*/
@keyframes bounce-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

/*RED VIGNETTE OVERLAY*/
#vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    box-shadow: inset 0 0 0px #e0525200;
    transition: box-shadow 1s ease;
}

#vignette.urgent {
    box-shadow: inset 0 0 80px #e05252aa;
    animation: vignette-pulse 0.8s step-end infinite;
}

@keyframes vignette-pulse {
    50% {
        box-shadow: inset 0 0 120px #e05252cc;
    }
}

.bento-cell.pop {
    animation: cell-pop 0.2s ease-out;
}

.bento-cell.shake {
    animation: cell-shake 0.3s ease-out;
}

.bento-cell.combo-glow {
    animation: combo-pulse 0.6s ease-in-out 3;
}

.combo-toast {
    animation: slide-in 0.3s ease-out, fadeout 0.5s ease-in 1.5s forwards;
}