/* TippFlug · style.css */
:root {
  --bg: #030b18;
  --bg-2: #061426;
  --surface: #0a1c30;
  --surface-2: #0f2740;
  --surface-3: #16354f;
  --border: rgba(110, 231, 220, 0.12);
  --border-strong: rgba(110, 231, 220, 0.24);
  --text: #e9fbff;
  --muted: #9cc4cf;
  --faint: #628a98;
  --primary: #0e9fb5;
  --primary-2: #5eead4;
  --primary-ink: #ffffff;
  --grad: linear-gradient(135deg, #0891b2 0%, #0ea5a4 50%, #10b981 100%);
  --accent: #38bdf8;
  --ok: #34d399;
  --err: #fb7185;
  --warn: #fbbf24;
  --shadow: 0 12px 34px rgba(0, 6, 16, 0.5);
  --glow: 0 0 0 1px rgba(45, 212, 191, 0.35), 0 8px 30px rgba(14, 165, 164, 0.3);
  --radius: 18px;
  --radius-sm: 12px;
  --f-lp: #f472b6; --f-lr: #fb923c; --f-lm: #facc15; --f-li: #4ade80;
  --f-ri: #38bdf8; --f-rm: #facc15; --f-rr: #fb923c; --f-rp: #f472b6; --f-th: #5eead4;
  --key-bg: #12304a; --key-ink: #d9f6ff; --hand: #16354f;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eefaf9;
  --bg-2: #e2f4f4;
  --surface: #ffffff;
  --surface-2: #eaf7f6;
  --surface-3: #d3ecec;
  --border: rgba(8, 80, 90, 0.1);
  --border-strong: rgba(8, 80, 90, 0.2);
  --text: #0a2530;
  --muted: #436670;
  --faint: #7e9ea7;
  --primary: #0e7490;
  --primary-2: #0d9488;
  --grad: linear-gradient(135deg, #0e7490 0%, #0d9488 55%, #059669 100%);
  --accent: #0284c7;
  --ok: #059669;
  --err: #e11d48;
  --warn: #b45309;
  --shadow: 0 10px 30px rgba(8, 80, 90, 0.1);
  --glow: 0 0 0 1px rgba(13, 148, 136, 0.25), 0 8px 24px rgba(13, 148, 136, 0.18);
  --f-lp: #db2777; --f-lr: #ea580c; --f-lm: #ca8a04; --f-li: #16a34a;
  --f-ri: #0284c7; --f-rm: #ca8a04; --f-rr: #ea580c; --f-rp: #db2777; --f-th: #0d9488;
  --key-bg: #ffffff; --key-ink: #0f2e38; --hand: #d3ecec;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: radial-gradient(1200px 700px at 85% -10%, rgba(14, 165, 164, 0.16), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(56, 189, 248, 0.12), transparent 60%),
              var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 900; }
h2 { font-size: 1.25rem; font-weight: 800; }
p { margin: 0; }
kbd {
  font-family: var(--mono);
  font-size: 0.82em;
  font-weight: 700;
  display: inline-block;
  min-width: 1.7em;
  padding: 0.05em 0.45em;
  border-radius: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  text-align: center;
  color: var(--text);
}
code { font-family: var(--mono); background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.view:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; inset-inline-start: 8px; top: 8px; z-index: 100; background: var(--primary); color: #fff; padding: 8px 14px; border-radius: 8px; transform: translateY(-300%); }
.skip:focus { transform: none; }
body { overflow-x: clip; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-2); margin-bottom: 4px; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 60ch; margin-top: 8px; }
.empty { color: var(--muted); padding: 24px 0; text-align: center; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 16px;
  background: linear-gradient(180deg, rgba(6, 22, 38, 0.82), rgba(3, 12, 24, 0.86));
  border-right: 1px solid var(--border);
  backdrop-filter: blur(10px);
  z-index: 20;
}
:root[data-theme="light"] .sidebar { background: rgba(255, 255, 255, 0.85); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 8px; }
.brand-logo { width: 44px; height: 52px; display: block; }
.brand-logo svg { width: 100%; height: 100%; }
.brand-name { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; }
.brand-name b { color: var(--primary-2); font-weight: 900; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; min-height: 44px;
  border-radius: 12px; text-decoration: none;
  color: var(--muted); font-weight: 700;
  transition: background 0.15s, color 0.15s;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--primary); color: var(--primary-ink); box-shadow: var(--glow); }
.nav .ic { width: 20px; height: 20px; }
.player { margin-top: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.player-top { display: flex; align-items: center; gap: 10px; }
.player-top b { display: block; font-size: 0.95rem; }
.player-top span { font-size: 0.8rem; color: var(--muted); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; }
.player-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.player-row span { display: inline-flex; gap: 5px; align-items: center; }
.player-row span:first-child .ic { color: var(--warn); }

.view { padding: 32px clamp(16px, 4vw, 48px) 140px; max-width: 1240px; width: 100%; margin: 0 auto; animation: viewIn 0.28s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 0.5s ease; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-weight: 800; font-size: 0.98rem;
  text-decoration: none; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
  color: var(--text); background: var(--surface-2);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--grad); color: #fff; box-shadow: var(--glow); }
.btn.primary:hover { box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.55), 0 10px 34px rgba(14, 165, 164, 0.45); }
.btn.ghost { background: transparent; border-color: var(--border-strong); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: transparent; border-color: color-mix(in srgb, var(--err) 60%, transparent); color: var(--err); }
.btn.danger:hover { background: color-mix(in srgb, var(--err) 12%, transparent); }
.btn.lg { min-height: 52px; padding: 12px 24px; font-size: 1.05rem; }
.btn.sm { min-height: 38px; padding: 7px 12px; font-size: 0.88rem; border-radius: 10px; }
.btn.icon { width: 44px; padding: 0; }
.btn.block { width: 100%; }
.btn kbd { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.2); color: inherit; font-size: 0.72em; }
.btn.ghost kbd { background: var(--surface-3); }

