/* Marlo's Mole Maze — cozy underground cross-section styling */

#app { position: fixed; inset: 0; overflow: hidden; background: #8ED8F0; }

.screen { position: absolute; inset: 0; overflow: hidden; }

/* ── Sky, sun, clouds (shared scenery) ─────────────────────── */

.sky {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, #4EC4E8 0%, #8ED8F0 55%, #B9EAF8 100%);
    overflow: hidden;
}

.sun { position: absolute; top: 18px; left: 40px; width: 110px; height: 110px; }
.sun .rays { transform-box: fill-box; transform-origin: center; animation: sun-spin 44s linear infinite; }
.sun-core { filter: drop-shadow(0 0 18px rgba(252, 191, 73, 0.85)); }
@keyframes sun-spin { to { transform: rotate(1turn); } }

.cloud {
    position: absolute; width: 120px; height: 38px; border-radius: 30px;
    background: rgba(255, 255, 255, 0.92);
    animation: cloud-drift linear infinite;
}
.cloud::before, .cloud::after {
    content: ''; position: absolute; background: inherit; border-radius: 50%;
}
.cloud::before { width: 52px; height: 52px; top: -24px; left: 20px; }
.cloud::after  { width: 38px; height: 38px; top: -16px; right: 24px; }
.cloud.c1 { top: 34px; animation-duration: 66s; }
.cloud.c2 { top: 12px; transform: scale(0.7); animation-duration: 88s; animation-delay: -40s; }
@keyframes cloud-drift {
    from { left: -160px; }
    to   { left: 110%; }
}

/* ── Sunflowers ────────────────────────────────────────────── */

.sunflower { position: absolute; width: 92px; height: 190px; pointer-events: none; }
.sunflower svg { width: 100%; height: 100%; overflow: visible; }
.sf-sway { transform-origin: 50% 96%; animation: sf-sway 4s ease-in-out infinite; }
.sf-t2 .sf-sway, .sf-p2 .sf-sway { animation-delay: -1.4s; }
.sf-t3 .sf-sway, .sf-p3 .sf-sway { animation-delay: -2.6s; }
@keyframes sf-sway {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}
.sunflower.bounce .sf-sway { animation: sf-bounce 0.6s ease-in-out 3; }
@keyframes sf-bounce {
    0%, 100% { transform: rotate(0) scale(1); }
    40%      { transform: rotate(0) scale(1.1, 0.92); }
    70%      { transform: rotate(0) scale(0.95, 1.08); }
}

/* title-screen sunflower positions (sit on the hill) */
.sf-t1 { left: 4%;  bottom: 6vh;  }
.sf-t2 { right: 6%; bottom: 9vh; transform: scale(0.85); }
.sf-t3 { right: 20%; bottom: 4vh; transform: scale(0.65); }

/* ── TITLE screen ──────────────────────────────────────────── */

.hill {
    position: absolute; left: -12%; right: -12%; bottom: -16vh; height: 44vh;
    background: linear-gradient(180deg, #8BC926 0%, #7CB518 45%, #63980E 100%);
    border-radius: 50% 50% 0 0;
    box-shadow: inset 0 14px 30px rgba(255, 255, 255, 0.25);
}

.title-stack { position: relative; text-align: center; padding-top: max(3vh, 14px); z-index: 4; }

#game-title { line-height: 0.95; color: #fff; }
#game-title .t-small {
    display: block; font-size: clamp(1.2rem, 3.4vw, 1.9rem); color: #FFF3B0;
    text-shadow: 0 2px 0 #6B4423, 0 4px 10px rgba(0,0,0,0.25);
    transform: rotate(-2deg);
}
#game-title .t-big {
    display: block; font-size: clamp(2.4rem, 7.2vw, 4.2rem); letter-spacing: 1px;
    text-shadow: 0 3px 0 #6B4423, 0 7px 16px rgba(0,0,0,0.3);
    transform: rotate(-1deg);
}
.tagline {
    margin-top: 8px; font-size: clamp(0.95rem, 2.4vw, 1.2rem); color: #23515E;
    background: rgba(255, 255, 255, 0.75); display: inline-block;
    padding: 5px 18px; border-radius: 30px;
}

