/* The Buy Menu look (docs/ui.md). The only place colors, fonts and metrics are defined; components
   use the tokens, never literal values. */

/* ==== Fonts ==== */

@font-face { font-family: "Menu UI"; src: url("/ui/valve/fonts/tahoma.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Menu UI"; src: url("/ui/fonts/tahomabd.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Menu Digits"; src: url("/ui/fonts/FiraSansCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* ==== Tokens ==== */

:root {
  --hud: #FFB21A;
  --hud-dim: #C98A12;
  --fg: #F2E6C8;
  --muted: #B9A988;
  --danger: #FF5A3C;
  --on-hud: #120D02;
  --glass: #000000A6;
  --glass-solid: #0A0905F2;
  --edge: #FFB21A38;
  --sel: #FFB21A26;
  --keycap: #FFFFFF40;
  --hud-wash: #FFB21A14; /* secondary button fill, amber 8% */
  --glow: #FFB21A54; /* digit glow, amber 33% */
  --backdrop-base: #1A1714; /* the backdrop art's average, dimmed as the art is: under it until it shows */
  --glass-game: #000000D9; /* overlays on the undimmed game, black 85% */

  --font-ui: "Menu UI", Tahoma, Verdana, sans-serif;
  --font-digits: "Menu Digits", "Fira Sans Condensed", "Arial Narrow", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Type roles at the 1280x720 reference; text never goes under 12 px. */
  --fs-label: max(12px, 0.75rem);
  --fs-key: max(12px, 0.6875rem);
  --fs-small: max(12px, 0.875rem);
  --fs-body: max(13px, 1.0625rem);
  --fs-item: max(15px, 1.375rem);
  --fs-title: max(17px, 1.625rem);
  --fs-display: max(26px, 3rem);
  --fs-digits: max(34px, 3.75rem);

  /* Spacing steps. */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.75rem; --s7: 2.5rem; --s8: 4rem;
  /* Screen margins: 80 px and 56 px at the reference, never wider than the screen allows. */
  --margin-x: max(16px, min(5rem, 6.25vw));
  --margin-y: max(16px, min(3.5rem, 7.8vh));
  --pad-x: max(16px, 1.75rem);
  /* The frame of every screen (docs/menu-design.md, One system): the rail's width, the strip's
     height, and the head row as tall as the name badge. */
  --rail: 20rem;
  --strip: 6.25rem;
  --head: 3.5rem;

  --radius-panel: 4px;
  --radius-key: 3px;
  --fade: 120ms;
  --bar: 200ms;
  --art-fade: 400ms;
}

/* One rem is 16 px at 1280x720 and scales with the viewport. */
html { font-size: clamp(12px, min(1.25vw, 2.22vh), 24px); }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body { font-family: var(--font-ui); color: var(--fg); -webkit-font-smoothing: antialiased; }
#canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }
button, input { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==== Backdrop: the splash, dimmed and blurred, under a vignette ==== */

/* The art fades in over --backdrop-base once decoded, once per page: index.html and Backdrop put
   `art-ready` on <html>, and later backdrops start shown. */
.menu-root { position: fixed; inset: 0; z-index: 1; }
.backdrop { position: fixed; inset: 0; overflow: auto; background: var(--backdrop-base); isolation: isolate; }
.backdrop-art { position: fixed; inset: -12px; z-index: -2; width: calc(100% + 24px); height: calc(100% + 24px);
  object-fit: cover; filter: brightness(.55) blur(3px); opacity: 0; transition: opacity var(--art-fade) ease-out; pointer-events: none; }
.art-ready .backdrop-art { opacity: 1; }
.backdrop::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, #000000AB 100%); }

/* ==== Panel ==== */

.panel { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--edge); border-radius: var(--radius-panel); animation: fade-in var(--fade) ease-out; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background: var(--glass-solid); }
}
@keyframes fade-in { from { opacity: 0; } }
.panel-title { margin: 0; padding: var(--s5) var(--pad-x) var(--s3); border-bottom: 1px solid var(--edge);
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--hud); }
.panel-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s3);
  padding: var(--s4) var(--pad-x); border-top: 1px solid var(--edge); }
.panel-footer .status { margin-right: auto; font-size: var(--fs-small); color: var(--muted); }
/* Create lobby's footer keeps one row on a desktop: the status shrinks and ellipsizes, the buttons stay whole. */

/* ==== Type ==== */

