/* Matches list and match summary. Layout only: colours, type and components come from design-system.css. */
body.watch-page { min-height: 100%; margin: 0; padding-bottom: var(--ds-space-7); color: var(--ds-text); background: var(--ds-bg); font-family: var(--ds-font); line-height: 1.5; }
.watch-page *, .watch-page *::before, .watch-page *::after { box-sizing: border-box; }
.watch-page [hidden] { display: none !important; }
.watch-page .language-switch { margin: var(--ds-space-2) 0 0; }
.match-header { margin-bottom: var(--ds-space-5); }
#matchStatus, #summaryStatus { min-height: 1.5em; margin: var(--ds-space-4) 0 var(--ds-space-3); color: var(--ds-text-muted); }

.match-list { display: grid; gap: var(--ds-space-4); }
.match-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-4); }
.match-card > * { flex: 1 1 100%; }
.match-card > * { min-width: 0; overflow-wrap: anywhere; }
.match-card > h2 { flex: 1 1 14rem; margin: 0; font: 800 var(--ds-fs-md)/1.3 var(--ds-font-display); letter-spacing: .04em; }
.match-card p { margin: 0; }
.match-result { flex: 0 1 auto !important; max-width: 100%; padding: 2px var(--ds-space-3); border: 1px solid var(--ds-ok); border-radius: var(--ds-radius-pill); color: var(--ds-ok); background: var(--ds-bg-raised); font: 800 var(--ds-fs-sm)/1.6 var(--ds-font-display); letter-spacing: .06em; text-align: right; }
.match-winner { flex: 0 1 auto !important; max-width: 100%; }
.match-winner .ds-avatar { border-color: var(--ds-ok); color: var(--ds-ok); }
.match-winner .ds-player-name { color: var(--ds-ok); }
.match-meta { color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
.match-participants { color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
.match-participants h2 { margin: 0 0 var(--ds-space-1); color: var(--ds-text); font-size: var(--ds-fs-xs); }
.match-participants ul { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-4); margin: 0; padding: 0; list-style: none; }
.match-scores { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.match-scores li { padding: var(--ds-space-1) var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); background: var(--ds-bg-raised); font-size: var(--ds-fs-sm); }
.match-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); }
.match-actions [role="status"] { color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
.match-card textarea { resize: vertical; font: var(--ds-fs-sm)/1.4 var(--ds-font-mono); }
.match-empty { justify-items: start; }
.match-empty .ds-btn { margin-top: var(--ds-space-2); }
.match-footer { margin: var(--ds-space-5) 0 0; text-align: center; color: var(--ds-text-muted); }

#summary { margin-top: var(--ds-space-4); }
.summary-scores-wrap { min-width: 0; }
.summary-scores { font-variant-numeric: tabular-nums; }
.summary-scores th[scope="row"] { color: var(--ds-text); background: transparent; font: 700 var(--ds-fs-sm)/1.4 var(--ds-font); letter-spacing: 0; text-transform: none; }

@media (max-width: 560px) {
  .match-card { padding: var(--ds-space-4); }
  .match-actions .ds-btn { flex: 1 1 100%; }
}

/* Only the match archive and ranked ladder use this scene; shared competition pages stay independent. */
body.archive-page {
  min-height: 100vh;
  background-color: var(--ds-bg);
  background-image: var(--ds-scene);
  background-attachment: fixed;
  color: var(--game-text);
}
.archive-page .ds-page-header { padding-block: var(--ds-space-7); border-bottom-color: var(--game-line); }
.archive-page .ds-title { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.archive-page .ds-lede { color: var(--game-muted); }
.archive-page .ds-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Replay rows: one strong action, with results and details separated by fine rules. */
.archive-page .match-list { gap: 0; }
.archive-page .match-card { padding: var(--ds-space-5) 0 var(--ds-space-6); border-bottom: 1px solid var(--game-line); }
.archive-page .match-card > h2 { font-weight: 900; text-transform: uppercase; }
.archive-page .match-winner .ds-avatar { border-color: var(--game-good); color: var(--game-good); }
.archive-page .match-winner .ds-player-name { color: var(--game-good); }
.archive-page .match-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); color: var(--game-muted); }
.archive-page .match-participants { color: var(--game-muted); }
.archive-page .match-participants h2 { letter-spacing: .12em; text-transform: uppercase; }
.archive-page .match-scores li { border: 1px solid var(--game-line); border-radius: 0; background: var(--game-cyan-wash); overflow-wrap: anywhere; }
.archive-page .match-actions { margin-top: var(--ds-space-2); }
.archive-page .match-empty { background: var(--ds-scene-scrim); }

