/* Gap game — same tokens and faces as playground.css, plus right/wrong states. */
:root{
  --bg:#f4f5f2; --surface:#ffffff; --ink:#1d2640; --muted:#5b6377; --line:#dde0e5; --chip:#eceef1;
  --accent:#b8321f; --accent-ink:#ffffff;
  --c-verb:#c2412d; --c-noun:#2f6fb0; --c-det:#7a4fb5; --c-adj:#2e8a57; --c-neg:#5f6675; --c-subj:#8a90a0;
  --flash:#fde7a8; --warn:#9a6700; --warn-bg:#fff4d6;
  --ok:#2c7a51; --ok-bg:#e6f4ec; --bad:#b8321f; --bad-bg:#fbe9e5; --gap:#b9bfcb;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131722; --surface:#1b202d; --ink:#eceef4; --muted:#a2aabc; --line:#2c3344; --chip:#262c3b;
    --accent:#f0765f; --accent-ink:#1b1f2a;
    --c-verb:#f0876f; --c-noun:#6fa8e8; --c-det:#b391e8; --c-adj:#62c48d; --c-neg:#a7aebd; --c-subj:#8990a2;
    --flash:#5a4a1c; --warn:#f1bd4a; --warn-bg:#3a3120;
    --ok:#62c48d; --ok-bg:#1e3328; --bad:#f0876f; --bad-bg:#37231f; --gap:#4b5468;
  }
}
:root[data-theme="dark"]{
  --bg:#131722; --surface:#1b202d; --ink:#eceef4; --muted:#a2aabc; --line:#2c3344; --chip:#262c3b;
  --accent:#f0765f; --accent-ink:#1b1f2a;
  --c-verb:#f0876f; --c-noun:#6fa8e8; --c-det:#b391e8; --c-adj:#62c48d; --c-neg:#a7aebd; --c-subj:#8990a2;
  --flash:#5a4a1c; --warn:#f1bd4a; --warn-bg:#3a3120;
  --ok:#62c48d; --ok-bg:#1e3328; --bad:#f0876f; --bad-bg:#37231f; --gap:#4b5468;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-inline:16px;padding-block:18px 56px;-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:760px;margin:0 auto}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-family:"Young Serif",Georgia,serif;font-size:1.3rem;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent)}
.tabs{display:flex;gap:4px;background:var(--chip);padding:4px;border-radius:999px}
.tabs a{padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:600}
.tabs a[aria-current="page"]{background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* scoreboard */
.score{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 12px;display:flex;gap:8px;align-items:baseline}
.stat b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.stat span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.levels{display:flex;gap:4px;margin-left:auto;background:var(--chip);padding:4px;border-radius:999px}
.levels button{border:0;background:transparent;border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--muted)}
.levels button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* question card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 18px 20px}
.ask{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 6px}
.prompt{font-size:1.2rem;margin:0 0 4px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 18px}
.chip{background:var(--chip);border-radius:999px;padding:3px 10px;font-size:.78rem;color:var(--muted);font-weight:600}
.chip.k-verb{color:var(--c-verb)}.chip.k-noun{color:var(--c-noun)}.chip.k-det{color:var(--c-det)}.chip.k-adj{color:var(--c-adj)}

.sent{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px 6px}
.tok{display:inline-flex;flex-direction:column;align-items:center;padding:0 3px;--c:var(--ink)}
.tok .w{border-bottom:3px solid var(--c);line-height:1.2;padding-bottom:1px;font-family:"Young Serif",Georgia,serif;font-size:clamp(1.4rem,3.4vw,1.9rem)}
.tok .l{font-size:.66rem;color:var(--muted);margin-top:4px;white-space:nowrap}
.tok.r-verb{--c:var(--c-verb)}.tok.r-noun{--c:var(--c-noun)}.tok.r-det{--c:var(--c-det)}
.tok.r-adj{--c:var(--c-adj)}.tok.r-neg{--c:var(--c-neg)}.tok.r-subj{--c:var(--c-subj)}
.tok.r-subj .w{color:var(--muted)}
.dot{font-family:"Young Serif",Georgia,serif;font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.2;margin-left:-4px}

/* the gap */
.gap input{font-family:"Young Serif",Georgia,serif;font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.2;
  width:var(--w,7ch);min-width:5ch;background:transparent;border:0;border-bottom:3px dashed var(--gap);
  padding:0 2px 1px;text-align:center;color:var(--ink)}
.gap input::placeholder{color:var(--gap);opacity:.65}
.gap.is-ok input{border-bottom-style:solid;border-bottom-color:var(--ok);color:var(--ok)}
.gap.is-bad input{border-bottom-style:solid;border-bottom-color:var(--bad);color:var(--bad)}
.gap .l{color:var(--ink);font-weight:700;font-size:.74rem;background:var(--chip);
  border-radius:999px;padding:3px 10px;margin-top:7px;white-space:normal;text-align:center;max-width:22ch}

.keys{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 0}
.keys button{background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:4px 10px;cursor:pointer;
  font-family:"Young Serif",Georgia,serif;font-size:1rem}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.btn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;padding:9px 16px;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:default}

.chk{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--muted);cursor:pointer;margin-left:auto}
.chk input{accent-color:var(--accent);width:16px;height:16px}
.chk small{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.options{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.options button{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 14px;cursor:pointer;
  font-family:"Young Serif",Georgia,serif;font-size:1.05rem}
.options button:hover{border-color:var(--accent)}

/* verdict + teaching */
.verdict{margin-top:16px;border-radius:12px;padding:14px 16px;border:1px solid var(--line)}
.verdict.ok{background:var(--ok-bg);border-color:var(--ok)}
.verdict.bad{background:var(--bad-bg);border-color:var(--bad)}
.verdict h3{margin:0 0 6px;font-size:1rem}
.verdict.ok h3{color:var(--ok)}.verdict.bad h3{color:var(--bad)}
.verdict .answer{font-family:"Young Serif",Georgia,serif;font-size:1.5rem}
.teach{margin-top:14px;display:grid;gap:10px}
.teach .note{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.95rem}
.teach .note.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.teach h4{margin:0 0 6px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.forms{display:flex;flex-wrap:wrap;gap:6px}
.forms .f{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:.92rem}
.forms .f b{font-family:"Young Serif",Georgia,serif;font-size:1.05rem;font-weight:400}
.forms .f.hit{border-color:var(--ok);background:var(--ok-bg)}
.forms .f small{color:var(--muted);margin-right:6px}
.exs{display:grid;gap:8px}
.ex{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ex .es{font-family:"Young Serif",Georgia,serif;font-size:1.1rem}
.ex .en{color:var(--muted);font-size:.92rem}
.ex u{text-decoration:none;border-bottom:3px solid var(--accent);padding-bottom:1px}
.foot{color:var(--muted);font-size:.85rem;margin-top:22px}
@media (prefers-reduced-motion:no-preference){.verdict{animation:rise .25s ease}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}