:root {
  color-scheme: dark;
  --bg: #0f1114;
  --surface-1: #16181c;
  --surface-2: #1d2025;
  --line: #2a2e35;
  --grid: #24272d;
  --text-primary: #f4f4f2;
  --text-secondary: #c3c2b7;
  --text-muted: #8d8c85;
  --series-1: #3987e5;
  --series-2: #d95926;
  --band: #383835;
  --median: #8d8c85;
  --good: #2fa36b;
  --warning: #c98500;
  --serious: #e66767;
  --accent: #3987e5;
  /* Resources: magenta, green, an olive gold kept off --warning, violet; validated all-pairs on --surface-1, direct-labelled. */
  --res-food: #d55181;
  --res-wood: #008300;
  --res-gold: #a89200;
  --res-stone: #9085e9;
  --radius: 12px;
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text-primary); }
a { color: inherit; }
main { max-width: 1180px; margin: 0 auto; padding: 24px 20px 48px; outline: none; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 32px; letter-spacing: -0.02em; }
h2 { font-size: 20px; margin-top: 32px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; color: var(--text-secondary); }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--surface-1); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; text-decoration: none; }
.mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--series-1), var(--series-2)); }
.top nav { display: flex; align-items: center; gap: 18px; }
.top nav a { text-decoration: none; color: var(--text-secondary); }
.top nav a:hover, .top nav a[aria-current] { color: var(--text-primary); }

.button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #fff !important; text-decoration: none; font-weight: 600; border: 0; cursor: pointer; font: inherit; }
.button.small { padding: 6px 14px; font-size: 14px; }
.button.ghost { background: transparent; border: 1px solid var(--line); color: var(--text-primary) !important; }
.button:focus-visible, a:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

.card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }


/* Players */
.player-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; transition: border-color 0.15s; }
.player-card:hover { border-color: var(--text-muted); }
.player-card .name { font-weight: 600; font-size: 16px; }
.shields { display: flex; gap: 4px; flex-wrap: wrap; }
.shield { width: 22px; height: 22px; object-fit: contain; }
.shield.big { width: 40px; height: 40px; }

/* Headers */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.crumbs a { color: var(--text-secondary); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-secondary); }
.result-won { color: var(--good); }
.result-lost { color: var(--serious); }

.versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.side { display: flex; align-items: center; gap: 12px; }
.side.right { justify-content: flex-end; text-align: right; }
.side .who { font-weight: 700; font-size: 20px; }
.key-line { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

/* Stat tiles */
.tile .value { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.tile .label { color: var(--text-secondary); font-size: 13px; }
.tile .sub { color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* Advice */
.advice { display: grid; gap: 12px; }
.advice-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.badge.serious { color: var(--serious); }
.badge.warning { color: var(--warning); }
.badge.good { color: var(--good); }
.advice-item h3 { margin: 0 0 4px; }
.advice-item p { margin: 0; }

/* Metrics table */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
td.num, th.num { text-align: right; }
tr.group td { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 16px; }
tbody tr.link { cursor: pointer; }
tbody tr.link:hover td { background: var(--surface-2); }
.pbar { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); min-width: 120px; }
.pbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--series-1); }
.pbar b { position: absolute; top: -3px; bottom: -3px; width: 2px; left: 50%; background: var(--median); }

/* Charts */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .axis text { fill: var(--text-muted); font-size: 11px; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--line); }
.chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .band { fill: var(--band); opacity: 0.55; }
.chart .median { fill: none; stroke: var(--median); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart .hair { stroke: var(--text-muted); stroke-width: 1; }
.chart .dot { stroke: var(--surface-1); stroke-width: 2; }
.chart .label { font-size: 12px; fill: var(--text-secondary); }
.chart .event { stroke: var(--text-muted); stroke-dasharray: 2 3; }
.chart .event-label { fill: var(--text-muted); font-size: 10px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); margin: 6px 0 4px; }
.legend .swatch-band { display: inline-block; width: 16px; height: 10px; border-radius: 2px; background: var(--band); vertical-align: middle; margin-right: 6px; }
.legend .swatch-median { display: inline-block; width: 18px; border-top: 2px dashed var(--median); vertical-align: middle; margin-right: 6px; }
.tooltip { position: fixed; z-index: 20; pointer-events: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); min-width: 140px; }
.tooltip .t-head { color: var(--text-muted); margin-bottom: 4px; }
.tooltip .t-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tooltip .t-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tooltip .t-row span { color: var(--text-secondary); }

/* Trend cards */
.trend-card { display: flex; flex-direction: column; gap: 4px; }
.trend-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.trend-card .value { font-size: 22px; font-weight: 700; }
.dir { font-size: 12px; font-weight: 600; }
.dir.improving { color: var(--good); }
.dir.worsening { color: var(--serious); }
.dir.steady { color: var(--text-muted); }

/* Timeline strips */
.strip { position: relative; height: 26px; background: var(--surface-2); border-radius: 6px; margin: 6px 0 2px; }
.strip i { position: absolute; top: 4px; bottom: 4px; border-radius: 3px; min-width: 3px; }
.strip i.idle { background: var(--warning); }
.strip i.housed { background: var(--series-2); }
.strip i.lost { background: var(--serious); width: 3px; top: 2px; bottom: 2px; }
.strip-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center; }
.strip-scale { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 11px; margin-left: 182px; }

