/* Pregame lobby (lobby.html) on the design system. player.css still supplies the .panel, .seat-list and .status-pill
   structure; its colour variables are mapped to the ds tokens here so the page carries one palette. */
.play-page { --page: var(--ds-bg); --panel: var(--ds-surface); --panel-soft: var(--ds-surface-2); --line: var(--ds-line); --text: var(--ds-text); --muted: var(--ds-text-muted); --accent: var(--ds-accent); --accent-strong: var(--ds-accent); --mint: var(--ds-ok); --danger: var(--ds-hot); }
.play-page :is(h1, h2, h3, h4) { font-family: var(--ds-font-display); text-transform: uppercase; letter-spacing: .01em; }
:where(.play-page) a { color: var(--ds-cyan); }
.play-page .status-pill[data-status="finished"] { color: var(--ds-cyan); border-color: var(--ds-cyan); background: transparent; }
.play-page .join-code { border-color: var(--ds-line-strong); color: var(--ds-accent); background: var(--ds-bg); }
.play-page .first-time-hint { border-color: var(--ds-line-strong); color: var(--ds-text); background: color-mix(in srgb, var(--ds-cyan) 8%, transparent); }
.play-page .first-time-hint strong { color: var(--ds-cyan); }
.play-page .back-link { margin-bottom: var(--ds-space-4); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lobby-shell {
  position: relative;
  --hero-pad: clamp(20px, 3vw, 48px);
  --col: clamp(260px, 24vw, 360px);
  --stage-inset: calc(var(--hero-pad) + var(--col) + 24px); /* the stage is drawn between the side columns */
  width: 100%; max-width: none; padding: 0 0 70px;
}
.lobby-shell > :is(#auth-required, #create-panel, #lobby-error) { margin-top: 84px; }
/* While no lobby content shows (creating, loading) the floating status bar sits in the flow, so it never covers the weekly card. */
.lobby-shell:not([data-view="hub"]):has(> #lobby-content[hidden]) > .lobby-page-heading { position: static; width: fit-content; max-width: calc(100% - 32px); margin: 16px auto; }

.lobby-shell:not([data-view="hub"]) .lobby-page-heading { width: calc(100% - 2 * var(--stage-inset)); }

/* Status bar (#1150, #1298): the lobby title, its state, the ready count and the status message in one bar as wide as the stage. */
.lobby-page-heading { position: absolute; z-index: 5; top: 16px; left: var(--stage-inset); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; box-sizing: border-box; margin: 0; padding: 8px 22px; border: 1px solid var(--game-frame); border-radius: 12px; background: rgba(8, 11, 20, .82); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(8px); text-align: center; }
.lobby-page-heading .ds-eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lobby-page-heading h1 { margin: 0; font-size: 16px; letter-spacing: .08em; }
.lobby-page-heading #page-message { margin: 0; color: var(--game-text); font-size: 14px; }
.lobby-page-heading #page-message:empty, .lobby-page-heading #lobby-expiry[hidden] { display: none; }
.lobby-page-heading #lobby-expiry { margin: 0; color: var(--game-muted); }
.lobby-page-heading .ready-summary { margin: 0; color: var(--game-good); font-size: 14px; font-weight: 700; }
.lobby-page-heading .ready-summary[hidden] { display: none; }
.lobby-page-heading .status-pill { color: var(--game-text); border-color: rgba(189, 201, 221, .45); background: rgba(8, 11, 20, .78); }
.lobby-page-heading .status-pill[hidden] { display: none; }
.lobby-page-heading .status-pill[data-status="playing"] { color: var(--game-good); }
.lobby-page-heading .status-pill[data-status="finished"] { color: var(--game-cyan); }

/* Hero (#1150, after Henri's sketch): the 3D stage fills the scene; the map, its settings and Start sit in the left column, the
   team panels in the right one, and "Copy connection info" under the agents at the bottom centre. */
.lobby-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr) var(--col);
  grid-template-areas: "side . teams" "side footer teams";
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px 24px;
  min-height: clamp(640px, calc(100svh - 90px), 1000px);
  margin-bottom: var(--ds-space-5);
  padding: 76px var(--hero-pad) 28px;
  overflow: hidden;
  background: var(--ds-scene);
}
.hero-scene { position: absolute; z-index: -1; inset: 0; }
.hero-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-canvas { position: absolute; top: 0; bottom: 0; left: var(--stage-inset); width: calc(100% - 2 * var(--stage-inset)); height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.hero-backdrop { background: center / cover no-repeat; filter: blur(4px) saturate(.95) brightness(.95); opacity: 0; transition: opacity .6s; }
.hero-scene[data-stage="ready"] .hero-backdrop { opacity: 1; }
/* Scrims keep the side columns readable; the agents in the middle stay clear. */
.hero-backdrop::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(5, 7, 13, .9), rgba(5, 7, 13, .35) 28%, transparent 46%, transparent 58%, rgba(5, 7, 13, .4) 74%, rgba(5, 7, 13, .9)), linear-gradient(180deg, rgba(5, 7, 13, .55), transparent 22%, transparent 70%, rgba(5, 7, 13, .8)); }
.hero-canvas { display: block; }

