/* Glow's Word Fireflies — styles. GameKit tokens load first.
   Palette: twilight meadow — deep indigo top, violet dusk, a rose afterglow
   band at the horizon, near-black grass silhouettes and warm firefly gold.
   (Distinct from lost-star's navy space, dot-to-dot's purple night and
   moon-race's space gradient: the rose horizon band is this game's light.) */

:root {
    --wf-sky-top: #150D36;
    --wf-sky-mid: #3A2B6E;
    --wf-dusk: #6C4276;
    --wf-rose: #A85C7C;
    --wf-grass-far: #241A4E;
    --wf-grass-mid: #191140;
    --wf-grass-near: #0E0926;
    --wf-glow: #FFE9A0;
    --wf-gold: #FFD36E;
    --wf-gold-deep: #E8A828;
    --wf-cream: #FFF6DC;
    --wf-lav: #C9B8F0;
    --wf-ink: #241537;
    --wf-card: rgba(28, 17, 58, 0.78);
    --wf-card-edge: rgba(255, 222, 130, 0.5);
}

html, body { overflow: hidden; }
body { background: var(--wf-sky-top); }

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

/* ═══════════ Backdrop — twilight meadow ═══════════ */

#backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.bk-sky {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom,
        var(--wf-sky-top) 0%, #241A55 30%, var(--wf-sky-mid) 52%,
        var(--wf-dusk) 70%, var(--wf-rose) 84%, #55305C 100%);
}
.bk-stars { position: absolute; top: 0; left: 0; right: 0; height: 62%; }
.bk-star {
    position: absolute;
    border-radius: 50%;
    background: #FFF7DF;
    box-shadow: 0 0 6px 1px rgba(255, 247, 223, 0.5);
    animation: wf-tw 3s ease-in-out infinite;
}
.bk-sparkle { position: absolute; width: 13px; height: 13px; animation: wf-tw 3.4s ease-in-out infinite; }
.bk-sparkle svg { width: 100%; height: 100%; display: block; }
.wf-tw { animation: wf-tw 3s ease-in-out infinite; }
@keyframes wf-tw { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

:root {
    --wf-moon-x: clamp(-14px, 2vw, 52px);
    --wf-moon-y: clamp(44px, 8vh, 92px);
    --wf-moon-sz: clamp(84px, 16vmin, 150px);
}
.bk-moon {
    position: absolute;
    left: var(--wf-moon-x);
    top: var(--wf-moon-y);
    width: var(--wf-moon-sz);
    filter: drop-shadow(0 0 26px rgba(255, 243, 201, 0.55));
}
.bk-moon svg { width: 100%; display: block; }
.bk-moonhalo {
    position: absolute;
    left: var(--wf-moon-x);
    top: var(--wf-moon-y);
    width: var(--wf-moon-sz);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 243, 201, 0.3) 0%,
        rgba(255, 243, 201, 0.14) 34%,
        rgba(255, 243, 201, 0.05) 52%,
        rgba(255, 243, 201, 0) 66%);
    transform: scale(2.4);
}

.bk-mist {
    position: absolute; left: 0; right: 0; bottom: 14%; height: 26%;
    background:
        radial-gradient(60% 90% at 24% 70%, rgba(201, 184, 240, 0.16), transparent 70%),
        radial-gradient(50% 80% at 76% 60%, rgba(255, 214, 160, 0.12), transparent 70%);
}

.bk-hills { position: absolute; left: 0; right: 0; bottom: 13%; height: clamp(60px, 12vh, 120px); }
.bk-hills svg { width: 100%; height: 100%; display: block; }
.bk-grass-far { position: absolute; left: 0; right: 0; bottom: 4%; height: clamp(70px, 14vh, 140px); }
.bk-grass-near { position: absolute; left: -8px; right: -8px; bottom: -6px; height: clamp(84px, 17vh, 170px); }
.bk-grass-far svg, .bk-grass-near svg { width: 100%; height: 100%; display: block; }
.bk-grass-far { animation: wf-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.bk-grass-near { animation: wf-sway 5.4s ease-in-out infinite reverse; transform-origin: 50% 100%; }
@keyframes wf-sway { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(1.6deg); } }