.wordmark { margin: 0; font-size: var(--fs-display); font-weight: 700; line-height: 1; text-transform: uppercase;
  color: var(--fg); text-shadow: 0 2px 8px #000; letter-spacing: .01em; }
.wordmark .accent { color: var(--hud); }
.digits { font-family: var(--font-digits); font-weight: 700; font-size: var(--fs-digits); line-height: 1;
  color: var(--hud); text-shadow: 0 0 18px var(--glow); font-variant-numeric: tabular-nums; }
.label { margin: 0; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--hud); }
.display { margin: 0; font-size: var(--fs-display); font-weight: 700; line-height: 1.1; color: var(--fg); text-shadow: 0 2px 8px #000; overflow-wrap: anywhere; }
.notice { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.notice.danger { color: var(--danger); }

/* ==== Key caps and hints ==== */

.keycap { display: inline-block; min-width: 1.1em; padding: .05em .45em; border: 1px solid var(--keycap); border-radius: var(--radius-key);
  font-family: var(--font-ui); font-size: var(--fs-key); font-weight: 700; line-height: 1.4; text-align: center; color: var(--fg); }
.key-hints { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; padding: 0; list-style: none;
  font-size: var(--fs-small); color: var(--muted); }
.key-hints li { display: flex; align-items: center; gap: var(--s2); }

/* ==== Buttons ==== */

.btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.25rem; padding: var(--s2) var(--s4);
  border: 1px solid var(--hud-dim); border-radius: 0; background: var(--hud-wash); color: var(--hud);
  font-size: var(--fs-small); font-weight: 700; cursor: pointer; }
.btn .keycap { border-color: currentColor; color: inherit; }
.btn.primary { background: var(--hud); border-color: var(--hud); color: var(--on-hud); }
.btn:hover:not(:disabled), .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn:active:not(:disabled) { background: var(--hud-dim); border-color: var(--hud-dim); color: var(--on-hud); }
.btn:disabled { color: var(--muted); border-color: var(--edge); background: none; opacity: .5; cursor: default; }
.btn[aria-busy="true"] { opacity: 1; color: var(--hud); border-color: var(--hud-dim); }
.key-button { padding: 0; border: 0; background: none; cursor: pointer; }
.key-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ==== Menu list ==== */

.menu-list ol { margin: 0; padding: var(--s3) 0 var(--s4); list-style: none; }
.menu-item { display: flex; align-items: baseline; gap: var(--s4); width: 100%; padding: var(--s2) var(--pad-x);
  border: 0; background: none; text-align: left; cursor: pointer; outline: none; }
.menu-item .num { min-width: .8em; font-size: var(--fs-item); font-weight: 700; color: var(--hud); }
.menu-item .label { flex: 1; font-size: var(--fs-item); font-weight: 400; color: var(--fg); text-transform: none; letter-spacing: 0; }
.menu-item .detail { font-size: var(--fs-small); color: var(--muted); }
.menu-item:focus { background: var(--sel); box-shadow: inset 3px 0 0 var(--hud); }
.menu-item:focus .label { color: var(--hud); }
.menu-item:active:not(:disabled) { background: var(--hud-dim); }
.menu-item:active:not(:disabled) .label, .menu-item:active:not(:disabled) .num { color: var(--on-hud); }
.menu-item:disabled { cursor: default; opacity: .5; }
.menu-item:disabled .num, .menu-item:disabled .label { color: var(--muted); }

/* ==== Fields ==== */

.field { display: inline-flex; flex-direction: column; gap: var(--s1); }
.field-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.text-field { padding: var(--s2) var(--s3); border: 1px solid var(--edge); border-radius: 0; background: #00000066;
  font-size: var(--fs-body); color: var(--fg); outline: none; }
.text-field:focus { border-color: var(--hud); }
.text-field[aria-invalid="true"] { border-color: var(--danger); }
.copy-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border: 1px dashed var(--edge); }
.copy-field .link { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-body); color: var(--fg); overflow-wrap: anywhere; }
.tag { display: inline-block; padding: 0 .4em; border: 1px solid var(--edge); font-size: max(11px, .6875rem); font-weight: 700;
  line-height: 1.5; text-transform: uppercase; letter-spacing: .1em; color: var(--hud); vertical-align: middle; }

/* ==== Name badge ==== */

/* One fixed box in the screen's corner: editing swaps the text for a field of the same height, and a
   refusal hangs under the box, so nothing around it ever moves. */
.corner { position: absolute; top: var(--margin-y); right: var(--margin-x); z-index: 2; display: flex; flex-direction: column;
  align-items: flex-end; gap: var(--s1); width: 22rem; max-width: calc(100% - 2 * var(--margin-x)); }
.corner > .notice { position: absolute; top: 3.5rem; right: 0; margin-top: var(--s1); text-align: right; }
.name-badge { position: relative; box-sizing: border-box; display: flex; align-items: center; gap: var(--s3); width: 100%; height: 3.5rem; padding: 0 var(--s5); }
.name-badge .caption { flex: none; font-size: var(--fs-small); color: var(--fg); }
.name-badge .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-item); font-weight: 700; color: var(--hud); }
.name-badge .name-edit { flex: 1; min-width: 0; display: flex; }
.name-badge .name-edit .field { flex: 1; min-width: 0; }
.name-badge .text-field { box-sizing: border-box; width: 100%; height: 2.25rem; padding: 0 var(--s2); font-size: var(--fs-item); font-weight: 700; line-height: 1; }
.name-badge .name-error { position: absolute; top: 100%; left: 0; right: 0; margin: var(--s1) 0 0; }

/* ==== Numbers ==== */

.hud-stat { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
.hud-stat .caption { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.bar { position: relative; height: .875rem; padding: 2px; border: 1px solid var(--hud-dim); box-sizing: border-box; }
.bar .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--fg); pointer-events: none; }
.bar .fill { height: 100%; max-width: 100%; transition: width var(--bar) linear;
  background: repeating-linear-gradient(90deg, var(--hud) 0 .625rem, transparent .625rem .8125rem); }