/* A podium on an open stage; rank chips and the table carry the same blue/pink palette. */
.archive-page .podium { gap: var(--ds-space-6); }
.archive-page .podium-slot { border-bottom: 2px solid var(--game-line); }
.archive-page .podium-slot[data-rank="1"] { border-bottom-color: var(--ds-cta); box-shadow: none; background: linear-gradient(0deg, var(--game-cyan-wash), transparent); }
.archive-page .ds-avatar { border-color: var(--game-blue); color: var(--game-blue); }
.archive-page .podium-slot[data-rank="1"] .ds-avatar { border-color: var(--ds-cta); color: var(--ds-cta); }
.archive-page .podium-slot .podium-rating { color: var(--game-text); }
.archive-page .podium-slot .podium-meta { color: var(--game-muted); }
.archive-page .rank-chip, .archive-page .podium-rank { border: 0; border-radius: 4px; background: var(--ds-chip-blue); color: #fff; }
.archive-page tr[data-rank="1"] .rank-chip, .archive-page .podium-slot[data-rank="1"] .podium-rank { background: var(--ds-cta); color: var(--ds-cta-ink); }
.archive-page tr[data-rank="2"] .rank-chip, .archive-page tr[data-rank="3"] .rank-chip { color: #fff; border: 0; }
.archive-page tr[data-rank] { background: transparent; }
.archive-page .ds-table-wrap { border: 0; border-top: 1px solid var(--game-line); border-radius: 0; background: var(--ds-scene-scrim); }
.archive-page .ds-table th { color: var(--game-muted); background: transparent; }
.archive-page .ds-table td { padding-block: var(--ds-space-4); }
.archive-page .ds-table th, .archive-page .ds-table td { border-bottom-color: var(--game-line); }
.archive-page .ds-table tbody tr:hover { background: var(--game-cyan-wash); }
.archive-page .bot-id { color: var(--game-muted); }
.archive-page .sparkline-line { stroke: var(--game-cyan); }
.archive-page .sparkline-end { fill: var(--game-cyan); }

@media (max-width: 620px) {
  .archive-page .ds-page-header { padding-block: var(--ds-space-5); }
  .archive-page .podium { gap: var(--ds-space-3); }
  .archive-page .podium-slot { padding-inline: 0; }
  .archive-page section.ds-card { padding-inline: 0; }
  .archive-page .match-actions .ds-btn { flex: 1 1 100%; }
}
.summary-scores .summary-team-total { font-weight: 600; border-top: 2px solid currentColor; }

/* Match summary (#1323): the lobby's framed panel on the dark scene (body.ds-scene-page supplies the scene type),
   team-coloured rows and the pink call to action. */
body.summary-page { background-image: var(--ds-scene); background-attachment: fixed; color: var(--game-text); }
.summary-page .match-header { padding-block: var(--ds-space-6) var(--ds-space-2); }
.summary-page .ds-title { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.summary-page #summary.ds-card { gap: var(--ds-space-4); padding: var(--ds-space-5) var(--ds-space-6); border: 1px solid var(--game-frame); border-radius: 16px; background: var(--game-glass); box-shadow: var(--game-shadow); }
.summary-page #summaryTitle { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.summary-page .match-result { color: var(--game-good); border-color: var(--game-good); background: rgba(130, 240, 192, .08); }
.summary-page .match-meta { color: var(--game-muted); font: 750 var(--ds-fs-sm)/1.4 var(--ds-font-display); letter-spacing: .06em; }
.summary-page .match-participants { color: var(--game-muted); }
.summary-page .match-participants h2 { color: var(--game-cyan); letter-spacing: .12em; text-transform: uppercase; }
.summary-page .ds-table-wrap { border-color: var(--game-line); border-radius: 12px; background: rgba(5, 7, 13, .55); }
.summary-page .ds-table th { color: var(--game-muted); background: transparent; }
.summary-page .ds-table th, .summary-page .ds-table td { padding-block: var(--ds-space-3); border-bottom-color: var(--game-line); }
/* Narrow screens scroll the table sideways inside its frame instead of breaking names and headings per letter. */
.summary-page .summary-scores :is(th, td) { overflow-wrap: normal; white-space: nowrap; }
.summary-page .summary-scores-wrap:focus-visible { outline: 3px solid var(--game-cyan); outline-offset: 3px; }
.summary-page .summary-scores th[scope="row"] { color: var(--game-text); font: 800 var(--ds-fs-sm)/1.4 var(--ds-font-display); letter-spacing: .04em; }
.summary-page .summary-scores tr[data-team] > th[scope="row"] { box-shadow: inset 3px 0 var(--row-team, var(--game-line)); }
.summary-page .summary-scores tr[data-team="team-a"] { --row-team: var(--game-team-a); }
.summary-page .summary-scores tr[data-team="team-b"] { --row-team: var(--game-team-b); }
.summary-page .summary-scores tr[data-team] > th[scope="row"], .summary-page .summary-scores tr[data-team] > td:nth-child(2) { color: var(--row-team, var(--game-text)); }
.summary-page .summary-team-total { border-top-color: var(--game-frame); }
.summary-page .match-actions .ds-btn-cta { min-height: 52px; padding-inline: var(--ds-space-6); }
.summary-page .match-footer { color: var(--game-muted); }
@media (max-width: 560px) {
  .summary-page #summary.ds-card { padding: var(--ds-space-4); }
  .summary-page .summary-scores :is(th, td) { padding-inline: var(--ds-space-3); }
}

/* S4: dense match rows and a readable replay summary, using the S0 site shell. */
.archive-page .ds-page-header { padding-block: var(--ds-space-6) var(--ds-space-5); }
.archive-page .ds-page-header .ds-title { font-size: var(--ds-fs-page); }
.archive-page .match-list { min-width:0; }
.archive-page .match-card {
  display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:
    "title result" "meta result" "participants participants" "scores scores" "actions actions" "fallback fallback";
  align-items:center; gap:var(--ds-space-2) var(--ds-space-5); padding:var(--ds-space-5) 0;
  border:0; border-bottom:1px solid var(--ds-line); border-radius:0; background:transparent; box-shadow:none;
}
.archive-page .match-card > h2 { grid-area:title; min-width:0; margin:0; font-size:var(--ds-fs-md); }
.archive-page .match-winner { grid-area:result; display:inline-flex; align-items:center; justify-self:end; gap:var(--ds-space-2); max-width:min(100%, 18rem); padding:var(--ds-space-2) var(--ds-space-3); border:1px solid var(--ds-line-strong); background:var(--ds-bg-raised); overflow-wrap:anywhere; }
.archive-page .match-winner .ds-avatar { flex:none; width:2rem; height:2rem; border:1px solid var(--ds-ok); color:var(--ds-ok); }
.archive-page .match-winner .ds-player-name { min-width:0; color:var(--ds-text); font:800 var(--ds-fs-sm)/1.2 var(--ds-font-display); letter-spacing:.04em; }
.archive-page .match-meta { grid-area:meta; display:flex; flex-wrap:wrap; align-items:center; gap:var(--ds-space-2); font-size:var(--ds-fs-sm); }
.archive-page .match-meta .ds-chip { border:1px solid var(--ds-line); border-radius:0; color:var(--ds-cyan); background:var(--ds-bg-raised); font:700 var(--ds-fs-xs)/1.2 var(--ds-font-display); letter-spacing:.08em; text-transform:uppercase; }
.archive-page .match-participants { grid-area:participants; padding-top:var(--ds-space-2); }
.archive-page .match-participants h2 { margin-bottom:var(--ds-space-2); font:700 var(--ds-fs-xs)/1.2 var(--ds-font-display); letter-spacing:.1em; text-transform:uppercase; }
.archive-page .match-participants ul { gap:var(--ds-space-2) var(--ds-space-4); }
.archive-page .match-participants a { display:inline-flex; min-height:44px; align-items:center; color:var(--ds-cyan); }
.archive-page .match-scores { grid-area:scores; gap:0 var(--ds-space-4); padding-block:var(--ds-space-2); border-block:1px solid var(--ds-line); }
.archive-page .match-scores li { padding:var(--ds-space-2) 0; border:0; border-radius:0; color:var(--ds-text-muted); background:transparent; font-size:var(--ds-fs-sm); }
.archive-page .match-actions { grid-area:actions; margin:0; }
.archive-page .match-actions > .ds-btn-cta { clip-path:none; color:var(--ds-text); border-color:var(--ds-control-line); background:transparent; }
.archive-page .match-actions > .ds-btn-cta:hover { color:var(--ds-accent); border-color:var(--ds-accent); }
.archive-page .match-actions [role="status"] { min-height:44px; display:flex; align-items:center; }
.archive-page .match-card textarea { grid-area:fallback; width:min(100%, 34rem); }
.archive-page .match-empty { padding:var(--ds-space-6); border:1px dashed var(--ds-control-line); background:transparent; }

.summary-page .match-header { padding-block:var(--ds-space-5) var(--ds-space-3); }
.summary-page .match-header .ds-title { font-size:var(--ds-fs-xl); }
.summary-page #summary.summary-detail { display:grid; gap:var(--ds-space-6); }
.summary-page #summary.ds-card {
  display:grid; gap:var(--ds-space-6); padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
}
.summary-final-header {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--ds-space-4) var(--ds-space-6);
  padding-block:var(--ds-space-5); border-block:1px solid var(--ds-line-strong);
}
.summary-final-copy { display:grid; gap:var(--ds-space-2); min-width:0; }
.summary-scorebug { width:min(100%, 28rem); max-width:100%; overflow:hidden; }
.summary-scorebug .ds-scorebug-team { flex:1 1 0; min-width:0; justify-content:center; overflow-wrap:anywhere; }
.summary-scorebug .ds-scorebug-score { flex:none; }
.summary-scorebug [data-team="b"] { color:var(--ds-team-b-ink); background:var(--ds-team-b); }
.summary-result-chip { display:inline-flex; align-items:center; width:fit-content; max-width:100%; min-height:44px; margin:0; padding:var(--ds-space-2) var(--ds-space-4); border:1px solid var(--ds-line-strong); color:var(--ds-text); background:var(--ds-bg-raised); font:800 var(--ds-fs-lg)/1.2 var(--ds-font-display); letter-spacing:.04em; overflow-wrap:anywhere; }
.summary-meta { display:flex; flex-wrap:wrap; gap:var(--ds-space-2); margin:0; color:var(--ds-text-muted); font:700 var(--ds-fs-sm)/1.4 var(--ds-font-display); letter-spacing:.04em; }
.summary-match-id { margin:0; color:var(--ds-text-muted); font-size:var(--ds-fs-sm); }
.summary-match-id strong { display:block; margin-top:var(--ds-space-1); color:var(--ds-text); font:800 var(--ds-fs-md)/1.2 var(--ds-font-display); letter-spacing:.04em; overflow-wrap:anywhere; }
.summary-content { display:grid; min-width:0; gap:var(--ds-space-6); align-items:start; }
.summary-content h2 { margin:0 0 var(--ds-space-3); font:800 var(--ds-fs-lg)/1.1 var(--ds-font-display); letter-spacing:.04em; text-transform:uppercase; }
.summary-scoreboard, .summary-highlights { min-width:0; }
.summary-score-scroll-hint { display:none; margin:0 0 var(--ds-space-2); color:var(--ds-text-muted); font-size:var(--ds-fs-xs); text-align:right; }
.summary-scoreboard.has-score-overflow .summary-score-scroll-hint { display:block; }
.summary-page .summary-participants { margin-top:var(--ds-space-4); color:var(--ds-text-muted); }
.summary-page .summary-participants h2 { margin-bottom:var(--ds-space-2); color:var(--ds-text); font:700 var(--ds-fs-xs)/1.2 var(--ds-font-display); letter-spacing:.1em; text-transform:uppercase; }
.summary-scores-wrap { min-width:0; border-top:1px solid var(--ds-line); background:var(--ds-bg-raised); overscroll-behavior-inline:contain; scrollbar-width:thin; scrollbar-color:var(--ds-scrollbar) transparent; }
.summary-page .summary-scores { min-width:38rem; font-variant-numeric:tabular-nums; }
.summary-page .summary-scores th { background:transparent; }
.summary-page .summary-scores :is(th, td) { white-space:nowrap; }
.summary-page .summary-scores th[scope="row"] { color:var(--ds-text); font:700 var(--ds-fs-sm)/1.4 var(--ds-font-display); }
.summary-page .summary-scores tr[data-team] > th[scope="row"] { box-shadow:none; }
.summary-page .summary-scores tr[data-team="team-a"] > th[scope="row"] { color:var(--ds-team-a); }
.summary-page .summary-scores tr[data-team="team-b"] > th[scope="row"] { color:var(--ds-team-b); }
.summary-page .summary-team-total { border-top:2px solid var(--ds-line-strong); }
.summary-page #summaryRecap.match-recap { margin:0; padding:var(--ds-space-5); border:1px solid var(--ds-line); border-radius:0; color:var(--ds-text); background:var(--ds-surface); box-shadow:none; }
.summary-page #summaryRecap.match-recap h3 { margin:0 0 var(--ds-space-3); font:800 var(--ds-fs-md)/1.15 var(--ds-font-display); letter-spacing:.03em; }
.summary-page #summaryRecap.match-recap label { color:var(--ds-text-muted); font-size:var(--ds-fs-sm); }
.summary-page #summaryRecap.match-recap .muted { margin-bottom:0; color:var(--ds-text-muted); font-size:var(--ds-fs-xs); line-height:1.5; }
.summary-page #summaryRecap .ds-btn-cta { clip-path:none; color:var(--ds-text); border-color:var(--ds-control-line); background:transparent; }
.summary-page #summaryRecap .ds-btn-cta:hover { color:var(--ds-accent); border-color:var(--ds-accent); }
.summary-actions { display:flex; flex-wrap:wrap; gap:var(--ds-space-3); align-items:center; padding-top:var(--ds-space-4); border-top:1px solid var(--ds-line); }
.summary-share-url { width:min(100%, 42rem); }
.summary-replay-section { min-width:0; }
.summary-replay-section > h2 { margin:0 0 var(--ds-space-3); font:800 var(--ds-fs-lg)/1.1 var(--ds-font-display); letter-spacing:.04em; text-transform:uppercase; }
.summary-replay-frame { width:100%; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--ds-line-strong); background:#05070d; }
.summary-replay-frame iframe { display:block; width:100%; height:100%; border:0; }
.summary-page .match-footer { margin-top:var(--ds-space-6); text-align:left; }
@media (min-width:980px) {
  .summary-content { grid-template-columns:minmax(0, 1.65fr) minmax(18rem, .85fr); }
}
@media (max-width:560px) {
  .archive-page .match-card { grid-template-columns:minmax(0, 1fr); grid-template-areas:"title" "result" "meta" "participants" "scores" "actions" "fallback"; align-items:start; }
  .archive-page .match-winner { justify-self:start; }
  .archive-page .match-scores { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); column-gap:var(--ds-space-3); }
  .summary-final-header { align-items:flex-start; }
  .summary-page #summaryRecap.match-recap { padding:var(--ds-space-4); }
  .summary-actions .ds-btn { flex:1 1 100%; }
}

@media (max-width:720px) {
  html:has(body:is(.archive-page, .watch-page)) { scroll-padding-block-end:calc(80px + env(safe-area-inset-bottom)); }
  body:is(.archive-page, .watch-page):has(.site-nav:not(.site-nav-floating)) { padding-block-end:calc(80px + env(safe-area-inset-bottom)); }
}