/* Colour language used everywhere:
   yellow/amber = positive, hop right    red = negative, hop left
   indigo = buttons and UI */

:root {
  --bg: #f7f6f2;
  --card: #ffffff;
  --ink: #1f2330;
  --muted: #6b7080;
  --line: #e4e2da;
  --accent: #4f46e5;
  --accent-ink: #ffffff;
  --accent-soft: #eceafe;
  --pos: #f2b705;
  --pos-ink: #8a5a00;
  --pos-soft: #fff4c7;
  --neg: #e5484d;
  --neg-ink: #b4232a;
  --neg-soft: #ffe1e1;
  --good: #16a34a;
  --good-soft: #dcfce7;
  --bad: #dc2626;
  --bad-soft: #fee2e2;
  --info-soft: #e0ecff;
  --shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 4px 16px rgb(0 0 0 / 5%);
  --radius: 18px;
  --font: 'M PLUS Rounded 1c', ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14161c;
    --card: #1d2029;
    --ink: #eef0f5;
    --muted: #9aa0b0;
    --line: #2e3240;
    --accent: #8b85ff;
    --accent-ink: #11131a;
    --accent-soft: #2a2950;
    --pos: #f5c518;
    --pos-ink: #ffd75e;
    --pos-soft: #3b3313;
    --neg: #ff6369;
    --neg-ink: #ff8a8f;
    --neg-soft: #3f1d20;
    --good: #4ade80;
    --good-soft: #15321f;
    --bad: #f87171;
    --bad-soft: #3a1a1a;
    --info-soft: #1d2a44;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 30%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

b.pos, .pos-text { color: var(--pos-ink); }
b.neg, .neg-text { color: var(--neg-ink); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.center { text-align: center; }

/* ---------- header ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pos) 50%, var(--neg) 50%);
  color: #fff;
  font-size: 22px;
  text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

#nav { display: flex; flex-wrap: wrap; gap: 4px; }

#nav a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

#nav a:hover { color: var(--ink); background: var(--accent-soft); }
#nav a.on { color: var(--accent-ink); background: var(--accent); }

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ---------- cards & buttons ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}

.card h2 { margin: 0 0 8px; font-size: 1.5rem; }
.card h3 { margin: 0 0 10px; font-size: 1.15rem; }

.btn {
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: transform 0.08s, background 0.15s;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: var(--accent-soft); color: var(--accent); }
.btn.danger { background: var(--bad-soft); color: var(--bad); }
.btn.big { font-size: 1.2rem; padding: 14px 26px; }
.btn.small { font-size: 0.85rem; padding: 6px 12px; }

.row-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

select.level-select {
  font: inherit;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  max-width: 100%;
}

/* ---------- practice ---------- */

.practice-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.bar-title { margin: 0; font-size: 1.3rem; flex: 1; }

.stat-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.95rem;
}

.pips { display: flex; gap: 5px; margin-right: auto; }

.pip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s, transform 0.2s;
}

.pip.on { background: var(--good); transform: scale(1.1); }

.question-card { text-align: center; }

.level-blurb { color: var(--muted); font-size: 0.95rem; }

.question {
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 10px 0 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-x: auto;
}

.question .equals { color: var(--muted); }

.question .blank {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.2em;
  border-bottom: 4px solid var(--accent);
  color: var(--accent);
}

.question.solved .blank { color: var(--good); border-color: var(--good); }

.feedback {
  min-height: 1.6em;
  font-size: 1.1rem;
  border-radius: 12px;
  padding: 0 12px;
  transition: background 0.2s;
}

.feedback.good, .feedback.bad { padding: 10px 14px; }
.feedback.good { background: var(--good-soft); color: var(--good); font-weight: 700; }
.feedback.bad { background: var(--bad-soft); color: var(--ink); }
.feedback .sub { font-size: 0.9rem; color: var(--muted); }

.question-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

.banner { border-radius: 12px; padding: 10px; margin-bottom: 10px; font-weight: 700; }
.banner.good { background: var(--good-soft); color: var(--good); }
.banner.info { background: var(--info-soft); color: var(--accent); }

.practice-main {
  display: grid;
  grid-template-columns: minmax(250px, 300px) 1fr;
  gap: 16px;
  align-items: start;
}

.practice-main > .keypad-wrap { grid-column: 1; }
.practice-main > .visual-panel { grid-column: 2; grid-row: 1; margin: 0; }

@media (max-width: 760px) {
  .practice-main { grid-template-columns: 1fr; }
  .practice-main > .visual-panel { grid-column: 1; grid-row: auto; }
  .practice-main > .keypad-wrap { max-width: 360px; margin: 0 auto; width: 100%; }
}

/* ---------- keypad ---------- */

.keypad-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.keypad-wrap.disabled .keypad { opacity: 0.45; }