.bar.sub { height: .5rem; border-color: var(--keycap); }
.bar.sub .fill { background: repeating-linear-gradient(90deg, var(--muted) 0 .375rem, transparent .375rem .5625rem); }
.score-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.score-table thead th { padding: var(--s3) var(--pad-x) var(--s2); font-size: var(--fs-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted); text-align: left; }
.score-table td, .score-table tbody th { padding: 7px var(--pad-x); font-weight: 400; text-align: left; }
.score-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.score-table tr.own { background: var(--sel); color: var(--hud); }
.score-table tr.bot { color: var(--muted); }

/* ==== Dialog ==== */

.dim { position: fixed; inset: 0; background: #00000080; }
.center { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--margin-y) var(--margin-x); overflow: auto; }
.dialog { width: min(36rem, 100%); box-sizing: border-box; }
.dialog-title { margin: 0; padding: var(--s5) var(--pad-x) var(--s2); font-size: var(--fs-title); font-weight: 700; color: var(--hud); }
.dialog-title.danger { color: var(--danger); }
.dialog-body { margin: 0; padding: var(--s2) var(--pad-x) var(--s5); font-size: var(--fs-body); line-height: 1.45; white-space: pre-line; }
.dialog .notice { padding: 0 var(--pad-x) var(--s5); }
/* The reason behind an error, folded (kit Details). */
.details { margin: 0 var(--pad-x) var(--s4); font-size: var(--fs-small); color: var(--muted); }
.details summary { cursor: pointer; width: max-content; }
.details summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.details pre.error { margin: var(--s2) 0 0; }
pre.error { margin: 0 var(--pad-x) var(--s4); padding: var(--s3); max-height: 40vh; overflow: auto; border: 1px solid var(--edge);
  background: #00000066; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ==== Screens ==== */

.screen { position: relative; box-sizing: border-box; min-height: 100%; padding: var(--margin-y) var(--margin-x); }
.screen.centered { display: grid; place-items: center; }
/* The frame (docs/menu-design.md, One system): the head row, the rail beside the stage, and
   the strip along the bottom, full width. Every child names its area. */
.screen.field { display: grid; height: 100%; grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: var(--head) minmax(0, 1fr) auto; grid-template-areas: "head head" "rail stage" "strip strip";
  gap: var(--s5) var(--s6); }
.screen.field:has(> .strip) { padding-bottom: 0; }
.field-head { grid-area: head; min-width: 0; }
.rail { grid-area: rail; display: flex; flex-direction: column; gap: var(--s4); min-height: 0; }
.stage { grid-area: stage; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s6); min-height: 0; }
.stage > .panel { display: flex; flex-direction: column; min-height: 0; }
.main-menu .rail, .lobby-screen .rail, .settings-screen .rail, .create-screen .rail, .browser-screen .rail { justify-content: center; }
.rail-foot { margin-top: auto; }
.pause-screen { position: fixed; inset: 0; overflow: auto; }
.dim.game { background: #0000008C; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* The bare menu: the rail's list on the art, no panel. */
.menu-list.bare ol { padding: 0; }
.menu-list.bare .menu-item { padding: var(--s2) var(--s4); text-shadow: 0 2px 6px #000; }
.menu-list.bare .menu-item .label { font-weight: 700; }
.menu-item[aria-current="page"] { background: var(--sel); box-shadow: inset 3px 0 0 var(--hud); }
.menu-item[aria-current="page"] .label { color: var(--hud); }

/* The strip and its cells. */
.strip { grid-area: strip; display: flex; align-items: stretch; min-height: var(--strip); margin: var(--s2) calc(-1 * var(--margin-x)) 0;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--edge); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .strip { background: var(--glass-solid); } }
.strip-cell { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: var(--s1);
  min-width: 0; padding: var(--s3) var(--s6); border-right: 1px solid var(--edge); }
.strip > :first-child { padding-left: var(--margin-x); }
.strip > :last-child { border-right: 0; padding-right: var(--margin-x); }
/* A wide cell takes what is left, but never less than its basis while the fixed cells can give way. */
.strip-cell.wide { flex: 1 1 18rem; }
.strip-label { margin: 0; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.cell-value { display: flex; align-items: baseline; gap: var(--s3); margin: 0; font-size: var(--fs-item); color: var(--fg); }
.cell-value.item { display: block; }
.cell-value.item .keycap { font-size: var(--fs-small); vertical-align: middle; }
.cell-value.hud { color: var(--hud); }
.cell-value .digits { font-size: max(28px, 2.5rem); }
.cell-detail { margin: 0; font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.cell-value.status { display: block; font-size: var(--fs-body); }
.cell-actions { display: flex; align-items: center; gap: var(--s3); }
.files-cell { flex: 0 1 20rem; min-width: 14rem; }
.files-cell .bar { margin-top: var(--s1); }
.files-cell[data-state="ready"] .files-detail { color: var(--hud); }
.voice-slot { position: relative; display: flex; border-right: 1px solid var(--edge); }
.voice-slot > .strip-cell { flex: 1; border-right: 0; }
.voice-cell { flex: 0 1 16rem; min-width: 13rem; }
.online-cell .hud-stats { display: flex; gap: var(--s5); }
.strip .hud-stat { flex-direction: row; align-items: baseline; gap: var(--s2); }
.strip .hud-stat .digits { font-size: max(28px, 2.5rem); }
.strip .hud-stat .caption { font-size: var(--fs-small); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg); }
.action-cell { flex: none; align-items: flex-end; }
.action-cell.buttons { flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--s3); }
.cell-value .digits:empty { display: none; }
.action-cell:not(.buttons) .btn { min-height: 3rem; padding: var(--s2) var(--s5); font-size: var(--fs-item); }

/* The microphone question, a callout over the Voice chat cell. */
.mic-callout { position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 3; box-sizing: border-box; width: 30rem; max-width: calc(100vw - 2 * var(--margin-x));
  padding: var(--s5) var(--pad-x); background: var(--glass-game); }
.mic-callout::after { content: ""; position: absolute; top: 100%; left: var(--s6); border: 8px solid transparent; border-top-color: var(--hud-dim); }
.mic-callout .title { margin: 0 0 var(--s3); font-size: var(--fs-title); font-weight: 700; color: var(--hud); }
.callout-body { margin: 0 0 var(--s4); font-size: var(--fs-body); line-height: 1.45; }
.callout-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* The status panel under the rail over the game, and beside Create lobby's modes. */
.status-panel { display: flex; flex-direction: column; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--pad-x); }
.status-row + .status-row { border-top: 1px solid var(--edge); }
.status-value { font-size: var(--fs-small); color: var(--fg); text-align: right; }

