/* Interface scale: every HUD box and its text multiply by --ui-scale, so a
   high-density display (a 4K panel at 100% OS scaling packs CSS pixels tight
   and the dock reads small) can enlarge the chrome. Default 1 is pixel-for-
   pixel identical to before; the value auto-adapts to the screen height and
   is overridable in Settings (hud.js). */
:root { --ui-scale: 1; }
#hud-root { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; font: 12px/1.3 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: #d5dde2; font-size: calc(12px * var(--ui-scale)); }
#hud-root > * { pointer-events: auto; }
#res { position: fixed; top: 52px; right: 12px; display: flex; gap: 14px; padding: 6px 10px; background: rgba(13,17,19,.8); border: 1px solid #26323a; border-radius: 3px; }
.stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 54px; }
.stat b { font-size: 16px; font-variant-numeric: tabular-nums; font-weight: 600; }
/* The match clock turns red and pulses in the final seconds. */
#clock.low { color: #ff7359; animation: alarmpulse 1s ease-in-out infinite; }
.stat i { font-style: normal; font-size: 10px; color: #7f929c; letter-spacing: .08em; text-transform: uppercase; }
/* The dock is opaque and the canvas stops above it (see --dock-h). */
#dock { background: #0d1113; border-top: 1px solid #26323a; }
#prod, #tech { display: flex; gap: 6px; justify-content: center; padding: 6px 12px; flex-wrap: wrap; }
#tech { padding-bottom: 8px; }
canvas { height: calc(100vh - var(--top-h, 0px) - var(--dock-h, 0px)) !important; }
.card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 8px; align-items: baseline; width: calc(122px * var(--ui-scale)); padding: 6px 7px; background: #161c20; border: 1px solid #2b3a44; border-radius: 3px; color: inherit; text-align: left; cursor: pointer; font: inherit; font-size: calc(12px * var(--ui-scale)); }
.card:hover { border-color: #5c9eff; }
.card:focus-visible { outline: 2px solid #5c9eff; }
.card.small { width: calc(118px * var(--ui-scale)); }
.card .k { grid-row: 1 / span 2; font: 700 1.5em/1 "Barlow Condensed", "Arial Narrow", sans-serif; color: #5c9eff; }
.card .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .c { grid-column: 2; font-size: .917em; color: #a8b6be; }
.card .t { grid-column: 1 / span 2; font-size: .833em; color: #7f929c; text-transform: uppercase; letter-spacing: .06em; min-height: 12px; }
.card.off { opacity: .45; }
.card.off .t { color: #f2c14e; }
.card.owned { border-color: #3f7f52; }
.card.owned .k { color: #7fd48f; }
/* Recall (E) cooldown wipe: a gradient mask covering the fraction of the
   cooldown still to run, receding to the left as the ability readies. --cd
   (0..1) is set each poll from the engine's recall_cd; the leading edge
   glides between polls. */
.card[data-cmd="recall"] { position: relative; overflow: hidden; }
.card[data-cmd="recall"] > span { position: relative; z-index: 1; }
.card[data-cmd="recall"].cooling::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transform: scaleX(var(--cd, 0)); transform-origin: left;
  transition: transform .2s linear;
  background: linear-gradient(90deg, rgba(92, 158, 255, .32), rgba(92, 158, 255, .10));
  border-right: 1px solid rgba(92, 158, 255, .6);
}
.card[data-cmd="recall"].cooling .k { color: #7f929c; }
/* Auto-scatter mode active: the scatter button gets a lit outline. */
.card[data-cmd="scatter"].armed { border-color: #f2c14e; box-shadow: inset 0 0 0 1px #f2c14e; }
.card[data-cmd="scatter"].armed .k { color: #f2c14e; }
#banner { position: fixed; top: 38%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 22px 40px; background: rgba(13,17,19,.92); border: 1px solid #26323a; border-radius: 4px; }
#banner > div:first-child { font: 700 44px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#banner.victory > div:first-child { color: #7fd48f; } #banner.defeat > div:first-child { color: #ff7359; } #banner.draw > div:first-child { color: #f2c14e; }
#banner small { display: block; margin: 8px 0 14px; color: #7f929c; }
#banner button { font: inherit; padding: 8px 18px; background: #5c9eff; color: #0d1113; border: 0; border-radius: 3px; cursor: pointer; font-weight: 600; }
@media (max-width: 900px) { #prod, #tech { padding-left: 12px; padding-right: 12px; } }
#sel { position: fixed; left: 230px; bottom: calc(var(--dock-h, 0px) + 8px); padding: 4px 8px; background: rgba(13,17,19,.75); border: 1px solid #26323a; border-radius: 3px; font-size: 11px; }
#sel:empty { display: none; }
/* Build stamp, bottom-right, just above the dock. */
#corner-tools { position: fixed; right: 8px; bottom: calc(var(--dock-h, 0px) + 4px); z-index: 6; display: flex; align-items: center; gap: 8px; }
#version { color: #5a6b74; font: inherit; font-size: 10px; letter-spacing: .04em; font-variant-numeric: tabular-nums; background: none; border: 0; padding: 2px 3px; cursor: pointer; }
#version:hover { color: #a8b6be; text-decoration: underline; }
#feedback-btn { font: inherit; font-size: 11px; color: #a8b6be; background: #161c20; border: 1px solid #2b3a44; border-radius: 3px; padding: 3px 10px; cursor: pointer; letter-spacing: .03em; }
#feedback-btn:hover { border-color: #5c9eff; color: #d5dde2; }
/* Feedback modal */
#feedback-modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(9, 12, 14, .72); padding: 24px; }
.panel.fb { background: #12181c; border: 1px solid #26323a; border-radius: 5px; padding: 16px 20px; width: 480px; max-width: 100%; max-height: 86vh; overflow: auto; }
.panel.fb h2 { margin: 0 0 12px; font: 700 20px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #d5dde2; }
.panel.fb label { display: block; margin: 10px 0 4px; color: #a8b6be; font-size: 12px; }
.panel.fb label.check { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #cdd8de; }
.panel.fb input[type=text], .panel.fb input:not([type]), .panel.fb textarea { width: 100%; box-sizing: border-box; background: #0d1113; border: 1px solid #2b3a44; border-radius: 3px; color: #e8eef2; font: inherit; font-size: 13px; padding: 6px 8px; margin-top: 3px; }
.panel.fb textarea { resize: vertical; }
.fb-kinds { display: flex; gap: 6px; }
.fb-kind { flex: 1; font: inherit; font-size: 12px; padding: 6px; background: #0d1113; color: #a8b6be; border: 1px solid #2b3a44; border-radius: 3px; cursor: pointer; }
.fb-kind.on { background: #5c9eff; color: #0d1113; border-color: #5c9eff; font-weight: 600; }
#fb-matches { margin: 8px 0 2px; }
.fb-hint { color: #f2c14e; font-size: 11px; margin: 6px 0 4px; }
.fb-issue { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid #1c252b; }
.fb-issue a { color: #cdd8de; text-decoration: none; font-size: 12px; flex: 1; line-height: 1.3; }
.fb-issue a:hover { color: #5c9eff; }
.fb-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: 3px; margin-right: 6px; background: #26323a; color: #a8b6be; }
.fb-tag.bug { background: #4a1f1a; color: #ff9a86; } .fb-tag.feature { background: #1f3a2c; color: #7fd48f; }
.fb-up { font: inherit; font-size: 11px; background: #161c20; color: #a8b6be; border: 1px solid #2b3a44; border-radius: 3px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.fb-up:hover { border-color: #5c9eff; } .fb-up.done { background: #1f3a2c; color: #7fd48f; border-color: #2f5a44; cursor: default; }
.fb-msg { color: #ff9a86; font-size: 12px; min-height: 14px; margin-top: 6px; }
.panel.fb .actions { margin-top: 14px; display: flex; gap: 8px; }
.panel.fb .actions button { font: inherit; padding: 7px 16px; background: #5c9eff; color: #0d1113; border: 0; border-radius: 3px; cursor: pointer; font-weight: 600; }
.panel.fb .actions button:disabled { opacity: .45; cursor: default; }
.panel.fb .actions button.quiet { background: #26323a; color: #cdd8de; font-weight: 400; }
/* Release-notes panel opened from the version stamp. */
#notes { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(9, 12, 14, .72); padding: 24px; }
#notes .panel { background: #12181c; border: 1px solid #26323a; border-radius: 5px; padding: 16px 20px; width: 560px; max-width: 100%; max-height: 82vh; overflow: auto; }
#notes h2 { margin: 0 0 10px; font: 700 20px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #d5dde2; display: flex; align-items: baseline; gap: 10px; }
#notes h2 small { color: #5a6b74; font-size: 11px; letter-spacing: .04em; text-transform: none; }
#notes section { margin: 0 0 14px; }
#notes h3 { margin: 0 0 6px; font-size: 12px; color: #5c9eff; text-transform: uppercase; letter-spacing: .06em; }
#notes ul { margin: 0; padding-left: 18px; }
#notes li { color: #cdd8de; line-height: 1.5; margin: 3px 0; font-size: 12px; }
#notes .actions { margin-top: 6px; }
#notes button { font: inherit; padding: 8px 18px; background: #5c9eff; color: #0d1113; border: 0; border-radius: 3px; cursor: pointer; font-weight: 600; }
/* Under-attack banner, top centre, colour-coded and pulsing. */
#alarm { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 7; padding: 7px 20px; border-radius: 4px; font: 700 16px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .08em; text-transform: uppercase; background: rgba(13,17,19,.9); border: 1px solid #2b3a44; pointer-events: none; animation: alarmpulse 1s ease-in-out infinite; }
#alarm.unit { color: #a8b6be; border-color: #3a4a54; }
#alarm.outpost { color: #f2c14e; border-color: #f2c14e; }
#alarm.main { color: #ff7359; border-color: #ff7359; }
@keyframes alarmpulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
/* Pre-match countdown: a big centred number that pulses once per second. */
#countdown { position: fixed; top: 42%; left: 50%; transform: translate(-50%, -50%); z-index: 9; font: 700 120px/1 "Barlow Condensed", "Arial Narrow", sans-serif; color: #eaf2f6; text-shadow: 0 2px 18px rgba(0,0,0,.8); pointer-events: none; animation: cdpop .9s ease-out; }
@keyframes cdpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 30% { opacity: 1; } 100% { opacity: .85; transform: translate(-50%, -50%) scale(1); } }
#sel .hint { color: #7f929c; margin-left: 8px; }
/* The control-group readout in the selection bar: a labelled row of chips. */
#sel .selinfo { margin-right: 8px; }
#sel .groups { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
#sel .groups .lbl { color: #7f929c; text-transform: uppercase; letter-spacing: .06em; font-size: 9px; margin-right: 2px; }
#sel .grp { font: inherit; font-size: 11px; padding: 1px 6px; background: #161c20; color: #a8b6be; border: 1px solid #2b3a44; border-radius: 3px; cursor: pointer; line-height: 1.4; }
#sel .grp:hover { color: #5c9eff; border-color: #5c9eff; }
#sel .grp i { color: #7f929c; font-style: normal; margin-left: 4px; }
/* The dock prompt when nothing is selected. */
.dock-hint { color: #7f929c; font-size: 12px; padding: 14px 12px; text-align: center; }
.dock-hint b { color: #a8b6be; }
/* The spectator dock: one column of live figures per player. */
.spectate-dock { display: flex; gap: 10px; padding: 8px 12px; justify-content: center; flex-wrap: wrap; width: 100%; box-sizing: border-box; }
.spectate-dock .pcol { flex: 1 1 220px; max-width: 340px; min-width: 200px; border: 1px solid #2b3a44; border-radius: 4px; padding: 8px 10px; background: #0f1417; }
.spectate-dock .pcol.dead { opacity: .5; }
.spectate-dock .ph { font: 700 14px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5c9eff; margin-bottom: 6px; }
.spectate-dock .ph .out { color: #ff7359; font-size: 10px; margin-left: 6px; }
.spectate-dock .pr { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.spectate-dock .pr .stat { display: flex; flex-direction: column; line-height: 1.15; }
.spectate-dock .pr .stat b { font-size: 15px; color: #e8eef2; font-variant-numeric: tabular-nums; }
.spectate-dock .pr .stat i { font-size: 9px; color: #7f929c; text-transform: uppercase; letter-spacing: .05em; font-style: normal; }
.spectate-dock .pr .stat em { font-size: 10px; color: #7fd48f; font-style: normal; }
.spectate-dock .pu { display: flex; gap: 4px 8px; flex-wrap: wrap; }
.spectate-dock .uc { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #a8b6be; }
.spectate-dock .uc b { color: #e8eef2; font-variant-numeric: tabular-nums; }
.spectate-dock .none { color: #7f929c; font-size: 11px; }
/* Spectator fog toggles above the columns. */
.spec-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 6px 12px 0; }
.spec-controls .lbl { color: #7f929c; text-transform: uppercase; letter-spacing: .06em; font-size: 9px; }
.fogtog { font: inherit; font-size: 11px; padding: 3px 9px; background: #161c20; color: #a8b6be; border: 1px solid #2b3a44; border-radius: 3px; cursor: pointer; }
.fogtog:hover { border-color: #5c9eff; }
.fogtog.on { background: #5c9eff; color: #0d1113; border-color: #5c9eff; font-weight: 600; }
/* The player-colour dot on the spectator watch/fog chips. */
.fogtog .pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
/* Main menu: shown over the (idle) map until a match starts. */
#menu[hidden], #hud-root [hidden] { display: none !important; }
#menu { position: fixed; top: 44px; left: 0; right: 0; bottom: 0; display: flex; gap: 24px; padding: 44px 28px 22px; overflow: auto; background: rgba(13,17,19,.86); font-size: 12px; }
#menu .col { display: flex; flex-direction: column; gap: 10px; min-width: 300px; max-width: 380px; }
#menu .col.deck { flex: 1; max-width: none; }
#menu h2 { margin: 8px 0 0; font: 700 18px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #a8b6be; display: flex; align-items: baseline; gap: 10px; }
#menu h2 span { color: #5c9eff; font-size: 14px; }
#menu .row { display: flex; gap: 8px; flex-wrap: wrap; }
#menu .big { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #161c20; border: 1px solid #2b3a44; border-radius: 3px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#menu .big b { font: 700 20px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #5c9eff; }
#menu .big small { color: #7f929c; font-size: 11px; }
#menu .big:hover, #menu .card:hover { border-color: #5c9eff; }
#menu form { display: flex; flex-direction: column; gap: 6px; }
#menu label { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
#menu input { font: inherit; background: #0d1113; color: #d5dde2; border: 1px solid #26323a; padding: 4px 6px; }
#menu button[type=submit] { font: inherit; padding: 6px; background: #5c9eff; border: 0; border-radius: 3px; color: #0d1113; font-weight: 600; cursor: pointer; }
#menu button[type=submit]:disabled { background: #2b3a44; color: #7f929c; cursor: default; }
#menu .note, #lobby .col.deck .note { color: #7f929c; line-height: 1.45; font-size: 11px; }
#menu .keys { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
#menu .keys b { color: #d5dde2; font-weight: 600; }
#menu .link, #lobby .link { font: inherit; font-size: 11px; background: none; border: 0; color: #5c9eff; cursor: pointer; text-transform: none; letter-spacing: 0; padding: 0; }
#menu .slots, #lobby .slots { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 6px; }
#menu .slots .card, #lobby .slots .card { width: auto; }
#menu .slots .card.empty, #lobby .slots .card.empty { opacity: .5; cursor: default; border-style: dashed; }
#menu .roster, #lobby .roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
#menu .roster .card, #lobby .roster .card { width: auto; }
/* Deck-builder cards blend with the page: no contrasting fill, just the
   outline, in the menu and the room alike (the in-match dock keeps its fill). */
#menu .slots .card, #lobby .slots .card, #menu .roster .card, #lobby .roster .card { background: transparent; }
#menu .roster .card.off, #lobby .roster .card.off { opacity: .35; }
#menu .roster .t, #menu .slots .t, #lobby .roster .t, #lobby .slots .t { text-transform: none; letter-spacing: 0; color: #a8b6be; }
#menu .tier-h, #lobby .tier-h { grid-column: 1 / -1; margin-top: 6px; font-size: 10px; color: #7f929c; letter-spacing: .08em; text-transform: uppercase; }
/* Drag a deck slot onto another to swap their hotkeys. */
.card.slot[draggable="true"] { cursor: grab; }
.card.slot.dragging { opacity: .4; }
.card.slot.dropto { border-color: #5c9eff; box-shadow: inset 0 0 0 1px #5c9eff; }
#banner button.quiet { background: transparent; color: #a8b6be; border: 1px solid #2b3a44; }
/* The lobby: seats and the corner chair, the host's options, the deck. */
#lobby { position: fixed; top: 44px; left: 0; right: 0; bottom: 0; display: flex; gap: 24px; padding: 24px 28px; overflow: auto; background: rgba(13,17,19,.9); font-size: 12px; }
#lobby .col { display: flex; flex-direction: column; gap: 10px; min-width: 300px; max-width: 420px; }
#lobby .col.deck { flex: 1; max-width: none; }
#lobby h2 { margin: 8px 0 0; font: 700 18px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #a8b6be; display: flex; align-items: baseline; gap: 10px; }
#lobby h2 span { color: #5c9eff; font-size: 14px; }
#lobby h2 small { color: #7f929c; font-size: 11px; text-transform: none; letter-spacing: 0; }
#lobby h3 { margin: 0 0 4px; font: 700 14px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #a8b6be; }
#lobby h3 small { color: #7f929c; font-size: 11px; text-transform: none; letter-spacing: 0; margin-left: 8px; }
#lobby .seat { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 4px 10px; align-items: center; padding: 8px 10px; background: #161c20; border: 1px solid #2b3a44; border-radius: 3px; }
#lobby .seat.ready { border-color: #3f7f52; }
/* Co-op team sections: two labelled boxes so you can see who is teamed. */
#lobby .teams { display: flex; flex-direction: column; gap: 12px; }
#lobby .team-group { flex: 1; min-width: 0; border: 1px solid #2b3a44; border-radius: 4px; padding: 8px; }
#lobby .team-group h4 { margin: 0 0 6px; font: 700 12px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #f2c14e; }
#lobby .seat b { color: #5c9eff; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
#lobby .seat i.host { font-style: normal; color: #f2c14e; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
#lobby .seat .who { font-weight: 600; }
#lobby .seat .who.aiw { color: #f2c14e; }
#lobby .seat .rdy { color: #7f929c; font-size: 11px; }
#lobby .seat.ready .rdy { color: #7fd48f; }
#lobby .seat .deckline { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; color: #a8b6be; font-size: 11px; }
#lobby .seat select, #lobby .opts select { background: #0d1113; color: inherit; border: 1px solid #2b3a44; border-radius: 3px; padding: 3px 6px; font: inherit; min-width: 0; max-width: 100%; }
#lobby .corner { padding: 8px 10px; background: #10161a; border: 1px dashed #2b3a44; border-radius: 3px; color: #a8b6be; }
#lobby .corner span { margin-right: 12px; font-weight: 600; }
#lobby .corner em, #lobby .seat em { color: #7f929c; font-style: normal; }
#lobby .opts { display: flex; flex-direction: column; gap: 8px; }
#lobby .opts label { display: flex; align-items: center; gap: 10px; color: #a8b6be; }
#lobby .opts input[type=range] { flex: 1; accent-color: #5c9eff; }
#lobby .opts b { min-width: 42px; text-align: right; color: #e8eef2; font-variant-numeric: tabular-nums; }
#lobby .actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
/* Action buttons only: not the deck-builder cards, which are also buttons.
   This rule used to catch .card too, colouring the card text dark so the
   unit name (the one card span with no explicit colour) vanished on the page. */
#lobby button:not(.card) { font: inherit; padding: 8px 18px; background: #5c9eff; color: #0d1113; border: 0; border-radius: 3px; cursor: pointer; font-weight: 600; }
#lobby button.quiet { background: transparent; color: #a8b6be; border: 1px solid #2b3a44; }
#lobby button.tiny { padding: 3px 10px; font-size: 11px; }
#lobby button:disabled { opacity: .4; cursor: default; }
#lobby .slots.locked, #menu .slots.locked { pointer-events: none; opacity: .7; }
@media (max-width: 760px) { #lobby { flex-direction: column; padding: 12px; } #lobby .col { max-width: none; min-width: 0; } #lobby .slots { grid-template-columns: repeat(2, 1fr); } #lobby .seat { grid-template-columns: auto 1fr auto; } #lobby .teams { flex-direction: column; } }

/* Touch: the lasso trace and the radial menu at the finger. */
#lasso { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 4; }
#lasso polyline { fill: rgba(92,158,255,.12); stroke: #5c9eff; stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
#radial { position: fixed; width: 0; height: 0; z-index: 5; }
#radial i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #5c9eff; box-shadow: 0 0 0 2px #0d1113; }
#radial button { position: absolute; transform: translate(-50%, -50%); min-width: 60px; padding: 10px 8px; font: 600 12px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; background: #161c20; color: #d5dde2; border: 1px solid #5c9eff; border-radius: 22px; cursor: pointer; }
#radial button:active { background: #5c9eff; color: #0d1113; }
#spectate { position: fixed; top: 52px; right: 10px; padding: 6px 10px; background: rgba(13,17,19,.85); border: 1px solid #26323a; border-radius: 3px; font-size: 12px; color: #a8b6be; z-index: 2; display: flex; gap: 10px; align-items: center; }
#spectate b { color: #ff7359; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
#spectate button { font: inherit; padding: 3px 10px; background: #5c9eff; color: #0d1113; border: 0; border-radius: 3px; cursor: pointer; font-weight: 600; }
#banner { max-height: 92vh; max-width: 92vw; overflow: auto; }
#banner table.stats { border-collapse: collapse; margin: 4px auto 12px; font-size: 12px; text-align: right; }
#banner table.stats th, #banner table.stats td { padding: 2px 10px; border-bottom: 1px solid #26323a; white-space: nowrap; }
#banner table.stats th { color: #a8b6be; font-weight: 600; }
#banner table.stats td:first-child, #banner table.stats th:first-child { text-align: left; color: #7f929c; }
#banner table.stats i { color: #7f929c; font-style: normal; font-size: 11px; }
#banner p.stats-h { margin: 10px 0 2px; color: #7f929c; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
#banner .deckline { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: #d5dde2; margin: 4px 0 10px; }
#banner .tabs { display: flex; gap: 4px; justify-content: center; margin: 8px 0 10px; }
#banner .tabs button { background: transparent; color: #a8b6be; border: 1px solid #2b3a44; padding: 5px 14px; font-weight: 600; }
#banner .tabs button.on { background: #5c9eff; color: #0d1113; border-color: #5c9eff; }
#banner .tab-body { min-height: 120px; margin-bottom: 12px; }
#banner .legend { display: flex; gap: 14px; justify-content: center; font-size: 12px; color: #a8b6be; margin-bottom: 4px; }
#banner .legend i, #banner .tip i, #banner i.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
#banner .chart { position: relative; margin: 6px auto 2px; width: 560px; max-width: 100%; text-align: left; }
#banner .chart-t { font-size: 12px; color: #a8b6be; margin: 6px 0 0 44px; }
#banner .chart svg { display: block; max-width: 100%; height: auto; }
#banner .chart .grid { stroke: #26323a; stroke-width: 1; }
#banner .chart .ax { fill: #7f929c; font-size: 10px; }
#banner .chart .end { fill: #a8b6be; font-size: 11px; }
#banner .chart .cross { stroke: #a8b6be; stroke-width: 1; stroke-dasharray: 3 3; }
#banner .chart g.hover[hidden] { display: none; } /* the hidden attribute does not hide SVG on its own */
#banner .chart .tip { position: absolute; top: 24px; background: rgba(13,17,19,.95); border: 1px solid #2b3a44; border-radius: 3px; padding: 4px 8px; font-size: 12px; color: #d5dde2; pointer-events: none; white-space: normal; max-width: 240px; }
#banner .chart .tip span { margin-left: 8px; }
@media (max-width: 760px) { #menu { flex-direction: column; } #menu .col { max-width: none; min-width: 0; } #menu .slots { grid-template-columns: repeat(2, 1fr); } }
/* Unit silhouette glyphs, same shapes as on the map. */
svg.g { display: inline-block; vertical-align: -2px; fill: #a9c8ff; stroke: none; }
svg.g.hollow { fill: none; stroke: #a9c8ff; stroke-width: 3; }
.card .n { display: inline-flex; align-items: center; gap: 4px; }
/* Phones and touch: the dock wraps to three cards a row at a third of the
   screen each, so it looks the same on every device and the map keeps the
   top half. The controls are still mouse-shaped (drag, right-click); touch
   input is a separate piece of work. */
@media (max-width: 720px), (pointer: coarse) {
  /* Three cards a row on any phone: the layout the S26 happened to get. */
  #prod, #tech { flex-wrap: wrap; justify-content: center; gap: 5px; padding: 5px 6px; }
  #tech { padding-bottom: 6px; }
  .card, .card.small { flex: 0 0 auto; width: calc((100vw - 12px - 10px) / 3); box-sizing: border-box; padding: 5px 6px; gap: 0 6px; }
  .card .k { font-size: 16px; }
  .card .n { font-size: 12px; }
  .card .c { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card .t { font-size: 9px; min-height: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #res { top: 48px; right: 6px; gap: 8px; padding: 4px 6px; }
  .stat { min-width: 40px; }
  .stat b { font-size: 13px; }
  .stat i { font-size: 9px; }
  #hud { display: none; }
  #sel { left: 8px; right: 8px; font-size: 10px; }
  #spectate { top: 48px; left: 6px; right: auto; }
  #banner { top: 50%; left: 3vw; right: 3vw; transform: translateY(-50%); padding: 14px 12px; max-height: 88vh; }
  #banner > div:first-child { font-size: 32px; }
  #banner .tabs { flex-wrap: wrap; }
  #banner .tabs button { padding: 4px 10px; font-size: 12px; }
  #banner table.stats th, #banner table.stats td { padding: 2px 6px; font-size: 11px; }
  #banner .chart { width: 100%; }
  #menu { padding: 14px 12px 16px; gap: 14px; }
  #menu .slots { grid-template-columns: repeat(2, 1fr); }
}

/* Top-right gear on the main screen, the in-game menu, and settings. */
#topright { position: fixed; top: 8px; right: 10px; z-index: 6; display: flex; gap: 8px; }
#topright button { width: 34px; height: 34px; font-size: 18px; line-height: 1; background: #161c20; color: #a8b6be; border: 1px solid #2b3a44; border-radius: 4px; cursor: pointer; }
#topright button:hover { color: #5c9eff; border-color: #5c9eff; }
#roster-btn { width: auto !important; height: 34px; padding: 0 12px; font-size: 12px !important; font-weight: 600; letter-spacing: .04em; }
#music-btn.muted { color: #5a6b74; text-decoration: line-through; }
/* Players / teams / colours modal. */
#teams-modal { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(9,12,14,.72); padding: 24px; }
#teams-modal .panel { background: #12181c; border: 1px solid #26323a; border-radius: 5px; padding: 16px 20px; width: 340px; max-width: 100%; max-height: 86vh; overflow: auto; }
#teams-modal h2 { margin: 0 0 12px; font: 700 20px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #d5dde2; }
#teams-modal .tgrp { margin-bottom: 12px; }
#teams-modal .tgrp h4 { margin: 0 0 6px; font: 700 12px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #f2c14e; }
#teams-modal .prow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #1b2429; }
#teams-modal .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; }
#teams-modal .pn { flex: 1; color: #d5dde2; } #teams-modal .pn i { color: #7f929c; font-style: normal; }
#teams-modal .ps { color: #7f929c; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
#teams-modal button { margin-top: 12px; font: inherit; padding: 6px 16px; background: transparent; color: #a8b6be; border: 1px solid #2b3a44; border-radius: 3px; cursor: pointer; }
/* Player-left toasts, stacked top-centre. */
#toasts { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toasts .toast { background: rgba(13,17,19,.92); border: 1px solid #2b3a44; border-radius: 4px; padding: 6px 14px; font-size: 13px; color: #d5dde2; opacity: 1; transition: opacity .5s; }
#toasts .toast.go { opacity: 0; }
/* Selection health bars in the selection strip. */
#sel .selunit { white-space: nowrap; }
#sel .hpbar { display: inline-block; width: 42px; height: 6px; background: #26323a; border-radius: 3px; vertical-align: middle; overflow: hidden; }
#sel .hpbar i { display: block; height: 100%; }
#sel .hpn { color: #7f929c; font-variant-numeric: tabular-nums; }
#gamemenu, #settings { position: fixed; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; background: rgba(6,9,11,.72); }
#settings { z-index: 8; }
#gamemenu .panel, #settings .panel { min-width: 300px; max-width: 92vw; padding: 20px 24px; background: #12181c; border: 1px solid #2b3a44; border-radius: 5px; }
#gamemenu h2, #settings h2 { margin: 0 0 14px; font: 700 24px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5c9eff; }
#gamemenu .actions.col { display: flex; flex-direction: column; gap: 8px; }
#gamemenu button, #settings button { font: inherit; padding: 10px 16px; background: #5c9eff; color: #0d1113; border: 0; border-radius: 3px; cursor: pointer; font-weight: 600; }
#gamemenu button.warn { background: #ff7359; }
#settings label { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: #a8b6be; }
#settings input[type=range] { flex: 1; accent-color: #5c9eff; }
#settings label b { min-width: 30px; text-align: right; color: #e8eef2; font-variant-numeric: tabular-nums; }
#settings .note { color: #7f929c; font-size: 11px; margin: 6px 0 12px; }
#settings .actions { text-align: right; }