.answer-display {
  font-size: 2.4rem;
  font-weight: 800;
  text-align: center;
  padding: 6px;
  border-radius: 12px;
  background: var(--bg);
  border: 2px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.answer-display.empty { color: var(--muted); }
.answer-display.negative { color: var(--neg-ink); border-color: var(--neg); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.key {
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 12px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.06s, background 0.15s;
}

.key:active { transform: scale(0.94); background: var(--accent-soft); }
.key.sign { background: var(--neg-soft); color: var(--neg-ink); border-color: var(--neg); }
.key.del { color: var(--muted); }
.key.small { font-size: 1.2rem; padding: 4px 0; width: 44px; }

.check { width: 100%; }

.wiggle { animation: wiggle 0.4s; }

@keyframes wiggle {
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* ---------- visual panel ---------- */

.visual-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  margin-top: 12px;
  animation: rise 0.25s ease-out;
}

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.tabs { display: flex; gap: 6px; margin-bottom: 8px; }

.tab {
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}

.tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.vis-expression {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}

.vis-expression .term { display: inline-block; padding: 0 4px; border-radius: 8px; transition: background 0.3s; }
.vis-expression .term.has-rule:not(.rewritten) { background: var(--accent-soft); }
.vis-expression .term.rewritten { background: var(--good-soft); color: var(--good); animation: pop 0.35s; }
.vis-expression .term.answer { color: var(--accent); }

@keyframes pop { 50% { transform: scale(1.18); } }

.vis-stage { min-height: 120px; display: grid; align-items: center; }

.vis-caption {
  min-height: 3em;
  text-align: center;
  font-size: 1.1rem;
  padding: 8px 6px;
}

.vis-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.vis-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; flex: 1; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dot.done { background: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dot.on { background: var(--accent); transform: scale(1.3); }

/* number line */

svg.numberline { width: 100%; height: auto; display: block; overflow: visible; }

.numberline .axis { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.numberline .tick { stroke: var(--ink); stroke-width: 2; }
.numberline .tick.zero { stroke-width: 4; }
.numberline .zone { opacity: 0.55; }
.numberline .zone.neg { fill: var(--neg-soft); }
.numberline .zone.pos { fill: var(--pos-soft); }
.numberline .zone-label { font-size: 15px; font-weight: 700; }
.numberline .zone-label.neg { fill: var(--neg-ink); }
.numberline .zone-label.pos { fill: var(--pos-ink); }
.numberline .tick-label { font-size: 19px; font-weight: 700; fill: var(--ink); font-family: var(--font); }
.numberline .tick-label.neg { fill: var(--neg-ink); }
.numberline .tick-label.zero { font-size: 22px; font-weight: 900; }
.numberline .tick-label.here { font-size: 26px; font-weight: 900; fill: var(--accent); }
.numberline .marker circle { fill: var(--accent); stroke: var(--card); stroke-width: 4; }
.numberline .marker { transition: transform 0.28s cubic-bezier(0.3, 1.4, 0.6, 1); }
.numberline .hop { fill: none; stroke-width: 4; stroke-linecap: round; }
.numberline .hop.pos { stroke: var(--pos); }
.numberline .hop.neg { stroke: var(--neg); }
.numberline .arrowhead.pos { fill: var(--pos); }
.numberline .arrowhead.neg { fill: var(--neg); }
.numberline .hop.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.3s ease-out forwards; }
.numberline .hop-label { font-size: 22px; font-weight: 900; font-family: var(--font); }
.numberline .hop-label.pos { fill: var(--pos-ink); }
.numberline .hop-label.neg { fill: var(--neg-ink); }
.numberline .fade-in { opacity: 0; animation: fade 0.3s forwards; }
.numberline .move.faded { opacity: 0.35; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* counters */

.counter-board { display: grid; gap: 10px; justify-items: start; padding: 8px 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; }
.row-label { width: 26px; font-weight: 900; font-size: 1.4rem; color: var(--muted); text-align: center; }
.chip-row.pos .row-label { color: var(--pos-ink); }
.chip-row.neg .row-label { color: var(--neg-ink); }
.chip-empty { color: var(--muted); font-size: 1.4rem; }

.chip {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
  position: relative;
  transition: opacity 0.3s, transform 0.3s;
  vertical-align: middle;
}

.chip.pos { background: var(--pos); color: #4a3300; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 15%); }
.chip.neg { background: var(--neg); color: #fff; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 18%); }
.chip.new { animation: chip-in 0.35s backwards; animation-delay: calc(var(--i, 0) * 40ms); outline: 3px solid var(--accent); outline-offset: 2px; }
.chip.leaving { opacity: 0.35; transform: translateY(-8px) scale(0.9); outline: 3px dashed var(--ink); outline-offset: 2px; }
.chip.pair { outline: 3px dashed var(--muted); outline-offset: 2px; opacity: 0.6; }
.chip.pair::after, .chip.leaving::after {
  content: '';
  position: absolute;
  inset: 46% -4px auto;
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
  transform: rotate(-35deg);
}

@keyframes chip-in { from { transform: scale(0); opacity: 0; } }

.counter-total { font-size: 2rem; font-weight: 900; margin-left: 32px; }
.counter-total.pos { color: var(--pos-ink); }
.counter-total.neg { color: var(--neg-ink); }

/* ---------- learn ---------- */

.lead { font-size: 1.15rem; }

.two-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 620px) { .two-steps { grid-template-columns: 1fr; } }

.step-card { background: var(--bg); border-radius: 14px; padding: 14px 16px; position: relative; }
.step-card h3 { margin-top: 0; }
.step-card p { margin: 6px 0; }
.step-num {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 900;
}

.example { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.rules-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
}

.rules-card h3 { margin: 0 0 12px; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; margin: 0 auto; }
.rule { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-radius: 14px; font-size: 1.6rem; font-weight: 900; }
.rule.same { background: var(--good-soft); }
.rule.diff { background: var(--neg-soft); }
.rule .arrow { color: var(--muted); }
.rule.same .out { color: var(--good); }
.rule.diff .out { color: var(--neg-ink); }
.rules-summary { font-size: 1.15rem; margin: 14px 0 4px; }
.rules-summary .same { color: var(--good); }
.rules-summary .diff { color: var(--neg-ink); }
.rules-then { margin: 0; }

.counter-key { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-weight: 700; font-size: 1.2rem; margin-bottom: 8px; }
.counter-key .chip { margin-right: 4px; }

.builder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; margin: 10px 0; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper-value { min-width: 2.4em; text-align: center; font-size: 2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.stepper-value.neg { color: var(--neg-ink); }
.paren { font-size: 2rem; color: var(--muted); }
.op-toggle {
  font: inherit;
  font-size: 2rem;
  font-weight: 900;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 2px dashed var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
}

.level-list { list-style: none; padding: 0; margin: 0; counter-reset: lvl; }
.level-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); counter-increment: lvl; }
.level-list li > div::before { content: counter(lvl) '. '; font-weight: 800; color: var(--accent); }

/* ---------- signs ---------- */

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; margin: 12px auto; }

.choice {
  font: inherit;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 800;
  padding: 18px 8px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.choice:hover { border-color: var(--accent); }
.choice.right { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }

/* ---------- sprint ---------- */

.sprint-setup select { margin: 6px 0; }
.timer { height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 14px; }
.timer-fill { height: 100%; width: 100%; background: var(--good); }
.timer-fill.low { background: var(--bad); }
.sprint-head { display: flex; justify-content: space-between; align-items: center; }
.sprint-score { font-size: 1.8rem; font-weight: 900; color: var(--accent); }
.sprint .keypad-wrap { max-width: 360px; margin: 0 auto; }
.big-score { font-size: 5rem; font-weight: 900; color: var(--accent); line-height: 1.1; }

.miss-list { list-style: none; padding: 0; margin: 0; }
.miss-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.miss-list .expr { font-weight: 800; font-size: 1.15rem; }
.miss-list .btn { margin-left: auto; }

/* ---------- progress ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0 18px; }
.stat { background: var(--bg); border-radius: 14px; padding: 12px; text-align: center; }
.stat-value { font-size: 1.8rem; font-weight: 900; }
.stat-label { color: var(--muted); font-size: 0.85rem; }

.day-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; height: 120px; align-items: end; }
.day { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; }
.day-bar { background: var(--accent); border-radius: 6px 6px 2px 2px; min-height: 3px; }
.day-label { text-align: center; color: var(--muted); font-size: 0.75rem; }

.level-bars { display: grid; gap: 8px; }
.level-bar-row { display: grid; grid-template-columns: minmax(120px, 230px) 1fr 90px 50px; gap: 10px; align-items: center; font-size: 0.95rem; }
.level-bar-num { font-variant-numeric: tabular-nums; text-align: right; }
.bar { height: 14px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; }
.bar-fill.good { background: var(--good); }
.bar-fill.ok { background: var(--pos); }
.bar-fill.low { background: var(--neg); }

@media (max-width: 560px) {
  .level-bar-row { grid-template-columns: 1fr 80px; }
  .level-bar-row .bar { grid-column: 1 / -1; grid-row: 2; }
  .level-bar-row .level-bar-num.muted { display: none; }
}

/* ---------- celebration ---------- */

.burst {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  font-size: 22px;
  transform: translate(-50%, -50%);
  animation: burst 0.85s ease-out forwards;
}

@keyframes burst {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =========================================================================
   Kitsu, quest & confidence-first UI
   "not yet" uses warm amber, never alarm red.
   ========================================================================= */

:root { --notyet: #b45309; --notyet-soft: #fff1d6; --story: #fbf3e2; --story-line: #e7d3a8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --notyet: #fbbf24; --notyet-soft: #3a2a10; --story: #2a2418; --story-line: #4a3f28; }
}

.nav-logout {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  margin-left: 6px;
  cursor: pointer;
}

/* speaker + bubble */
.speaker { display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 6px; }
.speaker-face { flex: none; }
.speaker-face.bounce { animation: bounce 0.45s; }
@keyframes bounce { 40% { transform: translateY(-8px) rotate(-4deg); } 70% { transform: translateY(2px); } }
.bubble {
  position: relative;
  flex: 1;
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 12px 16px;
  font-size: 1.08rem;
  font-weight: 500;
  box-shadow: 3px 3px 0 var(--ink);
}
.bubble::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  margin-top: -9px;
  border: 9px solid transparent;
  border-right: 12px solid var(--ink);
  border-left: 0;
}
.bubble.good { background: var(--good-soft); }
.bubble.not-yet { background: var(--notyet-soft); }
.feedback.not-yet { background: var(--notyet-soft); color: var(--ink); padding: 10px 14px; }

.glow { animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); } }

.choice.soft-wrong { border-color: var(--notyet); background: var(--notyet-soft); color: var(--notyet); opacity: 0.75; cursor: default; }
.choice.glow { border-color: var(--accent); }

.simplified { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; color: var(--good); margin-bottom: 4px; animation: rise 0.3s ease-out; }

.hop-area { animation: rise 0.3s ease-out; }

.answer-line {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 12px 0;
  margin-bottom: 16px;
}
.numberline.tap .tap-target { cursor: pointer; }
.numberline.tap .hit { fill: transparent; }
.numberline.tap .tap-target:hover .hit { fill: var(--accent-soft); }
.numberline.tap .tap-target.picked .hit { fill: var(--accent-soft); }
.numberline.tap .start-dot { fill: var(--accent); stroke: var(--card); stroke-width: 3; }
.numberline.tap .tap-kitsu { transition: transform 0.25s; pointer-events: none; }
.answer-line.locked .tap-target { cursor: default; }

/* header stats */
.stat-chip.region { text-decoration: none; color: var(--ink); background: var(--story); border-color: var(--story-line); }
.stat-chip.combo { background: var(--pos-soft); border-color: var(--pos); }
.power { font-weight: 800; margin-left: auto; }
.power-next { font-weight: 600; font-size: 0.85rem; }
.float-text {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--pos-ink);
  transform: translate(-50%, 0);
  animation: float-up 1.3s ease-out forwards;
}
@keyframes float-up { to { transform: translate(-50%, -60px); opacity: 0; } }

.banner a { color: inherit; }

/* modal & story */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(10 10 25 / 55%);
  animation: fade 0.2s;
}
.modal {
  width: min(560px, 100%);
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 22px;
  animation: rise 0.3s ease-out;
}
.modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.story-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.story-icon { font-size: 3.4rem; line-height: 1; }
.story-kicker { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.story h2 { margin: 0; }
.rank-badge { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--card); font-weight: 800; font-size: 0.85rem; }