/* The boot: the map over the strip as one long bar. */
.loading-screen { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "head" "strip"; padding-bottom: 0; }
.loading-head { grid-area: head; align-self: end; display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding-bottom: var(--s6); text-align: center; }
.loading-head .notices { display: flex; flex-direction: column; gap: var(--s1); }
.loading-strip .bar { margin-top: var(--s1); }

/* The scoreboard (kit/scoreboard.rs). */
.scoreboard { display: flex; flex-direction: column; min-height: 0; }
.scoreboard.over-game { background: var(--glass-game); }
.board-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s5);
  padding: var(--s5) var(--pad-x) var(--s4); border-bottom: 1px solid var(--edge); }
.board-title .title { margin: 0; font-size: var(--fs-title); font-weight: 700; color: var(--hud); overflow-wrap: anywhere; }
.board-title .facts { margin: var(--s1) 0 0; font-size: var(--fs-small); color: var(--muted); }
.board-score { grid-column: 2; display: flex; align-items: baseline; gap: var(--s2); margin: 0; }
.board-score .digits { font-size: max(28px, 2.75rem); }
.board-score .side { font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.board-time { grid-column: 3; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; margin: 0; }
.board-time .digits { font-size: max(22px, 1.75rem); }
.board-body { flex: 1; min-height: 0; overflow: auto; }
.board-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.board-table thead th { padding: var(--s3) var(--pad-x) var(--s2); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); text-align: left; border-bottom: 1px solid var(--edge); }
.board-table td, .board-table tbody th { padding: 5px var(--pad-x); font-weight: 400; text-align: left; }
.board-table .num { text-align: right; font-variant-numeric: tabular-nums; width: 6rem; }
.board-table .group-head th { padding-top: var(--s4); padding-bottom: var(--s3); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: var(--hud); }
.board-table .group-head td { padding-top: var(--s3); font-size: max(22px, 1.75rem); }
.board-group + .board-group .group-head > * { border-top: 1px solid var(--edge); }
.board-table tr.own { background: var(--sel); color: var(--hud); }
.board-table tr.muted { color: var(--muted); }
.board-table .dead { font-size: var(--fs-small); color: var(--muted); }
.board-empty td { color: var(--muted); font-size: var(--fs-small); }
.speaking { display: inline-block; width: .8em; height: .8em; margin-right: var(--s1); vertical-align: -.05em; }
.speaking.on { background: linear-gradient(var(--hud), var(--hud)) 0 100% / 22% 50% no-repeat, linear-gradient(var(--hud), var(--hud)) 50% 100% / 22% 100% no-repeat,
  linear-gradient(var(--hud), var(--hud)) 100% 100% / 22% 70% no-repeat; }
.board-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s6); padding: var(--s4) var(--pad-x) var(--s5); border-top: 1px solid var(--edge); }
.board-stat { display: flex; flex-direction: column; gap: var(--s1); }
.board-stat .digits { font-size: max(28px, 2.5rem); }

/* Tab: the scoreboard alone over the undimmed game, centered at the top, clear of the HUD's bottom
   row. It takes no input. */
.tab-overlay { position: fixed; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: flex-start;
  padding: var(--margin-y) var(--margin-x) 0; pointer-events: none; }
.tab-overlay .scoreboard { box-sizing: border-box; width: min(54rem, 100%); max-height: calc(100% - var(--margin-y) - 6rem);
  backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }

/* Choose a team and Choose a character (team.rs): the rail's choices, the stage's one panel. */
.choose-rail .menu-item.focused { background: var(--sel); box-shadow: inset 3px 0 0 var(--hud); }
.choose-rail .menu-item.focused .label { color: var(--hud); }
.choose-panel { display: flex; flex-direction: column; min-height: 0; }
.choose-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5);
  padding: var(--s5) var(--pad-x) var(--s4); border-bottom: 1px solid var(--edge); }
