/* Brainmaxx v2 — design tokens & skin (ported from design_handoff_quotient_v2) */

:root {
  --bg: #0a0a10; --panel: #12121b; --panel2: #181826;
  --ink: #ecebf4; --mut: #9a99ad; --line: rgba(255,255,255,.09);
  --ac: #8f7bff; --acSoft: rgba(143,123,255,.15); --acText: #c9beff;
  --gold: #e0b45c; --good: #4cc98a; --bad: #e46a6a;
  --onAc: #0c0c14;
  --shadow: 0 10px 32px rgba(0,0,0,.45);
}
:root[data-theme="ember"] { --bg:#0f0b09; --panel:#181110; --panel2:#201613; --ac:#ff8a5c; --acSoft:rgba(255,138,92,.14); --acText:#ffc4a8; }
:root[data-theme="jade"]  { --bg:#090f0d; --panel:#101815; --panel2:#15201b; --ac:#3fd6a0; --acSoft:rgba(63,214,160,.13); --acText:#a8f0d6; }
:root[data-theme="ion"]   { --bg:#090d12; --panel:#101722; --panel2:#141d2b; --ac:#55c6ff; --acSoft:rgba(85,198,255,.13); --acText:#b0e2ff; }
:root[data-theme="paper"] {
  --bg:#f1efe9; --panel:#ffffff; --panel2:#f7f5f0; --ink:#1a1922; --mut:#6d6c7a;
  --line:rgba(25,25,50,.13); --ac:#5a4fd1; --acSoft:rgba(90,79,209,.10); --acText:#5a4fd1;
  --gold:#a8821c; --good:#2e9e5b; --bad:#cf4f4f; --onAc:#ffffff;
  --shadow:0 10px 28px rgba(30,30,60,.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  min-height: 100vh; overflow-x: hidden; transition: background .4s;
  overscroll-behavior-y: none;          /* no pull-to-refresh mid-drag */
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.puzzle-area, .options-grid, .progress-dots, .play-header { -webkit-user-select: none; user-select: none; }
a { color: var(--acText); text-decoration: none; }
::selection { background: var(--acSoft); }
.hidden { display: none !important; }
.mono { font-family: 'IBM Plex Mono', monospace; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-3px); } }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%,6px) scale(.8); } 15% { opacity: 1; transform: translate(-50%,0) scale(1.05); } 100% { opacity: 0; transform: translate(-50%,-56px) scale(1); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes starPop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.35); } 100% { transform: scale(1); opacity: 1; } }
@keyframes breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(2.5deg); } 75% { transform: rotate(-1.5deg); } }
.breathe { animation: breathe 2.4s ease infinite; }

/* ---------- global chrome ---------- */
.bg-glows {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 700px at 75% -12%, var(--acSoft), transparent 60%),
    radial-gradient(900px 620px at -8% 108%, var(--acSoft), transparent 55%);
}
/* Drifting puzzle glyphs behind everything — the shapes from the game itself,
   very faint and very slow, so the page feels alive without competing with it.
   Dimmed further on the play screen so it never distracts mid-puzzle. */
.bg-shapes { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.bg-shapes svg {
  position: absolute; color: var(--ac); opacity: .06;
  animation: drift linear infinite;
  will-change: transform;
}
body.in-play .bg-shapes { opacity: .35; transition: opacity .4s; }
@keyframes drift {
  0%   { transform: translate3d(0, 12vh, 0) rotate(0deg); }
  100% { transform: translate3d(0, -112vh, 0) rotate(340deg); }
}
@media (prefers-reduced-motion: reduce) { .bg-shapes { display: none; } }

.grain {
  position: fixed; inset: 0; pointer-events: none; opacity: .05; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.6'/></svg>");
}

.chrome {
  position: relative; z-index: 3; display: flex; align-items: center; gap: 20px;
  max-width: 1160px; margin: 0 auto; padding: 20px 28px; flex-wrap: wrap;
}
.logo-btn {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  background: none; border: none; color: var(--ink); padding: 0;
}
.logo-btn:hover { animation: wiggle .5s ease; }
.logo-mark { transform: rotate(-6deg); }
.logo-word { font-family: 'Instrument Serif', serif; font-size: 25px; letter-spacing: .06em; }
.logo-word em { color: var(--ac); }
.logo-tld { color: var(--mut); font-size: 15px; letter-spacing: 0; margin-left: 1px; }
.logo-spark {
  color: var(--gold); font-size: 14px; display: inline-block;
  transform: rotate(12deg) translateY(-8px); margin-left: 3px;
}
.chrome-nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav-btn {
  background: none; border: none; color: var(--mut); font-family: inherit; font-size: 14px;
  letter-spacing: .04em; padding: 8px 14px; border-radius: 10px; cursor: pointer;
}
.nav-btn:hover { color: var(--ink); background: var(--acSoft); }
.sound-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--mut); cursor: pointer;
  display: flex; align-items: center; justify-content: center; margin-left: 8px;
}
.sound-btn:hover { color: var(--ink); border-color: var(--ac); }
.avatar-btn {
  width: 38px; height: 38px; border-radius: 50%; margin-left: 8px; flex: none;
  border: 1.5px solid var(--line); background: var(--acSoft); color: var(--acText);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px;
  transition: border-color .15s, transform .1s;
}
.avatar-btn:hover { border-color: var(--ac); transform: translateY(-1px); }
.avatar-btn.active { border-color: var(--ac); }
.avatar-initial { line-height: 1; text-transform: uppercase; }

/* ---------- layout ---------- */
.screen { position: relative; z-index: 2; animation: fadeUp .45s ease; }
.page-wide { max-width: 1160px; margin: 0 auto; padding: 14px 28px 60px; }
.page-narrow { max-width: 860px; margin: 0 auto; padding: 4px 24px 60px; }
.page-results { max-width: 640px; margin: 0 auto; padding: 7vh 24px 60px; text-align: center; }
.page-learn { max-width: 680px; margin: 0 auto; padding: 8px 28px 70px; line-height: 1.65; }
.page-title { font-family: 'Instrument Serif', serif; font-size: 38px; font-weight: 400; margin: 0 0 6px; }
.page-note { color: var(--mut); font-size: 14px; margin: 0 0 26px; max-width: 560px; }

