/* Clocktower Bench. Minimal: flat dark surfaces, one lighter surface for cards and tables, thin rules. Gold is the
   one accent (links, the active state); good blue and evil red appear only where they mean a team. Pirata One for
   the wordmark and page titles only; Inter for everything you click or scan; EB Garamond for what you read. The
   model tokens (wooden rim, parchment face, the lab's mark) are the one decorative element, because they help you
   scan. One painted plate, in the home hero. Fonts are self-hosted in assets/fonts (SIL OFL, see OFL.txt). */
@font-face { font-family: "Pirata One"; src: url(fonts/pirata-one.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/inter.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(fonts/eb-garamond.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(fonts/eb-garamond-italic.woff2) format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }

:root {
  --bg: #0f0d13; --surface: #18151d; --surface-2: #211d27; --rule: #2c2733; --rule-2: #3d3646;
  --text: #ece6da; --text-2: #c3baad; --faint: #9e96a7;
  --gold: #e0b052; --gold-2: #f3cd7a;
  --good: #73adf0; --evil: #f06e64; --good-bg: rgba(115,173,240,.12); --evil-bg: rgba(240,110,100,.12);
  /* labs: light versions for lines and bars on the dark page; ink versions for the mark on a token's face */
  --anth-lt: #e48a63; --oai-lt: #5cb8cb; --mixed-lt: #ad91d4;
  --anth: #aa4626; --oai: #165c6c; --mixed: #6a4c8c;
  /* the token (and chart markers) */
  --outline: #08060a; --wood: #3a2418; --wood-2: #684428; --parch: #e4d2aa; --parch-hi: #f4e3b6;
  /* chart ink on the dark page (names kept for the chart code in site.js) */
  --p-ink: var(--text); --p-mute: #8f8799;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --title: "Pirata One", Georgia, serif;
  --wrap: 1120px;
  /* compatibility names used by the page scripts */
  --accent: var(--gold); --accent-2: var(--gold-2); --good-ink: var(--good); --evil-ink: var(--evil);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img, svg, video, iframe { max-width: 100%; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--gold); color: var(--outline); padding: 8px 12px; font-weight: 600; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
h1 { font: 400 clamp(2.4rem, 5vw, 3.4rem)/1.05 var(--title); color: var(--text); margin: 0 0 .3em; letter-spacing: .005em; }
h2 { font: 600 1.35rem/1.25 var(--sans); color: var(--text); margin: 0 0 .6em; letter-spacing: -.01em; }
h3 { font: 600 1.05rem/1.3 var(--sans); color: var(--text); margin: 0 0 .4em; }
p { margin: 0 0 1em; }
.lede { font: 400 1.2rem/1.5 var(--serif); color: var(--text-2); max-width: 40em; }
.prose { font: 400 1.12rem/1.6 var(--serif); color: var(--text); }
.prose h2 { font-family: var(--sans); margin-top: 1.8em; }
.prose h3 { font-family: var(--sans); margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .55em; }
.prose b { font-weight: 600; }
.muted { color: var(--faint); }
.small { font-size: .875rem; }
.sans { font-family: var(--sans); }
.serif { font-family: var(--serif); }
.num, .tnum { font-variant-numeric: tabular-nums; }
.good { color: var(--good); } .evil { color: var(--evil); }
b, strong { font-weight: 600; }
code { font: .86em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: .1em .35em; }
pre { background: var(--surface); border: 1px solid var(--rule); padding: 14px 16px; overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; font-size: .82rem; color: var(--text-2); }

/* ---------- header: the wordmark and every destination, in plain words ---------- */
.top { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 28px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold); flex: none; }
.brand:hover { color: var(--gold-2); text-decoration: none; }
.brand-tok { width: 30px; height: 30px; flex: none; }
.brand span { font: 400 1.6rem/1 var(--title); padding-top: 2px; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 500; font-size: .95rem; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
@media (max-width: 760px) {
  .top .wrap { flex-wrap: wrap; gap: 0; padding-top: 8px; }
  .brand span { font-size: 1.45rem; }
  .nav { order: 2; width: calc(100% + 14px); margin: 2px -7px 0; gap: 0; overflow-x: auto; scrollbar-width: none; justify-content: space-between; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 0 7px; font-size: .92rem; white-space: nowrap; }
}

/* ---------- buttons, chips ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; font: 600 .95rem/1 var(--sans);
  color: var(--text); background: var(--surface); border: 1px solid var(--rule-2); border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--gold); color: var(--text); text-decoration: none; }
.btn.primary { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.btn.primary:hover { background: var(--gold-2); border-color: var(--gold-2); }
.btn[aria-disabled="true"] { opacity: .6; cursor: default; }
.btn[aria-disabled="true"]:hover { border-color: var(--rule-2); }
.btn .small { font-weight: 400; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: .88rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 .8rem/1 var(--sans); padding: 5px 8px; border: 1px solid var(--rule-2); border-radius: 3px; color: var(--text-2); white-space: nowrap; }
.chip.good { color: var(--good); border-color: rgba(115,173,240,.45); }
.chip.evil { color: var(--evil); border-color: rgba(240,110,100,.45); }
.kicker { font: 500 .85rem var(--sans); color: var(--faint); }

/* ---------- tokens: ink outline, wooden rim, parchment face, the lab's mark ---------- */
.tok {
  --s: 30px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; border-radius: 50%; vertical-align: middle; position: relative;
  background: radial-gradient(circle closest-side, var(--parch) 0 calc(100% - var(--s) / 6.5 - 1px), var(--outline) calc(100% - var(--s) / 6.5 - 1px) calc(100% - var(--s) / 6.5), var(--wood) calc(100% - var(--s) / 6.5));
  box-shadow: 0 0 0 1.5px var(--outline), inset 0 0 0 1px var(--wood-2);
}
.tok svg { width: 58%; height: 58%; }
.tok.Anthropic { color: var(--anth); }
.tok.OpenAI { color: var(--oai); }
.tok.Mixed svg { width: 40%; height: 40%; }
.tok.Mixed { grid-auto-flow: column; }
.tok.Mixed .a { color: var(--anth); } .tok.Mixed .o { color: var(--oai); }
.tok.xs { --s: 20px; } .tok.sm { --s: 26px; } .tok.md { --s: 36px; } .tok.lg { --s: 56px; } .tok.xl { --s: 80px; }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--rule); padding: 20px 22px; }
.note { background: var(--surface); border-left: 3px solid var(--gold); padding: 12px 16px; font-size: .95rem; color: var(--text-2); margin: 18px 0; }
.note b:first-child { color: var(--text); }
.block { padding: 44px 0; }
.block.tight { padding: 24px 0; }
.page-head { padding: 40px 0 8px; }
.page-head .lede { margin-bottom: 0; }
.head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.head-row h2 { margin: 0; }
.grid { display: grid; gap: 22px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .grid.two { grid-template-columns: 1fr; } }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.empty { padding: 28px 22px; text-align: center; color: var(--text-2); background: var(--surface); border: 1px dashed var(--rule-2); }
.empty b { display: block; color: var(--text); margin-bottom: 4px; }

/* ---------- home ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: url(img/tower.webp) 70% 30% / cover no-repeat; image-rendering: pixelated; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,13,19,.95) 0%, rgba(15,13,19,.82) 45%, rgba(15,13,19,.25) 100%); }
.hero .wrap { padding-top: 76px; padding-bottom: 64px; }
.hero h1 { font-size: clamp(3rem, 7vw, 4.6rem); color: var(--gold); margin-bottom: .2em; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero .lede { color: var(--text); font-size: 1.3rem; max-width: 30em; margin: 0; }
@media (max-width: 700px) {
  .hero .wrap { padding-top: 48px; padding-bottom: 40px; }
  .hero-bg { background-position: 66% 30%; }
  .hero-bg::after { background: linear-gradient(0deg, rgba(15,13,19,.96) 10%, rgba(15,13,19,.7) 100%); }
  .hero .lede { font-size: 1.15rem; }
  .hero .btns .btn { flex: 1 1 auto; justify-content: center; }
}
.video { position: relative; aspect-ratio: 16 / 9; background: var(--outline); border: 1px solid var(--rule-2); overflow: hidden; }
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.home-foot { color: var(--text-2); margin: 14px 0 0; }

/* ---------- the leaderboard table ---------- */
table.board { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.board th { font-weight: 500; font-size: .8rem; color: var(--faint); text-align: left; padding: 10px 10px; white-space: nowrap; border-bottom: 1px solid var(--rule-2); }
table.board td { padding: 8px 10px; height: 48px; vertical-align: middle; white-space: nowrap; border-bottom: 1px solid var(--rule); }
table.board tbody tr:hover { background: var(--surface-2); }
table.board .num { text-align: right; font-variant-numeric: tabular-nums; }
table.board .rank { color: var(--faint); width: 2em; }
table.board .elo { font-weight: 600; font-size: 1rem; }
table.board .dim { color: var(--faint); }
table.board .model { display: flex; align-items: center; gap: 10px; font-weight: 500; }
table.board .model a { color: var(--text); }
table.board .model a:hover { color: var(--gold-2); }
table.board .labname { display: block; font-size: .78rem; color: var(--faint); font-weight: 400; }
table.board .barcell { width: 32%; min-width: 140px; }
.bar { position: relative; height: 16px; }
.bar .fill { position: absolute; left: 0; top: 4px; bottom: 4px; opacity: .85; }
.bar .fill.Anthropic { background: var(--anth-lt); } .bar .fill.OpenAI { background: var(--oai-lt); } .bar .fill.Mixed { background: var(--mixed-lt); }
.bar .ci { position: absolute; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--text-2); }
.bar .ci::before, .bar .ci::after { content: ""; position: absolute; top: -4px; width: 1.5px; height: 9px; background: var(--text-2); }
.bar .ci::before { left: 0; } .bar .ci::after { right: 0; }
.board-wrap { background: var(--surface); border: 1px solid var(--rule); padding: 4px 8px 10px; }
.board-note { font-size: .85rem; color: var(--faint); margin: 10px 2px 0; }
@media (max-width: 760px) {
  .hide-sm { display: none; }
  table.board { font-size: .9rem; }
  table.board td { padding: 6px 6px; height: 44px; }
  table.board th { padding: 8px 6px; }
  table.board .barcell { min-width: 80px; }
}
@media (max-width: 480px) { .hide-xs { display: none; } table.board .barcell { min-width: 64px; } .board-wrap { padding: 2px 4px 8px; } }

/* ---------- charts ---------- */
figure { margin: 0; }
figcaption, .cap { font-size: .85rem; color: var(--faint); margin-top: 10px; }
.chart { width: 100%; min-height: 120px; position: relative; }
.chart svg { display: block; overflow: visible; }
.chart text { font-family: var(--sans); font-size: 12px; fill: var(--faint); }
.chart text.lbl { fill: var(--text); font-size: 12.5px; }
.chart .grid-line { stroke: var(--rule-2); stroke-width: 1; }
.chart .axis-line { stroke: var(--p-mute); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; color: var(--text-2); margin-bottom: 10px; align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend .tok { --s: 18px; }
.legend i.line { width: 22px; height: 0; border-top: 1.5px dashed var(--p-mute); display: inline-block; }
.legend i.dia { width: 11px; height: 11px; background: var(--mixed-lt); transform: rotate(45deg); display: inline-block; }
.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 4px; overflow: hidden; }
.seg button { font: 500 .85rem/1 var(--sans); min-height: 36px; padding: 0 12px; border: 0; background: var(--surface); color: var(--text-2); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--rule-2); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.tip { position: fixed; z-index: 80; pointer-events: none; max-width: 300px; background: var(--surface-2); color: var(--text); border: 1px solid var(--rule-2); box-shadow: 0 6px 18px rgba(0,0,0,.5); padding: 8px 11px; font: 400 .85rem/1.45 var(--sans); }
.tip b { color: var(--gold-2); font-weight: 600; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.data td, table.data th { padding: 7px 8px; border-top: 1px solid var(--rule); text-align: left; font-weight: 400; }
table.data th { color: var(--faint); font-size: .8rem; font-weight: 500; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.h2h { border-collapse: separate; border-spacing: 2px; font-size: .82rem; margin: 0 auto; }
table.h2h th { font-weight: 500; color: var(--text-2); white-space: nowrap; }
table.h2h th.row { text-align: right; padding-right: 8px; }
table.h2h th.col { height: 112px; vertical-align: bottom; padding: 0; }
table.h2h th.col span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); padding: 4px 0; }
table.h2h td { width: 42px; height: 32px; text-align: center; font-variant-numeric: tabular-nums; cursor: default; }
table.h2h td.self { color: var(--faint); }
.h2h-legend { display: flex; gap: 14px; justify-content: center; font-size: .82rem; color: var(--faint); margin-top: 12px; flex-wrap: wrap; }
.h2h-legend i { display: inline-block; width: 22px; height: 11px; vertical-align: -1px; margin-right: 5px; }
.h2h-legend i.win { background: var(--oai-lt); } .h2h-legend i.lose { background: var(--evil); }

/* ---------- games: one row per game ---------- */
.fbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 14px 0 12px; }
.fbar label, .more-filters label { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; font-weight: 500; color: var(--faint); }
.fbar select, .more-filters select, .viewbar select { font: 400 .92rem/1.2 var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--rule-2); border-radius: 4px; padding: 0 30px 0 10px; min-height: 40px; min-width: 120px;
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.fbar select:focus, .more-filters select:focus { border-color: var(--gold); }
.fbar select:disabled { opacity: .5; cursor: default; }
.fbar .grow { flex: 1; }
.fbar .linkbtn { min-height: 40px; }
.linkbtn { background: none; border: 0; color: var(--gold); font: 500 .9rem var(--sans); cursor: pointer; padding: 0 4px; min-height: 44px; }
.linkbtn:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.more-filters { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 0 0 12px; }
.count { font-size: .9rem; color: var(--text-2); margin: 4px 0 10px; }
.count b { color: var(--text); font-weight: 600; }
.glist { border: 1px solid var(--rule); background: var(--surface); }
.ghead, .grow-g { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) 112px 84px 86px minmax(0, 1fr) 64px; align-items: center; }
.ghead { border-bottom: 1px solid var(--rule-2); }
.ghead > * { padding: 10px 12px; font: 500 .78rem/1.2 var(--sans); color: var(--faint); text-align: left; white-space: nowrap; }
.ghead button { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; margin: -10px 0; color: inherit; font: inherit; }
.ghead button:hover { color: var(--text); }
.ghead button[aria-sort="ascending"], .ghead button[aria-sort="descending"] { color: var(--gold); }
.ghead button[aria-sort="ascending"]::after { content: "↑"; } .ghead button[aria-sort="descending"]::after { content: "↓"; }
.ghead .r, .grow-g .r { text-align: right; justify-content: flex-end; }
.grow-g { position: relative; border-bottom: 1px solid var(--rule); min-height: 52px; }
.grow-g:last-child { border-bottom: 0; }
.grow-g:hover { background: var(--surface-2); }
.grow-g > * { padding: 8px 12px; min-width: 0; }
.grow-g a.rowlink { position: absolute; inset: 0; z-index: 1; }
.grow-g a.rowlink:focus-visible { outline-offset: -2px; }
.grow-g .side { display: flex; align-items: center; gap: 9px; font-weight: 500; overflow: hidden; }
.grow-g .side span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow-g .side .who { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; width: 2.6em; flex: none; }
.grow-g .side.lost { color: var(--text-2); font-weight: 400; }
.grow-g .side.lost .tok { opacity: .7; }
.grow-g .res { font-weight: 600; white-space: nowrap; }
.grow-g .day, .grow-g .players { white-space: nowrap; }
.grow-g .minions { color: var(--text-2); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow-g .twin { position: relative; z-index: 2; font-size: .85rem; justify-self: end; padding: 12px; }
.grow-g .tag { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .03em; color: var(--faint); border: 1px solid var(--rule-2); border-radius: 3px; padding: 2px 5px; margin-left: 6px; vertical-align: 1px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pager .pos { font-size: .9rem; color: var(--text-2); }
@media (max-width: 860px) {
  .ghead { display: none; }
  .grow-g { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "g res" "e meta" "x twin"; row-gap: 0; padding: 8px 0; }
  .grow-g > * { padding: 3px 12px; }
  .grow-g .side.g { grid-area: g; } .grow-g .side.e { grid-area: e; }
  .grow-g .res { grid-area: res; text-align: right; }
  .grow-g .meta { grid-area: meta; text-align: right; color: var(--faint); font-size: .85rem; }
  .grow-g .day, .grow-g .players { display: none; }
  .grow-g .minions { grid-area: x; font-size: .82rem; color: var(--faint); }
  .grow-g .twin { grid-area: twin; padding: 0 12px; min-height: 32px; display: flex; align-items: center; }
}
@media (min-width: 861px) { .grow-g .meta, .grow-g .side .who { display: none; } }

/* ---------- highlights: a simple list ---------- */
.hl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.hl-item { padding: 20px 0 18px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 0 10px; }
.hl-item .n { font: 600 .9rem/1.6 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; }
.hl-item h2 { font: 600 1.2rem/1.3 var(--sans); margin: 0 0 4px; }
.hl-item h2 a { color: var(--text); }
.hl-item h2 a:hover { color: var(--gold-2); }
.hl-item .tg { font: 400 1.1rem/1.45 var(--serif); color: var(--text-2); margin: 0 0 10px; }
.hl-item .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .88rem; color: var(--text-2); }
.hl-item .meta .m { display: inline-flex; align-items: center; gap: 7px; }
.hl-item .links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-weight: 500; font-size: .92rem; }
.hl-item details { margin-top: 8px; }
.hl-item summary { cursor: pointer; color: var(--faint); font-size: .88rem; list-style: none; min-height: 32px; display: inline-flex; align-items: center; }
.hl-item summary::-webkit-details-marker { display: none; }
.hl-item summary::before { content: "+ "; white-space: pre; } .hl-item details[open] summary::before { content: "− "; }
.hl-item .story { font: 400 1.05rem/1.6 var(--serif); color: var(--text-2); margin-top: 8px; max-width: 42em; }
.hl-item blockquote { margin: 12px 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--gold); font-style: italic; color: var(--text); }