/* Name chip beside the helmet (placed by js/lobby-hero.js; a fixed spot without WebGL). */
.hero-chip { --chip-x: calc((100% - 2 * var(--stage-inset)) * .57); position: absolute; z-index: 1; left: calc(var(--stage-inset) + var(--chip-x)); top: var(--chip-y, 24%); display: grid; justify-items: start; gap: 6px; max-width: min(300px, calc(100% - 2 * var(--stage-inset) - var(--chip-x) - 16px)); transform: translateY(-50%); }
.chip-row { display: flex; align-items: stretch; max-width: 100%; border-radius: 8px; background: rgba(10, 14, 26, .82); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(8px); }
.chip-rank { display: grid; place-items: center; min-width: 44px; padding: 0 10px; border-radius: 8px 0 0 8px; color: #fff; background: var(--ds-chip-blue); font: 900 20px/1 var(--ds-font-display); }
.hero-chip .stage-figure { display: grid; place-items: center; padding-left: 12px; }
.hero-chip .player-avatar { margin: 0; }
.agent-name { min-width: 0; margin: 0; padding: 10px 16px 10px 12px; color: var(--game-text); font: 800 clamp(18px, 1.6vw, 22px)/1.1 var(--ds-font-display); letter-spacing: .06em; overflow-wrap: anywhere; text-transform: uppercase; }
.chip-rank[hidden] + .stage-figure[hidden] + .agent-name { padding-left: 16px; }
.chip-link { display: inline-flex; align-items: center; min-height: 24px; color: var(--game-muted); font-size: 13px; letter-spacing: .06em; text-shadow: 0 1px 8px #000; }
.play-page .chip-link:hover { color: var(--game-text); }

/* Nameplates over the other agents' pedestals (placed by js/lobby-hero.js). Without WebGL the roster lives in the team panels. */
.stage-labels[hidden] { display: none; }
.stage-labels { position: absolute; top: 0; bottom: 0; left: var(--stage-inset); width: calc(100% - 2 * var(--stage-inset)); overflow: hidden; pointer-events: none; }
.hero-scene:not([data-stage="ready"]) .stage-labels { display: none; }
.stage-label { position: absolute; left: clamp(58px, var(--x, 50%), calc(100% - 58px)); top: var(--y, 50%); display: grid; justify-items: center; gap: 1px; max-width: 116px; padding: 3px 9px; border-radius: 6px; background: rgba(8, 11, 20, .78); color: var(--game-text); font: 800 11px/1.15 var(--ds-font-display); letter-spacing: .08em; text-align: center; text-transform: uppercase; transform: translate(-50%, 4px); }
.stage-label[data-kind="open"] { color: var(--game-muted); background: rgba(8, 11, 20, .55); }
.stage-label[data-kind="bot"] .stage-label-kind { color: var(--game-blue); }
.stage-label-kind { white-space: nowrap; }
.stage-label-name { max-width: 100%; overflow: hidden; color: var(--game-muted); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

/* Left column as in the sketch: the map image (about a third of the height) with its big name over the bottom, the tall settings
   box under it, then Start (or the wait notice) as one box at the foot. */
.hero-side { grid-area: side; display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.map-card { position: relative; isolation: isolate; display: flex; flex: 0 0 34%; align-items: flex-end; min-height: 200px; overflow: hidden; border: 1px solid var(--game-frame); border-radius: 16px; background: linear-gradient(135deg, #1a2440, #0a0e1a); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.map-card .lobby-splash { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.map-card::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(0deg, rgba(8, 11, 20, .92), rgba(8, 11, 20, .35) 45%, transparent 75%); }
.map-card-text { min-width: 0; padding: 14px 20px; }
.map-card .ds-eyebrow { margin: 0 0 6px; font-size: 12px; letter-spacing: .14em; }
.map-title { margin: 0; color: var(--game-text); font: 900 clamp(32px, 3.2vw, 58px)/1.05 var(--ds-font-display); letter-spacing: .04em; overflow-wrap: anywhere; }
/* A block box, so the title's text box is its line box: tall fallback fonts can't reach up into the eyebrow. */
.map-title > span { display: block; }
.settings-card { display: grid; flex: 1 1 auto; align-content: start; gap: 12px; min-height: 0; padding: 16px 18px; border: 1px solid var(--game-line); border-radius: 12px; background: rgba(8, 11, 20, .88); }
.settings-card h3 { margin: 0; font-size: 15px; letter-spacing: .1em; }
.setting-row { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); align-items: center; gap: 4px 12px; }
.setting-row .ds-label { margin: 0; color: var(--game-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.setting-row select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-md); color: var(--ds-text); background: var(--ds-bg); }
.setting-row select:disabled { opacity: .85; color: var(--game-muted); }
.settings-card .ds-hint, .settings-footnote { margin: 0; }
.settings-card #setting-note:empty { display: none; }
.settings-footnote { color: var(--game-muted); font-size: 13px; }

.lobby-play-bar { display: grid; gap: 10px; min-width: 0; margin-top: auto; }
.play-actions { display: grid; gap: 10px; }
.lobby-hero .play-actions .ds-btn-cta { width: 100%; min-height: 88px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; }
/* Long labels ("Play again with the same players") stay on two lines instead of filling the column. */
.lobby-hero .play-actions :is(#rematch-public-game, #join-seat) { min-height: 64px; font-size: clamp(18px, 1.6vw, 22px); }
.lobby-hero .ds-btn:focus-visible { outline: 3px solid var(--game-cyan); outline-offset: 3px; }
.waiting-owner { margin: 0; padding: 18px 16px; border: 1px dashed var(--game-line); border-radius: 12px; color: var(--game-text); background: rgba(8, 11, 20, .85); font: 800 clamp(16px, 1.4vw, 19px)/1.25 var(--ds-font-display); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.lobby-play-bar .ds-hint { margin: 0; padding: 4px 10px; border-radius: 6px; background: rgba(8, 11, 20, .85); }
.auto-run-panel { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--game-line); border-radius: 12px; color: var(--game-text); background: rgba(8, 11, 20, .92); }
.auto-run-panel h4, .auto-run-summary h5 { margin: 0; font-size: 15px; letter-spacing: .06em; }
.auto-run-toggle { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 800; cursor: pointer; }
.auto-run-toggle input { width: 22px; height: 22px; accent-color: var(--ds-cta); }
.auto-run-toggle input:focus-visible { outline: 3px solid var(--game-cyan); outline-offset: 3px; }
.auto-run-help, .auto-run-status, .auto-run-feedback { margin: 0; color: var(--game-muted); font-size: 14px; line-height: 1.4; }
.auto-run-status { color: var(--game-text); font-weight: 700; }
.auto-run-feedback:empty { display: none; }
.auto-run-panel .ds-btn { min-height: 48px; }
.auto-run-panel .ds-btn:focus-visible { outline: 3px solid var(--game-cyan); outline-offset: 3px; }
.auto-run-summary { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--game-line); }
.auto-run-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.auto-run-summary dl div { min-width: 0; }
.auto-run-summary dt { color: var(--game-muted); font-size: 13px; }
.auto-run-summary dd { margin: 2px 0 0; font-weight: 800; overflow-wrap: anywhere; }

/* Bottom centre: the one thing a player has to do until their agent is connected, so it pulses until then. */
.stage-footer { grid-area: footer; align-self: end; justify-self: center; display: grid; justify-items: stretch; width: min(100%, 680px); }
.copy-connection { width: 100%; }
.copy-connection[data-attention="true"]:not(:disabled) { animation: connection-pulse 1.6s ease-in-out infinite; }
@keyframes connection-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 152, .65), 0 0 18px rgba(255, 79, 152, .35); }
  50% { box-shadow: 0 0 0 12px rgba(255, 79, 152, 0), 0 0 34px rgba(255, 79, 152, .75); }
}

/* Right column (#1298): Team 1 / Team 2 (or Players) as tall panels from top to bottom; each seat is two lines of text,
   "Name: ..." and "Connected: ...", split by thin rules. */
.hero-teams { grid-area: teams; align-self: stretch; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; contain: size; padding: 0; border: 0; background: none; box-shadow: none; }
.team-panels { display: grid; flex: 1 1 auto; grid-auto-rows: minmax(0, 1fr); gap: 14px; min-height: 0; }
.team-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px 14px 14px; border: 1px solid var(--game-line); border-radius: 12px; background: rgba(8, 11, 20, .88); }
.team-panel[data-team="team-a"] { border-color: var(--game-team-a); }
.team-panel[data-team="team-b"] { border-color: var(--game-team-b); }
/* Compact header so four seats per team fit at 1080p without scrolling: the title, then difficulty + Add/Remove on one row. */
.team-panel-head { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; }
.team-panel-head h4 { grid-column: 1 / -1; }
.team-panel-head .ds-input, .team-panel-head .ds-btn, .hero-teams .seat-list .ds-btn { min-height: 32px; padding-block: 0; }
.team-panel-head .ds-input { min-width: 0; height: 32px; padding-inline: 10px 28px; font-size: 13px; }
.team-panel-head .ds-btn { padding-inline: 10px; }
.team-panel h4 { margin: 0; font-size: 14px; letter-spacing: .12em; }
.team-panel[data-team="team-a"] h4 { color: var(--game-team-a); }
.team-panel[data-team="team-b"] h4 { color: var(--game-team-b); }
.team-panel .seat-list { flex: 1 1 auto; min-height: 0; margin: 0; overflow: auto; }
.hero-teams .seat-list { gap: 0; align-content: start; grid-auto-rows: max-content; }
.lobby-shell .hero-teams .seat-list li { min-height: 0; padding: 7px 0; gap: 6px 10px; border: 0; border-top: 1px solid var(--game-line); border-radius: 0; background: none; }
.lobby-shell .hero-teams .seat-list li:first-child { border-top: 0; }
.hero-teams .seat-info { gap: 1px; flex-basis: 110px; }
.hero-teams .seat-list .ds-btn { margin-left: auto; }

/* Progress column: big condensed season title, pink standing, then goal rows split by thin progress lines (js/lobby-progress.js). */
.hero-progress { min-width: 0; }
.progress-season-name { margin: 0; font-size: clamp(30px, 2.6vw, 40px); }
.progress-season-rank { margin: 6px 0 0; color: var(--ds-cta); font: 800 clamp(18px, 1.6vw, 24px)/1.1 var(--ds-font-display); letter-spacing: .04em; text-transform: uppercase; }
.progress-season-ended { margin: 10px 0 0; color: var(--game-muted); font-size: 13px; }
.play-page .progress-season-link { display: inline-flex; align-items: center; min-height: 40px; margin-top: 16px; padding: 0 22px; border-radius: 6px 22px 22px 6px; color: var(--game-text); background: rgba(189, 201, 221, .2); font: 800 12px/1 var(--ds-font-display); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.play-page .progress-season-link:hover { background: rgba(189, 201, 221, .32); }
.progress-subtitle { margin: 24px 0 0; color: var(--game-muted); font: 700 12px/1.3 var(--ds-font-display); letter-spacing: .12em; text-transform: uppercase; }
.progress-goals { display: grid; margin: 0; padding: 0; list-style: none; }

/* Under the hero: the invite bar, then the player's progress, connecting the agent, spectators and match links. */
.lobby-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: var(--ds-space-4); margin-bottom: var(--ds-space-4); }
.tools-side { display: grid; gap: 14px; min-width: 0; }
.lobby-tools .panel { border-color: var(--game-line); background: rgba(8, 11, 20, .9); }
.tools-side .panel { padding: 18px; }
/* Inviting is the creator's first step: one compact row above the other tools. */
.lobby-shell #invite-panel { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 18px; }
.lobby-shell #invite-panel h3 { margin: 0; font-size: 16px; }
.lobby-shell #invite-panel .code-row { flex: 1 1 420px; min-width: 0; margin: 0; }
.lobby-shell #invite-panel #invite-link { min-width: 0; overflow-wrap: anywhere; }
.lobby-shell #invite-panel #invite-note { flex-basis: 100%; margin: 0; }
.lobby-shell #invite-panel #invite-note:empty { display: none; }
.lobby-shell #invite-panel .code-row, .tools-side .code-row { flex-wrap: wrap; }
.tools-side .match-links .ds-btn { flex: 1 1 200px; }

.lobby-shell .prompt-panel { grid-column: auto; }

/* Player cards. */
.lobby-shell .seat-list { gap: 10px; }
.lobby-shell .seat-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 14px; min-height: 68px; padding: 12px 14px; border-radius: var(--ds-radius-md); background: var(--ds-bg-raised); }
.lobby-shell .seat-list li[data-state="occupied"] { border-color: var(--ds-line-strong); }
.lobby-shell .seat-list li[data-state="open"] { border-style: dashed; }
.seat-info { display: grid; flex: 1 1 140px; gap: 2px; min-width: 0; }
.lobby-shell .seat-name { font-size: 15px; overflow-wrap: anywhere; }
.lobby-shell .seat-kind { flex-shrink: 1; color: var(--ds-text-muted); font-size: 13px; overflow-wrap: anywhere; text-transform: none; }
.lobby-shell .seat-list li[data-connected="true"] .seat-kind { color: var(--game-good); }


