/* Above the viewer settings button (bottom: 58px + 44px), never over it. */
#radioPanel { position: absolute; right: 16px; bottom: 112px; width: min(260px, calc(100vw - 32px)); padding: 8px 12px; color: var(--game-text); background: var(--game-glass); border: 1px solid var(--game-line); border-radius: 12px; box-shadow: var(--game-shadow); backdrop-filter: blur(14px) saturate(1.12); z-index: 5; pointer-events: auto; }
#radioPanel summary { min-height: 28px; color: var(--game-cyan); cursor: pointer; font: 750 11px/1.4 var(--ds-font-display); letter-spacing: .12em; text-transform: uppercase; }
#radioFeed { max-height: 150px; overflow-y: auto; margin: 4px 0 0; padding-left: 0; list-style: none; }
:root {
  --bg: var(--game-bg);
  --panel: var(--game-glass);
  --line: var(--game-line);
  --text: var(--game-text);
  --dim: var(--game-muted);
  --good: var(--game-good);
  --warn: var(--game-warning);
  --bad: var(--game-danger);
  --accent: var(--game-pink);
  --topbar-height: 56px;
}
* { box-sizing: border-box; }
:focus-visible { outline: 3px solid var(--game-cyan); outline-offset: 3px; }
html, body { margin: 0; height: 100%; background: var(--game-bg); color: var(--game-text); font: 14px/1.4 var(--ds-font); overflow: hidden; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#topbar { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(980px, calc(100vw - 32px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); align-items: start; gap: 8px; }
#topbar > div, #stats, #net, #toggles { min-width: 0; padding: 8px 12px; color: var(--game-text); background: var(--game-glass); border: 1px solid var(--game-line); border-radius: 12px; box-shadow: var(--game-shadow); backdrop-filter: blur(14px) saturate(1.12); }
#topbar > div { overflow-wrap: anywhere; }
/* Lobby look (#1323): the score panel and own-agent stats carry the lobby's blue frame, like its status bar and map card. */
#topbar > #scorePanel, #stats { border-color: var(--game-frame); }
#match { grid-column: 1; justify-self: start; font: 800 13px/1.3 var(--ds-font-display); letter-spacing: .08em; text-transform: uppercase; }
#scorePanel { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; text-align: center; }
#score { font: 750 12px/1.35 var(--ds-font-display); letter-spacing: .08em; text-transform: uppercase; }
#score b, #timer { color: var(--game-cyan); font: 800 15px/1 var(--ds-font-mono); font-variant-numeric: tabular-nums; }
#topbar, #stats { font-variant-numeric: tabular-nums; }
#topbar > #conn { grid-column: 3; justify-self: end; font: 800 11px/1.3 var(--ds-font-display); letter-spacing: .12em; text-transform: uppercase; }
#conn::before { display: inline-block; width: 8px; height: 8px; margin-right: 8px; content: ""; border-radius: 50%; background: currentColor; vertical-align: 1px; }
#conn[data-state="live"]::before { box-shadow: 0 0 8px currentColor; }
#debugTraceLabel { position: absolute; top: calc(var(--topbar-height, 56px) + 76px); left: 16px; max-width: min(520px, calc(100vw - 32px)); padding: 8px 10px; background: var(--game-glass); border: 1px solid var(--game-good); border-radius: 8px; color: var(--game-good); overflow-wrap: anywhere; }
#objectiveScore { color: var(--game-cyan); font: 750 11px/1.35 var(--ds-font-display); letter-spacing: .06em; text-transform: uppercase; }
#teamScore { color: var(--game-text); font: 750 12px/1.35 var(--ds-font-display); letter-spacing: .06em; text-transform: uppercase; }
#ctlHud, #sndHud { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--game-text); font-weight: 700; }
#ctlHud .ctl-hud-status { color: var(--warn); }
#sndHud .snd-hud-status { color: var(--warn); }
#sndHud .snd-hud-progress { width: min(140px, 28vw); height: 10px; accent-color: var(--game-cyan); }
#zombieHud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; color: var(--game-text); font-weight: 700; }
#zombieHud .zombie-hud-round { color: var(--game-cyan); font: 800 15px/1 var(--ds-font-mono); letter-spacing: .06em; text-transform: uppercase; }
#zombieHud .zombie-hud-points { color: var(--game-warning, #f2b84b); font-variant-numeric: tabular-nums; }
#zombieHud .zombie-hud-alert { color: var(--warn); }
#zombieHud .zombie-hud-alert-downed, #zombieHud .zombie-hud-alert-out { color: var(--bad); }
#zombieHud .zombie-hud-progress { width: min(140px, 28vw); height: 10px; accent-color: var(--game-cyan); }
#zombieHud .zombie-hud-alert-downed + .zombie-hud-progress { accent-color: var(--bad); }
#zombieHud .zombie-hud-squad { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
#zombieHud .zombie-hud-chip { padding: 1px 8px; border: 1px solid var(--game-line); border-radius: 999px; font-size: 12px; background: var(--game-glass); }
#zombieHud .zombie-hud-chip[data-state="down"] { border-color: var(--bad); color: var(--bad); }
#zombieHud .zombie-hud-chip[data-state="dead"] { color: var(--game-muted); text-decoration: line-through; }
#zombieHud .zombie-hud-shop { flex-basis: 100%; color: var(--game-muted); font-size: 11px; font-weight: 600; }
.zombie-banner { position: absolute; top: 22%; left: 50%; z-index: 6; max-width: min(90vw, 640px); padding: 10px 22px; transform: translateX(-50%); border: 1px solid var(--game-line); border-radius: 12px; background: var(--game-glass); color: var(--game-text); font: 800 clamp(18px, 4vw, 30px)/1.2 var(--ds-font-display); letter-spacing: .06em; text-align: center; text-transform: uppercase; pointer-events: none; }
.zombie-moment { position: absolute; z-index: 7; max-width: min(480px, calc(100vw - 32px)); padding: 8px 12px; border: 1px solid var(--game-cyan); border-left-width: 3px; border-radius: 9px; color: var(--game-text); background: var(--game-raised); box-shadow: var(--game-shadow); backdrop-filter: blur(14px) saturate(1.12); font: 800 14px/1.35 var(--ds-font-display); text-shadow: 0 1px 2px #080a10; overflow-wrap: anywhere; pointer-events: none; animation: zombie-moment-in 160ms ease-out; }
#zombieMoment { top: calc(var(--topbar-height, 56px) + 10px); left: 50%; width: max-content; transform: translateX(-50%); text-align: center; }
@keyframes zombie-moment-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zombie-moment { animation: none; } }
#timer { margin-left: 8px; }
#conn[data-state="live"] { color: var(--good); }
#conn[data-state="connecting"], #conn[data-state="retry"] { color: var(--warn); }
#conn[data-state="closed"], #conn[data-state="error"] { color: var(--bad); }

#hudSideStack { position: absolute; top: calc(var(--topbar-height, 56px) + 76px); right: 16px; display: grid; align-content: start; gap: 10px; width: min(220px, 26vw); max-height: calc(100dvh - var(--topbar-height, 56px) - 136px); overflow: hidden; pointer-events: none; }

#stats { position: absolute; left: 16px; bottom: 16px; width: 260px; display: grid; gap: 8px; line-height: 1.45; }
.bar { position: relative; height: 22px; background: var(--game-raised); border: 1px solid var(--game-line); border-radius: 6px; overflow: hidden; }
#hpFill { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--good); transition: width .1s, background .2s; }
#hpText { position: absolute; inset: 0; display: grid; place-items: center; color: var(--game-text); font: 750 11px/1 var(--ds-font-display); letter-spacing: .12em; text-transform: uppercase; background: var(--game-glass); }
#ammo { color: var(--game-muted); font: 750 11px/1.3 var(--ds-font-display); letter-spacing: .12em; text-transform: uppercase; }
#ammo b { margin-inline: 4px; color: var(--game-text); font: 800 21px/1 var(--ds-font-mono); font-variant-numeric: tabular-nums; }
#loadout { color: var(--game-muted); font: 700 12px/1.35 var(--ds-font-display); letter-spacing: .06em; text-transform: uppercase; }
#utility { color: var(--game-muted); font: 750 12px/1.35 var(--ds-font-display); letter-spacing: .08em; text-transform: uppercase; }
#utility[data-cooling="true"] { opacity: .6; }
#reload { position: relative; height: 18px; background: var(--game-raised); border: 1px solid var(--game-line); border-radius: 6px; overflow: hidden; font: 750 10px/1 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; }
#reloadFill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--warn); opacity: .7; }
#reload span { position: relative; display: inline-flex; align-items: center; height: 100%; padding-inline: 8px; color: var(--game-text); }
#protect { color: var(--accent); font: 750 11px/1.3 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; }

#hudSideStack > #liveMinimap { display: block; width: 100%; height: auto; padding: 6px; background: var(--game-glass); border: 1px solid var(--game-frame); border-radius: 12px; box-shadow: var(--game-shadow); }
#net { position: absolute; right: 16px; bottom: 16px; max-width: min(380px, 35vw); color: var(--game-muted); font: 700 10px/1.35 var(--ds-font-display); letter-spacing: .04em; text-align: right; font-variant-numeric: tabular-nums; }
#viewerSettings { position: absolute; z-index: 30; right: 16px; bottom: 58px; pointer-events: auto; }
#viewerSettings > summary { display: grid; place-items: center; min-height: 44px; padding: 8px 12px; color: var(--game-text); border: 1px solid var(--game-line); border-radius: 8px; background: var(--game-glass); box-shadow: var(--game-shadow); backdrop-filter: blur(14px) saturate(1.12); cursor: pointer; list-style: none; font: 750 11px/1.2 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; }
#viewerSettings > summary::-webkit-details-marker { display: none; }
#viewerSettings > summary:focus-visible, #toggles :focus-visible, #connect :focus-visible, #endscreen :focus-visible { outline: 3px solid var(--game-cyan); outline-offset: 3px; }
#toggles { display: grid; gap: 6px; width: min(280px, calc(100vw - 24px)); max-height: min(65vh, 520px); overflow: auto; margin-top: 6px; padding: 12px; background: var(--game-glass); border: 1px solid var(--game-line); border-radius: 12px; box-shadow: var(--game-shadow); backdrop-filter: blur(14px) saturate(1.12); font-size: 14px; }
#toggles label { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
#toggles input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--game-pink); }
#toggles select, #toggles button { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--game-line); border-radius: 7px; background: var(--game-raised); color: var(--game-text); font: inherit; }
#toggles button { margin: 0; cursor: pointer; }
#toggles button:hover, #viewerSettings > summary:hover { border-color: var(--game-cyan); }

#messages { position: absolute; left: 50%; top: calc(var(--topbar-height, 56px) + 76px); transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; max-width: min(520px, calc(100vw - 32px)); }
.msg { color: var(--game-text); background: var(--game-glass); border: 1px solid var(--game-line); border-radius: 8px; padding: 6px 14px; box-shadow: var(--game-shadow); backdrop-filter: blur(14px) saturate(1.12); animation: fade 3.2s forwards; }
.msg.bad { border-color: var(--bad); }
.msg.good { border-color: var(--good); }
@keyframes fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
#blind { position: absolute; inset: 0; }
#blindVeil { position: absolute; inset: 0; background: var(--game-text); }
#blindCount { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 8px 18px; border-radius: 9px; background: var(--game-bg); color: var(--game-text); border: 1px solid var(--game-line); font: 800 22px/1.2 var(--ds-font-mono); }
#dead { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font: 800 34px/1.1 var(--ds-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--bad); text-shadow: 0 2px 8px var(--game-bg); }

#connect { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); color: var(--game-text); background: var(--game-glass); border: 1px solid var(--game-line); border-radius: 12px; padding: 20px; display: grid; gap: 12px; box-shadow: var(--game-shadow); backdrop-filter: blur(14px) saturate(1.12); }
#connect h1 { margin: 0; font: 800 20px/1.2 var(--ds-font-display); letter-spacing: .06em; text-transform: uppercase; }
#connect label { display: grid; gap: 4px; color: var(--game-muted); font: 700 11px/1.4 var(--ds-font-display); letter-spacing: .08em; text-transform: uppercase; }
#viewerAdvanced[open] { display: grid; gap: 12px; }
#viewerAdvanced > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--game-cyan); font: 800 12px/1.2 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; list-style: none; }
#viewerAdvanced > summary::-webkit-details-marker { display: none; }
#viewerAdvanced > summary::before { content: "▸"; margin-right: 8px; }
#viewerAdvanced[open] > summary::before { content: "▾"; }
#connect input { padding: 8px 10px; background: var(--game-raised); color: var(--game-text); border: 1px solid var(--game-line); border-radius: 7px; font: inherit; }
#connect input { min-width: 0; width: 100%; }
#connect button { min-height: 48px; padding: 9px 16px; background: var(--game-pink); color: var(--game-pink-ink); border: 0; border-radius: 8px; font: 800 13px/1.2 var(--ds-font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
#formError { margin: 0; color: var(--bad); }
#formError:not(:empty) { min-height: 1.4em; }
.hint { margin: 0; color: var(--game-muted); font-size: 12px; }
code { background: var(--game-raised); padding: 0 4px; border-radius: 3px; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: var(--game-text); box-shadow: 0 0 2px var(--game-bg); }
#crosshair::before { left: 8px; top: 0; width: 2px; height: 18px; }
#crosshair::after { top: 8px; left: 0; width: 18px; height: 2px; }
#toggles button { margin-top: 4px; padding: 8px 10px; background: var(--game-raised); color: var(--game-text); border: 1px solid var(--game-line); border-radius: 7px; cursor: pointer; font: inherit; }
#hudSideStack > #killfeed { position: static; min-width: 0; max-height: 38vh; overflow-y: auto; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; justify-items: stretch; }
#killfeed li { min-width: 0; overflow-wrap: anywhere; color: var(--game-text); background: var(--game-glass); border: 1px solid var(--game-line); border-left: 3px solid var(--game-pink); border-radius: 8px; padding: 7px 10px; font: 700 12px/1.35 var(--ds-font-display); box-shadow: var(--game-shadow); backdrop-filter: blur(14px) saturate(1.12); animation: fade 6s forwards; }
#killfeed li.bad { border-left-color: var(--game-danger); }
#killfeed li.good { border-left-color: var(--game-good); }
/* Own-team entries: team colour plus the in-world marker shape (own team = side a = ring), so colour is never the only cue. */
#killfeed li[data-team=own]::before { margin-right: .4em; color: var(--game-team-a); content: "\25CF"; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%) rotate(45deg); }
#hitmarker::before, #hitmarker::after { content: ''; position: absolute; background: var(--game-text); box-shadow: 0 0 3px var(--game-bg); }
#hitmarker::before { left: 12px; top: 0; width: 2px; height: 26px; }
#hitmarker::after { top: 12px; left: 0; width: 26px; height: 2px; }
#hitmarker.head::before, #hitmarker.head::after { background: var(--bad); }
#endscreen { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--game-text); background: var(--game-scrim); pointer-events: auto; }
#endscreen .card { background: var(--game-glass); border: 1px solid var(--game-line); border-radius: 12px; padding: 20px 28px; min-width: min(360px, calc(100vw - 32px)); text-align: center; box-shadow: var(--game-shadow); backdrop-filter: blur(14px) saturate(1.12); }
#endscreen h2 { margin: 0 0 4px; font: 800 28px/1.15 var(--ds-font-display); letter-spacing: .04em; text-transform: uppercase; }
#endscreen h2.win { color: var(--good); }
#endscreen h2.lose { color: var(--bad); }
#endscreen table { width: 100%; border-collapse: collapse; margin: 12px 0; font-variant-numeric: tabular-nums; }
#endscreen th, #endscreen td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
#endscreen tr.me td { color: var(--game-cyan); font-weight: 700; }
#endscreen button { min-height: 44px; padding: 8px 16px; background: var(--game-pink); color: var(--game-pink-ink); border: 0; border-radius: 8px; font: 800 12px/1.2 var(--ds-font-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
#endActions { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; }
#endActions a { color: var(--game-cyan); font-weight: 700; }
#viewerLoading { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; margin: 0; color: var(--game-text); font: 800 13px/1.2 var(--ds-font-display); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }

/* Panels stay usable when a phone rotates or the on-screen keyboard opens. */
#connect { max-height: calc(100dvh - 32px); overflow: auto; }
#connect input, #connect button, #endscreen button { min-height: 44px; }
#endscreen .card { min-width: 0; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; overflow-wrap: anywhere; }
#endscreen table { table-layout: fixed; }
#replayLink { min-height: 44px; padding: 12px 0; }
#messages, #killfeed { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  :root { --topbar-height: 112px; }
  #topbar { top: max(8px, env(safe-area-inset-top, 0px)); left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); width: auto; transform: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: start; }
  #topbar > div { min-width: 0; padding: 7px 8px; }
  #match { grid-column: 1; }
  #topbar > #conn { grid-column: 2; grid-row: 1; justify-self: stretch; text-align: right; }
  #scorePanel { grid-column: 1 / -1; gap: 4px 8px; }
  #score { font-size: 11px; }
  #teamScore, #ctlHud { font-size: 11px; }
  #hudSideStack { top: calc(var(--topbar-height) + 76px); right: max(8px, env(safe-area-inset-right, 0px)); width: min(44vw, 180px); max-height: calc(100dvh - var(--topbar-height) - 136px - env(safe-area-inset-bottom, 0px)); gap: 8px; }
  #hudSideStack > #killfeed { max-height: 28vh; gap: 5px; }
  #killfeed li { padding: 6px 8px; font-size: 11px; }
  #stats { left: max(8px, env(safe-area-inset-left, 0px)); bottom: max(8px, env(safe-area-inset-bottom, 0px)); width: min(200px, calc(100vw - 16px)); padding: 8px; }
  #net { right: max(8px, env(safe-area-inset-right, 0px)); bottom: max(8px, env(safe-area-inset-bottom, 0px)); max-width: 52vw; text-align: right; font-size: 10px; }
  #viewerSettings { right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  #viewerSettings[open] #toggles { max-height: min(48dvh, 390px); }
  #radioPanel { right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(118px + env(safe-area-inset-bottom, 0px)); width: min(200px, calc(100vw - 16px)); padding: 6px 10px; }
  #radioFeed { max-height: 96px; }
  #messages { top: calc(var(--topbar-height) + 76px); max-width: calc(100vw - 16px); }
  #debugTraceLabel { top: calc(var(--topbar-height) + 76px); left: 8px; max-width: calc(100vw - 16px); }
  #endscreen { padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px)); }
  #endscreen .card { max-height: 90dvh; overflow: auto; padding: 16px; }
  #connect { max-height: 90dvh; overflow: auto; padding: 16px; }
  #connect input, #connect button, #endscreen button { min-height: 44px; }
}

