/* Quill's Type Quest — keyboarding + spelling for ages 7–8.
   Art direction: an illuminated manuscript. Warm parchment, iron-gall ink,
   gold leaf and a quest trail drawn across the page. Display type is the brand
   serif (Fraunces); everything a child reads is Mulish — never Comic Sans. */

:root{
    --tq-parch:#FBF3DF; --tq-parch-2:#F1E2BE; --tq-parch-3:#E6D3A9;
    --tq-ink:#3B2F52; --tq-ink-soft:#6B5B7E; --tq-dim:#8B7A5F;
    --tq-gold:#C0902A; --tq-gold-lt:#F2CB6A; --tq-gold-dp:#8E6A18;
    --tq-green:#4B8B58; --tq-green-lt:#9BD0A6;
    --tq-rose:#C2564E; --tq-teal:#2E7A8C;
    --tq-edge:rgba(59,47,82,.18);
    --tq-sans:"Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tq-display:"Fraunces", Georgia, "Times New Roman", serif;
}

body{
    font-family:var(--tq-sans);
    color:var(--tq-ink);
    background:radial-gradient(125% 95% at 50% -8%, #FFFAF0 0%, #F8EDD3 42%, #EDDCB6 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; }

/* parchment grain + vignette + faint ink blooms */
.parch-bg{
    position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
    background-image:
        radial-gradient(2px 2px at 14% 26%, rgba(140,105,45,.13), transparent),
        radial-gradient(1.5px 1.5px at 72% 18%, rgba(140,105,45,.12), transparent),
        radial-gradient(2.5px 2.5px at 38% 66%, rgba(140,105,45,.10), transparent),
        radial-gradient(1.5px 1.5px at 86% 74%, rgba(140,105,45,.12), transparent),
        radial-gradient(2px 2px at 24% 86%, rgba(140,105,45,.10), transparent),
        radial-gradient(1.5px 1.5px at 56% 40%, rgba(140,105,45,.10), transparent),
        radial-gradient(60% 45% at 12% 8%, rgba(192,144,42,.10), transparent 70%),
        radial-gradient(55% 40% at 92% 92%, rgba(46,122,140,.09), transparent 70%),
        radial-gradient(130% 105% at 50% 42%, transparent 52%, rgba(120,88,32,.16) 100%);
}

/* thin gold rule frame, like a manuscript border */
.frame{
    position:absolute; inset:14px; pointer-events:none; z-index:1; border-radius:22px;
    border:2px solid rgba(192,144,42,.4);
    box-shadow:inset 0 0 0 5px rgba(255,255,255,.35), inset 0 0 0 6.5px rgba(192,144,42,.22);
}

/* ── START ─────────────────────────────────────────────────────────────── */
.start-inner{ position:relative; z-index:2; text-align:center; padding:26px 22px; max-width:540px; }

#quill-hero{ position:relative; width:126px; height:126px; margin:0 auto 6px; animation:hover-bob 3.4s ease-in-out infinite; }
#quill-hero .seal{
    position:absolute; inset:0; border-radius:50%;
    background:radial-gradient(circle at 34% 28%, #FFF1C8, var(--tq-gold-lt) 55%, var(--tq-gold) 100%);
    box-shadow:0 12px 24px rgba(120,88,32,.3), inset 0 -4px 12px rgba(142,106,24,.35);
}
#quill-hero .q-bird{ position:absolute; inset:0; display:grid; place-items:center; font-size:4.1rem; line-height:1;
    filter:drop-shadow(0 4px 6px rgba(90,60,20,.35)); }
#quill-hero .q-pen{ position:absolute; right:-2px; bottom:2px; font-size:2.3rem; transform:rotate(-18deg);
    filter:drop-shadow(0 3px 4px rgba(90,60,20,.35)); }
@keyframes hover-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }

.game-title{
    font-family:var(--tq-display); font-weight:900; font-size:clamp(2.2rem,7.6vw,3.5rem);
    line-height:1.0; letter-spacing:-.005em; margin:.12em 0 .06em; color:var(--tq-ink);
    text-shadow:0 2px 0 rgba(255,255,255,.7), 0 5px 16px rgba(120,88,32,.22);
}
.tq-accent{ color:var(--tq-gold-dp); }
.flourish{ color:var(--tq-gold); font-size:.85rem; letter-spacing:.28em; margin:2px 0 8px; }
.tagline{ font-size:clamp(1.02rem,3.1vw,1.26rem); font-weight:800; color:var(--tq-ink-soft); margin:0 0 .5em; }
.rules{ font-size:clamp(.88rem,2.6vw,1rem); font-weight:600; color:var(--tq-dim); line-height:1.45;
    max-width:27em; margin:0 auto 14px; }