.choose-head .title { margin: 0; font-size: var(--fs-title); font-weight: 700; color: var(--hud); }
.choose-head .facts { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.choose-panel .panel-footer { flex-wrap: nowrap; }
.choose-panel .panel-footer .status { flex: 1 1 0; min-width: 0; }
.choose-panel .panel-footer .status.danger { color: var(--danger); }
.choose-panel .panel-footer .btn { flex: none; }
.team-columns { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: auto; }
.team-column { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) var(--pad-x); }
.team-column + .team-column { border-left: 1px solid var(--edge); }
.team-column.closed { opacity: .5; }
.portrait { aspect-ratio: 256 / 196; border: 1px solid var(--edge); background: radial-gradient(ellipse at 50% 60%, #2E2412 0%, #0A0905 75%); overflow: hidden; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.team-column .portrait { max-height: 10rem; }
.team-head { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.team-head .label { flex: 1; letter-spacing: .18em; }
.team-head .digits { font-size: max(28px, 2.5rem); }
.team-state { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.team-state.danger { color: var(--danger); }
.team-members { margin: var(--s2) 0 0; padding: 0; list-style: none; font-size: var(--fs-body); }
.member { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 3px 0; }
.member.muted { color: var(--muted); }
.member.own { color: var(--hud); }
.member-right { font-size: var(--fs-small); color: var(--muted); }
.character-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); overflow: auto; }
.character-pick { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) var(--pad-x); }
.character-big .portrait { max-height: 18rem; margin: 0 auto; }
.character-name { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 0; }
.character-pick .hint { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.character-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.character-thumb { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: 0; border: 0; background: none; cursor: pointer; }
.character-thumb .portrait { width: 100%; }
.character-thumb.focused .portrait { border-color: var(--hud); }
.character-teams { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) var(--pad-x); border-left: 1px solid var(--edge); }
.character-teams .label.muted { color: var(--muted); }
.character-teams .team-members + .label { margin-top: var(--s4); }

/* The speaking overlay (kit/speaking.rs): C's chips over the undimmed game, at the bottom center
   above the stock HUD's bottom row (health, time, ammunition). It takes no input. */
.speaking-overlay { position: fixed; left: 50%; bottom: max(84px, 12vh); z-index: 1; transform: translateX(-50%); display: flex; flex-wrap: wrap;
  justify-content: center; gap: var(--s2); width: max-content; max-width: calc(100vw - 2 * var(--margin-x)); margin: 0; padding: 0; list-style: none;
  pointer-events: none; }
.speaking-chip { display: flex; align-items: center; gap: var(--s2); min-height: 2rem; padding: var(--s1) var(--s3) var(--s1) var(--s2);
  border-left: 3px solid var(--hud); background: var(--glass-game); font-size: var(--fs-body); color: var(--fg); white-space: nowrap; }
.speaking-chip .speaking { margin-right: 0; }
.speaking-chip.own .chip-name { color: var(--hud); }
.chip-you { font-size: var(--fs-key); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* The lobby page: Players and Game settings side by side. */
.lobby-room .room-body { flex: 1; min-height: 0; overflow: auto; padding-left: 0; padding-right: 0; }
.lobby-room .room-body > :not(.room-members) { margin-left: var(--pad-x); margin-right: var(--pad-x); }
.room-invite { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--pad-x) var(--s5); }
.room-invite .copy-field { flex-wrap: nowrap; }
.copy-label { flex: none; font-size: var(--fs-small); color: var(--muted); }
.copy-field .link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.copy-field .btn { flex: none; }
.room-members tbody th { white-space: normal; }
/* A name never breaks, and its tags wrap under it together when the column is narrow. */
.row-name, .row-tags { white-space: nowrap; }
.member-state { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.member-state .bar { width: 3.5rem; }
.member-state.danger { color: var(--danger); }
.member-state .check { width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--hud-dim); }
.member-state.ready .check { background: var(--hud); box-shadow: inset 0 0 0 2px var(--on-hud); }
.member-state.ready { color: var(--hud); }
.member-state.left { color: var(--muted); }
/* The lobby page after a match (results.rs): Last match in place of Players. */
.last-match { display: flex; flex-direction: column; }
.match-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5);
  padding: 0 var(--pad-x) var(--s4); border-bottom: 1px solid var(--edge); }
.match-title { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.match-line { margin: 0; font-size: var(--fs-item); color: var(--fg); overflow-wrap: anywhere; }
.match-facts { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.match-head .board-score .digits { font-size: max(40px, 3.5rem); }
.match-table .num { width: auto; padding-left: var(--s1); padding-right: var(--s1); }
/* The last match has two more columns: a long name breaks there rather than the state. */
.match-table .row-name { white-space: normal; }
.match-table th.now, .match-table td.now { width: auto; padding-left: var(--s2); text-align: left; }
.room-members .match-table tbody th { white-space: normal; overflow-wrap: break-word; }
.match-note { margin: 0; padding: var(--s3) var(--pad-x) 0; font-size: var(--fs-small); color: var(--muted); }
.game-settings .settings-rows { flex: 1; min-height: 0; overflow: auto; }
.game-settings .panel-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.title-tag .tag { color: var(--hud); border-color: var(--hud-dim); }
.game-settings .setting-row:not(.read-only) { grid-template-columns: minmax(7.5rem, 1fr) minmax(0, 11.5rem); gap: var(--s3); }
.game-settings .combo { padding-left: var(--s2); padding-right: var(--s1); }
.game-settings .setting-row:not(.read-only) .setting-hint { grid-column: 2; }
.change-notice { color: var(--hud); }
.ready-row { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.ready-row .btn { flex: 0 1 22rem; justify-content: center; min-height: 3rem; padding: var(--s2) var(--s5); font-size: var(--fs-item);
  border-color: var(--hud); color: var(--hud); }
.ready-row[data-ready="true"] .btn { border-color: var(--hud-dim); color: var(--fg); }
.ready-row .btn:disabled { color: var(--muted); border-color: var(--edge); }
.setting-row.read-only { grid-template-columns: minmax(8rem, 1fr) auto; }
.setting-value { text-align: right; font-variant-numeric: tabular-nums; }
.panel-note { margin: 0; padding: var(--s3) var(--pad-x) var(--s4); border-top: 1px solid var(--edge); font-size: var(--fs-small); color: var(--muted); }
.room-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5);
  padding: var(--s5) var(--pad-x) var(--s4); border-bottom: 1px solid var(--edge); }
.room-head .title { margin: 0; font-size: var(--fs-title); font-weight: 700; color: var(--hud); overflow-wrap: anywhere; }
.room-head .facts { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.room-body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5) var(--pad-x); }
.room-body .hint { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.lobby-setup { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--pad-x) var(--s5);
  border: 1px solid var(--edge); background: var(--sel); }