/* quest map */
.map-card { padding: 8px; background: var(--story); border-color: var(--story-line); }
.quest-map { width: 100%; height: auto; display: block; }
.quest-path { fill: none; stroke: var(--story-line); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 22; }
.quest-path.done { stroke: var(--accent); stroke-dasharray: none; stroke-width: 8; opacity: 0.6; }
.quest-node { cursor: pointer; }
.quest-node .node-ring { fill: var(--card); stroke: var(--ink); stroke-width: 4; transition: transform 0.15s; }
.quest-node:hover .node-ring, .quest-node:focus .node-ring { transform: scale(1.08); }
.quest-node.current .node-ring { stroke: var(--accent); stroke-width: 7; animation: glow-ring 1.6s ease-in-out infinite; }
@keyframes glow-ring { 50% { stroke-width: 11; } }
.quest-node.locked { cursor: default; opacity: 0.5; }
.quest-node .node-icon { font-size: 40px; }
.quest-node .node-name { font-size: 20px; font-weight: 900; fill: var(--ink); font-family: var(--font); }
.quest-node .node-sub { font-size: 15px; fill: var(--muted); font-family: var(--font); font-weight: 700; }
.map-kitsu { animation: hover 2s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-14px); } }
.btn { text-decoration: none; display: inline-block; }

