/* Munchy's Cookie Munch — game styles. GameKit tokens loaded first.
   Palette: honey-butterscotch kitchen + teal monster + cocoa wood — a combo no
   other game in the suite uses (kitchens exist, but none pair teal tile with
   butterscotch walls). */

:root {
    --cm-wall: #FFE9BE;
    --cm-wall-deep: #FFCE96;
    --cm-teal: #31B5A6;
    --cm-teal-dark: #1F8C80;
    --cm-cocoa: #6B3F24;
    --cm-cocoa-deep: #4E2C17;
    --cm-cream: #FFF7E6;
    --cm-dough: #E2A45C;
    --cm-red: #E4573D;
    --cm-butter: #FCBF49;
}

html, body { overflow: hidden; }
body { background: var(--cm-wall); }

.screen {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

/* ═══════════ Kitchen backdrop ═══════════ */

#backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bk-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.cm-steam path { animation: cm-steam 3.6s ease-in-out infinite; transform-origin: center bottom; }
.cm-steam.s2 path { animation-duration: 4.4s; animation-delay: -1.2s; }
.cm-steam.s3 path { animation-duration: 3.1s; animation-delay: -2s; }
@keyframes cm-steam {
    0%, 100% { transform: translateY(0) scaleY(1); opacity: .75; }
    50%      { transform: translateY(-9px) scaleY(1.12); opacity: .35; }
}
.cm-oven-glow { animation: cm-glow 2.8s ease-in-out infinite; }
@keyframes cm-glow { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.cm-bunt { transform-origin: center top; transform-box: fill-box; animation: cm-bunt 3.4s ease-in-out infinite; }
@keyframes cm-bunt { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.4deg); } }
.cm-jar-lid { animation: cm-lid 9s ease-in-out infinite; transform-origin: 262px 194px; transform-box: view-box; }
@keyframes cm-lid { 0%, 92%, 100% { transform: rotate(0); } 94% { transform: rotate(-4deg); } 97% { transform: rotate(3deg); } }

/* ═══════════ Reduced motion — nothing moves while the child is idle ═══════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }
    .cm-steam path, .cm-oven-glow, .cm-bunt, .cm-jar-lid { animation: none !important; }
}

/* ═══════════ Title screen ═══════════ */

#screen-title { align-items: center; justify-content: center; gap: 8px; padding: 16px; }

/* soft cream chip so the title reads over the busy kitchen shelf */
.title-card {
    background: rgba(255, 247, 230, .78);
    border-radius: 26px;
    padding: 10px 22px 12px;
    box-shadow: 0 6px 18px rgba(107, 63, 36, .16);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 94%;
}

.game-title {
    font-size: clamp(2.3rem, 6.6vw, 4rem);
    line-height: 1.04;
    text-align: center;
    color: var(--cm-cocoa);
    text-shadow: 0 3px 0 #fff, 0 7px 16px rgba(107, 63, 36, .35);
    margin: 0;
}
.tagline {
    margin: 6px 0 0;
    font-size: clamp(1rem, 2.4vw, 1.3rem);
    color: #8A4A28;
    font-weight: 700;
    text-align: center;
}

.t-munchy { width: clamp(140px, 23vh, 220px); margin: 2px 0; position: relative; }
.munchy-svg { width: 100%; display: block; }
#title-munchy .munchy-svg { animation: cm-bob 3s ease-in-out infinite; }
@keyframes cm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Munchy blinks: lids are hidden, flash in every few seconds */
.m-lids { opacity: 0; animation: cm-blink 4.6s infinite; }
@keyframes cm-blink { 0%, 93.5%, 97.5%, 100% { opacity: 0; } 94.5%, 96.5% { opacity: 1; } }