.lobby-setup .setup-title { margin: 0; font-size: var(--fs-item); font-weight: 700; color: var(--hud); }
.lobby-setup .setup-title.danger { color: var(--danger); }
.lobby-setup .step { margin: 0; font-size: var(--fs-body); color: var(--fg); }
.lobby-setup .hint { margin: 0; }
.lobby-setup .notice { overflow-wrap: anywhere; }
.setup-actions { display: flex; justify-content: flex-end; }
.room-password { display: flex; flex-direction: column; gap: var(--s2); }
.room-password .text-field { width: min(16rem, 100%); }
/* Settings: label, control, hint per row (kit/settings.rs); two panels in the stage. */
.settings-panel .settings-rows { flex: 1; min-height: 0; overflow: auto; }
/* The label never wraps: it keeps its width and the control gives way, down to 8rem. */
.settings-panel .setting-row:not(.key-row) { grid-template-columns: minmax(max-content, 1fr) minmax(8rem, 13rem); }
.settings-panel .setting-hint { grid-column: 2; margin-top: -6px; }
.settings-panel .setting-control { align-items: center; gap: var(--s3); }
.keys-panel .panel-footer { flex-wrap: nowrap; }
.keys-panel .panel-footer .status { flex: 1 1 0; min-width: 0; }
.keys-panel .panel-footer .btn { flex: none; }
.panel-title .title-hint { float: right; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: var(--fs-small); }
.setting-row.key-row { grid-template-columns: minmax(8rem, 1fr) auto; padding-top: 2px; padding-bottom: 2px; }
.key-bind { justify-content: flex-end; min-width: 5.5rem; padding: 0; border: 0; background: none; color: inherit; }
.key-bind .keycap { min-width: 3.5rem; padding: .2em .6em; font-size: var(--fs-small); }
/* The Keys list (kit/settings.rs, KeyGroup): compact rows, its sections in two columns where the
   list is at least 36rem wide. The columns sit inside the scrolling rows, so they balance. */
.keys-panel .settings-rows { container-type: inline-size; }
.key-group { break-inside: avoid; padding-bottom: var(--s2); }
.key-group .settings-section { margin-top: var(--s3); }
.key-group:first-child .settings-section { margin-top: var(--s1); }
.key-group .setting-row.key-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); padding-top: 1px; padding-bottom: 1px; }
.key-group .control { min-height: 1.875rem; }
@container (min-width: 36rem) {
  .key-groups { columns: 2; column-gap: 0; column-rule: 1px solid var(--edge); }
  .key-group .setting-row.key-row { padding-left: var(--s4); padding-right: var(--s4); }
  .key-group .settings-section { margin-left: var(--s4); margin-right: var(--s4); }
}
.key-row.listening { background: var(--sel); box-shadow: inset 3px 0 0 var(--hud); }
.key-listen { white-space: nowrap; padding: .2em .6em; border: 1px solid var(--hud); font-size: var(--fs-small); font-weight: 700; color: var(--hud); }
.key-unset { font-size: var(--fs-small); font-weight: 700; color: var(--danger); }
.hud { color: var(--hud); }
.settings-rows { display: flex; flex-direction: column; padding: var(--s2) 0 var(--s4); }
.settings-section { margin: var(--s4) var(--pad-x) var(--s1); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; color: var(--muted); }
.setting-row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 15rem) minmax(0, 7rem); align-items: center; gap: var(--s4);
  padding: var(--s1) var(--pad-x); font-size: var(--fs-body); }
