/* Shared chrome for the replay viewers, kept in lockstep with the overview
   page (index.html): same tokens (--bg/--fg/--red/--dim/--line/--panel/--faint),
   same type scale (h1 22, h2 15 with "## ", body 13, notes 12, tags 11),
   same rhythm (wrap 1100/36-24, 14px grid gaps, 34px between sections, white
   panels with --line borders). Game-specific widgets (the connect4 cabinet,
   gomoku grid, poker felt) stay in each page's own <style>. */
:root { --bg:#fbfbf8; --fg:#1c1c1c; --red:#8f1d1d; --dim:#6b6b6b;
  --line:#ddd8cf; --panel:#ffffff; --faint:#f4f1ea;
  --link:#4338ca; --green:#1a7f37; --neg:#b91c1c; --amber:#b45309; }
* { box-sizing:border-box; }
body { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  margin:0; background:var(--bg); color:var(--fg); }
/* content-box so 1100px is the CONTENT width, exactly like the overview and
   report pages (they never set border-box) — otherwise the centered column
   is 48px narrower and all text lands 24px further right than on those pages. */
.wrap { box-sizing:content-box; max-width:1100px; margin:0 auto; padding:36px 24px; }
h1 { font-size:22px; margin:0 0 4px; color:var(--red); font-weight:700; }
h1 .cursor { display:inline-block; width:11px; height:1em; background:var(--red);
  vertical-align:text-bottom; margin-left:5px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.sub { color:var(--fg); font-size:13px; margin-bottom:30px; }
.sub b { color:var(--fg); font-weight:600; }
h2 { font-size:15px; margin:0; font-weight:700; }
h2::before { content:"## "; color:var(--red); }
.arena-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.arena-tag { font-size:11px; color:var(--dim); }
.arena-tag::before { content:"["; color:var(--red); }
.arena-tag::after { content:"]"; color:var(--red); }

/* selectors */
.selectors { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
/* show only the curated Featured selector; hide the "browse every…" expander
   (the model/matchup + hand pickers stay in the DOM so the JS keeps working). */
.browse { display:none; }
label.sel { display:block; font-size:11px; color:var(--dim); text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:5px; }
select { appearance:none; background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:0; padding:7px 30px 7px 10px; font-family:inherit; font-size:13px; cursor:pointer;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236b6b6b'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; }
select:hover, select:focus { outline:none; border-color:var(--red); }

/* layout: board column + analysis panel */
.stage { display:grid; gap:14px; align-items:start; }
/* grid items default to min-width:auto, so a wide min-content child (the felt or
   the analysis panel) would refuse to shrink and blow the column past the
   viewport on a phone — making the deck + analysis panel overflow. Let them
   shrink to the track instead. */
.stage > * { min-width:0; }

/* transport deck */
.deck { margin-top:14px; background:var(--panel); border:1px solid var(--line); padding:16px 18px; }
.deckrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
button.btn { font-family:inherit; font-size:13px; background:var(--panel); color:var(--fg);
  border:1px solid var(--line); border-radius:0; padding:7px 10px; cursor:pointer; }
button.btn:hover { border-color:var(--red); color:var(--red); }
button.btn:disabled { opacity:.4; cursor:default; border-color:var(--line); color:var(--fg); }
button.btn.primary { background:var(--red); border-color:var(--red); color:#fff; }
button.btn.primary:hover { background:#6e1616; color:#fff; }
.scrub { display:flex; align-items:center; gap:12px; margin-top:12px; }
input[type=range] { -webkit-appearance:none; appearance:none; flex:1; height:4px;
  background:var(--line); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px;
  border-radius:0; background:var(--red); cursor:pointer; }
input[type=range]::-moz-range-thumb { width:14px; height:14px; border:none; border-radius:0;
  background:var(--red); cursor:pointer; }
.movecount { font-size:12px; color:var(--dim); min-width:96px; text-align:right; white-space:nowrap; }
.tip { color:var(--dim); font-size:11px; margin-top:10px; }

/* analysis panel (section box, like .arena on the overview) */
.panel { background:var(--panel); border:1px solid var(--line); padding:20px 20px 24px; }
.pbody { margin-top:12px; }
.movenum { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.movenum b { font-size:22px; color:var(--fg); margin-right:4px; }
.movenum .tot { font-size:13px; color:var(--dim); }
.actor { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.actor .who { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--fg); }
.meta { color:var(--fg); font-size:12px; margin:6px 0 14px; }
.invalid { color:var(--neg); font-weight:600; }
.warn { display:flex; gap:8px; align-items:flex-start; background:#fdf3e7; border:1px solid #e7c79a;
  padding:9px 12px; margin:0 0 13px; font-size:12px; color:var(--amber); }
.btnrow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.thinkbtn { font-family:inherit; font-size:13px; background:var(--panel); border:1px solid var(--line);
  color:var(--link); border-radius:0; padding:7px 10px; cursor:pointer; }
.thinkbtn:hover { border-color:var(--red); color:var(--fg); }
.toktag { display:inline-block; margin-left:10px; font-size:12px; color:var(--dim); vertical-align:middle; }
pre.think { white-space:pre-wrap; word-break:break-word; font-family:inherit; font-size:12px;
  line-height:1.6; color:var(--fg); background:var(--faint); border:1px solid var(--line);
  padding:14px; max-height:460px; overflow:auto; margin:13px 0 0; }
.hidden { display:none; }
.hint { color:var(--dim); font-size:12px; margin-top:10px; }
code { font-family:inherit; background:var(--faint); border:1px solid var(--line); padding:1px 5px; }

/* action summary strip (section box) */
.summary { margin-top:34px; background:var(--panel); border:1px solid var(--line); padding:20px 20px 24px; }
.movelist { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; max-height:200px; overflow:auto; align-items:center; }
.streetsep { flex-basis:100%; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); margin-top:8px; }
.streetsep:first-child { margin-top:0; }
.mv { display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line);
  color:var(--fg); border-radius:0; padding:4px 8px; font-family:inherit; font-size:12px; cursor:pointer; }
.mv:hover { border-color:var(--red); }
.mv.cur { border-color:var(--red); background:var(--faint); box-shadow:0 0 0 1px var(--red); }
.mv.trunc { border-color:#e7c79a; }
.mv .n { color:var(--dim); font-size:10px; }
.mv .d { width:10px; height:10px; border-radius:50%; flex:none; }

/* board-game scoreboard (connect4 / gomoku) */
.scoreboard { display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); padding:16px 18px; margin-bottom:14px; }
.team { display:flex; align-items:center; gap:10px; }
.team .dot { width:22px; height:22px; border-radius:50%; flex:none; }
.team.t0 .dot { background:#1c1c1c; }
.team.t1 .dot { background:#fff; box-shadow:inset 0 0 0 1px #1c1c1c; }
.team .role { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.team .tname { font-weight:700; font-size:15px; color:var(--fg); }
.team.t1 { flex-direction:row-reverse; text-align:right; }
.vs { font-weight:700; font-size:12px; letter-spacing:.1em; color:var(--dim); padding:3px 8px; border:1px solid var(--line); }
.badge.win { font-weight:700; font-size:13px; padding:6px 12px; background:#e9f3ec; border:1px solid #abd2b5; color:var(--green); }

/* poker shared bits (cards, action chip, result box) */
.card { width:38px; height:53px; border-radius:4px; background:#fff; color:#1c1c1c; border:1px solid #b9b2a4;
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.15); }
.card .r { font-size:17px; line-height:1; } .card .s { font-size:14px; line-height:1; }
.card.sm { width:26px; height:36px; } .card.sm .r { font-size:12px; } .card.sm .s { font-size:10px; }
.card.red { color:#b91c1c; }
.card.back { background:repeating-linear-gradient(45deg,#a64242,#a64242 4px,#8f1d1d 4px,#8f1d1d 8px); border:1px solid #8f1d1d; }
.card.empty { background:transparent; border:1px dashed #b9b2a4; box-shadow:none; }
.card.unknown { background:#efeaf6; border:1px dashed #8b6cc9; color:#6d28d9; box-shadow:none; justify-content:center; }
.card.unknown::after { content:"?"; font-size:18px; }
.seatdot { width:13px; height:13px; border-radius:50%; display:inline-block; }
.act { font-weight:700; font-size:13px; color:var(--red); background:var(--panel); border:1px solid var(--red); padding:1px 9px; }
.act.fold { color:var(--dim); border-color:var(--dim); }
.result { background:#e9f3ec; border:1px solid #abd2b5; padding:12px 14px; margin-bottom:14px; }
.result .rt { font-weight:700; font-size:13px; color:var(--green); }
.result .rs { font-size:12px; color:var(--dim); margin-top:3px; }
.potline { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#3d5c46; }
.potline b { font-size:17px; color:#1c1c1c; margin:0 4px; }

/* responsive: any table scrolls within its OWN area at every width rather than
   widening the page (which would push text past the viewport edge); tighter
   gutters on mobile so content hugs the screen edges like it does on desktop. */
table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--red) var(--faint); }
/* keep the horizontal slide-bar visible (not an auto-hiding overlay) so it's
   obvious a wide table scrolls; it only renders when the table overflows. */
table::-webkit-scrollbar { height:10px; }
table::-webkit-scrollbar-track { background:var(--faint); border-top:1px solid var(--line); }
table::-webkit-scrollbar-thumb { background:var(--red); border:2px solid var(--faint); }
table::-webkit-scrollbar-thumb:hover { background:#6e1616; }
@media (max-width:760px) {
  .wrap { padding:24px 14px; }
  h1 { font-size:18px; }
  h2 { font-size:14px; }
  .sub { font-size:12px; }
  .arena-tag { font-size:10px; }
  button.btn { font-size:12px; padding:6px 8px; }
  /* selects size to their longest option (long matchup/hand labels), which
     overflows a phone viewport — stack them and clamp each to full width. */
  .selectors { flex-direction:column; align-items:stretch; gap:10px; }
  .selectors > div { width:100%; min-width:0; }
  select { width:100%; max-width:100%; font-size:12px; }
  .movecount { font-size:11px; min-width:0; }
  .tip { font-size:10px; }
  /* controls deck + analysis panel: let the slider shrink and long reasoning
     text wrap so neither forces the page wider than the screen. */
  input[type=range] { min-width:0; }
  .deck, .panel, .summary { min-width:0; }
  .pbody, .pbody * { overflow-wrap:anywhere; }
}