/* ---------- the game page ---------- */
.game-head { padding: 26px 0 16px; border-bottom: 1px solid var(--rule); }
.game-head .back { font-size: .9rem; font-weight: 500; }
.matchup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 6px; font: 600 clamp(1.15rem, 2.4vw, 1.5rem)/1.25 var(--sans); }
.matchup .team { display: inline-flex; align-items: center; gap: 9px; }
.matchup .team .who { font-size: .72em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.matchup .vs { color: var(--faint); font-weight: 400; font-size: .85em; }
.matchup .result { padding-left: 14px; border-left: 1px solid var(--rule-2); }
@media (max-width: 700px) { .matchup .result { padding-left: 0; border-left: 0; width: 100%; } }
.game-meta { font-size: .9rem; color: var(--text-2); }
.game-meta a { font-weight: 500; }
.viewbar { position: sticky; top: 60px; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--rule); }
.viewbar .wrap { display: flex; align-items: center; gap: 10px 16px; min-height: 58px; flex-wrap: wrap; padding-top: 7px; padding-bottom: 7px; }
.daytabs { display: flex; gap: 4px; overflow-x: auto; flex: 1 1 320px; min-width: 0; scrollbar-width: none; }
.daytabs::-webkit-scrollbar { display: none; }
.daytabs button { font: 500 .9rem/1 var(--sans); min-height: 40px; padding: 0 13px; background: var(--surface); color: var(--text-2); border: 1px solid var(--rule-2); border-radius: 4px; cursor: pointer; white-space: nowrap; }
.daytabs button:hover { color: var(--text); border-color: var(--faint); }
.daytabs button[aria-selected="true"] { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.viewctl { display: flex; align-items: center; gap: 12px; flex: none; }
.toggle { display: inline-flex; align-items: center; gap: 9px; font: 500 .9rem var(--sans); color: var(--text); cursor: pointer; user-select: none; white-space: nowrap; min-height: 44px; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .knob { width: 38px; height: 22px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--rule-2); position: relative; flex: none; transition: background .15s; }
.toggle .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--faint); transition: left .15s, background .15s; }
.toggle input:checked + .knob { background: rgba(224,176,82,.25); border-color: var(--gold); }
.toggle input:checked + .knob::after { left: 19px; background: var(--gold); }
.toggle input:focus-visible + .knob { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.viewbar select { min-width: 0; min-height: 40px; }
@media (max-width: 700px) {
  .viewbar { top: 96px; }
  .viewbar .wrap { gap: 6px 10px; }
  .daytabs { flex-basis: 100%; }
  .viewctl { width: 100%; justify-content: space-between; }
}
.viewer { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; padding: 24px 0 64px; align-items: start; }
@media (max-width: 999px) { .viewer { grid-template-columns: 1fr; gap: 18px; } #aside { order: -1; } }
#aside { position: sticky; top: 140px; display: grid; gap: 16px; max-height: calc(100vh - 156px); overflow-y: auto; }
@media (max-width: 999px) { #aside { position: static; max-height: none; } }
.loading { color: var(--faint); padding: 40px 0; }
.panel { background: var(--surface); border: 1px solid var(--rule); padding: 12px 14px; }
.panel > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; min-height: 32px; flex-wrap: wrap; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary h3 { margin: 0; font-size: .95rem; }
.panel > summary::after { content: "+"; margin-left: auto; color: var(--faint); }
.panel[open] > summary::after { content: "−"; }
.players { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 8px; }
.players th { text-align: left; color: var(--faint); font-weight: 500; font-size: .75rem; padding: 4px 6px; border-bottom: 1px solid var(--rule-2); }
.players td { padding: 0; border-bottom: 1px solid var(--rule); }
.players tr:last-child td { border-bottom: 0; }
.players button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 4px 6px; cursor: pointer; }
.players button:hover { background: var(--surface-2); }
.players button:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.players tr.on button { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--gold); }
.players .pn { font-weight: 500; min-width: 4.4em; }
.players .pc { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players .pc.good { color: var(--good); } .players .pc.evil { color: var(--evil); }
.players .ps { color: var(--faint); font-size: .78rem; white-space: nowrap; }
.players tr.dead .pn { color: var(--faint); text-decoration: line-through; }
.section { margin-bottom: 34px; }
.section > h2 { display: flex; align-items: center; gap: 10px; font: 600 1.15rem/1.2 var(--sans); padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.section > h2 svg { width: 19px; height: 19px; flex: none; color: var(--faint); }
.section > h2 .kicker { margin-left: auto; }
.collapsed { background: var(--surface); border: 1px dashed var(--rule-2); padding: 12px 14px; color: var(--text-2); font-size: .95rem; }
.collapsed button { font: 600 .88rem var(--sans); background: none; color: var(--gold); border: 0; padding: 0 2px; cursor: pointer; }
.collapsed button:hover { text-decoration: underline; }
.beat { margin-bottom: 18px; }
.beat-h { font: 600 .75rem/1 var(--sans); color: var(--faint); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.msg { padding: 9px 0 10px 14px; border-left: 2px solid var(--rule-2); margin-bottom: 10px; }
.msg .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 600 .9rem/1.3 var(--sans); color: var(--text); margin-bottom: 2px; }
.msg .who .small { font-weight: 400; }
.msg .txt { color: var(--text); font: 400 1.08rem/1.55 var(--serif); white-space: pre-wrap; }
.msg .to { color: var(--text-2); font-weight: 500; }
.msg .dead { color: var(--faint); font-weight: 400; font-size: .85rem; }
.msg.whisper { border-left-color: #8f7cc8; background: rgba(143,124,200,.07); padding-right: 12px; }
.msg.whisper .txt { font-style: italic; }
.msg.whisper.evilchat { border-left-color: var(--evil); background: var(--evil-bg); }
.msg.secret { border-left: 2px dashed var(--rule-2); color: var(--text-2); font-size: .95rem; }
.msg.sys { border: 0; padding: 2px 0; color: var(--faint); font-style: italic; font-family: var(--serif); }
.msg.hit, .nom.hit, .verdict.hit { box-shadow: 0 0 0 2px var(--gold); }
.think-only { color: var(--faint); font: italic 400 1rem var(--serif); margin: 6px 0 9px; }
details.think { margin-top: 6px; }
details.think summary { cursor: pointer; font: 500 .82rem var(--sans); color: var(--gold); list-style: none; min-height: 28px; display: inline-flex; align-items: center; }
details.think summary::before { content: "+ "; white-space: pre; }
details.think[open] summary::before { content: "− "; }
details.think summary::-webkit-details-marker { display: none; }
details.think .body { margin-top: 4px; padding: 9px 12px; background: var(--surface); color: var(--text-2); font: italic 400 1rem/1.55 var(--serif); white-space: pre-wrap; }
.rtag { font: 500 .78rem/1 var(--sans); padding: 2px 6px; border: 1px solid; border-radius: 3px; }
.rtag.good { color: var(--good); border-color: rgba(115,173,240,.45); }
.rtag.evil { color: var(--evil); border-color: rgba(240,110,100,.45); }
.dawn { padding: 4px 0 10px; }
.dawn .narr { font: italic 400 1.08rem/1.5 var(--serif); color: var(--text-2); margin-bottom: 6px; }
.dawn .deaths { font: 600 .95rem var(--sans); color: var(--text); }
.verdict { font: 600 1rem/1.4 var(--sans); padding: 10px 14px; margin: 12px 0; background: var(--surface); border: 1px solid var(--rule-2); }
.verdict.exec { border-color: rgba(240,110,100,.55); }
.verdict b { color: var(--evil); }
.verdict details.think { font-weight: 400; }
.gameover { margin: 26px 0 8px; padding: 18px 0; border-top: 1px solid var(--rule-2); text-align: center; }
.gameover .eyebrow { font: 600 .75rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px; }
.gameover h3 { font: 400 2.6rem/1.1 var(--title); margin: 0 0 6px; }
.nom { background: var(--surface); border: 1px solid var(--rule); padding: 12px 14px; margin-bottom: 14px; }
.nom .head { font: 600 1rem/1.4 var(--sans); color: var(--text); margin-bottom: 6px; }
.nom .arrow { color: var(--faint); font-weight: 400; }
.nom .txt { white-space: pre-wrap; font: 400 1.05rem/1.5 var(--serif); }
.votes { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 6px; }
.vote { font: 500 .82rem/1 var(--sans); padding: 5px 7px; border: 1px solid var(--rule-2); border-radius: 3px; color: var(--faint); }
.vote.yes { color: var(--text); border-color: var(--gold); background: rgba(224,176,82,.12); }
.vote.ghost { border-style: dashed; }
.tally { font: 500 .92rem var(--sans); color: var(--text-2); }
.tally.block { color: var(--evil); }
.daypager { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.intro-text { white-space: pre-wrap; font-size: .9rem; color: var(--text-2); background: var(--surface); padding: 10px 12px; margin: 4px 0 14px; }

/* ---------- about ---------- */
.toc { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 500; font-size: .95rem; margin: 18px 0 0; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 8px; font-family: var(--sans); }
@media (max-width: 700px) { .roles { grid-template-columns: 1fr; } }
.role { background: var(--surface); border-top: 2px solid var(--rule-2); padding: 12px 14px; font-size: .9rem; color: var(--text-2); }
.role b { display: block; font-size: .95rem; color: var(--text); margin-bottom: 3px; }
.role.good { border-top-color: var(--good); } .role.evil { border-top-color: var(--evil); }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 6px; font-family: var(--sans); }
.steps3 > div { background: var(--surface); border: 1px solid var(--rule); padding: 14px 16px; font-size: .92rem; color: var(--text-2); }
.steps3 h3 { font-size: .98rem; }
@media (max-width: 760px) { .steps3 { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { margin-top: 48px; border-top: 1px solid var(--rule); padding: 24px 0 36px; font-size: .88rem; color: var(--faint); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 10px; }
.foot nav a { color: var(--text-2); font-weight: 500; }
.foot nav a:hover { color: var(--gold-2); }
.disclaimer { max-width: 62em; margin: 0; line-height: 1.5; }
.setup-list { columns: 2; column-gap: 24px; font-size: .95rem; }
.setup-list > div { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 560px) { .setup-list { columns: 1; } }
.tally.block { padding: 0; }
.grow-g > * { line-height: 1.3; }