/* IRONLINK — interface design system.
   Dark translucent panels, thin luminous borders, angled corners, team accents, monospace numerals.
   Sections: fonts · tokens · base · components · menus · lobby · overlays · HUD (command / operator / deploy / common). */

/* ---------------------------------------------------------------------------------------------- fonts */
@font-face { font-family: 'Chakra Petch'; src: url('../assets/fonts/ChakraPetch-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('../assets/fonts/ChakraPetch-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('../assets/fonts/ChakraPetch-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('../assets/fonts/Rajdhani-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('../assets/fonts/Rajdhani-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Rajdhani'; src: url('../assets/fonts/Rajdhani-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-Variable.woff') format('woff'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/JetBrainsMono-Variable.woff') format('woff'); font-weight: 400 700; font-display: swap; }

/* ---------------------------------------------------------------------------------------------- tokens */
:root {
  --bg-0: #03060a;
  --bg-1: #070c13;
  --bg-2: #0c141e;
  --panel: rgba(8, 14, 22, 0.80);
  --panel-2: rgba(13, 22, 33, 0.88);
  --panel-solid: #0a111a;
  --line: rgba(130, 195, 255, 0.15);
  --line-2: rgba(150, 210, 255, 0.28);
  --line-3: rgba(170, 225, 255, 0.5);
  --text: #e7f0f7;
  --text-2: #b3c3d1;
  --text-dim: #8798a9;
  --text-mute: #5a6b7c;
  --accent: #3fc8ff;
  --accent-rgb: 63, 200, 255;
  --amber: #ffb547;
  --amber-rgb: 255, 181, 71;
  --ok: #46e6a0;
  --ok-rgb: 70, 230, 160;
  --bad: #ff4d5e;
  --bad-rgb: 255, 77, 94;
  --crystal: #6ff0ff;
  --team-0: #2fa8ff;
  --team-0-rgb: 47, 168, 255;
  --team-1: #ff4a2f;
  --team-1-rgb: 255, 74, 47;
  --team: var(--accent);
  --team-rgb: var(--accent-rgb);
  --enemy: var(--team-1);
  --enemy-rgb: var(--team-1-rgb);
  --neutral: #d8d2c0;

  --font-display: 'Chakra Petch', 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Rajdhani', 'Segoe UI', 'Roboto Condensed', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-2xs: max(9.5px, 0.66rem);
  --fs-xs: max(10.5px, 0.74rem);
  --fs-sm: max(11.5px, 0.84rem);
  --fs-md: max(12.5px, 0.95rem);
  --fs-lg: 1.15rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2.1rem;
  --fs-3xl: 3.2rem;

  --cut: 0.6rem;
  --t: 150ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.45);
  --scan: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* Scales the whole interface with the viewport: 16px at 1080p, ~12.7px at 720p, ~26px at 4K (× Settings → Interface scale). */
html { font-size: calc((6px + min(0.52vw, 0.925vh)) * var(--ui-scale, 1)); }

/* ---------------------------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg-0); color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  user-select: none; -webkit-user-select: none;
}
body { font-size: var(--fs-md); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea { user-select: text; -webkit-user-select: text; }
::selection { background: rgba(var(--accent-rgb), 0.35); }
#game { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; }
#game canvas { display: block; }
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
#ui .layer { position: absolute; inset: 0; pointer-events: none; }
.ico-wrap { display: inline-flex; line-height: 0; }
.ico { width: 1.25em; height: 1.25em; flex: none; display: block; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent; }
.scroll::-webkit-scrollbar { width: 6px; }
.scroll::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); }
:focus { outline: none; }
:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.85); outline-offset: 2px; }

/* ---------------------------------------------------------------------------------------------- components */
/* Angled-corner surface: ::before draws the clipped fill + border (so outer glow filters still work). */
.cut { position: relative; isolation: isolate; --bc: var(--line-2); --bg: var(--panel); --cut-a: var(--cut); }
.cut::before, .btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  clip-path: polygon(var(--cut-a) 0, 100% 0, 100% calc(100% - var(--cut-a)), calc(100% - var(--cut-a)) 100%, 0 100%, 0 var(--cut-a));
  background:
    linear-gradient(135deg, transparent calc(var(--cut-a) * 0.7071 - 0.2px), var(--bc) calc(var(--cut-a) * 0.7071), var(--bc) calc(var(--cut-a) * 0.7071 + 1px), transparent calc(var(--cut-a) * 0.7071 + 1.2px)),
    linear-gradient(315deg, transparent calc(var(--cut-a) * 0.7071 - 0.2px), var(--bc) calc(var(--cut-a) * 0.7071), var(--bc) calc(var(--cut-a) * 0.7071 + 1px), transparent calc(var(--cut-a) * 0.7071 + 1.2px)),
    var(--bg);
  box-shadow: inset 0 0 0 1px var(--bc);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.panel { --bg: var(--scan), linear-gradient(180deg, rgba(16, 26, 38, 0.86), rgba(7, 12, 19, 0.88)); --bc: var(--line-2); color: var(--text); }
.panel::before { backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
.panel.brackets::after, .brackets::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none; z-index: 1;
  --bk: rgba(var(--accent-rgb), 0.85);
  background:
    linear-gradient(var(--bk), var(--bk)) top right / 0.9rem 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) top right / 2px 0.9rem no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / 0.9rem 2px no-repeat,
    linear-gradient(var(--bk), var(--bk)) bottom left / 2px 0.9rem no-repeat;
}
.panel-title {
  display: flex; align-items: center; gap: 0.6rem;
  font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2);
  padding: 0.85rem 1rem 0.7rem; border-bottom: 1px solid var(--line);
}
.panel-title::before { content: ''; width: 0.35rem; height: 0.35rem; background: var(--accent); transform: rotate(45deg); box-shadow: 0 0 0.5rem var(--accent); flex: none; }
.panel-title .spacer { flex: 1; }

.btn {
  --cut-a: var(--cut);
  --c-rgb: var(--accent-rgb);
  --bc: rgba(var(--c-rgb), 0.32);
  --bg: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01)), rgba(10, 18, 28, 0.82);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 2.7rem; padding: 0 1.35rem; border: 0; background: none;
  font: 600 var(--fs-md)/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
  white-space: nowrap; cursor: pointer;
  transition: color var(--t) var(--ease), filter var(--t) var(--ease), transform 90ms var(--ease);
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  clip-path: polygon(var(--cut-a, var(--cut)) 0, 100% 0, 100% calc(100% - var(--cut-a, var(--cut))), calc(100% - var(--cut-a, var(--cut))) 100%, 0 100%, 0 var(--cut-a, var(--cut)));
  background: linear-gradient(100deg, transparent 20%, rgba(var(--c-rgb), 0.22) 45%, rgba(255, 255, 255, 0.12) 50%, transparent 70%) -120% 0 / 250% 100% no-repeat;
}
.btn:hover:not(:disabled) { --bc: rgba(var(--c-rgb), 0.75); --bg: linear-gradient(180deg, rgba(var(--c-rgb), 0.2), rgba(var(--c-rgb), 0.06)), rgba(10, 18, 28, 0.86); color: #fff; }
.btn:hover:not(:disabled)::after { opacity: 1; animation: btnSweep 0.7s var(--ease-out) forwards; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.btn:disabled, .btn.disabled { cursor: not-allowed; color: var(--text-mute); --bc: rgba(255, 255, 255, 0.08); --bg: rgba(10, 16, 24, 0.6); }
.btn .ico { width: 1.3em; height: 1.3em; }
.btn .kbd { margin-left: 0.3em; }
.btn:focus-visible, .nav-item:focus-visible, .map-card:focus-visible, .cmdbtn:focus-visible, .dopt:focus-visible { outline: none; --bc: rgba(var(--c-rgb, var(--accent-rgb)), 0.95); filter: drop-shadow(0 0 0.5rem rgba(var(--c-rgb, var(--accent-rgb)), 0.55)); }
.btn-primary {
  --bc: rgba(var(--c-rgb), 0.9);
  --bg: linear-gradient(180deg, rgba(var(--c-rgb), 0.95), rgba(var(--c-rgb), 0.72));
  color: #021018; font-weight: 700;
  filter: drop-shadow(0 0 0.65rem rgba(var(--c-rgb), 0.35));
}
.btn-primary:hover:not(:disabled) { --bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(var(--c-rgb), 0.9)); color: #021018; filter: drop-shadow(0 0 1rem rgba(var(--c-rgb), 0.6)); }
.btn-primary:disabled { filter: none; }
.btn-danger { --c-rgb: var(--bad-rgb); }
.btn-amber { --c-rgb: var(--amber-rgb); }
.btn-ok { --c-rgb: var(--ok-rgb); }
.btn-ghost { --bg: transparent; --bc: transparent; }
.btn-ghost:hover:not(:disabled) { --bc: rgba(var(--c-rgb), 0.4); }
.btn-sm { min-height: 2.05rem; padding: 0 0.85rem; font-size: var(--fs-sm); letter-spacing: 0.12em; --cut-a: 0.45rem; }
.btn-lg { min-height: 3.4rem; padding: 0 2rem; font-size: var(--fs-lg); }
.btn-icon { padding: 0; width: 2.7rem; }
.btn-icon.btn-sm { width: 2.05rem; }
@keyframes btnSweep { from { background-position: -120% 0; } to { background-position: 220% 0; } }

.kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; padding: 0 0.42em;
  font: 700 var(--fs-xs)/1 var(--font-mono); letter-spacing: 0; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.22); border-bottom-width: 2px; border-radius: 3px; text-transform: uppercase;
}
.kbd.wide { min-width: 3.2em; }
.badge {
  display: inline-flex; align-items: center; gap: 0.35em; height: 1.45rem; padding: 0 0.55rem;
  font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--b, var(--text-2)); background: rgba(var(--b-rgb, 255, 255, 255), 0.1);
  border: 1px solid rgba(var(--b-rgb, 255, 255, 255), 0.35);
  clip-path: polygon(0.35rem 0, 100% 0, 100% calc(100% - 0.35rem), calc(100% - 0.35rem) 100%, 0 100%, 0 0.35rem);
}
.badge .ico { width: 1.15em; height: 1.15em; }
.badge.cmd { --b: #8fd8ff; --b-rgb: 143, 216, 255; }
.badge.opr { --b: #ffcf7a; --b-rgb: 255, 207, 122; }
.badge.ok { --b: var(--ok); --b-rgb: var(--ok-rgb); }
.badge.warn { --b: var(--amber); --b-rgb: var(--amber-rgb); }
.badge.bad { --b: var(--bad); --b-rgb: var(--bad-rgb); }
.badge.accent { --b: var(--accent); --b-rgb: var(--accent-rgb); }

.input {
  width: 100%; height: 2.75rem; padding: 0 0.95rem;
  font: 500 var(--fs-md)/1 var(--font-body); color: var(--text);
  background: rgba(3, 8, 13, 0.75); border: 1px solid var(--line-2); border-bottom: 2px solid rgba(var(--accent-rgb), 0.5);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.input:focus { border-color: rgba(var(--accent-rgb), 0.65); background: rgba(6, 14, 22, 0.9); box-shadow: 0 0.4rem 1.2rem -0.6rem rgba(var(--accent-rgb), 0.6); }
.input::placeholder { color: var(--text-mute); }
.field-label { display: block; margin: 0 0 0.45rem; font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; }

.seg { display: inline-flex; gap: 2px; padding: 2px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); }
.seg button {
  min-height: 2.2rem; padding: 0 1rem; border: 0; background: transparent; color: var(--text-dim);
  font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.45em;
  transition: background var(--t), color var(--t);
}
.seg button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.seg button.on { color: #021018; background: linear-gradient(180deg, rgba(var(--accent-rgb), 1), rgba(var(--accent-rgb), 0.75)); }
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }

.toggle { position: relative; width: 3.1rem; height: 1.55rem; flex: none; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.45); cursor: pointer; transition: background var(--t), border-color var(--t); padding: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(50% - 4px); height: calc(100% - 6px); background: var(--text-dim); transition: transform var(--t) var(--ease), background var(--t); clip-path: polygon(0.25rem 0, 100% 0, 100% calc(100% - 0.25rem), calc(100% - 0.25rem) 100%, 0 100%, 0 0.25rem); }
.toggle.on { background: rgba(var(--accent-rgb), 0.25); border-color: rgba(var(--accent-rgb), 0.7); }
.toggle.on::after { transform: translateX(calc(100% + 2px)); background: var(--accent); box-shadow: 0 0 0.6rem rgba(var(--accent-rgb), 0.8); }

.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 1.6rem; background: transparent; cursor: pointer; --p: 50%; }
.slider::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(255, 255, 255, 0.12) var(--p)); }
.slider::-moz-range-track { height: 4px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(255, 255, 255, 0.12) var(--p)); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 0.9rem; height: 1.25rem; margin-top: calc(-0.625rem + 2px); background: #eaf7ff; border: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 0.6rem var(--accent); }
.slider::-moz-range-thumb { width: 0.9rem; height: 1.25rem; background: #eaf7ff; border: 0; border-radius: 0; }

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); }
.tabs button {
  position: relative; padding: 0.9rem 1.3rem 0.85rem; border: 0; background: none; color: var(--text-dim);
  font: 700 var(--fs-md)/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.55em;
  transition: color var(--t);
}
.tabs button::after { content: ''; position: absolute; left: 0.6rem; right: 0.6rem; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--t) var(--ease); box-shadow: 0 0 0.6rem var(--accent); }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: #fff; }
.tabs button.on::after { transform: scaleX(1); }