/* ---------- home ---------- */
.hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 34px; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: auto -80px -120px auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(16, 185, 129, 0.22), transparent 70%); pointer-events: none; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hint-line { margin-top: 12px; color: var(--faint); font-size: 0.9rem; font-weight: 700; }
.ring { position: relative; width: 150px; height: 150px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring-bg { stroke: var(--surface-3); }
.ring-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-label b { font-size: 1.6rem; font-weight: 900; }
.ring-label span { font-size: 0.8rem; color: var(--muted); font-weight: 700; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0 8px; }
.tile { display: flex; align-items: center; gap: 14px; padding: 18px; }
.tile > div { flex: 1; min-width: 0; }
.tile b { display: block; font-size: 1.35rem; font-weight: 900; }
.tile span { color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.tile-ic { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--surface-2); color: var(--primary-2); }
.tiles .tile:nth-child(2) .tile-ic { color: var(--warn); }
.tiles .tile:nth-child(3) .tile-ic { color: var(--accent); }
.tiles .tile:nth-child(4) .tile-ic { color: var(--ok); }

.section-title { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; }
.section-title .ic { color: var(--primary-2); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.rec { display: flex; align-items: center; gap: 14px; padding: 18px; text-decoration: none; transition: transform 0.15s, border-color 0.15s; border-left: 4px solid var(--c); }
.rec:hover { transform: translateY(-2px); border-color: var(--c); }
.rec-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); flex: none; }
.rec-ic .ic { width: 22px; height: 22px; }
.rec-body { flex: 1; min-width: 0; }
.rec-body b { display: block; }
.rec-body span { display: block; color: var(--muted); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-go { color: var(--faint); }
.grid-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mode { display: flex; flex-direction: column; gap: 8px; padding: 22px; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; position: relative; overflow: hidden; }
.mode::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.mode:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.mode-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); margin-bottom: 6px; }
.mode-ic .ic { width: 26px; height: 26px; }
.mode b { font-size: 1.12rem; }
.mode span:last-child { color: var(--muted); font-size: 0.92rem; }