/* ---------- buttons ---------- */
.btn-primary {
  background: var(--ac); border: none; color: var(--onAc); font-family: inherit;
  font-weight: 700; font-size: 15px; padding: 13px 30px; border-radius: 12px;
  cursor: pointer; box-shadow: 0 6px 24px var(--acSoft); transition: transform .1s;
}
.btn-primary:hover { transform: translateY(-2px) rotate(-1.2deg); }
.btn-primary:active { transform: scale(.97); }
.btn-outline {
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  font-family: inherit; font-size: 15px; padding: 13px 24px; border-radius: 12px; cursor: pointer;
}
.btn-outline:hover { border-color: var(--ac); }
.btn-ghost-sm {
  background: none; border: none; color: var(--mut); font-family: inherit;
  font-size: 13px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.btn-ghost-sm:hover { color: var(--ink); }
.btn-textlink {
  margin-left: auto; background: none; border: none; color: var(--mut); font-family: inherit;
  font-size: 12px; cursor: pointer; text-decoration: underline; opacity: .7;
}
.btn-textlink:hover { opacity: 1; }
.btn-tool {
  background: var(--panel); border: 1px solid var(--line); color: var(--mut);
  font-family: inherit; font-size: 13px; padding: 7px 16px; border-radius: 10px; cursor: pointer;
}
.btn-tool:hover { color: var(--ink); }
.btn-tool.hint:hover { border-color: var(--gold); color: var(--gold); }
.btn-tool.danger:hover { color: var(--bad); border-color: var(--bad); }
.btn-row { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.btn-row.center { justify-content: center; margin-top: 8px; }

/* ---------- labels & pills ---------- */
.label-upper { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--mut); font-weight: 600; }
.label-upper.sm { font-size: 11px; letter-spacing: .12em; }
.label-upper.accent { color: var(--acText); }
.gold-pill {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--gold);
  color: var(--gold); border-radius: 999px; padding: 3px 12px; font-size: 12.5px; font-weight: 600;
}
.gold-pill.combo { font-size: 13px; font-weight: 700; animation: popIn .3s ease; transform: rotate(-2deg); }

/* ---------- home ---------- */
.home-hero { text-align: center; margin: 4px 0 28px; }
.home-welcome {
  font-size: 15px; color: var(--acText); margin-bottom: 6px;
  letter-spacing: .02em; animation: fadeUp .5s ease;
}
.home-welcome b { color: var(--ink); font-weight: 600; }
.home-headline { font-family: 'Instrument Serif', serif; font-size: 36px; letter-spacing: -.01em; text-wrap: pretty; }
.dot-ac { color: var(--ac); }
.squiggle { margin-top: 4px; }
.squiggle.left { display: block; margin: 0 0 10px; }
.squiggle.left.tight { margin: -8px 0 14px; }
.home-quip { font-size: 14.5px; color: var(--mut); margin-top: 5px; font-style: italic; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 24px; align-items: stretch; }
.home-col { display: flex; flex-direction: column; gap: 24px; }
.panel-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 28px; box-shadow: var(--shadow);
}
.hero-card { padding: 32px 36px 26px; position: relative; overflow: hidden; }
.hero-rank-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rank-pill {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut);
}
.rank-dot { width: 8px; height: 8px; border-radius: 50%; background: #9a9aad; box-shadow: 0 0 10px #9a9aad; }
.pct-line { font-size: 13px; color: var(--mut); }
.hero-iq-row { display: flex; align-items: baseline; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.iq-big { font-family: 'Instrument Serif', serif; font-size: 108px; line-height: 1; letter-spacing: -.01em; }
.iq-range { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--acText); margin-top: 6px; }
.rank-next { font-size: 12.5px; color: var(--mut); margin-top: 4px; }
.bell-svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.hero-caption { font-size: 12px; color: var(--mut); margin: 14px 0 0; line-height: 1.5; }

.daily-card { background: linear-gradient(135deg, var(--acSoft), transparent 55%), var(--panel); }
.card-label-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-label-row .stars-total { margin-left: auto; }
.daily-date { font-size: 14px; color: var(--mut); margin-top: 10px; }
.daily-done { display: flex; align-items: baseline; gap: 14px; margin-top: 14px; }
.daily-score { font-family: 'IBM Plex Mono', monospace; font-size: 30px; font-weight: 600; }
.daily-sub { font-size: 13px; color: var(--mut); }
.daily-copy { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 12px 0 16px; }

.stars-total { font-size: 13px; color: var(--gold); font-family: 'IBM Plex Mono', monospace; }
.campaign-level { font-family: 'Instrument Serif', serif; font-size: 40px; margin-top: 8px; }
.journey-bar {
  height: 8px; border-radius: 5px; background: var(--panel2);
  border: 1px solid var(--line); overflow: hidden; margin-top: 12px;
}
.journey-fill { height: 100%; background: var(--ac); width: 0; transition: width .6s ease; border-radius: 5px; }
.journey-text { font-size: 12.5px; color: var(--mut); margin-top: 7px; }

/* ---------- home social strip ---------- */
.social-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px; margin-top: 24px;
}
.social-card { display: flex; flex-direction: column; }
.online-count {
  margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  color: var(--good); display: inline-flex; align-items: center; gap: 6px;
}
.online-count::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 8px var(--good);
}
.online-count.none { color: var(--mut); }
.online-count.none::before { background: var(--mut); box-shadow: none; }

.mini-list { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 10px; flex: 1; }
.mini-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 11px;
}
.mini-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none; position: relative;
  background: var(--acSoft); color: var(--acText);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
}
.mini-av .dot-online {
  position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--good); border: 2px solid var(--panel2);
}
.mini-name { flex: 1; font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-sub { display: block; font-size: 10.5px; font-weight: 400; color: var(--mut); letter-spacing: .01em; }
.mini-rank {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--mut);
  min-width: 22px; text-align: right;
}
.mini-rank.top { color: var(--gold); font-weight: 700; }
.mini-rating { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--acText); }
.mini-empty { font-size: 12.5px; color: var(--mut); line-height: 1.5; padding: 10px 2px; }
.mini-you { border-color: var(--ac); background: var(--acSoft); }
.social-card .btn-textlink { margin-left: 0; text-align: left; align-self: flex-start; }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 24px; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; }
.stat-card.clickable { cursor: pointer; transition: border-color .15s; }
.stat-card.clickable:hover { border-color: var(--gold); }
.stat-num { font-family: 'IBM Plex Mono', monospace; font-size: 26px; font-weight: 600; margin-top: 4px; }
.stat-num.gold { color: var(--gold); }
.stat-sub { font-size: 11.5px; color: var(--mut); margin-top: 5px; }
.xp-bar { height: 5px; border-radius: 3px; background: var(--panel2); overflow: hidden; margin-top: 8px; }
.xp-fill { height: 100%; background: var(--gold); width: 0; border-radius: 3px; transition: width .5s; }

.themes-row { margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.themes-list { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-pill {
  display: flex; align-items: center; gap: 8px; background: var(--panel);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 16px;
  cursor: pointer; color: var(--ink); font-family: inherit; font-size: 13px; transition: border-color .15s;
}
.theme-pill:hover { border-color: var(--ac); }
.theme-pill.active { border-color: var(--ac); }
.theme-pill.locked { opacity: .45; }
.theme-dot { width: 14px; height: 14px; border-radius: 50%; }

.home-footer { margin-top: 40px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.disclaimer { font-size: 11.5px; color: var(--mut); opacity: .75; }

/* ---------- play ---------- */
.play-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.play-title { font-weight: 600; letter-spacing: .02em; }
.play-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hearts { display: flex; gap: 7px; }
.play-timer { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--mut); min-width: 44px; text-align: right; }

.progress-dots { display: flex; gap: 9px; justify-content: center; margin-bottom: 24px; }
.progress-dots .dot { width: 11px; height: 11px; border-radius: 3px; transform: rotate(45deg); background: var(--panel); border: 2px solid var(--line); transition: all .3s; }
.progress-dots .dot.current { border-color: var(--ac); }
.progress-dots .dot.good { background: var(--good); border-color: var(--good); }
.progress-dots .dot.bad { background: var(--bad); border-color: var(--bad); }

.puzzle-instruction { text-align: center; font-family: 'Instrument Serif', serif; font-size: 23px; margin: 0 0 22px; text-wrap: pretty; }
/* The game's name above the instruction: the joke first, then what it really
   is, quieter, so nobody has to guess what they are being asked to do. */
.puzzle-game { display: flex; align-items: baseline; gap: 9px; justify-content: center; margin-bottom: 8px; }
.puzzle-game-name {
  font-family: 'Instrument Serif', serif; font-size: 21px; color: var(--gold); letter-spacing: .01em;
}
.puzzle-game-real {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut);
}

.puzzle-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; min-height: 20px; }