/* The game at a glance: the versus, the coach's headline, the timeline and the tale of the tape */
.glance { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.glance-headline { font-size: 22px; letter-spacing: -0.01em; margin: 0; }
.timeline { position: relative; min-height: 120px; }
.timeline svg { display: block; width: 100%; height: auto; }
.timeline text { font-size: 11px; fill: var(--text-secondary); }
.timeline .gutter { font-size: 12px; fill: var(--text-secondary); }
.timeline .gutter.sub, .timeline .scale, .timeline .axis { font-size: 11px; fill: var(--text-muted); }
.timeline .lane-bg { fill: var(--surface-2); }
.timeline .vgrid { stroke: var(--grid); }
.timeline .zero { stroke: var(--text-muted); stroke-opacity: 0.6; }
.timeline .untrusted { fill: var(--text-muted); fill-opacity: 0.08; }
.timeline .turn { fill-opacity: 0.16; }
.timeline .turn.fall { fill: var(--serious); }
.timeline .turn.rise { fill: var(--good); }
.timeline .turn-label { font-size: 10px; font-weight: 700; pointer-events: none; }
.timeline .turn-label.fall { fill: var(--serious); }
.timeline .turn-label.rise { fill: var(--good); }
.timeline .lead-line { fill: none; stroke: var(--text-primary); stroke-opacity: 0.55; stroke-width: 1.25; stroke-linejoin: round; }
.timeline .age-label { fill: var(--text-primary); font-weight: 600; paint-order: stroke; stroke: rgba(0, 0, 0, 0.45); stroke-width: 2.5px; stroke-linejoin: round; pointer-events: none; }
.timeline .side-label { font-weight: 600; paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.timeline .scale { paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; pointer-events: none; }
.timeline .hit { fill: transparent; }
.timeline .hair { stroke: var(--text-muted); stroke-width: 1; pointer-events: none; }
.timeline .moment, .timeline .pin { cursor: pointer; outline: none; }
.timeline .moment:hover rect, .timeline .moment:focus-visible rect { stroke: var(--text-primary); stroke-width: 1.5; }
.timeline .pin circle { fill: var(--text-primary); }
.timeline .pin text { fill: var(--bg); font-size: 10px; font-weight: 700; }
.timeline .pin:hover circle, .timeline .pin:focus-visible circle { stroke: var(--accent); stroke-width: 2; }
.timeline .pin-line { stroke: var(--text-primary); stroke-opacity: 0.35; stroke-dasharray: 2 3; pointer-events: none; }
.timeline-key { margin: -6px 0 0; font-size: 12px; color: var(--text-muted); gap: 6px 18px; }
.timeline-key .swatch { display: inline-block; width: 12px; height: 9px; border-radius: 2px; vertical-align: middle; margin-right: 3px; background: var(--c); }
.timeline-key .swatch:last-of-type { margin-right: 6px; }
.timeline-key .swatch.fight { background: var(--text-muted); }
.timeline-key .swatch.raid { background: repeating-linear-gradient(135deg, var(--text-muted) 0 2px, transparent 2px 4px); }
.timeline-key .swatch.coming { background: repeating-linear-gradient(135deg, var(--series-1) 0 2px, rgba(57, 135, 229, 0.35) 2px 4px); }
.pin-key { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--text-primary); color: var(--bg); font: normal 700 10px/1 "Segoe UI", system-ui, sans-serif; vertical-align: middle; margin-right: 6px; }
.decide-time .pin-key { width: 18px; height: 18px; font-size: 11px; margin: -3px 6px 0 0; }
.tape { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tape-item { background: var(--surface-2); border-radius: 8px; padding: 8px 12px; }
.tape-item .label { font-size: 12px; color: var(--text-muted); }
.tape-item .vals { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.tape-item .dot-key { width: 8px; height: 8px; margin-right: 5px; }

/* Upload */
.drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 48px 20px; text-align: center; background: var(--surface-1); cursor: pointer; }
.drop.over { border-color: var(--accent); background: var(--surface-2); }
.drop input { display: none; }
.status-line { margin-top: 16px; }
.error { color: var(--serious); }
.empty { padding: 40px; text-align: center; color: var(--text-muted); }
/* Between pages (app.js render): a page that takes more than 150 ms dims the one left under a line along the menu. The
   dimming is on the page left's own nodes, which go with it; the view itself only fades the new page in. */
html.navigating, html.navigating a { cursor: progress; }
html.navigating #view > * { opacity: .6; transition: opacity .25s ease .15s; }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; transition: opacity .2s, transform 0s .2s; }
html.navigating .top::after { opacity: 1; transform: scaleX(.9); transition: opacity .2s .15s, transform 3s cubic-bezier(.15, .7, .3, 1) .15s; }
@media (prefers-reduced-motion: reduce) { html.navigating .top::after { transform: scaleX(1); transition: opacity .2s .15s; } }
.table-toggle { background: none; border: 0; color: var(--text-secondary); text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; padding: 0; }

/* Coach's review */
.coach { margin-top: 16px; border-color: var(--accent); }
.coach .lead { font-size: 16px; color: var(--text-primary); }
.deciding { display: grid; gap: 14px; margin-top: 14px; }
.decide { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.decide-time { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.decide h3 { margin: 0 0 4px; }
.decide p { margin: 0 0 6px; }
.priorities { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.priorities li div { margin-top: 2px; }
.drill { color: var(--text-secondary); }
.drill strong { color: var(--text-primary); }
.goal { margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: var(--surface-2); color: var(--text-primary); }
.goal .badge { color: var(--text-muted); }
.goal .badge.good { color: var(--good); }
.goal .badge.warning { color: var(--warning); }

/* Moments */
.moments { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.moment-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.moment-head h3 { margin: 0; }
.lossbars { display: grid; gap: 6px; }
.lossbar-row { display: grid; grid-template-columns: 110px 1fr 44px; gap: 8px; align-items: center; }
.lossbar-row > .muted { grid-column: 2 / 4; margin-top: -4px; }
.lossbar { height: 8px; border-radius: 4px; background: var(--surface-2); position: relative; }
.lossbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.late { color: var(--serious); }
td.early { color: var(--good); }

/* Replay */
.replay { margin-top: 16px; }
.replay h3 { margin-bottom: 10px; }
.minimap-canvas { display: block; width: 100%; border-radius: 8px; background: #11140f; }
.replay-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.replay-bar input[type=range] { flex: 1; accent-color: var(--accent); }
.mono { font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 44px; }
.dot-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.cross-key { font-style: normal; margin-right: 6px; color: var(--text-secondary); }

/* A player's reviews */
.player-head { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.player-head h1 { margin: 0; }
.match-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--serious); box-shadow: 0 0 0 3px rgba(230, 103, 103, 0.25); animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.reviews { display: grid; gap: 10px; }
/* A review card: its headline is the link to the review and covers the card; the player's name, above it, opens their
   profile. */
.review-row { position: relative; transition: border-color 0.15s; }
.review-row:hover, .review-row:focus-within { border-color: var(--text-muted); }
.review-link { display: block; margin-top: 8px; font-size: 16px; color: var(--text-primary); text-decoration: none; }
.review-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.review-link:focus-visible { outline: none; }
.player-link { position: relative; z-index: 1; color: inherit; text-decoration: none; }
.player-link:hover { text-decoration: underline; }
.review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
/* A game in the lists (owner, 2026-10-21): the result's strip, both players with their score, the map and day, what can be
   done with it. A reviewed game's link covers the card; a player's name, above it, opens their profile. */
.games-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 22px 0 10px; }
.games-head h2 { margin: 0; font-size: 18px; }
.player-head + .games-head { margin-top: 0; }
.score-key { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.games { display: grid; gap: 8px; }
.games-foot { margin-top: 10px; }
/* Home: the brand and access controls live in a stationary left column; the reviews keep their shared compact rows. */
body:has(.home-page) > .top { display: none; }
main:has(> .home-page) { max-width: 1600px; padding: 0; }
.home-page { display: grid; grid-template-columns: clamp(270px, 23vw, 330px) minmax(0, 1fr); align-items: start; }
.home-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100dvh; overflow-y: auto;
  padding: 40px 26px 28px; border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain; }
.home-sidebar > .brand { font-size: 26px; gap: 12px; margin-bottom: 36px; }
.home-sidebar .mark { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.home-early { color: #69b6ff; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; padding: 3px 10px; }
.home-tagline { margin: 22px 0 18px; font-size: clamp(23px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -.02em; }
.home-pitch { font-size: 16px; line-height: 1.5; margin-bottom: 22px; }
.home-sidebar .button { justify-content: center; width: 100%; border-radius: 8px; font-size: 14px; font-weight: 600; min-height: 42px; text-align: center; }
.home-sidebar .home-join { min-height: 48px; gap: 10px; background: #1677e8; border: 1px solid #3987e5; }
.home-join:hover { filter: brightness(1.12); }
.ui-icon { display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; }
.home-icon { flex: none; width: 24px; height: 24px; }
.home-icon.ticket { color: #638cf5; width: 25px; height: 25px; transform: rotate(-25deg); }
.home-steam-note { text-align: center; margin: 10px 0 0; font-size: 11px; color: var(--text-secondary); }
.home-unlock { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.home-unlock h2 { margin: 0 0 22px; font-size: 17px; line-height: 1.35; }
.home-invite-form { display: grid; gap: 9px; }
.home-invite-form label { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.home-invite-form input { width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 14px; }
.home-invite-form input::placeholder { color: #929dad; opacity: 1; }
.home-invite-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-invite-form input[aria-invalid] { border-color: var(--serious); }
.home-sidebar .home-apply { border: 1px solid #3f5d89; background: #1c293d; color: #d2dff3 !important; padding: 9px 12px; }
.home-apply:hover:enabled { background: #263b58; border-color: #638cf5; }
.home-apply:disabled { cursor: wait; opacity: .65; }
.home-form-status { margin: 0; color: var(--serious); }
.home-form-status:empty { display: none; }
.home-footer { margin-top: auto; padding-top: 42px; color: var(--text-secondary); font-size: 11px; }
.home-footer::before { content: ''; display: block; border-top: 1px solid var(--line); margin-bottom: 20px; }
.home-footer p { margin: 0; }
.home-page .reviews-page { min-width: 0; padding: 42px 28px 48px; }
.home-page .player-head { margin-bottom: 24px; }
.home-page .player-head h1 { margin: 0; }
.home-account { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 13px; }
.home-account > span { min-width: 0; overflow-wrap: anywhere; }
.home-account a { text-decoration: none; }
.home-account a:hover { text-decoration: underline; }
.home-access-state { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--text-secondary); font-size: 13px; }
.home-access-state.active { color: #77c99b; }
.home-invitations h2 { margin-bottom: 10px; }
.home-invite-codes { display: grid; gap: 8px; }
.home-invite-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.home-invite-code input { min-width: 0; width: 100%; background: var(--surface-1); border: 1px solid var(--line); border-radius: 6px; color: var(--text-primary); padding: 8px 5px; font: 10px/1.5 monospace; }
.home-invite-code.used { opacity: .55; }
.home-copy { background: transparent; color: var(--text-secondary); font: inherit; font-size: 11px; border: 0; cursor: pointer; padding: 8px 0; }
.home-copy:focus-visible { outline: 2px solid var(--accent); }
.home-copy:disabled { cursor: default; }
.profile-access h2 { margin: 0 0 8px; font-size: 17px; }
@media (max-width: 1100px) { .home-page .reviews-page { padding: 32px 20px; } .home-sidebar { padding: 30px 20px 24px; } }
@media (max-width: 959px) {
  .home-page { grid-template-columns: minmax(0, 1fr); }
  .home-sidebar { position: static; height: auto; overflow: visible; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px;
    padding: 24px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .home-sidebar > .brand { grid-column: 1 / -1; margin: 0; }
  .home-tagline { font-size: 26px; }
  .home-unlock { margin: 0; align-self: start; }
  .home-footer { grid-column: 1 / -1; padding-top: 0; }
  .home-footer::before { margin-bottom: 14px; }
  .home-page .reviews-page { padding: 28px 20px 40px; }
}
@media (max-width: 520px) {
  .home-sidebar { display: flex; gap: 0; padding: 24px 16px; }
  .home-sidebar > .brand { margin-bottom: 26px; }
  .home-unlock { width: 100%; margin-top: 24px; padding-top: 20px; }
  .home-unlock h2 { margin-bottom: 16px; }
  .home-footer { width: 100%; padding-top: 28px; }
  .home-page .reviews-page { padding: 26px 12px 40px; }
  .home-page .player-head h1 { font-size: 26px; }
  .home-invite-code input { font-size: 12px; }
}
/* Profile, version 2: three bands, with soft in-game player colours only behind the central band. */
main:has(> .profile-page) { max-width: 1480px; }
.profile-page { display: grid; grid-template-columns: clamp(240px, 20vw, 280px) minmax(0, 1fr); align-items: start; gap: 32px; }
.profile-sidebar { position: sticky; top: 84px; display: grid; gap: 22px; max-height: calc(100dvh - 108px); overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; scrollbar-gutter: stable;
  padding: 0 22px 4px 0; border-right: 1px solid var(--line); }
.profile-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.profile-name { min-width: 0; }
.profile-identity h1 { font-size: 24px; margin: 0; overflow-wrap: anywhere; }
.profile-rating { margin-top: 3px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.profile-rating strong { color: var(--text-secondary); font-weight: 500; }
.profile-avatar { position: relative; display: grid; place-items: center; flex: none; width: 56px; height: 56px;
  overflow: hidden; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); font-size: 22px; color: var(--text-secondary); }
.profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-review-toggle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; margin: 0; padding: 3px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface-1); }
.profile-review-toggle label { position: relative; min-width: 0; cursor: pointer; }
.profile-review-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.profile-review-toggle span { display: grid; place-items: center; height: 100%; min-height: 32px; padding: 7px 3px; border-radius: 6px; text-align: center; line-height: 1.3;
  font-size: 11px; color: var(--text-muted); transition: color .15s, background .15s; }
.profile-review-toggle input:checked + span { background: var(--surface-2); color: var(--text-primary); }
.profile-review-toggle input:focus-visible + span { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.profile-games { min-width: 0; scroll-margin-top: 84px; }
.profile-wallet { display: grid; grid-template-columns: minmax(220px, .75fr) 2fr; gap: 12px; }
.credit-balance, .credit-banner { border: 1px solid var(--line); border-radius: 12px; padding: 19px 22px; }
.credit-balance { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface-1); }
.credit-balance .wallet-n { font-size: 28px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.credit-balance .cap-note { flex-basis: 100%; margin: 0; }
.credit-banner { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(105deg, #cda44c12, transparent); border-color: #cda44c35; }
.credit-banner > strong { font-size: 17px; color: #e7cf96; }
.credit-banner p { margin: 7px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.profile-sidebar .profile-wallet { grid-template-columns: 1fr; gap: 8px; }
.profile-sidebar .credit-balance, .profile-sidebar .credit-banner { padding: 14px; }
.profile-sidebar .credit-balance { gap: 12px; }
.profile-sidebar .coin.big { font-size: 24px; }
.profile-sidebar .credit-balance .wallet-n { font-size: 25px; }
.profile-sidebar .credit-banner > strong { font-size: 15px; }
.profile-sidebar .credit-banner p { font-size: 12px; }
.profile-sidebar .live-card { align-items: center; gap: 8px; margin: 0; padding: 14px; }
.profile-sidebar .live-card .match-line { flex-basis: 100%; font-size: 13px; }
.profile-sidebar .live-action { width: 100%; margin-left: 0; }
.profile-sidebar .request { width: 100%; }
@media (max-width: 1100px) { .profile-page { gap: 24px; } }
@media (max-width: 959px) {
  .profile-page { grid-template-columns: 1fr; gap: 24px; }
  .profile-sidebar { position: static; max-height: none; overflow: visible; scrollbar-gutter: auto; border-right: 0; border-bottom: 1px solid var(--line);
    padding: 0 0 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; }
  .profile-sidebar .profile-review-toggle { align-self: center; }
  .profile-sidebar .profile-wallet { grid-column: 1 / -1; grid-template-columns: 1fr 2fr; }
  .profile-sidebar .live-card { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .profile-sidebar { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .profile-sidebar .profile-wallet { grid-column: 1; grid-template-columns: 1fr; }
  .profile-sidebar .credit-balance > div { display: flex; align-items: baseline; gap: 14px; }
  .profile-sidebar .credit-balance .wallet-n { font-size: 24px; }
}
.match-days { display: grid; gap: 22px; }
.match-day-title { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.match-day .games, .reviews-page > .games { gap: 10px; }
.match-card { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-1); }
.match-card.openable { cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.match-card.openable:focus-within { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.match-top, .match-middle, .match-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); align-items: center; }
.match-top { min-height: 34px; padding: 4px 18px; gap: 12px; font-size: 11px; border-bottom: 1px solid #ffffff07; }
.match-time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.match-map-name { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.match-action { justify-self: end; display: flex; align-items: center; gap: 8px; text-align: right; }
.match-action .button { min-height: 26px; padding: 4px 10px; font-size: 11px; }
.match-action .price { margin-left: 9px; border-left: 1px solid #ffffff30; padding-left: 9px; }
.match-open { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: #77c99b; font-size: 12px; transition: color .18s ease; }
.match-open::after { content: ''; position: absolute; inset: 0; border-radius: 12px; z-index: 1; }
.match-open:focus-visible { outline: none; }
.match-open-label { display: grid; }
.match-open-label > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .18s ease; }
.match-open-hint { opacity: 0; }
.match-arrow { color: currentColor; transition: transform .18s ease; }
.match-card.openable:focus-within .match-open { color: #a7e6be; }
.match-card.openable:focus-within .match-reviewed { opacity: 0; }
.match-card.openable:focus-within .match-open-hint { opacity: 1; }
.match-card.openable:focus-within .match-arrow { transform: translateX(3px); }
@media (hover: hover) {
  .match-card.openable:hover { transform: translateY(-2px); border-color: #737f77; box-shadow: 0 8px 24px #0005; }
  .match-card.openable:hover .match-open { color: #a7e6be; }
  .match-card.openable:hover .match-reviewed { opacity: 0; }
  .match-card.openable:hover .match-open-hint { opacity: 1; }
  .match-card.openable:hover .match-arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .match-card.openable, .match-open, .match-open-label > span, .match-arrow { transition: none; }
  .match-card.openable:is(:hover, :focus-within), .match-card.openable:is(:hover, :focus-within) .match-arrow { transform: none; }
}
.match-middle { min-height: 96px; padding: 8px 18px; gap: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--player-left) 16%, transparent), transparent 44%, transparent 56%, color-mix(in srgb, var(--player-right) 16%, transparent)); }
.match-player { display: flex; align-items: center; min-width: 0; gap: 16px; }
.match-player.right { flex-direction: row-reverse; text-align: right; }
.match-player-info { min-width: 0; }
.match-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; }
.match-player.right .match-name-line { justify-content: flex-end; }
.match-name { font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.match-name .player-link { z-index: 2; }
.match-result { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--text-secondary); background: #ffffff09; border: 1px solid #ffffff17; border-radius: 4px; padding: 2px 5px; }
.match-result:is(.won, .lost) { background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 24%, transparent); }
.match-rating { display: flex; align-items: baseline; gap: 10px; font-size: 12px; margin-top: 5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.match-player.right .match-rating { justify-content: flex-end; }
.match-rating b { color: var(--text-primary); font-weight: 500; }
.match-delta { font-size: 12px; color: var(--text-muted); }
.match-delta.up, .match-result.won { color: #91cbb0; }
.match-delta.down, .match-result.lost { color: #dca5a5; }
.match-peak { margin-top: 2px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.match-card .score { width: 52px; height: 52px; margin: 0; font-size: 20px; flex: none; font-weight: 600; color: #f0eee8;
  background: radial-gradient(closest-side, var(--surface-1) 84%, transparent 87%), conic-gradient(var(--sc) calc(var(--v) * 1%), #ffffff19 0); }
.match-card .score.none { background: none; border: 2px solid #ffffff23; box-shadow: none; color: var(--text-muted); font-size: 20px; }
.match-map { width: 80px; height: 80px; justify-self: center; display: grid; place-items: center; filter: drop-shadow(0 4px 6px #0008); }
.match-map img { display: block; width: 100%; height: 100%; object-fit: contain; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.match-map.missing { color: var(--text-muted); font-size: 68px; }
.match-bottom { min-height: 32px; padding: 5px 18px; gap: 12px; font-size: 11px; border-top: 1px solid #ffffff07; color: var(--text-secondary); }
.match-civ { display: flex; align-items: center; gap: 8px; min-width: 0; }
.match-civ .shield { flex: none; width: 20px; height: 20px; }
.match-civ.right { justify-content: flex-end; text-align: right; }
.match-duration { text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 11px; }
.match-status { position: relative; font-size: 12px; }
.match-status summary { cursor: pointer; color: var(--text-secondary); padding: 3px 0; }
.match-status.unavailable summary { color: var(--text-muted); }
.match-status summary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; border-radius: 3px; }
.match-status > .request { position: absolute; top: calc(100% + 6px); right: 0; z-index: 4; width: min(290px, calc(100vw - 54px)); padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); box-shadow: 0 8px 32px #0009; line-height: 1.55; }
@media (max-width: 760px) {
  .match-top, .match-middle, .match-bottom { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); padding-left: 14px; padding-right: 14px; gap: 8px; }
  .match-player { gap: 10px; }
  .match-name { font-size: 16px; }
  .match-card .score { width: 46px; height: 46px; font-size: 18px; }
  .match-map { width: 76px; height: 76px; }
  .profile-wallet { grid-template-columns: 1fr 2fr; }
  .credit-balance, .credit-banner { padding: 15px; }
}
@media (max-width: 520px) {
  .profile-wallet { grid-template-columns: 1fr; gap: 8px; }
  .credit-balance { padding: 12px 16px; }
  .credit-balance > div { display: flex; align-items: baseline; gap: 14px; }
  .credit-balance .wallet-n { font-size: 24px; }
  .credit-banner { padding: 14px 16px; }
  .match-top, .match-middle, .match-bottom { grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr); padding-left: 10px; padding-right: 10px; gap: 6px; }
  .match-top { min-height: 34px; font-size: 11px; }
  .match-map-name { font-size: 11px; }
  .match-action .button { font-size: 11px; padding: 5px 7px; }
  .match-action .price { padding-left: 5px; margin-left: 5px; }
  .match-open, .match-status { font-size: 10px; }
  .match-arrow { display: none; }
  .match-middle { min-height: 124px; padding-top: 8px; padding-bottom: 8px; align-items: center; }
  .match-player { flex-direction: column; align-items: flex-start; gap: 7px; }
  .match-player.right { flex-direction: column; align-items: flex-end; }
  .match-name { font-size: 14px; }
  .match-name-line { gap: 4px; }
  .match-result { font-size: 8px; padding: 1px 3px; }
  .match-card .score, .match-card .score.none { width: 34px; height: 34px; font-size: 14px; }
  .match-rating { font-size: 11px; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
  .match-delta, .match-peak { font-size: 10px; }
  .match-map { width: 64px; height: 64px; }
  .match-bottom { font-size: 10px; }
  .match-civ { gap: 4px; overflow-wrap: anywhere; }
  .match-civ .shield { width: 18px; height: 18px; }
  .match-duration { font-size: 11px; }
}
.game-card { position: relative; display: grid; grid-template-columns: 64px minmax(220px, 380px) minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 0 16px 0 0; overflow: hidden; transition: border-color 0.15s; }
.game-card.openable:hover, .game-card.openable:focus-within { border-color: var(--text-muted); }
.gc-result { align-self: stretch; display: grid; place-items: center; min-height: 76px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.gc-result.won { color: var(--good); background: linear-gradient(90deg, rgba(47, 163, 107, 0.2), rgba(47, 163, 107, 0.04)); box-shadow: inset 3px 0 var(--good); }
.gc-result.lost { color: var(--serious); background: linear-gradient(90deg, rgba(230, 103, 103, 0.18), rgba(230, 103, 103, 0.03)); box-shadow: inset 3px 0 var(--serious); }
.gc-sides { display: grid; gap: 6px; min-width: 0; padding: 10px 0; }
.gc-side { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-secondary); }
.gc-side.me { color: var(--text-primary); font-weight: 600; }
.gc-side .shield { flex: none; }
.gc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-rating { flex: none; font-size: 12px; font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gc-meta { min-width: 0; color: var(--text-secondary); font-size: 14px; }
.gc-action { display: grid; justify-items: end; gap: 4px; text-align: right; padding: 10px 0; }
.gc-open { font-weight: 600; color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.gc-open::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.gc-open:focus-visible { outline: none; }
.game-card.openable:focus-within { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.game-card.openable:hover .gc-open { color: var(--accent); }
/* A review on its way (owner, 2026-10-21): the card edged in the accent, its three steps, where it stands, Cancel. */
.game-card.pending { border-color: rgba(57, 135, 229, 0.45); background: linear-gradient(90deg, transparent 40%, rgba(57, 135, 229, 0.07)), var(--surface-1); }
.request { display: grid; gap: 8px; width: 270px; text-align: left; }
.steps { display: flex; margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; flex: 1; display: grid; justify-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); }
.steps li::before { content: ''; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.steps li:first-child::before { display: none; }
.steps li.done::before, .steps li.now::before { background: var(--accent); }
.steps i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-1); box-shadow: inset 0 0 0 2px var(--line); }
.steps li.done i { background: var(--accent); box-shadow: none; }
.steps li.now i { background: var(--accent); box-shadow: 0 0 0 4px rgba(57, 135, 229, 0.25); animation: step-pulse 1.6s ease-in-out infinite; }
.steps li.now span { color: var(--text-primary); font-weight: 600; }
.steps li.now:last-child i { background: var(--good); box-shadow: 0 0 0 4px rgba(47, 163, 107, 0.25); animation: none; }
@keyframes step-pulse { 50% { box-shadow: 0 0 0 7px rgba(57, 135, 229, 0.08); } }
@media (prefers-reduced-motion: reduce) { .steps li.now i { animation: none; } }
.request-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.request-foot .button { padding: 4px 12px; font-size: 13px; }
.request-why { padding: 6px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text-secondary); }
.request-why.failed { background: rgba(201, 133, 0, 0.1); border: 1px solid rgba(201, 133, 0, 0.3); }
.request-why.failed strong { color: var(--warning); }
.request-foot.end { justify-content: flex-end; }
/* A player's score in a game: a ring filled to the score, coloured above (60+) or below (under 40) what is typical. */
.score { --v: 0; --sc: var(--text-muted); flex: none; margin-left: auto; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 12.5px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums;
  background: radial-gradient(closest-side, var(--surface-1) 79%, transparent 81%), conic-gradient(var(--sc) calc(var(--v) * 1%), var(--surface-2) 0); }
.score.hi { --sc: var(--good); }
.score.mid { --sc: var(--accent); }
.score.lo { --sc: var(--warning); }
.score.none { font-weight: 400; color: var(--text-muted); background: none; box-shadow: inset 0 0 0 3px var(--surface-2); }
.score.demo { width: 24px; height: 24px; font-size: 10px; margin: 0; background: radial-gradient(closest-side, var(--bg) 76%, transparent 79%), conic-gradient(var(--sc) calc(var(--v) * 1%), var(--surface-2) 0); }
@media (max-width: 680px) {
  .game-card { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 0 12px; padding-right: 12px; }
  .gc-result { grid-row: 1 / span 2; font-size: 10.5px; letter-spacing: 0.04em; }
  .gc-sides { grid-column: 2 / span 2; padding-bottom: 2px; }
  .gc-meta { grid-column: 2; align-self: center; padding-bottom: 10px; font-size: 13px; }
  .gc-meta > div { display: inline; color: var(--text-secondary); font-size: 13px; }
  .gc-meta > div + div::before { content: ' · '; }
  .gc-action { grid-column: 3; padding: 0 0 10px; }
  /* A review on its way: its steps under the game, the card's whole width. */
  .game-card.pending .gc-result { grid-row: 1 / span 3; }
  .game-card.pending .gc-action { grid-column: 2 / span 2; justify-items: stretch; }
  .game-card.pending .request { width: auto; }
}
/* Credits (plan 018): a coin each (owner, 2026-10-21: "tal vez alguna monedita que los represente"), the balance, the note
   near the cap. */
.coin { position: relative; display: inline-block; flex: none; width: 1.1em; height: 1.1em; border-radius: 50%; vertical-align: -0.2em;
  background: radial-gradient(circle at 34% 28%, rgba(255, 246, 204, 0.95) 0 9%, transparent 32%), linear-gradient(150deg, #ffdc6a 0%, #f0b429 46%, #b97a10 100%);
  box-shadow: inset 0 0 0 0.07em #8d5d08, inset 0 0 0 0.15em #f9d76c, 0 0.06em 0.14em rgba(0, 0, 0, 0.5); }
.coin::after { content: 'A'; position: absolute; inset: 0; display: grid; place-items: center; font: 800 0.58em/1 "Segoe UI", system-ui, sans-serif; color: #865406; }
.coin.big { font-size: 48px; }
.wallet { display: flex; align-items: center; gap: 22px; margin-bottom: 4px; border-color: rgba(240, 180, 41, 0.32);
  background: linear-gradient(115deg, rgba(240, 180, 41, 0.12), rgba(240, 180, 41, 0) 55%), var(--surface-1); }
.wallet-balance { display: flex; align-items: center; gap: 14px; padding-right: 22px; border-right: 1px solid var(--line); }
.wallet-n { display: block; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }
.wallet-text p { margin: 0 0 4px; }
.wallet-text p:last-child { margin-bottom: 0; }
.wallet-tip { font-size: 13.5px; color: var(--text-secondary); }
.wallet-tip .price { color: #ffe6a0; font-weight: 600; }
.name-tag { padding: 1px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-primary); font: 600 12.5px/1.4 Consolas, "Cascadia Mono", monospace; }
.cap-note { color: var(--warning); }
.button.spend { gap: 8px; padding-right: 6px; background: #2a2416; border: 1px solid rgba(240, 180, 41, 0.5); color: #ffe6a0 !important; }
.button.spend:hover:not(:disabled) { border-color: #f0b429; background: #332b18; }
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.price { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); font-variant-numeric: tabular-nums; }
.live-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 12px 16px; border-color: rgba(230, 103, 103, 0.4); }
.live-card .live-action { margin-left: auto; }
@media (max-width: 680px) {
  .wallet { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wallet-balance { padding-right: 0; border-right: 0; }
}
/* Sign-in in the menu. */
.top nav .auth { display: inline-flex; align-items: center; gap: 10px; }
/* The account's menu (owner, 2026-10-21): the chevron beside the name, its list under it; acting as another account, said. */
.top nav .account { position: relative; display: inline-flex; margin-left: -6px; }
.menu-button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-secondary); cursor: pointer; }
.menu-button:hover, .menu-button[aria-expanded="true"] { background: var(--surface-2); color: var(--text-primary); }
.menu-button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.menu-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.menu-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; display: flex; flex-direction: column; min-width: 200px; padding: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.menu[hidden] { display: none; }
.menu-label { padding: 6px 10px 4px; font-size: 12px; color: var(--text-muted); }
.menu [role^="menuitem"] { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--text-primary); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.menu [role^="menuitem"]:hover, .menu [role^="menuitem"]:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
.menu-check { margin-left: auto; color: var(--accent); }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line); }
.acting-label { padding: 2px 8px; border-radius: 999px; background: rgba(201, 133, 0, 0.16); color: var(--warning); white-space: nowrap; }
.linkish { background: none; border: 0; padding: 0; color: var(--text-secondary); font: inherit; cursor: pointer; }
.linkish:hover { color: var(--text-primary); }
.more-block { margin-top: 16px; }
.more-block > summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; padding: 8px 0; }
.more-block[open] > summary { margin-bottom: 8px; }

/* Where the game turned */
.turns { display: grid; gap: 12px; }
.turn-card h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.turn-card.fall { border-left: 3px solid var(--serious); }
.turn-card.rise { border-left: 3px solid var(--good); }
.turn-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; color: var(--bg); }
.turn-no.fall { background: var(--serious); }
.turn-no.rise { background: var(--good); }
.turn-facts { margin: 0; padding-left: 18px; }
.turn-facts li { margin: 3px 0; }
/* Your attention */
.attention { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.attention-tile { padding: 12px 14px; }
.attention-value { margin: 2px 0 6px; font-size: 18px; }
/* Research notes (/research/<id>) */
.rs-hero .lead { font-size: 17px; color: var(--text-secondary); max-width: 860px; }
.rs-sub { color: var(--text-muted); font-size: 13px; margin: -6px 0 12px; max-width: 900px; }
.rs-section > p { max-width: 900px; }
.rs-chart { width: 100%; }
.rs-mini { padding: 12px 14px; }
.rs-mini-title { font-weight: 600; font-size: 13px; min-height: 34px; }
.rs-mini-chart { margin-top: 6px; }
.rs-callout { margin-top: 16px; border-left: 3px solid var(--good); }
.share-row { display: grid; grid-template-columns: minmax(140px, 1.3fr) minmax(80px, 1fr) 44px; gap: 4px 10px; align-items: center; margin: 8px 0; font-size: 13px; }
.share-label { color: var(--text-primary); }
.share-track { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; cursor: default; }
.share-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.share-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--text-muted); }
.share-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.share-note { grid-column: 1 / -1; color: var(--text-muted); font-size: 11.5px; margin-top: -4px; }
.rs-card { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.rs-attr { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.rs-attr strong { font-size: 24px; }
.rs-attr span { color: var(--text-secondary); font-size: 12px; }
.rs-attr.hi strong { color: var(--good); }
.rs-attr.lo strong { color: var(--serious); }
.rs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rs-table th, .rs-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rs-table th { color: var(--text-muted); font-weight: 500; font-size: 12px; text-transform: none; letter-spacing: 0; }
.rs-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.good-text { color: var(--good); }
.corr { border-collapse: collapse; font-size: 12px; }
.corr th, .corr td { padding: 6px 10px; text-align: center; font-variant-numeric: tabular-nums; }
.corr th { color: var(--text-muted); font-weight: 500; text-transform: none; }
.rs-quote { font-size: 15px; margin: 6px 0; }
.rs-review { padding: 10px 0; border-top: 1px solid var(--line); }
.rs-review:first-of-type { border-top: 0; }
.rs-review p { margin: 4px 0; }
@media (max-width: 760px) { .rs-card { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A phone: the menu fits beside the brand. */
@media (max-width: 520px) {
  .top { padding: 12px 14px; gap: 10px; }
  .top nav { gap: 10px; font-size: 15px; }
}