/* wardrobe */
.wardrobe-preview { display: grid; place-items: center; }
.wardrobe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.outfit {
  font: inherit;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 8px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.outfit.on { border-color: var(--accent); background: var(--accent-soft); }
.outfit.locked { cursor: default; opacity: 0.6; }
.outfit-art { min-height: 64px; display: grid; place-items: center; font-size: 2rem; }
.outfit-name { font-weight: 800; }
.outfit-sub { font-size: 0.8rem; }

/* login */
.login { max-width: 400px; margin: 40px auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: center; }
.login-face { display: grid; place-items: center; }
.login h2 { margin: 0; }
.login label { display: grid; gap: 4px; text-align: left; font-weight: 700; }
.login input {
  font: inherit;
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
.login input:focus { outline: none; border-color: var(--accent); }
.login-error { color: var(--notyet); min-height: 1.4em; margin: 0; font-weight: 700; }

/* parent */
.settings .setting { display: flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.settings .setting > span:first-child { min-width: 200px; font-weight: 700; }
.settings .setting.check > span { font-weight: 500; min-width: 0; flex: 1; }
.settings input[type='checkbox'] { width: 20px; height: 20px; accent-color: var(--accent); }
.row-buttons.left { justify-content: flex-start; align-items: center; margin-top: 12px; }
.table-wrap { overflow-x: auto; }
table.log { width: 100%; border-collapse: collapse; font-size: 0.9rem; white-space: nowrap; }
table.log th, table.log td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
table.log tr.miss td { background: var(--notyet-soft); }
table.log .expr { font-weight: 700; }
pre { background: var(--bg); padding: 10px; border-radius: 10px; overflow-x: auto; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--ink);
  color: var(--card);
  padding: 10px 18px;
  border-radius: 12px;
  max-width: calc(100% - 32px);
}

@media (max-width: 560px) {
  .speaker { gap: 8px; }
  .speaker-face svg { width: 64px; height: 64px; }
  .power { margin-left: 0; }
}

.rules-summary b + b, .rules-then b + b { margin-left: 1.4em; }
/* Keypad centred when the picture isn't open. */
.practice-main:has(> .visual-panel[hidden]) { grid-template-columns: minmax(250px, 320px); justify-content: center; }

/* =========================================================================
   Engine v2: camp, episodes, bosses, Spot the Flaw, bestiary, techniques
   ========================================================================= */

.block-title { font-weight: 800; color: var(--muted); margin: -4px 0 10px; }
.stat-chip.stars { color: var(--pos-ink); letter-spacing: 0.08em; }
.banner.boss { background: var(--ink); color: var(--card); }
.banner.boss b { color: var(--pos); }

.beast-tag { display: inline-block; font-weight: 800; background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; margin: 2px 4px 2px 0; }
.beast-tag.win { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.beast-big { font-size: 5rem; line-height: 1; text-align: center; }

/* fatigue offer */
.fatigue { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--notyet-soft); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px; font-weight: 600; }
.fatigue span { flex: 1; min-width: 200px; }

/* check-in & reflection */
.mood-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .mood-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mood {
  font: inherit; font-weight: 700; display: grid; justify-items: center; gap: 4px; padding: 16px 8px;
  border-radius: 18px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
}
.mood:hover { border-color: var(--accent); transform: translateY(-2px); }
.mood-icon { font-size: 2.6rem; line-height: 1; }

/* episodes */
.episodes { display: grid; gap: 10px; }
.episode {
  font: inherit; text-align: left; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 16px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; text-decoration: none;
}
.episode:hover:not(:disabled) { border-color: var(--accent); }
.episode.done { border-color: var(--good); background: var(--good-soft); }
.episode.locked, .episode:disabled { opacity: 0.5; cursor: default; }
.ep-num { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 1.3rem; }
.episode.done .ep-num { background: var(--good); }
.ep-title { font-weight: 800; font-size: 1.1rem; }
.ep-sub { font-size: 0.9rem; }
.episode-end h2 { margin: 4px 0 12px; }
.ep-kicker { color: var(--accent); font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; }
.teaser { font-style: italic; background: var(--story); border: 1px dashed var(--story-line); border-radius: 12px; padding: 10px 14px; }

/* camp */
.camp-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, var(--story), var(--card)); }
.camp-kitsu { flex: none; }
.camp-info { flex: 1; min-width: 220px; }
.camp-info h2 { margin: 2px 0; font-size: 1.8rem; }
.camp-kicker { color: var(--accent); font-weight: 800; }
.camp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 560px) { .camp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fire-grid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 700px) { .fire-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.fire-day { display: grid; justify-items: center; padding: 6px 0; border-radius: 10px; background: var(--bg); }
.fire-day.lit { background: var(--pos-soft); }
.fire-day.today { outline: 2px solid var(--accent); }
.fire { font-size: 1.3rem; line-height: 1.2; }
.fire-day:not(.lit):not(.warm) .fire { opacity: 0.45; }
.fire-label { font-size: 0.7rem; color: var(--muted); }

/* naming */
.modal.naming h3 { margin: 12px 0 8px; }
.name-input {
  font: inherit; font-size: 1.3rem; font-weight: 800; width: 100%; padding: 10px 14px;
  border-radius: 12px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink);
}
.name-input:focus { outline: none; border-color: var(--accent); }
.name-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip-btn { font: inherit; font-size: 0.9rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.chip-btn:hover { border-color: var(--accent); }
.modal-actions { gap: 10px; }

/* summoning */
.summon p { text-align: left; }
.summon-flash { font-size: 3rem; animation: pop 0.8s ease-out; }
.tail-burst { display: grid; place-items: center; animation: pop 0.6s ease-out; }

/* techniques */
.tech-card {
  font: inherit; text-align: left; display: block; width: 100%; color: var(--ink);
  background: linear-gradient(160deg, var(--accent-soft), var(--card)); border: 2px solid var(--accent);
  border-radius: 14px; padding: 12px 14px; margin-top: 12px; box-shadow: 3px 3px 0 var(--accent);
}
button.tech-card { cursor: pointer; }
button.tech-card:hover { transform: translateY(-2px); }
.tech-card.fresh { animation: pop 0.5s ease-out; }
.tech-kicker { font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.tech-name { font-weight: 900; font-size: 1.15rem; }
.tech-nick { font-weight: 700; color: var(--muted); }
.tech-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-items: start; }
.tech-tray .tech-card { margin-top: 0; }
.tech-wrap { display: grid; gap: 6px; justify-items: start; align-content: start; }
.tech-wrap .tech-card { width: 100%; }

/* bestiary */
.beast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.beast { background: var(--bg); border: 2px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 4px; justify-items: center; text-align: center; }
.beast.tamed { border-color: var(--good); background: var(--good-soft); }
.beast.unknown { opacity: 0.6; }
.beast-icon { font-size: 3rem; line-height: 1.1; }
.beast-name { font-weight: 900; font-size: 1.1rem; }
.beast-spell { font-size: 0.9rem; }
.beast-counter { font-size: 0.85rem; color: var(--accent); }
.beast-meter { width: 100%; }

/* boss */
.boss-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, var(--neg-soft), var(--card)); }
.boss-head.hit { animation: wiggle 0.4s; }
.boss-icon { font-size: 4rem; line-height: 1; }
.boss-info { flex: 1; min-width: 200px; }
.boss-info h2 { margin: 0 0 6px; }
.boss-kicker { font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; color: var(--neg-ink); }
.hp-bar { display: flex; gap: 4px; flex-wrap: wrap; }
.hp { width: 26px; height: 14px; border-radius: 4px; background: var(--line); transition: background 0.3s; }
.hp.on { background: var(--neg); }

/* spot the flaw */
.flaw-head { display: flex; justify-content: space-between; align-items: baseline; }
.flaw-head h3 { margin: 0; }
.flaw-work { display: grid; gap: 8px; max-width: 520px; margin: 10px auto; }
.flaw-line {
  font: inherit; font-size: clamp(1.4rem, 4.5vw, 2rem); font-weight: 800; text-align: left; padding: 8px 16px;
  border-radius: 12px; border: 2px dashed var(--line); background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums;
}
button.flaw-line { cursor: pointer; }
button.flaw-line:hover:not(:disabled) { border-color: var(--accent); }
.flaw-line.given { border-style: solid; background: transparent; }
.flaw-line.checked { border-color: var(--good); opacity: 0.7; }
.flaw-line.found { border-color: var(--notyet); background: var(--notyet-soft); text-decoration: line-through; }
.flaw-line.fixed { border-color: var(--good); background: var(--good-soft); color: var(--good); text-decoration: none; }

/* map v2 */
.realm-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .realm-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.realm-tab { font: inherit; display: flex; align-items: center; gap: 8px; text-align: left; padding: 10px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.realm-tab.on { border-color: var(--accent); background: var(--accent-soft); }
.realm-tab.sealed { opacity: 0.65; }
.realm-icon { font-size: 1.8rem; }
.region-head { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px 0; }
.region-head h3 { margin: 0; }
.quest-node .node-sub.dusty { fill: var(--accent); }
.planned-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.planned { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--bg); opacity: 0.75; }

