/* Scout's Seek-a-Boo — game styles. GameKit tokens loaded first.
   Three scenes, one living stage: everything sways gently, everything reacts. */

:root {
    --sb-ink: #2E4668;
    --sb-cream: #FFF8F0;
}

html, body { overflow: hidden; }
body { background: #C9EED9; }

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

/* scene backdrops (body carries the scene class) */
body, body.scene-garden {
    background: linear-gradient(to bottom, #BFE3F7 0%, #D9F0E2 40%, #9DBE55 78%, #7FA83F 100%);
}
body.scene-pond {
    background: linear-gradient(to bottom, #BFE3F7 0%, #BFE8F2 34%, #6FBBE8 62%, #4F93C9 100%);
}
body.scene-toys {
    background: linear-gradient(to bottom, #FBE3EC 0%, #F5E6C8 40%, #E2B27E 78%, #C98F5A 100%);
}

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

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

.game-title {
    font-size: clamp(2.3rem, 6.6vw, 4rem);
    line-height: 1.02;
    text-align: center;
    color: var(--sb-ink);
    text-shadow: 0 3px 0 #fff, 0 6px 14px rgba(46, 70, 104, .3);
    margin: 0;
}
.tagline {
    margin: 6px 0 0;
    font-size: clamp(1rem, 2.4vw, 1.3rem);
    color: #3F6E54;
    font-weight: 700;
    text-align: center;
}
.t-row { display: flex; align-items: flex-end; gap: 10px; }
.t-scout { width: clamp(130px, 21vh, 200px); }
.scout-svg { width: 100%; display: block; overflow: visible; }
#title-scout .scout-svg { animation: sb-bob 3s ease-in-out infinite; }
@keyframes sb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.t-items { display: flex; align-items: flex-end; gap: 4px; }
.t-items svg { width: clamp(44px, 8vh, 70px); height: auto; }
.t-items svg:nth-child(2) { width: clamp(52px, 9.4vh, 82px); }
.t-items svg:nth-child(3) { animation: sb-twinkle 2s ease-in-out infinite; }
@keyframes sb-twinkle { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.12); } }

.start-btn {
    font-family: inherit;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 900;
    padding: 18px 54px;
    border: none;
    border-radius: 60px;
    color: #fff;
    background: linear-gradient(180deg, #6F8FC9, #3F5E8C);
    box-shadow: 0 8px 0 #2E4668, 0 14px 26px rgba(46, 70, 104, .35);
    cursor: pointer;
    margin-top: 8px;
}
.start-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #2E4668; }
.btn-pulse { display: inline-block; animation: sb-pulse 1.6s ease-in-out infinite; }
@keyframes sb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.title-row { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.star-pill, .album-btn {
    font-family: inherit;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--sb-ink);
    background: rgba(255, 255, 255, .88);
    border: 3px solid #3F5E8C;
    border-radius: 40px;
    padding: 10px 20px;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.album-btn { cursor: pointer; }
.album-btn:active { transform: scale(.95); }

#level-row { display: flex; gap: 16px; margin-top: 14px; }
.lvl-btn {
    position: relative;
    font-family: inherit;
    /* Cap at a third of the usable width: the 106px clamp floor x3 plus gaps came to
       350px, so on a 320px phone the centred row pushed levels 1 and 3 past both
       edges of a screen that cannot scroll (.screen is fixed/inset:0 over
       overflow:hidden), making them untappable. */
    width: min(clamp(106px, 13vw, 136px), calc((100vw - 56px) / 3));
    padding: 12px 8px 10px;
    border: none;
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 0 rgba(46, 70, 104, .3), 0 10px 18px rgba(46, 70, 104, .16);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.lvl-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(46, 70, 104, .3); }
.lvl-num {
    font-size: 1.5rem; font-weight: 900; color: #fff;
    background: linear-gradient(180deg, #8FCB5E, #5B8A3C);
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.lvl-name { font-size: .84rem; font-weight: 800; color: var(--sb-ink); }
.lvl-stars { font-size: .9rem; letter-spacing: 1px; }
.lvl-stars .dim { opacity: .25; filter: grayscale(1); }
.lvl-lock { display: none; position: absolute; top: -10px; right: -6px; font-size: 1.5rem; }
.lvl-btn.locked { opacity: .68; filter: saturate(.5); }
.lvl-btn.locked .lvl-lock { display: block; }
.lvl-btn.shake { animation: sb-shake .45s ease-in-out; }
.lvl-btn.just-unlocked { animation: sb-unlock 1s ease-in-out; }
@keyframes sb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes sb-unlock { 40% { transform: scale(1.16) rotate(-3deg); } 70% { transform: scale(1.08) rotate(2deg); } }

.info-btn {
    position: absolute;
    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(46, 70, 104, .25);
    z-index: 40;
}
.info-btn:active { transform: scale(.92); }

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

#play-top {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px 0;
    min-height: 86px;
    position: relative;
    z-index: 30;
}
#tracker {
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    gap: 4px;
    align-items: center;
    background: rgba(255, 255, 255, .85);
    border: 3px solid rgba(63, 94, 140, .5);
    border-radius: 40px;
    padding: 6px 14px;
    font-size: 1.2rem;
    font-weight: 900;
    color: #3F5E8C;
}
.trk-dot.done { animation: sb-found-pop .5s cubic-bezier(.5,1.6,.5,1); }
@keyframes sb-found-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }

#request-bubble {
    max-width: min(560px, 72vw);
    background: var(--sb-cream);
    border: 4px solid #3F5E8C;
    border-radius: 26px 26px 26px 8px;
    padding: 12px 22px;
    font-size: clamp(1.15rem, 2.8vw, 1.7rem);
    font-weight: 900;
    color: var(--sb-ink);
    box-shadow: 0 8px 18px rgba(46, 70, 104, .25);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}
#request-bubble::before { content: '🔍'; font-size: 1.3em; }
#request-bubble.pop { animation: sb-bubblepop .45s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes sb-bubblepop { from { transform: scale(.4) rotate(-4deg); opacity: 0; } }

/* the living stage */
#stage {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 0 clamp(6px, 2vw, 26px) clamp(8px, 2vh, 18px);
}
.scene-decor { position: absolute; inset: -4% -3% -6%; pointer-events: none; z-index: 0; }
.decor-svg { width: 100%; height: 100%; display: block; }
.sc-item {
    position: absolute;
    z-index: 2;
    width: calc(clamp(58px, 8.6vw, 104px) * var(--sz, 1));
    aspect-ratio: 1;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transform: translate(-50%, -50%);
    animation: sb-sway var(--sway, 3s) ease-in-out var(--delay, 0s) infinite;
}
.sc-item svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 5px rgba(40, 50, 30, .28)); }
@keyframes sb-sway {
    0%, 100% { transform: translate(-50%, -50%) rotate(-2.4deg); }
    50% { transform: translate(-50%, -52%) rotate(2.4deg); }
}
.sc-item.boop { animation: sb-boop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sb-boop {
    30% { transform: translate(-50%, -54%) rotate(-9deg) scale(1.14); }
    65% { transform: translate(-50%, -49%) rotate(7deg) scale(.96); }
    100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
}
.sc-item.shimmer { animation: sb-shimmer 1.1s ease-in-out 2; }
@keyframes sb-shimmer {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(252, 191, 73, 0)); transform: translate(-50%, -50%) scale(1); }
    50% { filter: drop-shadow(0 0 16px rgba(252, 191, 73, 1)); transform: translate(-50%, -52%) scale(1.12); }
}
.sc-item.found {
    animation: sb-founditem .55s cubic-bezier(.3, 1.5, .5, 1) forwards;
    pointer-events: none;
}
@keyframes sb-founditem {
    40% { transform: translate(-50%, -58%) scale(1.3) rotate(6deg); }
    100% { transform: translate(-50%, -50%) scale(1.06); filter: drop-shadow(0 0 12px rgba(252, 191, 73, .9)); }
}
.sc-item.found::after {
    content: '✔';
    position: absolute;
    right: -6px; top: -6px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #7CB518;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(40, 70, 20, .4);
}
.sc-item.gold-found::after { background: #E8A828; content: '★'; }

.find-spark {
    position: fixed;
    z-index: 70;
    font-size: 1.1rem;
    pointer-events: none;
    animation: sb-spark .75s ease-out forwards;
}
@keyframes sb-spark {
    from { transform: translate(0, 0) scale(.6); opacity: 1; }
    to   { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: 0; }
}

#scout-side {
    position: absolute;
    right: 1.5%;
    bottom: 0;
    width: clamp(84px, 11vw, 148px);
    z-index: 25;
    pointer-events: none;
}
#scout-side .sr-glass { transform-box: fill-box; transform-origin: 20% 80%; transition: transform .3s; }
#scout-side.point .sr-glass { transform: rotate(-26deg) translateY(-8px); }
#scout-side.cheer .sr-all { animation: sb-cheer .5s ease-in-out 2; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sb-cheer { 40% { transform: translateY(-16px) rotate(-4deg); } }
#scout-side.peek .sr-all { animation: sb-peek 1s ease-in-out; transform-box: fill-box; transform-origin: 50% 90%; }
@keyframes sb-peek { 30%, 70% { transform: rotate(5deg); } }
.sr-tail { transform-box: fill-box; transform-origin: 10% 90%; animation: sb-tailwag 4.4s ease-in-out infinite; }
@keyframes sb-tailwag { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(7deg); } }

