/* Marlow's Story Detective — reading comprehension for ages 7–8.
   Art direction: a cozy late-night detective office. Warm dark walnut desk,
   a pool of lamp light, and cream "case file" paper for everything the child
   has to READ. Type is Mulish (the brand sans) — this tier of kid finds Comic
   Sans babyish — with Fraunces for the noir title plates. */

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

    /* paper */
    --sd-paper:#fdf5e2; --sd-paper-2:#f4e7c9; --sd-paper-edge:#d8c397;
    --sd-ink:#2f2519; --sd-ink-soft:#6a5940;

    /* office */
    --sd-night:#2b201a; --sd-night-2:#191310; --sd-cream:#f7ecd6; --sd-dim:#c3ae90;

    /* accents */
    --sd-red:#c04a3f; --sd-teal:#1f6d78; --sd-gold:#e2a53c;
    --sd-green:#3d8b58; --sd-green-l:#67c184; --sd-amber:#d68a1e;
}

body{
    font-family:var(--sd-sans);
    color:var(--sd-cream);
    background:#1c1510;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
}

/* every screen fills the viewport — without this the layout floats */
/* overflow-x:clip because .start-inner::before is a 132%-wide decorative light
   pool: it bled 51px past a 320px viewport (49px at 393, 30px at 430) and the
   document became pannable sideways, so the start screen slid under the child's
   thumb. `clip`, not `hidden`, on purpose — `hidden` would make this a scroll
   container and turn the passage panel's own overflow-y:auto into a nested
   scroller. Clipping here rather than on .start-inner keeps the glow: it is cut
   at the viewport edge, which is where it was visually cut already. */
.screen{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow-x:clip; }
#screen-play{ flex-direction:column; justify-content:flex-start; align-items:stretch; }

/* ── the office backdrop ───────────────────────────────────────────────── */
.office-bg{
    position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
    background:
        radial-gradient(72% 46% at 50% -8%, rgba(255,214,142,.22), rgba(255,214,142,0) 72%),
        repeating-linear-gradient(114deg, rgba(255,240,205,.018) 0 2px, rgba(0,0,0,0) 2px 9px),
        linear-gradient(180deg, #33261e 0%, #221a15 52%, #14100d 100%);
}
.office-bg::after{      /* soft vignette so the paper pops */
    content:''; position:absolute; inset:0;
    background:radial-gradient(120% 85% at 50% 40%, rgba(0,0,0,0) 45%, rgba(0,0,0,.42) 100%);
}
.deco{ position:absolute; opacity:.07; line-height:1; filter:grayscale(1); }
.deco-1{ left:4%; bottom:6%; font-size:5.2rem; transform:rotate(-22deg); }
.deco-2{ right:5%; top:12%; font-size:6.4rem; transform:rotate(14deg); }
.deco-3{ right:6%; bottom:7%; font-size:6rem; transform:rotate(16deg); }
.deco-4{ left:7%; bottom:11%; font-size:3.6rem; transform:rotate(-34deg); }

/* ── shared chrome ─────────────────────────────────────────────────────── */
kbd{
    font-family:inherit; font-size:.8em; font-weight:800; padding:1px 6px; border-radius:5px;
    background:rgba(255,240,210,.14); border:1px solid rgba(255,240,210,.34); border-bottom-width:2px;
}
.info-btn{
    position:absolute; bottom:14px; left:14px; z-index:40; width:50px; height:50px;
    border:1.5px solid rgba(255,240,210,.28); border-radius:50%; background:rgba(30,22,17,.86);
    color:var(--sd-cream); font-size:1.3rem; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.info-btn:active{ transform:scale(.93); }
.corner-btn{
    position:fixed; top:12px; left:12px; z-index:60; border:1.5px solid rgba(255,240,210,.26);
    background:rgba(30,22,17,.86); color:var(--sd-cream); font-family:inherit; font-weight:800;
    font-size:.92rem; border-radius:12px; padding:9px 14px; cursor:pointer;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.corner-btn:active{ transform:scale(.95); }

/* ── START ─────────────────────────────────────────────────────────────── */
.start-inner{ position:relative; z-index:1; text-align:center; padding:70px 22px 78px; max-width:560px; }
.start-inner::before{      /* pool of desk-lamp light behind the title plate */
    content:''; position:absolute; left:50%; top:14%; width:132%; aspect-ratio:1;
    transform:translate(-50%,-8%); z-index:-1; pointer-events:none;
    background:radial-gradient(circle, rgba(255,206,128,.16) 0%, rgba(255,206,128,.07) 38%, rgba(255,206,128,0) 66%);
}
#start-badge{
    position:relative; display:inline-block; font-size:4.4rem; line-height:1;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.6));
}
#start-badge .sleuth{ display:block; }
#start-badge .glass{ position:absolute; right:-27px; bottom:-7px; font-size:1.95rem; animation:sd-search 3.6s ease-in-out infinite; }
@keyframes sd-search{ 0%,100%{ transform:translate(0,0) rotate(-10deg) } 50%{ transform:translate(-5px,-7px) rotate(12deg) } }