.setting-row:focus-within { background: var(--sel); box-shadow: inset 3px 0 0 var(--hud); }
.setting-row:focus-within .setting-label { color: var(--hud); }
.setting-hint { font-size: var(--fs-small); color: var(--muted); }
.setting-control { display: flex; }
.control { display: inline-flex; align-items: center; gap: var(--s3); min-height: 2.25rem; outline: none; cursor: pointer; }
.toggle { padding: 0; border: 0; background: none; }
.toggle .box { width: 18px; height: 18px; box-sizing: border-box; border: 1px solid var(--hud-dim); }
.toggle[aria-checked="true"] .box { background: var(--hud); border-color: var(--hud); }
.slider { flex: 1; touch-action: none; }
.slider .bar { display: block; flex: 1; cursor: pointer; }
.slider .fill { display: block; }
.slider .value, .select .value { min-width: 3.5em; font-variant-numeric: tabular-nums; text-align: right; }
.select .value { min-width: 6em; text-align: center; }
.setting-row:focus-within .value { color: var(--hud); }
/* The microphone test (settings.rs): Test or Stop, then the live level on the bar's segments. */
.mic-test { display: flex; flex: 1; align-items: center; gap: var(--s3); min-width: 0; }
.mic-test .bar { flex: 1; min-width: 0; }
.mic-test .bar .fill { transition-duration: 50ms; }
.setting-row.disabled { opacity: .5; }
.setting-row.disabled .control, .setting-row.disabled .key-button { cursor: default; }
/* The number stepper (kit/options.rs): "− [ 3:00 ] +" at one fixed width, so no row overhangs. */
.stepper { display: inline-flex; align-items: stretch; gap: var(--s1); width: 10rem; max-width: 100%; }
.stepper .text-field { flex: 1; min-width: 0; padding-left: var(--s1); padding-right: var(--s1); text-align: center;
  font-variant-numeric: tabular-nums; }
.stepper .text-field:disabled { cursor: default; }
.step-button { flex: none; width: 2.25rem; padding: 0; border: 1px solid var(--hud-dim); background: var(--hud-wash); color: var(--hud);
  font: 700 var(--fs-item)/1 var(--font-ui); cursor: pointer; touch-action: manipulation; user-select: none; }
.step-button:hover { border-color: var(--hud); }
.step-button:active { background: var(--hud-dim); color: var(--on-hud); }
.step-button:disabled { color: var(--muted); border-color: var(--edge); background: none; cursor: default; }
.combo { flex: 1; min-width: 0; }
/* The server browser (browser.rs): one panel in the stage, its list scrolling inside it. */
.browser-search { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding: var(--s4) var(--pad-x); border-bottom: 1px solid var(--edge); }
.browser-search .field { flex: 1 1 12rem; }
.browser-list { flex: 1; min-height: 0; overflow: auto; }
.browser-empty { margin: 0; padding: var(--s6) var(--pad-x); font-size: var(--fs-body); color: var(--muted); }
.browser-table tbody th { padding: 0; }
.row-open { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); width: 100%; padding: 7px var(--pad-x);
  border: 0; background: none; text-align: left; cursor: pointer; outline: none; }
.row-open .row-name { font-weight: 700; }
.row-open .row-players { flex-basis: 100%; font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.browser-row:focus-within { background: var(--sel); box-shadow: inset 3px 0 0 var(--hud); }
.browser-row:focus-within .row-name { color: var(--hud); }
.browser-row:active { background: var(--hud-dim); }
.browser-row td { vertical-align: top; }
.room-members { border-top: 1px solid var(--edge); padding-bottom: var(--s3); }
.dialog-invite { padding: 0 var(--pad-x) var(--s5); }
/* Create lobby (create/mod.rs): the game modes and the game settings in the stage. */
.modes-body { flex: 1; min-height: 0; overflow: auto; padding-bottom: var(--s3); }
.modes-body ol { margin: 0; }
.create-notices { display: flex; flex-direction: column; gap: var(--s1); padding: 0 var(--pad-x); }
.create-notices:not(:empty) { padding: var(--s3) var(--pad-x); border-top: 1px solid var(--edge); }
.create-notices .details { margin: 0; }
.create-modes .menu-item[aria-pressed="true"] { background: var(--sel); box-shadow: inset 3px 0 0 var(--hud); }
.create-modes .menu-item[aria-pressed="true"] .label { color: var(--hud); }
.mode-row { display: flex; align-items: center; gap: var(--s2); padding-right: var(--pad-x); }
.mode-row .menu-item { flex: 1; min-width: 0; }
.mode-row .label { overflow-wrap: anywhere; }
.mode-empty { padding: var(--s2) var(--pad-x); font-size: var(--fs-small); color: var(--muted); }
.btn.small { min-height: 0; padding: var(--s1) var(--s2); }
.setting-control .text-field { flex: 1; min-width: 0; }
.dialog-form { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) var(--pad-x) var(--s4); }
.dialog-form .field { display: flex; }
.dialog-form .notice { padding: 0; }
select.text-field { appearance: none; }
select.text-field option { background: var(--backdrop-base); color: var(--fg); }

