/* Ember's Spell Smith — spelling patterns + phonics rules for ages 7–8.
   Art direction: a blacksmith's forge at night. Soot-dark iron, a warm coal
   glow rising from the bottom of the screen, and letters that go WHITE-HOT as
   they are struck onto the anvil. Display type is the brand serif (Fraunces);
   everything a child reads is Mulish — never Comic Sans. */

:root{
    --ss-sans:"Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ss-display:"Fraunces", Georgia, "Times New Roman", serif;

    --ss-ink:#F8EDDF; --ss-dim:#C1A794; --ss-faint:#967F6E;
    --ss-panel:#2A222A; --ss-panel-2:#362B33; --ss-edge:#54413C;
    --ss-iron:#3A3138; --ss-iron-dk:#241E23;
    --ss-ember:#FF8A2B; --ss-gold:#FFC861; --ss-hot:#FFF4DC;
    --ss-copper:#D2793C; --ss-cool:#79C6EA; --ss-rose:#E8776A;
}

body{
    font-family:var(--ss-sans);
    color:var(--ss-ink);
    background:radial-gradient(135% 105% at 50% 114%, #A8410E 0%, #6B2A11 16%, #3A1D1A 40%, #221A1B 66%, #120F10 100%);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
}

.screen{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#screen-play{ flex-direction:column; justify-content:flex-start; }

/* ── forge atmosphere ──────────────────────────────────────────────────── */
.forge-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
    background:
        radial-gradient(60% 34% at 50% 104%, rgba(255,150,50,.42), rgba(255,120,30,0) 70%),
        radial-gradient(26% 18% at 14% 96%, rgba(255,120,40,.18), transparent 72%),
        radial-gradient(24% 16% at 86% 98%, rgba(255,120,40,.16), transparent 72%);
    animation:forge-flicker 3.4s ease-in-out infinite;
}
@keyframes forge-flicker{ 0%,100%{opacity:.86} 38%{opacity:1} 64%{opacity:.9} }

.ember-dust{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ember-dust span{
    position:absolute; bottom:-12px; width:4px; height:4px; border-radius:50%;
    background:radial-gradient(circle at 40% 35%, #FFE9B0, var(--ss-ember));
    box-shadow:0 0 8px rgba(255,150,50,.85); opacity:0;
    animation:ember-rise 7s linear infinite;
}
.ember-dust span:nth-child(1){ left:12%; animation-duration:7.5s; animation-delay:0s; }
.ember-dust span:nth-child(2){ left:28%; animation-duration:9s;   animation-delay:1.4s; }
.ember-dust span:nth-child(3){ left:47%; animation-duration:6.6s; animation-delay:2.6s; }
.ember-dust span:nth-child(4){ left:63%; animation-duration:8.4s; animation-delay:.8s; }
.ember-dust span:nth-child(5){ left:79%; animation-duration:7.1s; animation-delay:3.4s; }
.ember-dust span:nth-child(6){ left:91%; animation-duration:9.6s; animation-delay:4.6s; }
@keyframes ember-rise{
    0%{ transform:translateY(0) scale(.7); opacity:0 }
    12%{ opacity:.95 }
    70%{ opacity:.55 }
    100%{ transform:translateY(-86vh) translateX(18px) scale(.3); opacity:0 }
}

/* ── START ─────────────────────────────────────────────────────────────── */
.start-inner{ position:relative; z-index:1; text-align:center; padding:24px 20px; max-width:540px; }
#start-tools{
    position:relative; line-height:1; display:flex; align-items:flex-end;
    justify-content:center; gap:2px; height:98px;
}
.st-hammer{
    display:block; font-size:4.4rem; transform-origin:74% 82%;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
    animation:swing 2.6s ease-in-out infinite;
}
.st-fire{
    display:block; font-size:2.5rem; margin-bottom:4px;
    filter:drop-shadow(0 0 18px rgba(255,140,40,.85));
    animation:fire-lick 1.5s ease-in-out infinite alternate;
}
@keyframes swing{ 0%,100%{transform:rotate(12deg)} 46%{transform:rotate(-16deg)} 58%{transform:rotate(-6deg)} }
@keyframes fire-lick{ from{transform:scale(.9) translateY(2px)} to{transform:scale(1.1) translateY(-2px)} }

.game-title{
    font-family:var(--ss-display); font-weight:900; font-size:clamp(2.1rem,7.4vw,3.5rem);
    line-height:1.04; letter-spacing:-.01em; margin:.1em 0 .12em;
    text-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 34px rgba(255,140,50,.35);
}
.ss-accent{
    background:linear-gradient(180deg,#FFF0C4,var(--ss-gold) 45%,var(--ss-ember));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-fill-color:transparent;
}
.tagline{ color:var(--ss-dim); font-size:clamp(1rem,3vw,1.2rem); font-weight:700; margin:.35em 0 1em; }
.star-chip{
    display:block; width:-moz-max-content; width:max-content; margin:0 auto 18px;
    background:rgba(255,200,97,.13); border:1.5px solid rgba(255,200,97,.5);
    color:var(--ss-gold); font-weight:800; border-radius:999px; padding:6px 16px;
}
#btn-play{ display:block; margin:0 auto; }
.how-line{ margin-top:16px; color:var(--ss-faint); font-weight:700; font-size:.9rem; }
#screen-start .gk-go, #screen-levels .gk-go{
    background:linear-gradient(135deg,#FF7A1F,#FFC861); color:#3B1A00;
    box-shadow:0 8px 24px rgba(255,122,31,.38);
}

/* ── FORGE SELECT ──────────────────────────────────────────────────────── */
/* the forge list is the one screen that can outgrow a short viewport — let it
   scroll inside itself so nothing is ever clipped (body stays overflow:hidden) */
#screen-levels{ align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* margin:auto centres the list when it fits and yields to scrolling when it doesn't */
.levels-inner{ position:relative; z-index:1; width:100%; max-width:780px; margin:auto 0;
    padding:74px 16px 26px; text-align:center; }
.levels-heading{ font-family:var(--ss-display); font-weight:900; font-size:clamp(1.5rem,5vw,2.15rem); margin:0; }
.levels-sub{ color:var(--ss-dim); font-weight:600; margin:8px auto 18px; max-width:52ch; font-size:.95rem; line-height:1.45; }
.levels-sub strong{ color:var(--ss-gold); }
#level-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:12px; }
.forge-card{
    position:relative; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
    background:linear-gradient(180deg,var(--ss-panel-2),var(--ss-panel));
    border:1.5px solid var(--ss-edge); border-radius:18px; padding:14px 14px; cursor:pointer;
    color:var(--ss-ink); font-family:inherit; text-align:left;
    box-shadow:0 8px 20px rgba(0,0,0,.4); transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.forge-card:hover{ transform:translateY(-3px); border-color:var(--ss-ember); box-shadow:0 12px 26px rgba(255,122,31,.24); }
.forge-card:active{ transform:scale(.98); }
.forge-card .fc-emoji{
    font-size:2rem; line-height:1; width:52px; height:52px; display:grid; place-items:center; border-radius:14px;
    background:radial-gradient(circle at 50% 120%, rgba(255,140,40,.4), rgba(0,0,0,.25));
    border:1px solid rgba(255,160,70,.3);
}
.forge-card .fc-body{ min-width:0; }
.forge-card .fc-body > span{ display:block; }
.forge-card .fc-n{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ss-faint); }
.forge-card .fc-name{ font-weight:900; font-size:1.06rem; line-height:1.2; margin:1px 0 2px; }
.forge-card .fc-sample{ font-size:.82rem; color:var(--ss-dim); font-weight:600; }
.forge-card .fc-stars{ margin-top:4px; font-size:.85rem; letter-spacing:2px; color:var(--ss-gold); min-height:1.1em; }

.corner-btn{
    position:fixed; top:12px; left:12px; z-index:6; border:1.5px solid var(--ss-edge);
    background:rgba(28,22,24,.85); color:var(--ss-ink); font-family:inherit; font-weight:800;
    border-radius:12px; padding:10px 16px; min-height:44px; cursor:pointer;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.corner-btn:active{ transform:scale(.95); }
#btn-back-play{ padding:8px 13px; font-size:.9rem; }
.info-btn{
    position:fixed; left:12px; bottom:12px; z-index:6; width:52px; height:52px; border-radius:50%;
    border:1.5px solid var(--ss-edge); background:rgba(28,22,24,.85); color:var(--ss-ink);
    font-size:1.4rem; line-height:1; cursor:pointer; transition:transform .15s;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.info-btn:hover{ transform:scale(1.08); }
.info-btn:active{ transform:scale(.94); }

/* ── PLAY: top bar ─────────────────────────────────────────────────────── */
#play-top{
    position:relative; z-index:2; width:100%; max-width:648px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 16px 4px; margin-top:52px;
}
.pill{
    background:rgba(28,22,24,.72); border:1.5px solid var(--ss-edge); border-radius:999px;
    padding:6px 14px; font-weight:800; font-size:.88rem; color:var(--ss-ink); white-space:nowrap;
    max-width:44vw; overflow:hidden; text-overflow:ellipsis;
}
#rule-tag{ border-color:rgba(255,200,97,.4); color:var(--ss-gold); }
.streak-pill{ border-color:rgba(255,138,43,.55); color:var(--ss-ember); }
#progress-dots{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; flex:1; }
#progress-dots span{
    width:10px; height:10px; border-radius:2px; background:rgba(255,255,255,.15);
    transition:background .25s, transform .25s, box-shadow .25s;
}
#progress-dots span.clean{ background:var(--ss-gold); box-shadow:0 0 8px rgba(255,200,97,.55); }
#progress-dots span.helped{ background:var(--ss-copper); }
#progress-dots span.now{ background:var(--ss-hot); transform:scale(1.3); box-shadow:0 0 10px var(--ss-gold); }

/* ── PLAY: stage ───────────────────────────────────────────────────────── */
#play-stage{
    position:relative; z-index:1; width:100%; max-width:620px; flex:1; min-height:0;
    display:flex; flex-direction:column; gap:8px; padding:4px 14px 14px;
}

#rule-banner{
    display:flex; align-items:center; gap:10px; flex:none;
    background:linear-gradient(180deg,rgba(58,46,52,.85),rgba(36,29,34,.85));
    border:1.5px solid var(--ss-edge); border-left:4px solid var(--ss-ember);
    border-radius:12px; padding:8px 12px;
}
.rb-label{
    font-size:.62rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
    color:#3B1A00; background:var(--ss-gold); border-radius:5px; padding:3px 7px; flex:none;
}
#rule-text{ font-size:.88rem; font-weight:700; color:var(--ss-ink); line-height:1.32; }

#forge-area{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:6px; padding:4px 0; }
#forge-area::after{        /* coal glow under the anvil, brighter on a streak */
    content:''; position:absolute; left:50%; bottom:-6%; width:78%; height:46%;
    transform:translateX(-50%); pointer-events:none; z-index:0; opacity:.55;
    background:radial-gradient(50% 60% at 50% 100%, rgba(255,140,40,.5), rgba(255,120,30,0) 72%);
    transition:opacity .5s;
}
#forge-area.hot::after{ opacity:1; }