/* "Fill empty seats with bots": one compact block instead of a form per seat. */
.lobby-shell #opponent-picker { grid-column: 1 / -1; }
.lobby-shell .bot-fill { margin-top: 4px; padding: 12px 14px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); background: var(--ds-bg-raised); }
.bot-fill-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.bot-fill-head h4 { margin: 0; font-size: 15px; }
.lobby-shell .bot-fill > p { margin: 6px 0 0; }
.lobby-shell .bot-fill > p:empty { display: none; }
.lobby-shell #opponent-choices { display: grid; gap: 8px; margin-top: 10px; }
.lobby-shell #opponent-choices > p { margin: 0; }
.lobby-shell #opponent-choices > div { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 4px 10px; margin: 0; }
.lobby-shell #opponent-choices > div label { font-size: 13px; font-weight: 700; }
.lobby-shell #opponent-choices > div p { grid-column: 1 / -1; margin: 0; }
/* The per-seat effect note stays available to screen readers and appears while the row is in use. */
.lobby-shell #opponent-choices > div:not(:focus-within) p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lobby-shell #opponent-choices > div .ds-btn { justify-self: stretch; min-height: 44px; }

/* "Connect your agent": one card, one primary action. */
.connect-card .panel-heading { align-items: center; margin-bottom: 4px; }
.connect-card #prompt-note:empty, .connect-card #code-note:empty { display: none; }
.connect-card .code-row { margin-top: 12px; }
.connect-card .code-row .ds-btn { min-height: 44px; }
.connect-card .join-code { flex: 1 1 200px; }
.connect-card .prompt-panel { margin-top: 4px; }
.connect-card .agent-prompt { max-height: 220px; }

