/* Lick of Fire: styled to match unbeheld.net (dark charcoal, amber accent,
   cream text, thin-bordered panels with corner brackets, monospace labels). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url(fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url(fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2"); }

:root {
  --bg: #14161a;
  --panel: #1c1f24;
  --panel-2: #22262c;
  --panel-border: #30353d;
  --bracket: #d7dbe0;
  --text: #eef0f3;
  --body: #c9ced6;
  --muted: #9aa1ab;
  --dim: #5d646e;
  --accent: #f2a93b;
  --accent-dim: #b98a45;
  --accent-ink: #1a1408;
  --good: #94c47d;
  --blue: #86a8db;
  --bad: #ef6b5b;
  --radius: 4px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[hidden] { display: none !important; }
button { font-family: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#app:focus { outline: none; }

#app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

/* ---------- logo: "LickOfFire:~$" with a blinking block cursor ---------- */
.logo { font-family: var(--mono); font-weight: 700; color: var(--text); white-space: nowrap; letter-spacing: 0; }
.logo .cursor {
  display: inline-block; width: 0.55em; height: 0.95em; margin-left: 0.08em; vertical-align: -0.12em;
  background: var(--accent); animation: cursor-blink 1.1s steps(1) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }
/* (endless animations keep the browser producing a new screen 60 times a second: off on Low graphics, and on the start
   screen after a minute without input; the cursor then simply stays on, see main.js) */
.gfx-low .logo .cursor, .title-idle .logo .cursor { animation: none; }

/* [ LABEL ] style: small uppercase monospace in square brackets */
.label, .field-label, .hud-label, .ctl-label, .or, .settings label, .shared-note {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
}
.label { font-size: 12px; color: var(--accent); margin: 0; }
.label::before { content: "[ "; color: var(--dim); }
.label::after { content: " ]"; color: var(--dim); }
.field-label { font-size: 11px; color: var(--accent-dim); margin-bottom: 6px; display: block; }
.field-label::before { content: "[ "; color: var(--dim); }
.field-label::after { content: " ]"; color: var(--dim); }

/* panels with thin borders and small corner brackets */
.panel, .bracketed {
  position: relative; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
}
.panel::before, .panel::after, .bracketed::before {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
}
.panel::before, .bracketed::before { top: -1px; left: -1px; border-top: 2px solid var(--bracket); border-left: 2px solid var(--bracket); }
.panel::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--panel-border); border-right: 2px solid var(--panel-border); }

/* ---------- top bar ---------- */
#topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px; min-height: 54px;
  background: var(--bg);
  border-bottom: 1px solid var(--panel-border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.brand { font-size: 20px; }
.hud { display: flex; gap: 22px; margin: 0 auto; align-items: center; }
.hud-item { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.hud-label { font-size: 12px; color: var(--accent-dim); }
.hud-item > span:last-child { font-family: var(--mono); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.hud-turn > span:last-child { display: flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 15px; }
.hud .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }
.wind { display: flex; align-items: center; gap: 4px; }
/* the turn timer: bigger than the other values but with the same box height, so nothing in the top bar moves (the extra width hangs out of the box on both sides) */
.hud-item > #hud-timer { display: block; height: 18px; line-height: 18px; margin: 0 -14px; font-size: 22px; -webkit-text-stroke: 0.5px currentColor; }
#hud-timer.timer-warn { color: var(--accent); }
#hud-timer.timer-low { color: var(--bad); animation: timer-pulse 0.9s ease-in-out infinite alternate; }
@keyframes timer-pulse { from { opacity: 1; } to { opacity: 0.55; } }
.reduce-flash #hud-timer.timer-low { animation: none; }
.hud-item { position: relative; }
.grace-bar { position: absolute; left: -4px; right: -4px; bottom: -6px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.grace-bar[hidden] { display: none; }
.grace-bar > div { height: 100%; background: var(--accent); }
.top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hud:not([hidden]) + .top-actions { margin-left: 0; }
.icon-btn {
  min-width: 34px; height: 32px; border-radius: var(--radius); border: 1px solid var(--panel-border);
  background: var(--panel); color: var(--text); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
/* the top bar's icons: one set of simple line pictures, all the same size, stroke width and colour (the colour follows the button's) */
.ico { width: 18px; height: 18px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ico .slash, .ico .cross { display: none; }
.icon-btn.off .ico .slash, .icon-btn.off .ico .cross { display: inline; stroke: var(--accent); stroke-width: 2.2; }   /* off: a slash over the note, a cross by the speaker (and the sound waves go) */
#btn-sound.off .ico .waves { display: none; }
.chat-history-btn.unread { color: var(--accent); border-color: var(--accent); }
body.touch .ico { width: 20px; height: 20px; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.text-btn { width: auto; padding: 0 12px; font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

/* music settings: a small panel under the ♪ button */
.music-wrap { position: relative; }
.icon-btn.off { color: var(--muted); }
.music-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--body); }
/* the panels that open from the top bar (the ♪ mixer, the ⚙ settings) and the music overlay: solid, with a shadow, never cut off */
.top-pop.panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 300px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.5); }
.top-pop.panel[hidden] { display: none; }
.top-pop.panel::before { content: none; }
.top-pop .hint { margin: 0; font-size: 12px; line-height: 1.35; }
.pop-title { margin: 0 0 2px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.pop-foot { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--panel-border); }
.mix-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px; align-items: center; gap: 10px; margin-top: 4px; }
.mix-label { font-size: 13px; font-weight: 600; color: var(--text); }
.mix-row input[type=range] { width: 100%; min-width: 0; margin: 0; }
.mix-val { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--body); font-variant-numeric: tabular-nums; }
.mix-checks { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--body); }
.mix-checks label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.mix-checks input { margin: 0; width: 14px; height: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--body); margin-top: 4px; }
.set-row select { min-width: 110px; }

/* ---------- main area ---------- */
#stage { flex: 1; min-height: 0; display: flex; justify-content: center; gap: 12px; padding: 12px; }
#field-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
#field {
  position: relative; aspect-ratio: var(--field-aw, 1.7778); width: 100%; max-height: 100%;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--panel-border);
  background: #000;
}
/* keep the shape of the map (16:9; a wider map in a 5 or 6 player game sets --field-aw) when height is the limiting side */
@supports (aspect-ratio: 16 / 9) {
  #field { width: auto; height: auto; max-width: 100%; max-height: 100%; }
  #field-wrap { container-type: size; }
  #field { width: min(100cqw, calc(100cqh * var(--field-aw, 1.7778))); }
}
#ambient { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* The flash of a lightning bolt: short and soft (the brightness is set per bolt, and it can be turned off) */
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #dbe7ff; }
#flash.on { animation: lightning-flash 220ms ease-out; }
@keyframes lightning-flash { 0% { opacity: 0; } 14% { opacity: var(--fa, 0.15); } 100% { opacity: 0; } }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
/* Start screen and lobby: use all the space (the battlefield is only a backdrop then). */
body:not(.in-game) #field-wrap { container-type: normal; }
body:not(.in-game) #field { width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; }
body:not(.in-game) #canvas, body:not(.in-game) #ambient { object-fit: cover; }
body:not(.in-game) #canvas { cursor: default; }

/* ---------- player cards: see "Player windows" near the end of this file ---------- */
.hpbar { height: 5px; border-radius: 1px; background: rgba(255,255,255,0.08); margin-top: 6px; overflow: hidden; }
.hpbar > div { height: 100%; border-radius: 1px; background: var(--good); transition: width 0.3s, background-color 0.3s; }
.hpbar.hp-mid > div { background: var(--accent); }
.hpbar.hp-low > div { background: var(--bad); }

/* ---------- controls ---------- */
#controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  padding: 10px 16px 12px; border-top: 1px solid var(--panel-border); background: var(--bg);
}
#controls.disabled .ctl-group, #controls.disabled .item-btn, #controls.disabled .sd-btn, #controls.disabled .fire-btn { opacity: 0.4; pointer-events: none; }
#controls.disabled.can-drive .drive-group { opacity: 1; pointer-events: auto; }
.ctl-group { display: flex; align-items: center; gap: 6px; }
.ctl-label { font-size: 12px; color: var(--accent-dim); width: 50px; text-align: right; }
.ctl-value { min-width: 46px; font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.ctl-btn {
  width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--panel-border);
  background: var(--panel); color: var(--text); font-size: 15px; cursor: pointer; user-select: none;
  touch-action: manipulation;
}
.ctl-btn:hover { border-color: var(--accent); color: var(--accent); }
.ctl-btn:active { transform: translateY(1px); }
input[type=range] { width: 120px; accent-color: var(--accent); }
.weapon-box {
  min-width: 150px; padding: 6px 12px; border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--panel-border); display: flex; justify-content: space-between; gap: 10px; font-weight: 600;
}
#weapon-count, #repair-count { color: var(--accent); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.item-chip { color: var(--muted); font-size: 14px; font-family: var(--mono); }
.fuel { display: flex; align-items: center; gap: 6px; min-width: 92px; }
.fuel-bar { flex: 1; height: 6px; border-radius: 1px; background: rgba(255,255,255,0.08); overflow: hidden; }
#fuel-fill { height: 100%; width: 100%; border-radius: 1px; background: var(--accent); transition: width 0.1s linear; }
#fuel-value { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; font-size: 12px; }
.fire-btn { touch-action: none; user-select: none; -webkit-user-select: none; }
.fire-btn.charging { filter: brightness(1.15); transform: scale(1.04); box-shadow: 0 0 22px rgba(242, 169, 59, 0.6); }
.fire-btn {
  padding: 10px 30px !important; font-family: var(--mono) !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: 0.18em;
  background: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--accent-ink) !important;
}
.fire-btn:hover { filter: brightness(1.08); }

/* ---------- buttons & inputs ---------- */
.btn {
  padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--panel-border);
  background: transparent; color: var(--text); font-family: var(--mono); font-size: 13px; font-weight: 700; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:disabled:hover { border-color: var(--panel-border); color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn.primary:disabled:hover { color: var(--accent-ink); }
.btn.small { padding: 6px 10px; font-size: 11px; }
.btn.wide { width: 100%; }
input:not([type=range]), select {
  font-family: inherit; font-size: 15px; padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid var(--panel-border); background: var(--bg); color: var(--text); outline: none;
}
input::placeholder { color: var(--dim); }
input:focus, select:focus { border-color: var(--accent); }
select { font-family: var(--mono); }
select option { background: var(--panel); }

/* ---------- overlays ---------- */
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  align-items: safe center; justify-content: safe center; /* never cut off the top when it doesn't fit */
  background: rgba(14, 15, 18, 0.55); backdrop-filter: blur(3px); padding: 16px; overflow-y: auto;
}
.panel {
  padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); max-width: 100%; max-height: 100%; overflow-y: auto;
}
.panel h2 { margin: 0 0 14px; font-size: 21px; font-weight: 600; }
.panel h2.label { font-size: 12px; margin-bottom: 10px; }
.hint { color: var(--muted); font-size: 13px; }
.center { text-align: center; }

/* (the demo match shows behind the start screen: dimmed, with no blur so it costs less to draw) */
#screen-menu { background: rgba(10, 12, 16, 0.5); backdrop-filter: none; }
/* Solid panels, no blur: a blur behind the panels cost about 25-30 points of one core on computers with no graphics card
   (see DECISIONS.md), so the panels are simply more opaque (93 %) and the match only shows through faintly, with no readable text. */
#screen-menu .panel, #screen-menu .whatsnew { background: rgba(24, 26, 31, 0.93); }
/* start screen: ONE centred column, top to bottom: the title, the play card, the open games, then the What's new bar (the 'games
   running' line is in that bar). The picture of the battlefield stays visible on both sides of it. */