#spark-layer{ position:absolute; inset:0; pointer-events:none; z-index:6; overflow:visible; }
.spark{
    position:absolute; width:5px; height:5px; margin:-2px 0 0 -2px; border-radius:50%;
    background:radial-gradient(circle at 40% 35%, #FFF6DC, var(--ss-gold));
    box-shadow:0 0 8px rgba(255,190,90,.95);
    animation:spark-fly .6s cubic-bezier(.2,.7,.35,1) forwards;
}
.spark.cool{
    background:radial-gradient(circle at 40% 35%, #EAF8FF, var(--ss-cool));
    box-shadow:0 0 8px rgba(121,198,234,.9);
}
@keyframes spark-fly{
    0%{ transform:translate(0,0) scale(1.1); opacity:1 }
    100%{ transform:translate(var(--dx,0), var(--dy,0)) scale(.2); opacity:0 }
}

/* the forge mouth: a little brick arch with a live fire in it */
#ember{
    position:absolute; left:0; bottom:0; z-index:0; width:76px; height:58px;
    display:grid; place-items:end center; padding-bottom:3px;
    border:2px solid rgba(255,150,60,.26); border-bottom:none;
    border-radius:38px 38px 6px 6px;
    background:radial-gradient(62% 72% at 50% 104%, rgba(255,140,40,.5), rgba(255,120,30,.05) 74%), rgba(0,0,0,.3);
}
.ember-fire{ font-size:1.6rem; display:block; filter:drop-shadow(0 0 14px rgba(255,140,40,.75));
    animation:fire-lick 1.4s ease-in-out infinite alternate; }
#forge-area.hot #ember{ border-color:rgba(255,170,70,.5); }
#forge-area.hot .ember-fire{ font-size:2rem; }

#clue{
    position:relative; z-index:2; text-align:center; font-size:.95rem; font-weight:700;
    color:var(--ss-dim); min-height:1.4em; padding:0 4px; line-height:1.35;
}
.cl-blank{
    display:inline-block; color:var(--ss-gold); letter-spacing:.2em; font-weight:900;
    border-bottom:2px solid rgba(255,200,97,.5); padding:0 1px 0 3px; margin:0 0 0 2px;
}

