/* ============================================================
   WORLD FEUD — prototype styles. Mobile-first, no framework.
   ============================================================ */
:root{
  --bg:#0d0d0f; --bg2:#161618; --card:#161618; --card2:#1c1c1f;
  --ink:#f5f5f5; --ink-dim:#b4bac2; --ink-faint:#71717a;
  --line:#27272a;
  --accent:#3b82f6;        /* blue — the light end of the blue→teal identity */
  --accent2:#0891b2;       /* teal — the deep end; every accent→accent2 gradient reads blue→teal */
  --win:#f59e0b;           /* gold — reserved for the #1 hive-mind winner */
  --green:#22c55e; --gold:#f59e0b; --blue:#3b82f6; --teal:#0891b2; --grey:#3f3f46;
  --radius:16px; --radius-sm:10px;
  --maxw:520px;
  --tap:48px;
  --fs:16px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* our flex/grid rules must not override the hidden attribute */
html{-webkit-text-size-adjust:100%; height:100%; background:#0d0d0f}
body{
  margin:0; background:radial-gradient(120% 80% at 50% -10%, #161618 0%, var(--bg) 60%);
  color:var(--ink); font-size:var(--fs);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.4;
  position:fixed; top:0; left:0; right:0; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--accent2); outline-offset:2px; border-radius:6px}

/* ---------- header ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; width:100%; max-width:var(--maxw); margin:0 auto; padding:8px 14px 2px 14px;
}
.topbar-right{display:flex; gap:5px}
.icon-btn svg{display:block}
/* Two-line lockup in plain HTML text (no SVG viewport, so nothing can clip the
   glyph tops on iOS Safari). THAT'S WHAT is the smaller line (more letters);
   the sizes are chosen at the measured ~1.44 width ratio so the two lines come
   out roughly equal width — left and right edges align. */
.wordmark{ margin:0; display:flex; flex-direction:column; align-items:flex-start; line-height:.9; flex:0 0 auto }
.wordmark span{
  display:block; white-space:nowrap; font-weight:800; letter-spacing:.01em;
  background:linear-gradient(92deg,var(--accent),#60a5fa 60%,var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wm-l1{ font-size:12.5px }
.wm-l2{ font-size:18px }
.icon-btn{
  width:40px; height:40px; min-width:40px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:12px; font-size:1.1rem; display:grid; place-items:center;
  transition:transform .12s var(--ease), background .15s;
}
.icon-btn:active{transform:scale(.92); background:var(--card2)}

/* ---------- layout ---------- */
.game{max-width:var(--maxw); width:100%; margin:0 auto; padding:8px 14px 10px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-height:0}

/* ---------- daily-double toggle (quiet segmented; the board is the hero) ---------- */
.board-tabs{
  display:inline-flex; align-self:center; gap:2px;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:2px;
}
.board-tab{
  display:flex; align-items:center; gap:6px;
  padding:5px 14px; border:none; background:transparent; border-radius:8px;
  color:var(--ink-faint); font-weight:800; font-size:.76rem; letter-spacing:.02em;
  transition:background .15s, color .15s;
}
.board-tab[aria-selected="true"]{ background:var(--card2); color:#7dd3fc }
.board-tab .tab-state{width:11px; text-align:center; font-size:.72rem; line-height:1}
.board-tab.done .tab-state::after{content:"✓"; color:var(--green); font-weight:900}
.board-tab[aria-selected="true"].done .tab-state::after{color:#7dd3fc}

/* ---------- prompt ---------- */
.prompt-card{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 14px 10px; box-shadow:0 10px 30px -18px #000;
}
.prompt-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.puzzle-no{font-weight:800; color:var(--ink-faint); font-size:.8rem; letter-spacing:.05em}
.audience-chip{
  font-size:.74rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(59,130,246,.18); color:#bfdbfe; border:1px solid rgba(59,130,246,.4);
  padding:4px 9px; border-radius:999px;
}
.audience-chip[data-special="1"]{ background:rgba(255,210,63,.16); color:#ffe08a; border-color:rgba(255,210,63,.45) }
.category-chip{font-size:.74rem; color:var(--ink-faint); margin-left:auto}
.prompt-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:3px}
.prompt-lead{margin:0; font-size:.74rem; color:var(--ink-dim); letter-spacing:.02em}
.prompt-text{margin:0; font-size:1.2rem; line-height:1.15; font-weight:800; letter-spacing:-.01em}

/* ---------- meter ---------- */
.meter-wrap{display:flex; align-items:center; gap:8px}
.meter-row{display:flex; align-items:baseline; justify-content:space-between}
.meter-label{font-size:.72rem; font-weight:800; letter-spacing:.18em; color:var(--ink-faint)}
.meter-val{font-size:1.05rem; font-weight:800; color:var(--accent)}
.meter-track{flex:1; min-width:0; height:8px; background:var(--bg2); border:1px solid var(--line); border-radius:999px; overflow:hidden}
.meter-fill{height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  transition:width .6s var(--ease)}
.guess-dots{display:inline-flex; gap:5px; align-items:center; flex:0 0 auto; padding:3px 8px; background:var(--bg2); border:1px solid var(--line); border-radius:999px}
.guess-dots .dot{width:10px; height:10px; border-radius:50%; background:var(--grey); border:1px solid var(--line); transition:transform .2s var(--ease), background .2s}
.guess-dots .dot.used{background:var(--accent2)}
.guess-dots .dot.miss{background:transparent; border-color:var(--ink-faint)}
.guess-dots .label{font-size:.72rem; color:var(--ink-faint); margin-left:4px}

/* ---------- board ---------- */
.board{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; counter-reset:rank; flex:1 1 auto; min-height:0; overflow-y:auto}
.tile{
  position:relative; display:flex; align-items:center; gap:12px;
  flex:1 1 0; min-height:24px; max-height:72px; padding:0 12px; border-radius:var(--radius-sm);
  background:var(--card); border:1px solid var(--line); overflow:hidden;
}
.tile .rank{
  width:20px; height:20px; flex:0 0 20px; border-radius:6px; display:grid; place-items:center;
  font-weight:800; font-size:.78rem; color:var(--ink-faint); background:var(--bg2); border:1px solid var(--line);
}
.tile .ans{font-weight:700; font-size:.98rem; flex:1; min-width:0}
.tile .pct{font-weight:800; color:var(--ink-dim); font-variant-numeric:tabular-nums}
/* hidden state */
.tile.hidden .ans{color:var(--ink-faint); font-weight:600; letter-spacing:.3em}
.tile.hidden .pct{color:transparent; background:var(--bg2); border-radius:6px; width:34px; height:14px}
.tile .bar{position:absolute; inset:0 auto 0 0; width:0; overflow:hidden; background:linear-gradient(90deg,rgba(59,130,246,.16),rgba(59,130,246,.06)); z-index:0; transition:width .7s var(--ease)}
.tile .rank,.tile .ans,.tile .pct,.tile .crown{position:relative; z-index:1}
/* revealed — "Teal" reveal: deep blue→teal fill, cyan glow ring, sheen sweep */
.tile.revealed{
  border-color:#1f9bb8;
  background:linear-gradient(180deg,#0f1f29,#0f1620);
  box-shadow:0 0 0 1px rgba(34,211,238,.28), 0 0 14px -8px rgba(34,211,238,.46);
}
.tile.revealed .bar{background:linear-gradient(90deg,#1e40af,#0e7490); box-shadow:0 0 10px -6px rgba(34,211,238,.55)}
/* one-shot light sweep across the bar — only on a fresh, in-motion reveal (.lit) */
.tile.revealed .bar::after{content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.tile.revealed.lit .bar::after{animation:sheen 1.5s ease-in-out 1}
.tile.revealed .rank{background:#0e7490; color:#d6f3fb; border-color:transparent}
.tile.revealed .ans{color:var(--ink)}
.tile.revealed .pct{color:#7dd3fc}
.tile.top1.revealed{border-color:var(--win); box-shadow:0 0 0 1px var(--win), 0 0 16px -7px var(--win), 0 8px 26px -16px var(--win)}
.tile.top1.revealed .bar{background:linear-gradient(90deg,#92400e,#d97706); box-shadow:0 0 12px -6px rgba(245,158,11,.7)}
.tile.top1.revealed .rank{background:var(--win); color:#231a00}
.tile.top1.revealed .ans{color:var(--win)}
.tile.top1.revealed .pct{color:#231a00}   /* dark on the gold bar so the % stays legible */
@keyframes sheen{to{transform:translateX(220%)}}
.tile.just .ans{animation:pop .45s var(--ease)}
@keyframes pop{0%{transform:scale(.6); opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1); opacity:1}}
.crown{font-size:.95rem; line-height:1; flex:0 0 auto; margin-right:4px}

/* split-flap reveal — revealed answers render as boxed monospace caps cells */
.tile .ans{ text-transform:uppercase; }
.tile .ans.flap{ display:flex; gap:2px; align-items:center; perspective:300px; letter-spacing:0; overflow:hidden; }
.flap-cell{
  display:inline-grid; place-items:center; min-width:.64em; height:1.45em; padding:0 1px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:800; line-height:1; color:var(--ink);
  background:#0a0a0c; border:1px solid var(--line); border-radius:3px;
  transform-origin:center top; backface-visibility:hidden;
}
.flap-cell.flap-space{ background:transparent; border:none; min-width:.28em }
.tile.top1.revealed .flap-cell{ color:var(--win); border-color:#3a2c08 }
@keyframes flap-rotate{ from{ transform:rotateX(-85deg) } to{ transform:rotateX(0) } }

/* ---------- originals ---------- */
.originals{display:flex; flex-direction:column; gap:8px}
.orig-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.originals-wrap{min-width:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.orig-chip{background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:.85rem; color:var(--ink-dim)}
.originals-title{margin:0 0 6px; font-size:.82rem; font-weight:800; color:var(--ink-dim)}
.originals-hint{font-weight:500; color:var(--ink-faint)}
.originals-list{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px}
.originals-list li{background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:.85rem; color:var(--ink-dim)}

/* ---------- input ---------- */
.guess-bar{display:flex; gap:8px; position:sticky; bottom:8px; z-index:5}
.guess-input{
  flex:1; min-width:0; height:var(--tap); padding:0 16px; font-size:1.05rem;
  background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:14px;
  transition:border-color .15s;
}
.guess-input:focus{border-color:var(--accent2); outline:none}
.guess-input::placeholder{color:var(--ink-faint)}
.guess-btn{
  height:var(--tap); padding:0 22px; font-weight:800; font-size:1rem; border:none; border-radius:14px;
  background:#0e7490; color:#eafdff;   /* calm solid teal — clear CTA without the bright gradient */
  transition:transform .12s var(--ease), filter .15s;
}
.guess-btn:active{transform:scale(.95)}
.guess-btn:disabled{filter:grayscale(.7) brightness(.7); cursor:default}
.announce{min-height:1em; text-align:center; font-weight:700; color:var(--accent); margin:0; transition:opacity .2s}
/* reveal: a small ghost chip in the dots row (balances the wrong-guess dots pill) */
.reveal-btn{background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  font:700 .74rem system-ui; color:var(--ink-dim)}
.reveal-btn:active{background:var(--card2)}

/* ---------- sheets / modals ---------- */
.sheet-scrim{position:fixed; inset:0; background:rgba(6,6,16,.72); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center; z-index:50; padding:0}
.sheet{
  width:100%; max-width:var(--maxw); background:var(--bg2); border:1px solid var(--line);
  border-radius:22px 22px 0 0; padding:22px 18px calc(22px + env(safe-area-inset-bottom));
  position:relative; max-height:92dvh; overflow:auto; animation:slideup .35s var(--ease);
}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-close{position:absolute; right:12px; top:10px; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:1.3rem; line-height:1}
.sheet-title{margin:2px 0 14px; font-size:1.3rem; font-weight:800}

/* help */
.help-big{font-size:1.05rem; margin:0 0 12px}
.help-steps{margin:0 0 14px; padding-left:20px; display:flex; flex-direction:column; gap:9px}
.help-steps li{line-height:1.35}
.help-foot{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; font-size:.92rem; color:var(--ink-dim); margin:0 0 16px}

/* ---------- visual walkthrough (carousel in Help) ---------- */
.walk-viewport{overflow:hidden}
.walk-track{display:flex; transition:transform .25s var(--ease)}
.walk-slide{flex:0 0 100%; min-width:100%; box-sizing:border-box; padding:2px}
.walk-vis{min-height:172px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:20px 16px; margin-bottom:14px}
.walk-slide h3{margin:0 0 6px; font:800 1.15rem system-ui}
.walk-slide p{margin:0; color:var(--ink-dim); line-height:1.45; font-size:.92rem; min-height:3.6em}
.walk-foot{display:flex; align-items:center; gap:10px; margin-top:14px}
.walk-back{flex:0 0 auto; min-width:64px; text-align:left; background:none; border:none; color:var(--ink-faint); font:700 .85rem system-ui; padding:8px 2px}
.walk-dots{flex:1; display:flex; gap:7px; justify-content:center; align-items:center}
.walk-dot{width:8px; height:8px; border-radius:50%; background:var(--line); border:none; padding:0; transition:width .2s, background .2s}
.walk-dot.on{width:20px; border-radius:999px; background:var(--accent2)}
.walk-next{flex:0 0 auto; height:42px; padding:0 22px; border-radius:12px; min-width:64px}
/* slide visuals */
.walk-tabs{pointer-events:none}
.walk-board{height:auto; width:100%; gap:5px; overflow:visible}
.walk-board .tile{flex:0 0 auto; min-height:34px; max-height:42px}
.walk-board .tile .ans{font-size:.92rem}
.walk-score{gap:14px}
.walk-bigscore{font:900 2.5rem system-ui; color:var(--accent)}
.walk-menu{flex-direction:row !important; flex-wrap:wrap; gap:16px}
.walk-menu-item{display:flex; flex-direction:column; align-items:center; gap:7px; font:700 .72rem system-ui; color:var(--ink-dim)}
.walk-menu-item .icon-btn{pointer-events:none}

/* buttons */
.btn-primary{height:var(--tap); padding:0 22px; border:none; border-radius:14px; font-weight:800; font-size:1rem;
  background:linear-gradient(180deg,var(--accent),var(--accent2)); color:#fff; transition:transform .12s var(--ease)}
.btn-primary:active{transform:scale(.96)}
.btn-ghost{height:var(--tap); padding:0 20px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); font-weight:700}
.wide{width:100%}
.danger{color:#ff8a8a; border-color:#5a2b3a}

/* ---------- end screen ---------- */
.end-sheet{text-align:left}

/* contribute (tomorrow's-question form) */
.contribute-form{display:flex; gap:8px}
/* font-size MUST be >=16px or iOS Safari auto-zooms the page on focus */
.contribute-input{flex:1; min-width:0; height:42px; padding:0 12px; font-size:16px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; color:var(--ink)}
.contribute-btn{height:42px; padding:0 16px; border:none; border-radius:10px; background:var(--accent2); color:#fff; font-weight:800}
.contribute-thanks{margin:8px 0 0; color:var(--green); font-weight:700; font-size:.9rem}
.contribute-error{margin:8px 0 0; color:#ff8a8a; font-weight:700; font-size:.82rem}

/* ---------- end screen (redesigned) ---------- */
.end-tomorrow{text-align:left; margin-bottom:16px}
.end-tomorrow-label{font:600 .72rem system-ui; letter-spacing:.1em; text-transform:uppercase; color:#8ea3c4; margin-bottom:6px}
.end-tomorrow-q{margin:0 0 12px; font-weight:600; font-size:1.25rem; line-height:1.22; letter-spacing:-.01em}
.contribute-hint{margin:8px 0 0; font-size:.78rem; color:var(--ink-faint)}
.end-result{display:block; border-top:1px solid var(--line); padding-top:14px}
/* archived replays hide the tomorrow hero, so the result row becomes the top
   element — drop the divider and clear the absolutely-positioned close (×). */
.end-sheet.no-hero .end-result{margin-top:36px; border-top:none; padding-top:0}
.end-boards{display:flex; flex-direction:column; gap:9px}
.end-board{display:flex; align-items:center; gap:10px}
.end-board-label{font:800 .82rem system-ui; color:var(--ink-dim); flex:0 0 auto; min-width:96px}
.end-board .end-dots{flex:1; min-width:0}
.end-board .end-score{flex:0 0 auto; min-width:42px; text-align:right}
/* archived-only "you vs the crowd" percentile (prototype) */
.pctile{width:100%; margin:-1px 0 3px; padding:9px 11px 10px; background:var(--card2); border:1px solid var(--line); border-radius:var(--radius-sm)}
.pctile-dist{display:flex; align-items:flex-end; gap:4px; height:38px; max-width:200px; margin:0 auto}
.pctile-bar{flex:1 1 0; min-width:0; background:var(--grey); border-radius:3px 3px 0 0; transition:background .15s var(--ease)}
.pctile-bar.you{background:var(--accent); box-shadow:0 0 7px -1px var(--accent)}
.pctile-bar.you.top{background:var(--gold); box-shadow:0 0 7px -1px var(--gold)}
.pctile-copy{margin-top:8px; font:700 .82rem system-ui; color:var(--ink-dim); text-align:center}
.pctile-copy.hive{color:var(--gold)}
.pctile-copy.wolf{color:var(--ink)}
.end-total-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; border-top:1px solid var(--line); padding-top:12px}
.end-total{display:flex; align-items:baseline; gap:8px}
.end-total-label{font:700 .72rem system-ui; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.end-total-score{font:900 1.45rem system-ui; color:var(--ink)}
.end-actions{display:flex; gap:8px; margin-left:auto}
/* monochrome mode icon (replaces the 📊 / 💬 emoji to cut colour noise) */
.mode-ico{width:14px; height:14px; vertical-align:-2px; margin-right:6px; color:var(--ink)}
.end-dots{display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap}
.end-dot{width:8px; height:8px; border-radius:50%; border:1px solid var(--line); background:transparent}
.end-dot.got{background:var(--accent); border-color:transparent}
.end-dot.gold{background:var(--win); border-color:transparent}
.end-score{font:800 .95rem system-ui; color:var(--accent)}
.end-help,.stat-help{width:18px; height:18px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink-faint); font:700 .72rem system-ui; display:grid; place-items:center; cursor:pointer; padding:0}
.end-share{height:34px; padding:0 16px; font-size:.82rem; flex:0 0 auto}
.end-note{margin:10px 0 0; font-size:.78rem; color:var(--ink-dim); line-height:1.5}

/* ---------- stats (redesigned) ---------- */
.stat-help{position:absolute; top:6px; right:6px}
.stat-num.blue{color:var(--accent)}
.stat-num.gold{color:var(--win)}
.rank-bars{display:flex; align-items:flex-end; gap:7px; height:84px; margin-top:6px}
.rank-col{flex:1; display:flex; flex-direction:column; align-items:center; height:100%}
.rank-track{flex:1; width:100%; display:flex; align-items:flex-end}
.rank-fill{width:100%; background:var(--accent); border-radius:4px 4px 0 0; min-height:3px}
.rank-fill.gold{background:var(--win)}
.rank-num{font:800 .62rem system-ui; color:var(--ink-faint); margin-top:5px}
/* by-type breakout (additive) */
.type-stats{display:flex; gap:10px; margin-top:6px}
.type-card{flex:1; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px}
.type-name{font:800 .82rem system-ui; margin-bottom:9px}
.type-rows{display:flex; flex-direction:column; gap:7px}
.type-row{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.type-num{font:900 1.05rem system-ui; color:var(--accent)}
.type-num.gold{color:var(--win)}
.type-cap{font:600 .64rem system-ui; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint)}

/* ---------- stats ---------- */
.stats-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px}
.stat{position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 10px; text-align:center}
.stat-num{font-size:1.7rem; font-weight:900; line-height:1}
.stat-cap{font-size:.66rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:6px}
.stats-sub{font-size:.95rem; margin:6px 0 4px; color:var(--ink-dim)}
.stats-hint{font-size:.78rem; color:var(--ink-faint); margin:0 0 10px}

/* ---------- settings ---------- */
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-weight:600}
.toggle-row input{width:46px; height:28px; appearance:none; background:var(--grey); border-radius:999px; position:relative; transition:background .2s; flex:0 0 46px}
.toggle-row input:checked{background:var(--accent2)}
.toggle-row input::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#fff; border-radius:50%; transition:transform .2s var(--ease)}
.toggle-row input:checked::after{transform:translateX(18px)}
.settings-note{font-size:.82rem; color:var(--ink-faint); margin:14px 0}
.settings-credit{font-size:.72rem; color:var(--ink-faint); text-align:center; margin:18px 0 0; letter-spacing:.04em}

/* ---------- archive ---------- */
.archive-note{font-size:.85rem; color:var(--ink-dim); margin:0 0 12px}
.archive-list{display:flex; flex-direction:column; gap:8px}
.arch-section{font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:4px 2px 0}
/* day chips — browse the archive by day; boards stay hidden until you open one */
.arch-chips{display:flex; flex-wrap:wrap; gap:8px}
.dchip{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 12px; min-width:64px;
  display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink-dim)}
.dchip .dm{font:800 .78rem system-ui}
.dchip .pair{display:flex; gap:5px}
.dchip .pair i{width:7px; height:7px; border-radius:50%; background:transparent; border:1px solid var(--ink-faint)}
.dchip .pair i.on{background:var(--accent2); border-color:transparent}
.dchip.both{border-color:var(--accent2)}
.dchip.today{box-shadow:0 0 0 2px #1f9bb8}
.dchip:active{background:var(--card2)}
.arch-key{display:flex; gap:14px; align-items:center; font:600 .68rem system-ui; color:var(--ink-faint); margin:0 2px 12px}
.arch-key i{display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:-1px; margin-right:5px}
.arch-key .kf{background:var(--accent2)} .arch-key .kt{background:transparent; border:1px solid var(--ink-faint)}
.arch-row{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; color:var(--ink); transition:border-color .15s, background .15s;
}
.arch-row:active{ background:var(--card2) }
.arch-row.active{ border-color:var(--accent) }
.arch-meta{flex:0 0 auto; display:flex; flex-direction:column; gap:2px; min-width:86px}
.arch-date{font-size:.82rem; font-weight:800}
.arch-tag{font-size:.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent)}
.arch-prompt{flex:1; min-width:0; font-size:.8rem; color:var(--ink-dim); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.arch-badge{flex:0 0 auto; font-size:1.1rem; min-width:1.4em; text-align:center}

/* ---------- high-contrast / colorblind grid ---------- */
/* Distinguish the board by TEXTURE + bright outlines, not colour alone:
   regular answers get blue diagonal stripes, the #1 gets opposite-angle gold
   stripes, every revealed tile gets a white outline, and the result dots become
   fill/ring shapes instead of hue pairs. */
body[data-cb="on"] .meter-fill{background:repeating-linear-gradient(45deg,#fff,#fff 6px,#bbb 6px,#bbb 12px)}
body[data-cb="on"] .tile.revealed{border-color:#fff; box-shadow:none}
body[data-cb="on"] .tile.revealed .bar{background:repeating-linear-gradient(45deg,#3a6ea5,#3a6ea5 7px,#16314d 7px,#16314d 14px)}
body[data-cb="on"] .tile.revealed .pct{color:#fff}
body[data-cb="on"] .tile.top1.revealed{box-shadow:0 0 0 2px #fff}
body[data-cb="on"] .tile.top1.revealed .bar{background:repeating-linear-gradient(-45deg,#e0a92e,#e0a92e 7px,#6f4e00 7px,#6f4e00 14px)}
body[data-cb="on"] .end-dot{border-color:#fff}
body[data-cb="on"] .end-dot.got{background:#fff; border-color:#fff}
body[data-cb="on"] .end-dot.gold{background:#fff; box-shadow:inset 0 0 0 2px #000}

/* ---------- reduced motion (OS preference; no in-app toggle) ---------- */
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

@media (min-width:560px){ .sheet-scrim{align-items:center} .sheet{border-radius:22px} }
@media (max-width:340px){ .prompt-text{font-size:1.3rem} }
@media (max-width:380px){ .wm-l1{font-size:11px} .wm-l2{font-size:15.8px} }