/* The Platform: dark only, mobile first. Tokens from docs/UI.md section 1. */
:root {
  --graphite: #0B0F12;
  --panel: #151B20;
  --line: #2A3238;
  --chalk: #E7E1D6;
  --chalk-dim: #A9A397;
  --chalk-line: #3BE0FF;
  --amber: #F5A623;
  --rival: #C77DFF;
  --miss: #E2554A;
  --good: #E7E1D6;
  --none: #5A636A;
  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --radius: 8px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--graphite); color: var(--chalk); }
body { font: 16px/1.4 var(--sans); min-height: 100dvh; display: flex; flex-direction: column; }
.app { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 12px; flex: 1 0 auto; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-weight: 600; }
details > summary { cursor: pointer; }

.num, td.num, th.num, .row-stats, .counts, .standings, .attempts, .teams, .class-standings, .book-grid { font-variant-numeric: tabular-nums; }
.display, .title, .cls, .medal, .reel-value, .group-head, .screen-title, .section-head { font-family: var(--display); letter-spacing: 0.02em; }
.mono { font-family: var(--mono); font-size: 0.85em; word-break: break-all; }
.dim { color: var(--chalk-dim); }
.small { font-size: 0.85rem; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--chalk-line); outline-offset: 2px; }

/* Controls */
.btn, .toggle, .chip, .tab {
  min-height: 44px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel); cursor: pointer; text-align: center;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--amber); color: #1A1204; border-color: var(--amber); font-weight: 700; }
.btn.big { width: 100%; font-size: 1.25rem; min-height: 56px; font-family: var(--display); letter-spacing: 0.04em; }
.btn.small { min-height: 40px; padding: 6px 10px; }
.btn.link { background: none; border: none; color: var(--chalk-line); text-decoration: underline; padding-left: 0; padding-right: 0; }
.toggle[aria-pressed="true"], .tab[aria-selected="true"], .chip[aria-expanded="true"] { border-color: var(--chalk-line); box-shadow: inset 0 0 0 1px var(--chalk-line); }
.toggles, .button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.toggles .toggle { flex: 1 1 0; }
.field { display: block; width: 100%; }
input.field, textarea.field, select, #seed-input, #search-input {
  width: 100%; min-height: 44px; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel);
}
textarea.field { resize: vertical; }
.field-label { display: block; font-size: 0.85rem; color: var(--chalk-dim); margin-bottom: 4px; }
.tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 0.75rem; color: var(--chalk-dim); }
.tag.steal { color: var(--rival); border-color: var(--rival); }
.tag.you-tag, .tag.counted { color: var(--chalk-line); border-color: var(--chalk-line); }
.notice { padding: 8px 10px; border: 1px solid var(--amber); border-radius: var(--radius); color: var(--amber); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }

/* Screens */
.screen { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 24px; }
.screen.center { align-items: center; justify-content: center; min-height: 60dvh; text-align: center; }
.title { font-size: 2.6rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1; }
.screen-title { font-size: 1.6rem; }
.section-head { font-size: 1.15rem; margin-top: 8px; }
.group-head { font-size: 1rem; color: var(--chalk-dim); padding: 6px 0 4px; }
.rule { color: var(--chalk-dim); margin-top: 6px; }
.setup { display: flex; flex-direction: column; gap: 12px; }
.modes { display: flex; flex-direction: column; gap: 8px; }
.links { display: flex; gap: 16px; }

/* Draft: a full-height column where only the board scrolls */
.screen.draft { height: 100dvh; padding: 8px 0 0; gap: 8px; overflow: hidden; }
body:has(.screen.draft) .footer { display: none; }
.draft-head .meta { font-size: 0.9rem; color: var(--chalk-dim); }
.draft-head .mode { color: var(--chalk); font-weight: 600; }
.rivals { flex: 0 0 auto; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.chip { min-height: 36px; padding: 4px 8px; white-space: nowrap; font-size: 0.85rem; display: flex; gap: 6px; align-items: center; }
.rival-chip .chip-name { color: var(--rival); }
.rival-panel { margin-top: 6px; padding: 8px; border: 1px solid var(--rival); border-radius: var(--radius); background: var(--panel); font-size: 0.85rem; }
.lineup li { padding: 2px 0; }
.lineup .cls { display: inline-block; min-width: 3em; }
.strip { flex: 0 0 auto; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.cell { border: 1px solid var(--line); border-radius: 6px; padding: 3px 2px; min-height: 52px; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; }
.cell .cls { font-size: 0.95rem; }
.cell-body { font-size: 0.68rem; display: flex; flex-direction: column; line-height: 1.15; max-width: 100%; }
.cell-body .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-open { border-color: var(--chalk-line); }
.cell-open .cell-body { color: var(--chalk-dim); }
.cell-undrawn { opacity: 0.5; }
.cell-home, .cell-filled { background: var(--panel); }
.cell-home .cell-body { color: var(--chalk-line); }
.spin { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.reels { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.reel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 8px; display: flex; flex-direction: column; }
.reel-value { font-size: 1.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel.spinning .reel-value { animation: settle 1.2s cubic-bezier(.2, .8, .2, 1); }
@keyframes settle {
  0% { transform: translateY(-60%); opacity: 0; filter: blur(2px); }
  60% { transform: translateY(8%); opacity: 1; filter: none; }
  100% { transform: none; }
}
.counts { display: flex; gap: 12px; font-size: 0.85rem; color: var(--chalk-dim); flex-wrap: wrap; }
.counts b { color: var(--chalk); }
.rerolls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.reroll { display: flex; flex-direction: column; gap: 2px; }
.reroll .btn { width: 100%; }
.reason { font-size: 0.75rem; }
.board { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); }
.rows { display: flex; flex-direction: column; gap: 6px; }
.card-row {
  width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px 10px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); cursor: pointer; min-height: 44px;
}
.card-row.selected, .card-row[aria-pressed="true"] { border-color: var(--chalk-line); box-shadow: inset 0 0 0 1px var(--chalk-line); }
.row-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.row-top .name { font-weight: 600; }
.rival-tag { margin-left: auto; font-size: 0.75rem; color: var(--rival); border: 1px solid var(--rival); border-radius: 4px; padding: 0 5px; }
.row-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--chalk-dim); }
.row-stats .era { color: var(--chalk); }
.actionbar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--graphite); }
.actionbar .btn.primary { width: 100%; }