.start-btn {
    font-family: inherit;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 900;
    padding: 18px 52px;
    border: none;
    border-radius: 60px;
    color: #fff;
    background: linear-gradient(180deg, #45C9BA, #1F8C80);
    box-shadow: 0 8px 0 #14655C, 0 14px 26px rgba(31, 140, 128, .4);
    cursor: pointer;
    margin-top: 6px;
}
.start-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #14655C; }
.btn-pulse { display: inline-block; animation: cm-pulse 1.6s ease-in-out infinite; }
@keyframes cm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.title-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.star-pill {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--cm-cocoa);
    background: rgba(255, 255, 255, .88);
    border: 3px solid #C9853F;
    border-radius: 40px;
    padding: 9px 18px;
    min-height: 50px;
    display: flex;
    align-items: center;
}

/* cooling rack with the three showcase cookies */
#rack-wrap { position: relative; width: min(56vw, 240px); }
.rack-svg { width: 100%; display: block; }
#rack-slots {
    position: absolute;
    left: 6%; right: 6%; bottom: 34%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}
.rack-slot { width: clamp(44px, 8vw, 62px); position: relative; }
.rack-slot svg { width: 100%; display: block; }
.rack-slot.dim svg { filter: grayscale(1) brightness(.8); opacity: .35; }
.rack-slot .slot-q {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.2rem; color: #8A4A28; opacity: .75;
}
.rack-label {
    text-align: center;
    font-size: .78rem;
    font-weight: 800;
    color: #6B3F24;
    background: rgba(255, 247, 230, .85);
    border-radius: 12px;
    padding: 2px 10px;
    margin: 2px auto 0;
    width: fit-content;
}

#level-row { display: flex; gap: 14px; margin-top: 12px; }
.lvl-btn {
    position: relative;
    font-family: inherit;
    /* thirds of the row, never a fixed floor that overflows a 320px phone */
    width: min(clamp(102px, 13vw, 130px), calc((100vw - 60px) / 3));
    min-width: 0;
    padding: 12px 6px 10px;
    border: none;
    border-radius: 22px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 5px 0 rgba(138, 74, 40, .35), 0 10px 18px rgba(138, 74, 40, .18);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.lvl-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(138, 74, 40, .35); }
.lvl-num {
    font-size: 1.4rem; font-weight: 900; color: #fff;
    background: linear-gradient(180deg, #45C9BA, #1F8C80);
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.lvl-name { font-size: .82rem; font-weight: 800; color: var(--cm-cocoa); white-space: nowrap; }
.lvl-stars { font-size: .85rem; letter-spacing: 1px; }
.lvl-stars .dim { opacity: .25; filter: grayscale(1); }
.lvl-lock { display: none; position: absolute; top: -10px; right: -4px; font-size: 1.4rem; }
.lvl-btn.locked { opacity: .68; filter: saturate(.5); }
.lvl-btn.locked .lvl-lock { display: block; }
.lvl-btn.shake { animation: cm-shake .45s ease-in-out; }
.lvl-btn.just-unlocked { animation: cm-unlock 1s ease-in-out; }
@keyframes cm-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes cm-unlock { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.15) rotate(-3deg); } 70% { transform: scale(1.07) rotate(2deg); } }

.info-btn {
    position: fixed;
    bottom: 14px;
    left: 14px;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(107, 63, 36, .3);
    z-index: 880;
}
.info-btn:active { transform: scale(.92); }

/* ═══════════ Play screen ═══════════ */

#screen-play { z-index: 10; }

#play-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 12px 0;
    min-height: 64px;
    flex-wrap: wrap;
}

