/* Kani Arcade — shared design system for the LEARN games.
   One place for colour, type, spacing, focus rings, motion and touch targets, so
   every educational game looks like the same family and meets the same bar:
   - every tappable thing is at least 44×44px
   - keyboard focus is always visible
   - state is never shown by colour alone (icons/labels accompany it)
   - motion respects prefers-reduced-motion
   - a light theme that is not a lazy inversion */
:root {
  --bg: #0F1522; --bg-2: #141C2E; --panel: #1A2438; --card: #202C45; --edge: #2E3B58;
  --ink: #EEF2FA; --ink-2: #C5CFE0; --dim: #8592AE;
  --accent: #6FA8FF; --accent-ink: #081326;
  --good: #3DC98F; --good-ink: #05261A;
  --bad: #FF7A8A; --bad-ink: #2A0810;
  --warn: #FFC466; --warn-ink: #2A1B02;
  --focus: #FFD166;
  --r-s: 10px; --r-m: 14px; --r-l: 18px;
  --tap: 44px;
  --font-ui: 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Arial Rounded MT Bold', 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F4F7FC; --bg-2: #EAF0F8; --panel: #FFFFFF; --card: #FFFFFF; --edge: #D6DEEB;
    --ink: #142033; --ink-2: #2E3D57; --dim: #5C6B87;
    --accent: #2F6BEA; --accent-ink: #FFFFFF;
    --good: #1F9E6E; --good-ink: #FFFFFF;
    --bad: #D9435A; --bad-ink: #FFFFFF;
    --warn: #C98A1E; --warn-ink: #FFFFFF;
    --focus: #B45309;
    --shadow: 0 10px 30px rgba(20, 32, 51, .14);
  }
}
:root[data-theme="light"] {
  --bg: #F4F7FC; --bg-2: #EAF0F8; --panel: #FFFFFF; --card: #FFFFFF; --edge: #D6DEEB;
  --ink: #142033; --ink-2: #2E3D57; --dim: #5C6B87;
  --accent: #2F6BEA; --accent-ink: #FFFFFF;
  --good: #1F9E6E; --good-ink: #FFFFFF; --bad: #D9435A; --bad-ink: #FFFFFF;
  --warn: #C98A1E; --warn-ink: #FFFFFF; --focus: #B45309;
  --shadow: 0 10px 30px rgba(20, 32, 51, .14);
}
:root[data-theme="dark"] {
  --bg: #0F1522; --bg-2: #141C2E; --panel: #1A2438; --card: #202C45; --edge: #2E3B58;
  --ink: #EEF2FA; --ink-2: #C5CFE0; --dim: #8592AE;
  --accent: #6FA8FF; --accent-ink: #081326;
  --good: #3DC98F; --good-ink: #05261A; --bad: #FF7A8A; --bad-ink: #2A0810;
  --warn: #FFC466; --warn-ink: #2A1B02; --focus: #FFD166;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

/* accessible focus everywhere, only for keyboard/AT users */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* screen-reader-only text */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* skip link */
.skip { position: absolute; left: 8px; top: -60px; background: var(--accent); color: var(--accent-ink);
        padding: 10px 14px; border-radius: 10px; font-weight: 800; z-index: 1000; text-decoration: none; }
.skip:focus { top: 8px; }

/* layout */
.l-stage { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
           padding: 12px 12px 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.l-wrap { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; }

/* header */
.l-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.l-title { font-family: var(--font-display); font-size: 20px; line-height: 1.15; }
.l-title em { font-style: normal; color: var(--accent); }
.l-title small { display: block; font-family: var(--font-ui); font-size: 10px; letter-spacing: .12em;
                 color: var(--dim); margin-top: 3px; font-weight: 700; }
.l-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.l-chip { background: var(--panel); border: 1px solid var(--edge); border-radius: 9px;
          padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--dim); white-space: nowrap;
          min-height: 32px; display: inline-flex; align-items: center; gap: 4px; }
.l-chip b { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.l-chip.low b { color: var(--bad); }

/* progress bar (time or completion) */
.l-bar { height: 8px; background: var(--edge); border-radius: 99px; overflow: hidden; }
.l-bar > i { display: block; height: 100%; width: 100%; background: var(--good); border-radius: 99px;
             transition: width .15s linear, background-color .3s ease; }
.l-bar.low > i { background: var(--bad); }

/* question card */
.l-ask { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-l); padding: 14px 14px 12px; text-align: center; }
.l-ask .topic { display: inline-block; font-size: 10.5px; letter-spacing: .12em; color: var(--accent);
                font-weight: 800; margin-bottom: 6px; }
.l-ask h2 { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.3; }
.l-ask .sub { color: var(--dim); font-size: 13px; margin-top: 5px; }

/* option grid — always ≥44px tall, wraps text, never colour-only */
.l-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 340px) { .l-opts { grid-template-columns: 1fr; } }
.l-opt {
  position: relative; background: var(--card); border: 2px solid var(--edge); border-radius: var(--r-m);
  padding: 14px 12px; min-height: 60px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-family: var(--font-ui); font-weight: 800; font-size: 15px; line-height: 1.3;
  color: var(--ink); cursor: pointer; transition: transform .07s ease, border-color .12s ease, background-color .12s ease;
}
.l-opt:hover { border-color: var(--accent); }
.l-opt:active { transform: scale(.97); }
.l-opt[aria-disabled="true"] { cursor: default; }
.l-opt.good { border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--card)); }
.l-opt.bad  { border-color: var(--bad);  background: color-mix(in srgb, var(--bad) 12%, var(--card)); }
.l-opt.good::after, .l-opt.bad::after {
  content: '✓'; position: absolute; top: 6px; right: 9px; font-size: 14px; font-weight: 900; color: var(--good);
}
.l-opt.bad::after { content: '✕'; color: var(--bad); }
.l-opt.dim { opacity: .45; }

