:root {
  --bg: #0b0d10;
  --ink: #e8ecf1;
  --muted: #8a94a3;
  --panel: rgba(12, 15, 20, 0.78);
  --t: #e8a33d;
  --ct: #5aa0f0;
  --live: #e5484d;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

/* The stage holds the whole page, so that one transform can turn it on an upright phone. Sizes inside it
   use the stage's container units (cqw, cqh), which stay right after the turn. */
#stage { position: fixed; inset: 0; overflow: hidden; container-type: size; container-name: stage; }
#radar, #view3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#view3d[hidden] { display: none; }

.bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(var(--panel), transparent);
}
.brand { color: var(--ink); font-weight: 800; letter-spacing: 0.12em; text-decoration: none; }
.live {
  background: var(--live); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px; letter-spacing: 0.08em;
}
.channel { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }
.director { color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; }
select, button {
  background: #1a1f27; color: var(--ink); border: 1px solid #2b323d; border-radius: 4px;
  font: inherit; padding: 3px 6px;
}
button { cursor: pointer; }
#follow { max-width: 12em; }

.score {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; align-items: baseline;
  background: var(--panel); padding: 6px 14px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.team { font-weight: 600; }
.team b { font-size: 20px; }
.team.t { color: var(--t); }
.team.ct { color: var(--ct); }
.clock { font-size: 18px; min-width: 3.5em; text-align: center; }

.feed {
  position: absolute; top: 52px; right: 16px; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
  max-width: calc(100% - 32px);
}
.feed li {
  background: var(--panel); padding: 3px 8px; border-radius: 4px; white-space: nowrap;
  font-size: 13px; animation: in 0.25s ease-out;
}
.hud-icon { display: inline-block; background: currentColor; vertical-align: middle; flex-shrink: 0; }
.feed .w { color: #ffa000; margin: 0 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.feed .t { color: var(--t); }
.feed .ct { color: var(--ct); }
@keyframes in { from { opacity: 0; transform: translateX(12px); } }

.caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 12px 16px; background: linear-gradient(transparent, var(--panel));
  pointer-events: none;
}
.caption a, .caption button { pointer-events: auto; }
.camera { font-size: 18px; font-weight: 700; }
.camera small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.meta { color: var(--muted); font-size: 12px; text-align: right; }

.card {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at center, #151a22, var(--bg) 70%); padding: 16px;
}
.card[hidden] { display: none; }

.loader {
  position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: radial-gradient(circle at center, #151a22, var(--bg) 70%); transition: opacity 0.3s ease-out;
}
.loader[hidden] { display: none; }
.loader.done { opacity: 0; pointer-events: none; }
.loader-brand { margin: 0; font-weight: 800; letter-spacing: 0.24em; font-size: 18px; }
.loader-bar { width: min(320px, 60cqw); height: 4px; border-radius: 2px; background: #222a35; overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--live); transition: width 0.2s ease-out; }
.loader-text { margin: 0; color: var(--muted); font-size: 13px; min-height: 1.4em; }
.card-kicker { color: var(--live); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin: 0; }
.card h1 { font-size: clamp(28px, 6vw, 56px); margin: 8px 0; }
.card p { color: var(--muted); margin: 4px 0; }
.card-count { font-variant-numeric: tabular-nums; font-size: 20px; margin-top: 12px !important; }
.card-map { font-size: 18px; }
.card-players { display: grid; gap: 6px; margin-top: 14px; max-width: min(900px, 90cqw); }
.card-players p { margin: 0; line-height: 1.4; }
.card-players b { font-weight: 700; }
.card-players b.t { color: var(--t); }
.card-players b.ct { color: var(--ct); }
/* The title card covers the stage: the insets of the views have nothing to show over it. */
body[data-card] .pip, body[data-card] .minimap { display: none; }

.chat {
  position: absolute; left: 16px; bottom: 82px; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 2px; max-width: min(560px, calc(100% - 32px));
}
.chat li {
  background: rgba(12, 15, 20, 0.6); padding: 2px 8px; border-radius: 3px; font-size: 13px;
  overflow-wrap: anywhere; animation: in 0.25s ease-out;
}
.chat .t { color: var(--t); }
.chat .ct { color: var(--ct); }
.chat .spec { color: var(--muted); }
.chat .viewer { color: #a3e635; }

.board {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 32px)); max-height: calc(100% - 120px); overflow: auto;
  background: rgba(10, 12, 16, 0.92); border: 1px solid #2b323d; border-radius: 8px; padding: 12px 16px;
  font-variant-numeric: tabular-nums;
}
.board[hidden] { display: none; }
.board-team + .board-team { margin-top: 14px; }
.board-team header { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.board-team.t { color: var(--t); }
.board-team.ct { color: var(--ct); }
.board-team h2 { margin: 0; font-size: 16px; flex: 1; }
.board-score { font-size: 20px; font-weight: 700; }
.board-alive { color: var(--muted); font-size: 12px; }
.board table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.board th { color: var(--muted); font-weight: 400; font-size: 11px; text-align: left; padding: 2px 6px; }
.board td { padding: 3px 6px; color: inherit; }
.board .num { text-align: right; width: 4.5em; }
.board .mark { color: var(--muted); font-size: 12px; width: 4.5em; }
.board .gun { width: 4em; }
.board .gun .icon { display: block; }
.board tr.dead td { opacity: 0.5; }
.board-spectators { color: var(--muted); font-size: 12px; margin: 12px 0 0; }
#board-toggle[aria-pressed="true"] { border-color: var(--live); }

.pip, .minimap {
  position: absolute; right: 16px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.pip { bottom: calc(84px + 26cqh + 10px); width: calc(26cqh * 16 / 9); height: 26cqh; }
.pip span {
  position: absolute; left: 6px; top: 4px; font-size: 11px; color: #fff;
  background: rgba(0, 0, 0, 0.55); padding: 1px 6px; border-radius: 3px; letter-spacing: 0.06em;
}
.minimap { bottom: 84px; width: 26cqh; height: 26cqh; background: rgba(8, 10, 14, 0.85); overflow: hidden; }
.minimap canvas { width: 100%; height: 100%; display: block; }
.pip[hidden], .minimap[hidden] { display: none; }

/* The clip in first person, as the game's HUD shows it: an estimate (src/shared/ammo.js). Left of the map
   where the map shows. */
.ammo {
  position: absolute; right: 16px; bottom: 84px; z-index: 2; pointer-events: auto;
  color: rgba(255, 160, 0, 0.9); font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.ammo b { font-size: clamp(22px, 5cqh, 40px); font-weight: 800; }
/* The frames a second in the top left corner, as cl_showfps 1 shows them in the game. */
.fps {
  position: absolute; left: 16px; top: 46px; z-index: 2; pointer-events: none;
  color: rgba(255, 160, 0, 0.9); font: 600 13px/1 ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.ammo.beside-map { right: calc(16px + 26cqh + 14px); }
.ammo[hidden] { display: none; }

.settings {
  position: absolute; top: 52px; right: 16px; z-index: 5; min-width: 220px;
  background: rgba(12, 15, 20, 0.95); border: 1px solid #2b323d; border-radius: 8px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; font-size: 13px;
}
.settings[hidden] { display: none; }
.settings-title { margin: 0 0 2px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.settings label { display: flex; gap: 8px; align-items: center; cursor: pointer; }

.rounds { position: absolute; left: 16px; right: 16px; bottom: 58px; height: 10px; pointer-events: none; }
.rounds canvas { width: 100%; height: 100%; display: block; }
/* In a replay the strip seeks: a taller box around the same thin strip is easier to hit. */
.rounds.seekable { pointer-events: auto; cursor: pointer; touch-action: none; height: 26px; bottom: 60px; padding: 8px 0; }

.transport { display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }
.transport[hidden] { display: none; }
.transport button { min-width: 38px; font-variant-numeric: tabular-nums; }
.back-live {
  color: #fff; background: var(--live); border-radius: 4px; padding: 3px 8px; font-size: 12px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.back-live[hidden] { display: none; }

.banner {
  position: absolute; top: 108px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 22px; border-radius: 8px; background: var(--panel); border-bottom: 3px solid var(--ink);
  animation: banner 0.45s cubic-bezier(0.34, 1.6, 0.64, 1); pointer-events: none; white-space: nowrap;
}
.banner[hidden] { display: none; }
.banner b { font-size: clamp(20px, 3.4vw, 30px); letter-spacing: 0.12em; font-weight: 900; }
.banner span { font-size: 13px; color: var(--muted); }
.banner.t { border-color: var(--t); }
.banner.t b { color: var(--t); }
.banner.ct { border-color: var(--ct); }
.banner.ct b { color: var(--ct); }
.banner.clutch b { color: #fff; }
@keyframes banner { from { opacity: 0; transform: translateX(-50%) scale(0.6); } }

.buys {
  position: absolute; left: 16px; top: 66px; width: 240px; max-height: calc(100% - 214px); overflow: hidden;
  background: var(--panel); border-radius: 8px; padding: 8px 10px; animation: in 0.3s ease-out;
}
.buys[hidden] { display: none; }
.buys-title { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.buys-team + .buys-team { margin-top: 8px; }
.buys-team header { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; border-bottom: 1px solid currentColor; margin-bottom: 3px; }
.buys-team.t { color: var(--t); }
.buys-team.ct { color: var(--ct); }
.buys-spent { color: #8fd18f; font-variant-numeric: tabular-nums; }
.buys-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; padding: 1px 0; }
.buys-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buys-items { display: flex; gap: 3px; flex-shrink: 0; }
.buys-items .icon { animation: pop 0.35s cubic-bezier(0.34, 1.8, 0.64, 1); }
@keyframes pop { from { transform: scale(0.2); opacity: 0; } }

/* An upright phone plays wide: the stage turns a quarter to the right and fills the screen sideways. */
@media (pointer: coarse) and (orientation: portrait) {
  #stage {
    inset: auto; top: 0; left: 0; width: 100dvh; height: 100dvw;
    transform-origin: top left; transform: translateX(100dvw) rotate(90deg);
  }
}

/* A short stage (a phone on its side): smaller panels, nothing over the controls. */
@container stage (max-height: 520px) {
  .bar { padding: 6px 10px; gap: 6px; }
  .bar .channel, .bar .live { display: none; }
  .director { font-size: 0; gap: 0; }
  .brand { font-size: 12px; }
  select, button { padding: 2px 5px; font-size: 12px; }
  #follow { max-width: 8em; }
  .score { top: 38px; padding: 3px 10px; gap: 8px; }
  .team b { font-size: 15px; }
  .clock { font-size: 14px; min-width: 3em; }
  .feed { top: 38px; right: 10px; gap: 2px; }
  .feed li { font-size: 11px; padding: 2px 6px; }
  .feed li:nth-child(n+4) { display: none; }
  .banner { top: 74px; padding: 4px 14px; }
  .banner b { font-size: 18px; }
  .banner span { font-size: 11px; }
  .caption { padding: 6px 10px; }
  .camera { font-size: 14px; }
  .camera small { font-size: 10px; }
  .meta { font-size: 10px; }
  .rounds { bottom: 40px; left: 10px; right: 10px; height: 6px; }
  .rounds.seekable { height: 22px; bottom: 32px; padding: 8px 0; }
  .transport { gap: 4px; }
  .transport button { min-width: 30px; }
  .chat { bottom: 52px; left: 10px; max-width: 45cqw; }
  .chat li { font-size: 11px; }
  .chat li:nth-child(n+4) { display: none; }
  .fps { top: 36px; left: 10px; font-size: 11px; }
  .buys { top: 52px; left: 10px; width: 180px; max-height: 55cqh; }
  .buys-row { font-size: 11px; }
  .minimap { bottom: 52px; right: 10px; width: min(22cqh, 110px); height: min(22cqh, 110px); pointer-events: auto; cursor: pointer; }
  .ammo { bottom: 52px; right: 10px; }
  .ammo.beside-map { right: calc(10px + min(22cqh, 110px) + 10px); }
  .minimap.big { width: 60cqh; height: 60cqh; }
  .pip { bottom: calc(52px + min(22cqh, 110px) + 6px); right: 10px; width: calc(22cqh * 16 / 9); height: 22cqh; }
  .settings { top: 38px; right: 10px; }
  .board { max-height: calc(100% - 50px); padding: 8px 10px; }
  .board .mark, .board .gun { display: none; }
  .card h1 { font-size: 28px; }
}

/* A narrow stage (a small desktop window): no inset first-person view, a smaller radar. */
@container stage (max-width: 640px) {
  .pip { display: none; }
  .minimap { width: min(24cqw, 120px); height: min(24cqw, 120px); pointer-events: auto; cursor: pointer; }
  .minimap.big { width: 70cqw; height: 70cqw; }
  .director { display: none; }
}

/* A poster (tools/posters.js): the 3D picture alone. */
body.poster #stage > :not(#view3d) { display: none !important; }