.ink-good{ color:var(--tq-green); }
.star-chip{
    display:block; width:-moz-fit-content; width:fit-content;
    background:rgba(192,144,42,.14); border:1.5px solid rgba(192,144,42,.5);
    color:var(--tq-gold-dp); font-weight:800; border-radius:999px; padding:6px 16px; margin:0 auto 18px;
}
.kbd-note{ margin-top:14px; font-size:.82rem; font-weight:700; color:var(--tq-dim); }

#screen-start .gk-go, #screen-levels .gk-go{
    background:linear-gradient(135deg,#E8B34A,#C0902A); color:#40280A;
    box-shadow:0 6px 18px rgba(142,106,24,.4);
}

.info-btn{
    position:absolute; left:22px; bottom:22px; z-index:6;
    width:56px; height:56px; border:none; border-radius:50%;
    background:rgba(255,255,255,.94); font-size:1.55rem; cursor:pointer;
    box-shadow:0 4px 12px rgba(120,88,32,.3); transition:transform .15s;
}
.info-btn:hover{ transform:scale(1.08); }
.info-btn:active{ transform:scale(.92); }

.corner-btn{
    position:fixed; top:14px; left:14px; z-index:6; border:1.5px solid rgba(192,144,42,.55);
    background:rgba(255,252,242,.9); color:var(--tq-ink); font-family:inherit; font-weight:800;
    border-radius:14px; padding:10px 16px; min-height:48px; cursor:pointer;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    box-shadow:0 3px 10px rgba(120,88,32,.2);
}
.corner-btn:active{ transform:scale(.95); }

/* ── QUEST MAP ─────────────────────────────────────────────────────────── */
.levels-inner{ position:relative; z-index:2; width:100%; max-width:820px; padding:74px 24px 28px; text-align:center; }
.levels-heading{ font-family:var(--tq-display); font-weight:900; font-size:clamp(1.55rem,5vw,2.3rem); margin:0; }
.levels-sub{ color:var(--tq-dim); font-weight:700; font-size:clamp(.86rem,2.5vw,1rem); margin:6px 0 18px; }
#level-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; }
.trail-card{
    position:relative; text-align:center; cursor:pointer; color:var(--tq-ink); font-family:inherit;
    background:linear-gradient(180deg,#FFFCF2,var(--tq-parch-2));
    border:2px solid rgba(192,144,42,.45); border-radius:20px; padding:15px 10px 12px;
    box-shadow:0 8px 18px rgba(120,88,32,.18); overflow:hidden;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.trail-card:hover{ transform:translateY(-3px); border-color:var(--tq-gold); box-shadow:0 13px 24px rgba(120,88,32,.26); }
.trail-card:active{ transform:scale(.975); }
.trail-card .t-emoji{ font-size:2.35rem; line-height:1; display:block; filter:drop-shadow(0 3px 4px rgba(90,60,20,.25)); }
.trail-card .t-name{ display:block; font-family:var(--tq-display); font-weight:800; font-size:1.06rem; margin-top:5px; line-height:1.15; }
.trail-card .t-sub{ display:block; font-size:.7rem; font-weight:800; color:var(--tq-dim);
    letter-spacing:.05em; text-transform:uppercase; margin-top:3px; }
.trail-card .t-sample{ display:block; font-size:.78rem; font-weight:700; color:var(--tq-teal); margin-top:5px; }
.trail-card .t-stars{ display:block; margin-top:6px; font-size:.85rem; letter-spacing:2px; color:var(--tq-gold); min-height:1.1em; }
.trail-card .t-num{
    position:absolute; top:8px; left:9px; width:22px; height:22px; border-radius:50%;
    background:rgba(192,144,42,.2); color:var(--tq-gold-dp); font-size:.74rem; font-weight:900;
    display:grid; place-items:center;
}
.trail-card.here{ border-color:var(--tq-teal); }
.trail-card .t-here{
    position:absolute; top:8px; right:8px; background:var(--tq-teal); color:#fff;
    font-size:.6rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
    border-radius:999px; padding:3px 7px;
}

/* ── PLAY ──────────────────────────────────────────────────────────────── */
/* margin-top is the HUD clearance token, not the 74px that used to sit here. 74
   happened to clear the HUD's 68px bottom edge, but it was a measured constant: it
   knew nothing about the pill count or a notch, and the short-viewport rule further
   down had drifted to a different number for the same job. One source now. */
#play-top{
    position:relative; z-index:2; width:100%; max-width:720px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:6px 16px 2px; margin-top:var(--gk-hud-clear-top); flex:none;
}
.pill{
    background:rgba(255,252,242,.85); border:1.5px solid rgba(192,144,42,.45); border-radius:999px;
    padding:6px 13px; font-weight:800; font-size:.86rem; color:var(--tq-ink); white-space:nowrap;
}
.streak-pill{ border-color:rgba(194,86,78,.45); color:#A2413A; }
.streak-pill.hot{ background:rgba(242,203,106,.4); border-color:var(--tq-gold); }
#progress-dots{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; flex:1; }
#progress-dots span{
    width:10px; height:10px; border-radius:50%; background:rgba(59,47,82,.14);
    transition:background .2s, transform .2s;
}
#progress-dots span.done{ background:var(--tq-green); }
#progress-dots span.miss{ background:var(--tq-gold); }
#progress-dots span.now{ background:var(--tq-teal); transform:scale(1.35); box-shadow:0 0 0 3px rgba(46,122,140,.18); }

/* quest trail */
#quest{ position:relative; z-index:1; width:100%; max-width:640px; height:70px; flex:none; padding:0 18px; }
#path-line{
    position:absolute; left:22px; right:56px; top:50px; height:9px; border-radius:6px;
    background:
        repeating-linear-gradient(90deg, rgba(120,88,32,.34) 0 8px, transparent 8px 15px),
        rgba(120,88,32,.1);
}
.wp{ position:absolute; top:28px; font-size:1.1rem; line-height:1; transform:translateX(-50%); opacity:.6; }
.wp1{ left:calc(22px + .30 * (100% - 78px)); }
.wp2{ left:calc(22px + .63 * (100% - 78px)); }
#path-fill{
    position:absolute; left:0; top:0; bottom:0; width:2%; border-radius:6px;
    background:linear-gradient(90deg,var(--tq-gold-lt),var(--tq-gold));
    box-shadow:0 0 10px rgba(192,144,42,.5);
    transition:width .55s cubic-bezier(.2,.9,.3,1.2);
}
#goal-mark{ position:absolute; right:14px; top:20px; font-size:2.1rem; line-height:1;
    filter:drop-shadow(0 3px 5px rgba(90,60,20,.3)); }