#muncher-meter {
    display: flex;
    gap: 5px;
    background: rgba(255, 255, 255, .82);
    border: 3px solid rgba(176, 102, 60, .55);
    border-radius: 40px;
    padding: 6px 12px;
    box-shadow: 0 4px 10px rgba(107, 63, 36, .18);
}
.meter-dot { width: clamp(20px, 3vw, 27px); opacity: .3; filter: grayscale(.9); transition: all .3s; }
.meter-dot svg { width: 100%; display: block; }
.meter-dot.done { opacity: 1; filter: none; }
.meter-dot.fresh { animation: cm-meterpop .6s cubic-bezier(.5, 1.6, .5, 1); }
@keyframes cm-meterpop { 0% { transform: scale(.4); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* the number sentence, chalk on a little slate */
#sentence-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #3E5C52;
    border: 5px solid #8A4A28;
    border-radius: 16px;
    padding: 6px 18px;
    min-height: 54px;
    box-shadow: 0 6px 14px rgba(78, 44, 23, .3);
    font-size: clamp(1.6rem, 4.4vw, 2.3rem);
    font-weight: 900;
    color: #FFF9EA;
}
#sentence-card .s-bit { opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s; }
#sentence-card .s-bit.on { opacity: 1; transform: scale(1); }
#sentence-card .s-op { color: #9FE0D6; }
#sentence-card .s-q { color: var(--cm-butter); display: inline-block; }
#sentence-card .s-q.wonder { animation: cm-pulse 1.3s ease-in-out infinite; }
#sentence-card .s-q.solved { color: #9FF2B5; animation: cm-meterpop .6s cubic-bezier(.5, 1.6, .5, 1); }

#scene {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px 8px;
}

/* Munchy stands behind the tray's top-right corner. The margin-left trick
   keeps him glued to the TRAY (centred, max 520px) instead of the screen edge,
   so on a wide desktop he never wanders off into the oven. */
#munchy-spot {
    align-self: center;
    width: clamp(108px, 21vh, 190px);
    margin-left: min(440px, 56vw);
    margin-bottom: -16px;
    position: relative;
    z-index: 2;
}
#munchy-spot .munchy-svg { transition: transform .18s; }
#munchy-spot.mun-hop { animation: cm-hop .55s ease-out; }
#munchy-spot.mun-cheer { animation: cm-hop .55s ease-out 2; }
#munchy-spot.mun-fidget { animation: cm-fidget 1.1s ease-in-out; }
@keyframes cm-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px); } }
@keyframes cm-fidget { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 65% { transform: rotate(3deg); } }

/* Munchy's speech bubble ("Nom nom… oopsie!") — positioned by JS beside him */
#nom-bubble {
    position: absolute;
    z-index: 3;
    background: #fff;
    border: 3px solid var(--cm-teal-dark);
    border-radius: 18px 18px 4px 18px;
    padding: 7px 13px;
    font-weight: 800;
    font-size: clamp(.92rem, 2.4vw, 1.15rem);
    color: var(--cm-cocoa);
    box-shadow: 0 5px 12px rgba(31, 140, 128, .3);
    max-width: min(52vw, 300px);
    animation: cm-bubblein .3s cubic-bezier(.4, 1.5, .6, 1);
    pointer-events: none;
}
@keyframes cm-bubblein { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* the ten-frame tray */
#tray-zone { position: relative; width: min(100%, 520px); z-index: 1; }
#tray-base { position: absolute; inset: 0; }
#tray-base svg { width: 100%; height: 100%; display: block; }
#tray-frame {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(4px, 1vw, 8px);
    padding: clamp(12px, 2.6vw, 22px) clamp(14px, 3vw, 26px);
}
.cell {
    position: relative;
    aspect-ratio: 1;
    border: 2.5px dashed rgba(176, 102, 60, .5);
    border-radius: 14px;
    min-width: 0;
}
.cookie-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    padding: 4%;
    cursor: pointer;
}
.cookie-btn svg { width: 100%; height: 100%; display: block; }
.cookie-btn.pop-in { animation: cm-cookiein .4s cubic-bezier(.4, 1.6, .5, 1) backwards; }
@keyframes cm-cookiein { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }
.cookie-btn.count-pulse { animation: cm-countpulse .5s ease-in-out; }
@keyframes cm-countpulse {
    0%, 100% { transform: scale(1); filter: none; }
    45% { transform: scale(1.22); filter: drop-shadow(0 0 10px var(--cm-butter)); }
}
.ghost-wrap { position: absolute; inset: 0; padding: 4%; pointer-events: none; }
.ghost-wrap svg { width: 100%; height: 100%; display: block; }
.ghost-wrap.count-pulse { animation: cm-countpulse .5s ease-in-out; }