#title-hero {
    position: relative; z-index: 5;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(6px, 1.6vh, 16px); margin-top: clamp(2px, 1vh, 12px);
}

#title-mound { position: relative; width: min(300px, 44vw); height: clamp(150px, 24vh, 210px); cursor: pointer; }
#title-mound .mound-svg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; z-index: 3; }
#title-mound .marlo-window {
    position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
    width: 46%; height: 74%; overflow: hidden; z-index: 4;
}
#title-mound .marlo { position: absolute; left: 0; bottom: 0; width: 100%; transform: translateY(102%); }
#title-mound .marlo.rise { animation: marlo-rise 0.7s cubic-bezier(0.25, 1.35, 0.45, 1) forwards; }
@keyframes marlo-rise {
    from { transform: translateY(102%); }
    to   { transform: translateY(6%); }
}
#title-mound.tremble .mound-svg { animation: mound-tremble 0.4s ease-in-out 2; }
@keyframes mound-tremble {
    0%, 100% { transform: translateX(-50%) rotate(0); }
    25%      { transform: translateX(-52%) rotate(-2deg); }
    75%      { transform: translateX(-48%) rotate(2deg); }
}

#btn-play { min-height: 96px; min-width: min(320px, 74vw); font-size: clamp(1.7rem, 5vw, 2.3rem); animation: play-wobble 3.2s ease-in-out infinite; }
@keyframes play-wobble {
    0%, 100% { transform: rotate(0) scale(1); }
    88%      { transform: rotate(0) scale(1); }
    92%      { transform: rotate(-2deg) scale(1.04); }
    96%      { transform: rotate(2deg) scale(1.04); }
}

#level-row { display: flex; gap: clamp(10px, 2.4vw, 22px); }

.level-btn {
    width: clamp(84px, 10vw, 104px); height: clamp(84px, 10vw, 104px);
    border: none; border-radius: 24px; cursor: pointer;
    background: linear-gradient(160deg, #FFFDF4 0%, #FFEFC9 100%);
    box-shadow: 0 6px 16px rgba(90, 60, 130, 0.28), inset 0 -4px 0 rgba(197, 148, 66, 0.35);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; position: relative; transition: transform 0.15s;
}
.level-btn:active { transform: scale(0.94); }
.level-btn .lv-ico { width: 46px; height: 46px; }
.level-btn .lv-ico svg { width: 100%; height: 100%; }
.level-btn .lv-stars { font-size: 0.95rem; letter-spacing: 1px; }
.level-btn .lv-stars .dim { filter: grayscale(1) opacity(0.35); }
.level-btn.locked { filter: saturate(0.35); opacity: 0.82; }
.level-btn.locked::after {
    content: '🔒'; position: absolute; right: -6px; top: -6px; font-size: 1.5rem;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}
.level-btn.shake { animation: lock-shake 0.45s ease-in-out; }
@keyframes lock-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px) rotate(-3deg); }
    75% { transform: translateX(6px) rotate(3deg); }
}

#btn-gallery {
    position: absolute; left: 16px; bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 6; min-width: 96px; height: 84px; border: none; border-radius: 26px;
    background: linear-gradient(160deg, #FFE1EE 0%, #FFC6DE 100%);
    box-shadow: 0 6px 16px rgba(90, 60, 130, 0.3), inset 0 -4px 0 rgba(214, 106, 154, 0.4);
    display: flex; align-items: center; gap: 6px; padding: 6px 14px; cursor: pointer;
    animation: gk-wiggle 2.6s ease-in-out infinite;
}
#gallery-worm { width: 52px; height: 44px; display: inline-block; }
#gallery-worm svg { width: 100%; height: 100%; }
#worm-badge {
    font-weight: bold; font-size: 1.15rem; color: #A8437A;
    background: #fff; border-radius: 20px; padding: 4px 10px;
}

#btn-info {
    position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 6; min-height: 52px; border: none; border-radius: 26px;
    padding: 10px 20px; font-size: 1rem; color: #4A3B5C; cursor: pointer;
    background: rgba(255, 255, 255, 0.88); box-shadow: 0 4px 12px rgba(90, 60, 130, 0.22);
}