/* Lights */
.light { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; border: 1px solid var(--line); }
.light-good { background: var(--good); border-color: var(--good); }
.light-miss { background: var(--miss); border-color: var(--miss); }
.light-none { background: var(--none); border-color: var(--none); }
.light-pending { background: transparent; }
.lights { display: inline-flex; gap: 8px; }
.light-group { display: inline-flex; gap: 2px; }

/* Replay */
.replay { cursor: pointer; }
.stage-head { font-family: var(--display); font-size: 1.2rem; color: var(--amber); margin-top: 8px; }
.replay-class { display: flex; flex-direction: column; gap: 6px; }
.replay-grid { display: grid; gap: 8px; }
@media (min-width: 640px) { .replay-grid { grid-template-columns: 3fr 2fr; } }
.table-wrap { overflow-x: auto; }
.attempts th, .attempts td { padding: 3px 2px; font-size: 0.75rem; white-space: nowrap; }
.attempts td { text-align: center; }
.attempts .kg { display: block; font-size: 0.65rem; color: var(--chalk-dim); }
.attempts .attempt.latest { background: rgba(59, 224, 255, 0.12); }
.team-code { color: var(--chalk-dim); }
tr.you th, tr.you .team-code, .standings li.you, tr.you td { color: var(--chalk-line); }
tr.rival .team-code, .standings li.rival .team { color: var(--rival); }
.standings { font-size: 0.85rem; }
.standings li { display: grid; grid-template-columns: 2.5em 6em 1fr auto auto; gap: 6px; padding: 2px 0; border-bottom: 1px solid var(--line); }
.class-result { font-family: var(--display); font-size: 1.05rem; }
.replay-bar { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 8px 0; background: var(--graphite); border-top: 1px solid var(--line); }
.replay-bar .btn { flex: 1; }

/* Result */
.score { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.medal { font-size: 2.2rem; color: var(--amber); font-weight: 700; }
.medal.perfect { font-size: 1.7rem; }
.points .num { font-size: 2.2rem; color: var(--amber); }
.headline { font-family: var(--display); font-size: 1.3rem; }
.bombline { color: var(--miss); }
.gauntlet-label { color: var(--amber); font-size: 1.1rem; }
.banner { border: 1px solid var(--amber); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.banner-text { font-family: var(--display); font-size: 1.3rem; color: var(--amber); }
.versus { font-family: var(--display); font-size: 1.2rem; }
.tabs { display: flex; gap: 6px; overflow-x: auto; }
.tab { flex: 1 0 auto; }
.teams td, .teams th { font-size: 0.95rem; }
.result-rows { gap: 6px; }
.result-row { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.result-row > details { flex: 1; }
.result-row summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.result-row .cls { min-width: 2.6em; font-size: 1.1rem; }
.result-row .who { flex: 1 1 60%; }
.row-undrawn, .row-retired { opacity: 0.6; }
.class-standings { margin-top: 8px; font-size: 0.85rem; }
.meta-list { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
.meta-list dt { color: var(--chalk-dim); }
.meta-list dd { margin: 0; }
.pb { color: var(--amber); }
.achievements { display: flex; flex-direction: column; gap: 4px; }
.achievement { border-left: 3px solid var(--amber); padding-left: 8px; }
.share { display: flex; flex-direction: column; gap: 6px; }
.share-card { font-family: var(--mono); font-size: 0.8rem; line-height: 1.5; white-space: pre; overflow-x: auto; }
.result-actions { display: flex; flex-direction: column; gap: 8px; }

/* Lifters and book */
.lifter-cards { display: flex; flex-direction: column; gap: 10px; }
.lifter-cards .btn { margin-top: 8px; width: 100%; }
.days { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.day { border-top: 1px solid var(--line); padding-top: 4px; }
.book-grid th, .book-grid td { text-align: center; padding: 4px 2px; font-size: 0.8rem; }
.book-grid tbody th { text-align: left; }
.book-cell { border: 1px solid var(--line); min-width: 32px; height: 28px; }
.rank-1 { background: #6B4A2B; }
.rank-2 { background: #6E767C; }
.rank-3 { background: var(--amber); color: #1A1204; font-weight: 700; }
.achievement-list { display: flex; flex-direction: column; gap: 4px; }
.achievement-list .locked { color: var(--chalk-dim); opacity: 0.6; }
.achievement-list .unlocked b { color: var(--amber); }

.footer { flex: 0 0 auto; width: 100%; max-width: 720px; margin: 0 auto; padding: 16px 12px 24px; color: var(--chalk-dim); font-size: 0.8rem; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}