#anvil-wrap{ position:relative; z-index:2; width:100%; padding-top:34px;
    display:flex; flex-direction:column; align-items:center; }

#hammer{
    position:absolute; top:0; left:50%; font-size:1.9rem; line-height:1;
    transform-origin:70% 85%; transform:translateX(-50%) rotate(-24deg);
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); transition:left .18s ease;
}
#hammer.strike{ animation:hammer-strike .3s cubic-bezier(.3,1.4,.5,1); }
@keyframes hammer-strike{
    0%{ transform:translateX(-50%) rotate(-46deg) translateY(-7px) }
    45%{ transform:translateX(-50%) rotate(12deg) translateY(7px) }
    100%{ transform:translateX(-50%) rotate(-24deg) translateY(0) }
}

#word-slots{ display:grid; gap:6px; justify-content:center; width:100%; margin:0 auto; }
.tile{
    position:relative; aspect-ratio:4/5; min-height:38px; display:grid; place-items:center;
    border-radius:9px; border:1.5px solid var(--ss-edge);
    background:linear-gradient(180deg,var(--ss-iron),var(--ss-iron-dk));
    box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 5px 12px rgba(0,0,0,.5);
    font-weight:900; font-size:clamp(1.05rem,5.2vw,1.85rem); color:transparent;
    font-variant-numeric:tabular-nums; transition:border-color .2s, box-shadow .2s;
}
.tile.peek{ color:var(--ss-gold); text-shadow:0 0 12px rgba(255,200,97,.5); }
.tile.now{ border-color:var(--ss-gold); box-shadow:inset 0 2px 0 rgba(255,255,255,.06), 0 0 0 2px rgba(255,200,97,.22), 0 5px 12px rgba(0,0,0,.5); }
.tile.set{
    color:var(--ss-hot); border-color:var(--ss-ember);
    background:linear-gradient(180deg,#8A3F10,#4A2210);
    text-shadow:0 0 14px rgba(255,170,70,.95);
}
.tile.hinted{
    color:#E8F7FF; border-color:var(--ss-cool);
    background:linear-gradient(180deg,#2C4653,#1C2C35);
    text-shadow:0 0 12px rgba(121,198,234,.8);
}
.tile.strike{ animation:tile-strike .38s ease-out; }
@keyframes tile-strike{
    0%{ transform:translateY(-5px) scale(1.14); filter:brightness(2.4) }
    45%{ transform:translateY(2px) scale(1.03); filter:brightness(1.5) }
    100%{ transform:translateY(0) scale(1); filter:none }
}
.tile.reject{ animation:tile-reject .4s ease; }
@keyframes tile-reject{
    0%,100%{ transform:translateX(0) }
    22%{ transform:translateX(-6px) } 48%{ transform:translateX(6px) } 74%{ transform:translateX(-3px) }
}
.tile .ghost{
    position:absolute; inset:0; display:grid; place-items:center; color:var(--ss-rose);
    font-weight:900; pointer-events:none; animation:ghost-up .55s ease-out forwards;
}
@keyframes ghost-up{
    0%{ opacity:1; transform:translateY(0) scale(1) }
    100%{ opacity:0; transform:translateY(-22px) scale(.75) }
}
#word-slots.forged .tile{ border-color:var(--ss-gold); }

#peek-bar{ width:min(100%,240px); height:4px; border-radius:3px; background:rgba(255,255,255,.12);
    margin:7px 0 0; overflow:hidden; opacity:0; transition:opacity .3s; }
#peek-bar.on{ opacity:1; }
#peek-bar span{ display:block; height:100%; width:0%; border-radius:3px;
    background:linear-gradient(90deg,var(--ss-ember),var(--ss-gold)); }

