/* ==========================================================================
   Typing Tutor
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Base & primitives
   3.  Map screen — masthead, summary, trouble keys, ladder
   4.  Drill screen — topbar, meters, type pane
   5.  Game screen — lives, field, falling words
   6.  Coach — keyboard & hands
   7.  Overlays, panels, switches
   8.  Toasts
   9.  Responsive & motion preferences
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Tokens                                                          *
 * ------------------------------------------------------------------ */

:root {
  /* Surfaces: a cool slate, so the finger colours stay the only hues that
     carry meaning. */
  --bg-900: #0b1017;
  --bg-800: #101620;
  --bg-700: #161d29;
  --bg-600: #1d2532;
  --bg-500: #27303f;
  --line:   #2d3747;
  --line-soft: #222b38;

  --text:       #eaeff7;
  --text-muted: #96a3b8;
  --text-dim:   #64718a;

  /* Accents. Teal is "right", amber is "attend to this", rose is "wrong". */
  --accent:      #2dd4bf;
  --accent-deep: #0f766e;
  --accent-soft: #99f6e4;
  --warn:        #fbbf24;
  --bad:         #fb7185;
  --bad-deep:    #9f1239;
  --gold:        #facc15;

  /* Finger colours. Eight hues is a lot, but colour-coded fingers are how
     every typing chart since the 1930s has taught this, and the point is that
     a student can glance once and know which finger owns a key. */
  --f-lp: #f472b6;
  --f-lr: #c084fc;
  --f-lm: #60a5fa;
  --f-li: #34d399;
  --f-th: #94a3b8;
  --f-ri: #fbbf24;
  --f-rm: #fb923c;
  --f-rr: #f87171;
  --f-rp: #22d3ee;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 2px 6px rgba(0,0,0,.28), 0 8px 22px rgba(0,0,0,.3);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.45);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  /* Keyboard geometry. Every key width is a multiple of one unit, and every
     row adds up to fifteen units, so the board is square at any size. */
  --u: clamp(20px, 5.1vw, 44px);
  --kgap: clamp(3px, 0.7vw, 6px);

  --ease: cubic-bezier(.22,.61,.36,1);

  --font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  color-scheme: dark;
}

/* Paper variant for anyone whose system runs light. */
@media (prefers-color-scheme: light) {
  :root {
    --bg-900: #dfe5ee;
    --bg-800: #eef2f7;
    --bg-700: #f7f9fc;
    --bg-600: #ffffff;
    --bg-500: #e6ebf3;
    --line:   #cdd6e3;
    --line-soft: #dfe5ee;

    --text:       #16202e;
    --text-muted: #5b6982;
    --text-dim:   #8b97ab;

    --accent:      #0d9488;
    --accent-deep: #99f6e4;
    --accent-soft: #0f766e;
    --warn:        #b45309;
    --bad:         #e11d48;
    --bad-deep:    #ffe4e6;
    --gold:        #d97706;

    --f-lp: #db2777;
    --f-lr: #7c3aed;
    --f-lm: #2563eb;
    --f-li: #059669;
    --f-th: #64748b;
    --f-ri: #b45309;
    --f-rm: #c2410c;
    --f-rr: #dc2626;
    --f-rp: #0891b2;

    --shadow-sm: 0 1px 2px rgba(30,45,70,.10);
    --shadow-md: 0 2px 6px rgba(30,45,70,.08), 0 8px 22px rgba(30,45,70,.10);
    --shadow-lg: 0 10px 30px rgba(30,45,70,.14), 0 30px 70px rgba(30,45,70,.16);

    color-scheme: light;
  }
}

/* ------------------------------------------------------------------ *
 * 2. Base & primitives                                               *
 * ------------------------------------------------------------------ */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(45,212,191,.09), transparent 60%),
    var(--bg-800);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(14px, 3vw, 28px) clamp(12px, 3vw, 24px) 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  gap: 18px;
}