.puzzle-toolbar { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.hint-box {
  max-width: 460px; margin: 16px auto 0; padding: 13px 18px;
  background: color-mix(in srgb, var(--gold) 10%, var(--panel));
  border: 1px solid var(--gold); border-radius: 12px;
  font-size: 14px; line-height: 1.55; animation: fadeUp .25s ease;
}
.explain-panel {
  max-width: 540px; margin: 24px auto 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px 28px; text-align: center; box-shadow: var(--shadow);
  animation: fadeUp .3s ease;
}
.explain-verdict { font-family: 'Instrument Serif', serif; font-size: 25px; color: var(--bad); }
.explain-text { font-size: 14.5px; line-height: 1.6; margin: 10px 0 6px; }
.explain-lesson { font-size: 13px; line-height: 1.55; color: var(--mut); font-style: italic; margin: 0 0 18px; }

.xp-pop {
  position: fixed; z-index: 1000; pointer-events: none;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 17px;
  color: var(--ac); text-shadow: 0 0 18px var(--acSoft);
  animation: floatUp 1.15s ease forwards;
}

/* ---------- puzzle skins (markup built by the generators) ---------- */
.matrix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(380px, 88vw); }
.matrix-cell {
  aspect-ratio: 1; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
}
.matrix-cell svg { width: 84%; height: 84%; color: var(--ink); }
.matrix-cell.missing { border: 2px dashed var(--ac); background: var(--acSoft); }
.matrix-cell.missing::after { content: "?"; font-family: 'Instrument Serif', serif; font-size: 40px; color: var(--ac); }

.seq-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.seq-num {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px;
  min-width: 64px; padding: 18px 14px; text-align: center; font-size: 26px; font-weight: 600;
  font-family: 'IBM Plex Mono', monospace; color: var(--ink);
}
.seq-num.missing { border: 2px dashed var(--ac); color: var(--ac); background: var(--acSoft); }

.options-grid {
  display: grid; gap: 12px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(88px, 116px));
  max-width: 560px; margin: 0 auto; width: 100%;
}
.option {
  aspect-ratio: 1; background: var(--panel2); border: 1.5px solid var(--line); border-radius: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: var(--ink);
  padding: 0; transition: transform .12s ease, border-color .15s, box-shadow .2s;
}
.option:hover { border-color: var(--ac); transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 8px 24px var(--acSoft); }
.option:active { transform: scale(.96); }
.option svg { width: 80%; height: 80%; color: var(--ink); pointer-events: none; }
.option.correct { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--panel2)); animation: pulse .4s ease; }
.option.wrong { border-color: var(--bad); animation: shake .35s ease; }
.option.reveal { border-color: var(--good); box-shadow: inset 0 0 0 1px var(--good); }
.option:disabled { cursor: default; }

.maze-svg { width: min(430px, 92vw); touch-action: none; color: var(--ink); }
/* A finger that strays a few pixels off the figure must not start a scroll,
   so the whole stage opts out of panning for the draggable puzzle types. */
.puzzle-area:has(.maze-svg), .puzzle-area:has(.fill-svg) { touch-action: none; }
/* Belt and braces for the drag itself: nothing scrolls while a path is drawn. */
body.drag-lock { overflow: hidden; touch-action: none; overscroll-behavior: none; }
.maze-walls line { stroke: currentColor; }
.maze-start { fill: var(--ac); }
.maze-exit { fill: var(--good); }
.maze-path { stroke: var(--ac); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.maze-head { fill: var(--ac); }
.maze-hint-path { stroke: var(--gold); stroke-width: 5; stroke-dasharray: 6 8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

.fill-svg { width: min(360px, 88vw); touch-action: none; }
.fill-cell { fill: var(--panel2); stroke: var(--line); stroke-width: 1.5; transition: fill .15s; }
.fill-cell.covered { fill: var(--acSoft); stroke: var(--ac); }
.fill-cell.hinted { fill: color-mix(in srgb, var(--gold) 30%, var(--panel2)); }
.fill-line { stroke: var(--ac); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.fill-line.ghost { stroke: var(--gold); opacity: .6; stroke-dasharray: 8 8; }
.fill-start { fill: var(--bg); stroke: var(--ac); stroke-width: 2; }
.fill-head { fill: var(--ac); }
.fill-progress { text-align: center; font-size: 13px; color: var(--mut); margin-bottom: 8px; font-family: 'IBM Plex Mono', monospace; }

/* ---------- results ---------- */
.res-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--mut); }
.res-verdict { font-family: 'Instrument Serif', serif; font-size: 56px; font-weight: 400; margin: 10px 0 6px; letter-spacing: -.01em; }
.res-stars { display: flex; gap: 12px; justify-content: center; margin: 6px 0 14px; min-height: 52px; }
.res-stars .star { font-size: 42px; color: var(--line); }
.res-stars .star.lit { color: var(--gold); }
.res-score { font-family: 'IBM Plex Mono', monospace; font-size: 38px; font-weight: 600; margin-bottom: 6px; }
.res-quip { font-size: 13.5px; color: var(--mut); font-style: italic; }
.tally-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 28px; margin: 20px auto; max-width: 430px; text-align: left;
  display: flex; flex-direction: column; gap: 13px; box-shadow: var(--shadow);
}
.tally-row { display: flex; justify-content: space-between; align-items: baseline; }
.tally-label { font-size: 13px; color: var(--mut); }
.tally-xp { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--acText); }
.tally-mono { font-family: 'IBM Plex Mono', monospace; }
.tally-standing { font-size: 13.5px; }
.tally-gold { color: var(--gold); font-weight: 600; font-size: 14px; }
.delta-up { color: var(--good); font-weight: 600; }
.delta-down { color: var(--bad); font-weight: 600; }

/* ---------- map ---------- */
.map-band { margin-bottom: 28px; }
.map-band-title { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--mut); margin-bottom: 12px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px; }
.map-node {
  aspect-ratio: 1; border-radius: 14px; border: 1.5px solid var(--line); background: var(--panel);
  color: var(--ink); cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: transform .1s, border-color .15s;
}
.map-node:hover { transform: translateY(-3px); border-color: var(--ac); }
.map-node .n { font-weight: 600; font-size: 16px; font-family: 'IBM Plex Mono', monospace; }
.map-node .s { font-size: 10px; letter-spacing: 2px; color: var(--gold); min-height: 12px; }
.map-node.done { border-color: var(--good); }
.map-node.frontier { border-color: var(--ac); background: var(--acSoft); }
.map-node.beyond { opacity: .6; }