#anvil{ width:min(100%,320px); margin-top:8px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)); }
#anvil-face{ height:15px; border-radius:6px 6px 10px 10px; background:linear-gradient(180deg,#7B7683,#3B363F); }
#anvil-waist{ width:34%; margin:0 auto; height:19px; background:linear-gradient(180deg,#3B363F,#2A252D);
    clip-path:polygon(16% 0, 84% 0, 100% 100%, 0 100%); }
#anvil-plinth{ width:58%; margin:0 auto; height:13px; border-radius:0 0 4px 4px; background:linear-gradient(180deg,#4A444F,#211D24); }
#anvil.ring{ animation:anvil-ring .22s ease; }
@keyframes anvil-ring{ 0%,100%{transform:translateY(0)} 40%{transform:translateY(3px)} }

#feedback{
    position:relative; z-index:2; flex:none; text-align:center; font-weight:800; font-size:.95rem;
    min-height:2.6em; padding:0 6px; color:var(--ss-dim); line-height:1.3;
    display:flex; align-items:center; justify-content:center;
}
#feedback.good{ color:var(--ss-gold); }
#feedback.help{ color:var(--ss-cool); }
#feedback.soft{ color:var(--ss-dim); }

/* reveal card — the teaching moment after an imperfect word */
#reveal{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:8;
    width:min(100%,400px); text-align:center; padding:14px 16px 16px; border-radius:18px;
    background:linear-gradient(180deg,#3A2C31,#211A1E); border:1.5px solid var(--ss-ember);
    box-shadow:0 18px 44px rgba(0,0,0,.65);
    /* NOT gk-pop-in: its keyframes set `transform` without the translate(-50%,-50%)
       that centres this card, so the shared animation threw the card a half-width
       off the right edge (and half a height down) for its whole 0.34s — clipping
       the tricky word on a 380px phone. Keep the centring inside the keyframes. */
    animation:ss-reveal-pop .34s cubic-bezier(.18,1.4,.4,1);
}
@keyframes ss-reveal-pop{
    from{ opacity:0; transform:translate(-50%,-50%) scale(.7) }
    to  { opacity:1; transform:translate(-50%,-50%) scale(1) }
}
.rv-label{ font-size:.66rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--ss-faint); }
.rv-word{
    font-size:clamp(1.7rem,8.5vw,2.5rem); font-weight:900; letter-spacing:.1em;
    margin:4px 0 8px; color:var(--ss-ink);
}
.rv-word .tk{
    color:var(--ss-gold); text-shadow:0 0 16px rgba(255,200,97,.6);
    border-bottom:3px solid var(--ss-ember); border-radius:2px;
}
.rv-note{ font-size:.9rem; font-weight:700; color:var(--ss-dim); line-height:1.4; }
.rv-note b{ color:var(--ss-gold); }