/* Phones and narrow windows: one column. */
@media (max-width: 40rem), (max-width: 640px) {
  .screen.field { height: auto; min-height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
    grid-template-areas: "head" "rail" "stage" "strip"; }
  .field-head:empty { display: none; }
  .stage { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; }
  .room-invite .copy-field { flex-wrap: wrap; }
  .strip { flex-wrap: wrap; margin-top: var(--s4); }
  .strip-cell, .strip > :first-child, .strip > :last-child { flex: 1 1 100%; width: auto; padding: var(--s3) var(--margin-x); border-right: 0; border-bottom: 1px solid var(--edge); }
  .voice-slot { flex: 1 1 100%; }
  .mic-callout { left: var(--margin-x); }
  .action-cell { align-items: stretch; }
  .ready-row { flex-wrap: wrap; }
  .ready-row .btn { flex: 1 1 100%; }
  .corner { position: static; width: auto; max-width: none; padding: var(--margin-y) var(--margin-x) 0; align-items: stretch; }
  .corner > .notice { position: static; margin-top: 0; text-align: left; }
  .name-badge .name-error { position: static; }
  .corner + .screen { padding-top: var(--s4); }
  .create-body, .modes-body, .browser-list { overflow: visible; }
  .setting-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .board-table { font-size: var(--fs-small); }
  .board-table thead th, .board-table .group-head th { letter-spacing: .04em; }
  .board-table .num { width: auto; }
  .board-table td, .board-table th { padding-left: var(--s2); padding-right: var(--s2); }
  .team-columns, .character-body { flex: none; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .team-column + .team-column, .character-teams { border-left: 0; border-top: 1px solid var(--edge); }
  .choose-panel .panel-footer { flex-wrap: wrap; }
  .setting-hint { grid-column: 2; }
}

/* ==== First paint (index.html, before the wasm runs) ==== */

.first-paint { display: grid; grid-template-rows: auto 1fr; }
.first-paint .label { align-self: end; justify-self: center; }

/* ==== The ?ui-kit review page ==== */

.review { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding: var(--margin-y) var(--margin-x); }
.review-head { margin: var(--s5) 0 0; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.review-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.review-type { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) var(--pad-x); }
.review-type p { margin: 0; }
.type-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--hud); }
.type-small { font-size: var(--fs-small); color: var(--muted); }
.type-body { font-size: var(--fs-body); }
.type-item { font-size: var(--fs-item); }
.type-title { font-size: var(--fs-title); font-weight: 700; color: var(--hud); }
.type-display { font-size: var(--fs-display); font-weight: 700; text-shadow: 0 2px 8px #000; }
.type-digits { font-family: var(--font-digits); font-weight: 700; font-size: var(--fs-digits); color: var(--hud); text-shadow: 0 0 18px var(--glow); font-variant-numeric: tabular-nums; }
.type-mono { font-family: var(--font-mono); font-size: var(--fs-body); }
.swatch { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-small); color: var(--muted); }
.swatch .chip { width: 4.5rem; height: 2.5rem; border: 1px solid var(--keycap); }
.review-menu { width: min(26.875rem, 100%); }
.review-bar { width: min(24rem, 60vw); }
.review-bars { display: flex; flex-direction: column; gap: var(--s3); width: min(24rem, 100%); }
.review-table, .review .copy-field, .review-settings { width: min(56.25rem, 100%); box-sizing: border-box; }
.review-stage { position: relative; width: min(56.25rem, 100%); height: 18rem; overflow: hidden; border: 1px dashed var(--edge); }
.review-stage.tall { height: auto; display: flex; justify-content: center; padding: var(--s5); box-sizing: border-box; }
.review-stage .dim, .review-stage .center { position: absolute; }
.review-stage.roomy { height: 24rem; }
.review-settings-pair { gap: var(--s6); align-items: flex-start; }
.review-settings-pair > .panel { flex: 1; min-width: 0; max-height: 40rem; display: flex; flex-direction: column; }
.review-strip { position: relative; width: 100%; padding-top: 14rem; --margin-x: var(--s5); }
.review-strip .strip { margin: 0; }
.review-rail { width: var(--rail); }
.review-modes { display: flex; width: min(28rem, 100%); max-height: 36rem; }
.review-modes > .panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.review-board { width: min(56.25rem, 100%); }
.review-tab { background: #6B5A3A; }
.review-tab .scoreboard { width: min(54rem, 100%); }
.review-stage.review-screen { width: 100%; height: 50rem; }
/* The lobby page after a match at the mockup's 900 px; on a phone as tall as it is. */
/* As wide as the page: the review's own margins would narrow the frame's stage. */
.review-stage.review-results { width: calc(100% + 2 * var(--margin-x)); height: 56.25rem; margin: 0 calc(-1 * var(--margin-x)); }
@media (max-width: 40rem), (max-width: 640px) { .review-stage.review-results { height: auto; } }
.review-stage .pause-screen { position: absolute; }
/* The speaking overlay sits in the page here, not over a game. */
.review-speaking { display: flex; flex-direction: column; gap: var(--s4); width: min(56.25rem, 100%); padding: var(--s5) 0; background: var(--backdrop-base); }
.review-speaking .speaking-overlay { position: static; transform: none; max-width: 100%; margin: 0 auto; }
.review-loading { display: grid; padding: 0; --margin-x: var(--s5); }
.review-loading .strip { margin: 0; }
/* A rail whose numbers belong to the screen (Create lobby's game modes): its numbers take no key. */
.menu-list.keyless .num { color: var(--muted); }
/* The host's Remove on a member's row in the waiting room (app.rs, Members). */
.room-members:has(.row-act) :is(td, th) { padding-left: var(--s3); padding-right: var(--s3); }
.room-members:has(.row-act) :is(td, th):first-child { padding-left: var(--pad-x); }
.room-members .row-act { width: 1%; padding-left: 0; padding-right: var(--pad-x); text-align: right; white-space: nowrap; }
.member-remove { width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--edge); background: none; color: var(--muted);
  font: 700 var(--fs-item)/1 var(--font-ui); cursor: pointer; }
.member-remove:hover, .member-remove:focus-visible { border-color: var(--danger); color: var(--danger); }
/* The server browser's list: the map shows in the Lobby panel beside it (browser.rs). */
.browser-table .col-map { display: none; }
.browser-details .settings-rows { flex: 1; min-height: 0; overflow: auto; }
@media (max-width: 520px) { .room-members .member-state .bar { display: none; } }