/* Create form. */
.lobby-shell #create-form { display: grid; gap: 14px; max-width: 460px; }
.lobby-shell #create-form p { margin: 0; }
.lobby-shell #create-form label { display: inline-block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.lobby-shell #create-form select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-md); color: var(--ds-text); background: var(--ds-bg); }
.lobby-shell #opponent-choices select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-md); color: var(--ds-text); background: var(--ds-bg); }

@media (max-width: 1100px) {
  .lobby-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tools-side { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
}
/* Below 1000px the scene gets its own band at the top; the columns follow it as one stack. */
@media (max-width: 999px) {
  .lobby-shell:not([data-view="hub"]) .lobby-page-heading { position: static; width: fit-content; max-width: calc(100% - 32px); margin: 12px auto; border-radius: 16px; }
  .lobby-hero { --stage-inset: 0px; display: flex; flex-direction: column; align-items: stretch; gap: 22px; min-height: 0; padding: 0 0 8px; overflow: visible; background: none; }
  .hero-canvas { -webkit-mask-image: none; mask-image: none; }
  .hero-scene { position: relative; z-index: 0; inset: auto; height: clamp(440px, 70svh, 720px); overflow: hidden; background: var(--ds-scene); }
  .stage-footer { order: 1; }
  .hero-side, .stage-footer, .hero-teams { width: min(560px, calc(100% - 32px)); margin-inline: auto; }
  .hero-side { order: 2; }
  .map-card { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .hero-side .lobby-play-bar { order: -1; margin-top: 0; }
  .hero-teams { order: 3; max-height: none; overflow: visible; contain: none; }
  .copy-connection { width: 100%; }
}
@media (max-width: 720px) {
  .lobby-shell > :is(#auth-required, #create-panel, #lobby-error) { margin-top: 20px; }
  .lobby-tools { grid-template-columns: minmax(0, 1fr); }
  /* Phones frame the whole figure (js/lobby-hero.js) with the chip as a name plate under its feet. */
  .stage-labels { display: none; }
  .hero-chip { left: 50%; top: auto; bottom: 14px; justify-items: center; max-width: calc(100% - 32px); transform: translateX(-50%); }
  .lobby-hero .play-actions .ds-btn-cta { min-height: 72px; }
  /* A shorter stage keeps the connection call-to-action in the first screen of a small phone. */
  .hero-scene { height: clamp(260px, 40svh, 480px); }
  .lobby-shell .seat-list .ds-btn { flex-basis: 100%; }
  .connect-card .panel-heading .ds-btn { width: 100%; }
  .setting-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-shell .ds-btn, .lobby-hero .play-actions .ds-btn-cta, .hero-backdrop { transition: none; }
  .lobby-shell .ds-btn:hover:not(:disabled) { transform: none; }
  .copy-connection[data-attention="true"]:not(:disabled) { animation: none; box-shadow: 0 0 0 4px rgba(255, 79, 152, .6), 0 0 26px rgba(255, 79, 152, .6); }
}

/* Shared Start countdown (#1151, #1317): a cinematic beat over the stage. Letterbox bars slide in, the columns dim (no blur: re-blurring their live content every frame starves the page),
   the stage pushes in, and the number lands inside a ring that drains each second (js/lobby-flow.js). */
.start-countdown { position: fixed; inset: 0; z-index: 50; display: grid; align-content: end; justify-content: center; justify-items: center; gap: 12px; padding-bottom: calc(9vh + clamp(24px, 6vh, 72px)); pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 7, 13, .7), transparent 55%), linear-gradient(90deg, rgba(5, 7, 13, .55), transparent 30%, transparent 70%, rgba(5, 7, 13, .55));
  animation: countdown-in .35s ease-out; }
.start-countdown[hidden] { display: none; }
.start-countdown::before, .start-countdown::after { position: absolute; left: 0; right: 0; height: 9vh; content: ""; background: #000; animation: letterbox-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.start-countdown::before { top: 0; --from: -100%; }
.start-countdown::after { bottom: 0; --from: 100%; }
.start-countdown-label { margin: 0; color: var(--game-text); font: 800 clamp(15px, 1.3vw, 20px)/1 var(--ds-font-display); letter-spacing: .32em; text-shadow: 0 2px 12px #000; text-transform: uppercase; }
.start-countdown-dial { position: relative; display: grid; place-items: center; width: clamp(150px, 15vw, 230px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(8, 11, 20, .78) 58%, rgba(8, 11, 20, .35) 70%, transparent 72%); }
.start-countdown-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.start-countdown-ring circle { fill: none; stroke-width: 3; }
.start-countdown-ring .ring-track { stroke: rgba(189, 201, 221, .18); }
.start-countdown-ring .ring-fill { stroke: var(--ds-cta); stroke-dasharray: 1; filter: drop-shadow(0 0 6px rgba(255, 79, 152, .8)); }
.start-countdown-number { margin: 0; color: #fff; font: 900 clamp(76px, 8.5vw, 136px)/1 var(--ds-font-display); font-variant-numeric: tabular-nums; text-shadow: 0 0 32px rgba(255, 79, 152, .55), 0 4px 18px #000; }
.start-countdown[data-phase="go"] .start-countdown-number { color: var(--ds-cta); font-size: clamp(18px, 1.6vw, 26px); letter-spacing: .1em; text-transform: uppercase; }
.start-countdown[data-phase="go"] .ring-fill { stroke-dashoffset: 0; animation: ring-flash .6s ease-out 6 alternate; }
.start-countdown-match { margin: 0; padding: 6px 16px; border-radius: 6px; color: var(--game-cyan); background: rgba(8, 11, 20, .78); font: 800 clamp(13px, 1.1vw, 16px)/1.2 var(--ds-font-display); letter-spacing: .2em; text-transform: uppercase; }
.start-countdown-match:empty { display: none; }
/* Everything but the stage steps back while the countdown runs; the stage pushes in towards the agents. */
body[data-countdown] :is(.hero-side, .hero-teams, .stage-footer, .lobby-page-heading) { opacity: .25; transition: opacity .4s; }
body[data-countdown] :is(.hero-canvas, .hero-backdrop) { transform: scale(1.06); transition: transform 5s cubic-bezier(.3, 0, .7, 1); }
@keyframes countdown-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes letterbox-in { from { transform: translateY(var(--from)); } to { transform: none; } }
@keyframes ring-flash { from { opacity: 1; } to { opacity: .35; } }

/* Post-game overlay (#1151, #1317): the result in big condensed type, tinted by win/lose, over the scoreboard; then what's next. */
.postgame { --result: var(--game-cyan); box-sizing: border-box; width: min(600px, calc(100vw - 24px)); max-width: none; max-height: calc(100svh - 24px); margin: auto; padding: 28px 30px 22px; overflow: auto;
  border: 1px solid color-mix(in srgb, var(--result) 55%, transparent); border-radius: 16px; color: var(--game-text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--result) 16%, transparent), transparent 42%), rgba(8, 11, 20, .96);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 30px 80px rgba(0, 0, 0, .7), 0 0 60px color-mix(in srgb, var(--result) 22%, transparent); }
.postgame[data-result="win"] { --result: var(--game-good); }
.postgame[data-result="lose"] { --result: var(--game-pink); }
.postgame[data-result="win"] h2 { animation: postgame-win 1.4s ease-out .2s both; }
@keyframes postgame-win { 0% { transform: scale(.9); text-shadow: 0 0 0 transparent; } 40% { transform: scale(1.06); text-shadow: 0 0 60px var(--result); } 100% { transform: none; } }
.postgame[open] { animation: postgame-in .45s cubic-bezier(.2, .9, .3, 1.1); }
.postgame::backdrop { background: radial-gradient(ellipse at 50% 45%, rgba(5, 7, 13, .45), rgba(5, 7, 13, .85)); backdrop-filter: blur(3px); }
.postgame-eyebrow { margin: 0; color: var(--game-muted); font: 800 12px/1.2 var(--ds-font-display); letter-spacing: .2em; text-transform: uppercase; }
#postgame-match { color: var(--game-cyan); }
#postgame-match:not(:empty)::before { content: "· "; color: var(--game-muted); }
.postgame h2 { margin: 6px 0 0; color: var(--result); font: 900 clamp(44px, 7vw, 76px)/.95 var(--ds-font-display); letter-spacing: .04em; overflow-wrap: anywhere; text-shadow: 0 0 34px color-mix(in srgb, var(--result) 45%, transparent); }
.postgame-sub { margin: 10px 0 0; color: var(--game-text); font-size: 15px; }
.postgame-sub:empty { display: none; }
.postgame-table { width: 100%; margin: 20px 0 22px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.postgame-table th { padding: 0 12px 8px; color: var(--game-muted); font: 800 11px/1 var(--ds-font-display); letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.postgame-table td { padding: 10px 12px; border-top: 1px solid rgba(89, 112, 143, .45); font-size: 15px; }
.postgame-table :is(th, td):not(:first-child) { width: 5.5em; text-align: right; }
.postgame-table tbody tr { animation: postgame-row .4s ease-out both; animation-delay: calc(.18s + var(--row, 0) * 60ms); }
.postgame-table tr.me td { font-weight: 800; background: rgba(81, 221, 248, .08); }
.postgame-table tr.me td:first-child { box-shadow: inset 3px 0 0 var(--game-cyan); }
.postgame-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.postgame-actions > .ds-btn { min-height: 46px; }
.postgame-actions > [hidden] { display: none; }
.postgame-again { grid-column: 1 / -1; min-height: 64px; font-size: clamp(20px, 2vw, 26px); }
.postgame-close { grid-column: 1 / -1; justify-self: center; min-height: 40px; padding: 0 18px; border: 0; color: var(--game-muted); background: none; font: 800 12px/1 var(--ds-font-display); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.postgame-close:hover { color: var(--game-text); }
.postgame :is(.ds-btn, .postgame-close):focus-visible { outline: 3px solid var(--game-cyan); outline-offset: 3px; }
@keyframes postgame-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes postgame-row { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .postgame { padding: 22px 18px 16px; }
  .postgame-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .start-countdown, .start-countdown::before, .start-countdown::after, .postgame[open], .postgame[data-result="win"] h2, .postgame-table tbody tr, .start-countdown[data-phase="go"] .ring-fill { animation: none; }
  body[data-countdown] :is(.hero-side, .hero-teams, .stage-footer, .lobby-page-heading, .hero-canvas, .hero-backdrop) { transition: none; }
  body[data-countdown] :is(.hero-canvas, .hero-backdrop) { transform: none; }
}

/* Play hub. Tabs and controls use the shared shell; the only filled action belongs to the active tab. */
.lobby-shell[data-view="hub"] .lobby-page-heading {
  position: static; display: block; box-sizing: border-box; width: min(var(--ds-container), calc(100% - 2 * var(--ds-edge))); max-width: none;
  margin: var(--ds-space-6) auto 0; padding: 0; border: 0; background: none; box-shadow: none;
  backdrop-filter: none; text-align: left;
}
.lobby-shell[data-view="hub"] .lobby-page-heading h1 { margin: 0; font-size: clamp(2.75rem, 8vw, 4.5rem); letter-spacing: .01em; }
.lobby-shell[data-view="hub"] .lobby-page-heading #page-message:empty { display: none; }
.lobby-shell[data-view="hub"] > #hub { margin-top: var(--ds-space-3); }
.hub-lede { max-width: 58ch; margin: 0 0 var(--ds-space-5); }
.hub-tabs { gap: 0; margin-bottom: var(--ds-space-5); }
.hub-tabs .hub-tab { padding-inline: var(--ds-space-4); }
.hub-tabs .hub-tab[hidden] { display: none; }
.hub-tabs .hub-tab[aria-selected="true"] { color: var(--ds-text); background: transparent; border-bottom-color: var(--ds-accent); box-shadow: none; }
.hub-panel { display: block; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.hub-panel[hidden] { display: none; }
.hub-panel > * { max-width: 100%; }
.hub-panel > .ds-title, .hub-panel > .ds-card-title { margin: 0; }
.hub-panel > p:not(.ds-hint) { color: var(--ds-text-muted); }
.hub-panel .ds-input { color: var(--ds-text); background: var(--ds-bg); border-color: var(--ds-control-line); }
.lobby-shell[data-view="hub"] #create-form { max-width: none; gap: clamp(var(--ds-space-5), 4vw, var(--ds-space-7)); }
.lobby-shell[data-view="hub"] #create-form select.visually-hidden {
  width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.lobby-shell[data-view="hub"] #create-form label.mode-choice,
.lobby-shell[data-view="hub"] #create-form label.map-choice { margin: 0; font-size: inherit; font-weight: inherit; }
.lobby-shell[data-view="hub"] #create-form label.mode-choice { display: grid; }
.lobby-shell[data-view="hub"] #create-form label.map-choice { display: block; }
#practice-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--ds-space-3); }
#practice-settings { display: contents; }
#practice-settings[hidden] { display: none; }
#practice-settings > .ds-label { margin-bottom: calc(-1 * var(--ds-space-2)); }
#practice-form .ds-input { width: auto; min-width: 12rem; }
#practice-form .ds-hint { flex: 1 0 100%; margin: 0; }
.first-match-practice { display: grid; flex: 1 0 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-3); }
.first-match-practice[hidden] { display: none; }
.first-match-practice p { margin: 0; color: var(--ds-text); font-weight: 600; }
.first-match-practice .ds-btn { justify-self: start; }
.practice-submit-group { display: grid; flex: 1 0 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-3); }
.practice-submit-group .ds-hint { max-width: 52ch; }
#join-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--ds-space-3); max-width: 42rem; }
#join-form .ds-label { grid-column: 1 / -1; margin-bottom: calc(-1 * var(--ds-space-2)); }
#join-input { min-width: 0; width: 100%; }
#join-status { grid-column: 1 / -1; }
#practice-prompt { padding: var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); color: var(--ds-text); background: var(--ds-bg); font: var(--ds-fs-sm)/1.55 var(--ds-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
#practice-countdown, #practice-copy-note { color: var(--ds-text-muted); }
#practice-status[tabindex="-1"]:focus { outline: 3px solid var(--ds-cyan); outline-offset: 3px; }
#practice-recovery-note { margin: 0; }
.practice-recovery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); }
.practice-recovery-actions[hidden] { display: none; }
.practice-recovery-actions > [hidden] { display: none; }
.hub-setup-prompt { display: grid; gap: var(--ds-space-2); margin-top: var(--ds-space-3); padding-top: var(--ds-space-3); border-top: 1px solid var(--ds-line); }
.hub-setup-prompt h4, .hub-setup-prompt p { margin: 0; }
.hub-setup-prompt h4 { color: var(--ds-text); font-size: var(--ds-fs-md); }
.hub-setup-prompt .setup-prompt-text { width: 100%; max-height: 8rem; overflow: auto; margin: 0; padding: var(--ds-space-3); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-md); color: var(--ds-text); background: var(--ds-bg); font: var(--ds-fs-xs)/1.5 var(--ds-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.hub-setup-prompt .setup-prompt-text:focus-visible { outline: 3px solid var(--ds-cyan); outline-offset: 2px; }
.practice-private-prompt { display: grid; gap: var(--ds-space-3); }
.practice-private-prompt[hidden] { display: none; }
.practice-private-prompt h3, .practice-private-prompt p { margin: 0; }
.practice-private-prompt h3 { font-size: var(--ds-fs-md); }
@media (min-width: 721px) {
  .hub-setup-prompt > .ds-btn, .practice-private-prompt > .ds-btn { justify-self: start; }
}
.hub-panel .own-lobbies { margin-top: var(--ds-space-3); }
.hub-panel-heading { display: grid; gap: var(--ds-space-2); margin-bottom: var(--ds-space-5); }
.hub-panel-heading > * { margin: 0; }
.hub-panel-heading > p { max-width: 58ch; color: var(--ds-text-muted); }
.custom-game-form { display: grid; grid-template-areas: "options summary"; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: start; gap: clamp(var(--ds-space-5), 4vw, var(--ds-space-7)); }
.custom-game-options { grid-area: options; display: grid; gap: var(--ds-space-5); min-width: 0; }
.hub-choice-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.hub-choice-section legend { margin-bottom: var(--ds-space-3); }
.mode-choice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-2); }
.mode-choice { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; gap: var(--ds-space-3); min-height: 76px; padding: var(--ds-space-3); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-md); color: var(--ds-text); background: var(--ds-bg-raised); cursor: pointer; }
.mode-choice:has(input:checked) { border-color: var(--ds-accent); background: var(--ds-surface); }
.mode-choice input, .map-choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--ds-accent); }
.mode-choice input { margin-top: .1rem; }
.mode-choice:has(input:focus-visible), .map-choice:has(input:focus-visible) { outline: 3px solid var(--ds-cyan); outline-offset: 3px; }
.mode-choice-copy { display: grid; gap: .25rem; min-width: 0; }
.mode-choice-name { font: 800 var(--ds-fs-md)/1.1 var(--ds-font-display); letter-spacing: .04em; text-transform: uppercase; }
.mode-choice-detail { color: var(--ds-text-muted); font-size: var(--ds-fs-xs); line-height: 1.4; }
.map-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-3); }
.map-choice { position: relative; display: block; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--ds-control-line); border-radius: var(--ds-radius-md); background: var(--ds-bg-raised); cursor: pointer; }
.map-choice:has(input:checked) { border-color: var(--ds-accent); }
.map-choice-unavailable { cursor: not-allowed; }
.map-choice-unavailable img { opacity: .45; }
.map-choice input { position: absolute; z-index: 2; top: var(--ds-space-2); left: var(--ds-space-2); }
.map-choice img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-choice-name { position: absolute; right: 0; bottom: 0; left: 0; display: block; padding: var(--ds-space-2) var(--ds-space-3); background: rgba(7, 10, 18, .9); color: var(--ds-text); font: 800 var(--ds-fs-sm)/1.2 var(--ds-font-display); letter-spacing: .04em; text-transform: uppercase; }
.map-choice-no-preview { display: grid; width: 100%; height: 100%; place-items: center; padding: var(--ds-space-3); color: var(--ds-text-muted); font-size: var(--ds-fs-xs); text-align: center; }
.player-count-field { display: grid; grid-template-columns: auto minmax(5rem, 8rem); align-items: center; gap: var(--ds-space-3); }
.player-count-field .ds-label { margin: 0; }
#create-players { width: 100%; min-height: 48px; }
#create-selection-note { margin: 0; }
#create-selection-note:empty { display: none; }
.match-summary { grid-area: summary; position: sticky; top: 84px; display: grid; gap: var(--ds-space-4); padding: var(--ds-space-5); }
.match-summary .ds-card-title { margin: 0; }
.match-summary dl { display: grid; gap: var(--ds-space-3); margin: 0; }
.match-summary dl > div { display: flex; justify-content: space-between; gap: var(--ds-space-3); padding-bottom: var(--ds-space-2); border-bottom: 1px solid var(--ds-line); }
.match-summary dt { color: var(--ds-text-muted); }
.match-summary dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.match-summary .match-clock-note { margin: 0; }
.match-summary .ds-btn, .match-summary .ds-link { justify-self: stretch; text-align: center; }
.match-summary .ds-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.lobby-shell[data-view="hub"] .weekly-challenge { width: 100%; margin-inline: 0; border: 1px solid var(--ds-line); }
.hub-prep { margin: 0; padding: var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); color: var(--ds-text); background: var(--ds-bg-raised); font-size: var(--ds-fs-sm); }
.hub-prep h3 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-md); }
.hub-prep p { margin: 0 0 var(--ds-space-2); }
.hub-prep a { color: var(--ds-cyan); }