/* ---------- page head ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.head-stats { display: flex; gap: 12px; align-items: center; }
.head-stats > div { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px; text-align: center; }
.head-stats b { display: block; font-size: 1.3rem; font-weight: 900; }
.head-stats span { font-size: 0.8rem; color: var(--muted); font-weight: 700; }

/* ---------- lessons ---------- */
.weak-banner { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 18px; text-decoration: none; border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.weak-banner > .ic:first-child { color: var(--err); width: 26px; height: 26px; }
.weak-banner span { flex: 1; }
.stage { margin-bottom: 30px; }
.stage-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stage-title small { color: var(--muted); font-weight: 600; font-size: 0.92rem; width: 100%; padding-left: 46px; margin-top: -6px; }
.stage-num { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 900; }
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.lesson-tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; min-height: 140px; text-decoration: none; transition: transform 0.15s, border-color 0.15s; }
a.lesson-tile:hover { transform: translateY(-2px); border-color: var(--primary); }
.lesson-tile.done { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.lesson-tile.locked { opacity: 0.5; box-shadow: none; }
.lt-num { position: absolute; top: 12px; right: 14px; font-weight: 900; color: var(--faint); font-size: 0.85rem; }
.lt-title { font-weight: 800; padding-right: 26px; }
.keycaps { display: flex; gap: 5px; flex-wrap: wrap; }
.keycaps kbd { font-size: 0.95rem; min-width: 2em; padding: 0.15em 0.4em; }
.keycaps.big kbd { font-size: 1.3rem; background: var(--primary); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.lt-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.lt-best { color: var(--accent); }
.stars { display: inline-flex; gap: 2px; }
.star .ic { width: 18px; height: 18px; color: var(--surface-3); fill: var(--surface-3); stroke: none; }
.star.on .ic { color: var(--warn); fill: var(--warn); }
.stars.big { gap: 10px; margin: 14px 0; }
.stars.big .ic { width: 46px; height: 46px; }
.stars.big .star.on { animation: starPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.stars.big .star:nth-child(2) { animation-delay: 0.18s; }
.stars.big .star:nth-child(3) { animation-delay: 0.36s; }
@keyframes starPop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }

/* ---------- runner (lesson / test / vocab learn) ---------- */
.runner { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.runner.narrow { max-width: 720px; }
.runner-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.runner-title { flex: 1; min-width: 200px; }
.runner-title h1 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.counter { font-weight: 900; color: var(--muted); font-size: 1.1rem; }
.live { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.live-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; }
.live-item span { font-size: 0.78rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.live-item b { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
.live-item small { color: var(--faint); font-weight: 700; font-size: 0.78rem; }
.progress { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 0.2s; }

.typer-box { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 30px; box-shadow: var(--shadow); transition: border-color 0.2s; }
.typer-box.done { border-color: var(--ok); }
.typer-box.compact { padding: 18px 24px; }
.typer { height: calc(3 * 1.95em); overflow: hidden; font-family: var(--mono); font-size: clamp(1.15rem, 2.3vw, 1.7rem); font-weight: 500; }
.typer-box.compact .typer { height: calc(2 * 1.95em); }
.typer-inner { transition: transform 0.25s ease; }
.tline { height: 1.95em; line-height: 1.95em; white-space: pre; color: var(--faint); transition: opacity 0.2s; }
.tline.past { opacity: 0.45; }
.ch { position: relative; border-radius: 4px; transition: color 0.08s; }
.ch.ok { color: var(--text); }
.ch.fix { color: var(--warn); }
.ch.cur { color: var(--text); background: color-mix(in srgb, var(--primary) 30%, transparent); box-shadow: inset 0 -3px 0 var(--primary-2); }
.ch.cur.sp { background: color-mix(in srgb, var(--primary) 30%, transparent); }
.ch.err { background: color-mix(in srgb, var(--err) 35%, transparent); box-shadow: inset 0 -3px 0 var(--err); animation: shake 0.22s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.start-hint { position: absolute; inset: auto 0 -14px 0; margin: 0 auto; width: max-content; max-width: 90%; display: flex; gap: 8px; align-items: center; background: var(--primary); color: #fff; font-weight: 800; font-size: 0.88rem; padding: 6px 14px; border-radius: 99px; box-shadow: var(--glow); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { transform: translateY(-3px); } }
.finger-hint { min-height: 1.6em; text-align: center; color: var(--muted); font-weight: 700; }
.finger-hint b { color: var(--text); }
.runner-foot { text-align: center; color: var(--faint); font-size: 0.85rem; }
.f-lp-text { color: var(--f-lp) !important; } .f-lr-text { color: var(--f-lr) !important; } .f-lm-text { color: var(--f-lm) !important; } .f-li-text { color: var(--f-li) !important; }
.f-ri-text { color: var(--f-ri) !important; } .f-rm-text { color: var(--f-rm) !important; } .f-rr-text { color: var(--f-rr) !important; } .f-rp-text { color: var(--f-rp) !important; } .f-th-text { color: var(--f-th) !important; }

/* ---------- keyboard ---------- */
.kb-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kb { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 5px; padding: 12px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--border); user-select: none; }
.kb-row { display: flex; gap: 5px; }
.key {
  --fc: var(--faint);
  position: relative; height: clamp(30px, 4.4vw, 46px); min-width: 0;
  border-radius: 8px; background: var(--key-bg); color: var(--key-ink);
  border: 1px solid var(--border); border-bottom: 3px solid color-mix(in srgb, var(--fc) 55%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: clamp(0.62rem, 1.2vw, 0.95rem);
  transition: background 0.12s, transform 0.08s, box-shadow 0.12s;
}
.key .ks { font-size: 0.7em; opacity: 0.55; line-height: 1; }
.key .kn { line-height: 1.1; }
.key.special .kl { font-family: var(--font); font-size: 0.85em; opacity: 0.7; }
.key.mod { opacity: 0.45; }
.key.dead { opacity: 0.5; }
.key.bump::after { content: ''; position: absolute; bottom: 5px; width: 30%; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.6; }
.f-lp { --fc: var(--f-lp); } .f-lr { --fc: var(--f-lr); } .f-lm { --fc: var(--f-lm); } .f-li { --fc: var(--f-li); }
.f-ri { --fc: var(--f-ri); } .f-rm { --fc: var(--f-rm); } .f-rr { --fc: var(--f-rr); } .f-rp { --fc: var(--f-rp); } .f-th { --fc: var(--f-th); }
.key.next { background: var(--fc); color: #0d1024; border-color: transparent; transform: translateY(-2px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc) 35%, transparent), 0 6px 18px color-mix(in srgb, var(--fc) 45%, transparent); }
.key.next .ks { opacity: 0.7; }
.key.hit-ok { transform: translateY(2px); background: color-mix(in srgb, var(--ok) 55%, var(--key-bg)); }
.key.hit-err { background: var(--err); color: #fff; animation: shake 0.2s; }
.key.heat { background: color-mix(in srgb, var(--err) calc(var(--heat) * 100%), var(--key-bg)); }
.hands-wrap { width: 100%; max-width: 420px; }
.hands { width: 100%; height: auto; display: block; }
.hands .palm { fill: var(--hand); opacity: 0.7; }
.hands .finger { fill: var(--hand); stroke: var(--fc); stroke-width: 2.5; stroke-opacity: 0.5; transition: fill 0.12s; }
.hands .finger.f-lp, .hands .finger.f-rp { stroke: var(--f-lp); } .hands .finger.f-lr, .hands .finger.f-rr { stroke: var(--f-lr); }
.hands .finger.f-lm, .hands .finger.f-rm { stroke: var(--f-lm); } .hands .finger.f-li { stroke: var(--f-li); } .hands .finger.f-ri { stroke: var(--f-ri); } .hands .finger.f-th { stroke: var(--f-th); }
.hands .finger.on { stroke-opacity: 1; stroke-width: 3; }
.hands .finger.f-lp.on, .hands .finger.f-rp.on { fill: var(--f-lp); } .hands .finger.f-lr.on, .hands .finger.f-rr.on { fill: var(--f-lr); }
.hands .finger.f-lm.on, .hands .finger.f-rm.on { fill: var(--f-lm); } .hands .finger.f-li.on { fill: var(--f-li); } .hands .finger.f-ri.on { fill: var(--f-ri); } .hands .finger.f-th.on { fill: var(--f-th); }

/* ---------- modal / result ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 25, 0.6); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.2s; }
.modal-backdrop.in { opacity: 1; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 24px; padding: 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); transform: translateY(12px) scale(0.98); transition: transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1); }
.modal.wide { width: min(620px, 100%); }
.modal-backdrop.in .modal { transform: none; }
.result { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.result h2 { font-size: 1.7rem; font-weight: 900; }
.result-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0 6px; }
.result-stats > div { background: var(--surface-2); border-radius: 14px; padding: 10px 16px; min-width: 88px; }
.result-stats b { display: block; font-size: 1.4rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.result-stats span { font-size: 0.78rem; color: var(--muted); font-weight: 700; }
.result-big { font-size: 4rem; font-weight: 900; line-height: 1; margin: 12px 0; background: linear-gradient(135deg, var(--primary-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.result-big span { font-size: 1.1rem; margin-left: 6px; -webkit-text-fill-color: var(--muted); }
.result-xp { font-weight: 900; color: var(--accent); }
.result-msg { color: var(--muted); max-width: 44ch; margin: 6px 0; }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; width: 100%; }

/* ---------- toasts ---------- */
.toasts { position: fixed; top: 16px; right: 16px; z-index: 80; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: center; background: var(--surface-2); border: 1px solid var(--border-strong); border-left: 4px solid var(--primary); padding: 12px 16px; border-radius: 14px; box-shadow: var(--shadow); font-weight: 700; font-size: 0.93rem; transform: translateX(120%); transition: transform 0.3s cubic-bezier(0.2, 1.2, 0.4, 1); }
.toast.in { transform: none; }
.toast-ach { border-left-color: var(--warn); }
.toast-ach .ic { color: var(--warn); width: 28px; height: 28px; }
.toast-warn { border-left-color: var(--err); }
.toast-ok { border-left-color: var(--ok); }

/* ---------- Bibo ---------- */
.bibo { position: fixed; right: 22px; bottom: 16px; z-index: 50; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; transition: transform 0.35s ease; }
.bibo[hidden] { display: none; }
.bibo-bot { pointer-events: auto; width: 108px; height: 136px; border: 0; padding: 0; background: none; cursor: pointer; position: relative; animation: hover 3.2s ease-in-out infinite; border-radius: 30px; }
.bibo-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }
.bibo-shadow { position: absolute; left: 50%; bottom: -12px; width: 50px; height: 9px; margin-left: -25px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); filter: blur(3px); animation: shadow 3.2s ease-in-out infinite; }
@keyframes hover { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes shadow { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(0.7); opacity: 0.25; } }
.bb-blades { transform-box: fill-box; transform-origin: center; animation: prop 0.22s linear infinite; }
@keyframes prop { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.12); } 100% { transform: scaleX(1); } }
.bb-flame { transform-box: fill-box; transform-origin: top center; animation: flame 0.16s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scaleY(0.8); opacity: 0.85; } to { transform: scaleY(1.12); opacity: 1; } }
.bb-core { animation: core 1.6s ease-in-out infinite; }
@keyframes core { 50% { opacity: 0.55; } }
.bb-arm { transform-box: fill-box; }
.bb-arm-l { transform-origin: top right; animation: armL 3.2s ease-in-out infinite; }
.bb-arm-r { transform-origin: top left; animation: armR 3.2s ease-in-out infinite; }
@keyframes armL { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(8deg); } }
@keyframes armR { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(-8deg); } }
.eyes, .mouth { display: none; }
.eyes-open { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.mood-idle .eyes-open, .mood-think .eyes-open { display: inline; }
.mood-idle .mouth-smile, .mood-happy .mouth-smile { display: inline; }
.mood-happy .eyes-happy { display: inline; }
.mood-wow .eyes-wow, .mood-wow .mouth-o { display: inline; }
.mood-sad .eyes-sad, .mood-sad .mouth-flat, .mood-think .mouth-flat { display: inline; }
.mood-think .eyes-open { transform: translateY(-3px); animation: none; }
.bibo.mood-happy .bb-arm-r { animation: wave 0.5s ease-in-out 3; }
@keyframes wave { 50% { transform: rotate(-70deg); } }
.bibo.wiggle .bibo-bot { animation: wiggle 0.6s ease; }
@keyframes wiggle { 20% { transform: rotate(-10deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
.bibo.loop .bibo-bot { animation: loop 1.2s cubic-bezier(0.45, 0, 0.3, 1); }
@keyframes loop { 0% { transform: translateY(0); } 30% { transform: translateY(-90px) rotate(-10deg); } 65% { transform: translateY(-110px) rotate(350deg); } 100% { transform: translateY(0) rotate(360deg); } }
.bibo-bubble {
  pointer-events: auto; position: relative; margin-bottom: 70px;
  max-width: 300px; padding: 14px 36px 14px 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 18px 18px 4px 18px;
  box-shadow: var(--shadow); font-size: 0.92rem; font-weight: 600; line-height: 1.45;
  opacity: 0; transform: translateY(10px) scale(0.95); transform-origin: bottom right;
  visibility: hidden; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1), visibility 0.2s;
}
.bibo-bubble.show { opacity: 1; transform: none; visibility: visible; }
.bibo-bubble .ic { color: var(--warn); }
.bibo-bubble kbd { font-size: 0.8em; }
.bibo-close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.bibo-close:hover { background: var(--surface-2); color: var(--text); }
.bibo.compact { transform: scale(0.72); transform-origin: bottom right; }
.bibo.compact .bibo-bubble { font-size: 1.1rem; max-width: 340px; }

/* ---------- game ---------- */
.game-menu { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
.gm-hero { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.gm-art { position: relative; height: 210px; background: linear-gradient(180deg, #151a4a, #262f78); overflow: hidden; }
:root[data-theme="light"] .gm-art { background: linear-gradient(180deg, #dfe3ff, #b9c1ff); }
.gm-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(0deg, rgba(46, 230, 214, 0.35), transparent); }
.drop { position: absolute; top: -40px; font-family: var(--mono); font-weight: 700; background: var(--surface); padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border-strong); animation: drop 5s linear infinite; }
.drop.d1 { left: 12%; } .drop.d2 { left: 45%; animation-delay: 1.6s; } .drop.d3 { left: 70%; animation-delay: 3.2s; }
@keyframes drop { to { transform: translateY(260px); } }
.gm-bibo { position: absolute; right: 22px; top: 30px; width: 90px; animation: hover 3s ease-in-out infinite; }
.gm-bibo svg { width: 100%; }
.gm-bibo .eyes-open, .gm-bibo .mouth-smile { display: inline; }
.gm-text { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 6px; }
.howto { margin: 12px 0 0; padding-left: 20px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.howto.big { font-size: 1rem; text-align: left; }
.gm-options { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.gm-best { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-weight: 700; flex-wrap: wrap; }
.gm-best span { display: inline-flex; align-items: center; gap: 6px; }
.gm-best .ic { color: var(--warn); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 0.82rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.field small { color: var(--faint); font-size: 0.82rem; }
input[type="text"], select, .answer-input {
  font: inherit; font-weight: 700; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: 12px; padding: 10px 14px; min-height: 46px; width: 100%;
}
input[type="text"]:focus, select:focus, .answer-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; background: var(--surface-2); padding: 5px; border-radius: 14px; }
.seg-btn { flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 800; font-size: 0.9rem; color: var(--muted); background: transparent; border: 0; border-radius: 10px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--primary); color: #fff; box-shadow: var(--glow); }
.seg-btn.lvl { flex: 0 0 auto; min-width: 44px; }
.runner-head .seg { flex: 0 0 auto; }

.game { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.hud { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hud-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px 14px; min-width: 86px; }
.hud-item span { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.hud-item b { font-size: 1.3rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.hud-lives { margin-left: auto; display: flex; gap: 4px; }
.life .ic { width: 26px; height: 26px; color: var(--surface-3); fill: var(--surface-3); }
.life.on .ic { color: var(--err); fill: var(--err); }
.level-bar { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.level-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--warn), var(--err)); transition: width 0.3s; }
.arena { position: relative; height: min(62vh, 600px); min-height: 360px; border-radius: 22px; overflow: hidden; border: 1px solid var(--border-strong);
  background: radial-gradient(ellipse at 50% 120%, rgba(46, 230, 214, 0.2), transparent 50%), linear-gradient(180deg, #0b0e2a 0%, #1a2064 100%); }
:root[data-theme="light"] .arena { background: radial-gradient(ellipse at 50% 120%, rgba(15, 169, 160, 0.25), transparent 50%), linear-gradient(180deg, #e8ebff 0%, #c4cbff 100%); }
.arena-stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff8, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #fff6, transparent), radial-gradient(1px 1px at 55% 35%, #fff9, transparent), radial-gradient(1.5px 1.5px at 80% 15%, #fff7, transparent), radial-gradient(1px 1px at 90% 60%, #fff6, transparent), radial-gradient(1px 1px at 45% 85%, #fff5, transparent); }
:root[data-theme="light"] .arena-stars { opacity: 0.2; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(0deg, rgba(46, 230, 214, 0.35), rgba(46, 230, 214, 0.05)); border-top: 2px solid rgba(46, 230, 214, 0.6); }
.arena.hit .ground { animation: groundHit 0.5s; }
@keyframes groundHit { 0%, 100% { background: linear-gradient(0deg, rgba(46, 230, 214, 0.35), transparent); } 30% { background: linear-gradient(0deg, rgba(251, 113, 133, 0.8), transparent); } }
.arena.shake { animation: arenaShake 0.2s; }
@keyframes arenaShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.word { position: absolute; left: 0; top: 0; will-change: transform; font-family: var(--mono); font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 700; padding: 7px 14px; border-radius: 12px; white-space: pre; background: var(--surface); color: var(--text); border: 2px solid var(--border-strong); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transition: border-color 0.15s, background 0.15s; }
.word.long { font-size: clamp(0.9rem, 1.5vw, 1.1rem); }
.word .w-done { color: var(--accent); }
.word .w-hint { display: block; font-family: var(--font); font-size: 0.7em; color: var(--muted); font-weight: 700; margin-top: 1px; }
.word.locked { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 25%, var(--surface)); box-shadow: var(--glow); z-index: 2; }
.word.danger { border-color: var(--err); }
.word.gone { animation: gone 0.35s forwards; }
@keyframes gone { to { opacity: 0; filter: blur(4px); scale: 1.4; } }
.word.crash { animation: crash 0.45s forwards; }
@keyframes crash { to { opacity: 0; scale: 0.6 0.3; } }
.spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); pointer-events: none; animation: spark 0.6s ease-out forwards; }
.spark:nth-child(odd) { background: var(--warn); }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }
.pts { position: absolute; font-weight: 900; color: var(--warn); pointer-events: none; transform: translate(-50%, -50%); animation: pts 0.9s ease-out forwards; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
@keyframes pts { to { transform: translate(-50%, -60px); opacity: 0; } }
.banner { position: absolute; inset: 38% 0 auto 0; text-align: center; pointer-events: none; opacity: 0; z-index: 3; }
.banner b { display: block; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; color: #fff; text-shadow: 0 4px 24px rgba(45, 212, 191, 0.9); }
:root[data-theme="light"] .banner b { color: var(--primary); text-shadow: none; }
.banner span { font-weight: 800; color: var(--accent); font-size: 1.1rem; }
.banner.show { animation: banner 2s ease forwards; }
@keyframes banner { 0% { opacity: 0; transform: scale(0.7); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-20px); } }
.overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(8, 10, 32, 0.72); backdrop-filter: blur(4px); padding: 16px; }
.overlay[hidden] { display: none; }
.ov-box { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; padding: 28px; text-align: center; max-width: 560px; width: 100%; box-shadow: var(--shadow); }
.ov-box h2 { font-size: 1.7rem; font-weight: 900; }
.typed-line { min-height: 48px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 1.35rem; font-weight: 700; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px 16px; }
.t-done { color: var(--accent); }
.t-rest { color: var(--faint); }
.t-caret { display: inline-block; width: 2px; height: 1.2em; background: var(--primary-2); margin: 0 1px; animation: caret 1s steps(2) infinite; vertical-align: middle; }
@keyframes caret { 50% { opacity: 0; } }
.t-idle { font-family: var(--font); font-size: 0.95rem; color: var(--faint); }

/* ---------- vocab ---------- */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.topic { padding: 18px; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--c); }
.topic-top { display: flex; gap: 12px; align-items: center; }
.topic-top > div { min-width: 0; }
.topic-top .muted { font-size: 0.85rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic h3 { font-size: 1.1rem; font-weight: 800; }
.topic-badge { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; font-weight: 900; font-size: 1.05rem; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); }
.topic .bar span { background: var(--c); }
.topic-meta { font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.topic-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.topic-actions .btn { flex: 1; }
.vcard { padding: 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform 0.25s, border-color 0.2s; }
.vcard.pop { transform: scale(1.03); border-color: var(--ok); }
.vcard.good { border-color: var(--ok); }
.vcard.bad { border-color: var(--err); }
.vc-label { color: var(--muted); font-weight: 700; }
.vc-word { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vc-trans { font-size: 1.2rem; color: var(--muted); font-weight: 700; }
.vc-note { font-size: 0.88rem; color: var(--faint); font-weight: 700; }
.speak { width: 40px; min-height: 40px; }
.answer { display: flex; gap: 10px; }
.answer-input { flex: 1; font-family: var(--mono); font-size: 1.3rem; min-height: 56px; }
.answer-input.ok { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent); }
.answer-input.bad { border-color: var(--err); animation: shake 0.25s; }
.answer-input::placeholder { color: var(--faint); opacity: 0.8; }
.answer-feedback { min-height: 2.5em; text-align: center; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.answer-feedback b { color: var(--text); font-size: 1.1rem; }
.answer-feedback .ic { color: var(--ok); }
.answer-feedback .speak { display: inline-flex; }

/* ---------- stats ---------- */
.panel { padding: 22px; margin-bottom: 16px; }
.panel h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel h2 .ic { color: var(--primary-2); }
.panel h2 small { color: var(--muted); font-size: 0.9rem; font-weight: 700; margin-left: auto; }
.grid2 .panel { margin-bottom: 0; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--border); }
.chart .axis { fill: var(--faint); font-size: 11px; font-family: var(--font); font-weight: 700; }
.chart .line { fill: none; stroke: var(--primary-2); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: color-mix(in srgb, var(--primary) 18%, transparent); }
.chart .dot { fill: var(--surface); stroke: var(--primary-2); stroke-width: 2.5; }
.bars { position: relative; height: 200px; display: flex; gap: 6px; align-items: stretch; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar-area { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bar-v { width: 100%; border-radius: 6px 6px 3px 3px; background: var(--surface-3); transition: height 0.5s; }
.bar-v.goal { background: linear-gradient(0deg, var(--primary), var(--accent)); }
.bar-col span { height: 20px; font-size: 0.72rem; color: var(--faint); font-weight: 800; }
.goal-line { position: absolute; left: 0; right: 0; border-top: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); pointer-events: none; }
.goal-line span { position: absolute; right: 0; top: -20px; font-size: 0.72rem; font-weight: 800; color: var(--accent); }
.weak-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.weak-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--err) 12%, transparent); border: 1px solid color-mix(in srgb, var(--err) 30%, transparent); border-radius: 10px; padding: 5px 10px; font-weight: 800; font-size: 0.9rem; }
.weak-row .btn { margin-left: auto; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.ach { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 10px; border-radius: 14px; background: var(--surface-2); opacity: 0.55; }
.ach.got { opacity: 1; background: linear-gradient(160deg, color-mix(in srgb, var(--warn) 16%, var(--surface-2)), var(--surface-2)); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.ach-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--faint); }
.ach.got .ach-ic { background: var(--warn); color: #1a1400; }
.ach b { font-size: 0.95rem; }
.ach span { font-size: 0.8rem; color: var(--muted); }

/* ---------- settings ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.toggle { display: flex; align-items: center; gap: 14px; cursor: pointer; min-height: 44px; }
.toggle > span:first-child { flex: 1; }
.toggle b { display: block; font-weight: 800; }
.toggle small { color: var(--muted); font-size: 0.85rem; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 50px; height: 28px; border-radius: 99px; background: var(--surface-3); position: relative; flex: none; transition: background 0.2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.toggle input:checked + .switch { background: var(--primary); }
.toggle input:checked + .switch::after { transform: translateX(22px); }
.toggle input:focus-visible + .switch { outline: 3px solid var(--accent); outline-offset: 2px; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.about { text-align: center; color: var(--faint); font-size: 0.85rem; margin-top: 20px; }

/* ---------- onboarding ---------- */
.onboarding { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.onboarding .field { text-align: left; }
.ob-dots { display: flex; justify-content: center; gap: 6px; }
.ob-dots span { width: 8px; height: 8px; border-radius: 99px; background: var(--surface-3); transition: width 0.25s, background 0.25s; }
.ob-dots span.on { width: 26px; background: var(--primary); }
.ob-bibo { width: 120px; margin: 0 auto; animation: hover 3s ease-in-out infinite; }
.ob-bibo svg { width: 100%; }
.ob-bibo .eyes-happy, .ob-bibo .mouth-smile { display: inline; }
.ob-bibo .bb-arm-r { animation: wave 0.6s ease-in-out infinite; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border-radius: 16px; background: var(--surface-2); border: 2px solid var(--border); font: inherit; font-weight: 800; color: var(--text); cursor: pointer; min-height: 44px; transition: border-color 0.15s, transform 0.12s; }
.choice:hover { transform: translateY(-2px); }
.choice.on { border-color: var(--primary); box-shadow: var(--glow); }
.choice-badge { font-weight: 900; font-size: 1.2rem; padding: 4px 12px; border-radius: 10px; background: var(--primary); color: #fff; }
.choice-badge.mono { font-family: var(--mono); font-size: 1rem; }
.check { display: flex; gap: 10px; align-items: center; justify-content: center; font-weight: 700; cursor: pointer; min-height: 44px; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); }
.posture .kb { max-width: 100%; }
.posture .key { height: 30px; font-size: 0.66rem; }
.posture .hands-wrap { max-width: 300px; margin: 0 auto; }
.kb-mini { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .tiles, .grid-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: 1fr; }
  .game-menu { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; flex-direction: row; padding: 6px 8px; border-right: 0; border-top: 1px solid var(--border); }
  .brand, .player { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .nav a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 0.68rem; flex: 1; text-align: center; min-height: 52px; justify-content: center; }
  .view { padding-top: 20px; padding-bottom: 170px; }
  .grid2 { grid-template-columns: 1fr; }
  .hero { flex-direction: column-reverse; align-items: flex-start; padding: 24px; }
  .ring { width: 120px; height: 120px; }
  .live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bibo { bottom: 72px; right: 10px; }
  .bibo-bot { width: 80px; height: 100px; }
  .bibo-bubble { margin-bottom: 50px; max-width: 230px; font-size: 0.85rem; }
  .toasts { top: 10px; right: 10px; }
}
@media (max-width: 520px) {
  .tiles, .grid-modes { grid-template-columns: 1fr; }
  .nav a span { display: none; }
  .typer-box { padding: 18px 16px; }
  .choice-row { grid-template-columns: 1fr; }
  .modal { padding: 22px 18px; }
  .hud-item { min-width: 70px; padding: 4px 10px; }
  .answer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .word { transition: none; }
}
.brand-logo .eyes-happy, .brand-logo .mouth-smile { display: inline; }