#quill{
    position:absolute; left:22px; top:12px; width:44px; height:44px;
    transform:translateX(-50%); transition:left .55s cubic-bezier(.2,.9,.3,1.2);
}
#quill .q-bird{ position:absolute; inset:0; display:grid; place-items:center; font-size:1.75rem; line-height:1;
    filter:drop-shadow(0 3px 4px rgba(90,60,20,.3)); }
#quill .q-pen{ position:absolute; right:-4px; bottom:0; font-size:1rem; transform:rotate(-20deg); }
#quill.hop{ animation:hop .5s ease; }
@keyframes hop{ 0%,100%{transform:translateX(-50%) translateY(0)} 40%{transform:translateX(-50%) translateY(-13px) rotate(-7deg)} }

/* word card */
#play-mid{
    position:relative; z-index:1; flex:1 1 auto; min-height:0; width:100%; max-width:660px;
    display:flex; flex-direction:column; justify-content:center; gap:12px; padding:4px 16px 6px;
}
#word-card{
    position:relative;
    background:linear-gradient(180deg,#FFFDF6,var(--tq-parch-2));
    border:2px solid rgba(192,144,42,.42); border-radius:22px; padding:16px 14px 14px; text-align:center;
    box-shadow:0 10px 24px rgba(120,88,32,.2), inset 0 0 0 4px rgba(255,255,255,.45);
}
#word-label{ font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
    color:var(--tq-dim); margin-bottom:6px; }
.say-btn{
    position:absolute; top:8px; right:8px; width:48px; height:48px; border-radius:50%;
    border:1.5px solid rgba(192,144,42,.45); background:rgba(255,255,255,.9);
    font-size:1.2rem; cursor:pointer; transition:transform .12s;
}
.say-btn:active{ transform:scale(.92); }