/* ambient drifting fireflies (pure decoration) */
.bk-fly {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF6CE, rgba(255, 214, 110, 0));
    box-shadow: 0 0 12px 4px rgba(255, 220, 120, 0.5);
    transform: scale(var(--sc, 1));
    animation: wf-amb var(--dur, 9s) ease-in-out var(--dl, 0s) infinite alternate;
}
@keyframes wf-amb {
    0%   { transform: translate(0, 0) scale(var(--sc, 1)); opacity: 0.25; }
    30%  { opacity: 0.95; }
    60%  { opacity: 0.4; }
    100% { transform: translate(var(--dx, 6vmin), var(--dy, -5vmin)) scale(var(--sc, 1)); opacity: 0.85; }
}

/* one shy shooting star, once in a while */
.bk-shoot {
    position: absolute;
    left: 12%; top: 10%;
    width: 90px; height: 2.5px;
    border-radius: 3px;
    background: linear-gradient(to right, rgba(255, 251, 226, 0), #FFFBE2);
    transform: rotate(24deg);
    opacity: 0;
    animation: wf-shoot 17s ease-in 4s infinite;
}
@keyframes wf-shoot {
    0%, 96%, 100% { opacity: 0; transform: rotate(24deg) translateX(0); }
    97% { opacity: 0.9; }
    99% { opacity: 0; transform: rotate(24deg) translateX(52vw); }
}

@media (prefers-reduced-motion: reduce) {
    .wf-tw, .bk-star, .bk-sparkle, .bk-fly, .bk-shoot,
    .bk-grass-far, .bk-grass-near { animation: none !important; }
    .bk-fly { opacity: 0.55; }
}

/* ═══════════ Glow's rig (title + play corner) ═══════════ */

.glow-svg { width: 100%; display: block; overflow: visible; }
.gl-eyes { transform-origin: 100px 60px; animation: wf-blink 4.6s infinite; }
@keyframes wf-blink { 0%, 92%, 100% { transform: scaleY(1); } 95%, 97% { transform: scaleY(0.1); } }
.gl-wing { animation: wf-flutter 0.9s ease-in-out infinite alternate; }
.gl-wing-l { transform-origin: 60px 104px; }
.gl-wing-r { transform-origin: 140px 104px; animation-delay: 0.12s; }
@keyframes wf-flutter { from { transform: rotate(0deg); } to { transform: rotate(7deg); } }
.gl-wing-r.gl-wing { animation-name: wf-flutter-r; }
@keyframes wf-flutter-r { from { transform: rotate(0deg); } to { transform: rotate(-7deg); } }
.gl-lantern { animation: wf-lantern 2.8s ease-in-out infinite; transform-origin: 100px 146px; }
@keyframes wf-lantern {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 222, 130, 0.55)); }
    50% { filter: drop-shadow(0 0 26px rgba(255, 222, 130, 0.95)); }
}
.gl-tip { animation: wf-tw 2.2s ease-in-out infinite; }
.gl-scarf { transform-origin: 122px 100px; animation: wf-scarf 3.4s ease-in-out infinite; }
@keyframes wf-scarf { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } }

@media (prefers-reduced-motion: reduce) {
    .gl-eyes, .gl-wing, .gl-tip, .gl-scarf { animation: none !important; }
    /* the lantern keeps a soft steady glow — light, not motion */
    .gl-lantern { animation: none !important; filter: drop-shadow(0 0 14px rgba(255, 222, 130, 0.7)); }
}

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

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