/* ---------- awards ---------- */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ach-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; display: flex; gap: 14px; align-items: center;
}
.ach-card.locked { opacity: .55; }
.ach-badge {
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--mut);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Instrument Serif', serif; font-size: 22px; flex: none; background: transparent;
}
.ach-card.unlocked .ach-badge { border-color: var(--gold); color: var(--gold); background: var(--acSoft); }
.ach-name { font-weight: 600; font-size: 14.5px; }
.ach-desc { font-size: 12.5px; color: var(--mut); margin-top: 3px; line-height: 1.45; }

/* ---------- about ---------- */
.page-learn h3 { font-family: 'Instrument Serif', serif; font-size: 24px; font-weight: 400; margin: 26px 0 8px; }
.page-learn p { font-size: 15px; margin: 0 0 12px; }
.page-learn em { color: var(--mut); }
.page-learn ul { margin: 0 0 12px 22px; font-size: 14.5px; display: flex; flex-direction: column; gap: 6px; padding: 0; }

/* ---------- sign-up gate ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 80; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fadeUp .25s ease;
}
.signup-card {
  position: relative;
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  padding: 30px 32px 26px; max-width: 430px; width: 100%; box-shadow: var(--shadow);
  max-height: 94vh; overflow-y: auto;
}
.signup-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--mut); font-size: 13px; cursor: pointer; line-height: 1;
}
.signup-close:hover { color: var(--ink); border-color: var(--ac); }

.signup-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; padding-right: 26px; }
.signup-mark {
  font-size: 22px; flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: var(--acSoft); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.signup-title { font-family: 'Instrument Serif', serif; font-size: 27px; font-weight: 400; margin: 0 0 4px; line-height: 1.15; }
.signup-copy { font-size: 13.5px; color: var(--mut); line-height: 1.5; margin: 0; }

/* segmented control */
.mode-toggle {
  display: flex; gap: 4px; margin-bottom: 22px; padding: 4px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
}
.mode-btn {
  flex: 1; background: transparent; border: none; color: var(--mut);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  padding: 9px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s;
}
.mode-btn:hover { color: var(--ink); }
.mode-btn.active { background: var(--ac); color: var(--onAc); font-weight: 600; }

/* fields */
.form-fields { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px; font-weight: 600; color: var(--mut);
  text-transform: uppercase; letter-spacing: .08em;
}
.field input {
  width: 100%; background: var(--panel2); border: 1.5px solid var(--line);
  border-radius: 12px; color: var(--ink); font-family: inherit; font-size: 15px;
  padding: 13px 14px; transition: border-color .15s, background .15s;
}
.field input::placeholder { color: var(--mut); opacity: .6; }
.field input:focus {
  outline: none; border-color: var(--ac);
  background: color-mix(in srgb, var(--ac) 6%, var(--panel2));
}
.field-hint { font-size: 11.5px; color: var(--mut); opacity: .85; line-height: 1.4; }

/* Chrome forces a white background on autofilled inputs, which shatters a dark
   theme. There is no way to set background-color directly on an autofilled
   field, so paint it with a very long inset shadow instead. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.code-field:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--panel2) inset;
  box-shadow: 0 0 0 1000px var(--panel2) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap input { padding-right: 62px; }
.peek-btn {
  position: absolute; right: 8px; background: transparent; border: none;
  color: var(--mut); font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.peek-btn:hover { color: var(--acText); background: var(--acSoft); }

.form-msg { font-size: 12.5px; line-height: 1.45; min-height: 0; }
.form-msg:not(:empty) { margin-top: 14px; padding: 10px 12px; border-radius: 10px; }
.form-msg.err:not(:empty) { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); }
.form-msg.ok:not(:empty) { color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); }

.signup-submit { width: 100%; margin-top: 20px; padding: 14px; font-size: 15.5px; }
.signup-alt { display: flex; flex-direction: column; gap: 2px; align-items: center; margin-top: 14px; }
.link-btn {
  background: none; border: none; color: var(--mut); font-family: inherit;
  font-size: 13px; padding: 6px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }
.signup-legal { font-size: 11px; color: var(--mut); opacity: .7; line-height: 1.55; margin-top: 18px; text-align: center; }
.signup-legal a { color: var(--acText); text-decoration: underline; }

/* ---------- tabs, segments, player lists ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tab-btn {
  background: var(--panel); border: 1px solid var(--line); color: var(--mut);
  font-family: inherit; font-size: 13.5px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab-btn:hover { color: var(--ink); border-color: var(--ac); }
.tab-btn.active { background: var(--acSoft); border-color: var(--ac); color: var(--acText); font-weight: 600; }
.badge-count {
  background: var(--bad); color: #fff; border-radius: 999px; font-size: 10.5px;
  font-weight: 700; padding: 1px 6px; min-width: 17px; text-align: center; line-height: 1.5;
}
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg-btn {
  background: transparent; border: none; color: var(--mut); font-family: inherit;
  font-size: 12.5px; padding: 8px 14px; cursor: pointer;
}
.seg-btn.active { background: var(--acSoft); color: var(--acText); font-weight: 600; }
.board-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.player-list { display: flex; flex-direction: column; gap: 8px; }
.player-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.player-rank {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--mut);
  min-width: 30px; text-align: right;
}
.player-rank.top { color: var(--gold); font-weight: 700; }
.player-rank.unranked, .mini-rank.unranked { opacity: .45; }
/* A quiet accent edge so the players who are actually around read first. */
.player-row.is-online { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.list-head { margin: 2px 2px 4px; }
.list-note { font-size: 12px; color: var(--mut); line-height: 1.5; padding: 4px 2px; }
.tag-unverified {
  margin-left: 7px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 6px; vertical-align: 1px;
  color: var(--mut); border: 1px solid var(--line); background: var(--panel2);
}
.player-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--acSoft); color: var(--acText); display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
  position: relative;
}
.player-av .dot-online {
  position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--good); border: 2px solid var(--panel);
}
.player-main { flex: 1; min-width: 0; }
.player-name { font-weight: 600; font-size: 14.5px; }
.player-sub { font-size: 12px; color: var(--mut); margin-top: 2px; }
.player-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-btn {
  background: transparent; border: 1px solid var(--line); color: var(--mut);
  font-family: inherit; font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.mini-btn:hover { border-color: var(--ac); color: var(--acText); }
.mini-btn.primary { background: var(--ac); border-color: var(--ac); color: var(--onAc); font-weight: 600; }
.mini-btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.mini-btn:disabled { opacity: .5; cursor: default; }
.list-empty { padding: 18px; text-align: center; color: var(--mut); font-size: 13.5px; }
.board-me {
  background: var(--acSoft); border: 1px solid var(--ac); border-radius: 14px;
  padding: 12px 16px; margin-bottom: 12px; font-size: 13.5px;
}
.request-group { margin-bottom: 18px; }
.code-ok { font-size: 12.5px; color: var(--good); min-height: 16px; }

.mode-toggle { display: flex; gap: 6px; margin: 14px 0 4px; }
.mode-btn {
  flex: 1; background: var(--panel2); border: 1px solid var(--line); color: var(--mut);
  font-family: inherit; font-size: 13.5px; padding: 10px; border-radius: 10px; cursor: pointer;
}
.mode-btn.active { background: var(--acSoft); border-color: var(--ac); color: var(--acText); font-weight: 600; }
.signup-card input[type="password"], .signup-card input[type="email"], .signup-card input[type="text"] {
  width: 100%;
}

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--panel); border: 1px solid var(--gold); border-radius: 14px;
  padding: 12px 18px; box-shadow: var(--shadow); animation: slideIn .3s ease;
  display: flex; gap: 12px; align-items: center;
}
.toast .t-star { color: var(--gold); font-size: 20px; }
.toast .t-kicker { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--mut); }
.toast .t-name { font-weight: 600; font-size: 14px; }