#word-line{
    display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center;
    gap:6px 12px; font-weight:800; letter-spacing:.02em;
    font-size:clamp(2.25rem,11vw,3.6rem);
}
#word-line.len-m{ font-size:clamp(1.9rem,8.4vw,2.9rem); }
#word-line.len-l{ font-size:clamp(1.5rem,6.4vw,2.35rem); }
.wgroup{ display:inline-flex; }
.tile{
    position:relative; display:inline-block; min-width:.72em; padding:0 .07em 2px;
    color:rgba(59,47,82,.58); border-bottom:4px solid rgba(59,47,82,.2);
    border-radius:5px 5px 3px 3px; transition:color .12s, background .12s, border-color .12s;
}
.tile.spc{ min-width:.9em; border-bottom-color:rgba(59,47,82,.2); }
.tile.done{ color:var(--tq-green); background:rgba(75,139,88,.13); border-bottom-color:var(--tq-green); }
.tile.now{
    color:var(--tq-ink); background:rgba(242,203,106,.42); border-bottom-color:var(--tq-gold);
    animation:tile-glow 1.1s ease-in-out infinite;
}
@keyframes tile-glow{ 0%,100%{box-shadow:0 0 0 rgba(192,144,42,0)} 50%{box-shadow:0 3px 14px rgba(192,144,42,.55)} }
.tile.bad{
    color:var(--tq-rose); background:rgba(194,86,78,.16); border-bottom-color:var(--tq-rose);
    animation:wobble .4s ease;
}
@keyframes wobble{
    0%,100%{transform:translateX(0) rotate(0)}
    22%{transform:translateX(-5px) rotate(-4deg)}
    46%{transform:translateX(5px) rotate(4deg)}
    72%{transform:translateX(-3px) rotate(-2deg)}
}
#word-line.won .tile{ color:var(--tq-gold-dp); background:rgba(242,203,106,.5); border-bottom-color:var(--tq-gold); }
#word-line.won{ animation:stamp .45s ease; }
@keyframes stamp{ 0%{transform:scale(1)} 35%{transform:scale(1.06)} 100%{transform:scale(1)} }

#feedback{ margin-top:7px; min-height:1.45em; font-size:clamp(.84rem,2.6vw,1rem); font-weight:800; color:var(--tq-dim); }
#feedback.good{ color:var(--tq-green); }
#feedback.hint{ color:#A2413A; }

/* Quill's scroll — every finished word gets written down (spelling recall,
   and a visible pile of "I did that") */
#scroll-row{
    display:flex; align-items:center; gap:9px; min-width:0;
    background:rgba(255,252,242,.62); border:1.5px solid rgba(192,144,42,.28);
    border-radius:14px; padding:6px 10px;
}
.scroll-label{ flex:none; font-size:.66rem; font-weight:900; letter-spacing:.06em;
    text-transform:uppercase; color:var(--tq-dim); }
#scroll-words{
    flex:1 1 auto; min-width:0; white-space:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -ms-overflow-style:none; padding:1px 0;
}
#scroll-words::-webkit-scrollbar{ display:none; }
.sw-empty{ font-size:.74rem; font-weight:700; color:rgba(139,122,95,.75); font-style:italic; }
.sw{
    display:inline-block; margin-right:5px; padding:3px 9px; border-radius:999px;
    background:rgba(75,139,88,.14); border:1px solid rgba(75,139,88,.35);
    color:#2F6B3D; font-size:.78rem; font-weight:800; animation:sw-in .35s ease backwards;
}
.sw.slipped{ background:rgba(192,144,42,.16); border-color:rgba(192,144,42,.45); color:var(--tq-gold-dp); }
@keyframes sw-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* gentle stats — no countdown anywhere */
#stats-row{ display:flex; justify-content:center; gap:8px; }
.stat{
    flex:1 1 0; min-width:0; background:rgba(255,252,242,.72); border:1.5px solid rgba(192,144,42,.3);
    border-radius:14px; padding:6px 4px 5px; text-align:center;
}
.stat-n{ display:block; font-weight:900; font-size:1.02rem; color:var(--tq-teal); font-variant-numeric:tabular-nums; }
.stat-l{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tq-dim); }