.game-title {
    font-size: clamp(2.3rem, 7vw, 4rem);
    line-height: 1.04;
    text-align: center;
    color: var(--wf-cream);
    text-shadow: 0 0 26px rgba(255, 214, 110, 0.55), 0 3px 0 rgba(20, 10, 44, 0.9), 0 8px 22px rgba(0, 0, 0, 0.5);
    margin: 0;
}
.tagline {
    margin: 4px 0 0;
    font-size: clamp(0.98rem, 2.4vw, 1.25rem);
    color: var(--wf-lav);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.t-row { display: flex; align-items: center; gap: 4px; margin: 2px 0; }
.t-glow { width: clamp(116px, 20vh, 180px); }
#title-glow .glow-svg { animation: wf-hover 3.2s ease-in-out infinite; }
@keyframes wf-hover { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }

.t-flies { display: flex; flex-direction: column; gap: 10px; }
.t-fly {
    position: relative;
    width: clamp(58px, 9vh, 78px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 238, 170, 0.95) 0%, rgba(255, 224, 130, 0.5) 48%, rgba(255, 210, 110, 0) 72%);
    box-shadow: 0 0 22px 6px rgba(255, 220, 120, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: wf-hover 2.7s ease-in-out infinite;
}
.t-fly:nth-child(2) { animation-delay: 0.9s; margin-left: 14px; }
.t-fly svg { position: absolute; top: -26%; left: 50%; width: 62%; transform: translateX(-50%); }
.t-fly span {
    font-weight: 900;
    font-size: clamp(1rem, 2.1vh, 1.2rem);
    color: var(--wf-ink);
    margin-top: 14%;
}
@media (prefers-reduced-motion: reduce) {
    #title-glow .glow-svg, .t-fly { animation: none !important; }
}

.start-btn {
    font-family: inherit;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 900;
    padding: 16px 52px;
    border: none;
    border-radius: 60px;
    color: #4A2A10;
    background: linear-gradient(180deg, #FFE18E, #F5A93C);
    box-shadow: 0 7px 0 #B4762A, 0 0 34px rgba(255, 214, 110, 0.45), 0 14px 26px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    margin-top: 6px;
}
.start-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 #B4762A, 0 0 22px rgba(255, 214, 110, 0.4); }
.btn-pulse { display: inline-block; animation: wf-pulse 1.6s ease-in-out infinite; }
@keyframes wf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.title-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.star-pill, .jar-btn {
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--wf-cream);
    background: var(--wf-card);
    border: 3px solid rgba(201, 184, 240, 0.45);
    border-radius: 40px;
    padding: 10px 18px;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.jar-btn { cursor: pointer; border-color: var(--wf-card-edge); box-shadow: 0 0 16px rgba(255, 214, 110, 0.18); }
.jar-btn:active { transform: scale(0.95); }

#level-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px;
    margin-top: 12px;
    width: min(100%, 470px);
}
.lvl-btn {
    position: relative;
    font-family: inherit;
    padding: 10px 6px 8px;
    border: 2px solid rgba(255, 222, 130, 0.32);
    border-radius: 22px;
    background: var(--wf-card);
    box-shadow: 0 5px 0 rgba(10, 5, 26, 0.7), 0 10px 22px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.lvl-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(10, 5, 26, 0.7); }
.lvl-num {
    font-size: 1.35rem; font-weight: 900; color: #4A2A10;
    background: linear-gradient(180deg, #FFE18E, #EFA43C);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex: none;
    box-shadow: 0 0 14px rgba(255, 214, 110, 0.4);
}
.lvl-name { font-size: 0.85rem; font-weight: 800; color: var(--wf-cream); }
.lvl-found { font-size: 0.78rem; font-weight: 700; color: var(--wf-lav); }
.lvl-stars { font-size: 0.88rem; letter-spacing: 1px; }
.lvl-stars .dim { opacity: 0.25; filter: grayscale(1); }
.lvl-lock { display: none; position: absolute; top: -10px; right: -6px; font-size: 1.5rem; }
.lvl-btn.locked { opacity: 0.62; filter: saturate(0.55); }
.lvl-btn.locked .lvl-lock { display: block; }
.lvl-btn.shake { animation: wf-shake 0.45s ease-in-out; }
.lvl-btn.just-unlocked { animation: wf-unlock 1s ease-in-out; }
@keyframes wf-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes wf-unlock { 0%, 100% { transform: scale(1); } 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, 246, 220, 0.88);
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
    z-index: 40;
}
.info-btn:active { transform: scale(0.92); }

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

#play-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 12px 2px;
    z-index: 6;
}