.bar { position: relative; height: 0.45rem; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: 100%; transform-origin: 0 50%; background: var(--fill, var(--ok)); transition: transform 120ms linear; }
.hpcolor-hi { --fill: linear-gradient(90deg, #2fd18a, #64f0b0); }
.hpcolor-mid { --fill: linear-gradient(90deg, #e3a72a, #ffd166); }
.hpcolor-lo { --fill: linear-gradient(90deg, #d8323f, #ff6b6b); }

.spinner { width: 1.1em; height: 1.1em; border: 2px solid rgba(var(--accent-rgb), 0.25); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(0.9rem); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.2; } }

/* ---------------------------------------------------------------------------------------------- screens */
.screen { position: absolute; inset: 0; pointer-events: auto; display: flex; flex-direction: column; animation: screenIn 300ms var(--ease-out) both; }
.screen.leaving { animation: screenOut 170ms var(--ease) both; pointer-events: none; }
@keyframes screenIn { from { opacity: 0; transform: scale(1.012); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes screenOut { to { opacity: 0; transform: scale(0.992); } }
@keyframes fadeOut { to { opacity: 0; } }
.screen-head { display: flex; align-items: center; gap: 1.2rem; padding: 2.2rem 3.2rem 1.4rem; }
.screen-head .crumb { font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.32em; color: var(--accent); text-transform: uppercase; }
.screen-head h1 { margin: 0.35rem 0 0; font: 700 var(--fs-2xl)/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.screen-head .grow { flex: 1; }
.screen-body { flex: 1; min-height: 0; padding: 0 3.2rem 2.4rem; display: flex; gap: 1.6rem; }
.stagger > * { animation: rise 380ms var(--ease-out) both; }
.stagger > *:nth-child(2) { animation-delay: 40ms; } .stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; } .stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(6) { animation-delay: 200ms; } .stagger > *:nth-child(7) { animation-delay: 240ms; }
.stagger > *:nth-child(8) { animation-delay: 280ms; }

/* Animated menu backdrop (pure CSS + one generated planet texture). */
.menu-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 90% at 70% 40%, #0b1a2b 0%, #050a12 45%, #020407 100%); }
.menu-bg .stars, .menu-bg .stars2 { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; }
.menu-bg .stars { animation: twinkle 6s ease-in-out infinite; }
.menu-bg .stars2 { animation: twinkle 9s ease-in-out -3s infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.menu-bg .nebula { position: absolute; inset: -20%; background:
  radial-gradient(40% 30% at 30% 30%, rgba(47, 168, 255, 0.10), transparent 70%),
  radial-gradient(35% 28% at 75% 70%, rgba(255, 74, 47, 0.07), transparent 70%),
  radial-gradient(30% 25% at 60% 20%, rgba(110, 90, 255, 0.07), transparent 70%);
  animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(3%, -2%, 0) scale(1.06); } }
.menu-bg .planet, .menu-bg .orbit, .menu-bg .stars, .menu-bg .stars2, .menu-bg .nebula { transition: translate 1.2s var(--ease-out); }
.menu-bg .planet { translate: calc(var(--mx, 0) * -1.4vh) calc(var(--my, 0) * -1vh); }
.menu-bg .orbit { translate: calc(var(--mx, 0) * -2vh) calc(var(--my, 0) * -1.4vh); }
.menu-bg .stars { translate: calc(var(--mx, 0) * -0.5vh) calc(var(--my, 0) * -0.4vh); }
.menu-bg .stars2 { translate: calc(var(--mx, 0) * -0.9vh) calc(var(--my, 0) * -0.7vh); }
.menu-bg .planet { position: absolute; width: 112vh; height: 112vh; right: -44vh; top: 50%; margin-top: -50vh; border-radius: 50%;
  box-shadow: -1.6vh -1.4vh 4vh rgba(120, 205, 255, 0.28), -4vh -4vh 18vh rgba(60, 150, 255, 0.16); }
.menu-bg .planet3d { position: absolute; width: 145.6vh; height: 145.6vh; right: -60.8vh; top: calc(50% - 66.8vh); opacity: 0; transition: opacity 1.4s var(--ease), translate 1.2s var(--ease-out); translate: calc(var(--mx, 0) * -1.4vh) calc(var(--my, 0) * -1vh); }
.menu-bg .planet3d canvas { display: block; width: 100%; height: 100%; }
.menu-bg.gl .planet3d { opacity: 1; }
.menu-bg .planet { transition: translate 1.2s var(--ease-out), opacity 1.4s var(--ease); }
.menu-bg.gl .planet { opacity: 0; }
.menu-bg .planet .surface, .menu-bg .planet .clouds, .menu-bg .planet .lights { position: absolute; inset: 0; border-radius: 50%; background-repeat: repeat-x; background-size: 200% 100%; }
.menu-bg .planet .surface { animation: planetSpin 300s linear infinite; filter: saturate(1.08) contrast(1.06); background-color: #071622; }
.menu-bg .planet .surface, .menu-bg .planet .clouds, .menu-bg .planet .lights { transition: opacity 900ms var(--ease); }
.menu-bg .planet:not(.ready) .clouds, .menu-bg .planet:not(.ready) .lights { opacity: 0; }
.menu-bg .planet .clouds { animation: planetSpin 200s linear infinite; opacity: 0.42; }
.menu-bg .planet .lights { animation: planetSpin 300s linear infinite; mix-blend-mode: screen; filter: drop-shadow(0 0 2px rgba(90, 235, 255, 0.95));
  -webkit-mask-image: radial-gradient(circle 112vh at 12% 24%, transparent 34%, rgba(0, 0, 0, 0.95) 50%); mask-image: radial-gradient(circle 112vh at 12% 24%, transparent 34%, rgba(0, 0, 0, 0.95) 50%); }
.menu-bg .planet .shade { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle 112vh at 12% 24%, rgba(255, 228, 196, 0.1) 0, transparent 20%, rgba(2, 5, 10, 0.42) 32%, rgba(1, 3, 6, 0.9) 44%, rgba(1, 2, 4, 0.97) 58%); }
.menu-bg .planet .rim { position: absolute; inset: -1px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 67.5%, rgba(150, 220, 255, 0.7) 70.4%, transparent 71.3%);
  -webkit-mask-image: radial-gradient(circle 112vh at 12% 24%, #000 26%, transparent 58%); mask-image: radial-gradient(circle 112vh at 12% 24%, #000 26%, transparent 58%); mix-blend-mode: screen; }
@keyframes planetSpin { from { background-position: 0 0; } to { background-position: -200% 0; } }
.menu-bg .orbit { position: absolute; right: 12vh; top: 56%; width: 150vh; height: 150vh; margin: -75vh -75vh 0 0; border-radius: 50%;
  border: 1px solid rgba(120, 200, 255, 0.14); transform: rotateX(74deg) rotateY(-14deg); }
.menu-bg .orbit.o2 { width: 190vh; height: 190vh; margin: -95vh -95vh 0 0; border-color: rgba(120, 200, 255, 0.08); border-style: dashed; }
.menu-bg .orbit .sat { position: absolute; inset: 0; border-radius: 50%; animation: spin 38s linear infinite; }
.menu-bg .orbit.o2 .sat { animation-duration: 70s; animation-direction: reverse; }
.menu-bg .orbit .sat::after { content: ''; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #bfe9ff; box-shadow: 0 0 10px 3px rgba(120, 210, 255, 0.8); }
.menu-bg .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(90, 170, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 170, 255, 0.05) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: radial-gradient(70% 70% at 30% 50%, black, transparent); -webkit-mask-image: radial-gradient(70% 70% at 30% 50%, black, transparent); }
.menu-bg .sweep { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(80, 190, 255, 0.05) 50%, transparent 100%) 0 0 / 100% 30% no-repeat; animation: sweep 9s linear infinite; }
@keyframes sweep { from { background-position: 0 -40%; } to { background-position: 0 140%; } }
.menu-bg .scan { position: absolute; inset: 0; background: var(--scan); opacity: 0.6; }
.menu-bg .dimmer { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 0%, rgba(6, 14, 24, 0.72), rgba(2, 4, 8, 0.9)); opacity: 0; transition: opacity 500ms var(--ease); }
.menu-bg.dim .dimmer { opacity: 1; }
.layer.menus.has-bg .lobby { background: transparent; }
.menu-bg .vignette { position: absolute; inset: 0; background: radial-gradient(130% 110% at 45% 50%, transparent 62%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(90deg, rgba(2, 4, 8, 0.85) 0%, rgba(2, 4, 8, 0.35) 38%, transparent 60%); }

/* Logo */
.logo { display: flex; align-items: center; gap: 1.1rem; }
.logo-mark { width: 4.4rem; height: 4.4rem; flex: none; filter: drop-shadow(0 0 0.8rem rgba(var(--accent-rgb), 0.55)); }
.logo-word { font: 700 4.6rem/0.9 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #d4e4f1 45%, #7f97ad 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-word b { font-weight: 700; background: linear-gradient(180deg, #c8f2ff 0%, #4fd2ff 50%, #1d8fd6 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 0.9rem rgba(var(--accent-rgb), 0.45)); }
.logo-sub { margin-top: 0.75rem; font: 600 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.55em; color: var(--text-dim); text-transform: uppercase; }
.logo-sub i { color: var(--accent); font-style: normal; }

/* Main menu */
.menu { padding: 0; }
.menu-left { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 5.5vh 0 4.5vh 5.5vw; width: min(42rem, 48vw); }
.menu-nav { margin-top: 6vh; display: flex; flex-direction: column; gap: 0.55rem; width: 25rem; }
.nav-item {
  --c-rgb: var(--accent-rgb); --bc: rgba(255, 255, 255, 0.07); --bg: linear-gradient(90deg, rgba(10, 18, 28, 0.78), rgba(10, 18, 28, 0.35));
  position: relative; display: flex; align-items: center; gap: 1rem; min-height: 3.35rem; padding: 0 1.2rem; border: 0; background: none; text-align: left;
  font: 700 var(--fs-lg)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2);
  transition: color var(--t), transform var(--t) var(--ease), filter var(--t);
}
.nav-item .ico { width: 1.45rem; height: 1.45rem; color: var(--text-dim); transition: color var(--t); }
.nav-item .nav-label { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.nav-item .nav-desc { font: 500 var(--fs-xs)/1.2 var(--font-body); letter-spacing: 0.02em; text-transform: none; color: var(--text-mute); transition: color var(--t); }
.nav-item .nav-arrow { opacity: 0; transform: translateX(-0.5rem); transition: opacity var(--t), transform var(--t) var(--ease); color: var(--accent); }
.nav-item:hover, .nav-item:focus-visible { color: #fff; transform: translateX(0.45rem); --bc: rgba(var(--c-rgb), 0.55); --bg: linear-gradient(90deg, rgba(var(--c-rgb), 0.22), rgba(var(--c-rgb), 0.04)); outline: none; }
.nav-item:hover .ico, .nav-item:focus-visible .ico { color: var(--accent); }
.nav-item:hover .nav-desc, .nav-item:focus-visible .nav-desc { color: var(--text-dim); }
.nav-item:hover .nav-arrow, .nav-item:focus-visible .nav-arrow { opacity: 1; transform: none; }
.nav-item.primary { min-height: 4.6rem; margin-bottom: 0.5rem; color: #031019; font-size: var(--fs-xl);
  --bc: rgba(var(--c-rgb), 0.95); --bg: linear-gradient(100deg, rgba(var(--c-rgb), 1), rgba(var(--c-rgb), 0.7) 70%, rgba(var(--c-rgb), 0.45));
  filter: drop-shadow(0 0 1.1rem rgba(var(--c-rgb), 0.35)); }
.nav-item.primary .ico { color: #031019; width: 1.8rem; height: 1.8rem; }
.nav-item.primary .nav-desc { color: rgba(2, 16, 25, 0.75); font-weight: 600; }
.nav-item.primary .nav-arrow { opacity: 1; transform: none; color: #031019; }
.nav-item.primary:hover, .nav-item.primary:focus-visible { color: #031019; --bg: linear-gradient(100deg, #fff, rgba(var(--c-rgb), 0.95) 60%, rgba(var(--c-rgb), 0.6)); filter: drop-shadow(0 0 1.6rem rgba(var(--c-rgb), 0.6)); }
.nav-item.primary:hover .ico, .nav-item.primary:hover .nav-desc { color: #031019; }
.nav-item.primary .live-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #031019; animation: pulse 1.6s infinite; }
.nav-item.primary.searching .live-dot { width: 1.05rem; height: 1.05rem; background: none; border: 2px solid rgba(3, 16, 25, 0.3); border-top-color: #031019; animation: spin 0.8s linear infinite; }
.nav-item.primary.searching { animation: readyGlow 1.6s ease-in-out infinite; }
.invite-btn.copied { --c-rgb: var(--ok-rgb); --bc: rgba(var(--ok-rgb), 0.8); color: #c4ffe5; }
.menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.9rem; width: 25rem; }
.callsign-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0.9rem; }
.callsign-card .avatar { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.35); flex: none; }
.callsign-card .avatar .ico { width: 1.6rem; height: 1.6rem; }
.callsign-card .who { flex: 1; min-width: 0; }
.callsign-card .who small { display: block; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.25em; color: var(--text-mute); text-transform: uppercase; }
.callsign-card .who b { display: block; margin-top: 0.3rem; font: 700 var(--fs-lg)/1.1 var(--font-ui); letter-spacing: 0.08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-line { display: flex; align-items: center; gap: 0.6rem; font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-dim); text-transform: uppercase; }
.server-line .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0.5rem var(--ok); }
.server-line.off .dot { background: var(--bad); box-shadow: 0 0 0.5rem var(--bad); animation: blink 1s infinite; }
.server-line .sep { width: 1px; height: 0.8rem; background: var(--line-2); }
.menu-right { position: absolute; right: 3vw; bottom: 4.5vh; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 0.8rem; }
.intel-card { width: 22rem; padding: 0 0 0.8rem; }
.intel-card .intel-row { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 1rem; font: 600 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.intel-card .intel-row b { font: 600 var(--fs-md)/1 var(--font-mono); color: var(--text); letter-spacing: 0; }
.intel-card .factions { display: flex; gap: 0.6rem; padding: 0.7rem 1rem 0.2rem; }
.faction-chip { flex: 1; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; font: 700 var(--fs-xs)/1.1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc); background: rgba(var(--fc-rgb), 0.08); border-left: 2px solid var(--fc); }
.faction-chip .ico { width: 1.4rem; height: 1.4rem; }
.version-line { font: 500 var(--fs-2xs)/1 var(--font-mono); color: var(--text-mute); letter-spacing: 0.06em; }

/* Callsign screen */
.callsign-screen { align-items: center; justify-content: center; }
.callsign-box { position: relative; z-index: 1; width: 34rem; padding: 2.2rem 2.4rem 2rem; animation: rise 420ms var(--ease-out) both; }
.callsign-box h2 { margin: 1.6rem 0 0.4rem; font: 700 var(--fs-xl)/1.1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.callsign-box p { margin: 0 0 1.4rem; color: var(--text-dim); line-height: 1.5; font-size: var(--fs-sm); }
.callsign-box .row { display: flex; gap: 0.6rem; align-items: stretch; }
.callsign-box .row .btn-icon { width: 2.9rem; min-height: 0; }
.callsign-box .err { min-height: 1.3rem; margin-top: 0.55rem; font-size: var(--fs-xs); color: var(--bad); }
.callsign-box .actions { margin-top: 1.1rem; display: flex; justify-content: flex-end; }
.callsign-box .logo-word { font-size: 2.6rem; }
.callsign-box .logo-mark { width: 2.8rem; height: 2.8rem; }

/* Room browser */
.browser-body { flex-direction: column; }
.browser-table { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.browser-table .thead, .browser-table .row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.6fr) 7.5rem 8.5rem 7.5rem 8.5rem; align-items: center; gap: 1rem; padding: 0 1.2rem; }
.browser-table .thead { height: 2.6rem; font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.22em; color: var(--text-mute); text-transform: uppercase; border-bottom: 1px solid var(--line); }
.browser-table .rows { flex: 1; min-height: 0; }
.browser-table .row { height: 3.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); cursor: pointer; transition: background var(--t); animation: rise 300ms var(--ease-out) both; }
.browser-table .rows.settled .row { animation: none; }
.browser-table .row:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.12), transparent); }
.browser-table .row .name { font: 700 var(--fs-lg)/1.1 var(--font-ui); letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-table .row .map { display: flex; align-items: center; gap: 0.7rem; color: var(--text-2); font: 600 var(--fs-md)/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.browser-table .row .map img { width: 3.6rem; height: 2.2rem; object-fit: cover; border: 1px solid var(--line-2); }
.browser-table .row .players { font: 600 var(--fs-md)/1 var(--font-mono); }
.browser-table .row .qtag { display: inline-block; vertical-align: 0.12em; margin-right: 0.55rem; padding: 0.2rem 0.4rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.4); }
.browser-table .row .status { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.browser-table .row .eta { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--amber); letter-spacing: 0.04em; white-space: nowrap; }
.browser-table .row .players .cap { color: var(--text-mute); }
.browser-table .row .players .bots { margin-left: 0.5rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; }
.browser-cta { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 1.2rem 1.2rem; padding: 1rem 1.2rem; border: 1px dashed rgba(var(--accent-rgb), 0.22); background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent 70%); animation: rise 400ms 120ms var(--ease-out) both; }
.browser-cta > .ico-wrap .ico { width: 2rem; height: 2rem; color: rgba(var(--accent-rgb), 0.7); }
.browser-cta .bc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.browser-cta .bc-t b { font: 700 var(--fs-md)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); }
.browser-cta .bc-t small { font: 400 var(--fs-xs)/1.45 var(--font-body); color: var(--text-dim); }
.browser-cta .actions { display: flex; gap: 0.6rem; flex: none; }
.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; color: var(--text-dim); text-align: center; padding: 3rem; }
.empty-state .ico { width: 3.4rem; height: 3.4rem; color: rgba(var(--accent-rgb), 0.6); }
.empty-state h3 { margin: 0; font: 700 var(--fs-xl)/1 var(--font-display); letter-spacing: 0.1em; color: var(--text); text-transform: uppercase; }
.empty-state p { margin: 0; max-width: 28rem; line-height: 1.5; font-size: var(--fs-sm); }
.empty-state .actions { display: flex; gap: 0.8rem; margin-top: 0.6rem; }

/* Create match / map cards */
.create-body { flex-direction: column; gap: 1.8rem; width: 100%; max-width: 140rem; margin: 0 auto; }
.create-body .map-card .info p { font-size: var(--fs-md); }
.form-row { display: flex; gap: 1.6rem; align-items: flex-end; }
.form-row > .grow { flex: 1; }
.map-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.map-card { --bg: rgba(8, 14, 22, 0.9); --bc: var(--line-2); padding: 0; border: 0; background: none; text-align: left; color: var(--text); display: flex; flex-direction: column; transition: transform var(--t) var(--ease), filter var(--t); }
.map-card .art { position: relative; aspect-ratio: 16 / 9; margin: 1px; overflow: hidden; clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) - 1px)); }
.map-card .art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); }
.map-card .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(4, 8, 13, 0.85)); }
.map-card .art .tag { position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 1; font: 700 var(--fs-xl)/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.map-card .art .check { position: absolute; right: 0.8rem; top: 0.8rem; z-index: 1; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; background: var(--accent); color: #021018; opacity: 0; transform: scale(0.6); transition: opacity var(--t), transform var(--t) var(--ease); }
.map-card .info { padding: 0.9rem 1rem 1rem; }
.map-card .info p { margin: 0 0 0.7rem; color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.45; min-height: 2.9em; }
.map-card .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.map-card:hover { transform: translateY(-3px); --bc: rgba(var(--accent-rgb), 0.6); }
.map-card:hover .art img { transform: scale(1.04); }
.map-card.on { --bc: rgba(var(--accent-rgb), 0.95); filter: drop-shadow(0 0 0.9rem rgba(var(--accent-rgb), 0.3)); }
.map-card.on .art .check { opacity: 1; transform: none; }
.map-card.compact .info { display: none; }
.map-card.compact .art { container-type: inline-size; }
.map-card.compact .art .tag { font-size: clamp(9px, 12.5cqi, var(--fs-sm)); letter-spacing: 0.02em; left: 0.45rem; right: 0.35rem; bottom: 0.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-card.compact .art .check { width: 1.4rem; height: 1.4rem; right: 0.4rem; top: 0.4rem; }
.create-actions { display: flex; gap: 0.9rem; justify-content: flex-end; margin-top: auto; }

/* Modal */
.modal-backdrop { position: absolute; inset: 0; z-index: 70; pointer-events: auto; display: grid; place-items: center; background: rgba(1, 4, 8, 0.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fadeIn 160ms var(--ease) both; }
.modal { width: min(46rem, 92vw); max-height: 88vh; display: flex; flex-direction: column; animation: rise 260ms var(--ease-out) both; }
.modal:focus, .modal:focus-visible { outline: none; }
.modal.wide { width: min(78rem, 94vw); height: min(54rem, 90vh); }
.modal.narrow { width: min(32rem, 92vw); }
.modal-head { display: flex; align-items: center; gap: 0.9rem; padding: 1.3rem 1.5rem 1rem; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; flex: 1; font: 700 var(--fs-xl)/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.modal-head .crumb { display: block; margin-bottom: 0.35rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.3em; color: var(--accent); text-transform: uppercase; }
.modal-body { padding: 1.3rem 1.5rem; flex: 1; min-height: 0; }
.modal-body p { margin: 0 0 0.8rem; line-height: 1.55; color: var(--text-2); }
.modal-foot { display: flex; gap: 0.8rem; justify-content: flex-end; padding: 1rem 1.5rem 1.3rem; border-top: 1px solid var(--line); }
.modal-grid { display: grid; gap: 1.2rem; }
.modal.wide.practice-modal { height: auto; }

/* Toasts (menu / global) */
.toasts { position: absolute; left: 50%; bottom: 3.4rem; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column-reverse; align-items: center; gap: 0.5rem; pointer-events: none; }
.toast { --t-rgb: var(--accent-rgb); display: flex; align-items: center; gap: 0.7rem; min-width: 18rem; max-width: 40rem; padding: 0.75rem 1.1rem; --bg: rgba(8, 14, 22, 0.92); --bc: rgba(var(--t-rgb), 0.55); color: var(--text); font: 600 var(--fs-md)/1.3 var(--font-ui); letter-spacing: 0.06em; animation: rise 240ms var(--ease-out) both; }
.toast .ico { color: rgb(var(--t-rgb)); width: 1.4rem; height: 1.4rem; }
.toast.error { --t-rgb: var(--bad-rgb); }
.toast.warn { --t-rgb: var(--amber-rgb); }
.toast.ok { --t-rgb: var(--ok-rgb); }
.toast.out { animation: fadeOut 300ms var(--ease) both; }

/* Connection banner */
.net-banner { position: absolute; top: 0; left: 50%; z-index: 90; transform: translate(-50%, -120%); display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1.4rem 0.75rem; pointer-events: auto;
  --bg: linear-gradient(180deg, rgba(60, 38, 6, 0.95), rgba(30, 20, 4, 0.95)); --bc: rgba(var(--amber-rgb), 0.7); --cut-a: 0.5rem;
  font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #ffe2b0; transition: transform 300ms var(--ease-out); }
.net-banner.show { transform: translate(-50%, 0.8rem); }
/* in battle the banner never covers the objective status: under the top bar (command / deploy views), under the
   compass, objective row and orders strip (operator view) */
#ui:has(.hud) .net-banner { top: 3.6rem; opacity: 0; visibility: hidden; transition: transform 300ms var(--ease-out), opacity 200ms, visibility 0s 300ms; }
#ui:has(.hud[data-mode='fps']) .net-banner { top: 13.5rem; }
#ui:has(.hud) .net-banner.show { opacity: 1; visibility: visible; transition: transform 300ms var(--ease-out), opacity 200ms, visibility 0s; }
.net-banner.ok { --bg: linear-gradient(180deg, rgba(8, 50, 34, 0.95), rgba(4, 28, 20, 0.95)); --bc: rgba(var(--ok-rgb), 0.7); color: #c4ffe5; }
.net-banner .spinner { border-color: rgba(var(--amber-rgb), 0.25); border-top-color: var(--amber); }
.net-banner .ico { width: 1.3rem; height: 1.3rem; }

/* Offline / connecting screen */
.connect-screen { align-items: center; justify-content: center; }
.connect-box { position: relative; z-index: 1; width: 34rem; padding: 2rem 2.2rem; text-align: center; animation: rise 300ms var(--ease-out) both; }
.connect-box h2 { margin: 1rem 0 0.5rem; font: 700 var(--fs-xl)/1.1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; }
.connect-box p { margin: 0 0 1.2rem; color: var(--text-dim); line-height: 1.5; font-size: var(--fs-sm); }
.connect-box .status { display: inline-flex; align-items: center; gap: 0.7rem; font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--text-2); text-transform: uppercase; }
.connect-box .logo { justify-content: center; }
.connect-box .logo-word { font-size: 2.6rem; }
.connect-box .logo-mark { width: 2.8rem; height: 2.8rem; }

/* ---------------------------------------------------------------------------------------------- lobby */
.lobby { background: radial-gradient(120% 100% at 50% 0%, #0b1726 0%, #050a12 55%, #020407 100%); }
.lobby .screen-head { padding-bottom: 1.1rem; }
.lobby-meta { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
.lobby-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem minmax(0, 1fr) 24rem; gap: 1.2rem; padding: 0 3.2rem; }
.team-col { --tc: var(--team-0); --tc-rgb: var(--team-0-rgb); display: flex; flex-direction: column; min-height: 0; --bc: rgba(var(--tc-rgb), 0.35); }
.team-col.t1 { --tc: var(--team-1); --tc-rgb: var(--team-1-rgb); }
.team-col.mine { --bc: rgba(var(--tc-rgb), 0.75); }
.team-head { position: relative; display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem 0.9rem; border-bottom: 1px solid rgba(var(--tc-rgb), 0.3);
  background: linear-gradient(90deg, rgba(var(--tc-rgb), 0.22), rgba(var(--tc-rgb), 0.02) 70%); }
.team-head .emblem { width: 2.9rem; height: 2.9rem; color: var(--tc); filter: drop-shadow(0 0 0.6rem rgba(var(--tc-rgb), 0.6)); }
.team-head .emblem .ico { width: 100%; height: 100%; }
.team-head .tname { flex: 1; min-width: 0; }
.team-head .tname small { display: block; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.3em; color: var(--tc); text-transform: uppercase; }
.team-head .tname b { display: block; margin-top: 0.35rem; font: 700 var(--fs-xl)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-head .count { font: 600 var(--fs-md)/1 var(--font-mono); color: var(--text-dim); }
.team-head .tname small.comp { margin-top: 0.4rem; font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-dim); }
.lobby-bar .btn-primary.all-ready { animation: readyGlow 1.6s ease-in-out infinite; }
@keyframes readyGlow { 0%, 100% { filter: drop-shadow(0 0 0.65rem rgba(var(--c-rgb), 0.35)); } 50% { filter: drop-shadow(0 0 1.4rem rgba(var(--c-rgb), 0.75)); } }
.team-list { position: relative; z-index: 1; flex: 1; min-height: 0; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.team-col .watermark { position: absolute; left: 50%; bottom: 6.5rem; width: 13rem; height: 13rem; transform: translateX(-50%); color: var(--tc); opacity: 0.03; pointer-events: none; z-index: 0; }
.team-col .watermark .ico { width: 100%; height: 100%; }
.slot-row { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 3.15rem; flex: none; padding: 0 0.8rem 0 0.6rem; background: linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)); border-left: 2px solid rgba(var(--tc-rgb), 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.slot-row .seat, .slot-empty .seat { flex: none; width: 1.5rem; font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-mute); letter-spacing: 0.04em; }
.slot-row.rdy { border-left-color: var(--ok); }
.slot-row.me .seat { color: var(--tc); }
.slot-row.fresh { animation: rise 260ms var(--ease-out) both; }
.slot-row.me { background: linear-gradient(90deg, rgba(var(--tc-rgb), 0.2), rgba(var(--tc-rgb), 0.03)); border-left-color: var(--tc); }
.slot-row.off { opacity: 0.55; }
.slot-row .role-ico { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; color: var(--text-2); flex: none; }
.slot-row .role-ico .ico { width: 1.4rem; height: 1.4rem; }
.slot-row .pname { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; font: 700 var(--fs-lg)/1 var(--font-ui); letter-spacing: 0.05em; }
.slot-row .pname span.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-row .pname .host { color: var(--amber); display: inline-flex; }
.slot-row .pname .host .ico { width: 1.1rem; height: 1.1rem; }
.slot-row .you { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--tc); }
.slot-row .ready { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; color: var(--text-mute); }
.slot-row .ready.on { color: var(--ok); filter: drop-shadow(0 0 0.4rem rgba(var(--ok-rgb), 0.7)); }
.slot-row .ready .ico { width: 1.25rem; height: 1.25rem; }
.slot-row .kick { opacity: 0.6; }
.slot-row .kick:hover { opacity: 1; }
.slot-empty { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.85rem 0 0.75rem; border: 1px dashed rgba(255, 255, 255, 0.075); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 0.5rem, transparent 0.5rem 1rem); color: rgba(255, 255, 255, 0.26); font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; flex: none; }
.slot-empty .ico { width: 1.05rem; height: 1.05rem; }
.slot-empty .lb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-empty.first { min-height: 3.15rem; }
.slot-empty.ai { border-style: solid; border-color: rgba(var(--tc-rgb), 0.22); background: linear-gradient(90deg, rgba(var(--tc-rgb), 0.09), rgba(var(--tc-rgb), 0.015)); color: rgba(var(--tc-rgb), 0.85); }
.slot-empty.ai .badge { --b: var(--tc); --b-rgb: var(--tc-rgb); }
.slot-more { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 1.05rem; font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.28); text-transform: uppercase; }
.slot-more .fill { color: rgba(var(--accent-rgb), 0.7); }
.slot-empty.joinable { cursor: pointer; transition: border-color var(--t), color var(--t), background var(--t); }
.slot-empty.joinable:hover { border-color: rgba(var(--tc-rgb), 0.6); color: var(--tc); background: rgba(var(--tc-rgb), 0.06); }
.team-ready { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.team-ready .rs-l { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.22em; color: var(--text-mute); text-transform: uppercase; }
.team-ready .rs-ticks { flex: 1; display: flex; gap: 3px; height: 0.42rem; }
.team-ready .rs-ticks i { flex: 1; background: rgba(255, 255, 255, 0.07); transform: skewX(-20deg); }
.team-ready .rs-ticks i.ready { background: var(--ok); box-shadow: 0 0 0.35rem rgba(var(--ok-rgb), 0.6); }
.team-ready .rs-ticks i.wait { background: rgba(var(--amber-rgb), 0.75); }
.team-ready .rs-ticks i.ai { background: rgba(var(--tc-rgb), 0.75); }
.team-ready .rs-t { font: 600 var(--fs-2xs)/1 var(--font-mono); color: var(--text-2); min-width: 6.5rem; text-align: right; }
.team-foot { position: relative; z-index: 1; display: flex; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid rgba(255, 255, 255, 0.05); align-items: center; flex-wrap: wrap; }
.team-foot .host-ctl { display: flex; gap: 0.5rem; align-items: center; }
.team-foot .join-btn { --c-rgb: var(--tc-rgb); }
.team-foot .grow { flex: 1; }
.vs-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.vs-col .vs { font: 700 var(--fs-2xl)/1 var(--font-display); letter-spacing: 0.04em; color: var(--text-mute); }
.vs-col .line { width: 1px; flex: 1; background: linear-gradient(180deg, transparent, var(--line-2), transparent); }
.lobby-side { display: flex; flex-direction: column; gap: 1rem; min-height: 0; overflow: hidden; }
.lobby-side .bf-panel { flex: none; }
.lobby-side .bigmap { padding: 0.7rem 0.7rem 0; }
.lobby-side .bigmap .map-card { width: 100%; }
.lobby-side.host .bigmap .map-card .info p { display: none; }
@media (max-height: 880px) {
  .lobby-side .map-card .info { display: none; }
  .lobby-side.host .bigmap { display: none; }
}
.lobby-side .map-card { pointer-events: none; }
.lobby-side .host-maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.7rem; }
.lobby-side .host-maps .map-card { pointer-events: auto; }
.setting-line { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border-top: 1px solid var(--line); }
.setting-line .lbl { flex: 1; }
.setting-line .lbl b { display: block; font: 700 var(--fs-sm)/1.1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.setting-line .lbl small { display: block; margin-top: 0.25rem; color: var(--text-mute); font-size: var(--fs-xs); line-height: 1.35; }
.lobby-chat { flex: 1; min-height: 7rem; display: flex; flex-direction: column; }
.lobby-chat .log { flex: 1; min-height: 0; padding: 0.6rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--fs-sm); line-height: 1.4; }
.lobby-chat .log .sys { color: var(--text-mute); font-style: italic; }
.lobby-chat form { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid var(--line); }
.lobby-chat .input { height: 2.3rem; font-size: var(--fs-sm); }
.chat-line .who { font-weight: 700; margin-right: 0.35em; }
.chat-line .scope { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.14em; margin-right: 0.4em; color: var(--text-mute); }
.lobby-bar { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 3.2rem 1.6rem; }
.lobby-bar .grow { flex: 1; }
.lobby-bar .hint { color: var(--text-mute); font-size: var(--fs-sm); }
.lobby-bar .ready-btn { min-width: 13rem; }
.auto-start { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 1rem 0.4rem 0.45rem; border: 1px solid rgba(var(--accent-rgb), 0.35); background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.02)); }
.auto-start svg { width: 2.9rem; height: 2.9rem; transform: rotate(-90deg); flex: none; }
.auto-start .trk { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 3; }
.auto-start .val { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 100ms linear; filter: drop-shadow(0 0 0.3rem rgba(var(--accent-rgb), 0.8)); }
.auto-start .as-t { position: relative; width: 0; margin-left: -2.2rem; margin-right: 1.5rem; text-align: center; }
.auto-start .as-t b { display: inline-block; width: 1.5rem; margin-left: -0.75rem; font: 700 var(--fs-md)/1 var(--font-mono); }
.auto-start .as-txt { display: flex; flex-direction: column; gap: 0.25rem; }
.auto-start .as-txt span { font: 700 var(--fs-md)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.auto-start .as-txt small { font: 600 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; }
.auto-start.soon { border-color: rgba(var(--amber-rgb), 0.7); background: linear-gradient(90deg, rgba(var(--amber-rgb), 0.18), rgba(var(--amber-rgb), 0.03)); }
.auto-start.soon .val { stroke: var(--amber); }
.lobby-bar .ready-btn.is-ready { --c-rgb: var(--ok-rgb); }
.countdown { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(circle, rgba(3, 8, 14, 0.55), rgba(1, 3, 6, 0.88)); pointer-events: auto; animation: fadeIn 200ms both; }
.countdown .num { font: 700 12rem/1 var(--font-display); color: #fff; text-shadow: 0 0 3rem rgba(var(--accent-rgb), 0.8); animation: countPop 1s var(--ease-out) both; }
.countdown .lbl { margin-top: 1rem; text-align: center; font: 700 var(--fs-lg)/1 var(--font-ui); letter-spacing: 0.5em; color: var(--accent); text-transform: uppercase; }
@keyframes countPop { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { transform: scale(0.92); opacity: 0.2; } }

/* ---------------------------------------------------------------------------------------------- how to play */
.howto-body { flex-direction: column; gap: 0; }
.howto-scroll { flex: 1; min-height: 0; padding-right: 0.8rem; }
.howto-section { margin: 0 0 2.2rem; }
.howto-section > h2 { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1rem; font: 700 var(--fs-lg)/1 var(--font-ui); letter-spacing: 0.28em; color: var(--text-2); text-transform: uppercase; }
.howto-section > h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.howto-lead { max-width: 64rem; margin: 0 0 1.2rem; font-size: var(--fs-lg); line-height: 1.6; color: var(--text-2); }
.dg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.diagram { margin: 0 0 1rem; padding: 0.7rem 0.7rem 0.8rem; }
.dg-row .diagram { margin: 0; }
.diagram .dg svg { display: block; width: 100%; height: auto; }
.diagram figcaption { margin-top: 0.6rem; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-dim); }
.diagram .bg { fill: rgba(4, 10, 16, 0.75); stroke: rgba(150, 210, 255, 0.12); }
.diagram .grid path { stroke: rgba(120, 190, 255, 0.1); stroke-width: 1; }
.diagram .grid.faint path { stroke: rgba(120, 190, 255, 0.08); }
.diagram .lbl { font: 700 9px/1 'Rajdhani', sans-serif; letter-spacing: 0.16em; fill: #cfe0ee; }
.diagram .lbl.dim { fill: #8798a9; }
.diagram .lbl.c { text-anchor: middle; }
.diagram .lbl.big { font: 700 14px/1 'Chakra Petch', sans-serif; fill: #d8d2c0; dominant-baseline: middle; }
.diagram .lbl.ok { fill: #46e6a0; }
.diagram .cut { fill: #050b12; }
.diagram .t0 rect, .diagram .t0 circle, .diagram .t0f { fill: rgba(47, 168, 255, 0.35); stroke: #2fa8ff; stroke-width: 1.5; }
.diagram .t0s { fill: none; stroke: #2fa8ff; stroke-width: 1.5; }
.diagram .t1 rect, .diagram .t1 circle { fill: rgba(255, 74, 47, 0.35); stroke: #ff4a2f; stroke-width: 1.5; }
.diagram .order, .diagram .up, .diagram .flow { fill: none; stroke: #ffb547; stroke-width: 1.6; stroke-dasharray: 5 4; }
.diagram .up { stroke: #46e6a0; }
.diagram .flow { stroke: rgba(207, 224, 238, 0.7); stroke-dasharray: none; }
.diagram .flow.ret { stroke: rgba(70, 230, 160, 0.75); stroke-dasharray: 5 4; }
.diagram .arrowhead { fill: rgba(207, 224, 238, 0.85); }
.diagram .ground { fill: rgba(40, 70, 50, 0.45); stroke: rgba(120, 200, 140, 0.35); }
.diagram .link path { fill: none; stroke: #ffcf7a; stroke-width: 2; }
.diagram .fpv circle { fill: none; stroke: #ffcf7a; stroke-width: 1.6; }
.diagram .fpv path { stroke: #ffcf7a; stroke-width: 1.8; }
.diagram .fpv .dot { fill: #ff5a5a; stroke: none; }
.diagram .crys { fill: rgba(111, 240, 255, 0.35); stroke: #6ff0ff; stroke-width: 1.5; }
.diagram .cp { fill: rgba(216, 210, 192, 0.12); stroke: #d8d2c0; stroke-width: 1.8; }
.diagram .ring { fill: rgba(47, 168, 255, 0.08); stroke: rgba(47, 168, 255, 0.85); stroke-width: 1.6; }
.diagram .ring.hot { fill: rgba(255, 207, 122, 0.1); stroke: #ffcf7a; }
.diagram .ring.warn { fill: rgba(255, 77, 94, 0.08); stroke: #ff6b75; }
.diagram .chain, .diagram .cross { fill: none; stroke: #e7f0f7; stroke-width: 2; stroke-linecap: round; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 1rem; }
.info-card { padding: 1.1rem 1.2rem 1.2rem; }
.info-card .ic { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.3); margin-bottom: 0.8rem; }
.info-card .ic .ico { width: 1.6rem; height: 1.6rem; }
.info-card h3 { margin: 0 0 0.45rem; font: 700 var(--fs-lg)/1.1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.info-card p { margin: 0; color: var(--text-dim); line-height: 1.55; font-size: var(--fs-sm); }
.info-card.role-cmd .ic { color: #8fd8ff; }
.info-card.role-opr .ic { color: #ffcf7a; background: rgba(255, 207, 122, 0.1); border-color: rgba(255, 207, 122, 0.35); }
.keys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.key-table { width: 100%; border-collapse: collapse; }
.key-table td { padding: 0.5rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: var(--fs-sm); color: var(--text-2); vertical-align: middle; }
.key-table td:first-child { width: 44%; white-space: nowrap; }
.key-table .kbd + .kbd, .key-table .kbd + .plus { margin-left: 0.25rem; }
.key-table .plus { color: var(--text-mute); margin: 0 0.25rem; font-size: var(--fs-xs); }
.unit-tile { display: flex; gap: 0.9rem; padding: 0.9rem 1rem; align-items: flex-start; }
.unit-tile .ic { width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; color: var(--text); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.unit-tile .ic .ico { width: 1.6rem; height: 1.6rem; }
.unit-tile h4 { margin: 0 0 0.3rem; font: 700 var(--fs-md)/1.1 var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; display: flex; gap: 0.5rem; align-items: center; }
.unit-tile h4 .cost { margin-left: auto; font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--crystal); letter-spacing: 0; display: inline-flex; align-items: center; gap: 0.2rem; }
.unit-tile p { margin: 0; color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.45; }

/* ---------------------------------------------------------------------------------------------- settings */
.settings-layout { display: flex; flex-direction: column; height: 100%; }
.settings-content { flex: 1; min-height: 0; padding: 0.4rem 1.6rem 1.2rem; }
.set-group { margin: 1.2rem 0 0.2rem; font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.3em; color: var(--accent); text-transform: uppercase; }
.set-row { display: flex; align-items: center; gap: 1.5rem; padding: 0.85rem 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.set-row .lbl { flex: 1; min-width: 0; }
.set-row .lbl b { display: block; font: 700 var(--fs-md)/1.1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.set-row .lbl small { display: block; margin-top: 0.3rem; color: var(--text-mute); font-size: var(--fs-xs); line-height: 1.35; }
.set-row .ctl { width: 22rem; display: flex; align-items: center; gap: 0.9rem; justify-content: flex-end; }
.set-row .ctl .val { min-width: 4.2rem; text-align: right; font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--text-2); }
.set-row .ctl .reset { opacity: 0; transition: opacity var(--t); }
.set-row:hover .ctl .reset.changed { opacity: 0.8; }
.bind-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 0.9rem; align-items: start; }
.bind-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.bind-intro { margin: 1rem 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-dim); }
.bind-intro .kbd { margin: 0 0.15em; }
.bind-panel .panel-title .ico { width: 1.15rem; height: 1.15rem; color: var(--accent); }
.bind-list { padding: 0.3rem 0.5rem 0.6rem; }
.bind-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 2.05rem; align-items: center; gap: 0.6rem; min-height: 2.45rem; padding: 0.15rem 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.bind-row .bl { font: 500 var(--fs-sm)/1.25 var(--font-body); color: var(--text-2); }
.bind-row.custom .bl { color: #fff; }
.bind-row .bk { display: flex; gap: 0.3rem; justify-content: flex-end; }
.bind-row .reset { opacity: 0; transition: opacity var(--t); }
.bind-row .reset.changed { opacity: 0.85; }
.bind-row.fixed { grid-template-columns: minmax(0, 1fr) auto; opacity: 0.6; }
.bind-sub { margin: 0.7rem 0.4rem 0.2rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.24em; color: var(--text-mute); text-transform: uppercase; }
.kbd.bchip { min-width: 2.6em; height: 1.9em; padding: 0 0.55em; font-size: var(--fs-2xs); cursor: pointer; transition: border-color var(--t), background var(--t), color var(--t); }
.kbd.bchip:hover { border-color: rgba(var(--accent-rgb), 0.8); background: rgba(var(--accent-rgb), 0.18); }
.kbd.bchip.add { color: var(--text-mute); border-style: dashed; opacity: 0; transition: opacity var(--t); }
.bind-row:hover .kbd.bchip.add, .kbd.bchip.add:focus-visible, .kbd.bchip.add.listening { opacity: 1; }
.kbd.bchip.listening { min-width: 9em; color: #031019; background: var(--amber); border-color: var(--amber); animation: pulse 0.9s infinite; }
.bind-msg { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem 0.5rem; margin-bottom: 0.3rem; font: 600 var(--fs-xs)/1.35 var(--font-ui); letter-spacing: 0.04em; }
.bind-msg.bad { color: #ffb3b9; background: rgba(var(--bad-rgb), 0.1); border-left: 2px solid var(--bad); }
.bind-msg.warn { color: #ffe2b0; background: rgba(var(--amber-rgb), 0.1); border-left: 2px solid var(--amber); }
.bind-msg .btn { min-height: 1.7rem; }
.bind-foot { display: flex; justify-content: flex-end; margin-top: 1rem; }
.preset-box { margin: 0.2rem 0 0.6rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); }
.preset-box .pb-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.24em; color: var(--text-dim); text-transform: uppercase; }
.preset-box .pb-head .ico { width: 1rem; height: 1rem; color: var(--accent); }
.preset-box .pb-sum { margin: 0 0 0.7rem; font: 400 var(--fs-xs)/1.5 var(--font-body); color: var(--text-2); }
.preset-box .pb-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 0.45rem 1.2rem; align-items: baseline; }
.preset-box .k { font: 700 var(--fs-2xs)/1.3 var(--font-ui); letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; white-space: nowrap; }
.preset-box .v { font: 600 var(--fs-xs)/1.3 var(--font-ui); letter-spacing: 0.04em; color: var(--text); }
.preset-box .pb-empty { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--text-mute); }

/* ---------------------------------------------------------------------------------------------- loading */
.loading { z-index: 60; background: #03060a; align-items: center; justify-content: center; }
.loading .bgart { position: absolute; inset: -4%; background-size: cover; background-position: center; filter: blur(3px) saturate(1.1) brightness(0.42); transform: scale(1.06); animation: kenburns 20s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.loading .shade { position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 50%, rgba(3, 6, 10, 0.2), rgba(3, 6, 10, 0.92)), var(--scan); }
.loading .center { position: relative; z-index: 1; width: min(60rem, 86vw); text-align: center; animation: rise 500ms var(--ease-out) both; }
.loading .op { font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.5em; color: var(--accent); text-transform: uppercase; }
.loading h1 { margin: 1rem 0 0.4rem; font: 700 5rem/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 0 2.4rem rgba(var(--accent-rgb), 0.35); }
.loading .desc { margin: 0 auto; max-width: 40rem; color: var(--text-2); line-height: 1.55; }
.loading .side { margin: 2rem auto 0; display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1.2rem; font: 700 var(--fs-md)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--team); background: rgba(var(--team-rgb), 0.1); border: 1px solid rgba(var(--team-rgb), 0.4); }
.loading .side .ico { width: 1.6rem; height: 1.6rem; }
.loading .ld-role { margin: 0.9rem auto 0; display: flex; align-items: center; justify-content: center; gap: 0.55rem; font: 500 var(--fs-sm)/1.3 var(--font-body); color: var(--text-2); animation: rise 500ms 120ms var(--ease-out) both; }
.loading .ld-role .ico { width: 1.15rem; height: 1.15rem; color: var(--team); }
.loading .ld-role b { font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.22em; color: #fff; text-transform: uppercase; }
.loading .ld-role b::after { content: '·'; margin-left: 0.55rem; color: var(--text-mute); }
.loading .ld-brief { margin: 2.2rem auto 0; display: flex; justify-content: center; gap: 1.1rem; }
.loading .ld-obj { display: flex; align-items: center; gap: 0.7rem; min-width: 0; width: 15.5rem; padding: 0.65rem 0.85rem; text-align: left; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(10, 18, 28, 0.7), rgba(4, 8, 13, 0.7)); animation: rise 500ms var(--ease-out) both; }
.loading .ld-obj:nth-child(2) { animation-delay: 80ms; } .loading .ld-obj:nth-child(3) { animation-delay: 160ms; }
.loading .ld-obj .ico { width: 1.6rem; height: 1.6rem; color: var(--accent); flex: none; }
.loading .ld-obj b { display: block; font: 700 var(--fs-sm)/1.1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.loading .ld-obj small { display: block; margin-top: 0.25rem; font: 500 var(--fs-2xs)/1.3 var(--font-body); color: var(--text-dim); }
@media (max-height: 760px) { .loading .ld-brief { display: none; } }
.loading .prog { margin: 2.2rem auto 0; width: min(36rem, 70vw); }
.loading .prog .track { position: relative; height: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.loading .prog .track i { position: absolute; top: 0; bottom: 0; width: 35%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: indet 1.3s var(--ease) infinite; }
@keyframes indet { from { left: -35%; } to { left: 100%; } }
.ld-steps { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.ld-step { display: flex; align-items: center; gap: 0.45rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: var(--text-mute); text-transform: uppercase; white-space: nowrap; transition: color 300ms; }
.ld-step .d { width: 0.5rem; height: 0.5rem; transform: rotate(45deg); border: 1px solid rgba(255, 255, 255, 0.25); transition: background 300ms, border-color 300ms, box-shadow 300ms; }
.ld-step.done { color: var(--text-dim); }
.ld-step.done .d { background: rgba(var(--accent-rgb), 0.6); border-color: rgba(var(--accent-rgb), 0.6); }
.ld-step.on { color: #fff; }
.ld-step.on .d { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0.6rem var(--accent); animation: pulse 1.1s infinite; }
.loading .prog .stage { margin-top: 0.8rem; display: flex; justify-content: space-between; font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.loading .ld-tip { position: absolute; z-index: 1; left: 50%; bottom: 6vh; transform: translateX(-50%); width: min(52rem, 86vw); text-align: center; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.loading .ld-tip { display: flex; align-items: center; justify-content: center; gap: 0.55rem; }
.loading .ld-tip .ico { width: 1.15rem; height: 1.15rem; color: var(--amber); }
.loading .ld-tip b { color: var(--amber); font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.25em; margin-right: 0.3rem; text-transform: uppercase; }
.loading .ld-tip.swap > span:last-child { animation: fadeIn 500ms var(--ease) both; }
.loading.out { animation: fadeOut 500ms var(--ease) both; }
.ld-rosters { position: absolute; z-index: 1; left: 0; right: 0; margin: 0 auto; bottom: calc(6vh + 3.4rem); display: flex; align-items: flex-start; gap: 2.4rem; width: min(64rem, 90vw); justify-content: center; animation: rise 600ms 200ms var(--ease-out) both; }
.ld-team { flex: 1; min-width: 0; max-width: 26rem; }
.ld-team.t0 { text-align: right; }
.ld-team-h { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--tc); font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--tc); text-transform: uppercase; }
.ld-team.t0 .ld-team-h, .ld-team.t0 .ld-p { flex-direction: row-reverse; }
.ld-team-h .ico { width: 1.3rem; height: 1.3rem; }
.ld-p { display: flex; align-items: center; gap: 0.5rem; padding: 0.22rem 0; font: 600 var(--fs-md)/1.2 var(--font-ui); letter-spacing: 0.04em; color: var(--text-2); }
.ld-p .ico { width: 1.05rem; height: 1.05rem; color: var(--text-dim); }
.ld-p.me { color: #fff; }
.ld-p.me .ico { color: var(--tc); }
.ld-p.ai { color: var(--text-mute); }
.ld-vs { align-self: center; font: 700 var(--fs-xl)/1 var(--font-display); color: var(--text-mute); }
@media (max-height: 660px) { .ld-rosters { display: none; } }
@media (max-height: 800px) { .ld-rosters { bottom: calc(5vh + 2.8rem); } .ld-team-h { margin-bottom: 0.35rem; padding-bottom: 0.3rem; } .ld-p { padding: 0.12rem 0; } }

/* ---------------------------------------------------------------------------------------------- results */
.results { z-index: 55; background: radial-gradient(100% 80% at 50% 20%, rgba(3, 8, 14, 0.55), rgba(1, 3, 6, 0.92)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); align-items: center; overflow-y: auto; }
.results .inner { width: min(96rem, 94vw); padding: 4vh 0 3vh; display: flex; flex-direction: column; gap: 1.4rem; }
.result-banner { position: relative; text-align: center; padding: 1.4rem 0 1rem; --rc: var(--team); --rc-rgb: var(--team-rgb); animation: resHero 1.6s var(--ease-out) both; }
/* the verdict lands alone in the middle of the screen, then lifts to the top while the debrief rises in under it */
@keyframes resHero { 0% { transform: translateY(26vh) scale(1.16); } 55% { transform: translateY(26vh) scale(1.06); } 100% { transform: none; } }
.result-banner.defeat { --rc: #ff5b54; --rc-rgb: 255, 91, 84; }
.result-banner.draw { --rc: #cfd8e0; --rc-rgb: 207, 216, 224; }
.result-banner .kicker { font: 700 var(--fs-sm)/1 var(--font-ui); letter-spacing: 0.6em; color: var(--text-dim); text-transform: uppercase; animation: rise 500ms 100ms var(--ease-out) both; }
.result-banner h1 { position: relative; display: inline-block; margin: 0.7rem 0 0.5rem; font: 700 min(8.5rem, 12vh)/0.95 var(--font-display); letter-spacing: 0.16em; padding-left: 0.16em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 2.2rem rgba(var(--rc-rgb), 0.9), 0 0 5rem rgba(var(--rc-rgb), 0.5); animation: bannerIn 900ms var(--ease-out) both; }
.result-banner h1::after { content: attr(data-text); position: absolute; inset: 0; padding-left: 0.16em; text-shadow: none; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%) -150% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bannerSweep 2.6s 0.8s var(--ease) infinite; }
@keyframes bannerIn { 0% { opacity: 0; letter-spacing: 0.6em; filter: blur(12px); } 100% { opacity: 1; letter-spacing: 0.16em; filter: none; } }
@keyframes bannerSweep { 0% { background-position: -150% 0; } 60%, 100% { background-position: 250% 0; } }
.result-banner .rule { width: min(48rem, 70%); height: 2px; margin: 0.4rem auto 0.9rem; background: linear-gradient(90deg, transparent, var(--rc), transparent); box-shadow: 0 0 1rem rgba(var(--rc-rgb), 0.8); }
.result-banner .reason { font: 600 var(--fs-lg)/1.3 var(--font-ui); letter-spacing: 0.14em; color: var(--text-2); text-transform: uppercase; }
.result-banner .meta { margin-top: 0.8rem; display: inline-flex; gap: 1.6rem; font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--text-dim); }
.result-banner .meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.result-hl { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 1.2rem; animation: rise 520ms 1.05s var(--ease-out) both; }
.mvp-card { --tc: var(--team); --tc-rgb: var(--team-rgb); grid-row: span 2; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 42%; grid-template-rows: auto 1fr auto; gap: 1rem 0; padding: 1.1rem 1.3rem 1.2rem; overflow: hidden; --bc: rgba(var(--tc-rgb), 0.55);
  --bg: radial-gradient(120% 120% at 0% 0%, rgba(var(--tc-rgb), 0.28), transparent 55%), var(--scan), linear-gradient(180deg, rgba(16, 26, 38, 0.9), rgba(7, 12, 19, 0.92)); }
.mvp-card > *:not(.mvp-pic) { position: relative; z-index: 1; }
.mvp-card .mvp-badge { grid-column: 1; grid-row: 1; justify-self: start; }
.mvp-card .mvp-who { grid-column: 1; grid-row: 2; align-self: center; }
.mvp-card .mvp-stats { grid-column: 1 / -1; grid-row: 3; }
/* the MVP's frame (rendered portrait) filling the top-right of the card, fading into it */
.mvp-pic { grid-column: 2; grid-row: 1 / 3; position: relative; margin: -1.1rem -1.3rem 0 0; min-height: 7.5rem; z-index: 0; pointer-events: none; display: grid; place-items: center; color: rgba(var(--tc-rgb), 0.35);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%), linear-gradient(0deg, transparent, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 34%), linear-gradient(0deg, transparent, #000 22%); mask-composite: intersect; }
.mvp-pic .ico { width: 5rem; height: 5rem; opacity: 0.35; }
.mvp-pic.has-img .ico-wrap { display: none; }
.mvp-pic .pimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: mvpPic 900ms 1.2s var(--ease-out) both; }
@keyframes mvpPic { from { opacity: 0; transform: translateX(1.5rem) scale(1.04); } to { opacity: 1; transform: none; } }
.result-hl.no-awards .your-battle { grid-row: span 2; display: flex; flex-direction: column; }
.result-hl.no-awards .yb-grid { flex: 1; align-content: center; gap: 1.1rem 0.8rem; }
.result-hl.no-awards .yb-grid .ys b { font-size: var(--fs-xl); }
.mvp-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.65rem; font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.32em; color: #1d1300; background: linear-gradient(180deg, #ffd27a, #ffb547); }
.mvp-badge .ico { width: 1rem; height: 1rem; }
.mvp-who { display: flex; align-items: center; gap: 0.9rem; }
.mvp-ic { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; color: var(--tc); background: rgba(var(--tc-rgb), 0.14); border: 1px solid rgba(var(--tc-rgb), 0.6); }
.mvp-ic .ico { width: 2.1rem; height: 2.1rem; filter: drop-shadow(0 0 0.5rem rgba(var(--tc-rgb), 0.7)); }
.mvp-who b { display: block; font: 700 var(--fs-2xl)/1 var(--font-display); letter-spacing: 0.06em; }
.mvp-who small { display: block; margin-top: 0.35rem; font: 700 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; }
.mvp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.05); margin-top: auto; }
.mvp-stats .ms { padding: 0.65rem 0.8rem; background: rgba(5, 9, 15, 0.7); }
.mvp-stats .ms b { display: block; font: 600 var(--fs-xl)/1 var(--font-mono); color: #fff; }
.mvp-stats .ms small { display: block; margin-top: 0.35rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.18em; color: var(--text-mute); text-transform: uppercase; }
.awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.award { --tc: var(--team); display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; }
.award .aw-ic { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; color: #ffd27a; background: rgba(var(--amber-rgb), 0.1); border: 1px solid rgba(var(--amber-rgb), 0.45); }
.award .aw-ic .ico { width: 1.5rem; height: 1.5rem; }
.award .aw-t { min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; }
.award .aw-t small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.24em; color: var(--amber); text-transform: uppercase; }
.award .aw-t b { font: 700 var(--fs-md)/1.1 var(--font-ui); letter-spacing: 0.06em; color: var(--tc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.award .aw-t span { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--text-2); }
.your-battle { padding: 0.75rem 0.9rem 0.85rem; }
.your-battle .yb-h { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.26em; color: var(--text-dim); text-transform: uppercase; }
.your-battle .yb-h .ico { width: 1rem; height: 1rem; color: var(--team); }
.yb-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem 0.8rem; }
.yb-grid .ys small { display: block; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; white-space: nowrap; }
.yb-grid .ys b { display: block; margin-top: 0.3rem; font: 600 var(--fs-lg)/1 var(--font-mono); color: var(--text); }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; animation: rise 520ms 1.17s var(--ease-out) both; }
.team-stats { --tc: var(--team-0); --tc-rgb: var(--team-0-rgb); --bc: rgba(var(--tc-rgb), 0.4); }
.team-stats.t1 { --tc: var(--team-1); --tc-rgb: var(--team-1-rgb); }
.team-stats .head { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.1rem; background: linear-gradient(90deg, rgba(var(--tc-rgb), 0.22), transparent 75%); border-bottom: 1px solid rgba(var(--tc-rgb), 0.3); }
.team-stats .head .ico { width: 2rem; height: 2rem; color: var(--tc); }
.team-stats .head b { flex: 1; font: 700 var(--fs-lg)/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.team-stats .head .win { color: var(--amber); }
.stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.04); }
.stat-tile { padding: 0.75rem 0.9rem; background: rgba(6, 11, 17, 0.7); }
.stat-tile small { display: block; font: 700 var(--fs-2xs)/1.1 var(--font-ui); letter-spacing: 0.18em; color: var(--text-mute); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-tile b { display: block; margin-top: 0.35rem; font: 600 var(--fs-xl)/1 var(--font-mono); color: var(--text); }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th { padding: 0.55rem 0.8rem; font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.2em; color: var(--text-mute); text-transform: uppercase; text-align: right; border-bottom: 1px solid var(--line); }
.ptable th:first-child, .ptable td:first-child { text-align: left; }
.ptable td { padding: 0.5rem 0.8rem; font: 600 var(--fs-sm)/1.1 var(--font-mono); text-align: right; color: var(--text-2); border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.ptable td.pn { font: 700 var(--fs-md)/1.1 var(--font-ui); letter-spacing: 0.05em; color: var(--text); }
.ptable td.pn .wrap { display: flex; align-items: center; gap: 0.5rem; }
.ptable td.pn .ico { width: 1.15rem; height: 1.15rem; color: var(--text-dim); }
.ptable tr.me td { background: rgba(var(--tc-rgb, var(--accent-rgb)), 0.12); }
.ptable tr.mvp td.pn .mvp { color: var(--amber); display: inline-flex; }
.ptable tr.left td { opacity: 0.55; }
.ptable .left-tag { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; padding: 0.15rem 0.35rem; border: 1px solid var(--line-2); }
.timeline-card { animation: rise 520ms 1.29s var(--ease-out) both; }
.timeline-card svg { display: block; width: 100%; height: 11rem; }
.timeline-legend { display: flex; gap: 1.2rem; padding: 0 1rem 0.8rem; font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.timeline-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.timeline-legend i { width: 0.9rem; height: 3px; background: var(--lc); }
.results-actions { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; gap: 1rem; padding: 1.2rem 0 1.4rem; margin-top: -0.4rem; background: linear-gradient(180deg, transparent, rgba(2, 5, 9, 0.92) 40%); animation: rise 520ms 1.38s var(--ease-out) both; }
.results .inner { padding-bottom: 0; }

/* ---------------------------------------------------------------------------------------------- pause */
.pause { z-index: 52; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(3, 8, 14, 0.55), rgba(1, 3, 6, 0.85)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pause-box { width: 28rem; padding: 1.4rem 1.4rem 1.2rem; animation: rise 240ms var(--ease-out) both; }
.pause-box h2 { margin: 0 0 0.2rem; font: 700 var(--fs-2xl)/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.pause-box .sub { margin-bottom: 1.2rem; font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.22em; color: var(--text-dim); text-transform: uppercase; }
.pause-status { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: -0.4rem 0 1.1rem; padding: 0.55rem 0.7rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.pause-status > span { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.pause-status .ico { width: 1rem; height: 1rem; color: var(--text-dim); }
.pause-status small { font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-dim); text-transform: uppercase; }
.pause-status b { font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--text); }
.pause-status b.mine { color: var(--mc); } .pause-status b.theirs { color: var(--tc); }
.pause-box .list { display: flex; flex-direction: column; gap: 0.5rem; }
.pause-box .list .btn { justify-content: flex-start; width: 100%; }
.pause-box .list .btn .kbd { margin-left: auto; }
.pause-box .note { margin-top: 1rem; font-size: var(--fs-xs); color: var(--text-mute); line-height: 1.4; }
.pause-box .vote { margin-top: 0.8rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; font: 700 var(--fs-xs)/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); background: rgba(var(--amber-rgb), 0.08); border: 1px solid rgba(var(--amber-rgb), 0.35); }
.pause-box .vote .ico { width: 1.1rem; height: 1.1rem; }

/* Global error overlay (main.js) */
.err-overlay { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; width: min(44rem, 92vw); max-height: 60vh; display: flex; flex-direction: column; pointer-events: auto;
  background: rgba(24, 6, 10, 0.96); border: 1px solid rgba(255, 77, 94, 0.6); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6); font-family: var(--font-mono); color: #ffd9dc; user-select: text; }
.err-overlay header { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; background: rgba(255, 77, 94, 0.18); font: 700 13px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; }
.err-overlay header .grow { flex: 1; }
.err-overlay header button { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font: 700 11px/1 var(--font-ui); letter-spacing: 0.1em; padding: 0.35rem 0.6rem; text-transform: uppercase; }
.err-overlay .list { overflow: auto; padding: 0.4rem 0.8rem 0.8rem; }
.err-overlay .item { padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.err-overlay .item b { display: block; color: #fff; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.err-overlay .item pre { margin: 0.3rem 0 0; font-size: 11px; line-height: 1.45; color: #ffb3b9; white-space: pre-wrap; word-break: break-word; }

/* ================================================================ colorblind palette */
.cb { --team-0: #3d9bff; --team-0-rgb: 61, 155, 255; --team-1: #ffc61a; --team-1-rgb: 255, 198, 26; }

/* ================================================================ reduced motion (OS preference or Settings → Reduce motion) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .menu-bg .planet .surface, .menu-bg .planet .clouds, .menu-bg .planet .lights, .menu-bg .orbit .sat, .menu-bg .sweep, .menu-bg .nebula { animation: none !important; }
  .menu-bg .planet, .menu-bg .orbit, .menu-bg .stars, .menu-bg .stars2 { translate: none !important; }
}
html.rm *, html.rm *::before, html.rm *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
html.rm .menu-bg .planet .surface, html.rm .menu-bg .planet .clouds, html.rm .menu-bg .planet .lights, html.rm .menu-bg .orbit .sat, html.rm .menu-bg .sweep, html.rm .menu-bg .nebula { animation: none !important; }
html.rm .menu-bg .planet, html.rm .menu-bg .orbit, html.rm .menu-bg .stars, html.rm .menu-bg .stars2 { translate: none !important; }

/* ================================================================ small screens (≤ 1366 wide) */
@media (max-width: 1366px) {
  .lobby-main { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr) 21rem; padding: 0 2rem; }
  .screen-head, .lobby-bar { padding-left: 2rem; padding-right: 2rem; }
  .screen-body { padding-left: 2rem; padding-right: 2rem; }
  .browser-table .thead, .browser-table .row { grid-template-columns: minmax(0, 3fr) minmax(0, 1.8fr) 6.5rem 7.5rem 6.5rem 7.5rem; }
}

/* debrief fits a 1080p screen without scrolling (the sticky actions bar no longer hides the timeline) */
@media (max-height: 1150px) and (min-height: 801px) {
  .results .inner { gap: 1.1rem; padding-top: 2.5vh; }
  .result-banner { padding-top: 0.6rem; }
  .result-banner h1 { font-size: min(8.5rem, 10vh); }
  .timeline-card svg { height: 8rem; }
}

/* ================================================================ short screens (≤ 800 tall) */
@media (max-height: 800px) {
  .timeline-card svg { height: 7rem; }
  .result-banner { padding-top: 0.6rem; }
  .results .inner { gap: 1rem; padding-top: 2.5vh; }
}