/* feedback line — polite live region */
.l-feed { text-align: center; min-height: 44px; font-size: 13.5px; color: var(--dim); line-height: 1.5; padding: 0 4px; }
.l-feed b { color: var(--ink); }
.l-feed .ok { color: var(--good); font-weight: 800; }
.l-feed .no { color: var(--bad); font-weight: 800; }

/* buttons */
.l-btn {
  border: 1px solid var(--edge); background: var(--panel); color: var(--ink); border-radius: var(--r-m);
  padding: 12px 14px; min-height: var(--tap); font-size: 14px; font-weight: 800; cursor: pointer;
  font-family: var(--font-ui); width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px;
  transition: border-color .12s ease, transform .07s ease;
}
.l-btn:hover { border-color: var(--accent); }
.l-btn:active { transform: scale(.98); }
.l-btn small { color: var(--dim); font-size: 12px; font-weight: 600; }
.l-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); align-items: center; }
.l-btn.primary small { color: color-mix(in srgb, var(--accent-ink) 75%, transparent); }
.l-btn.center { align-items: center; }
.l-btn:disabled { opacity: .45; cursor: default; }
.l-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.l-stack { display: flex; flex-direction: column; gap: 8px; }

/* modal */
.l-overlay { position: fixed; inset: 0; background: rgba(4, 8, 18, .72); display: flex; align-items: center;
             justify-content: center; padding: 18px; z-index: 50; overflow: auto; }
/* MUST follow .l-overlay: an author display rule beats the UA [hidden] rule */
[hidden] { display: none !important; }
.l-panel { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-l); padding: 22px 20px;
           width: 100%; max-width: 350px; text-align: center; box-shadow: var(--shadow); }
.l-panel h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 23px; }
.l-panel p { margin: 0 0 12px; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.l-panel .tag { display: inline-block; font-size: 10.5px; letter-spacing: .12em; color: var(--accent); font-weight: 800; margin-bottom: 6px; }
.l-stats { display: flex; justify-content: center; gap: 20px; margin: 4px 0 14px; }
.l-stats b { display: block; font-size: 22px; font-family: var(--font-display); }
.l-stats span { color: var(--dim); font-size: 10.5px; letter-spacing: .06em; }
.l-learned { text-align: left; background: var(--bg-2); border: 1px solid var(--edge); border-radius: var(--r-m);
             padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; max-height: 160px; overflow: auto; }
.l-learned b { color: var(--ink); }
.l-learned li { margin: 3px 0; }
.l-learned ul { margin: 4px 0 0; padding-left: 18px; }

/* toast */
.l-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
           background: var(--panel); border: 1px solid var(--edge); color: var(--ink); padding: 10px 16px;
           border-radius: 12px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow); max-width: 88vw; text-align: center; }

/* utilities */
.l-muted { color: var(--dim); }
.l-center { text-align: center; }
.l-icon-btn { width: var(--tap); height: var(--tap); border-radius: 12px; border: 1px solid var(--edge);
              background: var(--panel); color: var(--ink); font-size: 18px; cursor: pointer; display: inline-flex;
              align-items: center; justify-content: center; }

@keyframes l-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes l-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.l-pop { animation: l-pop .28s ease; }
.l-shake { animation: l-shake .36s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}