/* wardrobe loadouts */
.loadouts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.loadout { display: flex; align-items: center; gap: 4px; }
.loadout-wear { font: inherit; display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.loadout-wear:hover { border-color: var(--accent); }

.small-bar { height: 10px; min-width: 80px; }

/* =========================================================================
   v3: Mirror Halls, Runeforge, and the responsive layout
   Targets: iPhone (375–430 wide) · Chromebook (1366×768, short!) · 1080p desktop
   ========================================================================= */

:root { --flip: #7c3aed; --rune-x: #16a34a; --rune-y: #2563eb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --flip: #a78bfa; --rune-x: #4ade80; --rune-y: #60a5fa; } }

html { -webkit-text-size-adjust: 100%; }
body { padding-bottom: env(safe-area-inset-bottom); }
button, .key, .choice, a.btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

main { max-width: 1240px; }
@media (min-width: 1600px) { body { font-size: 19px; } }

/* ---- header ---- */
.top { padding-top: max(10px, env(safe-area-inset-top)); }
@media (max-width: 900px) {
  .top { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 6px; padding-bottom: 6px; }
  #nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px 2px; }
  #nav::-webkit-scrollbar { display: none; }
  #nav a, .nav-logout { flex: none; white-space: nowrap; }
}
@media (max-width: 560px) {
  .brand { font-size: 0.95rem; }
  .brand-mark { width: 28px; height: 28px; font-size: 18px; }
  main { padding: 12px 12px 48px; }
  .card { padding: 14px; border-radius: 16px; }
}

/* ---- encounter grid ---- */
.encounter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; grid-template-areas: 'card' 'tap' 'input' 'visual'; align-items: start; }
.encounter > .question-card { grid-area: card; margin: 0; }
.encounter > .tap-slot { grid-area: tap; }
.encounter > .input-slot { grid-area: input; }
.encounter > .visual-slot { grid-area: visual; }
.encounter .answer-line { margin: 0; }
.encounter .visual-panel { margin: 0; }
.tap-slot:empty, .tap-slot:has(> [hidden]) { display: none; }
.encounter.choosing > .input-slot { display: none; }

@media (min-width: 980px) {
  .encounter { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: 'card input' 'tap input' 'visual input'; }
  .encounter > .input-slot { position: sticky; top: 76px; align-self: start; }
  .encounter.choosing > .input-slot { display: block; opacity: 0.35; pointer-events: none; }
  .encounter .keypad-wrap { max-width: none; }
}
@media (min-width: 1400px) { .encounter { grid-template-columns: minmax(0, 1fr) 330px; } }

@media (max-width: 979px) {
  .encounter .keypad-wrap { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* Short screens (Chromebook 1366×768): tighten vertical space so a question,
   the tap line and the keypad fit without scrolling. */
@media (max-height: 820px) and (min-width: 980px) {
  .top { padding-top: 6px; padding-bottom: 6px; }
  main { padding-top: 12px; }
  .practice-bar { margin-bottom: 8px; }
  .question-card { padding: 12px 16px; }
  .question-card .speaker-face svg { width: 64px; height: 64px; }
  .question-card .bubble { padding: 8px 12px; font-size: 1rem; }
  .question { font-size: clamp(2rem, 4.2vw, 2.9rem); margin: 4px 0 2px; }
  .question-actions { margin-top: 6px; }
  .key { padding: 8px 0; font-size: 1.3rem; }
  .answer-display { font-size: 2rem; padding: 2px; }
  .keypad-wrap { gap: 8px; padding: 12px; }
  .numberline.tap { max-height: 170px; }
  .block-title { margin-bottom: 6px; }
}

/* ---- question extras ---- */
.question.long { font-size: clamp(1.5rem, 5.5vw, 2.8rem); }
.rune-values { display: inline-block; font-weight: 800; font-size: 1.15rem; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 14px; margin-bottom: 6px; }
.choices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.choice { white-space: normal; overflow-wrap: anywhere; }

/* ---- phone sizes for key UI ---- */
@media (max-width: 560px) {
  .question { font-size: clamp(1.7rem, 9vw, 2.6rem); }
  .key { padding: 14px 0; font-size: 1.45rem; }
  .practice-bar { gap: 6px; }
  .practice-bar .stat-chip { font-size: 0.85rem; padding: 4px 10px; }
  .power-next { display: none; }
  .question-actions .btn { padding: 8px 12px; font-size: 0.95rem; }
  .vis-stage { overflow-x: auto; }
  .vis-stage svg.numberline { min-width: 620px; }
  .vis-controls .btn { padding: 8px 12px; }
  .map-card { overflow-x: auto; }
  .quest-map { min-width: 680px; }
  .modal { padding: 16px; max-height: 88vh; overflow-y: auto; }
  .camp-hero { justify-content: center; text-align: center; }
  .camp-kitsu svg { width: 110px; height: 110px; }
  .flaw-line { padding: 6px 12px; }
  .boss-icon { font-size: 3rem; }
}

/* tap line scrolls sideways when it doesn't fit */
.answer-line { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.answer-line svg { display: block; }

/* ---- number line: mirror flips ---- */
.numberline .hop.flip { stroke: var(--flip); stroke-dasharray: 8 6; }
.numberline .hop.flip.draw { stroke-dasharray: 1; }
.numberline .hop-label.flip { fill: var(--flip); }
.numberline .move.flip .hop { stroke-width: 4; }

/* ---- written working ---- */
.working { display: grid; gap: 6px; max-width: 560px; margin: 4px auto; }
.work-line { font-size: clamp(1.2rem, 4vw, 1.6rem); font-weight: 800; padding: 6px 14px; border-radius: 10px; background: var(--bg); font-variant-numeric: tabular-nums; animation: rise 0.25s ease-out; }
.work-line.latest { background: var(--accent-soft); outline: 2px solid var(--accent); }
.work-line.final { background: var(--good-soft); outline: 2px solid var(--good); color: var(--good); }

/* ---- algebra tiles ---- */
.tile-board { display: grid; gap: 10px; padding: 6px 0; }
.tile-board.groups { grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); align-items: start; }
.tile-group { display: grid; gap: 4px; padding: 6px; }
.tile-group.box { border: 2px dashed var(--muted); border-radius: 12px; }
.tile-group-label { font-weight: 800; color: var(--muted); font-size: 0.85rem; }
.tile-group-tiles, .tile-row-tiles { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tile-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; }
.tile-row-label { width: 34px; font-weight: 900; color: var(--muted); }
.tile-row-total { font-weight: 900; font-size: 1.2rem; margin-left: auto; }
.tile { display: inline-grid; place-items: center; font-weight: 900; border-radius: 6px; border: 2px solid rgb(0 0 0 / 25%); position: relative; transition: transform 0.25s, opacity 0.25s; font-size: 0.9rem; }
.tile-x { width: 22px; height: 44px; }
.tile-y { width: 44px; height: 22px; }
.tile-1 { width: 22px; height: 22px; font-size: 0.8rem; }
.tile.pos { background: var(--pos); color: #4a3300; }
.tile.neg { background: var(--neg); color: #fff; }
.tile.new { animation: chip-in 0.35s backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.tile.flipped { animation: pop 0.45s; outline: 2px solid var(--flip); outline-offset: 1px; }
.tile.pair { opacity: 0.4; outline: 2px dashed var(--ink); outline-offset: 1px; }
.tile.pair::after { content: ''; position: absolute; inset: 45% -3px auto; height: 3px; background: var(--ink); transform: rotate(-35deg); }
.tile-key { display: inline-block; margin: 0 4px; font-weight: 700; color: var(--muted); }

/* ---- rune keypad ---- */
.keypad.cols-5 { grid-template-columns: repeat(5, 1fr); }
.keypad .key.rune { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); font-family: var(--font); }
.keypad .key.op { color: var(--ink); background: var(--card); }
.keypad.cols-5 .key { font-size: 1.25rem; }
.keypad.cols-5 .key.del { grid-column: span 2; }
.answer-display.expr { font-size: clamp(1.4rem, 5vw, 2rem); min-height: 3rem; overflow-x: auto; white-space: nowrap; }
.pad-hint { min-height: 1.1em; text-align: center; color: var(--notyet); }

/* ---- map extras ---- */
.map-card.here { outline: 3px solid var(--accent); }
.here-tag { color: var(--accent); font-size: 0.9rem; }
.region-locked { opacity: 0.8; }
.region-locked h3 { margin: 0; }
.learn-tabs { margin-top: 10px; }

/* Phones: long questions wrap instead of running off the edge. */
@media (max-width: 560px) {
  .question { white-space: normal; overflow: visible; line-height: 1.2; }
  .question .blank { min-width: 1.2em; }
  .question.long { font-size: clamp(1.4rem, 7vw, 2rem); }
  .simplified { font-size: clamp(1.3rem, 6.5vw, 1.8rem); }
}

/* Keep the stage path a sensible size on big monitors. */
.quest-map { max-height: min(440px, 52vh); margin: 0 auto; }
@media (max-width: 560px) { .quest-map { max-height: none; } }

/* Brand: Kitsune Ascension */
img.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: block; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); }
.brand-text { display: grid; line-height: 1.05; }
.brand-name { font-weight: 900; letter-spacing: 0.02em; }
.brand-sub { font-size: 0.68rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
@media (max-width: 560px) { img.brand-mark { width: 30px; height: 30px; } .brand-sub { font-size: 0.6rem; } }
.game-title { margin: 0; font-size: 1.9rem; font-weight: 900; letter-spacing: 0.02em; background: linear-gradient(90deg, var(--pos-ink), #ff7a1a, var(--neg-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-sub { margin: -6px 0 4px; color: var(--muted); font-weight: 700; font-size: 0.9rem; }

.login label.remember { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.login label.remember input { width: 20px; height: 20px; accent-color: var(--accent); }
.link-btn { font: inherit; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0 4px; }
.name-later { margin-top: 6px; }

/* nine realms */
.realm-tabs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.realm-tab-text { display: grid; line-height: 1.2; }
.realm-tab.restored { border-color: var(--pos); background: var(--pos-soft); }
@media (max-width: 560px) {
  .realm-tabs { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 0 -14px; padding: 0 14px 4px; }
  .realm-tabs::-webkit-scrollbar { display: none; }
  .realm-tab { flex: none; width: 190px; }
}
.realm-story h3 { margin-top: 0; }
.restored-tag { color: var(--pos-ink); font-size: 0.9rem; }

/* =========================================================================
   v4: figures, new inputs, progression screens
   ========================================================================= */

/* ---- question card extras ---- */
.question-card.realm-bg { position: relative; }
.q-prompt { font-size: 1.15rem; font-weight: 600; margin: 4px auto 8px; max-width: 760px; text-align: left; }
.q-figure { margin: 6px auto; max-width: 560px; }
.question.small { font-size: clamp(1.6rem, 4.6vw, 2.6rem); }
.question .unit { font-size: 0.6em; color: var(--muted); font-weight: 800; }
@media (max-height: 820px) and (min-width: 980px) { .q-figure { max-width: 420px; } .q-figure svg { max-height: 230px; } }

/* ---- figures ---- */
.figure { display: block; width: 100%; height: auto; }
svg.figure, .figure svg { max-height: 340px; }
.step-figure { margin: 4px auto 8px; max-width: 620px; }
.diagram .d-line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.diagram .d-line.faint { stroke: var(--muted); stroke-width: 2; opacity: .6; }
.diagram .d-line.dash { stroke-dasharray: 8 6; }
.diagram .d-line.hl, .diagram .d-poly.hl { stroke: var(--accent); stroke-width: 4; }
.diagram .d-poly { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.diagram .d-poly.fill-a { fill: color-mix(in srgb, var(--pos) 45%, transparent); }
.diagram .d-poly.fill-b { fill: color-mix(in srgb, var(--rune-y) 35%, transparent); }
.diagram .d-poly.shade { fill: color-mix(in srgb, var(--muted) 30%, transparent); }
.diagram .d-poly.faint { fill: none; stroke: var(--muted); stroke-dasharray: 6 6; }
.diagram .d-circle { fill: none; stroke: var(--ink); stroke-width: 3; }
.diagram .d-circle.fill-a { fill: color-mix(in srgb, var(--pos) 45%, transparent); }
.diagram .d-point { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.diagram .d-point-label, .diagram .d-label, .diagram .d-text { font: 800 18px var(--font); fill: var(--ink); }
.diagram .d-text.hl { fill: var(--accent); }
.diagram .d-dim { font: 800 17px var(--font); fill: var(--rune-y); }
.diagram .d-angle .d-arc { fill: none; stroke: var(--neg); stroke-width: 2.5; }
.diagram .d-angle.hl .d-arc { stroke: var(--accent); stroke-width: 3.5; }
.diagram .d-angle-label { font: 900 17px var(--font); fill: var(--neg-ink); }
.diagram .d-angle.hl .d-angle-label { fill: var(--accent); }
.diagram .d-ticks line, .diagram .d-parallel path { stroke: var(--ink); stroke-width: 2.5; fill: none; }

.chart { margin: 0; }
.chart-title { text-align: center; font-weight: 800; margin-bottom: 4px; }
.chart-svg { width: 100%; height: auto; max-height: 320px; display: block; }
.c-axis { stroke: var(--ink); stroke-width: 2; }
.c-gridline { stroke: var(--line); stroke-width: 1; }
.c-tick { font: 700 14px var(--font); fill: var(--muted); }
.c-tick.left { text-anchor: start; fill: var(--ink); }
.c-axis-label { font: 800 14px var(--font); fill: var(--ink); }
.c-bar { fill: var(--accent); opacity: .85; }
.c-bar.hl { fill: var(--pos); }
.c-bar.touching { stroke: var(--card); stroke-width: 1; }
.c-value { font: 800 14px var(--font); fill: var(--ink); }
.c-line { fill: none; stroke: var(--accent); stroke-width: 3; }
.c-dot { fill: var(--accent); }
.c-slice { stroke: var(--card); stroke-width: 2; }
.c-slice-label { font: 900 14px var(--font); fill: #fff; }
.c0 { fill: #f2b705; } .c1 { fill: #e5484d; } .c2 { fill: #4f46e5; } .c3 { fill: #16a34a; } .c4 { fill: #0ea5e9; } .c5 { fill: #a855f7; } .c6 { fill: #f97316; } .c7 { fill: #64748b; }
.stem-leaf table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; font-size: 1.2rem; }
.stem-leaf td { padding: 4px 12px; }
.stem-leaf .stem { border-right: 3px solid var(--ink); text-align: right; font-weight: 900; }
.stem-leaf .leaves { letter-spacing: .1em; font-weight: 700; }
.data-table td, .data-table th { text-align: center; }
.pictogram { display: grid; gap: 6px; max-width: 520px; margin: 0 auto; }
.picto-row { display: flex; gap: 10px; align-items: center; }
.picto-label { width: 110px; font-weight: 700; }
.picto-icons { font-size: 1.4rem; letter-spacing: .1em; }

.grid { max-width: 520px; margin: 0 auto; }
.g-line { stroke: var(--line); stroke-width: 1; }
.g-axis { stroke: var(--ink); stroke-width: 2; }
.g-tick { font: 700 12px var(--font); fill: var(--muted); }
.g-axis-label { font: 900 15px var(--font); fill: var(--ink); }
.g-plot { stroke: var(--accent); stroke-width: 3; }
.g-plot.b { stroke: var(--neg); }
.g-plot-label { font: 800 14px var(--font); fill: var(--accent); }
.g-point { fill: var(--pos); stroke: var(--ink); stroke-width: 2; }
.g-point.hl { fill: var(--neg); }
.g-point-label { font: 800 14px var(--font); fill: var(--ink); }
.g-run { stroke: var(--rune-x); stroke-width: 4; stroke-dasharray: 6 4; }
.g-rise { stroke: var(--rune-y); stroke-width: 4; stroke-dasharray: 6 4; }
.g-run-label { font: 800 13px var(--font); fill: var(--rune-x); }
.g-rise-label { font: 800 13px var(--font); fill: var(--rune-y); }

.bar-model { display: grid; gap: 8px; max-width: 620px; margin: 0 auto; }
.bm-row { display: grid; grid-template-columns: minmax(60px, auto) 1fr auto; gap: 10px; align-items: center; }
.bm-label { font-weight: 800; text-align: right; }
.bm-track { display: flex; min-height: 40px; }
.bm-part { border: 2px solid var(--ink); margin-left: -2px; display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: var(--card); min-width: 0; overflow: hidden; }
.bm-part.a { background: var(--pos-soft); }
.bm-part.b { background: var(--neg-soft); }
.bm-part.c { background: var(--accent-soft); }
.bm-part.unknown { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 6px, var(--line) 6px, var(--line) 12px); }
.bm-part.shade { background: color-mix(in srgb, var(--accent) 35%, var(--card)); }
.bm-total { font-weight: 900; color: var(--accent); }

.balance { max-width: 560px; margin: 0 auto; }
.bal-beam { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px; border-bottom: 6px solid var(--ink); padding-bottom: 6px; transition: transform .4s; }
.balance.tilt-left .bal-beam { transform: rotate(-4deg); }
.balance.tilt-right .bal-beam { transform: rotate(4deg); }
.bal-pan { min-height: 60px; background: var(--bg); border: 2px solid var(--line); border-radius: 0 0 40px 40px; padding: 8px; display: grid; align-content: end; }
.bal-pan-items { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.bal-pivot { font-size: 1.8rem; }
.bal-item { display: inline-grid; place-items: center; font-weight: 900; border: 2px solid rgb(0 0 0 / 25%); border-radius: 6px; }
.bal-x { width: 26px; height: 40px; background: var(--rune-x); color: #fff; }
.bal-1 { width: 22px; height: 22px; background: var(--pos); color: #4a3300; }
.bal-1.neg, .bal-x.neg { background: var(--neg); color: #fff; }
.bal-text { font-weight: 900; font-size: 1.2rem; }
.bal-label { text-align: center; font-weight: 800; margin-top: 6px; }

/* ---- new inputs ---- */
.keypad.cols-4 { grid-template-columns: repeat(4, 1fr); }
.keypad .key.rel { background: var(--accent-soft); color: var(--accent); }
.keypad .key.wide { grid-column: span 2; font-size: 1rem; }
.choice-wrap { padding: 12px; }
.choice-input { display: grid; gap: 8px; }
.choice-input .choice { text-align: left; font-size: 1.15rem; padding: 12px 14px; display: flex; gap: 10px; align-items: center; }
.choice-input .choice.picked { border-color: var(--accent); }
.choice-key { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 900; flex: none; }
.pair-display { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pair-field { font: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font-size: 1.6rem; font-weight: 800; }
.pair-field.active { border-color: var(--accent); background: var(--accent-soft); }
.pair-label { color: var(--muted); font-size: 1.1rem; }
.pair-value.empty { color: var(--muted); }
@media (min-width: 980px) { .encounter > .input-slot .choice-wrap { max-height: 70vh; overflow: auto; } }

/* ---- camp ---- */
.camp-scene { border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow); line-height: 0; }
.camp-scene svg { width: 100%; height: auto; display: block; }
.camp-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.board-card .quests { display: grid; gap: 10px; }
.quest-item { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; }
.quest-item .bar { grid-column: 2 / 4; height: 8px; }
.quest-item.done .quest-text { text-decoration: line-through; color: var(--muted); }
.arc-card .arc-weeks { display: grid; gap: 6px; margin: 8px 0; }
.arc-week { display: grid; grid-template-columns: 52px 30px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--bg); }
.arc-week.focus { outline: 2px solid var(--accent); background: var(--accent-soft); }
.arc-week.waiting-date, .arc-week.missing { opacity: .55; }
.arc-week.strong { background: var(--good-soft); }
.arc-n { font-weight: 900; color: var(--muted); font-size: .85rem; }
.arc-state { font-weight: 900; color: var(--pos-ink); }
.arc-scout { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--story); border: 1px dashed var(--story-line); padding: 10px 12px; border-radius: 12px; margin: 8px 0; }
.letters .letter, .letter { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.letter-sticker { font-size: 1.6rem; }

/* ---- chest ---- */
.modal.chest { width: min(720px, 100%); text-align: center; }
.chest-head { display: flex; gap: 14px; align-items: center; justify-content: center; text-align: left; }
.chest-icon { font-size: 3.4rem; animation: pop .6s; }
.chest-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
@media (max-width: 560px) { .chest-options { grid-template-columns: 1fr; } }
.chest-option { font: inherit; display: grid; gap: 4px; justify-items: center; padding: 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.chest-option:hover { border-color: var(--accent); transform: translateY(-2px); }
.chest-art { min-height: 84px; display: grid; place-items: center; width: 100%; }
.chest-big { font-size: 3rem; }
.chest-deco svg { width: 100%; max-height: 90px; }
.chest-label { font-weight: 900; }
.chest-kitsu { display: flex; justify-content: center; }

/* ---- shop ---- */
.shop-balance { font-size: 1.6rem; font-weight: 900; color: var(--accent); margin-top: 8px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.shop-item { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px; border-radius: 16px; border: 2px solid var(--line); background: var(--bg); }
.shop-item.can { border-color: var(--pos); background: var(--pos-soft); }
.shop-emoji { font-size: 2.6rem; }
.shop-title { font-weight: 900; }
.shop-price { font-weight: 800; color: var(--accent); }
.redeemed { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }

/* ---- cheers ---- */
.modal.cheer { text-align: center; }
.cheer-kitsu { display: flex; justify-content: center; animation: bounce .6s; }
.cheer-sticker { font-size: 4rem; animation: pop .6s; }
.cheer-text { font-size: 1.3rem; font-weight: 700; white-space: pre-wrap; }
.sticker-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sticker { font-size: 1.6rem; background: var(--bg); border: 2px solid var(--line); border-radius: 12px; padding: 4px 8px; cursor: pointer; }
.sticker.on { border-color: var(--accent); background: var(--accent-soft); }
.text-input { font: inherit; padding: 8px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; max-width: 520px; }
.emoji-input { width: 70px; } .price-input { width: 90px; }
.pending { background: var(--pos-soft); border-radius: 12px; padding: 10px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-weight: 700; }

/* ---- journey / collection / chronicle / scout ---- */
.hero-card-wrap { display: grid; place-items: center; }
.hero-card { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 20px; border: 6px solid #a0703c; background: linear-gradient(160deg, var(--story), var(--card)); box-shadow: var(--shadow); max-width: 560px; width: 100%; }
.hero-card.frame-silver { border-color: #b8c2cc; } .hero-card.frame-gold { border-color: #e2b23c; } .hero-card.frame-legend { border-image: linear-gradient(135deg, #f2b705, #e5484d, #7c3aed) 1; }
.hero-card.frame-sakura { border-color: #ff9fbd; } .hero-card.frame-storm { border-color: #60a5fa; } .hero-card.frame-meridian { border-color: #f59e0b; }
.hero-card-name { font-size: 1.5rem; font-weight: 900; }
.hero-card-stats { display: flex; flex-wrap: wrap; gap: 10px; font-weight: 800; margin: 6px 0; }
.frame-swatch { font-size: 2rem; }
.skill-realm { margin: 12px 0; }
.skill-realm-head { position: relative; height: 54px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; padding: 0 14px; color: #fff; font-weight: 900; text-shadow: 0 1px 3px rgb(0 0 0 / 70%); }
.skill-realm-head .realm-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.skill-realm-head span { position: relative; z-index: 1; }
.skill-region { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.skill-region.locked { opacity: .5; }
@media (max-width: 560px) { .skill-region { grid-template-columns: 1fr; } }
.skill-nodes { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-node { display: grid; justify-items: center; padding: 4px 6px; border-radius: 10px; background: var(--bg); border: 2px solid var(--line); min-width: 52px; }
.skill-node.s1 { border-color: var(--pos); } .skill-node.s2 { border-color: var(--good); background: var(--good-soft); } .skill-node.s3 { border-color: var(--accent); background: var(--accent-soft); }
.skill-node.dusty { outline: 2px dashed var(--accent); }
.skill-node.unreached { opacity: .45; }
.skill-node-stars { font-size: .7rem; color: var(--pos-ink); letter-spacing: .05em; }
.tails-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.tail-realms { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; flex: 1; min-width: 240px; }
.tail-realm { font-size: 1.6rem; text-align: center; opacity: .35; }
.tail-realm.on { opacity: 1; }
.card-set h4 { margin: 10px 0 6px; }
.beast-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.beast-card { display: grid; gap: 2px; justify-items: center; padding: 10px 6px; border-radius: 14px; border: 3px solid var(--line); background: var(--bg); text-align: center; }
.beast-card.silhouette .beast-card-icon { filter: grayscale(1) brightness(.4); }
.beast-card.bronze { border-color: #c08040; }
.beast-card.gold { border-color: #e2b23c; background: linear-gradient(160deg, var(--pos-soft), var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, #e2b23c 35%, transparent); }
.beast-card-icon { font-size: 2.2rem; }
.beast-card-name { font-weight: 800; font-size: .9rem; }
.beast-card-tier { font-size: .75rem; color: var(--muted); }
.set-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.set-chip { display: grid; justify-items: center; padding: 8px; border-radius: 14px; background: var(--bg); border: 2px solid var(--line); }
.set-chip.done { border-color: var(--good); background: var(--good-soft); }
.outfit-set h4 { margin: 12px 0 6px; }
.set-done { color: var(--good); font-size: .9rem; }
.wardrobe-preview.set-aura svg { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pos) 70%, transparent)); }
.deco-art svg { width: 100%; max-height: 70px; }
.chapter-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.chapter { font: inherit; display: grid; gap: 2px; text-align: left; padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.chapter:not(.locked):not(.seen) { border-color: var(--accent); }
.chapter.locked { opacity: .55; cursor: default; }
.chapter-n { color: var(--accent); font-weight: 900; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.scout-bar { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 6px 0; }
.scout-fill { height: 100%; width: 0; background: var(--accent); transition: width .4s; }
.scout-line { font-weight: 700; margin: 6px 0 12px; }
.scout-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.scout-results li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.scout-icon { font-size: 1.4rem; }
.scout-solid { color: var(--good); font-weight: 700; }
.awaken-burst { display: grid; place-items: center; animation: pop .8s; filter: drop-shadow(0 0 22px #ffd400); }

.g-plot.alt { stroke: var(--neg); }
.g-plot-label.alt { fill: var(--neg-ink); }
.g-plot.hl, .g-point.hl { stroke: var(--pos-ink); }

.diagram circle.open { fill: var(--card); stroke: var(--accent); stroke-width: 3; }
.diagram circle.closed { fill: var(--accent); stroke: var(--accent); }
.diagram .d-circle.hl { stroke: var(--accent); }

/* Figures sit on a solid card so realm art never competes with the maths. */
.q-figure, .step-figure { background: var(--card); border-radius: 14px; padding: 8px; box-shadow: 0 1px 4px rgb(0 0 0 / 8%); }
.question-card .q-prompt { background: color-mix(in srgb, var(--card) 85%, transparent); border-radius: 12px; padding: 6px 10px; }
.question .blank { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.skill-realm-head::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 16 40 / 70%), rgb(20 16 40 / 10%)); z-index: 0; }
.skill-realm-head span { z-index: 1; }

/* first-login manga opening (ui/summon.js) */
.opening {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  background: var(--bg);
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  --mg-chrome: 96px;
  --mg-chrome-phone: 110px;
}
body.opening-open { overflow: hidden; }

/* very narrow phones (iPhone SE, 320px): hero card stacks, tails row shrinks */
.hero-card-body { min-width: 0; }
.hero-card-name { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .hero-card { flex-direction: column; text-align: center; padding: 14px; gap: 8px; }
  .hero-card-stats { justify-content: center; }
  .tail-realms { min-width: 0; flex-basis: 100%; gap: 2px; }
  .tail-realm { font-size: clamp(1rem, 6.5vw, 1.6rem); }
}

/* optional stretch stages (previews beyond Sec 2 G2) */
.quest-node .node-stretch { font-size: 15px; font-weight: 800; fill: #a77bff; font-family: var(--font); }
.quest-node.stretch .node-ring { stroke-dasharray: 8 6; }
.skill-node.stretch { border-style: dashed; }

/* figure labels keep a halo so they stay readable where they cross lines or ticks */
.diagram .d-dim, .diagram .d-angle-label, .diagram .d-point-label, .diagram .d-label,
.grid .g-point-label, .grid .g-plot-label, .grid .g-rise-label, .grid .g-run-label, .chart-svg .c-value {
  paint-order: stroke fill;
  stroke: var(--card);
  stroke-width: 4px;
  stroke-linejoin: round;
}