/* ── PLAY screen layout ────────────────────────────────────── */

#screen-play { display: flex; flex-direction: column; background: #6B4423; }
#screen-play .sky { position: relative; inset: auto; height: clamp(88px, 13vh, 128px); flex: none; }
#play-sky .sun { top: 8px; left: 24px; width: 84px; height: 84px; }

/* play-screen sunflowers sit on the grass lip, roots dangle below */
.sf-p1 { left: 12%; bottom: -6px; transform: scale(0.62); transform-origin: bottom; }
.sf-p2 { right: 8%; bottom: -6px; transform: scale(0.56); transform-origin: bottom; }
.sf-p3 { right: 26%; bottom: -6px; transform: scale(0.44); transform-origin: bottom; }
#play-sky .sunflower { bottom: 0; height: 150px; }

#grass-lip {
    flex: none; height: 24px; position: relative; z-index: 3;
    background: linear-gradient(180deg, #8BC926 0%, #7CB518 60%, #5D8F0F 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

#dirt-area {
    flex: 1; position: relative; overflow: hidden;
    background:
        linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)) 0 32%/100% 2px no-repeat,
        linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)) 0 58%/100% 2px no-repeat,
        linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)) 0 82%/100% 2px no-repeat,
        radial-gradient(3px 3px at 12% 22%, rgba(255,230,190,0.2) 98%, transparent),
        radial-gradient(3px 3px at 88% 14%, rgba(0,0,0,0.18) 98%, transparent),
        radial-gradient(4px 4px at 6% 74%, rgba(0,0,0,0.15) 98%, transparent),
        radial-gradient(3px 3px at 94% 66%, rgba(255,230,190,0.16) 98%, transparent),
        radial-gradient(3px 3px at 48% 94%, rgba(0,0,0,0.16) 98%, transparent),
        linear-gradient(180deg, #A9744A 0%, #8A5A33 45%, #6B4423 100%);
}

#dirt-decor { position: absolute; inset: 0; pointer-events: none; }
.decor { position: absolute; }
.decor svg { width: 100%; height: 100%; overflow: visible; }
.decor.geode .glint-shape { animation: geode-glint 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes geode-glint {
    0%, 88%, 100% { opacity: 0; transform: scale(0.4); }
    92% { opacity: 1; transform: scale(1.15); }
    96% { opacity: 0.4; transform: scale(0.8); }
}
.decor.ladybug .lb-eye-open { opacity: 0; }
.decor.ladybug.awake .lb-eye-open { opacity: 1; }
.decor.ladybug.awake .lb-eye-closed { opacity: 0; }
.decor.ladybug.awake svg { animation: lb-hop 0.5s ease-out; }
@keyframes lb-hop {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-8px); }
}

#grid-wrap { position: absolute; }

#godray {
    position: absolute; pointer-events: none; z-index: 3; border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 243, 176, 0.34) 0%, rgba(255, 243, 176, 0.10) 60%, rgba(255, 215, 0, 0.28) 100%);
    animation: godray-shimmer 3.4s ease-in-out infinite;
}
@keyframes godray-shimmer {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

#grid { display: grid; gap: var(--gap, 6px); position: relative; z-index: 2; }

.tile {
    position: relative; width: var(--tile); height: var(--tile);
    border: none; padding: 0; background: transparent; cursor: pointer;
    border-radius: 16px; touch-action: none;
}
.tile svg { width: 100%; height: 100%; display: block; pointer-events: none; }

.tile.dug { box-shadow: inset 0 5px 12px rgba(0, 0, 0, 0.55); border-radius: 16px; }

.tile.can-dig::after {
    content: ''; position: absolute; inset: 1px; border-radius: 15px;
    border: 4px solid rgba(255, 243, 176, 0.95);
    box-shadow: 0 0 14px rgba(252, 191, 73, 0.8), inset 0 0 10px rgba(252, 191, 73, 0.5);
    animation: dig-pulse 1.15s ease-in-out infinite; pointer-events: none;
}
@keyframes dig-pulse {
    0%, 100% { opacity: 0.45; transform: scale(0.97); }
    50%      { opacity: 1; transform: scale(1); }
}

.tile.hint-dot::after {
    content: ''; position: absolute; inset: 14%; border-radius: 50%;
    border: 4px dotted rgba(255, 255, 255, 0.95);
    background: radial-gradient(circle, rgba(255, 123, 172, 0.4) 0%, transparent 65%);
    animation: hint-blink 0.7s ease-in-out infinite; pointer-events: none;
}
@keyframes hint-blink {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50%      { opacity: 1; transform: scale(1.06); }
}

.tile.rock-wiggle svg { animation: rock-wiggle 0.5s ease-in-out; }
@keyframes rock-wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-5deg) translateX(-2px); }
    50% { transform: rotate(4deg) translateX(2px); }
    75% { transform: rotate(-3deg); }
}