/* Mystery Munch napkin pieces: each covers one cell and overhangs so a run
   reads as one draped gingham cloth */
.cell-napkin {
    position: absolute;
    inset: -7%;
    z-index: 4;
    pointer-events: none;
}
.cell-napkin svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 5px rgba(78, 44, 23, .3)); }
.cell-napkin.wiggle { animation: cm-napwiggle .45s ease-in-out; }
@keyframes cm-napwiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    30% { transform: rotate(-4deg) scale(1.08); }
    65% { transform: rotate(3deg) scale(1.04); }
}

/* flying bits */
.fly-cookie { position: fixed; z-index: 60; width: clamp(40px, 9vw, 60px); pointer-events: none; }
.fly-cookie svg { width: 100%; display: block; }
.fly-showcase { position: fixed; z-index: 70; width: 110px; pointer-events: none; }
.fly-showcase svg { width: 100%; }
.crumb-bit { position: fixed; z-index: 61; width: 9px; height: 7px; border-radius: 50%; background: #C98F52; pointer-events: none; }
.nom-pop {
    position: fixed;
    z-index: 62;
    font-weight: 900;
    font-size: 1.3rem;
    color: var(--cm-teal-dark);
    text-shadow: 0 2px 0 #fff;
    pointer-events: none;
    animation: cm-nompop .8s ease-out forwards;
}
@keyframes cm-nompop {
    0% { transform: translateY(0) scale(.6) rotate(-8deg); opacity: 0; }
    25% { opacity: 1; transform: translateY(-12px) scale(1.15) rotate(4deg); }
    100% { transform: translateY(-44px) scale(1) rotate(-4deg); opacity: 0; }
}
.spark-pop {
    position: fixed;
    z-index: 62;
    font-size: 1.25rem;
    pointer-events: none;
    animation: cm-nompop .7s ease-out forwards;
}

/* answer tiles */
#answer-bar {
    position: relative;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #B0663C, #8A4A28);
    border-top: 5px solid #5E3418;
    box-shadow: 0 -8px 22px rgba(78, 44, 23, .3);
    z-index: 20;
}
#answer-plate {
    display: flex;
    justify-content: center;
    gap: clamp(8px, 2.4vw, 22px);
    min-height: 92px;   /* the bar keeps its shape while the tray is being served */
}
#answer-plate.disabled .choice-btn { opacity: .55; }
.choice-btn {
    font-family: inherit;
    width: min(118px, calc((100% - 44px) / 3));
    min-width: 0;
    min-height: 92px;
    border: none;
    border-radius: 20px;
    background: var(--cm-cream);
    box-shadow: 0 6px 0 #C9963F, 0 10px 16px rgba(78, 44, 23, .32);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px;
    transition: transform .12s, opacity .3s;
}
.choice-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #C9963F; }
.choice-num { font-size: 2.3rem; font-weight: 900; color: var(--cm-cocoa); line-height: 1; }
.choice-btn .mini-cookie { width: 20px; opacity: .8; }
.choice-btn .mini-cookie svg { width: 100%; display: block; }
.choice-btn.shake { animation: cm-shake .45s ease-in-out; }
.choice-btn.picked { animation: cm-meterpop .5s cubic-bezier(.5, 1.6, .5, 1); }
.choice-btn.faded { opacity: .18; pointer-events: none; }
.choice-btn.glow { animation: cm-glowtile 1s ease-in-out infinite; }
@keyframes cm-glowtile {
    0%, 100% { box-shadow: 0 6px 0 #C9963F, 0 0 0 4px rgba(252, 191, 73, 0); }
    50% { box-shadow: 0 6px 0 #C9963F, 0 0 0 10px rgba(252, 191, 73, .55); transform: scale(1.05); }
}

/* ═══════════ Overlays ═══════════ */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 890;
    background: rgba(78, 44, 23, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.overlay-card {
    position: relative;
    max-width: 560px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    padding: 26px 26px 22px;
}
.overlay-card h3 { margin: 0 0 12px; font-size: 1.5rem; color: var(--cm-cocoa); }
.overlay-card p { line-height: 1.55; color: #5E3C26; margin: 0 0 12px; }
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: #F5E6CB;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--cm-cocoa);
    cursor: pointer;
}
.close-btn:active { transform: scale(.92); }
.tip-row { display: flex; gap: 12px; align-items: flex-start; background: #FBF1DC; border-radius: 14px; padding: 12px; }
.tip-icons { font-size: 1.6rem; }
.tip-row p { margin: 0; font-size: .95rem; }
#info-frame { display: flex; gap: 4px; justify-content: center; margin: 4px 0 14px; }
#info-frame .demo-cell { width: 40px; }
#info-frame .demo-cell svg { width: 100%; display: block; }

/* ═══════════ Phones ═══════════ */

/* Clear the fixed HUD on every screen — tokens, never re-derived literals. */
/* Wider screens keep the top strip in the HUD's row, so reserve the HUD's
   width on BOTH sides: the centred meter+sentence row can wrap, but it can
   never slide under the pills (at 768px it otherwise would, by ~11px). */
@media (min-width: 720px) {
    #play-top { padding-inline: var(--gk-hud-clear-right); }
}
@media (max-width: 719px) {
    #screen-title {
        padding-top: var(--gk-hud-clear-top);
        justify-content: center;
        justify-content: safe center;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    #play-top { padding-top: var(--gk-hud-clear-top); }
}

/* The grown-ups button sits over the answer bar's left edge on phones; give
   the bar an inline reserve so no tile ever hides under it. Tight 8px gaps
   keep the tiles ≥88px wide on 393/430 phones; at 320 they narrow to ~69px
   (tumble-towers precedent) but keep their full ≥92px height — far above the
   48px floor. */
@media (max-width: 719px) {
    #answer-plate { gap: 8px; }
    .choice-btn { width: min(118px, calc((100% - 16px) / 3)); }
    #munchy-spot { margin-bottom: -10px; }
}
/* wider than this, the centred plate can never reach the corner button */
@media (max-width: 560px) {
    #answer-bar { padding-left: var(--gk-corner-clear); }
}

@media (max-height: 700px) {
    .t-munchy { width: clamp(112px, 19vh, 170px); }
    #level-row { margin-top: 8px; }
    #rack-wrap { width: min(70vw, 250px); }
}

/* Small phones (320×568): tighten the title column so PLAY, the rack AND the
   level picker all fit, and reserve the bottom-left strip so the fixed
   grown-ups button can never sit on the level buttons. */
@media (max-height: 620px) {
    #screen-title { gap: 4px; padding-bottom: var(--gk-corner-clear); }
    .title-card { padding: 6px 16px 8px; }
    .game-title { font-size: 1.88rem; }
    .tagline { font-size: .84rem; margin-top: 2px; }
    .t-munchy { width: clamp(74px, 13vh, 110px); margin: 0; }
    .start-btn { font-size: 1.28rem; padding: 10px 40px; box-shadow: 0 6px 0 #14655C, 0 10px 20px rgba(31, 140, 128, .4); }
    .title-row { margin-top: 4px; gap: 8px; }
    .star-pill { min-height: 40px; padding: 5px 12px; font-size: .94rem; }
    #rack-wrap { width: min(48vw, 168px); }
    .rack-label { font-size: .64rem; }
    .rack-slot { width: clamp(34px, 6vw, 46px); }
    #level-row { margin-top: 4px; gap: 10px; }
    .lvl-btn { padding: 7px 5px 6px; }
    .lvl-num { width: 32px; height: 32px; font-size: 1.1rem; }
    .lvl-name { font-size: .72rem; }
    .lvl-stars { font-size: .72rem; }
}