#word-banner {
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 3px solid var(--wf-card-edge);
    border-radius: 44px;
    background: var(--wf-card);
    box-shadow: 0 0 26px rgba(255, 214, 110, 0.28), inset 0 0 18px rgba(255, 214, 110, 0.12);
    padding: 7px 24px;
    min-height: 66px;
    cursor: pointer;
    animation: wf-bannerglow 3s ease-in-out infinite;
}
@keyframes wf-bannerglow {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 214, 110, 0.22), inset 0 0 18px rgba(255, 214, 110, 0.1); }
    50% { box-shadow: 0 0 32px rgba(255, 214, 110, 0.4), inset 0 0 22px rgba(255, 214, 110, 0.16); }
}
#word-banner:active { transform: scale(0.97); }
.banner-col { display: flex; flex-direction: column; align-items: center; }
#banner-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wf-lav);
}
#banner-word {
    display: flex;
    gap: 2px;
    font-size: clamp(1.9rem, 4.6vh, 2.6rem);
    font-weight: 900;
    color: #FFEFB0;
    letter-spacing: 0.04em;
    line-height: 1.05;
    text-shadow: 0 0 18px rgba(255, 220, 120, 0.65);
}
#banner-word .bw-letter {
    opacity: 0;
    transform: translateY(10px) scale(0.5);
    transition: all 0.26s cubic-bezier(0.34, 1.5, 0.5, 1);
}
#banner-word .bw-letter.in { opacity: 1; transform: none; }
#banner-ear { font-size: 1.3rem; filter: drop-shadow(0 0 6px rgba(255, 220, 120, 0.6)); }
@media (prefers-reduced-motion: reduce) {
    #word-banner { animation: none; }
    #banner-word .bw-letter { transition: opacity 0.2s; transform: none; }
}

#meadow {
    position: relative;
    flex: 1;
    min-height: 0;
    z-index: 4;
}

/* ── catchable fireflies ── */
.ff {
    position: absolute;
    width: var(--ff-sz);
    height: var(--ff-sz);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    z-index: 5;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
:root { --ff-sz: clamp(92px, 16vh, 132px); }

.ff-halo {
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 248, 205, 0.98) 0%,
        rgba(255, 230, 138, 0.85) 38%,
        rgba(255, 212, 105, 0.32) 62%,
        rgba(255, 206, 95, 0) 74%);
    box-shadow: 0 0 30px 8px rgba(255, 216, 105, 0.42);
    animation: wf-halotw 2.6s ease-in-out infinite;
}
/* the halo's soft light stays breathing under reduced motion on purpose:
   it is opacity only — the designed "twinkle, not travel" calm state */