.tile.backglow::before {
    content: ''; position: absolute; inset: 3px; border-radius: 14px;
    background: rgba(255, 213, 128, 0.35); box-shadow: 0 0 16px rgba(255, 213, 128, 0.55);
    animation: backglow-fade 1.2s ease-out forwards; pointer-events: none;
}
@keyframes backglow-fade {
    0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; }
}

.tile.exit-tile { animation: exit-glow 2s ease-in-out infinite; border-radius: 16px; }
@keyframes exit-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    50%      { box-shadow: 0 0 26px rgba(255, 215, 0, 0.95); }
}

.tile .dig-crumb-hole { animation: tile-dig 0.3s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes tile-dig {
    0% { transform: scale(1); } 40% { transform: scale(0.85); } 100% { transform: scale(1); }
}

/* ── Marlo actor on the grid ───────────────────────────────── */

#marlo-actor {
    position: absolute; left: 0; top: 0; width: var(--tile); height: var(--tile);
    z-index: 4; pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.3, 1.3, 0.5, 1);
}
#marlo-actor.trotting { transition: transform 0.13s linear; }
#marlo-actor.instant  { transition: none; }
#marlo-actor .hopper { width: 100%; height: 100%; padding: 4%; }
#marlo-actor .marlo { width: 100%; height: 100%; }
#marlo-actor.hop .hopper { animation: marlo-hop 0.24s ease-out; }
@keyframes marlo-hop {
    0%   { transform: scale(1, 1) translateY(0); }
    35%  { transform: scale(0.92, 1.12) translateY(-14%); }
    70%  { transform: scale(1.1, 0.88) translateY(2%); }
    100% { transform: scale(1, 1) translateY(0); }
}
#marlo-actor.hop .m-glasses { animation: glasses-lag 0.26s ease-out 0.04s; }
@keyframes glasses-lag {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(3px); }
    75%      { transform: translateY(-2px); }
}
#marlo-actor.trotting .hopper { animation: trot-bob 0.26s ease-in-out infinite; }
@keyframes trot-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-6%) rotate(2deg); }
}
#marlo-actor.climb { transition: transform 0.95s ease-in; }

/* ── Marlo rig (shared: title, actor, popout) ──────────────── */