#finale{ position:absolute; inset:0; z-index:8; display:grid; place-items:center; pointer-events:none; }
.fin-item{ font-size:5rem; filter:drop-shadow(0 0 34px rgba(255,170,60,.85));
    animation:fin-pop .8s cubic-bezier(.2,1.6,.35,1); }
@keyframes fin-pop{ 0%{ transform:scale(.2) rotate(-25deg); opacity:0 } 60%{ transform:scale(1.15) rotate(6deg); opacity:1 } 100%{ transform:scale(1) rotate(0); opacity:1 } }

/* ── PLAY: tools + keyboard ────────────────────────────────────────────── */
#tool-row{ display:flex; gap:8px; justify-content:center; flex:none; }
.tool-btn{
    flex:1 1 0; min-width:0; min-height:48px; padding:8px 10px; cursor:pointer;
    font-family:inherit; font-weight:800; font-size:.92rem; color:var(--ss-ink);
    background:linear-gradient(180deg,#3E3239,#2A222A); border:1.5px solid var(--ss-edge);
    border-radius:13px; box-shadow:0 3px 0 rgba(0,0,0,.4); line-height:1.15;
}
.tool-btn:active:not(:disabled){ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.4); }
.tool-btn:disabled{ opacity:.42; cursor:default; }
.tool-btn.hint{ border-color:rgba(121,198,234,.5); color:#DFF3FD; }
.tb-sub{ display:block; font-size:.66rem; font-weight:700; color:var(--ss-faint); letter-spacing:.02em; }
.tool-btn.hint .tb-sub{ color:rgba(121,198,234,.75); }

#keyboard{ flex:none; display:flex; flex-direction:column; gap:6px; width:100%; max-width:540px; margin:0 auto; }
.krow{ display:flex; gap:5px; justify-content:center; }
.krow.r2{ padding:0 4%; }
.krow.r3{ padding:0 12%; }
.klet{
    flex:1 1 0; min-width:0; height:48px; cursor:pointer;
    font-family:inherit; font-weight:900; font-size:1.02rem; color:var(--ss-ink); text-transform:uppercase;
    background:linear-gradient(180deg,#443840,#2C242C); border:1.5px solid var(--ss-edge);
    border-radius:10px; box-shadow:0 3px 0 rgba(0,0,0,.45);
    transition:transform .06s, box-shadow .06s, background .12s, color .12s;
}
.klet:active{ transform:translateY(3px); box-shadow:0 0 0 rgba(0,0,0,.45); }
.klet.flash{ background:linear-gradient(180deg,#FFD98A,#FF9A2E); color:#3B1A00; border-color:var(--ss-gold); }
.klet.nope{ background:linear-gradient(180deg,#5A3A3A,#3A2626); color:var(--ss-rose); border-color:rgba(232,119,106,.55); }

/* the shared celebrate card is white — body's cream ink must not leak into it */
.gk-celebrate-card{ color:var(--gk-text); }
.gk-celebrate-card h2{ font-family:var(--ss-display); }

/* ── FOR GROWN-UPS ─────────────────────────────────────────────────────── */
#grownups{
    position:fixed; inset:0; z-index:930; display:flex; align-items:center; justify-content:center;
    background:rgba(12,9,10,.72); padding:16px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    animation:gk-fade-in .25s ease-out;
}
.grownups-card{
    position:relative; width:min(100%,560px); max-height:86vh; overflow-y:auto;
    background:linear-gradient(180deg,#332830,#20191D); color:var(--ss-ink);
    border:1.5px solid var(--ss-edge); border-radius:22px; padding:24px 22px 20px;
    box-shadow:0 22px 60px rgba(0,0,0,.6); animation:gk-pop-in .34s cubic-bezier(.18,1.4,.4,1);
}
.grownups-card h3{ font-family:var(--ss-display); font-size:1.3rem; margin-bottom:10px; color:var(--ss-gold); }
.grownups-card p{ font-size:.94rem; line-height:1.5; color:var(--ss-dim); }
.grownups-card strong{ color:var(--ss-ink); }
.tip-row{ display:flex; gap:12px; align-items:flex-start; margin-top:14px;
    border-top:1px solid rgba(255,255,255,.08); padding-top:14px; }
.tip-icons{ font-size:1.5rem; line-height:1.2; flex:none; }
.close-btn{
    position:absolute; top:10px; right:10px; width:44px; height:44px; border-radius:50%;
    border:1.5px solid var(--ss-edge); background:rgba(0,0,0,.3); color:var(--ss-dim);
    font-size:1.05rem; font-weight:900; cursor:pointer;
}
.close-btn:active{ transform:scale(.94); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:430px){
    #play-top{ margin-top:48px; padding:10px 12px 2px; }
    .pill{ font-size:.8rem; padding:5px 11px; }
    #play-stage{ padding:2px 10px 10px; gap:6px; }
    #rule-text{ font-size:.82rem; }
    #clue{ font-size:.88rem; }
    .klet{ height:46px; font-size:.95rem; border-radius:9px; }
    .krow{ gap:4px; }
    .krow.r3{ padding:0 9%; }
    .tool-btn{ font-size:.85rem; }
    #hammer{ font-size:1.6rem; }
    .fin-item{ font-size:4rem; }
    #anvil-wrap{ padding-top:30px; }
}
@media (max-height:760px){
    .levels-inner{ padding:54px 14px 20px; }
    .levels-sub{ margin-bottom:14px; }
    #level-cards{ gap:10px; }
    .forge-card{ padding:10px 12px; gap:10px; }
    .forge-card .fc-emoji{ width:44px; height:44px; font-size:1.65rem; border-radius:12px; }
    .forge-card .fc-name{ font-size:1rem; }
}
@media (max-height:660px){
    #hammer{ font-size:1.4rem; }
    #anvil-wrap{ padding-top:26px; }
    #anvil-face{ height:12px } #anvil-waist{ height:15px } #anvil-plinth{ height:10px }
    #feedback{ min-height:2.2em; font-size:.88rem; }
    .klet{ height:42px; }
    .tool-btn{ min-height:44px; }
}
@media (min-width:700px){
    #play-stage{ padding-bottom:20px; gap:12px; }
    #rule-text{ font-size:1rem; }
    #clue{ font-size:1.05rem; }
    .klet{ height:52px; font-size:1.1rem; }
}

@media (prefers-reduced-motion:reduce){
    *{ animation:none !important; }
    .ember-dust{ display:none; }
    .spark{ display:none; }
    #peek-bar span{ transition:none !important; }
}

/* ── The top bar must clear the HUD ────────────────────────────────────────
   #play-top used to reserve a hand-rolled `margin-top: 52px`, which put its
   content top at 64px against a HUD whose bottom edge is 68 — so the row grazed
   the pills, the lit progress square tucked under the mute button and #streak-tag,
   which is space-between'd to the right edge, sat under the HUD at 320, 393 and
   430 alike. The row is full-width up to 648px and the streak tag keeps colliding
   until about 1016px, so this is not scoped to phones. --gk-hud-clear-top is
   derived from the HUD's own inset and height in gamekit.css; that is the point —
   52 was a guess, this cannot drift. */
#play-top { margin-top: var(--gk-hud-clear-top); }