#screen-menu { padding: 12px 16px; }
.menu-grid {
  --menu-row-gap: 12px;
  width: min(640px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: var(--menu-row-gap);
}   /* (never taller than the screen: when there are many open games their list gives way and scrolls) */
.menu-hero { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hero-cat { width: clamp(84px, 14vh, 120px); flex: none; }
/* The cat sits on the top edge of the play panel (the panel is directly under the header, one gap away). Only a transform
   moves him, so no other box on the page changes position or size; align-self keeps his feet on the header's bottom edge, and
   the 0.77 % is the empty strip at the bottom of the pictures (2 of 260 pixels). */
#cat-title { align-self: flex-end; translate: 0 calc(var(--menu-row-gap) + 0.77%); }
.hero-text { min-width: 0; flex: 1; }
.title { margin: 0; font-size: clamp(22px, min(6.2vw, 5.4vh), 40px); line-height: 1.05; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); }
.tagline { color: var(--text); margin: 6px 0 0; font-size: clamp(13px, 2vh, 16px); line-height: 1.4; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
/* The title is a real command line: "LickOfFire:~$ ./play" typed once on the first load, and the tagline is its output.
   The gap before the typed text is padding (so the empty line reads "LickOfFire:~$ ▌"); the cursor stands still while it types. */
.logo .typed { padding-left: 0.6em; }
.logo.typing .cursor { animation: none; }
/* The small name in the top bar belongs to the game and lobby screens: the start screen has the big title instead. */
body.on-menu #topbar .brand { display: none; }
body.on-menu #topbar .top-actions { margin-left: auto; }
.play-panel { flex: none; }
.play-panel, .hero-cat, .menu-hero, .menu-foot { flex-shrink: 0; }
.games-panel { flex: 0 1 auto; min-height: 150px; overflow: hidden; display: flex; flex-direction: column; }
/* no open games: one line, the label and the words side by side */
.games-panel:has(.game-list > .hint) { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: 12px; }
.games-panel:has(.game-list > .hint) h2.label { margin: 0; flex: none; }
.games-panel:has(.game-list > .hint) .game-list { overflow: visible; min-width: 0; }
/* some open games: a list that scrolls inside the card when there is not room for all of them */
.games-panel .game-list { flex: 1 1 auto; min-height: 0; }
.menu-foot { display: flex; min-width: 0; }
.play-panel input { width: 100%; }
.field-hint { margin: 4px 0 0; font-size: 11px; line-height: 1.3; color: var(--muted); }
.menu-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.menu-actions .btn { padding: 12px; font-size: 14px; }
.quick-row { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.quick-row .btn.quick { margin-top: 0; flex: 1; width: auto; }
.quick-level-box { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 84px; }
.ql-cap { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dim); }
.quick-level { width: 100%; min-width: 84px; flex: 1; }
.btn.quick { width: 100%; margin-top: 12px; padding: 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.quick-title { font-size: clamp(18px, 3.4vh, 24px); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.quick-sub { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; opacity: 0.8; }
.or { text-align: center; color: var(--dim); font-size: 11px; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.4em; font-family: var(--mono); font-weight: 700; text-align: center; }
.create-row { display: flex; gap: 8px; align-items: stretch; }
.create-row .btn { flex: 1; min-width: 0; }
/* Public / Private: two small toggle buttons side by side (the one that is on is amber) */
.vis-toggle { display: flex; flex: none; border: 1px solid var(--panel-border); border-radius: var(--radius); overflow: hidden; }
.vis-btn { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 12px; cursor: pointer; background: transparent; border: 0; color: var(--muted); }
.vis-btn + .vis-btn { border-left: 1px solid var(--panel-border); }
.vis-btn:hover { color: var(--text); }
.vis-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.vis-hint { margin: 0; text-align: center; overflow-wrap: anywhere; }
.name-error { color: #ff8a80; font-weight: 600; margin: 0; }
.name-error[hidden] { display: none; }
#rename-error { margin-bottom: 8px; }
/* open games on the start screen */
.game-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.game-list .hint { margin: 0; }
.game-list button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; text-align: left; cursor: pointer;
  border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--panel-border); border-left: 3px solid var(--accent); color: var(--text); font: inherit;
}
.game-list button:hover, .game-list button:focus-visible { border-color: var(--accent); background: rgba(242, 169, 59, 0.1); }
.game-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.game-name { font-weight: 700; font-size: 15px; overflow: hidden; white-space: nowrap; }
.game-host { font-size: 12px; color: var(--dim); overflow: hidden; white-space: nowrap; }
.game-players { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: rgba(255, 255, 255, 0.09); color: var(--body); max-width: 110px; overflow: hidden; white-space: nowrap; }
.chip.free { background: none; border: 1px dashed var(--dim); color: var(--dim); }
.game-join { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.game-join .seats { color: var(--accent); font-size: 12px; white-space: nowrap; font-weight: 600; }
.game-join .join-go { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); }
.games-panel h2 .count { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; text-align: center; }
/* The What's new bar: the label and the 'games running' line on top, the news under them, the links at the bottom */
.whatsnew { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 14px; border-radius: var(--radius); background: rgba(24, 26, 31, 0.8); border: 1px solid var(--panel-border); }
.wn-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.wn-label { flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.wn-list { list-style: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; column-gap: 0; }
.wn-list li { flex: 0 1 auto; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--text); }
.wn-list li + li { position: relative; padding-left: 22px; }
.wn-list li + li::before { content: "·"; position: absolute; left: 8px; top: 0; font-weight: 800; color: var(--accent-dim); }
.wn-list li b { color: var(--accent-dim); font-family: var(--mono); margin-right: 5px; }
.wn-title { display: block; }
.wn-right { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.wn-right .foot-link { margin-left: auto; }
.wn-all, .foot-link { flex: none; font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.wn-all:hover, .foot-link:hover { text-decoration: underline; }
.version-tag { font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: 0.04em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); white-space: nowrap; }
.version-tag:empty { display: none; }
/* "3 games running · 7 players online" (in the What's new bar, top right) */
.menu-stats { margin: 0 0 0 auto; text-align: right; font-size: 11px; line-height: 1.3; color: var(--muted); letter-spacing: 0.04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Short windows (a laptop with browser bars, 700 px tall): tighter spacing so nothing needs scrolling */
@media (max-height: 800px) {
  #screen-menu { padding: 8px 14px; }
  .menu-grid { --menu-row-gap: 8px; }
  .play-panel, .games-panel { padding: 12px 18px; }
  .menu-actions { margin-top: 8px; gap: 7px; }
  .menu-actions .btn { padding: 8px; }
  .btn.quick { margin-top: 8px; padding: 7px 12px; }
  .hero-cat { width: 80px; }
  .tagline { margin-top: 2px; }
  .whatsnew { padding: 6px 12px; gap: 2px; }
  .vis-hint:not(.is-private) { display: none; }
}
/* Narrow windows and phones: the same column, the page scrolls if it must */
@media (max-width: 640px) {
  .menu-grid { max-height: none; }
  .games-panel { overflow: visible; min-height: 0; }
  .games-panel .game-list { max-height: 60vh; }
  /* the command line has the whole width; the cat and the tagline share the line under it */
  .menu-hero { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 10px; align-items: end; }
  .hero-text { display: contents; }
  .title { grid-column: 1 / -1; grid-row: 1; font-size: clamp(18px, 5.6vw, 34px); }
  .hero-cat { width: 64px; grid-column: 1; grid-row: 2; }
  .tagline { grid-column: 2; grid-row: 2; font-size: 13px; align-self: center; margin: 0; }
  .games-panel:has(.game-list > .hint) { flex-direction: column; align-items: stretch; gap: 6px; }
  .wn-list { flex-direction: column; }
  .wn-list li + li { padding-left: 0; }
  .wn-list li + li::before { display: none; }
}

/* lobby */
.lobby-panel { width: min(1010px, 100%); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 0 22px; }
.lobby-col { min-width: 0; display: flex; flex-direction: column; }
.lobby-panel .settings { margin-top: 0; }
.lobby-panel .settings label { flex: 1 1 40%; min-width: 0; }
.game-title { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 8px; }
.game-title-text { margin: 0; min-width: 0; flex: 1; font-size: 20px; overflow: hidden; white-space: nowrap; }
.game-title .btn { flex: none; }
.game-title-edit { display: flex; gap: 6px; margin-bottom: 8px; }
.game-title-edit[hidden] { display: none; }
.game-title-edit input { flex: 1; min-width: 0; }
.lobby-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.room-code { font-family: var(--mono); font-size: 42px; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); line-height: 1; }
.invite-link { width: 100%; margin-top: 10px; font-family: var(--mono) !important; font-size: 12px !important; color: var(--accent) !important; }
.settings { display: flex; gap: 10px; margin: 16px 0; flex-wrap: wrap; }
.settings label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: var(--accent-dim); flex: 1; }
.settings select { font-size: 13px; }

/* shop: fills the whole area beside the player cards; the cards are compact so it all fits without scrolling */
#screen-shop { padding: 8px; }
.shop-panel { width: min(1400px, 100%); height: auto; display: flex; flex-direction: column; padding: 12px 14px; }
.shop-panel h2 { margin: 0; font-size: 18px; }
.shop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.money { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; }
.shop-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 6px; align-content: start; }
.shop-item {
  display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--panel-border); min-width: 0;
}
.shop-item:hover { border-color: #444a54; }
.shop-item .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.shop-item .nm { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.shop-item .nm-text { overflow: hidden; white-space: nowrap; }
.shop-item .icon { width: 22px; height: 22px; flex: none; }
.shop-item .desc {
  font-size: 11px; color: var(--muted); line-height: 1.3; cursor: help;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  height: calc(2 * 1.3em);
}
.shop-item .desc.open { display: block; height: auto; }
.shop-item .owned { font-size: 12px; color: var(--muted); white-space: nowrap; }
.shop-item .owned b { color: var(--text); font-family: var(--mono); }
.shop-item .price { color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: 11px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the last row sits at the bottom of every card, and Undo and Buy have a fixed width, so all the Buy buttons line up in one column */
.shop-item .row:last-child { margin-top: auto; }
.shop-item .buttons { display: grid; grid-template-columns: 52px 46px; gap: 4px; flex: none; }
.shop-item .btn.small { padding: 3px 0; font-size: 11px; min-height: 0; width: 100%; text-align: center; }
body.touch .shop-item .btn.small { min-height: 34px; }
.shop-foot { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.shop-status { flex: 1; color: var(--muted); font-size: 13px; }
.shop-timer { color: var(--muted); font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* scoreboard */
.score-panel { width: 580px; }
.score-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.score-table th { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-dim); text-align: right; padding: 6px 8px; font-weight: 700; }
.score-table th:first-child, .score-table td:first-child { text-align: left; }
.score-table td { padding: 9px 8px; border-top: 1px solid var(--panel-border); text-align: right; font-family: var(--mono); font-size: 13px; }
.score-table td:first-child { font-family: var(--font); font-size: 15px; }
.score-table .pl { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.score-table .swatch { width: 12px; height: 12px; border-radius: 2px; }
.score-table .earn { color: var(--good); }
.score-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; }
.podium { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.podium li {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--panel-border);
}
.podium li.first { border-color: color-mix(in srgb, var(--accent) 60%, transparent); border-top: 2px solid var(--accent); background: linear-gradient(90deg, rgba(242, 169, 59, 0.14), var(--panel-2)); }
.podium .rank { font-size: 22px; font-weight: 700; width: 34px; text-align: center; color: var(--muted); font-family: var(--mono); }
.podium .first .rank { color: var(--accent); }
.podium .who { flex: 1; font-weight: 600; display: flex; align-items: center; gap: 8px; font-size: 17px; min-width: 0; }
.podium .detail { color: var(--muted); font-size: 11px; font-family: var(--mono); }
.podium .pts { font-family: var(--mono); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.app-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(14, 15, 18, 0.72); }
.help-panel { width: min(1280px, 100%); line-height: 1.4; color: var(--body); font-size: 13px; display: flex; flex-direction: column; padding: 14px 20px; }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.help-head h2 { margin: 0; }
.help-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.help-tab {
  padding: 7px 12px; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel-2);
  color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
}
.help-tab:hover { color: var(--text); }
.help-tab[aria-selected="true"] { color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.help-page p { margin: 0 0 8px; }
.help-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 4px 28px; align-items: start; }
.help-intro { color: var(--text); }
.guide-group { margin: 14px 0 6px; font-size: 14px; color: var(--accent); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.guide-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel-2); }
.guide-item .icon { width: 28px; height: 28px; flex: none; margin-top: 2px; }
.guide-item p { margin: 2px 0 0; }
.help-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.help-panel h2, .help-panel b { color: var(--text); }
.help-sub { color: var(--dim, #9a948a); margin: 6px 0; }
.help-panel a { color: var(--accent); }
.help-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; margin: 8px 0 4px; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel-2); }
.help-bar i { width: 1px; align-self: stretch; background: var(--panel-border); margin: 0 4px; }
.hb { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--panel-border); border-radius: 4px; font-size: 12px; color: var(--text); }
.hb-danger { color: #8b857b; }
.hb-fire { background: var(--accent); color: #1b1a19; font-weight: 700; border-color: var(--accent); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 8px; }
.hs { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel-2); }
.hs-wide { grid-column: 1 / -1; }
.hs h3 { margin: 0 0 3px; font-size: 14px; color: var(--accent); }
.hs p { margin: 0 0 5px; }
.hs p:last-child { margin-bottom: 0; }
.hv { flex: none; width: 44px; display: flex; justify-content: center; padding-top: 2px; }
.hv-text { font-size: 28px; line-height: 1; }
.hv-card { width: 230px; flex-direction: column; gap: 6px; }
.hv-cat { width: auto; gap: 4px; }
.hi { display: inline-flex; }
.hi .icon { width: 20px; height: 20px; }
.hi.big .icon { width: 40px; height: 40px; }
.help-card { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--panel-border); border-left: 5px solid var(--rc); border-radius: 4px; background: var(--panel); font-size: 12px; }
.help-card img { border-radius: 4px; flex: none; }
.help-card .hc-body { flex: 1; min-width: 0; }
.help-card .hc-name { font-weight: 600; color: var(--text); }
.help-card .hc-stats { display: flex; justify-content: space-between; margin-top: 3px; }
.help-card.dead { opacity: 0.8; }
.help-card.dead img { filter: grayscale(1) brightness(0.45) contrast(1.15); }
.help-faces { display: flex; gap: 6px; margin-top: 4px; }
.help-faces img { border-radius: 4px; }
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.lv { padding: 6px; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel-2); }
.lv-pic { display: block; aspect-ratio: 80 / 44; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.lv-pic svg { width: 100%; height: 100%; display: block; }
.lv p { margin: 2px 0 0; }
.keys { border-collapse: collapse; margin: 6px 0; }
.keys td { padding: 3px 10px 3px 0; vertical-align: top; }
.keys td:first-child { white-space: nowrap; }
kbd {
  display: inline-block; min-width: 24px; padding: 1px 6px; border-radius: 3px; text-align: center;
  background: var(--panel-2); border: 1px solid var(--panel-border); border-bottom-width: 2px;
  font-family: var(--mono); font-size: 12px; color: var(--accent);
}

.toast {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(20, 22, 26, 0.95); border: 1px solid rgba(239, 107, 91, 0.6); color: #ffd9d3;
  padding: 10px 16px; border-radius: var(--radius); font-weight: 500; z-index: 20; max-width: 90%;
}
.toast.info { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); }
.conn-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 21;
  background: #2a2112; color: var(--accent); padding: 8px 14px; border-radius: var(--radius); font-family: var(--mono); font-size: 13px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ---------- local players, shields ---------- */
.add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.add-row input { flex: 1; min-width: 110px; font-size: 14px; padding: 6px 10px; }
.add-bot { display: inline-flex; gap: 6px; align-items: center; }
.add-bot select, .lobby-players select { font-size: 12px; padding: 4px 8px; }
.settings label { min-width: 120px; justify-content: flex-end; }

.shop-tabs { display: flex; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.shop-tab {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--panel-border); color: var(--text); font: inherit; font-weight: 600;
}
.shop-tab.active { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), 0 0 14px -4px var(--pc); }
.shop-tab .swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--pc); }
.shop-tab .tab-money { color: var(--good); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.shop-tab .tab-ready { color: var(--good); }

.turn-banner {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); z-index: 15; pointer-events: none;
  padding: 18px 34px; border-radius: var(--radius); text-align: center;
  background: rgba(20, 22, 26, 0.9); border: 1px solid var(--pc, #fff); border-top: 3px solid var(--pc, #fff);
  box-shadow: 0 0 40px -10px var(--pc, #fff), 0 20px 50px rgba(0,0,0,0.5);
  animation: banner-in 0.35s ease-out;
}
.turn-banner .tb-name { font-size: 34px; font-weight: 700; color: var(--pc, #fff); line-height: 1.1; }
.turn-banner .tb-sub { color: var(--muted); margin-top: 6px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, -40%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.ctl-player {
  display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--pc, var(--panel-border)); color: var(--pc, var(--text));
}
.shield-btns { display: flex; gap: 6px; }
.item-btn { text-transform: none; letter-spacing: 0.02em; }
.shield-btn { padding: 8px 10px !important; font-size: 12px !important; }
.shield-btn .sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; box-shadow: 0 0 6px currentColor; }


#screen-lobby { gap: 16px; flex-wrap: wrap; align-content: center; align-content: safe center; }

/* ---------- webcams ---------- */
/* The video box sits on top of the card's picture area; without video the
   initials underneath show through. */
.media-box { position: absolute; inset: 0; z-index: 1; }
.media-box .mb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; background: #0e0f12; }
.media-box.has-video .mb-video { opacity: 1; }
.mirror { transform: scaleX(-1); }
.media-box audio { display: none; }
.mb-controls {
  position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; align-items: center; gap: 4px;
  opacity: 0.85; transition: opacity 0.2s;
}
.pcard:hover .mb-controls, .mb-controls:focus-within { opacity: 1; }
.mb-btn {
  width: 26px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border-radius: 3px; border: 1px solid var(--panel-border); background: rgba(20, 22, 26, 0.85); color: var(--text); cursor: pointer;
}
.mb-btn:hover { border-color: var(--accent); color: var(--accent); }
.mb-btn.off, .muted-here [data-act="mute"], .hidden-here [data-act="hide"] { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 60%, transparent); }
.mb-btn svg { width: 15px; height: 15px; }
.mb-volume { flex: 1; min-width: 0; width: auto !important; height: 16px; accent-color: var(--accent); }
/* "this player has switched their microphone off": a clear red badge, top left */
.mb-muted {
  position: absolute; top: 5px; left: 5px; display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--bad); color: #fff; box-shadow: 0 0 0 2px rgba(20,22,26,0.8);
}
.mb-muted svg { width: 14px; height: 14px; }
.media-box.self-muted .mb-muted { display: inline-flex; }
.media-box[data-route="relay"]::after {
  content: "TURN"; position: absolute; top: 6px; left: 34px; font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: var(--muted); background: rgba(20,22,26,0.8); padding: 1px 4px; border-radius: 2px; opacity: 0.8;
}

/* the "Camera and microphone" window */
#screen-media { z-index: 30; }
.media-panel { width: 470px; }
.md-choices { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.md-choice {
  flex: 1 1 120px; padding: 9px 10px; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel-2);
  color: var(--text); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.md-choice:hover { border-color: #4a515c; }
.md-choice[aria-checked="true"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.md-preview { position: relative; aspect-ratio: 16 / 9; background: #0e0f12; border: 1px solid var(--panel-border); border-radius: var(--radius); overflow: hidden; }
.md-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-preview .md-nocam { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--dim); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.md-preview.no-video video { display: none; }
.md-preview.no-video .md-nocam { display: flex; }
.md-preview.loading::before { content: "…"; position: absolute; top: 8px; right: 10px; color: var(--accent); font-family: var(--mono); }
.md-meter { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 5px; background: rgba(255,255,255,0.12); border-radius: 1px; overflow: hidden; }
#md-level { height: 100%; width: 0; background: var(--good); transition: width 0.08s linear; }
.md-devices { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.md-devices label { flex: 1 1 180px; display: flex; flex-direction: column; gap: 0; margin: 0; }
.md-devices select { font-size: 12px; text-transform: none; letter-spacing: 0; width: 100%; }
.md-error {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius); font-size: 13px; line-height: 1.45;
  background: rgba(239, 107, 91, 0.1); border: 1px solid rgba(239, 107, 91, 0.5); color: #ffd9d3;
}
.md-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ---------- The cat mascot ----------
   The title-screen cat (#cat-title) and the in-game tank screen (#cat-cam) get their looks and animation here
   (Parts 2 and 3 of the mascot change). The pictures are in img/mascot/. */
.cat-spot { position: relative; pointer-events: none; user-select: none; }
.cat-spot img { display: block; width: 100%; height: auto; }
.cat-body { position: relative; aspect-ratio: 360 / 390; }
.cat-body .cat-face { position: absolute; inset: 0; }
.cat-body .cat-face[hidden] { display: none; }
/* the amber glow on each eye (the eyes sit at about 37 % and 61 % across, 49 % down in every picture) */
.cat-glow {
  position: absolute; top: 48.7%; width: 15%; aspect-ratio: 1.5; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 70, 0.75), rgba(255, 150, 30, 0.3) 55%, rgba(255, 140, 20, 0) 100%);
  opacity: 0.35;
}
.cat-glow-l { left: 36.7%; }
.cat-glow-r { left: 61.1%; }
.cat-body[data-new] .cat-base { visibility: hidden; }
.cat-body[data-new] .cat-glow,
.cat-body[data-face="blink"] .cat-glow, .cat-body[data-face="bored"] .cat-glow,
.cat-body[data-face="wink-right"] .cat-glow-r, .cat-body[data-face="wink-left"] .cat-glow-l { visibility: hidden; }
/* the start-screen cat: he sits still (no bobbing, he is attached to the panel under him); only the eyes pulse slowly */
#cat-title .cat-glow { animation: cat-glow 3.4s ease-in-out infinite; }
@keyframes cat-glow { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.8; } }
.gfx-low #cat-title .cat-glow, .title-idle #cat-title .cat-glow { animation: none; opacity: 0.5; }

/* the tank screen during games: a small CRT in a riveted metal frame, amber glass, faint scanlines (catmascot.js, CatCam).
   On a PC it stands at the bottom of the player column, under the reaction bar, its bottom edge lined up with the battlefield's
   (catmascot.js sets its size); when there is no room there, inside the right end of the control bar. On a touch screen at the
   bottom of the player column. */
#controls { position: relative; }
body.cc-in-bar #controls { padding-right: 150px; }
.cat-cam { width: 124px; flex: none; }
.cat-cam[hidden] { display: none; }
#controls > .cat-cam { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: var(--cc-w, 124px); }
.cc-frame {
  position: relative; padding: 7px 8px; border-radius: 9px;
  background:
    radial-gradient(circle at 5px 5px, #c9c2b2 0 1.2px, #4a453c 1.9px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 5px) 5px, #c9c2b2 0 1.2px, #4a453c 1.9px, transparent 2.6px),
    radial-gradient(circle at 5px calc(100% - 5px), #c9c2b2 0 1.2px, #4a453c 1.9px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #c9c2b2 0 1.2px, #4a453c 1.9px, transparent 2.6px),
    linear-gradient(160deg, #5d5a53 0%, #34322e 45%, #2a2825 70%, #47443e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.6);
}
.cc-glass {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px / 13px; background: #1c1308;
  box-shadow: 0 0 0 2px #141210, 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.cc-glass > * { position: absolute; }
.cc-glass .cat-body { width: 100%; left: 0; top: -4%; filter: sepia(0.55) saturate(1.3) brightness(0.92) contrast(0.95) blur(0.6px); }   /* (a soft, fuzzy picture, not a sharp one) */
.cc-glass .cat-glow { opacity: 0.45; }
.cc-tint { inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(255, 176, 60, 0.12) 0%, rgba(255, 150, 40, 0.06) 55%, rgba(30, 14, 0, 0.6) 100%); }
.cc-scan { inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px); }
/* old-TV look drawn over the cat's pictures (the art itself is not touched). Both are moved with transform/opacity only, so the
   browser's compositor does the work and nothing is redrawn: a slow lighter band that rolls down the glass, and fine grain that
   jumps about on the spot 1.7 times a second, with a stronger burst of static every 11 seconds. */
.cc-roll { left: 0; right: 0; top: 0; height: 28%; background: linear-gradient(180deg, transparent, rgba(255, 190, 90, 0.07) 55%, transparent); will-change: transform; animation: cc-roll 7s linear infinite; }
.cc-grain { --g: 0.15; inset: -40px; opacity: var(--g); background: var(--cc-noise) 0 0 / 96px 72px; will-change: transform, opacity; animation: cc-grain 0.6s steps(1) infinite, cc-grain-burst 11s linear infinite; }
.cat-cam[data-state="cracked"] .cc-grain { --g: 0.2; }
.cat-cam[data-state="critical"] .cc-grain { --g: 0.26; }
/* a second, finer layer of snow that jumps about faster, so the picture is never still (moved by transform only, like the grain) */
.cc-snow { inset: -30px; opacity: 0.07; background: var(--cc-noise) 0 0 / 53px 40px; will-change: transform; animation: cc-snow 0.35s steps(1) infinite; }
.cc-glare { inset: 0; background: linear-gradient(155deg, rgba(255, 240, 210, 0.2) 0%, rgba(255, 240, 210, 0.04) 32%, transparent 45%); }
.cc-crack { inset: 0; width: 100%; height: 100%; display: none; }
.cc-crack path { fill: none; stroke: rgba(255, 248, 230, 0.8); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: bevel; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)); }
.cat-cam:is([data-state="cracked"], [data-state="critical"], [data-state="dying"]) .cc-crack { display: block; }
.cc-static { inset: 0; opacity: 0; background: var(--cc-noise) 0 0 / 96px 72px; }
/* the warning lamp, on the bezel next to the glass: dark, and blinking amber at 25 % hp and below */
.cc-lamp {
  position: absolute; top: 1px; right: 50%; translate: 50% 0; width: 9px; height: 4px; border-radius: 2px;
  background: #4a3410; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.cc-lamp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #ffb43a; box-shadow: 0 0 5px 2px rgba(255, 170, 40, 0.75); opacity: 0; }
.cat-cam[data-state="critical"] .cc-lamp::after { animation: cc-lamp 0.9s steps(1) infinite; }
.cat-cam[data-state="critical"] .cc-glass > :not(.cc-glare, .cc-static, .cc-grain, .cc-snow, .cc-roll) { animation: cc-flicker 5.3s infinite; }
/* hit: a short shake and a burst of static */
.cat-cam.cc-hit .cc-frame { animation: cc-shake 0.4s linear; }
.cat-cam.cc-hit .cc-static { animation: cc-burst 0.45s steps(1); }
/* destroyed: static fills the screen, then it goes dark */
.cat-cam[data-state="dying"] .cc-static { opacity: 0.95; animation: cc-noise 0.24s steps(1) infinite; }
.cat-cam[data-state="dead"] .cc-glass { background: #060504; }
.cat-cam[data-state="dead"] .cc-glass > :not(.cc-glare) { visibility: hidden; }
@keyframes cc-roll { from { transform: translateY(-110%); } to { transform: translateY(380%); } }
@keyframes cc-grain { 0% { transform: translate(0, 0); } 17% { transform: translate(-31px, 17px); } 34% { transform: translate(23px, -29px); } 51% { transform: translate(-11px, 31px); } 68% { transform: translate(29px, 9px); } 85% { transform: translate(-19px, -23px); } }
@keyframes cc-grain-burst { 0%, 87%, 91%, 100% { opacity: var(--g); } 88% { opacity: calc(var(--g) * 2.2); } 89% { opacity: calc(var(--g) * 1.5); } 90% { opacity: calc(var(--g) * 2.6); } }
@keyframes cc-snow { 0% { transform: translate(0, 0); } 25% { transform: translate(-17px, 11px); } 50% { transform: translate(13px, -19px); } 75% { transform: translate(-7px, -13px); } }
@keyframes cc-lamp { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes cc-flicker { 0%, 60%, 61.5%, 63%, 86%, 87.5%, 100% { opacity: 1; } 60.7% { opacity: 0.25; } 62.2% { opacity: 0.6; } 86.7% { opacity: 0.35; } }
@keyframes cc-shake { 0%, 100% { transform: none; } 20% { transform: translate(-3px, 1px) rotate(-1deg); } 40% { transform: translate(3px, -1px) rotate(1deg); } 60% { transform: translate(-2px, 0); } 80% { transform: translate(1px, 1px); } }
@keyframes cc-burst { 0% { opacity: 0.85; background-position: 0 0; } 25% { opacity: 0.7; background-position: -31px 17px; } 50% { opacity: 0.55; background-position: 23px -29px; } 75% { opacity: 0.3; background-position: -11px 41px; } 100% { opacity: 0; } }
@keyframes cc-noise { 0% { background-position: 0 0; } 25% { background-position: -31px 17px; } 50% { background-position: 23px -29px; } 75% { background-position: -11px 41px; } }
/* at the bottom of the player column (on a touch screen the player tiles scroll if they need the room) */
#side > .cat-cam { width: var(--cc-w, 100%); max-width: 100%; margin: auto auto 0; }
#field > .cat-cam { position: absolute; left: 6px; bottom: 6px; width: clamp(64px, 11vw, 96px); z-index: 2; opacity: 0.92; }
.rotate-cat { height: auto; }

@media (prefers-reduced-motion: reduce) {
  .cat-spot *, .logo .cursor { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}

/* ---------- smaller screens and small embedded frames ---------- */
/* Narrow but wide-ish (a tablet on its side, or the game embedded in a page):
   keep the cards beside the battlefield so everything fits without scrolling. */
@media (max-width: 980px) {
  #topbar .brand { display: none; }
  #side { width: 150px; }
  .pcard .video { aspect-ratio: 16 / 9; }
  .pcard .video .badge { font-size: 9px; padding: 1px 4px; }
  .hud { gap: 12px; }
  input[type=range] { width: 100px; }
}
/* Phones and tall, narrow frames: stack everything and let the page scroll. */
@media (max-width: 640px), (max-width: 980px) and (max-aspect-ratio: 5/4) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100dvh; }
  #stage { flex-direction: column; }
  #field-wrap { container-type: normal; flex: none; }
  #field { width: 100%; }
  body:not(.in-game) #field-wrap { flex: 1; }
  body:not(.in-game) #field { height: auto; min-height: max(380px, calc(100dvh - 90px)); }
  #side { width: 100%; flex-direction: row; align-items: stretch; }
  #players { flex: 1; flex-direction: row; overflow-x: auto; overflow-y: visible; }
  .pcard { flex: 1 1 0; min-width: 150px; }
  .pcard .video { aspect-ratio: 16 / 9; }
  /* the shop and scoreboards cover the whole screen under the top bar (and scroll inside themselves if needed) */
  #screen-shop, #screen-round, #screen-final { position: fixed; top: var(--topbar-h, 54px); left: 0; right: 0; bottom: 0; z-index: 25; }
}
@media (max-width: 860px), (max-height: 520px) {
  .lobby-panel { grid-template-columns: 1fr; }
  .help-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #topbar { padding: 6px 10px; flex-wrap: wrap; gap: 6px 10px; }
  .hud { gap: 8px; margin: 0; flex-wrap: wrap; }
  .top-actions { margin-left: auto !important; }
  #stage { padding: 8px; }
  .hud-item > span:last-child { font-size: 13px; }
  .ctl-label { display: none; }
  .room-code { font-size: 32px; }
  .panel { padding: 16px; }
}
/* A short frame (for example a small embed): tighter spacing so everything still fits. */
@media (max-height: 560px) {
  #topbar { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
  #stage { padding: 8px; gap: 8px; }
  #controls { padding: 6px 10px 8px; gap: 8px; }
}

/* ---------- touch screens: bigger targets ---------- */
body.touch { -webkit-tap-highlight-color: transparent; }
body.touch button, body.touch #canvas, body.touch #controls { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch .ctl-btn { width: 48px; height: 48px; font-size: 20px; }
body.touch .icon-btn { min-width: 42px; height: 40px; font-size: 17px; }
body.touch .btn { min-height: 44px; }
body.touch .btn.small { min-height: 38px; }
body.touch .weapon-box { min-height: 48px; align-items: center; font-size: 15px; }
body.touch .item-btn, body.touch .shield-btn { min-height: 48px; }
body.touch .fire-btn { padding: 14px 38px !important; font-size: 20px !important; min-height: 56px; }
body.touch input[type=range] { height: 32px; }
body.touch .mb-btn { width: 34px; height: 32px; }
body.touch .mb-btn svg { width: 18px; height: 18px; }
body.touch .help-tab { padding: 10px 14px; }

/* ---------- phones on their side: a gamepad-like layout ---------- */
/* player tiles on the left (fold away with ◀), the battlefield in the middle,
   the buttons on the right under your thumb. */
.side-toggle { display: none; }
.rotate-msg { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  body.touch { overflow: hidden; }
  body.touch #app { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; min-height: 0; }
  body.touch #topbar { grid-column: 1 / -1; min-height: 38px; padding: 2px 10px; gap: 8px; flex-wrap: nowrap; }
  body.touch #topbar .brand { display: none; }
  body.touch .hud { gap: 10px; margin: 0 auto; flex-wrap: nowrap; }
  body.touch .hud-label { font-size: 8px; }
  body.touch .hud-item > span:last-child { font-size: 12px; }
  body.touch .icon-btn { min-width: 36px; height: 32px; }
  body.touch .text-btn { padding: 0 8px; }
  body.touch #stage { display: contents; }
  body.touch #field-wrap { grid-column: 2; grid-row: 2; padding: 6px; min-height: 0; min-width: 0; flex: none; container-type: size; justify-content: flex-start; }   /* (the battlefield right beside the player tiles) */
  body.touch.in-game #field { width: min(100cqw, calc(100cqh * var(--field-aw, 1.7778))); }
  body:not(.in-game).touch #field-wrap { container-type: normal; }
  body:not(.in-game).touch #field { min-height: 0; height: 100%; }
  /* player tiles */
  body.touch #side { grid-column: 1; grid-row: 2; width: 112px; padding: 6px 0 6px 6px; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
  body.touch #players { flex-direction: column; overflow-y: auto; overflow-x: hidden; gap: 6px; flex: 1 1 auto; }
  body.touch .pcard { min-width: 0; flex: none; }
  body.touch .mb-volume { display: none; }
  body.touch .mb-btn { width: 30px; height: 28px; }
  body.touch .mb-muted { width: 18px; height: 18px; top: 3px; left: 3px; }
  body.touch .side-toggle {
    display: block; flex: none; height: 26px; border-radius: var(--radius); border: 1px solid var(--panel-border);
    background: var(--panel); color: var(--muted); font-size: 12px; cursor: pointer;
  }
  body.touch .side-toggle .st-closed { display: none; }
  body.touch.side-collapsed #side { width: 38px; }
  body.touch.side-collapsed #players { display: none; }
  body.touch.side-collapsed .side-toggle { height: 100%; }
  body.touch.side-collapsed .side-toggle .st-open { display: none; }
  body.touch.side-collapsed .side-toggle .st-closed { display: inline; }
  /* the buttons: one column of two, built to fit from 740 x 360 up (the weapon picker holds the weapons, shields and kits) */
  body.touch { --bh: 44px; }
  body.touch #controls {
    grid-column: 3; grid-row: 2; display: grid; grid-template-columns: 50px 50px; grid-auto-rows: min-content; gap: 5px;
    align-content: start; padding: 6px 8px 6px 0; border-top: none; background: none; overflow-y: auto; min-height: 0;
  }
  body.touch #controls[hidden] { display: none !important; }
  body.touch #controls .ctl-group { display: contents; }
  body.touch #controls .ctl-label, body.touch #controls .ctl-value, body.touch #controls input[type=range],
  body.touch #chute-chip, body.touch #controls .weapon-group, body.touch #btn-repair, body.touch #shield-btns { display: none; }
  body.touch #controls .ctl-btn { width: 50px; height: var(--bh); }
  body.touch #ctl-player { order: 0; grid-column: span 2; padding: 2px 6px; font-size: 12px; overflow: hidden; white-space: nowrap; }
  body.touch #btn-weapons { order: 1; grid-column: span 2; display: flex; align-items: center; justify-content: center; gap: 6px; height: var(--bh); min-height: 0; padding: 0 4px; text-transform: none; letter-spacing: 0; }
  body.touch .wp-icon svg { width: 28px; height: 28px; display: block; }
  body.touch .wp-count { font-size: 14px; color: var(--accent); }
  body.touch #btn-turn-ccw { order: 2; } body.touch #btn-turn-cw { order: 3; }
  body.touch [data-hold="power:-5"] { order: 4; } body.touch [data-hold="power:+5"] { order: 5; }
  body.touch #btn-drive-left { order: 6; } body.touch #btn-drive-right { order: 7; }
  body.touch #btn-jump { order: 8; width: 50px; padding: 0; font-size: 12px; }
  body.touch .fuel { order: 9; flex-direction: column; justify-content: center; align-items: stretch; gap: 3px; width: 50px; min-width: 0; height: var(--bh); padding: 0 4px; border: 1px solid var(--panel-border); border-radius: var(--radius); }
  body.touch #fuel-value { font-size: 12px; text-align: center; min-width: 0; }
  body.touch #btn-fire { order: 11; grid-column: span 2; padding: 0 !important; height: calc(var(--bh) + 8px); min-height: 0; font-size: 18px !important; }
  body.touch .top-pop.panel { right: -40px; }
  /* menus: a bit more compact */
  body.touch .panel { padding: 14px 16px; }
  body.touch .overlay { padding: 8px; }
}

/* ---------- phones held upright: please rotate (over every screen: the start screen is not made for upright phones either) ---------- */
/* (only the browser's own media query decides: no script, nothing moves, nothing to do while it sits there) */
@media (orientation: portrait) and (max-width: 600px) {
  body.touch .rotate-msg {
    display: flex; position: fixed; inset: 0; z-index: 200; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; padding: 24px; text-align: center; background: var(--bg); color: var(--body); font-size: 15px; line-height: 1.5;
  }
  body.touch .rotate-msg b { color: var(--text); font-size: 18px; }
  body.touch .rotate-cat { width: 120px; }
  /* a phone drawn on its side, with a turning arrow in front of it (it stands still) */
  body.touch .rotate-phone {
    width: 60px; height: 36px; border: 3px solid var(--accent); border-radius: 7px; position: relative;
  }
  body.touch .rotate-phone::before { content: "↻"; position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); font-size: 30px; line-height: 1; color: var(--accent); }
  body.touch .rotate-phone span { position: absolute; right: 4px; top: 50%; width: 3px; height: 8px; margin-top: -4px; background: var(--accent); border-radius: 2px; }
}

/* ---------- the note for phones on the start screen ---------- */
.phone-notice {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 150; display: flex; align-items: center; gap: 10px;
  max-width: 560px; margin: 0 auto; padding: 8px 8px 8px 12px; background: var(--panel); color: var(--body); font-size: 13px; line-height: 1.35;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.phone-notice[hidden] { display: none; }
@media (max-height: 500px) { .phone-notice { padding: 3px 6px 3px 10px; font-size: 12px; } }
.phone-notice-text { flex: 1 1 auto; }
.phone-notice .icon-btn { flex: none; }
/* while the note is showing, messages like "That name isn't allowed" sit above it instead of under it */
body:has(#phone-notice:not([hidden])) .toast { bottom: 60px; }

/* ---------- phones: no accidental zooming or scrolling ---------- */
html, body { overscroll-behavior: none; }
body.touch { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.touch.in-game #app { touch-action: none; }                 /* nothing scrolls or zooms the page during play */
body.touch.in-game .overlay, body.touch.in-game #players, body.touch.in-game #controls { touch-action: pan-y; } /* (except lists that scroll) */
body.touch input:not([type=range]), body.touch select { font-size: 16px; }   /* iPhone zooms in on smaller text fields */
/* keep clear of the notch and the rounded corners */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch #app { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- iPhone: how to add the game to the home screen ---------- */
.install-panel { width: 440px; line-height: 1.5; color: var(--body); }
.install-steps { padding-left: 20px; margin: 10px 0; }
.install-steps li { margin: 6px 0; }
.share-icon { display: inline-block; width: 13px; height: 16px; border: 2px solid var(--accent); border-top: none; border-radius: 1px; position: relative; vertical-align: -2px; margin: 0 2px; }
.share-icon::before { content: ""; position: absolute; left: 50%; top: -6px; width: 2px; height: 12px; margin-left: -1px; background: var(--accent); }
.install-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.install-foot img { border-radius: 12px; }
/* opened from the home screen: keep clear of the status bar and the notch */
body.installed #topbar { padding-top: max(2px, env(safe-area-inset-top)); }

/* ---------- teams ---------- */
.team-tag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 15px; padding: 0 4px; border-radius: 3px;
  background: var(--tc); color: #10131a; font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1; flex: none;
}
.team-pick { display: inline-flex; gap: 4px; }
.team-pick button {
  border: 1px solid var(--panel-border); background: var(--panel); color: var(--muted); border-radius: 3px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 3px 8px;
}
.team-pick button.on { background: var(--tc); border-color: var(--tc); color: #10131a; }
.team-pick button:disabled { opacity: 0.35; cursor: not-allowed; }   /* (a team already has its 3 players) */
.team-line { margin: 0 0 10px; display: flex; gap: 14px; justify-content: center; font-weight: 600; flex-wrap: wrap; }
.team-line span, .team-final span { display: inline-flex; align-items: center; gap: 6px; }
.team-final { display: flex; gap: 12px; justify-content: center; margin: 0 0 12px; flex-wrap: wrap; }
.team-final > div {
  flex: 1 1 140px; max-width: 240px; padding: 10px 14px; border-radius: var(--radius); background: var(--panel-2);
  border: 1px solid var(--panel-border); border-top: 3px solid var(--tc); text-align: center;
}
.team-final .win { box-shadow: 0 0 0 1px var(--tc), 0 0 16px -4px var(--tc); }
.team-final b { font-size: 22px; font-family: var(--mono); display: block; }

.sd-val { color: #ff6a5a; font-weight: 700; }
#btn-jump { width: auto; padding: 0 10px; white-space: nowrap; }
.run-summary { text-align: center; margin: 0 0 14px; }
.run-best { margin: 0 0 10px; font-weight: 700; color: var(--accent); min-height: 1.2em; }
.run-stats { display: flex; gap: 10px; justify-content: center; margin: 0; flex-wrap: wrap; }
.run-stats > div { padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel-2); min-width: 96px; }
.run-stats dt { font-size: 12px; color: var(--muted); }
.run-stats dd { margin: 2px 0 0; font-size: 24px; font-weight: 700; font-family: var(--mono); }
@media (max-height: 340px) {   /* a phone held sideways: the run-over screen has to fit with its two buttons */
  #screen-final:has(.run-summary:not([hidden])) .score-panel { padding-top: 8px; padding-bottom: 8px; }
  #screen-final:has(.run-summary:not([hidden])) h2 { margin: 0 0 4px; font-size: 18px; }
  #screen-final:has(.run-summary:not([hidden])) #final-hint { display: none; }
  .run-summary { margin-bottom: 6px; }
  .run-best { margin-bottom: 4px; }
  .run-stats > div { padding: 4px 12px; min-width: 80px; }
  .run-stats dd { font-size: 18px; }
}
.team-score { display: flex; gap: 10px; justify-content: center; margin: 0 0 10px; flex-wrap: wrap; }
.team-score > div, .team-score > span { padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--tc, var(--panel-border)); background: var(--panel-2); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.team-score > div.win { border-width: 2px; }
.team-score b { font-family: var(--mono); font-size: 18px; }

/* ---- pause ---- */
.pause-banner { position: absolute; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 14, 0.55); }
.pause-card { background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: var(--radius); padding: 20px 28px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; max-width: 90%; }
.pause-icon { font-size: 32px; color: var(--accent); }
.pause-text { font-family: var(--mono); font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.pause-sub { font-size: 13px; color: var(--muted); min-height: 1em; }
.pause-sub:empty { display: none; }

/* ---- chat ---- */
/* In a game there is no chat box: new messages show over the top-left corner of the battlefield, each on a dark see-through strip
   (readable on every level), and fade out after about 10 seconds. Enter opens the one-line input under them. */
.media-box.own.media-off [data-act="mic"], .media-box.own.media-off [data-act="settings"] { display: none; }
.mb-btn.unavailable, .mb-btn.unavailable:hover { opacity: 0.45; color: var(--muted); border-color: var(--panel-border); cursor: not-allowed; }
.chat-badge { background: var(--accent); color: var(--accent-ink); border-radius: 9px; padding: 0 6px; font-size: 11px; }
.chat-log { flex: 1; min-height: 60px; overflow-y: auto; padding: 5px 8px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.chat-msg[hidden], .chat-line[hidden] { display: none; }
.chat-overlay { position: absolute; left: 10px; top: 10px; z-index: 19; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: min(46%, 420px); pointer-events: none; }
.chat-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; }
.chat-line { max-width: 100%; background: rgba(6, 8, 12, 0.66); border-radius: 4px; padding: 2px 8px; font-size: 13px; line-height: 1.35; color: #f2f5f8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); overflow-wrap: anywhere; transition: opacity 1s linear; }
.chat-line.fade { opacity: 0; }
.chat-form { display: flex; gap: 4px; width: 100%; padding: 4px; border-radius: 6px; background: rgba(6, 8, 12, 0.8); border: 1px solid var(--panel-border); pointer-events: auto; }
.chat-form[hidden] { display: none; }
.chat-form input { flex: 1; min-width: 0; font-size: 13px; padding: 4px 6px; }
.chat-form select { max-width: 90px; font-size: 12px; }
.chat-history { position: absolute; left: 10px; top: 10px; z-index: 30; display: flex; flex-direction: column; width: min(420px, calc(100% - 20px)); max-height: calc(100% - 20px); background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); overflow: hidden; }
.chat-history[hidden] { display: none; }
.ch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 10px; background: var(--panel-2); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.chat-history .chat-log { font-size: 13px; padding: 6px 10px; }
.chat-history .chat-log:empty::before { content: "Nothing said yet."; color: var(--dim); }
.chat-history-btn { position: relative; }
.chat-history-btn[hidden] { display: none; }
.chat-history-btn.open { border-color: var(--accent); }
.chat-history-btn .chat-badge { position: absolute; top: -7px; right: -7px; min-width: 16px; padding: 0 4px; line-height: 16px; text-align: center; font-size: 10px; font-weight: 700; box-sizing: border-box; }

/* lobby presets: one choice out of four */
.preset-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.preset-pick button {
  padding: 9px 4px; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--body);
  font-family: var(--mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
}
.preset-pick button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.preset-pick button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.preset-pick button:disabled { cursor: default; }
.preset-pick button:disabled:not(.on) { opacity: 0.6; }

/* essentials up front, the rest under "More settings" */
.settings.essentials { margin: 10px 0; }
.settings.essentials .set-level { flex: 1 1 100%; }
.settings.essentials label:not(.set-level) { flex: 1 1 40%; }
.more-settings { border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel-2); margin-bottom: 10px; }
.more-settings > summary {
  cursor: pointer; padding: 8px 12px; list-style: none; font-family: var(--mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); display: flex; align-items: center; gap: 8px; user-select: none;
}
.more-settings > summary::-webkit-details-marker { display: none; }
.more-settings > summary::before { content: "▸"; color: var(--dim); transition: transform 0.15s; }
.more-settings[open] > summary::before { transform: rotate(90deg); }
.more-settings > summary:hover { color: var(--text); }
.set-groups { margin: 0; padding: 0 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.set-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.set-group .field-label { margin: 0; }
.set-group label { min-width: 0; flex: none; }

/* level cards: a small picture of each level and its name */
.level-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.level-card {
  display: flex; flex-direction: column; gap: 3px; padding: 3px 3px 4px; border-radius: var(--radius); border: 1px solid var(--panel-border);
  background: var(--panel-2); color: var(--body); font-family: var(--font); font-size: 10.5px; line-height: 1.15; cursor: pointer; text-align: center;
}
.level-card svg { display: block; width: 100%; aspect-ratio: 80 / 44; border-radius: 2px; filter: saturate(0.85) brightness(0.9); }
.level-card .level-name { display: block; min-height: 2.3em; display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; }
.level-card:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.level-card:hover:not(:disabled) svg { filter: none; }
.level-card.on { border-color: var(--accent); background: rgba(242, 169, 59, 0.16); color: var(--accent); font-weight: 700; box-shadow: 0 0 0 1px var(--accent); }
.level-card.on svg { filter: none; }
.level-card:disabled { cursor: default; }
.level-card:disabled:not(.on) { opacity: 0.6; }
.settings.essentials .set-level .field-label { margin-bottom: 4px; }
@media (max-width: 1100px) { .level-cards { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } }

/* the seats: a card for every player, a menu on every empty seat */
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; align-items: start; }
.seat {
  position: relative; min-width: 0; padding: 8px 10px 10px; border-radius: var(--radius); background: var(--panel-2);
  border: 1px solid var(--panel-border); border-top: 3px solid var(--pc, var(--panel-border)); display: flex; flex-direction: column; gap: 8px;
}
.seat.offline { opacity: 0.55; }
.seat-top { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 14px; }
.seat-tank { width: 52px; height: auto; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }
.seat-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.seat-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; min-width: 0; }
.seat-name-text { overflow-wrap: break-word; line-height: 1.2; min-width: 0; }
.seat-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.seat .tag {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--accent-dim); padding: 1px 5px; border-radius: 2px;
  border: 1px solid var(--panel-border); text-transform: uppercase; letter-spacing: 0.08em;
}
.seat .tag.bot { color: var(--accent); text-transform: none; letter-spacing: 0.02em; }
.seat select { font-size: 11px; padding: 2px 6px; }
.seat .x {
  position: absolute; top: 2px; right: 3px; width: 22px; height: 22px; line-height: 20px; padding: 0; border: none; border-radius: 3px;
  background: none; color: var(--muted); cursor: pointer; font-size: 18px;
}
.seat .x:hover { color: var(--bad); background: rgba(239, 107, 91, 0.12); }
.seat .team-pick { display: flex; gap: 4px; }
.seat .team-pick button { flex: 1; padding: 4px 2px; font-size: 10.5px; white-space: nowrap; }
.seat .team-pick button.on:not([style]) { background: var(--text); border-color: var(--text); color: #10131a; }
.seat .team-pick.static { align-items: center; gap: 6px; font-size: 12px; color: var(--body); min-height: 24px; }
.seat.empty { border-top-color: var(--panel-border); border-style: dashed; border-top-style: dashed; background: transparent; padding: 0; gap: 0; }
.seat.empty.open { border-style: solid; border-color: var(--accent); background: var(--panel-2); }
.seat-add {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 10px; min-height: 72px; background: none; border: none; color: var(--muted);
  font: inherit; font-weight: 600; font-size: 14px; text-align: left; cursor: pointer; border-radius: var(--radius);
}
.seat-add .hint { font-weight: 400; font-size: 11.5px; color: var(--dim); }
.seat-add .plus {
  width: 34px; height: 34px; border-radius: 50%; border: 1px dashed var(--dim); display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--dim); flex: none;
}
.seat-add:hover, .seat.empty.open .seat-add { color: var(--accent); }
.seat-add:hover .plus, .seat.empty.open .plus { border-color: var(--accent); color: var(--accent); }
.seat-menu { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.seat-menu-row { display: flex; flex-direction: column; gap: 4px; }
.menu-label { font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-dim); }
.menu-levels, .menu-local { display: flex; gap: 4px; }
.menu-levels .btn { flex: 1; padding: 6px 2px; font-size: 11.5px; }
.menu-local input { flex: 1; min-width: 0; font-size: 13px; padding: 5px 8px; }
.menu-local .btn { padding: 6px 10px; font-size: 11.5px; }
@media (max-width: 420px) { .seats { grid-template-columns: 1fr; } }

/* the chat in the lobby */
.lobby-chat { display: flex; flex-direction: column; gap: 4px; min-height: 170px; flex: 1 1 170px; margin-top: 8px; }
.lobby-chat .field-label { margin: 0; }
.lobby-chat .chat-log { background: var(--bg); border: 1px solid var(--panel-border); border-radius: var(--radius); min-height: 60px; font-size: 13px; padding: 6px 8px; }
.lobby-chat .chat-log:empty::before { content: "Nothing said yet."; color: var(--dim); }
#lobby-chat-form { display: flex; gap: 4px; }
#lobby-chat-form input { flex: 1; min-width: 0; font-size: 13px; padding: 6px 8px; }
#lobby-chat-form select { max-width: 90px; font-size: 12px; }

/* the Start button and the waiting message */
.lobby-col { height: 100%; }
.start-block { margin-top: auto; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.start-btn { width: 100%; padding: 16px 20px; font-size: 20px; letter-spacing: 0.22em; text-transform: uppercase; }
.start-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.start-btn[hidden] { display: none; }
.lobby-wait { margin: 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--body); min-height: 1.4em; }
.lobby-wait.ready { color: var(--good); }

/* what guests see instead of the settings: a read-only summary */
.settings-summary { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel-2); }
.settings-summary[hidden] { display: none; }
.sum-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sum-level { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sum-pic svg { display: block; width: 96px; aspect-ratio: 80 / 44; border-radius: 3px; border: 1px solid var(--panel-border); }
.sum-top b { display: block; font-size: 16px; }
.sum-top .field-label { margin-bottom: 2px; }
.sum-preset { text-align: right; }
.sum-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 0; }
.sum-list > div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--panel-border); font-size: 13px; }
.sum-list dt { color: var(--muted); }
.sum-list dd { margin: 0; font-weight: 600; text-align: right; }
.settings-summary .hint { margin: 0; font-size: 12px; }
.preset-pick button.on:hover:not(:disabled) { color: var(--accent-ink); }