.marlo { overflow: visible; }
.marlo .m-eye { transform-box: fill-box; transform-origin: center; animation: marlo-blink 4.6s ease-in-out infinite; transition: transform 0.18s; }
@keyframes marlo-blink {
    0%, 91%, 100% { transform: scaleY(1); }
    93.5%, 96.5%  { transform: scaleY(0.08); }
}
.marlo.squint .m-eye, .marlo.munch .m-eye { animation: none; transform: scaleY(0.1); }
.marlo .m-nose { transform-box: fill-box; transform-origin: center; }
.marlo.f-sniff .m-nose, #title-mound .marlo.rise .m-nose { animation: nose-sniff 0.9s ease-in-out; }
@keyframes nose-sniff {
    0%, 100% { transform: rotate(0) scale(1); }
    20% { transform: rotate(-9deg) scale(1.12); }
    45% { transform: rotate(8deg) scale(1.06); }
    70% { transform: rotate(-6deg) scale(1.1); }
}
.marlo .m-glasses { transform-box: fill-box; transform-origin: center; transition: transform 0.4s cubic-bezier(0.3, 1.7, 0.5, 1); }
.marlo.glasses-crooked .m-glasses { transform: rotate(13deg) translateY(3px); transition: transform 0.1s; }
.marlo .m-glint { opacity: 0; }
.marlo.glint .m-glint { animation: glint-flash 0.4s ease-out; }
@keyframes glint-flash {
    0% { opacity: 0; transform: translateX(-3px); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateX(4px); }
}
.marlo .m-paw { transform-box: fill-box; transform-origin: 50% 12%; }
.marlo.wave .m-paw-r { animation: paw-wave 1.1s ease-in-out; }
@keyframes paw-wave {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-135deg); }
    40% { transform: rotate(-110deg); }
    60% { transform: rotate(-140deg); }
    80% { transform: rotate(-110deg); }
}
.marlo.f-push .m-paw-r { animation: paw-push 0.9s ease-in-out; }
.marlo.f-push .m-glasses { animation: glasses-bump 0.9s ease-in-out; }
@keyframes paw-push {
    0%, 100% { transform: rotate(0); }
    35%, 60% { transform: rotate(-100deg) translateY(-6px); }
}
@keyframes glasses-bump {
    0%, 30%, 100% { transform: translateY(0); }
    50%, 70% { transform: translateY(-3px); }
}
.marlo.f-drum .m-paw-l { animation: paw-drum 0.7s ease-in-out; }
.marlo.f-drum .m-paw-r { animation: paw-drum 0.7s ease-in-out 0.09s; }
@keyframes paw-drum {
    0%, 100% { transform: translateY(0); }
    25%, 75% { transform: translateY(-5px); }
    50% { transform: translateY(0); }
}
.marlo .m-ear { transform-box: fill-box; transform-origin: bottom center; }
.marlo.f-ear .m-ear { animation: ear-waggle 0.8s ease-in-out; }
@keyframes ear-waggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-22deg); }
    55% { transform: rotate(18deg); }
    80% { transform: rotate(-10deg); }
}
.marlo .m-rig { transform-box: fill-box; transform-origin: center; }
.marlo.no-shake .m-rig { animation: head-no 0.55s ease-in-out; }
@keyframes head-no {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-7deg); }
    50% { transform: rotate(6deg); }
    75% { transform: rotate(-4deg); }
}
.marlo.sneeze .m-rig { animation: sneeze-recoil 1.1s ease-in-out; }
@keyframes sneeze-recoil {
    0% { transform: rotate(0) translateY(0); }
    16% { transform: rotate(-6deg) translateY(-3px); }
    30% { transform: rotate(0) translateY(0); }
    40% { transform: rotate(-8deg) translateY(-5px); }
    48% { transform: rotate(12deg) translateY(5px) scale(1.05); }
    62% { transform: rotate(8deg) translateY(3px); }
    100% { transform: rotate(0) translateY(0); }
}
.marlo.happy-pulse { animation: happy-pulse 0.45s ease-out; }
@keyframes happy-pulse {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.15); }
}
.marlo.munch .m-mouth { animation: chew 0.62s ease-in-out; transform-box: fill-box; transform-origin: center; }
@keyframes chew {
    0%, 100% { transform: scaleY(1); }
    20%, 60% { transform: scaleY(2.1); }
    40%, 80% { transform: scaleY(0.6); }
}

/* ── FX layer ──────────────────────────────────────────────── */

#fx-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: visible; }