/* ── ON-SCREEN KEYBOARD ────────────────────────────────────────────────── */
#kb-wrap{
    position:relative; z-index:2; width:100%; max-width:660px; flex:none;
    padding:0 12px max(12px, env(safe-area-inset-bottom)); text-align:center;
}
#finger-hint{
    display:inline-block; margin:0 auto 7px; font-size:.78rem; font-weight:800; color:var(--tq-ink-soft);
    background:rgba(255,252,242,.8); border:1.5px solid rgba(192,144,42,.3);
    border-radius:999px; padding:4px 13px; letter-spacing:.02em;
}
#keyboard{ display:flex; flex-direction:column; gap:5px; }
.krow{ display:flex; gap:4px; justify-content:center; }
.k{
    width:min(54px,8.6%); min-height:46px; padding:0; flex:none; position:relative;
    font-family:inherit; font-weight:800; font-size:.98rem; color:var(--tq-ink);
    background:linear-gradient(180deg,#FFFDF7, var(--tint,#EFE3C8));
    border:1.5px solid rgba(59,47,82,.16); border-radius:10px;
    box-shadow:0 3px 0 rgba(120,88,32,.22); cursor:pointer;
    transition:transform .07s, box-shadow .07s, background .12s, border-color .12s;
}
.k:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(120,88,32,.22); }
.k.k-space{ width:min(250px,46%); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--tq-dim); --tint:#EAE0CC; }
.k.home::before{
    content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%; background:rgba(46,122,140,.35);
}
.k.bump::after{
    content:''; position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
    width:14px; height:3px; border-radius:2px; background:rgba(59,47,82,.3);
}
/* finger colour families: warm = left hand, cool = right hand */
.k.hl.fp{ --tint:#F6D9D2; } .k.hl.fr{ --tint:#F7E4C9; }
.k.hl.fm{ --tint:#F3EBC6; } .k.hl.fi{ --tint:#E7EBC9; }
.k.hr.fi{ --tint:#D6EBDD; } .k.hr.fm{ --tint:#D3E7EC; }
.k.hr.fr{ --tint:#D9DFF0; } .k.hr.fp{ --tint:#E6D9EE; }

.k.next{
    color:#3A2405; border-color:var(--tq-gold-dp);
    background:linear-gradient(180deg,#FFE9A8,var(--tq-gold-lt));
    box-shadow:0 3px 0 var(--tq-gold-dp), 0 0 0 3px rgba(242,203,106,.45);
    animation:key-pulse 1.15s ease-in-out infinite;
}
@keyframes key-pulse{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.k.next.shout{ animation:key-shout .5s ease-in-out infinite; }
@keyframes key-shout{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-4px) scale(1.09)} }
.k.hit{ background:linear-gradient(180deg,#CFEBD6,#8FCB9F); border-color:var(--tq-green); color:#173C21; }
.k.slip{ background:linear-gradient(180deg,#F6D3CF,#E4A49E); border-color:var(--tq-rose); color:#5A1B16; }

/* ── FOR GROWN-UPS ─────────────────────────────────────────────────────── */
#grownups{
    position:fixed; inset:0; z-index:960; display:flex; align-items:center; justify-content:center;
    background:rgba(59,47,82,.5); padding:4vw;
}
.grownups-card{
    position:relative; max-width:min(94vw,560px); max-height:92vh; overflow-y:auto;
    background:linear-gradient(180deg,#FFFDF6,#FBF3DF); border:2px solid rgba(192,144,42,.4);
}
.grownups-card h3{ font-family:var(--tq-display); color:var(--tq-gold-dp);
    font-size:clamp(1.25rem,3.4vw,1.6rem); margin-bottom:10px; }
.grownups-card p{ font-size:clamp(.92rem,2.2vw,1.05rem); line-height:1.55; margin-bottom:10px; color:var(--tq-ink); }
.tip-row{ display:flex; gap:12px; align-items:flex-start; background:rgba(192,144,42,.12);
    border-radius:16px; padding:12px 14px; margin-top:4px; }
.tip-row p{ margin:0; }
.tip-icons{ font-size:1.7rem; line-height:1.2; }
.close-btn{
    position:absolute; top:10px; right:10px; width:48px; height:48px; border-radius:50%;
    border:none; background:var(--tq-gold-lt); color:#42290A; font-size:1.2rem; font-weight:900; cursor:pointer;
}
.close-btn:active{ transform:scale(.92); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:430px){
    .frame{ inset:9px; }
    #play-top{ margin-top:68px; padding:4px 12px 2px; }
    .pill{ font-size:.78rem; padding:5px 10px; }
    #quest{ height:62px; padding:0 10px; }
    #path-line{ top:44px; }
    .wp{ top:23px; font-size:1rem; }
    #quill{ top:6px; }
    #goal-mark{ top:14px; font-size:1.8rem; }
    .k{ min-height:42px; font-size:.9rem; border-radius:9px; }
    .stat-n{ font-size:.94rem; }
    .scroll-label{ font-size:.6rem; }
}
/* short viewports (landscape phones): flatten the trail, tighten everything */
@media (max-height:640px){
    /* clear the fixed HUD: any less and the streak pill tucks in behind the
       mute/voice buttons. --gk-hud-clear-top replaces a hand-rolled 72px that was
       6px short of the HUD's real bottom edge; see gamekit.css. */
    #play-top{ margin-top:var(--gk-hud-clear-top); }
    #quest{ height:40px; }
    #quest #quill .q-bird{ font-size:1.4rem; }
    #goal-mark{ top:4px; font-size:1.5rem; }
    #path-line{ top:27px; }
    .wp{ top:9px; font-size:.9rem; }
    #quill{ top:0; }
    #word-line{ font-size:clamp(1.7rem,7vw,2.4rem); }
    .k{ min-height:38px; }
    #stats-row, #scroll-row{ display:none; }
}
@media (max-height:520px){
    #quest{ display:none; }
    #play-top{ margin-top:56px; }
    #word-card{ padding:8px 10px 6px; }
    #feedback{ min-height:1.2em; }
}
@media (min-width:700px){
    .k{ font-size:1.05rem; min-height:52px; }
    #finger-hint{ font-size:.86rem; }
    #word-label{ font-size:.78rem; }
    .pill{ font-size:.95rem; padding:7px 15px; }
    .scroll-label{ font-size:.72rem; }
    .sw{ font-size:.84rem; }
}
/* Wide BUT SHORT — a phone or small tablet held sideways. The min-width rule
   above must not re-inflate the keys here: the taller keyboard squeezed
   #play-mid so hard that the word card spilled up over the top row and the HUD
   and down over the keys. Keep the short-viewport key height. */
@media (min-width:700px) and (max-height:640px){
    .k{ min-height:38px; font-size:.95rem; }
    #finger-hint{ font-size:.78rem; }
}
/* Very short: buy the word card the room it needs by trimming the chrome
   around it. The streak pill is the least useful thing on screen at this
   height, and the HUD already owns the top-right corner. */
@media (max-height:460px){
    /* the top row now shares its line with the fixed ‹ Map button on the left
       and the HUD on the right — stay clear of both corners. The right reserve is
       --gk-hud-clear-right, not a hand-rolled 190px: 190 was 18px short of the
       three-pill HUD and would have been 84px short of a four-pill one. */
    #play-top{ margin-top:8px; padding:4px var(--gk-hud-clear-right) 2px 92px; }
    #streak-tag{ display:none; }
    /* sit the card on the keyboard rather than centring it, so it can never
       drift up under the fixed HUD buttons in the top-right corner */
    #play-mid{ justify-content:flex-end; }
    .say-btn{ width:40px; height:40px; font-size:1rem; top:6px; right:6px; }
    #word-line{ font-size:clamp(1.4rem,5.4vw,2rem); }
    #word-line.len-m{ font-size:clamp(1.3rem,4.8vw,1.8rem); }
    #word-line.len-l{ font-size:clamp(1.1rem,3.9vw,1.55rem); }
}
@media (max-height:380px){
    #word-label{ display:none; }
    .k{ min-height:34px; }
    #keyboard{ gap:4px; }
    .krow{ gap:3px; }
    #finger-hint{ margin-bottom:5px; }
    #feedback{ min-height:1.1em; margin-top:4px; }
    #word-line{ font-size:clamp(1.25rem,4.6vw,1.7rem); }
    #word-line.len-m{ font-size:clamp(1.15rem,4vw,1.5rem); }
    #word-line.len-l{ font-size:clamp(1rem,3.4vw,1.35rem); }
}
/* Narrow AND short: no width left for the trail name between the two corners —
   drop it and give the progress dots the room. */
@media (max-height:460px) and (max-width:699px){
    #chapter-tag{ display:none; }
}
/* the floor: a small phone in landscape (568×320). Every pixel the keyboard
   gives back is a pixel the word card no longer has to steal from the HUD. */
@media (max-height:340px){
    .k{ min-height:29px; }
    #finger-hint{ margin-bottom:4px; }
}
@media (min-height:760px){
    #quest{ height:84px; }
    #path-line{ top:62px; }
    .wp{ top:38px; font-size:1.2rem; }
    #quill{ top:20px; }
    #goal-mark{ top:28px; }
}

@media (prefers-reduced-motion:reduce){
    *{ animation:none !important; }
    #path-fill, #quill, .tile, .k{ transition:none !important; }
    .tile.now{ box-shadow:0 3px 10px rgba(192,144,42,.45); }
}