@keyframes wf-halotw { 0%, 100% { opacity: 1; } 50% { opacity: 0.82; } }
.ff-bug {
    position: absolute;
    top: -22%;
    left: 50%;
    width: 62%;
    transform: translateX(-50%);
    pointer-events: none;
    filter: drop-shadow(0 3px 5px rgba(14, 9, 38, 0.35));
}
.ff-bug svg { width: 100%; display: block; overflow: visible; }
.fb-wing { animation: wf-flutter 0.5s ease-in-out infinite alternate; }
.fb-wing-l { transform-origin: 48px 44px; }
.fb-wing-r { transform-origin: 72px 44px; animation-name: wf-flutter-r; }
.ff-word {
    position: absolute;
    left: 2%;
    right: 2%;
    top: 54%;
    transform: translateY(-50%);
    text-align: center;
    font-weight: 900;
    font-size: clamp(1.35rem, 3.2vh, 1.8rem);
    color: var(--wf-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

.ff.in { animation: wf-ffin 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(var(--i) * 0.14s); }
@keyframes wf-ffin { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
.ff.out { animation: wf-ffout 0.32s ease-in forwards; pointer-events: none; }
@keyframes wf-ffout { to { opacity: 0; scale: 0.4; } }
.ff.shy .ff-bug { animation: wf-shy 0.55s ease-in-out; }
@keyframes wf-shy { 0%, 100% { transform: translateX(-50%) rotate(0); } 30% { transform: translateX(-56%) rotate(-9deg); } 65% { transform: translateX(-44%) rotate(7deg); } }
.ff.dimmed { opacity: 0.42; }
.ff.dimmed .ff-halo { animation: none; opacity: 0.35; box-shadow: none; }
.ff.hint { z-index: 6; }
.ff.hint .ff-halo {
    animation: wf-hint 1s ease-in-out infinite;
    box-shadow: 0 0 46px 16px rgba(255, 226, 130, 0.55);
}
@keyframes wf-hint { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: 0.94; } }
.ff.caught { pointer-events: none; z-index: 30; }
.ff.caught .ff-halo { animation: none; opacity: 1; box-shadow: 0 0 54px 20px rgba(255, 230, 140, 0.75); }

@media (prefers-reduced-motion: reduce) {
    .fb-wing { animation: none; }
    .ff.in, .ff.out { animation-duration: 0.01s; animation-delay: 0s; }
    .ff.shy .ff-bug, .ff.hint .ff-halo { animation: none; }
    /* frozen hint still reads: brighter + bigger glow, no pulse */
    .ff.hint .ff-halo { transform: scale(1.12); box-shadow: 0 0 46px 18px rgba(255, 226, 130, 0.6); }
}

/* little sparkle bits when a firefly is caught */
.wf-bit {
    position: fixed;
    z-index: 60;
    width: 10px; height: 10px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 8px 2px rgba(255, 224, 130, 0.7);
    animation: wf-bitfly 0.85s ease-out forwards;
}
@keyframes wf-bitfly {
    from { transform: translate(0, 0) scale(1); opacity: 1; }
    to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wf-bit { display: none; } }

/* ── jar corner (Glow + the Word Jar) ── */
#jar-corner {
    position: absolute;
    right: 8px;
    bottom: 6px;
    display: flex;
    align-items: flex-end;
    gap: 0;
    z-index: 7;
    pointer-events: none;
}
#glow-side { width: clamp(72px, 11vh, 102px); margin-right: -12px; margin-bottom: 4px; }
#glow-side .glow-svg { transform: scaleX(-1); }
#glow-side.cheer { animation: wf-hop 0.7s ease-out; }
#glow-side.peek { animation: wf-peek 0.9s ease-in-out; }
@keyframes wf-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } }
@keyframes wf-peek { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 65% { transform: rotate(5deg); } }
#jar-wrap { width: clamp(86px, 13vh, 118px); position: relative; }
#jar-wrap svg { width: 100%; display: block; overflow: visible; }
#jar-wrap.plink { animation: wf-jarpop 0.5s cubic-bezier(0.5, 1.6, 0.5, 1); }
@keyframes wf-jarpop { 0% { transform: scale(1); } 45% { transform: scale(1.12) rotate(-2deg); } 100% { transform: scale(1); } }
.jar-light { animation: wf-lightin 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes wf-lightin { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
.jar-light circle:first-child { animation: wf-tw 2.4s ease-in-out infinite; }
#jar-count {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--wf-card);
    border: 2px solid var(--wf-card-edge);
    border-radius: 30px;
    color: #FFEFB0;
    font-weight: 800;
    font-size: 0.92rem;
    padding: 3px 12px;
}
@media (prefers-reduced-motion: reduce) {
    #glow-side.cheer, #glow-side.peek, #jar-wrap.plink { animation: none; }
    .jar-light { animation-duration: 0.01s; }
    .jar-light circle:first-child { animation: none; }
}

/* the grown-ups button tucks under the banner on the play screen so it can
   never sit on the meadow's bottom strip where fireflies and the jar live */
#screen-play .info-btn { bottom: 12px; left: 12px; }

/* ═══════════ How-to demo ═══════════ */

#demo-layer {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(9, 5, 24, 0.72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
}
.demo-word {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    font-weight: 900;
    color: #FFEFB0;
    text-shadow: 0 0 20px rgba(255, 220, 120, 0.6);
}
.demo-stage { position: relative; width: min(78vw, 340px); height: clamp(170px, 34vh, 240px); }
#demo-fly { position: absolute; left: 18%; top: 8%; width: clamp(96px, 17vh, 128px); aspect-ratio: 1; }
#demo-fly .ff-bug { position: absolute; top: -22%; left: 50%; width: 62%; transform: translateX(-50%); }
#demo-fly .ff-word {
    position: absolute; left: 2%; right: 2%; top: 54%;
    transform: translateY(-50%); text-align: center;
    font-weight: 900; font-size: 1.45rem; color: var(--wf-ink);
}
#demo-fly.zip { transition: left 0.7s ease-in, top 0.7s ease-in, scale 0.7s ease-in, opacity 0.7s; }
#demo-fly.zip.gone { left: 74%; top: 66%; scale: 0.3; opacity: 0.2; }
#demo-jar { position: absolute; right: 2%; bottom: 0; width: clamp(72px, 13vh, 96px); }
#demo-jar svg { width: 100%; display: block; }
#demo-hand {
    position: absolute;
    width: clamp(48px, 9vh, 64px);
    left: 60%; top: 60%;
    opacity: 0;
    transition: left 0.6s ease-in-out, top 0.6s ease-in-out, opacity 0.3s;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
