@font-face { font-family: "Archivo Black"; src: url("./assets/archivo-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("./assets/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("./assets/jetbrains-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #050505;
  --panel: #0a0a0a;
  --panel-2: #101010;
  --gold: #d4af37;
  --gold-hot: #f4d45d;
  --cyan: #63e6ff;
  --orange: #ff8a38;
  --red: #ff3b46;
  --green: #4ade80;
  --white: #f7f5ee;
  --ink: #080808;
  --muted: rgba(247, 245, 238, 0.58);
  --faint: rgba(247, 245, 238, 0.32);
  --line: rgba(247, 245, 238, 0.14);
  --line-hot: rgba(212, 175, 55, 0.55);
  --display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--white); overflow-x: hidden; }
body { font-family: var(--display); overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 3px; }
button { border: 0; cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }
small, em, .panel-kicker, .feed-id, .feed-timecode, .rail-title, .camera-tab { font-family: var(--mono); font-style: normal; }
.prototype { min-height: 100vh; min-height: 100svh; background: var(--bg); isolation: isolate; }

/* Shared header */
.global-chrome {
  height: 58px;
  display: grid;
  grid-template-columns: 150px minmax(180px, 1fr) auto 118px 100px 54px;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 5, 5, 0.96);
  position: relative;
  z-index: 20;
}
.chrome-light { background: var(--white); color: var(--ink); border-color: rgba(0, 0, 0, 0.16); }
.chrome-brand, .d-brand { display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--ink); color: var(--white); }
.brand-mark { position: relative; width: 25px; height: 25px; flex: 0 0 25px; }
.brand-mark::before, .brand-mark::after, .brand-mark i::before, .brand-mark i::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-color: var(--gold); border-style: solid;
}
.brand-mark::before { left: 1px; top: 1px; border-width: 2px 0 0 2px; }
.brand-mark::after { right: 1px; top: 1px; border-width: 2px 2px 0 0; }
.brand-mark i::before { left: 1px; bottom: 1px; border-width: 0 0 2px 2px; }
.brand-mark i::after { right: 1px; bottom: 1px; border-width: 0 2px 2px 0; }
.brand-mark i { position: absolute; inset: 0; }
.brand-mark i { background: radial-gradient(circle at center, var(--gold) 0 2px, transparent 2.5px); }
.brand-word { font-size: 18px; letter-spacing: -0.03em; }
.chrome-concept { display: flex; align-items: center; gap: 13px; padding: 0 20px; min-width: 0; }
.chrome-concept small { font: 700 8px/1 var(--mono); letter-spacing: .19em; color: var(--faint); white-space: nowrap; }
.chrome-light .chrome-concept small { color: rgba(0,0,0,.45); }
.chrome-concept b { font-size: 15px; letter-spacing: .08em; white-space: nowrap; }
.chrome-live, .chrome-round, .chrome-credit { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-left: 1px solid var(--line); }
.chrome-light .chrome-live, .chrome-light .chrome-round, .chrome-light .chrome-credit { border-color: rgba(0,0,0,.12); }
.chrome-live span { font: 700 10px/1 var(--mono); letter-spacing: .1em; white-space: nowrap; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(74,222,128,.72); flex: 0 0 auto; }
.status-reconnecting { background: var(--orange); box-shadow: 0 0 10px rgba(255,138,56,.7); animation: pulse 800ms steps(2,end) infinite; }
.status-lost { background: var(--red); box-shadow: 0 0 10px rgba(255,59,70,.6); }
.chrome-round { flex-direction: column; gap: 1px; background: rgba(255,255,255,.025); }
.chrome-light .chrome-round { background: rgba(0,0,0,.035); }
.chrome-round small, .chrome-credit small { font: 400 7px/1 var(--mono); letter-spacing: .16em; color: var(--faint); }
.chrome-light .chrome-round small, .chrome-light .chrome-credit small { color: rgba(0,0,0,.5); }
.chrome-round b, .chrome-credit b { font: 700 14px/1 var(--mono); }
.chrome-credit { flex-direction: column; gap: 2px; }
.icon-button { display: grid; place-items: center; background: transparent; border-left: 1px solid var(--line); }
.chrome-light .icon-button { border-color: rgba(0,0,0,.14); }
.icon-button:hover { color: var(--gold); }
.icon-button.is-muted { color: var(--red); opacity: .7; }