.eyebrow{
    margin:12px 0 2px; font-size:.7rem; font-weight:900; letter-spacing:.22em;
    text-transform:uppercase; color:var(--sd-gold); opacity:.9;
}
.game-title{
    font-family:var(--sd-display); font-weight:900; font-size:clamp(2rem,7.2vw,3.3rem);
    line-height:1.04; letter-spacing:-.01em; margin:.06em 0 .12em;
    text-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 30px rgba(226,165,60,.22);
}
.sd-accent{ color:var(--sd-gold); }
.tagline{ color:var(--sd-dim); font-size:clamp(.98rem,3vw,1.18rem); font-weight:700; margin:0 0 14px; }
.chip-row{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.chip{
    background:rgba(255,240,210,.08); border:1.5px solid rgba(255,240,210,.24); color:var(--sd-cream);
    font-weight:800; font-size:.9rem; border-radius:999px; padding:6px 15px;
}
.chip.star{ color:var(--sd-gold); border-color:rgba(226,165,60,.5); background:rgba(226,165,60,.12); }
#screen-start .gk-go, #screen-levels .gk-go{
    background:linear-gradient(135deg,#e6b04a,#c8842c); color:#2a1a06;
    box-shadow:0 8px 22px rgba(200,132,44,.4);
}
.kbd-line{ margin-top:16px; font-size:.84rem; font-weight:700; color:var(--sd-dim); }

/* ── FILE SELECT ───────────────────────────────────────────────────────── */
.levels-inner{ position:relative; z-index:1; width:100%; max-width:880px; padding:74px 18px 80px; text-align:center; }
.levels-heading{ font-family:var(--sd-display); font-weight:900; font-size:clamp(1.5rem,5vw,2.1rem); margin:0; }
.levels-sub{ color:var(--sd-dim); font-weight:600; font-size:.95rem; margin:8px auto 22px; max-width:560px; }
#level-cards{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:720px){ #level-cards{ grid-template-columns:repeat(3,1fr); } }

.file-card{
    position:relative; margin-top:13px; display:flex; align-items:center; gap:13px; text-align:left;
    background:linear-gradient(165deg,#efdaa6,#dfc286); border:1px solid #c5a970;
    border-radius:3px 14px 14px 14px; padding:13px 14px; cursor:pointer;
    color:var(--sd-ink); font-family:inherit; box-shadow:0 10px 22px rgba(0,0,0,.42);
    transition:transform .12s ease, box-shadow .12s ease;
}
.file-card::before{      /* folder tab */
    content:''; position:absolute; left:0; top:-13px; width:86px; height:14px;
    background:linear-gradient(180deg,#f0dcaa,#e7d197); border:1px solid #c5a970; border-bottom:none;
    border-radius:9px 9px 0 0;
}
.file-card:hover{ transform:translateY(-3px); box-shadow:0 15px 28px rgba(0,0,0,.5); }
.file-card:active{ transform:scale(.985); }
.file-card .f-icon{ font-size:2.2rem; line-height:1; flex:none; filter:drop-shadow(0 2px 2px rgba(0,0,0,.22)); }
.file-card .f-body{ flex:1; min-width:0; }
.file-card .f-rank{ display:block; font-family:var(--sd-display); font-weight:900; font-size:1.16rem; }
.file-card .f-sub{ display:block; font-size:.82rem; font-weight:700; color:#6d5a3c; margin-top:1px; }
.file-card .f-stars{ display:block; margin-top:5px; font-size:.86rem; letter-spacing:2px; color:#b2812a; }

/* ── PLAY: top bar ─────────────────────────────────────────────────────── */
#play-top{
    position:relative; z-index:2; width:100%; max-width:920px; margin:60px auto 0;
    display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:6px 16px 2px;
}
.pill{
    background:rgba(24,17,13,.72); border:1.5px solid rgba(255,240,210,.2); border-radius:999px;
    padding:5px 13px; font-weight:800; font-size:.85rem; color:var(--sd-cream); white-space:nowrap;
    -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.streak-pill{ border-color:rgba(226,165,60,.45); color:#f3c96f; }
.score-pill{ border-color:rgba(103,193,132,.4); color:#9fd9b1; margin-right:auto; }
#progress-dots{ flex:1 0 100%; display:flex; justify-content:center; align-items:center; gap:15px; padding-top:7px; }
.dot-group{ display:flex; gap:6px; }
#progress-dots span{
    width:9px; height:9px; border-radius:50%; background:rgba(255,240,210,.19);
    transition:background .2s, transform .2s;
}
#progress-dots span.done{ background:var(--sd-green-l); }
#progress-dots span.miss{ background:var(--sd-gold); }
#progress-dots span.now{ background:#fbe4ae; transform:scale(1.45); box-shadow:0 0 9px rgba(251,228,174,.85); }

/* ── PLAY: the board ───────────────────────────────────────────────────── */
#board{
    position:relative; z-index:1; flex:1; min-height:0; width:100%; max-width:920px;
    margin:0 auto; padding:8px 16px 16px; display:flex; flex-direction:column; gap:11px;
    overflow-x:hidden; overflow-y:auto;    /* last-resort scroll on tiny screens */
}

/* the case-file paper (passage) */
#passage-card{
    position:relative; flex:1 1 auto; min-height:150px; display:flex; flex-direction:column;
    padding:30px 16px 8px;
    background:linear-gradient(158deg,var(--sd-paper) 0%, var(--sd-paper-2) 100%);
    border:1px solid var(--sd-paper-edge); border-radius:5px 5px 12px 12px;
    box-shadow:0 16px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
    color:var(--sd-ink);
}
#passage-card::after{   /* coffee ring, because detectives drink coffee */
    content:''; position:absolute; right:14px; bottom:8px; width:46px; height:46px; border-radius:50%;
    border:5px solid rgba(120,78,32,.10); pointer-events:none;
}
.file-tab{
    position:absolute; top:0; left:0; background:var(--sd-red); color:#ffeede;
    font-size:.6rem; font-weight:900; letter-spacing:.17em; padding:4px 12px 4px 13px;
    border-radius:4px 0 10px 0;
}
.case-head{ display:flex; align-items:center; gap:9px; padding-right:44px; }
.case-icon{ font-size:1.5rem; line-height:1; flex:none; }
.case-title{
    font-family:var(--sd-display); font-weight:900; font-size:clamp(1.02rem,4vw,1.32rem);
    line-height:1.15; color:#3a2a17;
}
.say-btn{
    flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--sd-paper-edge);
    background:#fffaee; color:var(--sd-ink); font-size:1rem; cursor:pointer; line-height:1;
}
.say-btn:hover{ background:#fff; border-color:var(--sd-teal); }
.say-btn:active{ transform:scale(.92); }
#btn-say-passage{ position:absolute; top:5px; right:7px; }

/* the story itself, with a "there's more below" fade cue when it scrolls */
.passage-wrap{ position:relative; flex:1 1 auto; min-height:0; display:flex; margin-top:8px; }
.passage-wrap::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:32px; pointer-events:none;
    background:linear-gradient(180deg, rgba(246,234,206,0) 0%, rgba(246,234,206,.86) 55%, rgba(245,232,201,1) 100%);
    opacity:0; transition:opacity .18s ease;
}
.passage-wrap.more::after{ opacity:1; }
.passage{
    flex:1 1 auto; min-width:0; overflow-y:auto; overscroll-behavior:contain;
    padding-right:4px; scrollbar-width:thin;
    font-size:clamp(1rem,3.5vw,1.11rem); line-height:1.78; font-weight:500; color:var(--sd-ink);
}
.paper-foot{ flex:none; font-size:.7rem; font-weight:700; color:#9c8760; padding:6px 52px 2px 0; }

/* sentence spans + highlighter marker */
.sent{ border-radius:4px; padding:1px 0; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.sent.hl{
    background-image:linear-gradient(180deg, rgba(244,204,96,0) 6%, rgba(244,204,96,.9) 13%, rgba(244,204,96,.9) 90%, rgba(244,204,96,0) 97%);
    background-repeat:no-repeat; background-size:0% 100%;
    animation:sd-mark .55s ease forwards;
}
.sent.hl.good{
    background-image:linear-gradient(180deg, rgba(126,214,155,0) 6%, rgba(126,214,155,.85) 13%, rgba(126,214,155,.85) 90%, rgba(126,214,155,0) 97%);
}
@keyframes sd-mark{ to{ background-size:100% 100% } }

/* the question note keeps its full height; the story panel above it is the one
   that gives ground (and scrolls inside) when the screen is short */
#q-panel{ flex:0 0 auto; min-height:0; display:flex; }
#q-card{
    position:relative; flex:1; min-width:0; padding:12px 14px 13px;
    background:linear-gradient(168deg,#fffbf0,#f7eed8);
    border:1px solid var(--sd-paper-edge); border-radius:12px; color:var(--sd-ink);
    box-shadow:0 14px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.7);
    display:flex; flex-direction:column; min-height:0;
}
.q-head{ display:flex; align-items:center; gap:8px; }
.q-chip{
    background:rgba(31,109,120,.12); border:1.5px solid rgba(31,109,120,.4); color:#175c66;
    border-radius:999px; padding:3px 11px; font-size:.74rem; font-weight:900; white-space:nowrap;
}
.q-chip.t-why{ background:rgba(192,74,63,.12); border-color:rgba(192,74,63,.42); color:#a53a30; }
.q-chip.t-main{ background:rgba(226,165,60,.16); border-color:rgba(180,124,30,.45); color:#8f6416; }
.q-chip.t-word{ background:rgba(61,139,88,.14); border-color:rgba(61,139,88,.42); color:#2f6f44; }
.q-count{ font-size:.74rem; font-weight:800; color:#8b7550; margin-right:auto; }
.q-text{ font-size:clamp(1rem,3.6vw,1.14rem); font-weight:800; line-height:1.35; margin:9px 0 10px; }

#options{ display:flex; flex-direction:column; gap:7px; }
.opt{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left; min-height:50px;
    background:#fffdf6; border:2px solid #dfcaa0; border-radius:12px; padding:8px 11px;
    font-family:inherit; font-size:clamp(.94rem,3.3vw,1.02rem); font-weight:700; line-height:1.3;
    color:var(--sd-ink); cursor:pointer;
    transition:transform .1s ease, box-shadow .12s ease, border-color .12s, background .12s;
}
.opt .kb{
    flex:none; width:26px; height:26px; border-radius:8px; background:var(--sd-teal); color:#fff;
    font-size:.82rem; font-weight:900; display:grid; place-items:center;
}
.opt .otext{ flex:1; min-width:0; }
.opt .mark{ flex:none; font-size:1.1rem; width:1.2em; text-align:center; }
.opt:hover:not(:disabled){ transform:translateY(-2px); border-color:var(--sd-teal); box-shadow:0 7px 14px rgba(0,0,0,.2); }
.opt:active:not(:disabled){ transform:scale(.985); }
.opt:focus-visible{ outline:3px solid var(--sd-gold); outline-offset:2px; }
.opt:disabled{ cursor:default; }
.opt.right{ background:#e8f7e7; border-color:var(--sd-green); }
.opt.right .kb{ background:var(--sd-green); }
.opt.chosen-off{ background:#fdf0d9; border-color:var(--sd-amber); }
.opt.chosen-off .kb{ background:var(--sd-amber); }
.opt.faded{ opacity:.5; }
.opt.pulse{ animation:sd-pop .38s ease; }
@keyframes sd-pop{ 0%{transform:scale(1)} 45%{transform:scale(1.03)} 100%{transform:scale(1)} }

#feedback{ margin-top:10px; border-top:1px dashed #d8c49c; padding-top:9px; display:flex; align-items:center; gap:10px; }
#fb-text{ flex:1; min-width:0; font-size:.9rem; font-weight:800; line-height:1.38; }
#fb-text.good{ color:#2c7548; }
#fb-text.bad{ color:#8a5a12; }
.next-btn{
    flex:none; font-family:inherit; font-weight:900; font-size:.94rem; color:#fff;
    background:linear-gradient(135deg,#2a8290,#1f6d78); border:none; border-radius:11px;
    padding:11px 15px; min-height:44px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.28);
}
.next-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.28); }
.next-btn:focus-visible{ outline:3px solid var(--sd-gold); outline-offset:2px; }

/* CASE SOLVED rubber stamp */
#stamp{ position:absolute; inset:0; z-index:30; display:grid; place-items:center; pointer-events:none; }
.stamp-ink{
    position:relative; font-family:var(--sd-display); font-weight:900; text-transform:uppercase;
    font-size:clamp(1.9rem,10vw,3.4rem); line-height:.98; letter-spacing:.05em; text-align:center;
    color:rgba(192,74,63,.92); border:7px double rgba(192,74,63,.85); border-radius:16px;
    padding:16px 26px; background:rgba(255,244,226,.14); transform:rotate(-9deg);
    text-shadow:0 2px 0 rgba(255,240,220,.25); animation:sd-stamp .55s cubic-bezier(.2,1.6,.3,1);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.stamp-glass{ position:absolute; right:-14px; bottom:-16px; font-size:2rem; filter:none; }
@keyframes sd-stamp{
    0%{ opacity:0; transform:rotate(-9deg) scale(2.5) }
    55%{ opacity:1; transform:rotate(-9deg) scale(.94) }
    100%{ opacity:1; transform:rotate(-9deg) scale(1) }
}

/* the shared celebrate card is white paper — keep the ink dark on it, since
   this game's body colour is cream for the dark office backdrop */
.gk-celebrate-card{ color:var(--sd-ink); }
.gk-celebrate-card h2{ font-family:var(--sd-display); }

/* ── FOR GROWN-UPS ─────────────────────────────────────────────────────── */
.nb{ white-space:nowrap; }
#grownups{
    position:fixed; inset:0; z-index:920; display:flex; align-items:center; justify-content:center;
    background:rgba(20,14,10,.62); padding:16px; overflow:auto;
}
.grownups-card{
    position:relative; max-width:540px; width:100%; text-align:left;
    background:linear-gradient(165deg,#fffaee,#f5ead1); color:var(--sd-ink);
    border:1px solid var(--sd-paper-edge);
}
.grownups-card h3{ font-family:var(--sd-display); font-size:1.28rem; margin-bottom:8px; }
.grownups-card p{ font-size:.93rem; line-height:1.5; margin-bottom:9px; }
.teach-list{ margin:0 0 10px 18px; padding:0; }
.teach-list li{ font-size:.9rem; line-height:1.45; margin-bottom:5px; }
.tip-row{ display:flex; gap:10px; align-items:flex-start; background:rgba(31,109,120,.1); border-radius:16px; padding:10px 12px; }
.tip-row .tip-icons{ font-size:1.5rem; line-height:1; flex:none; }
.tip-row p{ margin:0; font-size:.88rem; }
.grownups-card kbd{ background:rgba(47,37,25,.08); border-color:rgba(47,37,25,.3); color:var(--sd-ink); }
.close-btn{
    position:absolute; top:8px; right:8px; width:38px; height:38px; border-radius:50%;
    border:2px solid var(--sd-paper-edge); background:#fffaee; font-size:1rem; font-weight:900;
    color:var(--sd-ink); cursor:pointer;
}

/* ── desktop: story on the left, questions on the right ────────────────── */
@media (min-width:840px){
    /* two papers laid out on the desk, centred in the lamp light */
    #board{ flex-direction:row; align-items:center; gap:18px; padding-bottom:20px; }
    #passage-card{ flex:1 1 47%; min-width:0; max-height:100%; padding:32px 20px 10px; }
    #q-panel{ flex:1 1 53%; min-width:0; max-height:100%; align-self:center; overflow-y:auto; }
    #q-card{ padding:16px 18px 16px; }
    .passage{ font-size:1.1rem; }
    #play-top{ margin-top:20px; padding-left:114px; padding-right:198px; }
    #progress-dots{ justify-content:flex-start; }
    #stamp{ padding-right:50%; }        /* the stamp lands on the case file itself */
}
@media (min-width:840px) and (max-height:520px){
    #play-top{ margin-top:12px; }
}

/* ── small phones ──────────────────────────────────────────────────────── */
@media (max-width:430px){
    #play-top{ margin-top:58px; padding:4px 12px 0; }
    .pill{ font-size:.79rem; padding:4px 11px; }
    #board{ padding:7px 11px 12px; gap:9px; }
    #passage-card{ padding:28px 13px 6px; }
    #q-card{ padding:11px 12px 12px; }
    .passage{ line-height:1.72; }
    .opt{ min-height:46px; padding:7px 10px; }
    #feedback{ flex-wrap:wrap; }
    #fb-text{ flex:1 0 100%; }
    .next-btn{ margin-left:auto; }
}
/* short phones: squeeze the chrome, never the story */
@media (max-width:839px) and (max-height:720px){
    #play-top{ margin-top:54px; padding:2px 12px 0; }
    .pill{ font-size:.76rem; padding:3px 10px; }
    #progress-dots{ padding-top:5px; gap:12px; }
    #board{ padding:6px 11px 10px; gap:8px; }
    #passage-card{ padding:26px 12px 4px; min-height:156px; }
    .paper-foot{ display:none; }
    .case-title{ font-size:1rem; }
    .passage{ line-height:1.62; }
    #q-card{ padding:9px 11px 10px; }
    .q-text{ margin:7px 0 8px; }
    #options{ gap:6px; }
    /* 44px floor, even on a 568px-tall phone. These were 42 / 36 / 38, i.e. the
       three answer buttons and "next case" were all under the minimum tap size
       on the narrowest screens — and this is the 7–8 band's showcase game. The
       height is paid for by .passage, which is `flex:1 1 auto; overflow-y:auto`
       and simply scrolls a little sooner; the comment above this block already
       says squeeze the chrome, never the story, and the story is untouched. */
    .opt{ min-height:44px; padding:6px 9px; }
    #q-card.answered .opt{ min-height:44px; padding:5px 9px; }
    #feedback{ margin-top:7px; padding-top:7px; }
    #fb-text{ font-size:.85rem; }
    .next-btn{ min-height:44px; padding:9px 12px; font-size:.9rem; }
}

@media (prefers-reduced-motion:reduce){
    *{ animation:none !important; }
    .sent.hl{ background-size:100% 100% !important; }
    .opt, .file-card{ transition:none !important; }
    /* With the transition gone there is nothing left to damp the hover lift, so a
       pointer resting on a card's bottom edge would flicker it up/down every frame
       (lift → cursor falls outside → drop → cursor inside again). Keep the border
       and shadow as the hover cue and drop the movement — which is what someone
       who asked for reduced motion wanted anyway. */
    .file-card:hover, .opt:hover:not(:disabled){ transform:none !important; }
}

/* ── The case pills must clear the HUD ─────────────────────────────────────
   #play-top used a hand-rolled `margin: 60px auto 0`, which left the streak and
   score digits grazing the HUD's bottom edge by 8px at 320. Same fix as every
   other top strip in the fleet: the shared --gk-hud-clear-top token, computed
   from the HUD's real inset and button height in gamekit.css. */
#play-top { margin-top: var(--gk-hud-clear-top); }