@media (max-width: 420px) {
  #topbar { font-size: 12px; }
  #topbar > div { padding: 5px 7px; }
  #score { font-size: 10px; }
  #stats { width: min(170px, 45vw); }
  #net { max-width: 45vw; font-size: 10px; }
  #viewerSettings[open] #toggles { width: min(260px, calc(100vw - 16px)); }
  #hudSideStack { width: min(43vw, 168px); }
  #dead { font-size: clamp(26px, 8vw, 34px); }
}

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

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Sound cue ping ring, audio controls and team radio panel (cue-indicator.js, radio-panel.js). */
.cue-ring { position: relative; width: 96px; height: 96px; border: 2px solid var(--line); border-radius: 50%; }
.cue-ping { position: absolute; left: calc(50% + var(--cue-x, 0) * 42px); top: calc(50% + var(--cue-y, 0) * 42px); transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--accent); overflow: hidden; text-indent: -999px; white-space: nowrap; animation: fade 1.5s forwards; }
.cue-ping.cue-shot { background: var(--bad); }
.cue-ping.cue-door { border-radius: 2px; }
.cue-ping[data-distance="far"] { opacity: .6; width: 9px; height: 9px; }
.cue-ping.cue-here { width: 24px; height: 24px; background: transparent; border: 3px solid var(--accent); }
.audio-controls { display: flex; gap: 8px; align-items: center; }
.radio-panel { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; overflow-wrap: anywhere; }
.radio-panel li { color: var(--game-text); background: var(--game-glass); border: 1px solid var(--game-line); border-radius: 7px; padding: 5px 10px; font: 700 12px/1.35 var(--ds-font-display); }
.radio-panel li.empty { color: var(--game-muted); }
.radio-panel [data-team] strong::before { content: "● "; }