#demo-hand svg { width: 100%; display: block; }
#demo-hand.tap { animation: wf-handtap 0.4s ease-in-out; }
@keyframes wf-handtap { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }
.demo-skip { font-size: 0.9rem; font-weight: 700; color: var(--wf-lav); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
    #demo-fly.zip, #demo-hand { transition: none; }
    #demo-hand.tap { animation: none; }
}

/* ═══════════ Overlays (Word Jar book + grown-ups) ═══════════ */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(12, 7, 30, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.overlay-card {
    position: relative;
    max-width: 620px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 26px 26px 22px;
    background: #FFF9EC;
    border: 3px solid rgba(232, 168, 40, 0.35);
}
.overlay-card h3 { margin: 0 0 6px; font-size: 1.5rem; color: var(--wf-ink); }
.overlay-card p { line-height: 1.55; color: #4E3A66; margin: 0 0 12px; }
.jar-hint { font-size: 0.95rem; font-weight: 700; }
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: #EFE2F7;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--wf-ink);
    cursor: pointer;
    z-index: 2;
}
.close-btn:active { transform: scale(0.92); }

.jar-total {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F3EAFB;
    border-radius: 30px;
    padding: 6px 14px;
    font-weight: 800;
    color: var(--wf-ink);
    margin-bottom: 8px;
}
.jar-sec { margin-bottom: 14px; }
.jar-sec h4 { margin: 12px 0 8px; color: #6C4276; font-size: 1.05rem; }
.jar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 8px;
}
.jar-cell {
    position: relative;
    font-family: inherit;
    border: none;
    background: linear-gradient(180deg, #FBF4FF, #F0E6FA);
    border-radius: 14px;
    padding: 8px 3px 6px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 88px;
}
.jc-glow {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 178, 1) 0%, rgba(255, 224, 130, 0.55) 52%, rgba(255, 210, 110, 0) 76%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.jc-glow svg { width: 30px; display: block; }
.jar-cell.dim { cursor: default; background: #EFEAF2; }
.jar-cell.dim .jc-glow { background: radial-gradient(circle, rgba(160, 148, 190, 0.4), rgba(160, 148, 190, 0) 70%); }
.jar-word { font-size: 0.95rem; font-weight: 900; color: var(--wf-ink); margin-top: 2px; }
.jar-cell.dim .jar-word { color: #9C8FBC; }
.jar-count-dots { font-size: 0.6rem; letter-spacing: 2px; color: var(--wf-gold-deep); margin-top: 1px; }
.jar-cell .jc-crown { display: none; position: absolute; top: -8px; right: 4px; width: 26px; }
.jar-cell.crowned .jc-crown { display: block; }
.jar-cell.crowned { background: linear-gradient(180deg, #FFF6D8, #FBE7BA); }
.jar-cell.bounce { animation: wf-jarpop 0.5s cubic-bezier(0.5, 1.6, 0.5, 1); }

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

/* ═══════════ Small screens ═══════════ */

@media (max-height: 820px) {
    .game-title { font-size: clamp(2rem, 5.4vw, 3.1rem); }
    .tagline { font-size: clamp(0.9rem, 2.1vw, 1.1rem); }
    .t-glow { width: clamp(96px, 15vh, 132px); }
    .start-btn { font-size: clamp(1.3rem, 3.4vw, 1.7rem); padding: 13px 42px; }
    .title-row { margin-top: 7px; }
    #level-row { margin-top: 8px; gap: 8px 10px; }
    .lvl-btn { padding: 8px 6px 6px; gap: 3px; }
    .lvl-num { width: 36px; height: 36px; font-size: 1.2rem; }
    .lvl-name { font-size: 0.8rem; }
    .lvl-found { font-size: 0.72rem; }
}
@media (max-height: 640px) {
    .game-title { font-size: clamp(1.7rem, 4.6vw, 2.4rem); }
    .t-glow { width: clamp(80px, 12vh, 108px); }
    .t-fly { width: clamp(48px, 8vh, 62px); }
    .start-btn { font-size: 1.2rem; padding: 14px 36px; }
    .star-pill, .jar-btn { font-size: 0.98rem; padding: 8px 14px; min-height: 48px; }
    .lvl-num { width: 32px; height: 32px; font-size: 1.05rem; }
    .lvl-stars { font-size: 0.76rem; }
    #banner-word { font-size: clamp(1.6rem, 4vh, 2.2rem); }
}

/* Phone portrait: trim the jar book so five cells still fit a row */
@media (max-width: 560px) {
    .overlay { padding: 12px; }
    .overlay-card { padding: 22px 12px 16px; }
    .jar-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px; }
    .jar-cell { min-height: 80px; border-radius: 12px; }
    .jc-glow { width: 38px; height: 38px; }
    .jc-glow svg { width: 26px; }
    .jar-word { font-size: 0.85rem; }
}

/* ── HUD clearance ──────────────────────────────────────────────────────────
   The HUD floats fixed top-right over every screen. Both the title column and
   the play screen's word banner are centred and wide enough to reach it well
   past phone width (banner right edge vs HUD left edge cross at ~854px), so
   the clearance applies up to 899px. Tokens from gamekit.css, never literals. */
@media (max-width: 899px) {
    #play-top { padding-top: var(--gk-hud-clear-top); }
    #screen-title {
        padding-top: var(--gk-hud-clear-top);
        /* keep the level row clear of the bottom-left grown-ups button */
        padding-bottom: var(--gk-corner-clear);
        /* a centred column that outgrows a short phone spills off BOTH ends;
           `safe` keeps the top anchored and lets the rest scroll */
        justify-content: center;
        justify-content: safe center;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}