/* Visual feedback on every start action: a spinner on the pressed button and a coloured status line. */
.hub-status { padding-left: 0; color: var(--ds-text-muted); }
.hub-status:empty { display: none; }
.hub-status[data-state] { padding: var(--ds-space-2) var(--ds-space-4); border: 1px solid var(--ds-cyan); border-radius: var(--ds-radius-md); background: color-mix(in srgb, var(--ds-cyan) 8%, transparent); color: var(--ds-text); }
.hub-status[data-state="ok"] { border-color: var(--ds-ok); background: color-mix(in srgb, var(--ds-ok) 10%, transparent); }
.hub-status[data-state="error"] { border-color: var(--ds-hot); background: color-mix(in srgb, var(--ds-hot) 10%, transparent); }
.hub-status[data-state="busy"]::after, .ds-btn[data-busy]::after { display: inline-block; width: 1em; height: 1em; margin-left: .6em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.15em; content: ""; animation: hub-spin .8s linear infinite; }
.ds-btn[data-busy] { opacity: 1; cursor: progress; }
#queue-state[data-state="queued"] { border: 1px solid var(--ds-cyan); border-radius: var(--ds-radius-md); padding: var(--ds-space-2) var(--ds-space-3); animation: hub-pulse 1.6s ease-in-out infinite; }
#queue-state[data-state="matched"] { border: 1px solid var(--ds-ok); border-radius: var(--ds-radius-md); padding: var(--ds-space-2) var(--ds-space-3); }
@keyframes hub-spin { to { transform: rotate(360deg); } }
@keyframes hub-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .hub-status[data-state="busy"]::after, .ds-btn[data-busy]::after, #queue-state[data-state="queued"] { animation: none; }
}