/* ---------- streak banner ---------- */
@keyframes flameSway { 0%,100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.08); } }
@keyframes riskPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }

.streak-banner {
  display: flex; align-items: center; gap: 16px; width: 100%;
  margin: 0 0 20px; padding: 16px 22px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  color: var(--ink); font-family: inherit; text-align: left;
  box-shadow: var(--shadow); transition: border-color .2s, transform .1s;
}
.streak-banner:hover { transform: translateY(-2px); }
.streak-flame { font-size: 34px; flex: none; filter: grayscale(1) opacity(.45); }
.streak-text { display: flex; align-items: baseline; gap: 9px; }
.streak-big { font-family: 'Instrument Serif', serif; font-size: 40px; line-height: 1; }
.streak-sub { font-size: 13.5px; color: var(--mut); }
.streak-cta { margin-left: auto; font-size: 13px; text-align: right; line-height: 1.45; }

/* alive and already played today */
.streak-banner.safe { border-color: var(--good); }
.streak-banner.safe .streak-flame { filter: none; animation: flameSway 3s ease-in-out infinite; }
.streak-banner.safe .streak-cta { color: var(--good); }

/* alive but today's daily is still unplayed — this is the hook */
.streak-banner.risk { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--panel)); animation: riskPulse 2.6s ease-in-out infinite; }
.streak-banner.risk .streak-flame { filter: none; animation: flameSway 1.2s ease-in-out infinite; }
.streak-banner.risk .streak-cta { color: var(--gold); font-weight: 600; }

/* no streak yet, or it lapsed */
.streak-banner.cold .streak-big { color: var(--mut); }
.streak-banner.cold .streak-cta { color: var(--mut); }