.crumb {
    position: absolute; width: 9px; height: 9px; border-radius: 40%;
    background: #6B4423; pointer-events: none;
    animation: crumb-fly 0.45s cubic-bezier(0.2, 0.6, 0.6, 1) forwards;
}
.crumb.light { background: #A9744A; }
@keyframes crumb-fly {
    0%   { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
    60%  { transform: translate(var(--dx), calc(var(--dy) - 14px)) scale(0.9) rotate(120deg); opacity: 1; }
    100% { transform: translate(calc(var(--dx) * 1.4), calc(var(--dy) + 30px)) scale(0.5) rotate(240deg); opacity: 0; }
}

.poof {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(201, 169, 142, 0.95) 0%, rgba(169, 116, 74, 0.75) 55%, transparent 72%);
    animation: poof-out 0.7s ease-out forwards;
}
@keyframes poof-out {
    0%   { transform: scale(0.2); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.carrot-pop {
    position: absolute; pointer-events: none; z-index: 7;
    animation: carrot-pop 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
}
.carrot-pop svg { width: 100%; height: 100%; overflow: visible; }
@keyframes carrot-pop {
    0%   { transform: translateY(30%) scale(0.3); opacity: 0; }
    35%  { transform: translateY(-26%) scale(1.1); opacity: 1; }
    60%  { transform: translateY(-18%) scale(1); opacity: 1; }
    100% { transform: translateY(-4%) scale(0.55); opacity: 0; }
}

.worm-pop {
    position: absolute; pointer-events: none; z-index: 7;
    animation: worm-boop 0.85s ease-in-out forwards;
}
.worm-pop svg { width: 100%; height: 100%; overflow: visible; }
@keyframes worm-boop {
    0%   { transform: translateY(28%) scale(0.3) rotate(-12deg); opacity: 0; }
    35%  { transform: translateY(-30%) scale(1.05) rotate(6deg); opacity: 1; }
    65%  { transform: translateY(-22%) scale(1.15) rotate(-4deg); opacity: 1; }
    100% { transform: translateY(-14%) scale(0.9) rotate(0); opacity: 0; }
}

.fly-portrait {
    position: fixed; z-index: 960; pointer-events: none;
    width: 46px; height: 46px;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.65s;
}
.fly-portrait svg { width: 100%; height: 100%; }

.sparkle-bit {
    position: absolute; font-size: 20px; pointer-events: none;
    animation: sparkle-rise 0.8s ease-out forwards;
}
@keyframes sparkle-rise {
    0%   { transform: translateY(0) scale(0.4); opacity: 1; }
    100% { transform: translateY(-42px) scale(1.2); opacity: 0; }
}

/* ── Counters ──────────────────────────────────────────────── */

#counters {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 12px; z-index: 40;
}
.counter {
    display: flex; align-items: center; gap: 5px;
    background: rgba(255, 255, 255, 0.88); border-radius: 40px;
    padding: 6px 13px; box-shadow: 0 4px 12px rgba(90, 60, 130, 0.25);
}
.slot { width: 32px; height: 32px; filter: grayscale(1) opacity(0.4); transition: filter 0.3s; }
.slot svg { width: 100%; height: 100%; }
.slot.filled { filter: none; animation: slot-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes slot-pop {
    0% { transform: scale(0.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); }
}

#btn-repeat {
    position: absolute; left: 14px; bottom: max(14px, env(safe-area-inset-bottom));
    width: 76px; height: 76px; border: none; border-radius: 50%; z-index: 40;
    background: rgba(255, 255, 255, 0.92); cursor: pointer; padding: 6px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s;
}
#btn-repeat:active { transform: scale(0.92); }
#btn-repeat svg { width: 100%; height: 100%; }

/* ── Pop-out win moment ────────────────────────────────────── */

#popout {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 240px; height: 150px; z-index: 45;
}
#popout .mound-svg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 200px; z-index: 3; }
#popout .marlo-window {
    position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
    width: 118px; height: 132px; overflow: hidden; z-index: 4;
}
#popout .marlo { position: absolute; left: 0; bottom: 0; width: 100%; transform: translateY(102%); }
#popout .marlo.rise { animation: marlo-rise 0.55s cubic-bezier(0.25, 1.35, 0.45, 1) forwards; }

/* ── Worm gallery (den) ────────────────────────────────────── */

#screen-gallery {
    background:
        radial-gradient(2px 2px at 18% 30%, rgba(255,230,190,0.12) 98%, transparent),
        radial-gradient(3px 3px at 82% 60%, rgba(0,0,0,0.25) 98%, transparent),
        radial-gradient(2px 2px at 60% 85%, rgba(255,230,190,0.1) 98%, transparent),
        linear-gradient(180deg, #4A2F17 0%, #3E2814 55%, #2C1B0D 100%);
    display: flex; flex-direction: column; align-items: center;
    padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
}
#den-glow {
    position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
    width: 620px; height: 420px; pointer-events: none;
    background: radial-gradient(ellipse, rgba(255, 214, 128, 0.32) 0%, transparent 62%);
    animation: lantern-flicker 3.2s ease-in-out infinite;
}
@keyframes lantern-flicker {
    0%, 100% { opacity: 0.85; } 46% { opacity: 1; } 52% { opacity: 0.7; } 60% { opacity: 0.95; }
}
#lantern { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 58px; height: 74px; z-index: 2; }
#lantern svg { width: 100%; height: 100%; }
#gallery-title {
    position: relative; z-index: 3; color: #FFE9C8; margin: 60px 0 14px;
    font-size: clamp(1.5rem, 4.5vw, 2.1rem); text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