/* Ranked panel (ranked-panel.js). */
.ranked-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.ranked-section { margin-top: 24px; }
#ranked-format { max-width: 220px; min-height: 44px; }
#ranked-modes, #ranked-maps { border: 0; padding: 16px 0; }
#mode-options label, #map-options label { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
#mode-options input, #map-options input { width: 24px; height: 24px; }
#ranked-prompt { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--ds-bg); padding: 16px; font-size: 13px; }
#ranked-games { list-style: none; padding: 0; }
#ranked-games li { padding: 12px 0; border-bottom: 1px solid var(--ds-line); }
#ranked-content .ds-label, #ranked-pair-panel .ds-label { display: block; margin: 12px 0 8px; }
#ranked-content #ranked-format + .ds-hint { max-width: 42rem; }
#hub-quick .hub-friend-entry { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; margin: 14px 0 0; color: var(--ds-text-muted); }
#ranked-pair-panel { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ds-line); }
#ranked-friend-search { width: min(100%, 420px); min-height: 44px; }
.ranked-pair-list { display: grid; gap: 8px; list-style: none; margin: 12px 0; padding: 0; }
.ranked-pair-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--ds-line); }
.ranked-pair-list .ranked-pair-message { flex: 1 1 220px; }
.ranked-pair-list .ranked-pair-expiry { opacity: .8; }
.ranked-pair-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#hub-ranked, #hub-ranked[hidden] { display: block; }
#hub-ranked[hidden] { display: none; }