/* ---------- dual percentile + placement CTA ---------- */
.dual-pct {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pct-cell { text-align: left; }
.pct-val { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600; color: var(--acText); }
.pct-lbl { font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.placement-cta {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  width: 100%; margin-top: 14px; padding: 13px 16px; cursor: pointer;
  background: var(--acSoft); border: 1px dashed var(--ac); border-radius: 14px;
  color: var(--ink); font-family: inherit; text-align: left; transition: transform .1s;
}
.placement-cta:hover { transform: translateY(-2px); }
.placement-cta strong { font-size: 14.5px; }
.placement-cta span { font-size: 12.5px; color: var(--mut); }

/* ---------- duel ---------- */
.duel-pill {
  margin-left: auto; border: 1px solid var(--ac); color: var(--acText);
  border-radius: 999px; padding: 3px 12px; font-size: 12.5px; font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
}
.duel-home-card { background: linear-gradient(135deg, transparent 45%, var(--acSoft)), var(--panel); }

/* One consistent rhythm down the arena: every card is separated by the same
   gap instead of each one setting its own margin. */
#screen-duel > .panel-card,
#screen-duel > .duel-grid,
#screen-duel > .duel-history-wrap { margin-bottom: 16px; }
#screen-duel > .duel-grid:last-child,
#screen-duel > .panel-card:last-child { margin-bottom: 0; }

.duel-hero-main { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.duel-big { font-family: 'Instrument Serif', serif; font-size: 62px; line-height: 1.05; }
.duel-rank { font-size: 13px; color: var(--mut); }
.duel-record { margin-left: auto; display: flex; gap: 18px; text-align: center; }
.duel-record div { display: flex; flex-direction: column; }
.duel-record span { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 600; }
.duel-record small { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .1em; }
/* Separated from the hero above it, so the name reads as its own line rather
   than crowding the rating block. */
.duel-name-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.duel-name-row label { font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: .12em; }
.duel-name-value { font-size: 16px; font-weight: 600; }
/* Its own class: .btn-textlink.plain sets margin-left:0 and, being declared
   later, was beating the margin-left:auto that pushes this to the right. */
.row-link {
  margin-left: auto; background: none; border: none; color: var(--mut);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 4px 0;
}
.row-link:hover { color: var(--acText); }

/* ---------- waitlist box inside the sign-up gate ---------- */
.waitlist-box {
  margin-top: 20px; padding: 15px 17px; border-radius: 14px;
  background: var(--panel2); border: 1px dashed var(--line);
}
.waitlist-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.waitlist-title { font-size: 14px; font-weight: 600; }
.waitlist-head .bot-chip { margin-left: auto; }
.waitlist-copy { font-size: 12.5px; color: var(--mut); line-height: 1.55; margin-bottom: 11px; }
.waitlist-box input { width: 100%; }

/* ---------- profile ---------- */
.name-view { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profile-name-display {
  font-family: 'Instrument Serif', serif; font-size: 28px; line-height: 1.2;
}
.name-view .btn-outline { margin-left: auto; }
.danger-btn { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.danger-btn:hover { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
#screen-profile .panel-card { margin-bottom: 16px; }
#screen-profile a { color: var(--acText); text-decoration: underline; }

/* ---------- admin / stats ---------- */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--mut); font-weight: 600; padding: 0 10px 8px 0; border-bottom: 1px solid var(--line);
}
.admin-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table .num { font-family: 'IBM Plex Mono', monospace; text-align: right; white-space: nowrap; }
.admin-table th.num { text-align: right; }
.minibar { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; min-width: 60px; }
.minibar span { display: block; height: 100%; background: var(--ac); border-radius: 3px; }
.admin-todo { margin: 0 0 0 20px; font-size: 13.5px; line-height: 1.7; color: var(--mut); }
.admin-todo strong { color: var(--ink); }
code { font-family: 'IBM Plex Mono', monospace; font-size: .92em; background: var(--panel2); padding: 1px 5px; border-radius: 4px; }

/* ---------- legal pages ---------- */
.legal-page { max-width: 720px; }
.legal-meta { font-size: 12.5px; color: var(--mut); margin: -6px 0 20px; }
.legal-summary {
  background: var(--acSoft); border-left: 3px solid var(--ac);
  border-radius: 0 12px 12px 0; padding: 15px 18px; margin-bottom: 24px;
  font-size: 14.5px; line-height: 1.6;
}
.legal-page h3 { margin-top: 30px; }
.legal-page a { color: var(--acText); text-decoration: underline; }
.legal-note {
  margin-top: 30px; padding: 14px 16px; border: 1px dashed var(--line);
  border-radius: 12px; font-size: 13px; color: var(--mut); line-height: 1.6;
}
.legal-back { margin-top: 26px; font-size: 14px; }

.duel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.duel-block { display: flex; flex-direction: column; gap: 10px; }
.duel-copy { font-size: 13.5px; line-height: 1.55; color: var(--mut); margin: 0; }
.field-label { font-size: 12px; color: var(--mut); margin-top: 4px; }
.range-read {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--acText); font-family: 'IBM Plex Mono', monospace;
  margin: -2px 0 6px;
}
/* The difficulty slider was flush against the button under it. */
.duel-block input[type="range"] { margin-bottom: 2px; }
.duel-block .btn-primary { margin-top: 4px; }

input[type="text"], .code-field, .code-area {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  padding: 11px 13px; width: 100%; resize: vertical;
}
input[type="text"]:focus, .code-field:focus, .code-area:focus { outline: none; border-color: var(--ac); }
.duel-name-row input { flex: 1; min-width: 160px; font-family: inherit; }
input[type="range"] { width: 100%; accent-color: var(--ac); height: 28px; }
.code-row { display: flex; gap: 8px; flex-wrap: wrap; }
.code-row .code-field { flex: 1; min-width: 180px; }
.code-err { font-size: 12.5px; color: var(--bad); min-height: 16px; }

.duel-history-wrap { margin-top: 22px; }
.duel-history { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.duel-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px;
}
.duel-row .badge {
  width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 12px; flex: none;
}
.duel-row.win .badge { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
.duel-row.loss .badge { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }
.duel-row.draw .badge { background: var(--acSoft); color: var(--acText); }
.duel-row .score { margin-left: auto; font-family: 'IBM Plex Mono', monospace; color: var(--mut); }
.duel-row .delta { font-family: 'IBM Plex Mono', monospace; font-weight: 600; min-width: 42px; text-align: right; }

.ghost-bar {
  text-align: center; font-size: 13px; color: var(--mut); margin: -8px 0 16px;
  font-family: 'IBM Plex Mono', monospace;
}
.ghost-bar b { color: var(--acText); font-weight: 600; }

/* ---------- quick match ---------- */
.quick-card { margin-bottom: 16px; background: linear-gradient(135deg, var(--acSoft), transparent 60%), var(--panel); }
.quick-card .btn-primary, .quick-card .btn-outline { margin-right: 8px; margin-top: 4px; }
.bot-chip {
  margin-left: auto; border: 1px solid var(--line); color: var(--mut);
  border-radius: 999px; padding: 2px 10px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
}
.bot-chip.sm { margin-left: 4px; font-size: 9.5px; padding: 1px 7px; vertical-align: middle; }
.queue-note { font-size: 12px; color: var(--mut); margin-top: 10px; line-height: 1.5; }
button[disabled] { opacity: .45; cursor: not-allowed; }
button[disabled]:hover { transform: none; border-color: var(--line); }

.match-found { animation: popIn .3s ease; }
.match-vs { display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; }
.match-side { flex: 1; text-align: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; }
.match-who { font-size: 13.5px; font-weight: 600; }
.match-rating { font-family: 'IBM Plex Mono', monospace; font-size: 24px; color: var(--acText); margin-top: 3px; }
.match-bolt { font-size: 22px; color: var(--gold); flex: none; }
.match-meta { font-size: 12.5px; color: var(--mut); text-align: center; margin-bottom: 4px; }

.race-bar {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin: -6px 0 16px; padding: 9px 14px; font-size: 13px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  width: fit-content; margin-left: auto; margin-right: auto;
}
.race-name { color: var(--mut); }
.race-dots { display: flex; gap: 5px; }
.race-dots i {
  width: 9px; height: 9px; border-radius: 50%; display: block;
  background: var(--panel2); border: 1.5px solid var(--line); transition: all .3s;
}
.race-dots i.good { background: var(--bad); border-color: var(--bad); }   /* their point = your problem */
.race-dots i.miss { background: transparent; border-color: var(--good); }
.race-score { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }

.duel-result {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 22px; margin: 0 auto 20px; max-width: 430px; box-shadow: var(--shadow);
}
.duel-vs { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.duel-vs .side { text-align: center; flex: 1; }
.duel-vs .who { font-size: 12.5px; color: var(--mut); margin-bottom: 4px; }
.duel-vs .num { font-family: 'IBM Plex Mono', monospace; font-size: 30px; font-weight: 600; }
.duel-vs .mid { font-family: 'Instrument Serif', serif; font-size: 20px; color: var(--mut); }
.duel-vs .side.won .num { color: var(--good); }
.duel-note { font-size: 12.5px; color: var(--mut); margin-top: 10px; text-align: center; }

/* ---------- standings ---------- */
.standings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-bottom: 16px; }
.stand-big { font-family: 'Instrument Serif', serif; font-size: 46px; line-height: 1.1; margin: 4px 0 6px; }
.stand-sub { font-size: 12.5px; color: var(--mut); line-height: 1.5; }
.daily-history { margin-bottom: 16px; }
/* max-width matters: with a single day's history an uncapped flex:1 bar spans
   the whole card and reads as an empty box rather than as one result. */
.daily-bars { display: flex; align-items: flex-end; justify-content: flex-start; gap: 6px; height: 90px; margin-top: 14px; }
.daily-bars .bar { flex: 1 1 0; max-width: 34px; background: var(--acSoft); border: 1px solid var(--ac); border-radius: 5px 5px 0 0; min-height: 4px; position: relative; }
.daily-bars .bar::after {
  content: attr(data-score); position: absolute; left: 0; right: 0; top: -15px;
  text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--mut);
}
.daily-bars .bar[data-score="5"] { background: var(--ac); }
/* ---------- Touch Grass (chill zone) ---------- */
.chill-list { display: flex; flex-direction: column; gap: 12px; }
.chill-card {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px; cursor: pointer; color: var(--ink);
  transition: border-color .15s, transform .12s;
}
.chill-card:hover { border-color: var(--ac); }
.chill-card:active { transform: scale(.99); }
/* Drawn icons sized to whatever text they sit in, so "<icon> 1000" lines up on
   the baseline without per-site nudging. */
.ico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex: none; }
.sheet-icon .ico, .streak-flame .ico, .signup-mark .ico,
.match-bolt .ico, .t-star .ico { width: 100%; height: 100%; vertical-align: 0; }
.streak-flame { width: 26px; height: 26px; color: var(--gold); }
.sheet-icon { width: 22px; height: 22px; color: var(--acText); }
.signup-mark { width: 42px; height: 42px; margin: 0 auto 10px; color: var(--ac); display: block; }
.match-bolt { width: 24px; height: 24px; color: var(--acText); }
.t-star { width: 20px; height: 20px; color: var(--acText); flex: none; }

/* Drawn icons, not emoji: emoji render differently on every platform and carry
   someone else's art direction. currentColor picks up the accent so they
   retheme with the rest of the game. */
.chill-icon {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--acSoft); color: var(--acText);
  transition: color .15s, background .15s;
}
.chill-icon svg { width: 25px; height: 25px; display: block; }
.chill-card:hover .chill-icon { background: color-mix(in srgb, var(--ac) 26%, transparent); }
.chill-body { flex: 1; min-width: 0; }
.chill-name { display: block; font-weight: 600; font-size: 16px; }
.chill-real {
  margin-left: 9px; font-size: 10px; font-weight: 400; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut);
}
.chill-blurb { display: block; font-size: 13px; color: var(--mut); margin-top: 3px; line-height: 1.45; }
.chill-best { flex: none; text-align: right; }
.chill-best b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 20px; color: var(--gold); }
.chill-best small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }

.chill-howto { font-size: 13.5px; color: var(--mut); line-height: 1.55; margin: 0 0 14px; text-align: center; }
.chill-score { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 600; color: var(--gold); }
.chill-score-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.chill-stats { display: flex; gap: 20px; justify-content: center; margin-bottom: 14px; min-height: 34px; }
.chill-stat { text-align: center; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.chill-stat b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.chill-stage { display: flex; flex-direction: column; align-items: center; }

.chill-over { text-align: center; margin-top: 8px; }
.chill-final { font-family: 'IBM Plex Mono', monospace; font-size: 46px; font-weight: 600; color: var(--gold); line-height: 1.1; }
.chill-final-note { font-size: 13.5px; color: var(--acText); margin-bottom: 12px; }
.chill-lines { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13.5px; color: var(--mut); line-height: 1.7; }
.chill-post { font-size: 12px; color: var(--mut); min-height: 18px; margin-bottom: 12px; }
.chill-over .btn-row { justify-content: center; }

/* Twitchmaxxing */
/* Big on desktop: a small box turns this into a wrist-flick test rather than a
   reaction test, and the screenshot showed most of the page sitting empty.
   The dvh term keeps it inside the viewport on short windows. */
.twitch-svg {
  width: min(820px, 92vw, 66dvh); aspect-ratio: 1; touch-action: none; cursor: crosshair;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 18px;
}
.twitch-svg.shake { animation: twitchShake .18s ease; }
@keyframes twitchShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.twitch-target { fill: var(--ac); stroke: var(--acText); stroke-width: 2; }
.twitch-target.pop { animation: twitchPop .18s ease; }
@keyframes twitchPop { from { opacity: .3; transform-box: fill-box; transform-origin: center; transform: scale(.6); } }

/* Cracked */
.cracked-board { width: min(560px, 92vw); max-height: 320px; overflow-y: auto; margin-bottom: 14px; }
.cracked-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.cracked-row.reveal { border: 1px solid var(--gold); border-radius: 10px; margin-top: 8px; background: color-mix(in srgb, var(--gold) 10%, transparent); }
.cracked-n { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--mut); min-width: 18px; }
.cracked-pegs, .cracked-current, .cracked-palette { display: flex; gap: 8px; }
.cracked-current, .cracked-palette { justify-content: center; margin-bottom: 12px; }
.cracked-marks { display: flex; gap: 4px; align-items: center; margin-left: auto; }
.mark { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--acText); flex: none; }
.mark.exact { background: var(--gold); border-color: var(--gold); }
/* The words that make the dots readable. min-width keeps the column steady so
   the history scans down the page instead of jittering row to row. */
.cracked-say { font-size: 11.5px; color: var(--mut); min-width: 108px; text-align: right; }
.cracked-say b { color: var(--ink); font-weight: 600; }
.cracked-say.none { opacity: .6; }
.cracked-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  font-size: 11.5px; color: var(--mut); margin-bottom: 12px;
}
.cracked-legend span { display: flex; align-items: center; gap: 6px; }
.cracked-legend b { color: var(--ink); font-weight: 600; }
.peg {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--panel2); cursor: pointer; padding: 0;
}
.peg.sm { width: 18px; height: 18px; border-width: 1px; cursor: default; }
.peg.slot.empty { border-style: dashed; border-color: var(--ac); }
.peg-ruby { background: #e4574f; border-color: #e4574f; }
.peg-amber { background: #e8a33d; border-color: #e8a33d; }
.peg-jade { background: #3fb984; border-color: #3fb984; }
.peg-ion { background: #4aa8f0; border-color: #4aa8f0; }
.peg-violet { background: #a077e8; border-color: #a077e8; }
.peg-ash { background: #8b93a7; border-color: #8b93a7; }
.cracked-actions { display: flex; gap: 10px; justify-content: center; }

/* Sprint modes (Digit Rizz, Sus Check, Escape the Algorithm, Lock In) */
.sprint-instruction {
  font-family: 'Instrument Serif', serif; font-size: 24px; text-align: center;
  margin: 0 0 14px; color: var(--ink);
}
.sprint-area { display: flex; flex-direction: column; align-items: center; min-height: 20px; margin-bottom: 16px; }
.sprint-options { margin-bottom: 14px; }
.sprint-foot { display: flex; justify-content: center; }
/* Right/wrong flashes on the option you actually pressed, so the feedback is
   attached to your action rather than announced somewhere else on screen. */
.option.correct { border-color: var(--good); background: color-mix(in srgb, var(--good) 22%, var(--panel2)); }
.option.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 22%, var(--panel2)); }

/* Brain RAM */
.ram-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  width: min(540px, 88vw, 58dvh); aspect-ratio: 1;
}
.ram-cell {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; padding: 0; transition: background .12s, border-color .12s, transform .12s;
}
.ram-cell.lit { background: var(--ac); border-color: var(--acText); }
.ram-cell.good { background: var(--acSoft); border-color: var(--good); }
.ram-cell.bad { background: color-mix(in srgb, var(--bad) 30%, var(--panel2)); border-color: var(--bad); }
.ram-hint { font-size: 13px; color: var(--mut); margin-top: 14px; text-align: center; min-height: 20px; }

.notice-card { border-style: dashed; }
.share-note { font-size: 13px; color: var(--acText); margin-top: 14px; min-height: 18px; }
.home-links { display: flex; gap: 18px; margin-top: 22px; }
.btn-textlink.plain { margin-left: 0; opacity: .85; }
.btn-textlink.left { margin-left: 0; align-self: flex-start; }

/* ---------- mobile app tab bar ---------- */
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around; align-items: center;
}
.tab {
  background: none; border: none; color: var(--mut); font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10.5px; letter-spacing: .03em; cursor: pointer;
  min-width: 56px; min-height: 48px; justify-content: center; border-radius: 12px;
}
.tab.active { color: var(--ac); }
.tab:active { transform: scale(.94); }
.tab-play-circle {
  width: 46px; height: 46px; border-radius: 50%; background: var(--ac); color: var(--onAc);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px var(--acSoft); margin-top: -14px;
}
.tab-play-circle svg { margin-left: 2px; }

/* ---------- more sheet ---------- */
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sheet-overlay {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeUp .2s ease;
}
.sheet {
  width: 100%; background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0,0,0,.4); animation: sheetUp .25s cubic-bezier(.22,1,.36,1);
}
.sheet-grip {
  width: 38px; height: 4px; border-radius: 4px; background: var(--line);
  margin: 4px auto 14px;
}
.sheet-title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--mut); margin-bottom: 14px;
}
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sheet-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 16px; color: var(--ink); font-family: inherit; font-size: 12.5px;
  cursor: pointer; transition: border-color .15s, transform .1s;
}
.sheet-item:hover { border-color: var(--ac); }
.sheet-item:active { transform: scale(.96); }
.sheet-icon { font-size: 21px; line-height: 1; }
.sheet-item .badge-count { position: absolute; top: 8px; right: 10px; }
.sheet-close { width: 100%; margin-top: 14px; }
/* The picker can list the whole roster, so it scrolls inside the sheet rather
   than growing past the top of the screen. */