.screen { width: 100%; max-width: 980px; }
.screen[hidden] { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The off-screen input exists only so a touch device has something to open a
   soft keyboard against; it must never be seen or scrolled to. */
.capture {
  position: fixed; top: 50%; left: -9999px;
  width: 1px; height: 1px; opacity: 0; border: 0; padding: 0;
}

.btn {
  font: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  color: var(--text);
  background: var(--bg-500);
  transition: transform .12s var(--ease), background .18s, border-color .18s, opacity .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.btn--primary { background: var(--accent); color: #062024; }
.btn--primary:hover { background: var(--accent-soft); }
@media (prefers-color-scheme: light) { .btn--primary { color: #fff; } }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--text-muted); }
.btn--ghost:hover { color: var(--text); border-color: var(--text-dim); }

.btn--quiet {
  background: transparent; color: var(--text-muted);
  padding: 8px 12px; font-size: .88rem; font-weight: 600;
}
.btn--quiet:hover { color: var(--text); background: var(--bg-600); }

.btn--danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn--danger:hover { background: var(--bad); color: #fff; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg-700);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.icon-btn:hover { color: var(--text); border-color: var(--text-dim); }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; }
.icon-btn svg [fill="none"] { fill: none; }

.bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-500);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition: width .25s var(--ease);
}
@media (prefers-color-scheme: light) {
  .bar__fill { background: linear-gradient(90deg, var(--accent), #14b8a6); }
}

/* ------------------------------------------------------------------ *
 * 3. Map screen                                                      *
 * ------------------------------------------------------------------ */

.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.masthead__title {
  margin: 0 0 6px;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  letter-spacing: -.02em;
  font-weight: 800;
}
.masthead__sub {
  margin: 0;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: .94rem;
  line-height: 1.6;
}

.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.summary__item {
  background: var(--bg-700);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.summary__value { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.summary__label { font-size: .72rem; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; }

.trouble {
  background: var(--bg-700);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.trouble__title {
  margin: 0 0 10px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warn);
}
.trouble__keys { display: flex; flex-wrap: wrap; gap: 8px; }
.trouble__key {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-500);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .9rem;
}
.trouble__key b { font-size: 1rem; }
.trouble__key small { color: var(--text-dim); font-family: var(--font); font-size: .72rem; }
.trouble__note { margin: 10px 0 0; font-size: .78rem; color: var(--text-dim); }

.stage { margin-bottom: 26px; }
.stage__title {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-dim);
}
.stage__title::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.stage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 12px;
}

.level {
  position: relative;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--bg-700);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 13px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .15s var(--ease), border-color .18s, background .18s;
}
.level:hover { transform: translateY(-2px); border-color: var(--accent-deep); }
.level:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.level__head { display: flex; align-items: center; gap: 9px; }
.level__num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-500);
  color: var(--text-dim);
  font-size: .76rem; font-weight: 700;
}
.level__name { font-size: .97rem; font-weight: 700; line-height: 1.25; }

.level__keys { display: flex; flex-wrap: wrap; gap: 4px; }
.level__cap {
  min-width: 22px;
  padding: 2px 5px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: .78rem;
  text-align: center;
  color: #06121a;
  background: var(--fc, var(--text-dim));
  font-weight: 700;
}
@media (prefers-color-scheme: light) { .level__cap { color: #fff; } }

.level__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: .76rem;
  color: var(--text-dim);
}

.level--game .level__num { background: var(--warn); color: #201400; }
.level--game { border-style: dashed; }

.level--done .level__num { background: var(--accent); color: #062024; }
.level--current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.level--current::after {
  content: 'Next up';
  position: absolute; top: -9px; right: 12px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent); color: #062024;
  font-size: .64rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
@media (prefers-color-scheme: light) {
  .level--current::after, .level--done .level__num { color: #fff; }
}

.level--locked { opacity: .5; cursor: not-allowed; }
.level--locked:hover { transform: none; border-color: var(--line-soft); }

.stars { display: inline-flex; gap: 2px; }
.star { width: 13px; height: 13px; fill: var(--bg-500); }
.star--on { fill: var(--gold); }

.storage-note {
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bad-deep);
  color: var(--text);
  font-size: .82rem;
}

.back-link { margin: 0 0 6px; font-size: .85rem; }
.back-link a { color: var(--text-dim); text-decoration: none; }
.back-link a:hover { color: var(--accent); }

/* ------------------------------------------------------------------ *
 * 4. Drill screen                                                    *
 * ------------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.topbar__title { text-align: center; flex: 1; }
.topbar__stage {
  display: block;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-dim);
}
.topbar__name { margin: 1px 0 0; font-size: 1.1rem; font-weight: 700; }

.tip {
  margin: 0 auto 14px;
  max-width: 60ch;
  text-align: center;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 2fr;
  gap: 10px;
  margin-bottom: 16px;
}
.meter {
  background: var(--bg-700);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.meter__label {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
.meter__label b { color: var(--text-muted); font-weight: 700; }
.meter__value { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.meter__value small { font-size: .62em; font-weight: 700; color: var(--text-dim); margin-left: 1px; }
.meter__value--muted { color: var(--text-muted); }

/* Accuracy is the graded number, so it is the one that changes colour. */
.meter--key .meter__value { color: var(--accent); }
.meter--key[data-state="warn"] .meter__value { color: var(--warn); }
.meter--key[data-state="bad"]  .meter__value { color: var(--bad); }

.type-pane {
  background: var(--bg-700);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 4vw, 30px) clamp(14px, 3vw, 26px);
  margin-bottom: 16px;
}

.type-line {
  font-family: var(--mono);
  font-size: clamp(1.05rem, 3.1vw, 1.6rem);
  line-height: 1.85;
  letter-spacing: .05em;
  /* Wrapping, not scrolling: a line that runs off the right edge takes the
     cursor with it, and a student who cannot see their place stops typing and
     starts looking at the keyboard. Breaks fall at spaces, so no exercise
     chunk is ever split. */
  white-space: pre-wrap;
}
.type-line--now { color: var(--text); }
.type-line--next { color: var(--text-dim); font-size: clamp(.9rem, 2.4vw, 1.2rem); }
.type-line--after { color: var(--text-dim); opacity: .45; font-size: clamp(.9rem, 2.4vw, 1.2rem); }

.ch { position: relative; border-radius: 3px; }
.ch--done { color: var(--accent); }
.ch--fixed { color: var(--warn); }          /* right in the end, but not first time */
.ch--wrong { color: #fff; background: var(--bad); }
.ch--space.ch--wrong::after { content: '␣'; position: absolute; inset: 0; opacity: .7; }

/* The cursor is a filled block rather than a caret: at this size a caret is
   easy to lose, and the student should never be hunting for their place. */
.ch--now {
  background: var(--accent);
  color: #06181c;
  animation: cursorPulse 1.15s ease-in-out infinite;
}
@media (prefers-color-scheme: light) { .ch--now { color: #fff; } }
.ch--now.ch--blocked {
  background: var(--bad);
  color: #fff;
  animation: shake .3s var(--ease);
}
@keyframes cursorPulse { 50% { opacity: .55; } }
@keyframes shake {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.nudge {
  margin: 0 auto 12px;
  max-width: 54ch;
  text-align: center;
  font-size: .85rem;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--bad-deep);
  color: var(--text);
}

/* ------------------------------------------------------------------ *
 * 5. Game screen                                                     *
 * ------------------------------------------------------------------ */

.lives { display: flex; gap: 5px; }
.heart { width: 20px; height: 20px; fill: var(--bad); transition: opacity .25s, transform .25s; }
.heart--gone { fill: var(--bg-500); opacity: .7; transform: scale(.82); }

.field {
  position: relative;
  height: clamp(220px, 38vh, 340px);
  margin-bottom: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(45,212,191,.05), transparent 45%),
    var(--bg-700);
  overflow: hidden;
}
.field__words { position: absolute; inset: 0; }

.field__ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 26px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, transparent, rgba(251,113,133,.16));
  border-top: 2px dashed rgba(251,113,133,.5);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bad);
}

.fword {
  position: absolute;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-500);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-family: var(--mono);
  font-size: clamp(.95rem, 2.6vw, 1.25rem);
  letter-spacing: .04em;
  white-space: nowrap;
  will-change: top;
}
.fword--locked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
.fword__done { color: var(--accent); }
.fword__rest { color: var(--text); }

/* The last stretch of the fall gets a warmer cast — a word about to land
   should look like one without needing a separate alarm. */
.fword--urgent { border-color: var(--warn); }
.fword--urgent .fword__rest { color: var(--warn); }

.fword--clear { animation: wordClear .28s var(--ease) forwards; }
@keyframes wordClear {
  to { transform: translateX(-50%) scale(1.35); opacity: 0; }
}
.fword--miss { animation: wordMiss .35s var(--ease) forwards; }
@keyframes wordMiss {
  to { transform: translateX(-50%) translateY(14px); opacity: 0; filter: blur(2px); }
}
.fword--nope { animation: shake .22s var(--ease); }

/* ------------------------------------------------------------------ *
 * 6. Coach — keyboard & hands                                        *
 * ------------------------------------------------------------------ */

.coach {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.coach[hidden] { display: none; }

/* --- hands --- */

.hands {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 2vw, 22px);
}
.hand { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hand__label {
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
}
.hand__fingers { display: flex; align-items: flex-end; gap: 4px; }

.finger {
  width: clamp(26px, 6vw, 38px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: .32;
  transition: opacity .16s, transform .16s var(--ease);
}
/* Finger pills are drawn at the length a relaxed hand actually has, so the
   shape reads as a hand rather than a bar chart. */
.finger__stem {
  width: 100%;
  border-radius: 999px 999px 4px 4px;
  background: var(--fc);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.18);
}
.finger[data-len="1"] .finger__stem { height: 26px; }
.finger[data-len="2"] .finger__stem { height: 36px; }
.finger[data-len="3"] .finger__stem { height: 42px; }
.finger[data-len="4"] .finger__stem { height: 38px; }
.finger__key {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
}
.finger.is-on { opacity: 1; transform: translateY(-7px); }
.finger.is-on .finger__key { color: var(--text); }
.finger.is-on .finger__stem { box-shadow: 0 0 0 2px var(--bg-800), 0 0 16px var(--fc); }
/* Shift is a second, quieter instruction: the hand that is not typing. */
.finger.is-aux { opacity: .8; }
.finger.is-aux .finger__stem { outline: 2px dashed var(--fc); outline-offset: 2px; }

.thumb {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding-bottom: 2px;
}
.thumb__stem {
  width: clamp(54px, 13vw, 96px);
  height: 16px;
  border-radius: 999px;
  background: var(--f-th);
  opacity: .32;
  transition: opacity .16s, transform .16s var(--ease);
}
.thumb.is-on .thumb__stem { opacity: 1; transform: translateY(-4px); box-shadow: 0 0 14px var(--f-th); }
.thumb__label { font-size: .6rem; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; }

/* --- keyboard --- */

.keyboard {
  display: flex;
  flex-direction: column;
  gap: var(--kgap);
  padding: clamp(6px, 1.4vw, 12px);
  border-radius: var(--radius);
  background: var(--bg-900);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}
.kb-row { display: flex; gap: var(--kgap); justify-content: center; }

.kb-key {
  position: relative;
  width: calc(var(--u) * var(--w, 1) + var(--kgap) * (var(--w, 1) - 1));
  height: var(--u);
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--bg-600);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: clamp(.6rem, 1.7vw, .82rem);
  transition: background .12s, color .12s, transform .08s, border-color .12s, opacity .2s;
}
.kb-key--mod { font-family: var(--font); font-size: clamp(.5rem, 1.3vw, .66rem); color: var(--text-dim); }

/* Keys the student has been taught sit forward; the rest recede rather than
   disappear, so the shape of the whole board stays learnable. */
.kb-key--off { opacity: .3; }
.kb-key--learned { color: var(--text); background: var(--bg-500); }

/* The home keys keep a coloured underline at all times — the row you return
   to should be visible even when it is not the row you are using. */
.kb-key--home::after {
  content: '';
  position: absolute; bottom: 3px; left: 25%; right: 25%;
  height: 2px; border-radius: 2px;
  background: var(--fc);
  opacity: .85;
}
/* F and J carry a real bump under your fingertip; the drawing says so. */
.kb-key--anchor::after { left: 18%; right: 18%; height: 3px; }

.kb-key--next {
  background: var(--fc);
  border-color: var(--fc);
  color: #07161c;
  transform: translateY(1px);
  box-shadow: 0 0 0 2px var(--bg-900), 0 0 18px var(--fc);
  opacity: 1;
}
@media (prefers-color-scheme: light) { .kb-key--next { color: #fff; } }
.kb-key--next::after { opacity: 0; }

.kb-key--shift {
  border-color: var(--fc);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--fc);
  opacity: 1;
}

.kb-key--down { transform: translateY(2px) scale(.96); background: var(--accent-deep); }
.kb-key--miss { background: var(--bad); color: #fff; border-color: var(--bad); }

.coach__hint {
  margin: 0;
  font-size: .78rem;
  color: var(--text-dim);
  text-align: center;
}
.coach__hint b { color: var(--text-muted); font-family: var(--mono); }

/* ------------------------------------------------------------------ *
 * 7. Overlays, panels, switches                                      *
 * ------------------------------------------------------------------ */

.overlay {
  position: fixed; inset: 0;
  z-index: 40;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(6,10,16,.7);
  backdrop-filter: blur(5px);
  animation: fade .18s var(--ease);
}
.overlay[hidden] { display: none; }
@media (prefers-color-scheme: light) { .overlay { background: rgba(120,135,160,.45); } }
@keyframes fade { from { opacity: 0; } }

.panel {
  width: min(460px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg-700);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 4vw, 30px);
  text-align: center;
  animation: rise .22s var(--ease);
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

.panel__eyebrow {
  margin: 0 0 4px;
  font-size: .7rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.panel--fail .panel__eyebrow { color: var(--bad); }
.panel__title { margin: 0 0 14px; font-size: 1.35rem; font-weight: 800; }
.panel__note {
  margin: 14px 0 0;
  font-size: .85rem; line-height: 1.55;
  color: var(--text-muted);
}
.panel__actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

#result-stars { justify-content: center; gap: 6px; margin-bottom: 10px; }
#result-stars .star { width: 26px; height: 26px; }
#result-stars .star--on { animation: pop .34s var(--ease) backwards; }
#result-stars .star--on:nth-child(2) { animation-delay: .1s; }
#result-stars .star--on:nth-child(3) { animation-delay: .2s; }
@keyframes pop { from { transform: scale(.3) rotate(-25deg); opacity: 0; } }

.result__big {
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}
.panel--fail .result__big { color: var(--bad); }
.result__big small { font-size: .4em; font-weight: 700; }
.result__cap {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 2px;
}

.result__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0 0;
}
.result__item {
  background: var(--bg-600);
  border-radius: var(--radius-sm);
  padding: 9px 6px;
}
.result__item dt {
  font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim);
}
.result__item dd { margin: 3px 0 0; font-size: .95rem; font-weight: 700; }

.result__trouble {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
}
/* An author `display` beats the hidden attribute, so say it again here. */
.result__trouble[hidden] { display: none; }
.result__trouble-label {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
}
.result__trouble-keys { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.result__trouble-keys span {
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--bad-deep);
  color: var(--bad);
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 700;
}
@media (prefers-color-scheme: light) {
  .result__trouble-keys span { color: var(--bad); }
}

.switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-600);
  margin-bottom: 8px;
  cursor: pointer;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__box {
  flex: 0 0 auto;
  width: 40px; height: 23px;
  border-radius: 999px;
  background: var(--bg-500);
  border: 1px solid var(--line);
  position: relative;
  transition: background .18s, border-color .18s;
  margin-top: 2px;
}
.switch__box::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .18s var(--ease), background .18s;
}
.switch input:checked + .switch__box { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch__box::after { transform: translateX(17px); background: #fff; }
.switch input:focus-visible + .switch__box { outline: 3px solid var(--accent); outline-offset: 2px; }
.switch__text { display: flex; flex-direction: column; gap: 2px; }
.switch__text b { font-size: .92rem; }
.switch__text small { font-size: .78rem; color: var(--text-dim); line-height: 1.45; }

/* ------------------------------------------------------------------ *
 * 8. Toasts                                                          *
 * ------------------------------------------------------------------ */

.toasts {
  position: fixed;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--bg-600);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: .85rem;
  animation: toastIn .22s var(--ease);
}
.toast--out { animation: toastOut .3s var(--ease) forwards; }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-6px); opacity: 0; } }

/* ------------------------------------------------------------------ *
 * 9. Responsive & motion preferences                                 *
 * ------------------------------------------------------------------ */

@media (max-width: 720px) {
  .summary { grid-template-columns: repeat(2, 1fr); }
  .meters { grid-template-columns: repeat(3, 1fr); }
  .meter--wide { grid-column: 1 / -1; }
  .masthead { flex-direction: column; }
  .masthead__tools { align-self: flex-end; margin-top: -48px; }
}

@media (max-width: 560px) {
  .stage__grid { grid-template-columns: 1fr 1fr; }
  .level__name { font-size: .88rem; }
  .hand__label, .thumb__label { display: none; }
}

/* Below this the full keyboard stops being readable at any size that also
   leaves room for the exercise, so it steps aside and the hands carry the
   guidance on their own. */
@media (max-width: 460px) {
  .keyboard { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}