@media (max-width: 720px) {
  .ranked-grid { grid-template-columns: minmax(0, 1fr); }
  .lobby-shell[data-view="hub"] .lobby-page-heading { margin-top: var(--ds-space-5); }
  .hub-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .hub-tabs .hub-tab { justify-content: center; min-width: 0; padding-inline: var(--ds-space-2); line-height: 1.2; text-align: center; white-space: normal; }
  .mode-choice-list, .map-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #practice-form .ds-input { min-width: 0; width: 100%; }
  .first-match-practice, .practice-submit-group { grid-template-columns: minmax(0, 1fr); }
  .practice-submit-group .ds-hint { max-width: none; }
  #join-form { grid-template-columns: minmax(0, 1fr); }
  #join-form > * { grid-column: 1; }
  #join-form .ds-btn { width: 100%; }
  .hub-panel .ds-btn, #practice-form .ds-input, #join-form .ds-input { width: 100%; flex: 1 1 100%; }
}

@media (max-width: 900px) {
  .custom-game-form { grid-template-areas: "options" "summary"; grid-template-columns: minmax(0, 1fr); }
}
.hub-prep { margin: 0; padding: 11px 13px; border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-md); color: var(--ds-text); background: color-mix(in srgb, var(--ds-cyan) 8%, transparent); font-size: 13px; }
.hub-prep h3 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-md); }
.hub-prep p { margin: 0 0 var(--ds-space-2); }
.hub-prep a { color: var(--ds-cyan); }