.pick-sheet { max-height: 82dvh; display: flex; flex-direction: column; }
.pick-results {
  margin-top: 12px; overflow-y: auto; overscroll-behavior: contain;
  flex: 1 1 auto; min-height: 0;
}

/* A dot on the More tab when something inside it needs attention. */
.tab { position: relative; }
.tab-badge {
  position: absolute; top: 6px; right: 12px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--bad);
}

/* ---------- mobile layout (app mode) ---------- */
@media (max-width: 720px) {
  .chrome { padding: 12px 16px calc(0px + env(safe-area-inset-top, 0px)); }
  .chrome-nav .nav-btn { display: none; }        /* nav moves to the tab bar */
  .tabbar { display: flex; }
  .screen { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .page-wide, .page-narrow, .page-learn { padding-left: 16px; padding-right: 16px; }
  .page-results { padding-top: 4vh; }

  .logo-word { font-size: 21px; }
  .home-hero { margin: 0 0 20px; }
  .home-headline { font-size: 26px; }
  .home-quip { font-size: 13px; }
  .hero-card { padding: 22px 22px 18px; }
  .panel-card { padding: 20px 20px; }
  .iq-big { font-size: 72px; }
  .campaign-level { font-size: 32px; }
  .stat-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px 16px; }
  .stat-num { font-size: 22px; }
  .btn-primary { width: 100%; text-align: center; }
  .btn-outline { flex: 1; text-align: center; }
  .home-footer { margin-top: 26px; }

  .play-header { gap: 10px; margin-bottom: 10px; }
  .puzzle-instruction { font-size: 19px; margin-bottom: 16px; }
  /* The title costs vertical space the figure wants, so it stays on one line
     and the plain name drops to a size that still reads. */
  .puzzle-game { gap: 7px; margin-bottom: 4px; }
  .puzzle-game-name { font-size: 18px; }
  .puzzle-game-real { font-size: 9.5px; }

  /* Chill games are square too, so the same width cap keeps them on one
     screen. Twitchmaxxing especially: scrolling the page while tapping targets
     would wreck the thing it is trying to measure. */
  .twitch-svg { width: min(430px, 92vw, 48dvh); }
  .ram-grid   { width: min(380px, 88vw, 46dvh); }
  .cracked-board { max-height: 30dvh; }
  .chill-howto { font-size: 12.5px; margin-bottom: 10px; }
  .chill-stats { gap: 14px; margin-bottom: 10px; }
  .chill-card { padding: 14px; gap: 12px; }
  .chill-blurb { font-size: 12.5px; }

  /* ---- playing fits the viewport ----
     Two problems, one cause: the play screen was taller than the phone, so the
     answer options sat below the fold and a finger dragged across a maze was
     really dragging the page. Lay the screen out as a column exactly one
     viewport tall and let the figure absorb whatever height is left over.
     overflow-y stays auto as a safety valve — on a very short screen it is
     better to scroll than to clip the options out of reach. */
  /* html carries min-height:100%, so pinning the body alone still left a few
     pixels of document scroll — enough for a drag to grab. Pin both. */
  html:has(body.in-play) { height: 100dvh; min-height: 0; overflow: hidden; }
  body.in-play {
    height: 100dvh; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  body.in-play #screen-play {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
  }
  body.in-play #screen-play > * { flex: none; }
  /* Same id in the selector, or the rule above wins and nothing takes up slack. */
  body.in-play #screen-play > .puzzle-area {
    flex: 1 1 auto; min-height: 0; justify-content: center; margin-bottom: 14px;
  }
  /* The options were the biggest fixed block on the screen; trimming them is
     what buys the figure enough room to stay large. */
  body.in-play .options-grid { grid-template-columns: repeat(auto-fit, minmax(66px, 84px)); gap: 8px; }
  body.in-play .progress-dots { margin-bottom: 14px; }
  body.in-play .puzzle-toolbar { margin-top: 12px; }
  /* Drive the figures off the height that is actually left rather than a
     guessed vh fraction: fill the free space, then cap on width. Every one of
     these is square, so height plus an aspect ratio pins both dimensions and
     the layout survives whatever phone it lands on. */
  /* These are all square, so capping width also caps height. The dvh term is
     what keeps a tall figure from pushing the answer options off-screen; the
     matrix is tighter because it carries a row of options underneath it. */
  body.in-play .matrix-grid { width: min(380px, 78vw, 36dvh); }
  body.in-play .maze-svg    { width: min(430px, 92vw, 46dvh); }
  body.in-play .fill-svg    { width: min(360px, 88vw, 46dvh); }
  .options-grid { grid-template-columns: repeat(auto-fit, minmax(74px, 100px)); gap: 9px; }
  .option { border-radius: 14px; font-size: 21px; }
  .btn-tool { padding: 11px 18px; min-height: 44px; }  /* 44px touch targets */
  .explain-panel { padding: 20px 18px; }
  .explain-panel .btn-primary { width: auto; }

  .res-verdict { font-size: 38px; }
  .res-score { font-size: 30px; }
  .res-stars .star { font-size: 36px; }
  .page-title { font-size: 30px; }

  .map-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
  .map-node .n { font-size: 14px; }
  .ach-grid { grid-template-columns: 1fr; }

  .duel-big { font-size: 48px; }
  .duel-record { margin-left: 0; width: 100%; justify-content: space-between; }
  .duel-vs .num { font-size: 26px; }
  .stand-big { font-size: 38px; }
  .dual-pct { grid-template-columns: 1fr 1fr; }
  .code-row .code-field { min-width: 0; }
  .duel-block .btn-primary, .code-row .btn-outline { width: 100%; }

  .toasts { right: 12px; left: 12px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .toast { justify-content: flex-start; }
}

/* hover-capable devices only get hover lifts (avoids sticky hover on touch) */
@media (hover: none) {
  .option:hover, .btn-primary:hover, .btn-outline:hover, .map-node:hover { transform: none; box-shadow: none; }
  .logo-btn:hover { animation: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .screen, .gold-pill.combo, .hint-box, .explain-panel, .toast, .match-found { animation: none; }
  .option.wrong { animation: none; }
  .option.correct { animation: none; }
  .breathe { animation: none; }
  .res-stars .star.lit { animation: none !important; }
}