/* Owner-session human chat stays below the score bar and away from viewer settings. */
#matchChat { position: fixed; right: 12px; bottom: 116px; z-index: 3; width: min(320px, calc(100vw - 24px)); color: var(--game-text); background: var(--game-glass); border: 1px solid var(--game-line); border-radius: 10px; padding: 8px; box-shadow: var(--game-shadow); backdrop-filter: blur(14px) saturate(1.12); box-sizing: border-box; }
#matchChat > button { width: 100%; }
#matchChat button, #matchChat input { min-height: 44px; padding: 6px 8px; border: 1px solid var(--game-line); border-radius: 7px; background: var(--game-raised); color: var(--game-text); font: inherit; }
#matchChat button { cursor: pointer; }
#matchChat button:disabled, #matchChat input:disabled { opacity: .6; cursor: default; }
#matchChat [role="log"] { max-height: min(180px, 25vh); overflow-y: auto; overflow-wrap: anywhere; font-size: 13px; }
#matchChat [role="log"] p { margin: 6px 0; }
#matchChat label, #matchChat [role="status"] { color: var(--game-muted); font-size: 12px; }
#matchChat [role="status"] { margin: 6px 0 0; }
#matchChat .chat-compose { display: flex; gap: 6px; }
#matchChat input { min-width: 0; flex: 1; width: 100%; }
#matchChat .team-a { color: var(--game-team-a); }
#matchChat .team-b { color: var(--game-team-b); }

/* Size the live HUD stack from its content, including expanded owner chat. */
#viewerBottomLeft { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; max-width: calc(100vw - 32px); }
#viewerBottomLeft > :is(#stats, #matchChat) { position: static; flex: none; margin: 0; }
#viewerBottomLeft > #matchChat { pointer-events: auto; }
@media (max-width: 768px) {
  #viewerBottomLeft { left: max(8px, env(safe-area-inset-left, 0px)); bottom: max(8px, env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); }
  #viewerBottomLeft > #matchChat { width: min(320px, calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); }
}
/* Viewer entry page: the leaderboard link stands alone on its line, so it is a 44px tap target. */
#leaderboardLink { display: inline-flex; align-items: center; min-height: 44px; }