/* Shared arena feed */
.arena-frame { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: #050505; user-select: none; }
.arena-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 56%; filter: contrast(1.08) saturate(.88) brightness(.72); transform: scale(1.015); transition: transform 180ms ease-out, filter 180ms ease-out, object-position 180ms ease-out; }
.arena-frame[data-view-mode="birdseye"] > img { object-position: 21% 53%; transform: scale(1.13); }
.arena-frame[data-view-mode="bench"] > img { object-position: 78% 62%; transform: scale(1.22); }
.arena-grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.08), transparent 38%, rgba(5,5,5,.35)); mix-blend-mode: multiply; }
.arena-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 8.333% 16.666%; mask-image: linear-gradient(to bottom, transparent, black 18%, black 85%, transparent); }
.feed-corner { position: absolute; width: 28px; height: 28px; border-color: rgba(247,245,238,.62); border-style: solid; z-index: 5; }
.feed-corner-tl { left: 14px; top: 14px; border-width: 1px 0 0 1px; }
.feed-corner-tr { right: 14px; top: 14px; border-width: 1px 1px 0 0; }
.feed-corner-bl { left: 14px; bottom: 14px; border-width: 0 0 1px 1px; }
.feed-corner-br { right: 14px; bottom: 14px; border-width: 0 1px 1px 0; }
.feed-id, .feed-timecode { position: absolute; z-index: 6; top: 22px; font-size: 8px; letter-spacing: .12em; text-shadow: 0 1px 8px #000; }
.feed-id { left: 26px; display: flex; gap: 9px; align-items: center; }
.feed-id span { color: var(--gold-hot); }
.feed-id b { font-weight: 700; }
.feed-timecode { right: 26px; color: rgba(255,255,255,.72); }
.feed-vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 100px rgba(0,0,0,.54), inset 0 -50px 80px rgba(0,0,0,.5); }
.arena-target { position: absolute; left: var(--x); top: var(--y); z-index: 4; width: 30px; height: 30px; transform: translate(-50%,-50%); opacity: .72; }
.arena-target i { position: absolute; inset: 3px; border: 1px solid var(--gold); }
.arena-target i::before, .arena-target i::after { content: ""; position: absolute; background: var(--gold); }
.arena-target i::before { left: 50%; top: -5px; bottom: -5px; width: 1px; }
.arena-target i::after { top: 50%; left: -5px; right: -5px; height: 1px; }
.arena-target b { position: absolute; top: 33px; left: 50%; translate: -50% 0; font: 400 6px/1 var(--mono); letter-spacing: .08em; color: var(--gold-hot); white-space: nowrap; }
.arena-target:nth-of-type(2n) { opacity: .47; }
.arena-target:nth-of-type(3n) { animation: acquire 2.8s steps(1,end) infinite; }
.aim-surface { position: absolute; inset: 0; z-index: 12; cursor: crosshair; touch-action: none; }
.live-reticle { position: absolute; left: var(--aim-x); top: var(--aim-y); width: 84px; height: 84px; translate: -50% -50%; color: var(--gold-hot); transition: color 80ms linear; }
.live-reticle .reticle-ring { position: absolute; inset: 12px; border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 0 14px rgba(212,175,55,.18); }
.live-reticle .reticle-ring::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(244,212,93,.58); border-radius: 50%; }
.live-reticle .reticle-h, .live-reticle .reticle-v { position: absolute; left: 50%; top: 50%; background: currentColor; }
.live-reticle .reticle-h { width: 100%; height: 1px; translate: -50% 0; }
.live-reticle .reticle-v { width: 1px; height: 100%; translate: 0 -50%; }
.live-reticle b { position: absolute; left: calc(50% + 35px); top: calc(50% + 29px); font: 700 7px/1 var(--mono); }
.live-reticle.hit { color: var(--white); animation: hit-confirm 380ms ease-out; }
.live-reticle.hit::after { content: "HIT +1"; position: absolute; left: 50%; top: -17px; translate: -50% 0; padding: 4px 6px; color: var(--ink); background: var(--gold-hot); font: 700 8px/1 var(--mono); letter-spacing: .08em; }
.signal-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 9px; background: rgba(4,4,4,.78); text-align: center; border: 1px solid var(--orange); }
.signal-overlay svg { width: 30px; height: 30px; color: var(--orange); }
.signal-overlay strong { font-size: clamp(20px, 3vw, 36px); letter-spacing: .08em; }
.signal-overlay span { font: 400 9px/1.5 var(--mono); letter-spacing: .08em; color: var(--muted); }
.signal-overlay.lost { border-color: var(--red); }
.signal-overlay.lost svg { color: var(--red); }
.signal-lost .arena-frame > img { filter: grayscale(1) brightness(.35) contrast(1.2); }
.pip-feed { position: absolute; right: 24px; bottom: 24px; z-index: 10; width: min(26%, 280px); aspect-ratio: 16/9; border: 1px solid rgba(255,255,255,.42); background: #000; }
.pip-feed img { width: 100%; height: 100%; object-fit: cover; object-position: 18% 50%; filter: contrast(1.1) saturate(.7) brightness(.76); }
.pip-feed span { position: absolute; left: 7px; bottom: 6px; padding: 3px 5px; background: #050505; font: 700 7px/1 var(--mono); letter-spacing: .1em; }

/* Shared cameras, slots, market */
.camera-tabs { display: flex; gap: 2px; }
.camera-tab { padding: 9px 12px; color: var(--muted); background: rgba(5,5,5,.86); border: 1px solid var(--line); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.camera-tab:hover { color: var(--white); }
.camera-tab.is-active { color: var(--ink); background: var(--gold); border-color: var(--gold); font-weight: 700; }
.rail-title, .panel-kicker { display: flex; align-items: center; justify-content: space-between; height: 35px; padding: 0 12px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 8px; letter-spacing: .12em; }
.rail-title b, .panel-kicker b { color: var(--gold-hot); font-weight: 700; }
.turret-slots { display: flex; flex-direction: column; min-height: 0; }
.turret-slot { min-height: 48px; flex: 1; display: grid; grid-template-columns: 38px minmax(0,1fr) 8px; align-items: center; gap: 7px; padding: 5px 10px; background: transparent; border-bottom: 1px solid var(--line); text-align: left; overflow: hidden; }
.turret-slot:hover { background: rgba(255,255,255,.035); }
.slot-number { font: 700 8px/1 var(--mono); color: var(--faint); }
.turret-slot b { font-size: 9px; letter-spacing: .02em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.turret-slot .slot-state { width: 6px; height: 6px; border-radius: 50%; background: var(--white); opacity: .8; }
.turret-slot.is-idle .slot-state { background: transparent; border: 1px solid var(--muted); }
.turret-slot.is-offline { color: var(--faint); background: repeating-linear-gradient(-45deg, rgba(255,138,56,.05), rgba(255,138,56,.05) 4px, transparent 4px, transparent 9px); }
.turret-slot.is-offline .slot-state { background: var(--orange); }
.turret-slot.is-own { color: var(--gold-hot); background: rgba(212,175,55,.1); box-shadow: inset 2px 0 0 var(--gold); }
.turret-slot.is-own .slot-state { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.market { min-height: 0; background: var(--panel); }
.market-rows { padding: 5px 8px; }
.market-row { position: relative; width: 100%; min-height: 54px; display: grid; grid-template-columns: minmax(0,1fr) 42px; align-items: center; padding: 7px 8px; color: var(--white); background: transparent; border-bottom: 1px solid var(--line); overflow: hidden; text-align: left; }
.market-row > span { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 3px; }
.market-row small { color: var(--gold); font: 700 7px/1 var(--mono); letter-spacing: .1em; }
.market-row b { font-size: 9px; }
.market-row > i { position: absolute; left: 0; bottom: 0; width: var(--market); height: 2px; background: var(--gold); opacity: .5; }
.market-row strong { position: relative; z-index: 2; font: 700 13px/1 var(--mono); text-align: right; }
.market-row.is-selected { background: rgba(212,175,55,.1); outline: 1px solid rgba(212,175,55,.35); }
.stake-control { display: grid; grid-template-columns: 30px 1fr 30px; gap: 4px; padding: 9px; border-top: 1px solid var(--line); }
.stake-control > button { background: #171717; }
.stake-control > span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stake-control small { font: 400 6px/1 var(--mono); color: var(--faint); letter-spacing: .12em; }
.stake-control b { font: 700 12px/1 var(--mono); }
.credit-glyph { color: var(--gold); font-style: normal; }
.stake-control .stake-submit { grid-column: 1/-1; padding: 10px; color: var(--ink); background: var(--gold); font-size: 10px; letter-spacing: .08em; }

/* Shared actions and state components */
.primary-action, .secondary-action { min-height: 50px; padding: 10px 20px; letter-spacing: .05em; }
.primary-action { color: var(--ink); background: var(--gold); box-shadow: 0 8px 28px rgba(212,175,55,.2); }
.primary-action:hover { background: var(--gold-hot); transform: translateY(-1px); }
.primary-action b { margin-left: 9px; font: 700 9px/1 var(--mono); }
.secondary-action { color: var(--white); background: transparent; border: 1px solid var(--line); font: 700 9px/1 var(--mono); letter-spacing: .1em; }
.secondary-action:hover { border-color: rgba(255,255,255,.48); }
.hold-button { position: relative; overflow: hidden; isolation: isolate; }
.hold-button .hold-fill { position: absolute; inset: 0; z-index: -1; background: var(--gold-hot); transform: scaleX(0); transform-origin: left; }
.hold-button.is-holding .hold-fill { transform: scaleX(1); transition: transform 850ms linear; }
.hold-button[data-fire].is-holding .hold-fill { transition-duration: 220ms; }
.concept-d .hold-button[data-fire].is-holding .hold-fill { transition-duration: 80ms; }
.hold-button:disabled { cursor: not-allowed; opacity: .48; }
.readiness { display: flex; align-items: center; gap: 4px; }
.readiness > span { min-width: 86px; min-height: 48px; display: grid; grid-template-columns: 22px 1fr; grid-template-rows: 1fr 1fr; column-gap: 7px; align-items: center; padding: 7px 9px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.ready-icon { grid-row: 1/3; color: var(--green); }
.ready-icon svg { width: 17px; height: 17px; }
.readiness b { align-self: end; font: 700 7px/1 var(--mono); letter-spacing: .1em; }
.readiness em { align-self: start; color: var(--green); font: 400 7px/1.2 var(--mono); }
.queue-summary { min-width: 360px; display: grid; grid-template-columns: auto minmax(80px,1fr) auto; align-items: center; column-gap: 16px; }
.queue-summary > span { display: flex; flex-direction: column; gap: 4px; }
.queue-summary small { font: 400 7px/1 var(--mono); letter-spacing: .12em; color: var(--muted); }
.queue-summary b { font: 700 19px/1 var(--mono); }
.queue-summary em { grid-column: 1/-1; margin-top: 5px; color: var(--faint); font: 400 7px/1 var(--mono); letter-spacing: .08em; }
.queue-line { display: flex; align-items: center; gap: 5px; }
.queue-line::before, .queue-line::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.queue-line i { width: 7px; height: 7px; border: 1px solid var(--muted); rotate: 45deg; }
.queue-line i:nth-child(-n+2) { background: var(--gold); border-color: var(--gold); }
.assignment { display: flex; align-items: center; gap: 20px; }
.countdown-number { min-width: 76px; font: 900 70px/.8 var(--display); color: var(--gold-hot); font-variant-numeric: tabular-nums; }
.assignment > div:last-child { display: flex; flex-direction: column; gap: 8px; }
.assignment small { font: 700 8px/1 var(--mono); color: var(--gold); letter-spacing: .15em; }
.assignment strong { font: 400 9px/1.65 var(--mono); letter-spacing: .07em; }
.play-stats { display: flex; align-items: stretch; }
.play-stats > span { min-width: 74px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 7px 13px; border-right: 1px solid var(--line); }
.play-stats small { font: 400 7px/1 var(--mono); color: var(--faint); letter-spacing: .13em; }
.play-stats b { font: 700 19px/1 var(--mono); font-variant-numeric: tabular-nums; }
.play-stats em { color: var(--faint); font-size: 9px; }
.fire-button { min-width: 220px; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--ink); background: var(--gold); }
.fire-button span { font-size: 17px; letter-spacing: .08em; }
.fire-button small { font: 700 6px/1 var(--mono); letter-spacing: .14em; opacity: .62; }
.aim-pad { position: relative; min-width: 180px; min-height: 64px; background: rgba(255,255,255,.035); border: 1px solid var(--line); overflow: hidden; cursor: crosshair; touch-action: none; }
.aim-pad-label { position: absolute; left: 8px; top: 7px; font: 400 6px/1 var(--mono); color: var(--faint); letter-spacing: .12em; }
.aim-pad-x, .aim-pad-y { position: absolute; background: rgba(255,255,255,.13); }
.aim-pad-x { left: 0; right: 0; top: 50%; height: 1px; }
.aim-pad-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.aim-pad b { position: absolute; left: var(--aim-x); top: var(--aim-y); width: 13px; height: 13px; translate: -50% -50%; border: 1px solid var(--gold-hot); border-radius: 50%; }
.results-panel { display: grid; grid-template-columns: auto minmax(240px,1fr) auto; align-items: center; gap: 24px; width: 100%; }
.result-rank { display: grid; grid-template-columns: auto auto; align-items: end; }
.result-rank small { grid-column: 1/-1; font: 400 7px/1 var(--mono); color: var(--gold); letter-spacing: .14em; }
.result-rank strong { font-size: 54px; line-height: .9; }
.result-rank em { font: 700 12px/1 var(--mono); color: var(--faint); }
.result-copy span { font: 700 7px/1 var(--mono); color: var(--gold); letter-spacing: .14em; }
.result-copy h2 { margin: 5px 0 3px; font-size: 18px; }
.result-copy p { margin: 0; max-width: 580px; color: var(--muted); font: 400 8px/1.5 var(--mono); }
.result-stats { display: flex; }
.result-stats span { display: flex; flex-direction: column; gap: 4px; padding: 0 13px; border-left: 1px solid var(--line); }
.result-stats small { font: 400 6px/1 var(--mono); color: var(--faint); letter-spacing: .12em; }
.result-stats b { font: 700 16px/1 var(--mono); }
.replay-control { grid-column: 2/4; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; }
.replay-control button { width: 28px; height: 25px; color: var(--ink); background: var(--gold); font-size: 9px; }
.replay-control input { width: 100%; accent-color: var(--gold); }
.replay-control span { font: 400 7px/1 var(--mono); color: var(--muted); }
.result-actions { display: flex; gap: 6px; }

/* Prototype evaluation controls */
.prototype-dock { position: fixed; right: 16px; top: 72px; z-index: 100; display: flex; flex-direction: row-reverse; align-items: flex-start; filter: drop-shadow(0 12px 28px rgba(0,0,0,.6)); }
.dock-toggle { width: 58px; height: 44px; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 7px; color: var(--white); background: #0b0b0b; border: 1px solid rgba(255,255,255,.18); }
.dock-toggle span { writing-mode: vertical-rl; rotate: 180deg; font: 700 6px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }
.dock-toggle b { color: var(--gold); font-size: 22px; }
.dock-controls { width: 0; height: 44px; display: flex; align-items: center; gap: 7px; overflow: hidden; opacity: 0; background: #0b0b0b; border: 1px solid transparent; border-right: 0; transition: width 180ms ease-out, opacity 100ms linear; }
.prototype-dock.is-open .dock-controls { width: min(760px, calc(100vw - 104px)); padding: 6px 8px; opacity: 1; border-color: rgba(255,255,255,.18); }
.dock-label { margin: 0 4px; font: 700 6px/1 var(--mono); letter-spacing: .13em; color: var(--faint); }
.dock-phases { display: flex; gap: 2px; }
.dock-phases button, .dock-signal { height: 34px; padding: 0 10px; background: #171717; border: 1px solid var(--line); font: 700 7px/1 var(--mono); letter-spacing: .07em; white-space: nowrap; }
.dock-phases button:hover, .dock-phases button.is-active { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.dock-signal { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.dock-all { padding: 0 8px; color: var(--muted); font: 700 7px/34px var(--mono); text-decoration: none; white-space: nowrap; }
.dock-all:hover { color: var(--gold); }
.toast { position: fixed; left: 50%; top: 76px; z-index: 120; padding: 10px 15px; color: var(--ink); background: var(--gold-hot); font: 700 8px/1 var(--mono); letter-spacing: .1em; transform: translate(-50%,-10px); opacity: 0; pointer-events: none; transition: transform 140ms ease-out, opacity 100ms linear; }
.toast.is-visible { transform: translate(-50%,0); opacity: 1; }

/* Concept A — SIGHTLINE */
.concept-a { --cyan: #64e5ff; }
.a-shell { height: calc(100svh - 58px); display: grid; grid-template-columns: 88px minmax(420px,1fr) 246px; grid-template-rows: minmax(0,1fr) auto; background: #050505; transition: grid-template-columns 190ms ease-out; }
.a-slots, .a-market { min-height: 0; overflow: hidden; background: #080808; transition: opacity 140ms linear; }
.a-slots { border-right: 1px solid var(--line); }
.a-market { border-left: 1px solid var(--line); }
.a-slots .rail-title { flex-direction: column; height: 52px; justify-content: center; gap: 4px; padding: 0; }
.a-slots .turret-slots { height: calc(100% - 52px); }
.a-slots .turret-slot { grid-template-columns: 1fr 7px; justify-items: center; padding: 4px; min-height: 34px; }
.a-slots .turret-slot .slot-number { grid-column: 1; font-size: 8px; }
.a-slots .turret-slot b { grid-column: 1; font-size: 6px; }
.a-slots .turret-slot .slot-state { grid-column: 2; grid-row: 1/3; }
.a-optic { position: relative; min-width: 0; min-height: 0; padding: 14px; background: #050505; }
.a-optic .arena-frame { border: 1px solid rgba(212,175,55,.42); box-shadow: inset 0 0 0 4px rgba(5,5,5,.86); }
.a-optic::before, .a-optic::after { content: ""; position: absolute; z-index: 8; pointer-events: none; }
.a-optic::before { inset: 7px; border: 1px solid rgba(212,175,55,.22); }
.a-optic::after { left: 50%; top: 5px; bottom: 5px; width: 1px; background: linear-gradient(transparent, rgba(212,175,55,.35) 10%, transparent 26%, transparent 74%, rgba(212,175,55,.35) 90%, transparent); }
.optic-meta { position: absolute; left: 30px; top: 28px; z-index: 15; display: flex; gap: 10px; padding: 6px 8px; background: rgba(5,5,5,.72); font: 700 7px/1 var(--mono); letter-spacing: .11em; }
.optic-meta span { color: var(--muted); }
.optic-meta b { color: var(--gold-hot); }
.a-optic .camera-tabs { position: absolute; left: 50%; bottom: 27px; z-index: 16; translate: -50% 0; }
.a-market .market { height: 100%; display: flex; flex-direction: column; }
.a-market .market-rows { flex: 1; }
.a-market .market-row { min-height: 72px; }
.a-command { grid-column: 1/-1; min-height: 84px; display: flex; align-items: stretch; justify-content: space-between; border-top: 1px solid var(--line-hot); background: #090909; }
.a-ticker { min-width: 0; flex: 1; display: flex; align-items: center; gap: clamp(14px, 3vw, 48px); padding: 0 22px; overflow: hidden; }
.a-ticker small { color: var(--gold); font: 700 7px/1 var(--mono); letter-spacing: .14em; }
.a-ticker b, .a-ticker span { font: 700 9px/1 var(--mono); white-space: nowrap; }
.a-ticker span { color: var(--muted); }
.join-button { min-width: 300px; padding: 0 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink); background: var(--gold); }
.join-button span { font-size: 15px; letter-spacing: .06em; }
.join-button small { font: 700 7px/1 var(--mono); letter-spacing: .12em; opacity: .64; }
.a-queue-command, .a-assigned-command, .a-play-command, .a-results-command { padding: 10px 14px; gap: 12px; align-items: center; }
.a-queue-command .secondary-action { margin-left: auto; }
.a-assigned-command { justify-content: center; }
.armed-status { margin-left: auto; min-width: 220px; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.35); font: 700 8px/1 var(--mono); letter-spacing: .1em; }
.armed-status i { width: 8px; height: 8px; border: 1px solid var(--gold); rotate: 45deg; animation: pulse 700ms steps(2,end) infinite; }
.a-play-command { justify-content: center; }
.a-play-command .aim-pad { flex: 1; max-width: 380px; }
.a-play-command .fire-button { min-width: min(28vw, 360px); }
.a-results-command { min-height: 130px; }
.a-results-command .results-panel { flex: 1; }
.phase-playing .a-shell, .phase-finished .a-shell { grid-template-columns: 0 minmax(420px,1fr) 0; }
.phase-playing .a-slots, .phase-playing .a-market, .phase-finished .a-slots, .phase-finished .a-market { opacity: 0; pointer-events: none; }

/* Concept B — THE RANGE */
.concept-b { --gold: #d8b43e; }
.b-shell { height: calc(100svh - 58px); display: grid; grid-template-columns: minmax(520px,1fr) 235px; grid-template-rows: minmax(0,1fr) auto; background: #070707; }
.b-feed { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px 0; }
.b-feed-heading { height: 44px; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--line); border-inline: 1px solid var(--line); padding: 0 12px; }
.b-feed-heading > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.b-feed-heading small { font: 400 6px/1 var(--mono); color: var(--faint); letter-spacing: .13em; }
.b-feed-heading b { font: 700 8px/1 var(--mono); letter-spacing: .1em; }
.b-feed-heading .camera-tabs { margin-left: auto; }
.b-feed-heading .camera-tab { padding-block: 7px; }
.b-authority { display: flex; align-items: center; gap: 7px; padding-left: 14px; border-left: 1px solid var(--line); font: 400 6px/1 var(--mono); color: var(--faint); letter-spacing: .1em; }
.b-authority i { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
.b-feed .arena-frame { flex: 1; border: 1px solid var(--line); }
.b-rail { min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #0b0b0b; }
.b-rail .turret-slots { flex: 1; }
.b-rail .turret-slot { min-height: 36px; }
.view-slot { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #141414; border-top: 1px solid var(--line); font: 700 7px/1 var(--mono); letter-spacing: .1em; }
.view-slot span { color: var(--gold); font-size: 14px; }
.b-command { grid-column: 1/-1; display: grid; grid-template-columns: 112px 1fr; min-height: 96px; border-top: 1px solid rgba(255,255,255,.24); background: #0a0a0a; }
.command-label { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 0 14px; border-right: 1px solid var(--line); }
.command-label span { font: 400 6px/1.4 var(--mono); color: var(--faint); letter-spacing: .12em; }
.command-label b { font: 700 9px/1 var(--mono); color: var(--gold); }
.b-strip-grid { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.b-market-inline { flex: 1; display: flex; align-items: center; gap: 6px; }
.b-market-inline > span { margin-right: 8px; font: 700 7px/1 var(--mono); color: var(--faint); letter-spacing: .12em; }
.b-market-inline button { min-height: 42px; padding: 0 16px; background: #151515; border: 1px solid var(--line); font: 700 9px/1 var(--mono); }
.b-market-inline button.is-selected { color: var(--ink); background: var(--white); }
.b-market-inline small { margin-left: auto; font: 400 7px/1 var(--mono); color: var(--muted); }
.b-join { min-width: 260px; }
.b-queue .queue-summary, .b-brief .assignment { flex: 1; }
.b-queue .secondary-action { margin-left: auto; }
.b-brief { justify-content: space-between; }
.server-state { min-width: 250px; display: flex; flex-direction: column; gap: 6px; padding: 15px; border-left: 1px solid var(--line); }
.server-state small { font: 400 6px/1 var(--mono); color: var(--faint); letter-spacing: .12em; }
.server-state b { font: 700 8px/1 var(--mono); color: var(--green); letter-spacing: .08em; }
.b-playing .play-stats { margin-right: auto; }
.b-playing .aim-pad { flex: 1; max-width: 360px; }
.b-results { min-height: 130px; }
.b-results .results-panel { flex: 1; }
.b-results .result-actions { flex-direction: column; min-width: 170px; }

/* Concept C — RANGEFINDER */
.concept-c { --orange: #ff8d3a; }
.c-shell { height: calc(100svh - 58px); display: grid; grid-template-columns: minmax(520px,1fr) 300px; grid-template-rows: minmax(0,1fr) auto; background: #050505; }
.c-feed { min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; padding: 10px 0 0 10px; }
.c-feed-status { min-height: 35px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; border: 1px solid var(--line); border-bottom: 0; padding: 0 10px; font: 700 7px/1 var(--mono); letter-spacing: .1em; }
.c-feed-status span { display: flex; align-items: center; gap: 7px; }
.c-feed-status b { color: var(--muted); }
.c-feed-status em { margin-left: 20px; color: var(--orange); font-style: normal; }
.phase-playing.signal-live .c-feed-status em { color: var(--gold); }
.c-feed .arena-frame { flex: 1; border: 1px solid rgba(255,255,255,.24); }
.c-feed .camera-tabs { position: absolute; left: 25px; bottom: 15px; z-index: 20; }
.c-side { min-height: 0; overflow: auto; border-left: 1px solid var(--line); background: #090909; }
.turret-slots.is-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 7px; gap: 5px; }
.turret-slots.is-grid .turret-slot { min-height: 63px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 4px; padding: 7px; border: 1px solid var(--line); }
.turret-slots.is-grid .turret-slot b { font-size: 8px; }
.turret-slots.is-grid .turret-slot em { font: 400 6px/1 var(--mono); color: var(--faint); }
.c-side .market { border-top: 1px solid var(--line); }
.c-side .market-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.c-side .market-row { min-height: 52px; grid-template-columns: 1fr; }
.c-side .market-row strong { position: absolute; right: 7px; top: 7px; font-size: 9px; }
.c-action-rail { grid-column: 1/-1; position: relative; min-height: 96px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 40px; border-top: 2px solid var(--gold); background: #0b0b0b; box-shadow: 0 -18px 40px rgba(0,0,0,.35); }
.rail-notch { position: absolute; left: 0; top: 0; bottom: 0; width: 28px; display: flex; align-items: center; justify-content: center; background: rgba(212,175,55,.08); border-right: 1px solid rgba(212,175,55,.3); }
.rail-notch i { position: absolute; top: 0; left: 0; width: 28px; height: 3px; background: var(--gold); }
.rail-notch span { writing-mode: vertical-rl; rotate: 180deg; font: 700 6px/1 var(--mono); letter-spacing: .15em; color: var(--gold); }
.c-rail-copy { min-width: 230px; display: flex; flex-direction: column; gap: 6px; }
.c-rail-copy small { font: 400 7px/1 var(--mono); color: var(--faint); letter-spacing: .12em; }
.c-rail-copy b { font: 700 12px/1 var(--mono); }
.c-action-rail .readiness { margin-left: auto; }
.c-join { min-width: 270px; margin-left: 10px; }
.c-action-rail .queue-summary { flex: 1; }
.hatch { background: repeating-linear-gradient(-45deg, rgba(255,138,56,.12), rgba(255,138,56,.12) 6px, transparent 6px, transparent 13px); border-color: rgba(255,138,56,.5); }
.safety-state { min-width: 280px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 18px; margin-left: auto; }
.safety-state b { font-size: 12px; color: var(--orange); }
.safety-state span { font: 400 7px/1 var(--mono); color: var(--muted); }
.c-action-rail .play-stats { margin-right: auto; }
.c-action-rail .aim-pad { flex: 1; max-width: 360px; }
.c-action-rail:has(.results-panel) { min-height: 140px; }
.c-action-rail .results-panel { flex: 1; }
.c-action-rail .result-actions { flex-direction: column; min-width: 180px; }
.signal-lost .c-action-rail { border-top-color: var(--orange); background: repeating-linear-gradient(-45deg, rgba(255,138,56,.07), rgba(255,138,56,.07) 8px, #0b0b0b 8px, #0b0b0b 18px); }

/* Concept D — SCOPECAST */
.concept-d { background: #000; }
.d-shell { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.d-feed { position: absolute; inset: 0; }
.d-feed .arena-frame { width: 100%; height: 100%; }
.d-feed .arena-frame > img { object-position: center 58%; filter: contrast(1.12) saturate(.82) brightness(.58); }
.d-status { position: absolute; left: 0; right: 0; top: 0; z-index: 25; min-height: 54px; display: grid; grid-template-columns: 240px auto 1fr auto 50px; align-items: stretch; background: rgba(5,5,5,.88); border-bottom: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(8px); }
.d-brand { gap: 9px; padding: 0 14px; }
.d-brand > span:last-child { padding-left: 9px; border-left: 1px solid var(--line); font: 700 8px/1 var(--mono); color: var(--muted); letter-spacing: .1em; }
.d-live { display: flex; align-items: center; gap: 7px; padding: 0 16px; border-right: 1px solid var(--line); font: 700 8px/1 var(--mono); letter-spacing: .1em; }
.d-status .play-stats { justify-self: center; }
.d-status .play-stats > span { min-width: 64px; padding-block: 4px; }
.d-status .play-stats b { font-size: 14px; }
.d-credit { display: grid; place-items: center; padding: 0 17px; border-left: 1px solid var(--line); font: 700 12px/1 var(--mono); }
.d-scopes { position: absolute; left: 0; top: 54px; bottom: 140px; z-index: 20; width: 98px; display: flex; flex-direction: column; background: rgba(5,5,5,.78); border-right: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(5px); }
.scope-label { min-height: 34px; display: grid; place-items: center; border-bottom: 1px solid var(--line); font: 700 6px/1 var(--mono); letter-spacing: .13em; color: var(--muted); }
.turret-slots.is-scopes { flex: 1; display: grid; grid-template-columns: repeat(2,1fr); grid-auto-rows: 1fr; min-height: 0; }
.turret-slots.is-scopes .turret-slot { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px; border-right: 1px solid var(--line); }
.scope-shape { position: relative; width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; }
.scope-shape::before, .scope-shape::after { content: ""; position: absolute; background: rgba(255,255,255,.4); }
.scope-shape::before { width: 1px; height: 31px; left: 50%; top: -4px; }
.scope-shape::after { height: 1px; width: 31px; left: -4px; top: 50%; }
.scope-shape i { position: absolute; inset: 7px; border: 1px solid currentColor; border-radius: 50%; }
.turret-slots.is-scopes .turret-slot b { font: 700 5px/1 var(--mono); }
.turret-slots.is-scopes .turret-slot.is-own .scope-shape { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px rgba(212,175,55,.35); }
.d-state-chrome { position: absolute; left: 0; right: 0; bottom: 0; z-index: 25; min-height: 140px; display: grid; grid-template-columns: 100px 1fr; background: rgba(5,5,5,.9); border-top: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.d-mode { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 0 13px; border-right: 1px solid var(--line); }
.d-mode small { font: 400 6px/1 var(--mono); color: var(--faint); letter-spacing: .13em; }
.d-mode b { font: 700 9px/1 var(--mono); color: var(--gold); }
.d-spectator, .d-queue, .d-assigned, .d-playing, .d-results { display: flex; align-items: center; gap: 14px; padding: 13px 18px; min-width: 0; }
.d-predict { flex: 1; display: flex; align-items: center; gap: 6px; }
.d-predict small { margin-right: 8px; font: 700 7px/1 var(--mono); color: var(--muted); letter-spacing: .11em; }
.d-predict button { min-width: 115px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.d-predict button.is-selected { border-color: var(--gold); }
.d-predict button b { font: 700 9px/1 var(--mono); }
.d-predict button span { color: var(--gold); font: 700 12px/1 var(--mono); }
.d-spectator .primary-action { min-width: 280px; }
.d-queue .queue-summary, .d-assigned .assignment { flex: 1; }
.d-queue .secondary-action { margin-left: auto; }
.d-playing .aim-pad { flex: 1; max-width: 460px; margin-left: auto; }
.d-playing .fire-button { min-width: 320px; margin-right: auto; background: var(--red); color: var(--white); }
.d-mobile-stats { display: none; }
.d-results { min-height: 160px; }
.d-results .results-panel { flex: 1; }
.d-results .result-actions { flex-direction: column; min-width: 170px; }
.d-view-tabs { position: absolute; right: 22px; bottom: 156px; z-index: 26; }
.phase-finished .d-state-chrome { min-height: 174px; }
.phase-finished .d-scopes { bottom: 174px; }
.phase-finished .d-view-tabs { bottom: 190px; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .34; } }
@keyframes acquire { 0%,62%,100% { opacity: .28; } 64%,94% { opacity: .9; } }
@keyframes hit-confirm { 0% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* Tablet and phone portrait */
@media (max-width: 820px) {
  .global-chrome { height: 44px; grid-template-columns: 92px minmax(0,1fr) auto 44px; }
  .chrome-brand { padding: 0 11px; gap: 7px; }
  .brand-mark { width: 20px; height: 20px; flex-basis: 20px; }
  .brand-word { font-size: 13px; }
  .chrome-concept { padding: 0 10px; gap: 0; }
  .chrome-concept small { display: none; }
  .chrome-concept b { font-size: 11px; }
  .chrome-live { padding: 0 9px; }
  .chrome-live span { font-size: 7px; }
  .chrome-round, .chrome-credit { display: none; }
  .icon-button { grid-column: 4; }
  .feed-id, .feed-timecode { top: 16px; font-size: 6px; }
  .feed-id { left: 20px; }
  .feed-timecode { right: 20px; }
  .feed-corner { width: 20px; height: 20px; }
  .camera-tab { padding: 7px 9px; font-size: 6px; }
  .prototype-dock { right: 8px; top: 52px; }
  .prototype-dock.is-open .dock-controls { width: calc(100vw - 88px); height: auto; min-height: 50px; flex-wrap: wrap; padding: 6px; }
  .dock-label { display: none; }
  .dock-phases { flex: 1; overflow-x: auto; }
  .dock-phases button { padding-inline: 8px; }
  .dock-signal { order: 3; flex: 1; margin: 0; justify-content: center; }
  .dock-all { order: 4; }
  .toast { top: 56px; max-width: calc(100vw - 30px); text-align: center; }
  .readiness { width: 100%; }
  .readiness > span { min-width: 0; flex: 1; }
  .queue-summary { min-width: 0; width: 100%; }
  .results-panel { grid-template-columns: auto 1fr; gap: 14px; }
  .result-stats { grid-column: 1/-1; }
  .replay-control { grid-column: 1/-1; }
  .result-copy h2 { font-size: 14px; }
  .result-copy p { font-size: 7px; }

  .a-shell { height: calc(100svh - 44px); grid-template-columns: 1fr; grid-template-rows: minmax(260px, 1fr) 62px auto auto; }
  .a-optic { grid-row: 1; padding: 8px; }
  .a-slots { grid-row: 2; border: 0; border-top: 1px solid var(--line); overflow-x: auto; }
  .a-slots .rail-title { display: none; }
  .a-slots .turret-slots { height: 100%; flex-direction: row; width: max-content; }
  .a-slots .turret-slot { width: 58px; min-height: 0; border-right: 1px solid var(--line); }
  .a-market { grid-row: 3; border: 0; border-top: 1px solid var(--line); }
  .a-market .panel-kicker { display: none; }
  .a-market .market-rows { display: flex; padding: 4px; }
  .a-market .market-row { min-height: 48px; flex: 1; }
  .a-market .stake-control { display: none; }
  .a-command { grid-row: 4; min-height: 82px; flex-wrap: wrap; }
  .a-ticker { display: none; }
  .join-button { width: 100%; min-width: 0; }
  .a-queue-command, .a-assigned-command, .a-play-command, .a-results-command { padding: 9px; }
  .a-queue-command .queue-summary { order: 1; }
  .a-queue-command .readiness { order: 2; }
  .a-queue-command .secondary-action { order: 3; width: 100%; }
  .a-assigned-command .assignment { width: 100%; }
  .a-play-command { display: grid; grid-template-columns: 1fr 1fr; }
  .a-play-command .play-stats { grid-column: 1/-1; justify-content: center; }
  .a-play-command .play-stats > span { min-width: 0; flex: 1; }
  .a-play-command .aim-pad, .a-play-command .fire-button { min-width: 0; width: 100%; }
  .a-results-command { min-height: 220px; }
  .a-results-command .result-actions { width: 100%; }
  .a-results-command .result-actions button { flex: 1; }
  .phase-playing .a-shell, .phase-finished .a-shell { grid-template-columns: 1fr; grid-template-rows: minmax(260px,1fr) 0 0 auto; }
  .phase-playing .a-slots, .phase-playing .a-market, .phase-finished .a-slots, .phase-finished .a-market { height: 0; }

  .b-shell { height: calc(100svh - 44px); grid-template-columns: 1fr; grid-template-rows: minmax(250px,1fr) 62px auto; }
  .b-feed { grid-row: 1; padding: 7px 7px 0; }
  .b-feed-heading { height: 38px; }
  .b-authority { display: none; }
  .b-feed-heading .camera-tabs { gap: 1px; }
  .b-rail { grid-row: 2; border-left: 0; border-top: 1px solid var(--line); overflow-x: auto; }
  .b-rail .rail-title, .b-rail .view-slot { display: none; }
  .b-rail .turret-slots { flex-direction: row; width: max-content; }
  .b-rail .turret-slot { width: 72px; min-height: 60px; grid-template-columns: 30px 1fr 6px; }
  .b-command { grid-row: 3; grid-template-columns: 1fr; min-height: 105px; }
  .command-label { display: none; }
  .b-strip-grid { flex-wrap: wrap; padding: 9px; }
  .b-market-inline { width: 100%; }
  .b-market-inline > span, .b-market-inline small { display: none; }
  .b-market-inline button { flex: 1; }
  .b-join { width: 100%; }
  .b-queue .readiness { order: 2; }
  .b-queue .secondary-action { order: 3; width: 100%; }
  .b-brief .server-state { width: 100%; min-width: 0; border: 1px solid var(--line); }
  .b-playing { display: grid; grid-template-columns: 1fr 1fr; }
  .b-playing .play-stats { grid-column: 1/-1; }
  .b-playing .play-stats > span { min-width: 0; flex: 1; }
  .b-playing .aim-pad, .b-playing .fire-button { width: 100%; min-width: 0; }
  .b-results { min-height: 220px; }
  .b-results .result-actions { width: 100%; flex-direction: row; }
  .b-results .result-actions button { flex: 1; }

  .c-shell { height: calc(100svh - 44px); grid-template-columns: 1fr; grid-template-rows: minmax(250px,1fr) auto auto; }
  .c-feed { grid-row: 1; padding: 6px 6px 0; }
  .c-feed-status { grid-template-columns: 1fr auto; }
  .c-feed-status b { display: none; }
  .c-side { grid-row: 2; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr; }
  .c-side .rail-title { display: none; }
  .turret-slots.is-grid { display: flex; overflow-x: auto; }
  .turret-slots.is-grid .turret-slot { min-width: 76px; min-height: 54px; }
  .c-side .market { display: none; }
  .c-action-rail { grid-row: 3; padding: 10px 9px 10px 34px; flex-wrap: wrap; }
  .c-rail-copy { width: 100%; min-width: 0; }
  .c-action-rail .readiness { margin: 0; }
  .c-join { width: 100%; min-width: 0; margin: 0; }
  .c-action-rail .queue-summary { width: 100%; }
  .safety-state { width: 100%; min-width: 0; margin: 0; }
  .c-action-rail:has(.play-stats) { display: grid; grid-template-columns: 1fr 1fr; }
  .c-action-rail .play-stats { grid-column: 1/-1; }
  .c-action-rail .play-stats > span { min-width: 0; flex: 1; }
  .c-action-rail .aim-pad, .c-action-rail .fire-button { min-width: 0; width: 100%; }
  .c-action-rail:has(.results-panel) { min-height: 220px; }
  .c-action-rail .result-actions { width: 100%; flex-direction: row; }
  .c-action-rail .result-actions button { flex: 1; }

  .d-status { min-height: 44px; grid-template-columns: 128px 1fr auto 42px; }
  .d-brand { padding: 0 9px; }
  .d-brand .brand-word { font-size: 12px; }
  .d-brand > span:last-child { display: none; }
  .d-live { padding: 0 8px; font-size: 6px; }
  .d-status .play-stats { display: none; }
  .d-credit { padding: 0 9px; font-size: 9px; }
  .d-scopes { left: 0; right: 0; top: auto; bottom: 42%; width: auto; height: 57px; display: block; border-right: 0; border-top: 1px solid var(--line); }
  .scope-label { display: none; }
  .turret-slots.is-scopes { display: flex; overflow-x: auto; }
  .turret-slots.is-scopes .turret-slot { min-width: 58px; height: 56px; flex: none; border-bottom: 0; }
  .scope-shape { width: 22px; height: 22px; }
  .d-state-chrome { min-height: 42%; grid-template-columns: 1fr; }
  .d-mode { min-height: 36px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 11px; border-right: 0; border-bottom: 1px solid var(--line); }
  .d-spectator, .d-queue, .d-assigned, .d-playing, .d-results { padding: 10px; flex-wrap: wrap; align-content: center; }
  .d-predict { width: 100%; }
  .d-predict small { display: none; }
  .d-predict button { flex: 1; min-width: 0; }
  .d-spectator .primary-action { width: 100%; min-width: 0; }
  .d-queue .readiness { width: 100%; }
  .d-queue .secondary-action { width: 100%; }
  .d-playing { display: grid; grid-template-columns: 1fr 1fr; }
  .d-mobile-stats { display: block; grid-column: 1/-1; width: 100%; }
  .d-mobile-stats .play-stats { display: flex; width: 100%; }
  .d-mobile-stats .play-stats > span { flex: 1; min-width: 0; }
  .d-playing .aim-pad, .d-playing .fire-button { min-width: 0; width: 100%; margin: 0; }
  .d-results { min-height: 100%; }
  .d-results .result-actions { width: 100%; flex-direction: row; }
  .d-results .result-actions button { flex: 1; }
  .d-view-tabs { right: 10px; bottom: calc(42% + 67px); }
  .pip-feed { right: 12px; bottom: calc(42% + 78px); width: 31%; }
  .phase-finished .d-state-chrome { min-height: 48%; }
  .phase-finished .d-scopes { bottom: 48%; }
  .phase-finished .d-view-tabs { bottom: calc(48% + 67px); }
}

/* Short landscape prioritizes the control surface */
@media (max-height: 560px) and (orientation: landscape) {
  .global-chrome { height: 36px; grid-template-columns: 96px 1fr auto 42px; }
  .chrome-brand { padding: 0 10px; }
  .chrome-concept b { font-size: 10px; }
  .chrome-round, .chrome-credit { display: none; }
  .global-chrome .icon-button { grid-column: 4; }
  .a-shell, .b-shell, .c-shell { height: calc(100svh - 36px); }
  .a-command, .b-command, .c-action-rail { min-height: 70px; }
  .a-shell { grid-template-columns: 62px 1fr 190px; grid-template-rows: minmax(0,1fr) auto; }
  .a-slots, .a-market { display: block; }
  .a-optic { grid-row: auto; padding: 7px; }
  .a-slots .turret-slots { flex-direction: column; width: auto; }
  .a-slots .turret-slot { width: auto; }
  .a-market .market-rows { display: block; }
  .a-market .market-row { min-height: 38px; }
  .a-market .stake-control { display: grid; }
  .a-command { grid-row: 2; }
  .phase-playing .a-shell { grid-template-columns: 0 1fr 0; }
  .b-shell { grid-template-columns: 1fr 190px; grid-template-rows: minmax(0,1fr) auto; }
  .b-feed { grid-row: auto; padding: 5px 5px 0; }
  .b-rail { grid-row: auto; display: flex; overflow: hidden; }
  .b-rail .turret-slots { flex-direction: column; width: auto; }
  .b-rail .turret-slot { width: auto; min-height: 28px; }
  .b-command { grid-row: 2; grid-template-columns: 92px 1fr; }
  .command-label { display: flex; }
  .b-strip-grid { flex-wrap: nowrap; }
  .c-shell { grid-template-columns: 1fr 240px; grid-template-rows: minmax(0,1fr) auto; }
  .c-side { grid-row: auto; display: block; }
  .turret-slots.is-grid { display: grid; overflow: hidden; }
  .turret-slots.is-grid .turret-slot { min-width: 0; min-height: 44px; }
  .c-action-rail { grid-row: 2; }
  .d-scopes { top: 44px; bottom: 82px; left: 0; right: auto; width: 70px; height: auto; }
  .turret-slots.is-scopes { display: grid; overflow: hidden; }
  .turret-slots.is-scopes .turret-slot { min-width: 0; width: auto; height: auto; }
  .d-state-chrome { min-height: 82px; grid-template-columns: 74px 1fr; }
  .d-mode { min-height: 0; flex-direction: column; align-items: flex-start; justify-content: center; border-right: 1px solid var(--line); border-bottom: 0; }
  .d-spectator, .d-queue, .d-assigned, .d-playing, .d-results { flex-wrap: nowrap; padding: 7px 10px; }
  .d-view-tabs { bottom: 92px; }
  .pip-feed { bottom: 92px; }
}

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