.fly-badge { position: fixed; z-index: 70; width: 110px; pointer-events: none; }
.fly-badge svg { width: 100%; }

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

.overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(30, 44, 70, .5);
    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(--sb-ink); }
.overlay-card p { line-height: 1.55; color: #46527A; margin: 0 0 12px; }
.close-btn {
    position: absolute;
    top: 10px; right: 10px;
    width: 48px; height: 48px;
    border: none;
    border-radius: 50%;
    background: #E2EAF5;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--sb-ink);
    cursor: pointer;
}
.close-btn:active { transform: scale(.92); }

#badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.badge-cell { background: #F2F6FB; border-radius: 16px; padding: 10px 6px 8px; text-align: center; }
.badge-cell svg { width: 64%; max-width: 86px; }
.badge-cell.dim svg { filter: grayscale(1) brightness(.8); opacity: .5; }
.badge-name { font-size: .8rem; font-weight: 800; color: var(--sb-ink); margin-top: 4px; }

.tip-row { display: flex; gap: 12px; align-items: flex-start; background: #F2F6FB; border-radius: 14px; padding: 12px; }
.tip-icons { font-size: 1.6rem; }
.tip-row p { margin: 0; font-size: .95rem; }

@media (max-width: 880px) {
    #scout-side { width: clamp(66px, 9vw, 100px); }
    #request-bubble { max-width: 60vw; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
    /* Nothing may MOVE while the child is idle. Verified by pixel-diffing five
       idle frames under reduce: this page changed on every one. Snap each
       animation to its final keyframe (iteration-count:1 + ~0 duration) rather
       than `animation:none`, because several entry animations fill `both`/
       `forwards` and their last frame is the state the art is supposed to hold —
       removing the animation outright would leave those elements mid-nothing.
       Every keyframe set on this page ends on its own rest pose, so this stops
       the motion without losing a single piece of art. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        /* and no stagger: these delays are set inline by the art code (up to 5s
           on lost-star's cover). An animation counts as running for the whole
           delay, so without this each one snapped to its end frame seconds
           after load, one at a time — the page kept twitching long after the
           child arrived. Zeroed, everything is settled by first paint. */
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }
    .sc-item, .sr-tail, .t-items svg:nth-child(3) { animation: none !important; }
}

/* ── Title screen must be reachable on short phones ────────────────────────
   Two faults stacked here. The 3-across level row was 350px wide in a 320px
   viewport, clipping levels 1 and 3 past both edges (fixed by the width cap on
   .lvl-btn above); underneath that sat a further 5px of vertical overflow. .screen
   is position:fixed/inset:0 with html+body overflow:hidden — right for play, so a
   child can't drag the scene away — so nothing past the fold was reachable at all.
   An #id rule so it beats .screen's overflow, and flex-shrink:0 so content can
   exceed the viewport instead of compressing. Play screens stay unscrollable. */
#screen-title {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#screen-title > * { flex-shrink: 0; }

/* ── The prompt must clear the HUD ─────────────────────────────────────────
   "Find three green things!" is the one thing a child has to be able to read, and
   it was rendering UNDERNEATH the HUD. Measured with elementFromPoint at the
   bubble's right end, the topmost element was gk-hud / gk-hud-btn at 320, 375, 393
   and 430px wide — the home and mute buttons literally cover the words.

   It can't be solved by narrowing the bubble. The HUD owns a 188x68 block in the
   top-right and #tracker owns the top-left, so the strip is fully occupied: at
   320px the free gap between them is 26px. So drop the strip below the HUD band.
   #tracker is absolutely positioned against #play-top's padding box, so padding-top
   moves the bubble without moving the pill. Verified clean at 768px+ already, where
   the centred bubble clears the HUD on its own, so this stays scoped to phones.

   The first pass at this reserved 62px by eye and left the bubble's top 6px still
   under the pills — the HUD's bottom edge is at 68px, not 62. Hence the shared
   --gk-hud-clear-top token: it is computed from the HUD's own inset and button
   size in gamekit.css, so it cannot drift out of step with it again. */
@media (max-width: 760px) {
    #play-top { padding-top: var(--gk-hud-clear-top); }
}