/* First-match intro on the practice tab (?firstMatch=1): a text sequence whose checkmarks only follow confirmed state. */
.first-match { display: grid; gap: var(--ds-space-3); }
.first-match h3, .first-match p { margin: 0; }
.first-match-steps { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-5); margin: 0; padding: 0; list-style: none; }
.first-match-steps li { display: flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-text-muted); font-weight: 600; }
.first-match-steps li[data-done] { color: var(--ds-text); }
.first-match-steps li[aria-current="step"] { color: var(--ds-text); font-weight: 700; }
.first-match-mark { position: relative; flex: none; width: 20px; height: 20px; border: 2px solid var(--ds-line-strong); border-radius: 50%; }
[aria-current="step"] > .first-match-mark { border-color: var(--ds-cyan); }
[aria-current="step"] > .first-match-mark::after { position: absolute; inset: 4px; border-radius: 50%; background: var(--ds-cyan); content: ""; }
[data-done] > .first-match-mark { border-color: var(--ds-ok); background: var(--ds-ok); }
[data-done] > .first-match-mark::after { position: absolute; top: 2px; left: 6px; width: 5px; height: 9px; border: solid var(--ds-bg); border-width: 0 2px 2px 0; transform: rotate(45deg); content: ""; }
.first-match-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-4); }
.first-match-actions .ds-link { display: inline-flex; align-items: center; min-height: 44px; }