/* lobby layout: on a wide screen the panel fills the height, "More settings" scrolls inside it and Start stays in view */
.lobby-panel .set-group label { flex: none; }
@media (min-width: 861px) and (min-height: 521px) {
  .lobby-panel { height: 100%; max-height: 720px; overflow: visible; grid-template-rows: minmax(0, 1fr); }
  .lobby-col { min-height: 0; }
  .lobby-col > .host-settings, .lobby-col > .settings-summary { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .lobby-col:first-child { overflow-y: auto; padding-right: 2px; }
}
@media (max-width: 1100px) { .seat-add .hint { display: none; } }
/* phones and narrow tablets: one column, the settings and the Start button before the chat */
@media (max-width: 860px), (max-height: 520px) {
  .lobby-panel { display: flex; flex-direction: column; gap: 0; }
  .lobby-col { display: contents; }
  .game-title, .game-title-edit, #rename-error { order: 0; }
  .lobby-head, #invite-link, .lobby-info > .hint, .listed-row { order: 1; }
  .lobby-people { order: 2; }
  .map-preview { order: 3; }
  .host-settings, .settings-summary { order: 4; margin-top: 4px; }
  .start-block { order: 5; position: sticky; bottom: 0; background: var(--panel); padding: 10px 0 2px; z-index: 2; }
  .lobby-chat { order: 6; flex: none; }
  .lobby-chat .chat-log { height: 130px; flex: none; }
  .lobby-wait { min-height: 0; }
}
@media (max-width: 860px), (max-height: 520px) {
  .start-btn { padding: 12px 16px; font-size: 17px; }
  .lobby-wait { font-size: 14px; }
  .seat-add { min-height: 52px; padding: 8px 10px; }
}

/* ---------- self-destruct: a small red button, and a question before anything happens ---------- */
.danger-btn { border-color: #8a3a34; color: #ff9d8f; background: transparent; }
.danger-btn:hover:not(:disabled) { border-color: #ef6b5b; background: rgba(239, 107, 91, 0.12); color: #ffb3a8; }
.sd-btn { font-size: 12px; padding: 4px 8px; flex: none; }
.skip-btn[hidden] { display: none; }
.wp-foot { display: none; padding: 6px 10px 10px; border-top: 1px solid var(--panel-border); }
body.touch .wp-foot { display: flex; justify-content: flex-end; gap: 8px; }
/* hold for 1 second: a ring fills up around the button (a plain CSS animation, nothing runs in JavaScript while it fills) */
#btn-selfdestruct, #wp-selfdestruct { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sd-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sd-ring rect { fill: none; stroke: #ff6a55; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: sd-fill 1s linear forwards; }
.danger-btn.holding { border-color: #ef6b5b; background: rgba(239, 107, 91, 0.18); color: #ffb3a8; }
@keyframes sd-fill { to { stroke-dashoffset: 0; } }
@media (orientation: landscape) and (max-height: 520px) { body.touch .sd-btn { display: none; } }   /* (on a phone on its side it is in the weapon picker, away from the other buttons) */

/* ---------- phones on their side: weapon picker and chat button ---------- */
.wp-btn, .chat-fab { display: none; }
@media (orientation: landscape) and (max-height: 400px) { body.touch { --bh: 38px; } }
.wp { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 8px; background: rgba(8, 10, 14, 0.6); }
.wp[hidden] { display: none; }
.wp-panel { display: flex; flex-direction: column; width: min(720px, 100%); max-height: 100%; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.wp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 12px; font-family: var(--mono); font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--panel-border); }
.wp-close { width: 40px; height: 36px; }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; padding: 10px; overflow-y: auto; min-height: 0; }
.wp-tile {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 6px; min-height: 84px; border-radius: var(--radius);
  border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; touch-action: manipulation;
}
.wp-tile .icon { width: 40px; height: 40px; }
.wp-tile .wp-name { font-size: 11px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.wp-tile .wp-n { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); }
.wp-tile.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px -4px var(--accent); }
.wp-tile:disabled { opacity: 0.45; cursor: default; }
/* the chat button on every touch screen (it opens the one-line input; a number shows messages you have not looked at yet) */
body.touch .side-fabs { display: flex; gap: 6px; flex: none; }
body.touch .chat-fab { display: flex; align-items: center; justify-content: center; gap: 4px; flex: none; position: relative; height: 34px; min-width: 44px; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); font-size: 16px; cursor: pointer; }
body.touch .chat-fab[hidden] { display: none; }
body.touch .chat-fab.open { border-color: var(--accent); }
body.touch .chat-fab .chat-badge { position: absolute; top: -6px; right: -4px; }
body.touch .react-fab { display: none; }   /* (the reaction faces have their own bar, except on a phone on its side) */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch .chat-overlay { width: min(46%, 300px); }
}