#nook-grid {
    position: relative; z-index: 3; flex: 1; align-content: center;
    display: grid; grid-template-columns: repeat(4, minmax(130px, 170px));
    gap: clamp(10px, 2vw, 20px); max-width: 760px;
}
.nook {
    border: none; cursor: pointer; position: relative;
    min-height: 120px; border-radius: 60px 60px 14px 14px;
    background: linear-gradient(180deg, #241505 0%, #38230F 70%, #241505 100%);
    box-shadow: inset 0 6px 16px rgba(0, 0, 0, 0.7), 0 3px 0 #1A0F04, 0 6px 0 #5C3D1E;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 10px 6px 8px;
}
.nook .nook-worm { width: 84px; height: 66px; }
.nook .nook-worm svg { width: 100%; height: 100%; overflow: visible; }
.nook .nook-name { color: #FFD9A0; font-size: 1rem; font-weight: bold; }
.nook.empty .nook-name { color: #7A5D48; }
.nook.empty .mystery { font-size: 2rem; color: #7A5D48; opacity: 0.8; }
.nook .worm-idle { animation: worm-idle 2.8s ease-in-out infinite; transform-origin: bottom center; display: block; }
@keyframes worm-idle {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(2deg) translateY(-3px); }
}
.nook.squirm .worm-idle { animation: worm-squirm 0.7s ease-in-out; }
@keyframes worm-squirm {
    0%, 100% { transform: rotate(0) scaleY(1); }
    25% { transform: rotate(-8deg) scaleY(0.82); }
    50% { transform: rotate(7deg) scaleY(1.14); }
    75% { transform: rotate(-5deg) scaleY(0.92); }
}
#btn-back { position: relative; z-index: 3; margin-top: 12px; min-width: 200px; }

@media (max-width: 820px) {
    #nook-grid { grid-template-columns: repeat(3, minmax(120px, 160px)); }
}

/* ── Grown-ups popover ─────────────────────────────────────── */

#info-overlay {
    position: fixed; inset: 0; z-index: 920;
    background: rgba(74, 59, 92, 0.5);
    display: flex; align-items: center; justify-content: center;
    animation: gk-fade-in 0.25s ease-out;
}
.info-card {
    position: relative; max-width: min(92vw, 560px); max-height: 86vh; overflow-y: auto;
    padding: 26px 30px; animation: gk-pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.info-card h3 { color: #F77F00; font-size: 1.5rem; margin-bottom: 10px; }
.info-card p { margin: 10px 0; line-height: 1.45; font-size: 1.02rem; }
.info-card .info-stars { background: #FFF3DC; border-radius: 14px; padding: 10px 14px; }
#info-close {
    position: absolute; top: 10px; right: 10px; width: 52px; height: 52px;
    border: none; border-radius: 50%; background: #FFE1EE; color: #A8437A;
    font-size: 1.4rem; font-weight: bold; cursor: pointer;
}

/* ── Celebration legend ────────────────────────────────────── */

.star-legend { display: flex; justify-content: center; gap: 10px; margin: 4px 0 12px; }
.star-legend .leg {
    display: flex; align-items: center; gap: 4px;
    background: #FFF3DC; border-radius: 30px; padding: 6px 14px;
    font-size: 1.15rem; font-weight: bold; color: #8A5A33;
}
.star-legend .leg.missed { filter: grayscale(0.8) opacity(0.55); }

/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .sun .rays, .cloud, .sf-sway, #btn-play, #btn-gallery,
    .marlo .m-eye, .decor.geode .glint-shape, .nook .worm-idle,
    .tile.can-dig::after, .tile.exit-tile, #godray, #den-glow {
        animation: none !important;
    }
}