/* ---------- round and game awards ---------- */
.awards { margin: 12px 0 4px; }
.awards h3 { margin: 0 0 8px; font-size: 13px; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dim); text-align: center; }
.award-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.award {
  display: flex; gap: 10px; align-items: center; flex: 1 1 190px; max-width: 280px; padding: 8px 12px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--panel-border); border-left: 3px solid var(--pc, var(--accent));
  animation: award-in 0.5s calc(var(--i, 0) * 0.35s) both cubic-bezier(.2, .9, .3, 1.2);
}
.award-icon { width: 40px; height: 40px; flex: none; }
.award-body { min-width: 0; font-size: 12px; line-height: 1.3; }
.award-title { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.award-who { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.award-who .swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.award-line { color: var(--body); }
.award-detail { color: var(--muted); font-family: var(--mono); font-size: 11px; }
@keyframes award-in { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .award { animation: none; } }
@media (orientation: landscape) and (max-height: 520px) { .awards { margin-top: 6px; } .award { padding: 5px 8px; } .award-icon { width: 30px; height: 30px; } .award-line { display: none; } }

/* ---------- quick reactions ---------- */
.react-bar { display: flex; gap: 3px; flex: none; }
.react-bar[hidden] { display: none; }
.react-btn {
  flex: 1 1 0; min-width: 0; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius);
  border: 1px solid var(--panel-border); background: var(--panel); cursor: pointer; touch-action: manipulation;
}
.react-btn:hover { border-color: var(--accent); background: var(--panel-2); }
.react-btn:active { transform: translateY(1px); }
.react-icon { width: 22px; height: 22px; display: block; }
.react-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.react-pop { position: fixed; width: 38px; height: 38px; animation: react-pop 2.4s both ease-out; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.react-pop-icon { width: 100%; height: 100%; display: block; }
@keyframes react-pop {
  0% { opacity: 0; transform: scale(0.3); }
  10% { opacity: 1; transform: scale(1.18); }
  20% { transform: scale(1); }
  72% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .react-pop { animation-name: react-fade; } @keyframes react-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } }
.side-fabs, .react-menu { display: none; }
@media (max-width: 980px) { .react-icon { width: 17px; height: 17px; } .react-btn { height: 28px; } }
@media (orientation: landscape) and (max-height: 520px) {
  /* a phone on its side: one small button next to the chat button (under the player cards); it opens the six choices */
  body.touch .react-bar { display: none; }
  body.touch .side-fabs { display: flex; gap: 6px; flex: none; }
  body.touch .side-fabs .chat-fab { flex: 1 1 0; min-width: 0; }
  body.touch .react-fab { display: flex; }
  body.touch .react-fab .react-icon { width: 24px; height: 24px; }
  body.touch.side-collapsed .side-fabs { flex-direction: column; }
  body.touch .react-menu {
    position: fixed; left: calc(124px + env(safe-area-inset-left)); bottom: 8px; z-index: 36; gap: 6px; padding: 6px;
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  }
  body.touch .react-menu:not([hidden]) { display: flex; }
  body.touch .react-menu .react-btn { flex: none; width: 44px; height: 44px; }
  body.touch .react-menu .react-icon { width: 30px; height: 30px; }
}

/* ---------- the Final Showdown (see showdown.js) ---------- */
/* The red sky: a red wash between the sky and the battlefield, so only the sky turns red (the ground and the tanks are drawn over it). */
.redsky {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease-out;
  background: linear-gradient(to bottom, rgba(120, 0, 12, 0.8) 0%, rgba(205, 25, 10, 0.72) 55%, rgba(255, 105, 30, 0.78) 100%);
}
.redsky.on { opacity: 1; }
.redsky.pulse { animation: redsky-pulse 1.1s ease-in-out infinite alternate; }
@keyframes redsky-pulse { from { opacity: 0.8; } to { opacity: 1; } }
.sd-layer { position: absolute; inset: 0; z-index: 16; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.sd-layer[hidden] { display: none; }
.sd-banner {
  text-align: center; font-family: var(--mono); font-weight: 900; text-transform: uppercase; color: #fff4e0;
  text-shadow: 0 0 22px #ff3a10, 0 0 60px #ff2a00, 0 6px 0 #6a0a00;
  animation: sd-slam 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.sd-banner[hidden] { display: none; }
.sd-b1 { font-size: clamp(22px, 4.5cqw, 60px); letter-spacing: 0.5em; margin-right: -0.5em; color: #ffb040; }
.sd-b2 { font-size: clamp(34px, 10.5cqw, 150px); letter-spacing: 0.06em; line-height: 1; padding: 0.04em 0.3em; background: linear-gradient(180deg, rgba(120, 0, 0, 0.82), rgba(40, 0, 0, 0.9)); border-top: 4px solid #ff5a30; border-bottom: 4px solid #ff5a30; }
.sd-b3 { margin-top: 10px; font-size: clamp(11px, 1.8cqw, 22px); letter-spacing: 0.2em; color: #ffd0a0; text-shadow: 0 2px 6px #000; }
.sd-banner.out { animation: sd-out 0.5s ease-in both; }
.sd-banner.shake { animation: sd-slam 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both, sd-shake 0.09s linear 0.5s 14; }
@keyframes sd-slam { 0% { transform: scale(4.2) rotate(-3deg); opacity: 0; } 55% { transform: scale(0.94); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sd-shake { 0% { transform: translate(0, 0); } 25% { transform: translate(4px, -3px); } 50% { transform: translate(-3px, 4px); } 75% { transform: translate(-4px, -2px); } 100% { transform: translate(3px, 3px); } }
@keyframes sd-out { to { transform: scale(1.5); opacity: 0; } }
.reduce-flash .sd-banner, .reduce-flash .sd-banner.shake { animation: sd-fade 0.6s ease-out both; }
@keyframes sd-fade { from { opacity: 0; } to { opacity: 1; } }
.reduce-flash .redsky.pulse { animation: none; }
.sd-ready { pointer-events: auto; text-align: center; padding: 22px 34px; border-radius: var(--radius); background: rgba(30, 6, 6, 0.9); border: 1px solid #ff5a30; box-shadow: 0 0 50px -10px #ff3a10, 0 20px 50px rgba(0, 0, 0, 0.6); }
.sd-ready[hidden] { display: none; }
.sd-ready-text { font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; color: #ffd0a0; margin-bottom: 12px; }
.sd-ready-btn { font-size: clamp(22px, 4cqw, 44px) !important; padding: 0.35em 1.4em !important; letter-spacing: 0.2em; }
.sd-ready-btn .sd-key { font-size: 11px; opacity: 0.7; letter-spacing: 0.05em; margin-left: 8px; }
.sd-ready-btn.done { filter: saturate(0.5) brightness(0.85); }
.sd-ready-wait { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); min-height: 1.2em; }
.sd-count { font-family: var(--mono); font-weight: 900; color: #fff4e0; text-shadow: 0 0 30px #ff3a10, 0 0 80px #ff2a00, 0 8px 0 #6a0a00; font-size: clamp(80px, 30cqw, 420px); line-height: 1; }
.sd-count[hidden] { display: none; }
.sd-count span { display: block; animation: sd-count-pop 1s ease-out both; }
.sd-count.go span { color: #ffd84a; animation: sd-go 1.1s ease-out both; }
@keyframes sd-count-pop { 0% { transform: scale(2.2); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(0.8); opacity: 0.2; } }
@keyframes sd-go { 0% { transform: scale(0.4); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.reduce-flash .sd-count span, .reduce-flash .sd-count.go span { animation: sd-fade 0.3s ease-out both; }
/* the reload progress on the FIRE button (also on touch screens): a bar that fills while the selected weapon reloads */
.fire-btn { position: relative; overflow: hidden; }
.fire-btn .fire-label { position: relative; z-index: 1; }
.fire-btn .rl-fill { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); transform-origin: right center; transform: scaleX(0); transition: transform 0.1s linear; }
.fire-btn.reloading { filter: saturate(0.5); }
.fire-btn.reloading .rl-fill { transform: scaleX(var(--rl, 1)); }
.fire-btn.reloading .fire-label { font-size: 0.8em; letter-spacing: 0.08em; }
.fire-btn.sd-wait { opacity: 0.5; }
.wp-tile.blocked, .weapon-box.blocked { opacity: 0.4; filter: grayscale(1); }
.showdown-note { margin: 4px 0 0; }
.showdown-note[hidden] { display: none; }


/* ---------- Avatars (0.51.0): on the seats in the lobby, and the picker ---------- */
/* the avatar on a seat: a square picture in a frame of the tank colour, the little tank on its corner */
.seat-avatar {
  position: relative; flex: none; width: 58px; height: 58px; padding: 0; border: 2px solid var(--pc, var(--panel-border)); border-radius: 3px;
  background: #101215; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5); color: inherit; font: inherit; display: block;
}
.seat-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.seat-avatar .seat-tank { position: absolute; right: -10px; bottom: -6px; width: 34px; }
.seat-avatar.mine { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.seat-avatar.mine:hover, .seat-avatar.mine:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0, 0, 0, 0.6); }
.seat-avatar-edit {
  position: absolute; left: -5px; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.seat-top { gap: 14px; }
.seat .seat-name { font-size: 14px; }
@media (max-width: 1100px) { .seat-avatar { width: 52px; height: 52px; } .seat-avatar .seat-tank { width: 28px; } }

/* the picker: all avatars as tiles, taken ones greyed out */
.av-picker { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(6, 7, 9, 0.72); }
.av-picker[hidden] { display: none; }
.av-panel {
  display: flex; flex-direction: column; width: min(760px, 100%); max-height: 100%; border: 1px solid #3a3530; border-radius: var(--radius);
  background: linear-gradient(180deg, #23211f, #17181a); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.av-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 14px; border-bottom: 1px solid #3a3530;
  font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em;
}
.av-close { width: 40px; height: 36px; }
.av-note { margin: 8px 14px 0; font-size: 12.5px; color: var(--muted); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 10px 14px 14px; overflow-y: auto; min-height: 0; }
.av-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 1px solid #3a3530; border-radius: 3px;
  background: #121315; color: var(--body); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.av-choice img { width: 72px; height: 72px; border-radius: 2px; display: block; }
.av-choice span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.av-choice:hover:not(:disabled), .av-choice:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.av-choice.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(242, 169, 59, 0.35); color: var(--accent); }
.av-choice:disabled { cursor: not-allowed; opacity: 0.4; }
.av-choice:disabled img { filter: grayscale(1) brightness(0.6); }
@media (max-width: 520px) { .av-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } .av-choice img { width: 56px; height: 56px; } }

/* ---------- asking to join a private game ---------- */
/* in the list of open games: a private game is blue with a key and an outlined "Ask to join" (a public one has a solid "Join") */
.game-list li.private button { border-left-color: var(--blue); background: rgba(134, 168, 219, 0.06); }
.game-list li.private button:hover, .game-list li.private button:focus-visible { border-color: var(--blue); background: rgba(134, 168, 219, 0.14); }
.mode-tag { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 9px; border: 1px solid var(--accent); color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; flex: none; }
.game-title .mode-tag { margin: 0 0 0 2px; }
.private-tag { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 9px; border: 1px solid var(--blue); color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 1px; }
.game-join .join-go.ask { white-space: nowrap; background: transparent; border: 1px solid var(--blue); color: var(--blue); padding: 2px 9px; }
/* the waiting screen: nothing of the game is shown, just who was asked (no blur: a blur costs a lot on computers with no graphics card) */
#screen-request { background: rgba(10, 12, 16, 0.72); backdrop-filter: none; }
.request-panel { width: min(440px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(24, 26, 31, 0.96); }
.request-panel h2 { margin: 4px 0 0; }
.request-panel p { margin: 0; }
.request-game { color: var(--body); overflow-wrap: anywhere; }
.request-actions { display: flex; gap: 8px; margin-top: 10px; }
.request-dots i { display: inline-block; width: 10px; height: 10px; margin: 0 4px; border-radius: 50%; background: var(--blue); animation: request-pulse 1.3s ease-in-out infinite; }
.request-dots i:nth-child(2) { animation-delay: 0.2s; }
.request-dots i:nth-child(3) { animation-delay: 0.4s; }
.request-dots[hidden] { display: none; }
@keyframes request-pulse { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
#screen-request.ended .request-panel h2 { color: var(--accent); }
/* the host's notices in the lobby: one card per person, stacked */
.join-requests { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.join-requests[hidden] { display: none; }
.join-request { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 10px 10px; overflow: hidden; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--panel-border); border-left: 3px solid var(--blue); }
.join-request.known { border-left-color: var(--good); }
.join-request.answered { opacity: 0.45; pointer-events: none; }
.jr-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 160px; }
.jr-face { flex: none; width: 36px; height: 36px; border-radius: 2px; object-fit: cover; background: rgba(255, 255, 255, 0.06); }
.jr-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jr-name { font-weight: 700; overflow: hidden; white-space: nowrap; }
.jr-asks { font-weight: 400; color: var(--muted); font-size: 12px; }
.jr-mark { align-self: flex-start; font-size: 11px; padding: 1px 8px; border-radius: 9px; }
.jr-mark.known { background: rgba(148, 196, 125, 0.16); color: var(--good); }
.jr-mark.new { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.jr-buttons { display: flex; gap: 6px; flex: none; }
/* the time left to answer: a thin line that runs out */
.jr-time { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--blue); transform-origin: left; animation: jr-run var(--left, 60000ms) linear forwards; }
@keyframes jr-run { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .request-dots i, .jr-time { animation: none; } }
@media (max-width: 560px) {
  /* on a phone the "Private" tag gets its own line, so the game's name is not squeezed out */
  .private-tag { display: block; width: fit-content; margin: 0 0 3px; }
  /* ... and "Ask to join" goes under the name instead of beside it (it is wider than "Join") */
  .game-list li.private button { flex-wrap: wrap; row-gap: 8px; }
  .game-list li.private .game-main { flex-basis: 100%; }
  .game-list li.private .game-join { flex-direction: row-reverse; justify-content: space-between; align-items: center; width: 100%; }
}

/* ---------- Player windows (0.51.0): grim and gritty, with the avatars ---------- */
/* Dark charcoal metal with rivets in the corners and faint scratches, amber accents. Each player row has a strip and an avatar frame
   in the tank colour; the player whose turn it is glows amber; a destroyed player's avatar turns grey and dark. Everything is still
   pictures made by CSS (no animation), so the windows cost nothing while the game runs.
   Two sizes: the usual one (body.cards-small: nobody has a webcam on) with the avatar next to the name, and the webcam one with a
   picture area on top (the video when the camera is on, the avatars when it is off). */
#side { --side-w: 228px; --av: 52px; --nm: 14px; --st: 11.5px; width: var(--side-w); display: flex; flex-direction: column; gap: 10px; min-height: 0; }
body:not(.cards-small) #side { --side-w: 236px; }
#players { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; flex: 0 1 auto; }
.pcard, .battle-log {
  position: relative; flex: none; overflow: hidden; border: 1px solid #3a362f; border-radius: 3px; transition: box-shadow 0.25s, border-color 0.25s;
  background:
    radial-gradient(circle at 6px 6px, #77705f 0 1.3px, #101010 1.9px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 6px) 6px, #77705f 0 1.3px, #101010 1.9px, transparent 2.6px),
    radial-gradient(circle at 6px calc(100% - 6px), #77705f 0 1.3px, #101010 1.9px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #77705f 0 1.3px, #101010 1.9px, transparent 2.6px),
    repeating-linear-gradient(112deg, transparent 0 37px, rgba(255, 255, 255, 0.035) 37px 38px, transparent 38px 89px),
    repeating-linear-gradient(-24deg, transparent 0 53px, rgba(0, 0, 0, 0.35) 53px 54px, transparent 54px 117px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2b2a27, #1b1b1b 55%, #141415);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -2px 0 rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.45);
}
.pcard.turn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 20px 2px rgba(242, 169, 59, 0.45), inset 0 0 18px rgba(242, 169, 59, 0.12); }
.pcard.dead { opacity: 0.8; }
/* whose turn: the active card glows amber and pulses; the others dim a little (same size and place) */
#players:has(.pcard.turn) .pcard:not(.turn) { opacity: 0.7; }
.pcard { transition: box-shadow 0.25s, border-color 0.25s, opacity 0.25s; }
/* the pulse is a glowing rim inside the card whose opacity changes (cheap: no repainting); the outer glow stays still */
.pcard.turn::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 22px 4px rgba(242, 169, 59, 0.6); will-change: opacity; animation: card-glow 1.5s ease-in-out infinite alternate; }
@keyframes card-glow { from { opacity: 0.15; } to { opacity: 1; } }
.reduce-flash .pcard.turn::after { animation: none; opacity: 0.6; }
/* Low graphics: no pulse, but the active card keeps its amber rim and glow, standing still */
.gfx-low .pcard.turn::after { animation: none; opacity: 1; will-change: auto; }
/* talking (webcams and voice): a soft glow in the player's colour */
.pcard.speaking { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 70%, transparent), 0 0 16px 1px color-mix(in srgb, var(--pc) 55%, transparent); }
.pcard.turn.speaking { box-shadow: 0 0 0 2px var(--accent), 0 0 22px 2px rgba(242, 169, 59, 0.6); }

/* one row per player */
.pcard .info { padding: 0; }
.pcard .prow {
  position: relative; display: grid; grid-template-columns: var(--av) minmax(0, 1fr); column-gap: 10px; align-items: center;
  padding: 8px 10px 8px 13px; border-top: 1px solid rgba(0, 0, 0, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pcard .prow:first-child { border-top: none; box-shadow: none; }
.pcard .prow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--rc); box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.45), 1px 0 0 rgba(0, 0, 0, 0.6); }
.pcard .prow.turn { background: linear-gradient(90deg, rgba(242, 169, 59, 0.16), transparent 75%); }
.pcard .avatar { grid-row: 1 / span 4; align-self: start; width: var(--av); height: var(--av); }
.av-img { display: block; width: 100%; height: 100%; object-fit: cover; box-sizing: border-box; border: 2px solid var(--rc); border-radius: 3px; background: #0e0e0f; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, 0.6); }
.av-none { background: var(--rc); }
.pcard .prow.turn .av-img { box-shadow: 0 0 0 1px #000, 0 0 10px rgba(242, 169, 59, 0.7); }
.pcard .prow.dead .av-img, .pcard .vav.dead .av-img { filter: grayscale(1) brightness(0.38) contrast(1.15); }
.pcard .name {
  grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0;
  font-weight: 700; font-size: var(--nm); line-height: 1.2; color: #efe7d8; text-shadow: 0 1px 0 #000;
}
.pcard .name .nm { overflow-wrap: break-word; min-width: 0; }   /* (the full name, on two lines when it has to be) */
.pcard .name .hint { font-weight: 400; font-size: 0.82em; }
.pcard .prow.dead .name { color: var(--muted); }
.pcard .rbadge { grid-column: 2; margin-top: 2px; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--accent-dim); letter-spacing: 0.02em; }
.pcard .rbadge.bot { color: var(--accent); }
.pcard .hpbar { grid-column: 2; height: 6px; margin-top: 5px; border-radius: 1px; background: #0b0b0c; border: 1px solid #2d2a25; box-shadow: inset 0 1px 2px #000; }
.pcard .stats { grid-column: 2; display: flex; justify-content: space-between; gap: 6px; margin-top: 3px; font-family: var(--mono); font-size: var(--st); font-variant-numeric: tabular-nums; color: var(--body); }
.pcard .stats .pmoney { color: var(--accent); }
.pcard .prow.dead .stats { color: var(--dim); }
.pcard .ptools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px 6px 13px; border-top: 1px solid #2d2a25; }
.pcard .ptools-ask { flex: 1 1 100%; font-family: var(--mono); font-size: 11px; color: var(--body); overflow-wrap: anywhere; }
.ptool { padding: 2px 7px; min-height: 22px; font-family: var(--mono); font-size: 10.5px; border-radius: 3px; border: 1px solid var(--panel-border); background: rgba(20, 22, 26, 0.85); color: var(--text); cursor: pointer; }
.ptool:hover { border-color: var(--accent); color: var(--accent); }
.ptool.danger:hover { border-color: var(--bad); color: var(--bad); }
.ptool.on, .ptool[aria-pressed="true"] { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 60%, transparent); }
.touch .pt-label { display: none; }   /* (phone cards are narrow: just the icons) */
.pcard .shared-note { font-family: var(--mono); font-size: 10px; color: var(--accent-dim); padding: 5px 10px 0 13px; }
.pcard .shared-note::before { content: "[ "; color: var(--dim); }
.pcard .shared-note::after { content: " ]"; color: var(--dim); }

/* the picture area: only while somebody's webcam is on. The video lies on top; the avatars show while the camera is off. */
.pcard .video {
  position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--pc) 14%, #2a2723), #111112 78%);
  border-bottom: 1px solid #000; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.pcard .vavatars { display: flex; gap: 6px; height: 82%; }
.pcard.shared .vavatars { height: 58%; }
.pcard .vav { display: block; height: 100%; aspect-ratio: 1; }
body:not(.cards-small) .pcard .prow { grid-template-columns: minmax(0, 1fr); }
body:not(.cards-small) .pcard .avatar { display: none; }
body:not(.cards-small) .pcard .name, body:not(.cards-small) .pcard .rbadge, body:not(.cards-small) .pcard .hpbar, body:not(.cards-small) .pcard .stats { grid-column: 1; }
/* the picture area's height comes from the room the column has (fitCards in ui.js): all the players fit without scrolling. The tile is
   in the middle of the area, at most twice as wide as it is tall. */
body:not(.cards-small) .pcard .video { height: var(--tile-h, auto); width: 100%; min-height: 0; }
body:not(.cards-small) .pcard .video > .media-box { left: 50%; right: auto; width: var(--tile-w, 100%); transform: translateX(-50%); }
body:not(.cards-small) .pcard .vavatars { height: min(82%, calc(var(--tile-w, 100%) * 0.5)); }
body:not(.cards-small) .pcard.shared .vavatars { height: min(58%, calc(var(--tile-w, 100%) * 0.5)); }
/* the compact rows (when the picture would get too small): name and LikkAI level on one line */
body.cards-tight:not(.cards-small) .pcard .prow { grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; padding-top: 4px; padding-bottom: 4px; }
body.cards-tight:not(.cards-small) .pcard .name { grid-column: 1; grid-row: 1; }
body.cards-tight:not(.cards-small) .pcard .rbadge { grid-column: 2; grid-row: 1; margin: 0; }
body.cards-tight:not(.cards-small) .pcard .hpbar, body.cards-tight:not(.cards-small) .pcard .stats { grid-column: 1 / -1; }
body.cards-tight:not(.cards-small) .pcard .hpbar { margin-top: 3px; }
body.cards-tight:not(.cards-small) .pcard .stats { margin-top: 1px; }
body.cards-tight:not(.cards-small) .pcard .shared-note { padding-top: 2px; }
/* the usual size: no picture area (in a closed game a thin strip stays with the microphone and camera buttons) */
body.cards-small .pcard .video { aspect-ratio: auto; height: 30px; background: rgba(0, 0, 0, 0.35); border-bottom: 1px solid #000; }
body.cards-small .pcard .vavatars, body.cards-small .media-box .mb-muted { display: none; }

body.cards-small .pcard .video:not(:has(.media-box)) { display: none; }   /* (a computer player has no webcam: no strip) */

/* scoreboard and final standings */
.sb-av { width: 30px; height: 30px; flex: none; border-width: 2px; }
.fs-av { width: 44px; height: 44px; flex: none; }
.podium li.first .fs-av { width: 56px; height: 56px; box-shadow: 0 0 0 1px #000, 0 0 14px rgba(242, 169, 59, 0.55); }

/* big screens: everything a bit bigger */
@media (min-width: 1700px) { #side { --side-w: 280px; --av: 66px; --nm: 16px; --st: 12.5px; } body:not(.cards-small) #side { --side-w: 300px; } }
@media (min-width: 2200px) { #side { --side-w: 340px; --av: 84px; --nm: 18px; --st: 14px; } body:not(.cards-small) #side { --side-w: 360px; } .pcard .rbadge { font-size: 12px; } .pcard .hpbar { height: 8px; } }
/* smaller windows */
@media (max-width: 980px) { #side, body:not(.cards-small) #side { --side-w: 196px; --av: 42px; --nm: 13px; --st: 11px; } }
@media (max-width: 640px), (max-width: 980px) and (max-aspect-ratio: 5/4) {
  #side, body:not(.cards-small) #side { width: 100%; }
  .pcard { flex: 1 1 0; min-width: 150px; }
}
@media (max-width: 860px) {
  body.touch #side, body.touch:not(.cards-small) #side { --side-w: 118px; --av: 30px; --nm: 11px; width: var(--side-w); padding-left: 4px; }
  body.touch #players { gap: 4px; }
  body.touch .pcard .prow { column-gap: 5px; padding: 4px 5px 4px 8px; }
  body.touch .pcard .prow::before { width: 3px; }
  body.touch .pcard .avatar { grid-row: 1 / span 2; }
  body.touch .pcard .rbadge, body.touch .pcard .stats, body.touch .pcard .name .hint, body.touch .pcard .shared-note { display: none; }
  body.touch .pcard .hpbar { height: 4px; margin-top: 3px; }
  body.touch.cards-small .pcard .video { height: 28px; }
  body.touch.side-collapsed #side { width: 38px; }
}
/* "Reduce flashing": the low-hp screen does not flicker, the lamp stays on and the static does not dance */
body.reduce-flash .cat-cam .cc-glass > *, body.reduce-flash .cat-cam .cc-static { animation: none !important; }
body.reduce-flash .cat-cam[data-state="critical"] .cc-lamp::after { animation: none; opacity: 1; }
body.reduce-flash .cat-cam[data-state="dying"] .cc-static { opacity: 0.6; }

/* ==================== The grim look (0.53.0) ====================
   Menus and screens around the battlefield (start screen, lobby, shop, scoreboard, final standings, top bar and control bar):
   darker charcoal, scratched and riveted metal panels, amber warning lamps, a faint vignette at the screen edges, drifting
   ash and embers on the start screen, and a battle-worn stencil font (Black Ops One, SIL Open Font License) for headings.
   The levels themselves are drawn on the canvas and are not touched. Everything here is still CSS pictures with no animation;
   the embers are drawn with the start screen's demo match (js/embers.js). */
@font-face { font-family: "Black Ops One"; font-weight: 400; font-display: swap; src: url(fonts/black-ops-one-latin-400-normal.woff2) format("woff2"); }
:root {
  --bg: #101011;
  --panel: #1a1918;
  --panel-2: #21201e;
  --panel-border: #39352e;
  --bracket: #8c8373;
  --rugged: "Black Ops One", Impact, "Arial Black", var(--font);
  /* rivets in the four corners, faint scratches, brushed metal */
  --rivets:
    radial-gradient(circle at 8px 8px, #7d7563 0 1.4px, #0d0d0d 2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 8px) 8px, #7d7563 0 1.4px, #0d0d0d 2px, transparent 2.8px),
    radial-gradient(circle at 8px calc(100% - 8px), #7d7563 0 1.4px, #0d0d0d 2px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #7d7563 0 1.4px, #0d0d0d 2px, transparent 2.8px);
  --scratches:
    repeating-linear-gradient(112deg, transparent 0 41px, rgba(255, 255, 255, 0.03) 41px 42px, transparent 42px 97px),
    repeating-linear-gradient(-21deg, transparent 0 59px, rgba(0, 0, 0, 0.32) 59px 60px, transparent 60px 131px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.011) 0 1px, transparent 1px 3px);
  --plate: linear-gradient(180deg, #262523, #1a1a19 55%, #141414);
  --plate-see: linear-gradient(180deg, rgba(38, 37, 35, 0.9), rgba(24, 24, 23, 0.9) 55%, rgba(18, 18, 18, 0.92));
  /* paint worn off at the edges of the letters (a fixed noise picture used as a mask) */
  --worn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -14 0 0 0 11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body { background: var(--bg); }

/* rugged headings (body text stays IBM Plex Sans, easy to read) */
.panel h2:not(.label), .room-code, .quick-title, .fire-btn, .btn.primary, .podium .rank, .sd-ready-btn, .lobby-panel .start-btn {
  font-family: var(--rugged) !important; font-weight: 400 !important;
}
.room-code, .title {
  -webkit-mask-image: var(--worn); mask-image: var(--worn); -webkit-mask-size: 180px; mask-size: 180px;
}
.panel h2:not(.label) { letter-spacing: 0.04em; color: #ece2cf; text-shadow: 0 2px 0 #000; }
.title { text-shadow: 0 3px 0 #000, 0 0 26px rgba(255, 150, 40, 0.25); }
.btn.primary, .fire-btn { letter-spacing: 0.12em; }
.quick-sub { font-family: var(--font) !important; font-weight: 500 !important; letter-spacing: 0.02em !important; }

/* section labels: an amber warning lamp instead of the [ brackets ] */
.label::before, .field-label::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; vertical-align: middle; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffe2a0, #f2a93b 45%, #9a5a10);
  box-shadow: 0 0 6px 1px rgba(242, 169, 59, 0.55), 0 0 0 1px #000;
}
.field-label::before { width: 5px; height: 5px; margin-right: 6px; box-shadow: 0 0 4px rgba(242, 169, 59, 0.45), 0 0 0 1px #000; }
.label::after, .field-label::after { content: none; }
.label { font-family: var(--rugged); font-weight: 400; letter-spacing: 0.1em; font-size: 13px; color: #f0b552; }

/* metal panels: rivets, scratches, a hazard stripe at the top left and a dark lip at the bottom */
.panel {
  background: var(--rivets), var(--scratches), var(--plate);
  border: 1px solid #3a362f; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -2px 0 rgba(0, 0, 0, 0.55), 0 18px 50px rgba(0, 0, 0, 0.6);
}
#screen-menu .panel, .whatsnew { background: var(--rivets), var(--scratches), var(--plate-see); }
.panel::before {
  top: -1px; left: 18px; width: 56px; height: 4px; border: 0; border-radius: 0 0 2px 2px;
  background: repeating-linear-gradient(-45deg, #e09a2f 0 5px, #151413 5px 10px); opacity: 0.85;
}
.panel::after { border-color: #0b0b0b; }

/* buttons: dark metal plates; the main ones amber, like a warning plate */
.btn, .icon-btn, .ctl-btn, .preset-pick button, .md-choice {
  background: linear-gradient(180deg, #2b2a27, #1b1a19); border-color: #433e35;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.6);
}
.btn:hover, .icon-btn:hover, .ctl-btn:hover { border-color: var(--accent); }
.btn.primary, .preset-pick button.on, .fire-btn {
  background: linear-gradient(180deg, #f6b549, #e49a2c 60%, #c67f1c) !important; border-color: #8a5a14 !important; color: #1a1006 !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.55), inset 0 -2px 0 rgba(90, 50, 0, 0.45), 0 0 14px rgba(242, 169, 59, 0.22), 0 2px 4px rgba(0, 0, 0, 0.7);
  text-shadow: 0 1px 0 rgba(255, 220, 160, 0.4);
}
.btn.primary:disabled { filter: grayscale(0.5) brightness(0.55); }
input:not([type=range]), select { background: #0c0c0d; border-color: #38342d; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); }

/* overlays: darker, and a faint vignette at the screen edges on the menus and between rounds (never over a round being played) */
.overlay { background: rgba(8, 8, 9, 0.62); }
#screen-menu { background: radial-gradient(ellipse at 50% 40%, rgba(12, 11, 10, 0.35), rgba(6, 6, 6, 0.72)); }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
}
body:not(.in-game)::after, body.in-game:has(#screen-shop:not([hidden]), #screen-round:not([hidden]), #screen-final:not([hidden]))::after { opacity: 1; }

/* top bar and control bar: dark riveted metal strips with a thin amber line */
#topbar, #controls { background: var(--scratches), linear-gradient(180deg, #1b1a19, #111112); }
#topbar { border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(242, 169, 59, 0.16), 0 3px 10px rgba(0, 0, 0, 0.5); }
#controls { border-top: 1px solid #000; box-shadow: 0 -1px 0 rgba(242, 169, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.hud-label, .ctl-label { color: #e0b46c; }   /* (about 9:1 against the bar; 4.5:1 is the least that reads well) */
.weapon-box { background: #0d0d0e; border-color: #3a362f; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); }

/* start screen */
.tagline { color: #ddd3c1; }
.whatsnew { border-color: #3a362f; }
.wn-label { font-family: var(--rugged); font-weight: 400; color: #f0b552; }
.wn-label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; vertical-align: middle; border-radius: 50%; background: #f2a93b; box-shadow: 0 0 6px 1px rgba(242, 169, 59, 0.55); }
/* (the drifting ash and embers are drawn onto the start screen's battlefield picture: js/embers.js) */

/* lobby */
.room-code { color: #f2a93b; text-shadow: 0 0 18px rgba(242, 169, 59, 0.3), 0 2px 0 #000; letter-spacing: 0.18em; }
.seat { background: var(--scratches), linear-gradient(180deg, #252422, #1a1918); border-color: #3a362f; }
.seat.empty { background: rgba(0, 0, 0, 0.2); }

/* shop */
.shop-item { background: var(--scratches), linear-gradient(180deg, #23221f, #191817); border-color: #35312b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.shop-item:hover { border-color: #5a5244; }
.money { color: #a8cf86; text-shadow: 0 0 10px rgba(148, 196, 125, 0.25); }

/* scoreboard and final standings */
.score-table th { color: #c28d40; }
.score-table td { border-top-color: #2c2924; }
.podium li { background: var(--scratches), linear-gradient(180deg, #252422, #1a1918); border-color: #3a362f; }
.podium li.first { background: linear-gradient(90deg, rgba(242, 169, 59, 0.16), transparent 70%), var(--scratches), linear-gradient(180deg, #2a2722, #1b1a18); }
.podium .rank { font-size: 24px; }
/* the player column made narrower to let the battlefield fill the height (fitStage in main.js): the normal text size */
body.side-small #side { --av: 42px; --nm: 13px; --st: 11px; }
body.side-tight #side { --av: 52px; --nm: 14px; --st: 11.5px; }
body.side-mid #side { --av: 66px; --nm: 16px; --st: 12.5px; }
/* the player windows a little more compact (less padding), to make room for the cat screen under them (catmascot.js, CatCam.column) */
body.side-compact.cards-small #players { gap: 5px; }
body.side-compact.cards-small .pcard .prow { padding-top: 4px; padding-bottom: 4px; }
body.side-compact.cards-small .pcard .rbadge { margin-top: 0; }
body.side-compact.cards-small .pcard .hpbar { margin-top: 3px; }
body.side-compact.cards-small .pcard .stats { margin-top: 1px; }
body.side-compact.cards-small .pcard .video { height: 26px; }
body.side-compact-2.cards-small .pcard .rbadge.bot { display: none; }
/* Compact webcam cards (computers and tablets, over 860 px wide): one row per player, the picture (webcam video or avatar, cropped to
   fill it, no empty bands) on the left and the name, health and money beside it. The row's height comes from the text, so all the
   players fit with the reaction bar under them without any calculation, and the column can be narrow: the battlefield gets the room. */
@media (min-width: 861px) {
  #side { --pic-w: 104px; --pic-h: 74px; }
  body:not(.cards-small) #side { --side-w: 226px; }
  body.side-small #side { --pic-w: 84px; --pic-h: 62px; }
  body.side-tight #side { --pic-w: 92px; --pic-h: 66px; }
  body:not(.cards-small) .pcard { display: grid; grid-template-columns: var(--pic-w) minmax(0, 1fr); }
  body:not(.cards-small) #players { gap: 6px; }
  body:not(.cards-small) .pcard .video {
    grid-column: 1; grid-row: 1 / span 3; aspect-ratio: auto; height: auto; width: auto; min-height: var(--pic-h);
    border-bottom: 0; border-right: 1px solid #000; box-shadow: none; overflow: hidden;
  }
  body:not(.cards-small) .pcard .shared-note { grid-column: 2; grid-row: 1; padding: 3px 8px 0 10px; }
  body:not(.cards-small) .pcard .info { grid-column: 2; grid-row: 2; min-width: 0; }
  body:not(.cards-small) .pcard .ptools { grid-column: 1 / -1; grid-row: 4; padding-left: 8px; }
  body:not(.cards-small) .pcard .video > .media-box { left: 0; right: 0; width: auto; transform: none; }
  body:not(.cards-small) .pcard .vavatars, body:not(.cards-small) .pcard.shared .vavatars { position: absolute; inset: 0; height: auto; flex-direction: column; gap: 1px; }
  body:not(.cards-small) .pcard .vav { display: block; flex: 1 1 0; min-height: 0; width: 100%; height: auto; aspect-ratio: auto; }
  body:not(.cards-small) .pcard .vav .av-img { border: 0; border-radius: 0; box-shadow: none; object-position: 50% 30%; }
  body:not(.cards-small) .pcard .prow { padding: 5px 8px 5px 11px; }
  body:not(.cards-small) .pcard .prow::before { width: 4px; }
  body:not(.cards-small) .pcard .rbadge { margin-top: 1px; }
  body:not(.cards-small) .pcard .hpbar { margin-top: 4px; }
  body:not(.cards-small) .pcard .mb-controls { left: 3px; right: 3px; bottom: 3px; gap: 3px; }
  body:not(.cards-small) .pcard .mb-btn { width: 24px; height: 21px; background: rgba(14, 14, 15, 0.9); }
  body:not(.cards-small) .pcard .mb-btn svg { width: 13px; height: 13px; }
  body:not(.cards-small) .pcard .mb-muted { top: 3px; left: 3px; width: 20px; height: 20px; }
  body.in-game:not(.touch) #stage { padding-top: 6px; padding-bottom: 6px; }   /* (the battlefield gets the height) */
}
@media (min-width: 1700px) and (min-width: 861px) { #side { --pic-w: 128px; --pic-h: 90px; } body:not(.cards-small) #side { --side-w: 272px; } }
@media (min-width: 2200px) { #side { --pic-w: 156px; --pic-h: 110px; } body:not(.cards-small) #side { --side-w: 330px; } }
@media (min-width: 861px) and (max-width: 980px) { body:not(.cards-small) #side { --side-w: 200px; } }
/* "Turn your phone sideways" */
.rotate-msg b { font-family: var(--rugged); font-weight: 400; letter-spacing: 0.04em; color: #f0b552; }
/* big screens: the menus grow with the screen instead of sitting small in the middle (the battlefield behind fills it anyway) */
@media (min-width: 1800px) and (min-height: 1000px) { .menu-grid, .lobby-panel, .score-panel, .shop-panel { zoom: 1.2; } #topbar { zoom: 1.1; } }
@media (min-width: 2300px) and (min-height: 1250px) { .menu-grid, .lobby-panel, .score-panel, .shop-panel { zoom: 1.4; } #topbar, #controls { zoom: 1.25; } }

/* ==================== Atmosphere in the leftover space (0.53.2) ====================
   During a game on a computer, the empty room around the battlefield and the player column (bands above and below on 4:3
   windows, under the reaction bar on wide ones) shows faint ash and embers hanging in the dark, a dim glow of distant fires low
   down and the silhouettes of burnt hills, ruins and dead trees along the bottom edge and just above the control bar (its
   top comes from fitStage in main.js as --bar-top). One fixed layer behind everything: the
   battlefield, the panels, the top bar and the control bar cover it, so it only shows where nothing else is. Still pictures,
   no animation, nothing to click: drawn once, it costs nothing while the game runs. */
body.in-game:not(.touch)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='170' viewBox='0 0 1200 170'%3E%3Cpath d='M0 170 L0 76 L86 86 L171 56 L257 91 L343 63 L429 73 L514 92 L600 65 L686 93 L771 69 L857 91 L943 90 L1029 70 L1114 45 L1200 76 L1200 170Z' fill='%231b1916'/%3E%3Cpath d='M0 170 L0 130 L60 112 L120 97 L180 114 L240 122 L300 96 L360 138 L420 101 L480 127 L540 134 L600 135 L660 126 L720 103 L780 132 L840 114 L900 111 L960 123 L1020 115 L1080 137 L1140 137 L1200 130 L1200 170ZM180 147.525599624545l1-34-9-12 10 8 1-10 2 9 7-7-6 12-2 30zM610 143.98629227937164l1-34-9-12 10 8 1-10 2 9 7-7-6 12-2 30zM955 142.39806038527507l1-34-9-12 10 8 1-10 2 9 7-7-6 12-2 30zM760 150v-38h8v-6h6v10h7v-14h6v20h9v28z' fill='%23221f1b'/%3E%3C/svg%3E") repeat-x left bottom / 1200px 170px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='170' viewBox='0 0 1200 170'%3E%3Cpath d='M0 170 L0 76 L86 86 L171 56 L257 91 L343 63 L429 73 L514 92 L600 65 L686 93 L771 69 L857 91 L943 90 L1029 70 L1114 45 L1200 76 L1200 170Z' fill='%231b1916'/%3E%3Cpath d='M0 170 L0 130 L60 112 L120 97 L180 114 L240 122 L300 96 L360 138 L420 101 L480 127 L540 134 L600 135 L660 126 L720 103 L780 132 L840 114 L900 111 L960 123 L1020 115 L1080 137 L1140 137 L1200 130 L1200 170ZM180 147.525599624545l1-34-9-12 10 8 1-10 2 9 7-7-6 12-2 30zM610 143.98629227937164l1-34-9-12 10 8 1-10 2 9 7-7-6 12-2 30zM955 142.39806038527507l1-34-9-12 10 8 1-10 2 9 7-7-6 12-2 30zM760 150v-38h8v-6h6v10h7v-14h6v20h9v28z' fill='%23221f1b'/%3E%3C/svg%3E") repeat-x -430px calc(var(--bar-top, 100vh) - 142px) / 1000px 142px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='300'%3E%3Ccircle cx='210' cy='136' r='1.0' fill='%23e8892c' opacity='0.41'/%3E%3Ccircle cx='250' cy='75' r='1.0' fill='%238f877a' opacity='0.19'/%3E%3Ccircle cx='312' cy='217' r='0.9' fill='%238f877a' opacity='0.26'/%3E%3Ccircle cx='46' cy='126' r='1.3' fill='%23e8892c' opacity='0.28'/%3E%3Ccircle cx='176' cy='15' r='1.1' fill='%238f877a' opacity='0.23'/%3E%3Ccircle cx='206' cy='260' r='0.9' fill='%238f877a' opacity='0.22'/%3E%3Ccircle cx='213' cy='173' r='1.1' fill='%23e8892c' opacity='0.42'/%3E%3Ccircle cx='337' cy='142' r='1.1' fill='%238f877a' opacity='0.13'/%3E%3Ccircle cx='251' cy='193' r='1.3' fill='%238f877a' opacity='0.24'/%3E%3Ccircle cx='104' cy='117' r='1.2' fill='%23e8892c' opacity='0.25'/%3E%3Ccircle cx='167' cy='53' r='0.8' fill='%238f877a' opacity='0.13'/%3E%3Ccircle cx='274' cy='42' r='0.8' fill='%238f877a' opacity='0.17'/%3E%3Ccircle cx='311' cy='28' r='1.1' fill='%23e8892c' opacity='0.36'/%3E%3Ccircle cx='315' cy='243' r='1.2' fill='%238f877a' opacity='0.16'/%3E%3Ccircle cx='150' cy='109' r='1.2' fill='%238f877a' opacity='0.25'/%3E%3Ccircle cx='57' cy='55' r='1.0' fill='%23e8892c' opacity='0.30'/%3E%3C/svg%3E") 0 0 / 360px 300px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='300'%3E%3Ccircle cx='210' cy='136' r='1.0' fill='%23e8892c' opacity='0.41'/%3E%3Ccircle cx='250' cy='75' r='1.0' fill='%238f877a' opacity='0.19'/%3E%3Ccircle cx='312' cy='217' r='0.9' fill='%238f877a' opacity='0.26'/%3E%3Ccircle cx='46' cy='126' r='1.3' fill='%23e8892c' opacity='0.28'/%3E%3Ccircle cx='176' cy='15' r='1.1' fill='%238f877a' opacity='0.23'/%3E%3Ccircle cx='206' cy='260' r='0.9' fill='%238f877a' opacity='0.22'/%3E%3Ccircle cx='213' cy='173' r='1.1' fill='%23e8892c' opacity='0.42'/%3E%3Ccircle cx='337' cy='142' r='1.1' fill='%238f877a' opacity='0.13'/%3E%3Ccircle cx='251' cy='193' r='1.3' fill='%238f877a' opacity='0.24'/%3E%3Ccircle cx='104' cy='117' r='1.2' fill='%23e8892c' opacity='0.25'/%3E%3Ccircle cx='167' cy='53' r='0.8' fill='%238f877a' opacity='0.13'/%3E%3Ccircle cx='274' cy='42' r='0.8' fill='%238f877a' opacity='0.17'/%3E%3Ccircle cx='311' cy='28' r='1.1' fill='%23e8892c' opacity='0.36'/%3E%3Ccircle cx='315' cy='243' r='1.2' fill='%238f877a' opacity='0.16'/%3E%3Ccircle cx='150' cy='109' r='1.2' fill='%238f877a' opacity='0.25'/%3E%3Ccircle cx='57' cy='55' r='1.0' fill='%23e8892c' opacity='0.30'/%3E%3C/svg%3E") 170px 140px / 520px 433px,
    radial-gradient(ellipse 60% 38% at 22% 100%, rgba(150, 62, 18, 0.11), transparent 70%),
    radial-gradient(ellipse 55% 34% at 82% 100%, rgba(150, 62, 18, 0.09), transparent 70%),
    linear-gradient(180deg, #0e0e0f 0%, #121110 60%, #17130f 100%);
}


/* ---------- big banners over the battlefield: "YOUR TURN" and "ROUND 1 OF 3 - FIGHT!" ---------- */
.big-banner { position: absolute; left: 50%; top: 42%; z-index: 17; pointer-events: none; text-align: center; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--rugged); text-transform: uppercase; }
.big-banner[hidden] { display: none; }
.your-turn { font-size: clamp(34px, 8.5cqw, 150px); letter-spacing: 0.08em; color: #ffd27a; text-shadow: 0 0 24px rgba(242, 169, 59, 0.85), 0 0 60px rgba(242, 169, 59, 0.5), 0 5px 0 #4a2f08; animation: yt-show 1.7s ease-out both; }
@keyframes yt-show {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(0.97); }
  14% { transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
}
/* the round banner: a worn steel plate with rivets and scratches, the words stencilled on; it slams in, holds 1.5 s and fades */
.round-banner {
  padding: 0.35em 1.1em 0.4em; font-size: clamp(22px, 5.2cqw, 96px); color: #f1dfb8; letter-spacing: 0.06em;
  text-shadow: 0 0.06em 0 #000, 0 0 0.5em rgba(0, 0, 0, 0.7);
  border-top: 3px solid var(--accent); border-bottom: 3px solid var(--accent); border-radius: 3px;
  background:
    radial-gradient(circle at 10px 10px, #8a826e 0 2px, #0c0c0c 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 10px) 10px, #8a826e 0 2px, #0c0c0c 3px, transparent 4px),
    radial-gradient(circle at 10px calc(100% - 10px), #8a826e 0 2px, #0c0c0c 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #8a826e 0 2px, #0c0c0c 3px, transparent 4px),
    repeating-linear-gradient(112deg, transparent 0 41px, rgba(255, 255, 255, 0.05) 41px 42px, transparent 42px 97px),
    repeating-linear-gradient(-24deg, transparent 0 57px, rgba(0, 0, 0, 0.45) 57px 58px, transparent 58px 131px),
    linear-gradient(180deg, rgba(43, 42, 39, 0.94), rgba(20, 20, 21, 0.95));
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6), 0 14px 40px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(0, 0, 0, 0.6);
  animation: rb-show 2.2s ease-out both;
}
.rb-text { line-height: 1.1; }
.rb-sub { margin-top: 0.3em; font-family: var(--mono); font-size: clamp(11px, 1.3cqw, 20px); letter-spacing: 0.14em; color: var(--accent); text-shadow: 0 1px 3px #000; }
@keyframes rb-show {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(3.2) rotate(-5deg); }
  13% { opacity: 1; transform: translate(-50%, -50%) scale(0.95) rotate(-2deg); }
  17% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  84% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04) rotate(-2deg); }
}
.reduce-flash .your-turn, .reduce-flash .round-banner { animation-name: sd-fade; animation-duration: 0.4s; animation-fill-mode: both; }


/* ---------- battle log: in the player column, between the reaction row and the cat screen (placed by layoutBattleLog in ui.js) ---------- */
body:not(.touch) #side { position: relative; }
.battle-log { position: absolute; z-index: 1; display: flex; flex-direction: column; min-height: 0; padding: 7px 10px 0; overflow: hidden; }
.battle-log[hidden] { display: none; }
.bl-head { margin: 0 0 5px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dim); }
.bl-lines { list-style: none; margin: 0; padding: 0; min-height: 0; overflow: hidden; font-family: var(--font); font-size: clamp(11px, var(--st), 14px); line-height: 1.3; color: var(--body); -webkit-mask-image: linear-gradient(#000 calc(100% - 16px), transparent); mask-image: linear-gradient(#000 calc(100% - 16px), transparent); }
.bl-lines li { margin-bottom: 3px; overflow-wrap: anywhere; }
.bl-lines b { font-weight: 600; }
.bl-lines i { font-style: normal; font-family: var(--mono); color: var(--accent); white-space: nowrap; }
.bl-round { font-family: var(--mono); font-size: 0.92em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
body.touch .battle-log { display: none; }


/* ---------- control bar in groups: Danger | Aim | Move | Arsenal | FIRE (the controls keep their order; only a thin divider between groups) ---------- */
.ctl-sec { display: flex; align-items: center; gap: 10px; flex: none; position: relative; }
.ctl-sec + .ctl-sec { margin-left: 12px; }
.ctl-sec + .ctl-sec::before { content: ""; position: absolute; left: -12.5px; top: 50%; width: 1px; height: 30px; translate: 0 -50%; background: linear-gradient(180deg, transparent, #4b453b 25%, #4b453b 75%, transparent); box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5); }
.ctl-sec.row-start::before { visibility: hidden; }   /* (a group that begins a new row has no divider in front of it: set in fitControls) */
.cg-danger { margin-right: 12px; }   /* a little extra room after the Danger group */
.cg-fire { align-items: center; }
/* Self-destruct and Skip turn stay quiet until they are pointed at or focused (they still work exactly the same, hold-to-self-destruct included) */
.cg-danger .sd-btn:not(.holding):not(:hover):not(:focus-visible) { border-color: #3b3732; color: #8b857b; background: transparent; }
.cg-danger .sd-btn:not(.holding):hover, .cg-danger .sd-btn:not(.holding):focus-visible { color: var(--text); border-color: var(--accent-dim); }
.cg-danger .danger-btn:not(.holding):hover, .cg-danger .danger-btn:not(.holding):focus-visible { color: #ffb3a8; border-color: #ef6b5b; }
.fire-btn { box-shadow: 0 0 14px -2px rgba(242, 169, 59, 0.5); }
body.touch .ctl-sec { display: contents; margin: 0; }
body.touch .ctl-sec::before { display: none; }
/* Narrow windows (about 1024 wide): the bar must stay on ONE line, so everything gets a bit smaller, the sliders shorter (fitControls in main.js
   shrinks the bar a little more if that is still not enough) */
@media (max-width: 1099px) {
  body:not(.touch) #controls { flex-wrap: nowrap; justify-content: flex-start; gap: 0; padding-left: 10px; padding-right: 10px; }
  body:not(.touch) .ctl-sec { gap: 4px; }
  body:not(.touch) .ctl-sec + .ctl-sec { margin-left: 7px; }
  body:not(.touch) .ctl-sec + .ctl-sec::before { left: -7.5px; }
  body:not(.touch) .cg-danger { margin-right: 5px; }
  body:not(.touch) .ctl-group { gap: 3px; }
  body:not(.touch) .ctl-label { width: 40px; letter-spacing: 0.06em; }
  body:not(.touch) .ctl-btn { width: 26px; height: 26px; font-size: 13px; }
  body:not(.touch) #controls input[type=range] { width: 48px; }
  body:not(.touch) .ctl-value { min-width: 32px; }
  body:not(.touch) .fuel { min-width: 50px; gap: 3px; }
  body:not(.touch) .weapon-box { min-width: 100px; padding: 5px 7px; gap: 5px; }
  body:not(.touch) .sd-btn { font-size: 11px; padding: 4px 5px; letter-spacing: 0; }
  body:not(.touch) #controls .item-btn { padding: 6px 7px; }
  body:not(.touch) .fire-btn { padding: 10px 12px !important; }
}


/* ---------- hover labels on the icon-only buttons (js/tips.js turns their title into data-tip) ---------- */
.icon-btn[data-tip] { position: relative; }
[data-tip]:is(:hover, :focus-visible)::after {
  content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: max-content; max-width: 170px; padding: 4px 8px;
  border-radius: 3px; border: 1px solid var(--accent-dim); background: #0b0b0c; color: var(--text); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; pointer-events: none;
}
.icon-btn[aria-expanded="true"]::after { display: none; }   /* (the music panel opens right where the label would be) */
body:not(.cards-small) .media-box.own .mb-btn[data-tip]:is(:hover, :focus-visible)::after { top: auto; bottom: calc(100% + 6px); }   /* (a big video area: the label goes above the icons) */
.media-box.own .mb-btn { position: static; }

/* ---------- your own camera, microphone and settings icons: inside the top-right corner of your card, as small as before ---------- */
body.cards-small:not(.touch) .pcard .video:has(.media-box.own) {
  position: absolute; top: 4px; right: 5px; z-index: 3; width: auto; height: auto; aspect-ratio: auto; background: none; border: 0; overflow: visible;
}
body.cards-small:not(.touch) .pcard .video:has(.media-box.own) .media-box { position: static; }
body.cards-small:not(.touch) .pcard .video:has(.media-box.own) .mb-controls { position: static; opacity: 0.8; }
body.cards-small:not(.touch) .pcard .video:has(.media-box.own) .mb-muted { display: none; }
body.cards-small:not(.touch) .pcard:has(.media-box.own) .prow:first-child .name { padding-right: 94px; }   /* (room for the icons: a long name goes on a second line, as names always do) */
/* a narrow column has no room beside the icons: they get smaller and sit over the end of the name row, on a dark backing */
body.cards-small:not(.touch):is(.side-small, .side-tight) .pcard:has(.media-box.own) .prow:first-child .name { padding-right: 0; }
body.cards-small:not(.touch):is(.side-small, .side-tight) .pcard:has(.media-box.own) .prow:first-child .name .hint { display: none; }   /* (no room for "(you)") */
body.cards-small:not(.touch):is(.side-small, .side-tight) .pcard .video:has(.media-box.own) .mb-btn { width: 22px; height: 20px; background: rgba(14, 14, 15, 0.92); }
body.cards-small:not(.touch):is(.side-small, .side-tight) .pcard .video:has(.media-box.own) .mb-btn svg { width: 13px; height: 13px; }
body.cards-small:not(.touch):is(.side-small, .side-tight) .pcard .video:has(.media-box.own) .mb-controls { gap: 3px; opacity: 1; }

/* A small key hint on a button (the keyboard shortcut). Not shown on touch screens, where there is no keyboard. */
.key-hint { display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px solid var(--accent-dim); border-radius: 3px; font: 700 10px/14px var(--mono); color: var(--accent); background: transparent; vertical-align: 1px; }
body.touch .key-hint { display: none; }



/* The session tally: a small trophy and a number (lobby seats and the results screen) */
.wins { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1; padding: 1px 5px 1px 3px; border-radius: 9px; background: rgba(242, 169, 59, 0.14); white-space: nowrap; flex: none; }
.wins.none { color: var(--muted); background: transparent; opacity: 0.7; }
.wins svg { display: block; }
.score-foot .btn:not(.primary) { flex: none; }
/* Narrow phones: the line of numbers under a name on the results screen (it used to run over the name) */
@media (max-width: 560px) {
  .podium li { flex-wrap: wrap; row-gap: 4px; }
  .podium .who { min-width: 120px; flex: 1 1 0; flex-wrap: wrap; }
  .podium .detail { order: 5; flex: 1 0 100%; padding-left: 48px; }
}

/* ---------- room music (roommusic.js): the panel section, the playlist and the now-playing card ---------- */
.rm-now { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel-2); min-height: 56px; }
.rm-empty { color: var(--muted); font-size: 12px; }
.rm-art { flex: none; width: 46px; height: 46px; border-radius: 3px; overflow: hidden; background: #0f0f10; display: grid; place-items: center; }
.rm-art.small { width: 34px; height: 34px; }
.rm-art .rm-cover, .rm-art .rm-record { width: 100%; height: 100%; object-fit: cover; display: block; }
.rm-text { min-width: 0; flex: 1; }
.rm-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.rm-title { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.rm-artist, .rm-by, .rm-sub { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.rm-mark { color: var(--accent); }
.rm-host { display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: none; }
.rm-host[hidden] { display: none; }
.mv-now { display: flex; gap: 8px; align-items: stretch; }
.mv-now .rm-now { flex: 1; min-width: 0; }
.rm-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.rm-song { display: flex; gap: 8px; align-items: flex-start; padding: 6px; border: 1px solid transparent; border-radius: var(--radius); background: var(--panel-2); }
.rm-song.current { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.rm-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rm-btn { min-width: 28px; min-height: 26px; padding: 2px 7px; font: inherit; font-size: 11px; color: var(--text); background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); cursor: pointer; }
.rm-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rm-btn:disabled { opacity: 0.35; cursor: default; }
.rm-btn.danger { border-color: color-mix(in srgb, var(--bad) 60%, transparent); color: #ffb9b0; }
body.touch .rm-btn { min-width: 36px; min-height: 34px; }
.rm-ask { margin-top: 4px; font-size: 11.5px; color: var(--body); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rm-add { align-self: stretch; text-align: center; cursor: pointer; }
.rm-formats { margin: -2px 0 0; font-size: 11px; color: var(--dim); text-align: center; }
.rm-empty { padding: 6px 2px; }
.rm-empty-note { color: var(--accent); font-size: 16px; }
.rm-uploads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rm-up { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 11.5px; padding: 4px 6px; background: var(--panel-2); border-radius: var(--radius); }
.rm-up-name { flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--body); }
.rm-up progress { flex: 1; height: 6px; accent-color: var(--accent); }
.rm-up.bad { border: 1px solid color-mix(in srgb, var(--bad) 60%, transparent); }
.rm-up-err { flex: 1; color: #ffb9b0; }
.rm-up.done .rm-up-pct { color: var(--good); }
/* the card that shows for a few seconds when a song starts: the top left corner of the battlefield (placeFloat in roommusic.js) */
.rm-float { position: fixed; left: var(--rm-left, 10px); top: var(--rm-top, 56px); z-index: 45; width: 250px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.rm-float > [hidden] { display: none; }
.rm-card { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; background: rgba(20, 22, 26, 0.94); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(-6px); transition: opacity 0.35s, transform 0.35s; }
.rm-card.showing { opacity: 1; transform: none; }
.rm-card.leaving { opacity: 0; transform: translateY(-6px); }
.rm-card .rm-art { width: 52px; height: 52px; }
.rm-tap { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .rm-card { transition: none; transform: none; } }
@media (max-width: 600px), (orientation: landscape) and (max-height: 520px) {
  .rm-float { width: 200px; }
  .rm-card { padding: 5px 8px; gap: 8px; }
  .rm-card .rm-art { width: 38px; height: 38px; }
  .rm-card .rm-title { font-size: 12px; }
  .rm-card .rm-artist, .rm-card .rm-by { font-size: 10.5px; }
}

/* ---------- lobby: the Chat | Music tabs, the music view, the music overlay and the music line in the player column ---------- */
.lobby-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--panel-border); }
.lobby-tab { position: relative; padding: 5px 14px 6px; font: inherit; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; cursor: pointer; }
.lobby-tab[hidden] { display: none; }
.lobby-tab[aria-selected="true"] { color: var(--accent); background: var(--panel-2); border-color: var(--panel-border); }
.lobby-tab:hover { color: var(--text); }
.lobby-tabs.single .lobby-tab { cursor: default; color: var(--accent); }
.tab-dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent); }
.tab-dot[hidden] { display: none; }
.lobby-chat { overflow: hidden; }
.lobby-pane { display: flex; flex-direction: column; gap: 4px; min-height: 0; flex: 1 1 0; }
.lobby-pane[hidden] { display: none; }
#pane-music { overflow-y: auto; overscroll-behavior: contain; padding-top: 6px; }
.music-view { display: flex; flex-direction: column; gap: 8px; }
.mv-foot { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px 0 2px; background: var(--panel); }
#pane-music .mv-foot { background: var(--panel); }
.music-view[hidden] { display: none; }
.mv-sec { display: flex; flex-direction: column; gap: 6px; }
.mv-sec[hidden] { display: none; }
.mv-head { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.music-overlay.top-pop.panel { position: fixed; right: auto; z-index: 70; width: 320px; padding: 12px 14px; }
.mo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mo-head .pop-title { margin: 0; }
.mo-body { display: flex; flex-direction: column; }
.side-music { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; background: var(--panel-2); border: 1px solid var(--panel-border); border-radius: var(--radius); font-size: 12px; color: var(--body); }
.side-music[hidden] { display: none; }
.side-music .sm-note { color: var(--dim); }
.side-music.playing .sm-note { color: var(--accent); }
.side-music .sm-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.side-music .rm-btn { flex: none; }
body.touch .side-music { display: none; }
.music-view .rm-list { max-height: none; overflow: visible; }
@media (max-width: 860px), (max-height: 520px) {
  .lobby-chat { min-height: 0; overflow: visible; }
  .lobby-pane { flex: none; }
  #pane-music { overflow: visible; }
  .mv-foot { position: static; }
}

/* "Show in games list" (private games): a small switch under the create row and in the lobby */
.listed-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--body); cursor: pointer; margin: 2px 0 6px; }
.listed-row[hidden] { display: none; }
.listed-row input { margin: 0; width: auto; flex: none; }
.listed-hint { flex-basis: 100%; font-size: 11.5px; color: var(--dim); padding-left: 22px; }

.mode-note { font-size: 10px; font-weight: 400; color: var(--accent-dim); text-transform: none; letter-spacing: 0; line-height: 1.25; }

/* ---------- 5 and 6 players: the player cards are a little smaller so they fit the column (it scrolls when the screen is very small) ---------- */
body.cards-many #side { --av: 38px; --nm: 12.5px; --st: 10.5px; }
body.cards-many #players { gap: 5px; }
body.cards-many .pcard .prow { padding: 5px 8px 5px 12px; column-gap: 8px; }
body.cards-many .pcard .rbadge { font-size: 9px; margin-top: 0; }
body.cards-many .pcard .hpbar { height: 5px; margin-top: 3px; }
body.cards-many .pcard .stats { margin-top: 1px; }
body.cards-many .podium { gap: 5px; }
body.cards-many .podium li .fs-av, body.cards-many .podium li.first .fs-av { width: 40px; height: 40px; }
body.cards-many .podium li { padding-top: 5px; padding-bottom: 5px; }

/* Final standings with 5 or 6 players: two columns of rows (the list as 3 + 3), so the awards and the New game button fit a 768 high screen without scrolling */
body.cards-many #screen-final .score-panel { width: min(100%, 860px); }
body.cards-many #screen-final .podium { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 5px 8px; margin-bottom: 6px; }
body.cards-many #screen-final .podium li { flex-wrap: wrap; row-gap: 2px; padding: 5px 8px; }
body.cards-many #screen-final .podium .detail { order: 5; flex: 1 0 100%; padding-left: 44px; font-size: 10px; }
body.cards-many #screen-final .podium .who { font-size: 15px; min-width: 0; }
body.cards-many #screen-final .podium .pts { font-size: 18px; }
body.cards-many #screen-final .awards { margin: 6px 0 2px; }
body.cards-many #screen-final .panel h2, body.cards-many #screen-final h2 { margin-bottom: 8px; }


/* ==================== UI polish 3.1: the lobby ==================== */
/* the big map picture: under the room code, with the map's name and a line about it */
.map-preview { margin: 8px 0 6px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mp-pic { width: min(100%, calc(26vh * 80 / 44)); aspect-ratio: 80 / 44; border: 1px solid var(--panel-border); border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.mp-pic svg { display: block; width: 100%; height: 100%; }
.mp-cap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-cap b { font-size: 15px; }
.mp-cap span { font-size: 12px; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* the game mode: two buttons with a line each */
.settings.essentials .set-mode, .settings.essentials .set-rounds { flex: 1 1 100%; }
.set-mode .field-label { margin-bottom: 4px; display: block; }
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mode-pick button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 8px 10px; text-align: left; font: inherit; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--body);
}
.mode-pick b { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.mode-pick span { font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.mode-pick button:hover:not(:disabled) { border-color: var(--accent); }
.mode-pick button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mode-pick button.on span { color: var(--accent-ink); opacity: 0.85; }
.mode-pick button:disabled { cursor: default; }
.mode-pick button:disabled:not(.on) { opacity: 0.5; }
.set-mode .mode-note { display: block; margin-top: 4px; font-size: 11px; }

/* the settings in one line, above Start game */
.settings-line { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.settings-line:empty { display: none; }

/* the people: the seats, "Add a bot" and the join requests (in the panel on a phone, in the right sidebar on a computer) */
.lobby-people { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 4px 0; }
.people-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.people-title { margin: 0; }
.people-title span { color: var(--muted); font-weight: 400; letter-spacing: 0; }
.add-bot-level { display: flex; align-items: center; gap: 5px; }
.add-bot-level select { min-width: 74px; }
.lobby-people .seats { margin: 0; }
.lobby-people .join-requests { margin-bottom: 0; }
.lobby-people .add-row { margin-top: 2px; }
.lobby-people .btn:disabled { opacity: 0.5; cursor: default; }
.add-bot .btn { white-space: nowrap; }

/* on a computer: the people take the place of the player cards in the sidebar */
body.lobby-side #players, body.lobby-side #react-bar, body.lobby-side #battle-log, body.lobby-side .side-fabs, body.lobby-side #side-music, body.lobby-side .side-toggle { display: none !important; }
body.lobby-side #side { min-height: 0; }
body.lobby-side #lobby-people { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 2px 3px 2px 0; scrollbar-width: thin; }
body.lobby-side .lobby-people .seats { grid-template-columns: 1fr; gap: 6px; }
body.lobby-side .seat { padding: 6px 8px 7px; gap: 6px; }
body.lobby-side .seat-top { gap: 10px; padding-right: 16px; }
body.lobby-side .seat-avatar { width: 46px; height: 46px; }
body.lobby-side .seat-avatar .seat-tank { width: 26px; right: -8px; bottom: -5px; }
body.lobby-side .seat .seat-name { font-size: 14px; }
body.lobby-side .seat .team-pick button { padding: 4px 2px; font-size: 10.5px; }
body.lobby-side .seat-add { min-height: 46px; padding: 6px 10px; }
body.lobby-side .seat-add .hint { display: none; }
body.lobby-side .seat-add .plus { width: 28px; height: 28px; font-size: 18px; }
body.lobby-side .join-request { padding: 6px 8px 8px; }
body.lobby-side .jr-buttons { flex-wrap: wrap; }
@media (min-width: 861px) and (min-height: 521px) and (max-height: 800px) { .lobby-col.lobby-info .mp-pic { width: min(100%, calc(24vh * 80 / 44)); } }
/* the map picture a little smaller and the chat shorter while the seats are not in the left column (nothing else changes) */
@media (min-width: 861px) and (min-height: 521px) {
  .lobby-chat { min-height: 130px; flex: 1 1 130px; }
  .lobby-col.lobby-info .mp-pic { width: min(100%, calc(30vh * 80 / 44)); }
}


/* ==================== UI polish 3.1: phone sizes (start screen and lobby) ====================
   "Phone size" = a window up to 640 px wide (an upright phone, a narrow window) or up to 520 px high (a phone on its side).
   Everything in the lobby stacks in one column (the people in the panel, not in the sidebar), every tap target is at least 44 px,
   and nothing sits on the screen's edge (a margin around the panels, and the notch's safe areas, which #app already keeps on a
   touch screen on its side). Only the screens outside the game: the top bar's buttons grow only before a game starts. */
@media (max-width: 640px), (max-height: 520px) {
  body.lobby-stack #side { display: none; }
  #screen-menu, #screen-lobby { padding: 12px; }
  body.touch #screen-menu, body.touch #screen-lobby { padding: 12px; }
  .phone-notice { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
  body:not(.in-game) .icon-btn, body.touch:not(.in-game) .icon-btn { min-width: 44px; height: 44px; }
  body:not(.in-game) #topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }

  /* 44 px targets */
  #screen-menu .btn, #screen-lobby .btn, #screen-menu .btn.small, #screen-lobby .btn.small, .preset-pick button, .mode-pick button, .vis-btn,
  .lobby-tab, .more-settings > summary, .seat .team-pick button, .seat-add, .menu-levels .btn, .menu-local .btn, .jr-buttons .btn,
  #screen-menu select, #screen-lobby select, #screen-menu input:not([type=checkbox]), #screen-lobby input:not([type=checkbox]):not([type=hidden]),
  .game-list button { min-height: 44px; }
  .vis-btn, .lobby-tab { min-width: 44px; }
  .wn-all, .foot-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .game-list li > button { min-height: 52px; }
  .listed-row { min-height: 44px; }
  .listed-row input { width: 22px; height: 22px; }
  .seat .x { top: 0; right: 0; width: 44px; height: 44px; line-height: 44px; font-size: 24px; }
  .seat-top { padding-right: 34px; }
  .seat .team-pick { gap: 6px; }
  .seat .team-pick button { font-size: 12px; }
  .seat select { font-size: 14px; padding: 4px 8px; }
  .level-card { min-width: 56px; }
  .mp-pic { width: min(100%, calc(60vh * 80 / 44)); }
  .quick-row { min-height: 56px; }
  .wn-list { gap: 4px 0; }
  /* a map picture and the chat that fit a short window */
  .lobby-chat .chat-log { height: 110px; }
}
@media (max-height: 520px) {
  /* the start block: the one-line summary and the waiting message beside the Start button, so it takes a little height */
  .start-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 6px 0 2px; }
  .start-block > .settings-line { grid-column: 1; grid-row: 1; text-align: left; font-size: 12px; }
  .start-block > .lobby-wait { grid-column: 1; grid-row: 2; text-align: left; font-size: 13px; }
  .start-block > .start-btn { grid-column: 2; grid-row: 1 / span 2; width: auto; min-width: 190px; padding: 10px 18px; font-size: 16px; letter-spacing: 0.14em; }
  .start-block > .showdown-note { grid-column: 1 / -1; }
  .lobby-wait:empty, .settings-line:empty { display: none; }
  .game-title { margin-bottom: 4px; }
  .room-code { font-size: 30px; }
}
@media (max-width: 640px), (max-height: 520px) {
  .lobby-panel { padding: 14px 16px; }
  .play-panel, .games-panel { padding: 12px 14px; }
}
@media (max-height: 520px) {
  /* a phone on its side: a smaller title, so the play panel starts higher up */
  .hero-cat { width: 56px; }
  .menu-hero { gap: 10px; }
  .title { font-size: clamp(18px, 6vh, 28px); }
  .tagline { font-size: 12px; }
  .menu-grid { --menu-row-gap: 8px; }
}
@media (max-height: 340px) {
  .tagline { display: none; }
  .hero-cat { width: 44px; }
}
@media (max-width: 640px), (max-height: 520px) {
  /* with enlarged text the command line wraps instead of running off the screen */
  .menu-hero .title { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
}

/* ======================================================================================================================
   Phones on their side ("compact": landscape, up to 520 px high; the class is set by compact.js).
   One layer over a battlefield that fills the screen: a thin strip on top, the players as chips under it, one ☰ menu, one chat button.
   Nothing here uses blur (it costs a phone's processor); the bars are plain see-through dark.
   ====================================================================================================================== */
.menu-btn, .chips, .chip-card, .talk, .fs-prompt, .menu-only { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  body.compact.in-game { overflow: hidden; }
  body.compact.in-game #app { position: fixed; inset: 0; display: block; height: auto; min-height: 0; }
  body.compact.in-game #stage { position: absolute; inset: 0; display: block; padding: 0; gap: 0; }
  body.compact.in-game #field-wrap { position: absolute; inset: 0; padding: 0; display: flex; align-items: center; justify-content: center; grid-column: auto; grid-row: auto; }
  body.compact.in-game #field { border: 0; border-radius: 0; }
  body.compact.in-game #side, body.compact.in-game .cat-cam, body.compact.in-game #battle-log { display: none !important; }

  /* the strip: round, wind, whose turn, the timer, and the menu button */
  body.compact.in-game #topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 28px; min-height: 0; zoom: 1; gap: 8px;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    background: rgba(10, 12, 16, 0.72); border: 0; box-shadow: none; flex-wrap: nowrap;
  }
  body.compact.in-game #topbar .brand { display: none; }
  body.compact.in-game .hud { gap: 12px; margin: 0 auto; flex-wrap: nowrap; align-items: center; }
  body.compact.in-game .hud-item { flex-direction: row; gap: 4px; align-items: center; white-space: nowrap; }
  body.compact.in-game .hud-item:has(#hud-map), body.compact.in-game .hud-item:has(#hud-walls) { display: none; }
  body.compact.in-game .hud-label { display: none; }
  body.compact.in-game .hud-item > span:last-child { font-size: 13px; }
  body.compact.in-game #hud-round::before { content: "R "; color: var(--accent-dim); font-size: 11px; }
  body.compact.in-game.side-run #hud-round::before { content: "S "; }
  body.compact.in-game.side-run #hud-timer::before { content: "★ "; color: var(--accent-dim); font-size: 11px; }
  body.compact.in-game .hud-item > #hud-timer { height: auto; line-height: 1; margin: 0; font-size: 15px; -webkit-text-stroke: 0; }
  body.compact.in-game .hud-turn > span:last-child { font-size: 13px; }
  body.compact.in-game .grace-bar { bottom: -2px; left: 0; right: 0; }
  body.compact.in-game .menu-btn { display: inline-flex; position: relative; width: 44px; min-width: 44px; height: 26px; margin-left: auto; border-color: transparent; background: transparent; }
  body.compact.in-game .menu-btn::after { content: ""; position: absolute; inset: -3px -4px -15px -4px; }   /* (the tap area is 44 px high; the strip is only 28) */
  body.compact.in-game .hud:not([hidden]) ~ .menu-btn { margin-left: 0; }

  /* the menu: the top bar's buttons as a panel under the ☰ button */
  body.compact.in-game .top-actions {
    --menu-w: 372px;
    display: none; position: fixed; z-index: 70; top: 30px; right: max(8px, env(safe-area-inset-right)); width: var(--menu-w); margin: 0; padding: 4px;
    grid-template-columns: 1fr 1fr; align-items: stretch; gap: 2px 4px; max-height: calc(100dvh - 38px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  }
  body.compact.in-game.menu-open .top-actions { display: grid; }
  body.compact.in-game .top-actions .music-wrap { position: static; display: block; }
  body.compact.in-game .top-actions .icon-btn {
    width: 100%; min-width: 0; height: 44px; justify-content: flex-start; gap: 10px; padding: 0 10px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.05);
    font-size: 0; letter-spacing: 0; text-align: left;
  }
  body.compact.in-game .top-actions .icon-btn::after { content: attr(data-menu); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
  body.compact.in-game .top-actions .icon-btn[hidden], body.compact.in-game .top-actions .menu-only[hidden] { display: none; }
  body.compact.in-game .top-actions .menu-only { display: inline-flex; }
  body.compact.in-game .top-actions .music-wrap > .icon-btn { width: 100%; }
  body.compact.in-game.fullscreen #btn-fullscreen::after { content: "Leave fullscreen"; }
    body.compact.in-game .top-actions .icon-btn.off { color: var(--muted); }
  body.compact.in-game .top-actions .chat-history-btn .chat-badge { top: 4px; left: 28px; right: auto; }
  /* the ♪ and ⚙ panels open beside the menu */
  body.compact.in-game .top-pop.panel { position: fixed; right: calc(388px + env(safe-area-inset-right)); left: auto; top: 30px; width: min(300px, calc(100vw - 410px)); max-height: calc(100dvh - 38px); z-index: 71; }

  /* the players: chips across the top of the battlefield */
  body.compact.in-game.battle-view .chips {
    display: flex; position: fixed; z-index: 38; top: 30px; left: max(6px, env(safe-area-inset-left)); right: max(6px, env(safe-area-inset-right));
    height: 36px; gap: 4px; justify-content: center; pointer-events: none;
  }
  body.compact.in-game.battle-view .chips[hidden] { display: none; }
  .chip {
    pointer-events: auto; flex: 1 1 0; min-width: 0; max-width: 150px; height: 36px; display: flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px;
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; background: rgba(10, 12, 16, 0.72); color: var(--text); font: inherit; cursor: pointer; text-align: left;
    touch-action: manipulation;
  }
  .chip.turn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: rgba(40, 28, 8, 0.8); }
  .chip.dead { opacity: 0.45; filter: grayscale(1); }
  .chip-ring { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--rc, #888); background: #111; }
  .chip-ring .av-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 0; }
  .chip-team { position: absolute; right: -5px; bottom: -4px; min-width: 12px; height: 12px; padding: 0 2px; box-sizing: border-box; border-radius: 3px; background: var(--tc, #888); color: #07090c; font: 700 9px/12px var(--mono); text-align: center; }
  .chip-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
  .chip-name { font-size: 11px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chip-hp { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
  .chip-hp > i { display: block; height: 100%; background: var(--good); }
  .chip-hp.hp-mid > i { background: var(--accent); }
  .chip-hp.hp-low > i { background: var(--bad); }
  body.compact.in-game.battle-view .chip-card {
    display: block; position: fixed; z-index: 45; top: 70px; left: 50%; transform: translateX(-50%); width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - 78px); overflow-y: auto;
    padding: 10px 12px; background: var(--panel); border: 1px solid var(--rc, var(--panel-border)); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  }
  body.compact.in-game.battle-view .chip-card[hidden] { display: none; }
  .cc-close { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
  .cc-top { display: flex; align-items: center; gap: 10px; padding-right: 36px; }
  .cc-av { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--rc); overflow: hidden; background: #111; }
  .cc-av .av-img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
  .cc-name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
  .cc-sub { font-size: 12px; color: var(--muted); }
  .cc-stats { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--mono); font-size: 13px; }

  /* chat and reactions: one small button */
  body.compact.in-game.battle-view .talk { display: block; position: fixed; z-index: 37; top: 72px; right: max(12px, env(safe-area-inset-right)); }
  body.compact.in-game.battle-view .talk[hidden] { display: none; }
  .talk-fab { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(10, 12, 16, 0.6); color: var(--text); font-size: 20px; cursor: pointer; opacity: 0.8; touch-action: manipulation; }
  .talk-fab .chat-badge { position: absolute; top: -4px; right: -4px; }
  body.compact.in-game .talk-menu { display: flex; flex-direction: column; gap: 6px; position: absolute; top: 0; right: 52px; width: 290px; padding: 8px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
  body.compact.in-game .talk-menu[hidden] { display: none; }
  .talk-write { height: 44px; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
  .talk-reacts { display: flex; gap: 4px; }
  .talk-reacts .react-btn { flex: 1 1 0; min-width: 0; height: 44px; }
  body.compact.in-game .chat-overlay { position: fixed; left: max(10px, env(safe-area-inset-left)); top: 100px; width: min(46%, 300px); }
  body.compact.in-game .chat-history { position: fixed; top: 70px; left: max(10px, env(safe-area-inset-left)); max-height: calc(100dvh - 80px); }

  /* "Play fullscreen?" */
  body.compact.in-game .fs-prompt { display: flex; align-items: center; gap: 8px; white-space: nowrap; position: fixed; z-index: 60; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 8px 10px; background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
  body.compact.in-game .fs-prompt[hidden], body.compact.in-game.menu-open .fs-prompt { display: none; }
  .fs-text { font-size: 13px; }
  body.compact.in-game .fs-prompt .btn { min-height: 44px; padding: 0 12px; }

  /* the shop and the results sit under the strip */
  body.compact.in-game #screen-shop, body.compact.in-game #screen-round, body.compact.in-game #screen-final { top: 28px; }

  /* until the see-through controls (next part) take over: the old control bar as a slim row along the bottom */
  body.compact.in-game #controls {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; zoom: 1;
    padding: 4px max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: rgba(10, 12, 16, 0.55); border: 0;
  }
  body.compact.in-game #controls .ctl-sec { display: contents; }
  body.compact.in-game #controls .ctl-group { display: contents; }
  body.compact.in-game #controls :is(.ctl-label, input[type=range], .ctl-value, .fuel, .cg-danger, .weapon-group, #btn-repair, .shield-btns, .item-chip, .ctl-player) { display: none; }
}

/* ======================================================================================================================
   The see-through controls over the battlefield (overlay.js) and drag-to-aim.
   Outlines with an icon and a hard dark edge so they read on light maps (Christmas, Moon); no blur. About 40 % solid at rest,
   fully solid while pressed. Only on your own turn: they fade out during a shot and on other players' turns.
   ====================================================================================================================== */
.ovl { display: none; }
body.ovl-on.in-game.battle-view .ovl:not([hidden]) { display: block; position: fixed; z-index: 29; pointer-events: none; --ovl-op: 0.4; }
body.ovl-on #controls { display: none !important; }   /* (the see-through buttons are the controls; the weapon grid, self-destruct and skip are in the grid) */
.ovl-side { position: absolute; bottom: 14px; display: flex; align-items: flex-end; gap: 10px; transition: opacity 0.25s; }
.ovl-left { left: 14px; flex-direction: row; }
.ovl-right { right: 14px; flex-direction: column; align-items: flex-end; gap: 10px; }
.ovl.lefty .ovl-left { left: auto; right: 14px; }
.ovl.lefty .ovl-jump { order: -1; }   /* (the arrows keep their order, Jump goes to the other end) */
.ovl.lefty .ovl-right { right: auto; left: 14px; align-items: flex-start; }
.ovl.ovl-screen .ovl-left { left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); }
.ovl.ovl-screen .ovl-right { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
.ovl.ovl-screen.lefty .ovl-left { left: auto; right: max(14px, env(safe-area-inset-right)); }
.ovl.ovl-screen.lefty .ovl-right { right: auto; left: max(14px, env(safe-area-inset-left)); }
.ovl-btn {
  position: relative; pointer-events: auto; display: flex; align-items: center; justify-content: center; flex: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: #fff;
  background: rgba(0, 0, 0, 0.22); border: 3px solid #fff; border-radius: 18px; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(0, 0, 0, 0.45);
  opacity: var(--ovl-op, 0.4); transition: opacity 0.2s; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ovl-btn.pressed { opacity: 1; background: rgba(255, 255, 255, 0.22); }
.ovl-btn.behind:not(.pressed) { opacity: calc(var(--ovl-op, 0.4) * 0.35); }
.ovl-btn svg { width: 34px; height: 34px; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ovl-btn .sh { stroke: #000; stroke-width: 6.5; }
.ovl-btn .ln { stroke: #fff; stroke-width: 3.4; }
.ovl-drive { width: 68px; height: 68px; }
.ovl-jump { width: 68px; height: 68px; flex-direction: column; gap: 0; }
.ovl-jump svg { width: 28px; height: 28px; }
.ovl-cap, .ovl-label, .ovl-wname, .ovl-wcount, .ovl-nb, .ovl-nl, .ovl-aim-num, .ovl-turn { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 0 #000; }
.ovl-cap { font-size: 12px; font-weight: 700; line-height: 1; }
.ovl-fire { width: 92px; height: 92px; border-radius: 50%; border-color: #ffb040; overflow: hidden; }
.ovl-fire .ovl-label { position: relative; z-index: 1; font-family: var(--display, var(--mono)); font-size: 22px; font-weight: 800; letter-spacing: 0.04em; color: #ffd48a; }
.ovl-fire .ovl-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); background: rgba(255, 176, 64, 0.55); }
.ovl-fire.reloading .ovl-label { font-size: 18px; color: #fff; }
.ovl-weapon { min-width: 96px; height: 46px; padding: 0 12px; gap: 6px; border-radius: 23px; }
.ovl-weapon .icon { width: 30px; height: 30px; flex: none; filter: none; }
.ovl-wname { display: none; font-size: 12px; font-weight: 700; max-width: 90px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ovl-wcount { font-family: var(--mono); font-size: 14px; font-weight: 700; color: #ffd48a; }
/* your turn: everything shows; a shell of yours is in the air: only driving; somebody else's turn: nothing but the label */
.ovl.ovl-off .ovl-side, .ovl.ovl-off .ovl-nudge { opacity: 0; }
.ovl.ovl-off .ovl-btn, .ovl.ovl-drive .ovl-right .ovl-btn, .ovl.ovl-drive .ovl-jump { pointer-events: none; }
.ovl.ovl-off .ovl-btn { pointer-events: none; }
.ovl.ovl-drive .ovl-right { opacity: 0; }
.ovl-turn { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 3px 12px; border-radius: 12px; background: rgba(8, 10, 14, 0.55); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ovl-turn[hidden] { display: none; }
/* drag-to-aim: the line from the tank (or where the finger went down) to the finger, and the numbers by the finger */
.ovl-aim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ovl-aim[hidden], .ovl-aim-num[hidden] { display: none; }
.ovl-aim line { stroke: #000; stroke-width: 7; stroke-linecap: round; stroke-opacity: 0.55; }
.ovl-aim #ovl-aim-line2 { stroke: #fff; stroke-width: 3; stroke-dasharray: 2 9; stroke-opacity: 1; }
.ovl-aim line + line + circle { fill: rgba(255, 255, 255, 0.28); stroke: #fff; stroke-width: 3; }
.ovl-aim-num { position: absolute; padding: 2px 10px; border-radius: 12px; background: rgba(8, 10, 14, 0.6); color: #fff; font-family: var(--mono); font-size: 16px; font-weight: 700; white-space: pre; pointer-events: none; }
/* the small − + buttons that stay for a moment after a drag */
.ovl-nudge { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: auto 44px 44px; align-items: center; gap: 4px 6px; transition: opacity 0.25s; }
.ovl-nudge[hidden] { display: none; }
.ovl-nl { font-size: 12px; font-weight: 700; color: #fff; text-align: right; }
.ovl-nb { width: 44px; height: 44px; border-radius: 12px; font-size: 24px; font-weight: 700; line-height: 1; }
@media (orientation: landscape) and (max-height: 520px) {
}
@media (prefers-reduced-motion: reduce) { .ovl-side, .ovl-btn, .ovl-nudge { transition: none; } }
.ovl:not(.ovl-screen) .ovl-drive, .ovl:not(.ovl-screen) .ovl-jump { width: 58px; height: 58px; }
.ovl:not(.ovl-screen) .ovl-fire { width: 80px; height: 80px; }

/* ======================================================================================================================
   The desktop battle screen: the menu with Self-destruct, the battle log (foldable, with the last hit as a card) and the weapon name
   ====================================================================================================================== */
.more-wrap { position: relative; }
.more-btn { min-width: 44px; font-size: 18px; line-height: 1; padding: 0 12px; }
.more-pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 50; padding: 6px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); white-space: nowrap; }
.more-pop[hidden] { display: none; }
.more-hint { margin-left: 6px; font-size: 11px; opacity: 0.7; text-transform: none; letter-spacing: 0; }
#controls.disabled .more-wrap { opacity: 0.4; pointer-events: none; }
.weapon-box { cursor: pointer; }
.weapon-box:hover { border-color: var(--accent); }
.bl-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.bl-bar .bl-head { margin: 0; }
.bl-toggle { width: 26px; height: 22px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.bl-toggle:hover { color: var(--accent); }
.bl-last { margin: 0 0 6px; padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); border-left: 3px solid var(--accent); font-size: clamp(13px, calc(var(--st) + 2px), 17px); line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.bl-last:empty { display: none; }
.bl-last i { font-style: normal; font-family: var(--mono); color: var(--accent); white-space: nowrap; }
.bl-last-h { display: block; margin-bottom: 1px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dim); }
.battle-log.folded .bl-lines { display: none; }
.battle-log.folded { padding-bottom: 6px; }

/* ======================================================================================================================
   Webcams in the chips and the floating tile (camviews.js). The round hole of a chip shows the camera instead of the avatar; on a
   computer the chips lie over the top left of the battlefield while some camera is on (on a phone they are always there, see above).
   ====================================================================================================================== */
.chip-cam { position: absolute; inset: 0; display: none; border-radius: 50%; overflow: hidden; background: #0e0f12; }
.chip-ring.has-cam .chip-cam { display: block; }
.chip-ring.has-cam > .av-img { visibility: hidden; }
.cv { display: block; width: 100%; height: 100%; }
.cv video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0e0f12; }
.cv.mirror video { transform: scaleX(-1); }
.chip.mutable { cursor: pointer; }
.chip.quiet { border-color: var(--bad); }
.chip.quiet .chip-ring { filter: grayscale(1); border-color: var(--bad); }
.chip-mute { position: absolute; left: -5px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; background: var(--bad); display: flex; align-items: center; justify-content: center; filter: none; }
.chip-mute svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body:not(.compact).in-game.battle-view.cams-live .chips {
  display: flex; position: fixed; z-index: 38; left: var(--cam-l, 8px); top: calc(var(--cam-t, 60px) + 8px); width: var(--cam-w, auto); max-width: 100%;
  gap: 6px; flex-wrap: nowrap; justify-content: flex-start; pointer-events: none;
}
body:not(.compact).in-game.battle-view.cams-live .chips[hidden] { display: none; }
.chips .chip {
  pointer-events: auto; flex: 0 1 164px; min-width: 0; max-width: 164px; height: 46px; display: flex; align-items: center; gap: 7px; padding: 3px 11px 3px 4px; overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 23px; background: rgba(10, 12, 16, 0.72); color: var(--text); font: inherit; cursor: pointer; text-align: left;
}
.chips .chip.turn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: rgba(40, 28, 8, 0.8); }
.chips .chip.dead { opacity: 0.45; filter: grayscale(1); }
.chips .chip-ring { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--rc, #888); background: #111; }
.chips .chip-ring .av-img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 0; }
.chips .chip-ring.has-cam > .av-img { visibility: hidden; }
.chips .chip-team { position: absolute; right: -5px; bottom: -4px; min-width: 12px; height: 12px; padding: 0 2px; box-sizing: border-box; border-radius: 3px; background: var(--tc, #888); color: #07090c; font: 700 9px/12px var(--mono); text-align: center; }
.chips .chip-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.chips .chip-name { font-size: 13px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips .chip-hp { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.chips .chip-hp > i { display: block; height: 100%; background: var(--good); }
.chips .chip-hp.hp-mid > i { background: var(--accent); }
.chips .chip-hp.hp-low > i { background: var(--bad); }
.chips .chip.quiet { border-color: var(--bad); }
.chips .chip-mute { left: -6px; bottom: -5px; width: 17px; height: 17px; }
@media (max-width: 1200px) { .chips .chip { flex-basis: 132px; max-width: 132px; height: 42px; } .chips .chip-ring { width: 32px; height: 32px; } .chips .chip-name { font-size: 12px; } }

/* the floating tile: a camera as a small window over the battlefield, dragged to any corner */
.cam-layer { display: none; position: fixed; inset: 0; z-index: 36; pointer-events: none; }
.cam-layer:not([hidden]) { display: block; }
.cam-tile {
  position: absolute; width: clamp(180px, 15vw, 340px); border: 2px solid var(--rc, var(--panel-border)); border-radius: 10px; overflow: hidden; background: #0e0f12; pointer-events: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: opacity 0.25s;
}
.cam-tile.slide { transition: opacity 0.25s, left 0.2s ease-out, top 0.2s ease-out; }
.cam-tile.dragging { cursor: grabbing; opacity: 1; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7); }
.cam-tile.fade { opacity: 0.35; }   /* (on my own turn: like the see-through controls, out of the way of my aim; solid under the pointer) */
.cam-tile.fade:hover, .cam-tile.fade:focus-within { opacity: 1; }
.ct-pic { position: relative; aspect-ratio: 16 / 9; background: #0e0f12; }
.ct-pic .cv { position: absolute; inset: 0; }
.ct-av { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.ct-av .av-img { height: 70%; width: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.cam-tile.no-pic .ct-av { display: flex; }
.cam-tile.no-pic .ct-pic .cv { visibility: hidden; }
.ct-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 4px 2px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }
.ct-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.ct-close { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 14px; cursor: pointer; }
.ct-close:hover { background: rgba(0, 0, 0, 0.75); color: var(--accent); }
body.touch .ct-close { width: 36px; height: 36px; }
body.compact .cam-tile { width: clamp(120px, 24vw, 190px); }
body.compact .ct-name { font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .cam-tile, .cam-tile.slide { transition: none; } }

/* the reaction cam: the camera of a player who was hit grows out of their chip for about two seconds */
.cam-pop {
  position: absolute; width: clamp(200px, 16vw, 340px); border: 3px solid var(--rc, var(--bad)); border-radius: 12px; overflow: hidden; background: #0e0f12; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 18px color-mix(in srgb, var(--rc, #f55) 60%, transparent); opacity: 0; transform: scale(0.15); transition: transform 0.22s ease-out, opacity 0.2s;
}
.cam-pop.in { opacity: 1; transform: scale(1); }
.cp-dmg { flex: none; font-family: var(--mono); font-size: 15px; font-weight: 700; color: #ff6a5a; text-shadow: 0 1px 2px #000; }
body.compact .cam-pop { width: clamp(130px, 22vw, 190px); }
body.reduce-flash .cam-pop, body.reduce-flash .cam-pop.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .cam-pop, .cam-pop.in { transform: none; transition: opacity 0.2s; } }