/* == HeavyMek design system ==================================================
   Cockpit-MFD theme: steel hull, command-orange + ice-cyan duo, phosphor glow,
   chamfered bezels, scanline atmosphere. Dark-only, tuned for AA readability.
   Display: Rajdhani · Data: IBM Plex Mono · Body: Barlow
============================================================================ */
:root {
  /* surfaces — steel-tinted, widened separation so panels read as panels */
  --bg-0: #090d12;          /* page background (deepest) */
  --bg-1: #111a24;          /* panel */
  --bg-2: #18242f;          /* raised panel */
  --bg-3: #22313f;          /* hover / inset */
  --bg-4: #2c3e4e;          /* controls */
  --line: #2f4150;          /* hairline borders */
  --line-bright: #466076;   /* bezel / strong border */
  /* text — lifted to pass AA at small sizes */
  --ink: #e9f1f8;           /* primary text */
  --ink-dim: #abc1d2;       /* secondary text (AA on bg-0..2) */
  --ink-faint: #8299ac;     /* labels (AA ~4.5:1, was #56697a) */
  --ink-mute: #5d7184;      /* decoration only — never load-bearing */
  /* duo accents */
  --accent: #f26a2e;        /* command orange — action */
  --accent-hi: #ff8a4d;
  --cyan: #38c6f4;          /* ice cyan — friendly / UI co-lead */
  --cyan-hi: #74dcff;
  --amber: #ffc15a;         /* warnings, heat */
  --green: #5fd98f;         /* ok, ready */
  --red: #f76b6b;           /* enemy, damage */
  /* glows (phosphor bloom for active states) */
  --glow-accent: 0 0 16px rgba(242,106,46,.5);
  --glow-cyan: 0 0 14px rgba(56,198,244,.45);
  --glow-soft: 0 0 0 1px rgba(70,96,118,.5), 0 8px 26px rgba(0,0,0,.5);
  /* type scale */
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px;
  --fs-md: 15px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 30px;
  --font-display: "Rajdhani", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --font-body: "Barlow", sans-serif;
  --r: 4px; --r-lg: 7px; --chamfer: 11px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(1200px 620px at 72% -12%, #1a2a38 0%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(70,96,118,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(70,96,118,.05) 0 1px, transparent 1px 46px),
    var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
}
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

h1, h2, h3, h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .07em; margin: 0; }
.mono { font-family: var(--font-mono); }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(56,198,244,.32); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 6px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Chamfered bezel — the signature MFD frame. element bg = bezel, ::before = surface */
.chamfer {
  position: relative; border: none; border-radius: 0;
  background: linear-gradient(160deg, var(--line-bright), var(--line));
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.chamfer > * { position: relative; z-index: 1; }
.chamfer::before {
  content: ""; position: absolute; inset: 1.4px; z-index: 0; background: var(--bg-1);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}

/* == Boot splash ========================================================== */
/* margin:auto inside the #app flex column centres on both axes — no fixed
   padding-top (which used to shove it off-centre, badly so on short screens). */
.boot { margin: auto; text-align: center; padding: 24px; }
.boot-logo { font-family: var(--font-display); font-weight: 700; font-size: 54px; letter-spacing: .12em; text-shadow: 0 0 24px rgba(56,198,244,.25); }
.boot-logo span { color: var(--accent); text-shadow: 0 0 24px rgba(242,106,46,.4); }
.boot-sub { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); letter-spacing: .2em; margin-top: 6px; }
.boot-bar { width: 280px; height: 3px; background: var(--bg-3); margin: 26px auto; overflow: hidden; border-radius: 2px; }
.boot-bar div { width: 40%; height: 100%; background: var(--accent); box-shadow: var(--glow-accent); animation: bootslide 1.1s ease-in-out infinite; }
@keyframes bootslide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* == Top bar ============================================================== */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; height: 54px;
  background: linear-gradient(180deg, #18222d, #10171f);
  border-bottom: 1px solid var(--line-bright);
  box-shadow: 0 1px 0 rgba(56,198,244,.12), 0 6px 20px rgba(0,0,0,.4);
  position: sticky; top: 0; z-index: 40;
}
.topbar .logo { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: .1em; cursor: pointer; }
.topbar .logo span { color: var(--accent); text-shadow: var(--glow-accent); }
.topbar .spacer { flex: 1; }
.topbar .pilot-chip {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-dim);
}
.pilot-chip b { color: var(--ink); font-weight: 600; }
.elo-badge {
  font-family: var(--font-mono); font-size: var(--fs-xs); padding: 2px 9px;
  border: 1px solid var(--line-bright); border-radius: 999px; color: var(--amber);
  background: rgba(255,193,90,.06);
}

/* Top-level destination nav (Command / Hangar / Dossier) */
.nav-tabs { display: flex; align-items: stretch; gap: 2px; height: 100%; }
.nav-tab {
  background: transparent; border: none; cursor: pointer; height: 100%; padding: 0 16px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s, background .12s;
}
.nav-tab:hover { color: var(--ink-dim); background: rgba(70,96,118,.1); }
.nav-tab.on { color: var(--ink); border-bottom-color: var(--accent); background: rgba(242,106,46,.08); }

/* Mobile bottom tab bar — replaces the top destination nav on small screens.
   Hidden on desktop (the top tabs serve there). */
.bottom-nav { display: none; }
@media (max-width: 640px) {
  /* Slim the top bar: drop the destination tabs + sign-out (now in bottom nav / Dossier). */
  .topbar { height: 50px; padding: 0 14px; gap: 10px; }
  .topbar .nav-tabs, .topbar .topbar-signout { display: none; }
  .topbar .logo { font-size: 20px; }

  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: linear-gradient(0deg, #0c131b, #131d27);
    border-top: 1px solid var(--line-bright);
    box-shadow: 0 -1px 0 rgba(56,198,244,.12), 0 -6px 20px rgba(0,0,0,.45);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bn-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 7px 0; cursor: pointer;
    background: transparent; border: none; border-top: 2px solid transparent;
    color: var(--ink-faint); transition: color .12s, border-color .12s, background .12s;
  }
  .bn-tab .ico { color: inherit; }
  .bn-label { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; }
  .bn-tab.on { color: var(--accent-hi); border-top-color: var(--accent); background: rgba(242,106,46,.08); }
  .bn-tab:active { background: rgba(70,96,118,.18); }

  /* Reserve room so fixed bottom nav never covers the last rows of content. */
  .lobby { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* == Buttons ============================================================== */
.btn {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  font-size: var(--fs-md); color: var(--ink);
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3)); border: 1px solid var(--line-bright); border-radius: var(--r);
  padding: 8px 18px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s, box-shadow .12s, color .12s;
}
.btn:hover { background: linear-gradient(180deg, #36495b, #283744); border-color: #5a778f; box-shadow: 0 0 0 1px rgba(56,198,244,.15); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary {
  background: linear-gradient(180deg, #f97e3e, #dd5a23); border-color: #ff9a5e; color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 14px rgba(242,106,46,.28);
}
.btn-primary:hover { background: linear-gradient(180deg, #ff8c4c, #e8642b); border-color: #ffb07c; box-shadow: var(--glow-accent); }
.btn-cyan { background: linear-gradient(180deg, #2bb6e6, #1f93c4); border-color: #5fd2f5; color: #04222e; text-shadow: none; }
.btn-cyan:hover { box-shadow: var(--glow-cyan); border-color: #8ce0ff; }
.btn-danger { border-color: #8a4444; color: var(--red); background: linear-gradient(180deg, #2a1d1d, #221717); }
.btn-danger:hover { background: #341f1f; border-color: var(--red); box-shadow: 0 0 12px rgba(247,107,107,.3); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-dim); }
.btn-ghost:hover { color: var(--ink); background: rgba(70,96,118,.12); }
.btn-sm { font-size: var(--fs-sm); padding: 4px 12px; }

/* == Panels =============================================================== */
.panel {
  position: relative; border: none; border-radius: 0;
  background: linear-gradient(160deg, var(--line-bright), var(--line));
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.panel > * { position: relative; z-index: 1; }
.panel::before {
  content: ""; position: absolute; inset: 1.4px; z-index: 0; background: var(--bg-1);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-bottom: 1px solid var(--line-bright);
  background: linear-gradient(180deg, rgba(56,198,244,.06), transparent);
  box-shadow: inset 3px 0 0 var(--cyan);
}
.panel-head h3 { font-size: var(--fs-md); color: var(--ink); letter-spacing: .08em; }
.panel-head .tag { margin-left: auto; }
.panel-body { padding: 15px; }
.tag {
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 3px; border: 1px solid var(--line-bright); color: var(--ink-dim);
}
.tag-green { color: var(--green); border-color: rgba(95,217,143,.55); background: rgba(95,217,143,.08); }
.tag-amber { color: var(--amber); border-color: rgba(255,193,90,.55); background: rgba(255,193,90,.08); }
.tag-red { color: var(--red); border-color: rgba(247,107,107,.55); background: rgba(247,107,107,.08); }
.tag-cyan { color: var(--cyan); border-color: rgba(56,198,244,.55); background: rgba(56,198,244,.08); }
.tag-pulse { animation: tagpulse 1.4s ease-in-out infinite; }
@keyframes tagpulse { 50% { box-shadow: var(--glow-accent); border-color: var(--accent); color: var(--accent-hi); } }

/* == Forms ================================================================ */
input[type=text], input[type=email], input[type=password], input[type=number], select {
  background: var(--bg-0); color: var(--ink);
  border: 1px solid var(--line-bright); border-radius: var(--r);
  font-family: var(--font-mono); font-size: var(--fs-base);
  padding: 8px 10px; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(56,198,244,.22); }
label.field { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
label.field > span { display: block; margin-bottom: 4px; }

/* == Login ================================================================ */
.login-wrap { margin: auto; width: min(420px, 92vw); padding-top: 14vh; }
.login-logo { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 48px; letter-spacing: .12em; text-shadow: 0 0 24px rgba(56,198,244,.22); }
.login-logo span { color: var(--accent); text-shadow: var(--glow-accent); }
.login-tagline { text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); letter-spacing: .22em; margin: 4px 0 28px; }
.login-card { padding: 22px; }
.login-card .btn { width: 100%; margin-top: 10px; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-size: var(--fs-xs); font-family: var(--font-mono); margin: 16px 0 6px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-bright); }
.login-error { color: var(--red); font-size: var(--fs-base); margin-top: 10px; min-height: 18px; }
.login-foot { text-align: center; color: var(--ink-faint); font-size: var(--fs-xs); margin-top: 18px; line-height: 1.6; }
.login-head { font-size: var(--fs-xl); margin-bottom: 16px; color: var(--ink); }
.login-hint { color: var(--ink-faint); font-size: var(--fs-xs); font-family: var(--font-mono); margin: -6px 0 12px; line-height: 1.5; }
.login-alt { text-align: center; color: var(--ink-dim); font-size: var(--fs-base); margin-top: 16px; }
.login-alt a { color: var(--cyan); text-decoration: none; }
.login-alt a:hover { text-decoration: underline; }

/* == Lobby ================================================================ */
.lobby { width: min(1180px, calc(100vw - 32px)); margin: 22px auto; display: flex; flex-direction: column; gap: 18px; }
.lobby-grid { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .lobby-grid { grid-template-columns: 1fr; } }
.lobby-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.battle-host { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Inline SVG icons (replace emoji glyphs) */
.ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -2px; }
.ico svg { display: block; }
.panel-head .ph-ico { color: var(--cyan); display: inline-flex; }
.btn .ico { margin-right: 6px; vertical-align: -3px; }
.btn-sm .ico { margin-right: 4px; }

/* Pilot command bar */
.pilot-bar {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 17px;
  background: linear-gradient(160deg, var(--line-bright), var(--line));
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.pilot-bar > * { position: relative; z-index: 1; }
.pilot-bar::before {
  content: ""; position: absolute; inset: 1.4px; z-index: 0;
  background: linear-gradient(180deg, #18222d, #10171f);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.pb-avatar {
  width: 42px; height: 42px; flex: none; border-radius: 6px;
  background: var(--bg-3); border: 1px solid var(--cyan); color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 600;
  box-shadow: inset 0 0 12px rgba(56,198,244,.18);
}
.pb-id { flex: 1; min-width: 0; }
.pb-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-sub { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 2px; }
.pb-wr { color: var(--ink-dim); }
.pb-streak { color: var(--amber); }
.pb-stat { text-align: center; padding-left: 16px; border-left: 1px solid var(--line-bright); }
.pb-stat-l { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; color: var(--ink-faint); }
.pb-stat-v { font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--amber); line-height: 1.1; }

/* Page header (Hangar / Dossier) */
.page-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.page-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .06em; text-transform: uppercase; }
.page-sub { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); }

/* Command screen: matchmaker (compact) beside the active-battle queue */
@media (min-width: 981px) { .command-grid { grid-template-columns: 380px 1fr; } }

/* == Hangar: rich mech cards ============================================== */
.mech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.mech-card {
  background: var(--bg-2); border: 1px solid var(--line-bright); border-radius: var(--r);
  padding: 12px 13px; display: flex; flex-direction: column; gap: 11px;
  transition: border-color .12s, box-shadow .12s;
}
.mech-card:hover { border-color: #5a778f; box-shadow: 0 0 0 1px rgba(56,198,244,.12); }
.mc-top { display: flex; align-items: center; gap: 10px; }
.mc-top .wclass { width: 26px; height: 26px; font-size: var(--fs-sm); }
.mc-id { flex: 1; min-width: 0; }
.mc-nm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-cls { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; margin-top: 1px; }
.mc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mc-stat { background: var(--bg-1); padding: 7px 8px; min-width: 0; }
.mc-stat-l { display: flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em; color: var(--ink-faint); }
.mc-stat-l .ico { color: inherit; }
.mc-stat-v { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-stat.heat-ok .mc-stat-l { color: var(--green); }
.mc-stat.heat-warn .mc-stat-l { color: var(--amber); }
.mc-stat.heat-warn .mc-stat-v { color: var(--amber); }
.mc-stat.heat-bad .mc-stat-l { color: var(--red); }
.mc-stat.heat-bad .mc-stat-v { color: var(--red); }
.mc-loadout { display: flex; flex-wrap: wrap; gap: 5px; }
.wchip {
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .04em;
  padding: 2px 7px; border-radius: 3px; border: 1px solid var(--line-bright);
  color: var(--cyan); background: rgba(56,198,244,.07);
}
.wchip.empty { color: var(--ink-faint); border-color: var(--line); background: none; }

/* == Dossier (profile) =================================================== */
.dossier-hero {
  position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 20px;
  background: linear-gradient(160deg, var(--line-bright), var(--line));
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.dossier-hero > * { position: relative; z-index: 1; }
.dossier-hero::before {
  content: ""; position: absolute; inset: 1.4px; z-index: 0;
  background: linear-gradient(180deg, #18222d, #10171f);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.dh-avatar {
  width: 64px; height: 64px; flex: none; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--cyan); color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  box-shadow: inset 0 0 16px rgba(56,198,244,.2);
}
.dh-id { flex: 1; min-width: 0; }
.dh-rank { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.dh-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; }
.dh-name .icon-btn { color: var(--ink-faint); }
.dh-sub { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 3px; }
.dh-rating { text-align: center; padding-left: 18px; border-left: 1px solid var(--line-bright); }
.dh-rating-l { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .16em; color: var(--ink-faint); }
.dh-rating-v { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--amber); line-height: 1.1; }

.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 640px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-tile {
  background: var(--bg-1); border: 1px solid var(--line-bright); border-radius: var(--r);
  padding: 14px 12px; text-align: center;
}
.st-v { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ink); line-height: 1; }
.st-l { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }
.st-green .st-v { color: var(--green); }
.st-red .st-v { color: var(--red); }
.st-amber .st-v { color: var(--amber); }
.dossier-signout { display: flex; justify-content: center; padding-top: 4px; }
.dossier-signout .btn { min-width: 180px; }

/* Combat-operations CTA: one primary action, three modes */
.cta-tabs { display: flex; border-bottom: 1px solid var(--line-bright); }
.cta-tabs button {
  flex: 1; background: transparent; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding: 11px 0; border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s, background .12s;
}
.cta-tabs button:hover { color: var(--ink-dim); }
.cta-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); background: rgba(242,106,46,.08); }
.btn-hero { width: 100%; font-size: 18px; padding: 14px; justify-content: center; }
.btn-hero { display: inline-flex; align-items: center; }
.cta-hint { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 10px; line-height: 1.5; }
.cta-sep { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 16px 0 12px; }
.cta-sep::before, .cta-sep::after { content: ""; flex: 1; height: 1px; background: var(--line-bright); }
.cta-join { display: flex; gap: 8px; }
.cta-join input { flex: 1; }

/* Matchmaking live feedback */
.queue-status { display: flex; align-items: center; gap: 10px; padding: 4px 0 2px; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--amber); }
.q-elapsed { margin-left: auto; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.q-band { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--cyan); margin-top: 8px; }
.q-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 3px; }
.radar { width: 16px; height: 16px; flex: none; border: 2px solid var(--amber); border-radius: 50%; position: relative; overflow: hidden; }
.radar::after { content: ""; position: absolute; inset: 0; background: conic-gradient(rgba(255,193,90,.8), transparent 60%); animation: sweep 1.6s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .radar::after { animation: none; } }

/* Battle rows */
.battle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  transition: background .1s;
}
.battle-row:last-child { border-bottom: none; }
.battle-row:hover { background: var(--bg-2); }
.battle-row.dim { opacity: .72; }
.battle-row.dim:hover { opacity: 1; }
.battle-row.turn { background: rgba(242,106,46,.06); box-shadow: inset 3px 0 0 var(--accent); }
.battle-row .vs { flex: 1; min-width: 0; }
.battle-row .vs b { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: .03em; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-row .meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); margin-top: 2px; }
.map-glyph { width: 40px; height: 40px; flex: none; border-radius: 4px; background: var(--bg-0); border: 1px solid var(--line-bright); display: flex; align-items: center; justify-content: center; color: var(--cyan); }
.map-glyph.empty { color: var(--ink-faint); border-color: var(--line); }

.empty-note { padding: 24px 14px; text-align: center; color: var(--ink-faint); font-size: var(--fs-base); }

/* Roster items */
.roster-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 14px;
  border-bottom: 1px solid var(--line); font-size: var(--fs-md);
}
.roster-item:last-child { border-bottom: none; }
.roster-item:hover { background: var(--bg-2); }
.ri-main { flex: 1; min-width: 0; }
.ri-nm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wclass { width: 22px; height: 22px; flex: none; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; border: 1px solid; }
.wc-L { color: var(--cyan); border-color: rgba(56,198,244,.55); background: rgba(56,198,244,.14); }
.wc-M { color: var(--green); border-color: rgba(95,217,143,.55); background: rgba(95,217,143,.14); }
.wc-H { color: var(--amber); border-color: rgba(255,193,90,.55); background: rgba(255,193,90,.14); }
.wc-A { color: var(--red); border-color: rgba(247,107,107,.6); background: rgba(247,107,107,.16); }
.pilot-pin { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line-bright); color: var(--ink-dim); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 600; }

.icon-btn { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: var(--fs-md); padding: 4px 6px; border-radius: 3px; display: inline-flex; align-items: center; }
.icon-btn:hover { color: var(--ink); background: var(--bg-3); }
.icon-btn.danger:hover { color: var(--red); background: rgba(247,107,107,.12); }

/* == Modal ================================================================ */
.modal-back {
  position: fixed; inset: 0; background: rgba(4,7,10,.78); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; z-index: 90; overflow: auto; padding: 6vh 16px;
}
.modal { width: min(680px, 94vw); animation: modalin .14s ease-out; }
@keyframes modalin { from { transform: translateY(10px); opacity: 0; } }
.modal .panel-body { max-height: 70vh; overflow: auto; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 14px; border-top: 1px solid var(--line-bright); }

/* == Toasts =============================================================== */
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast {
  background: var(--bg-2); border: 1px solid var(--line-bright); border-left: 3px solid var(--cyan);
  padding: 10px 14px; border-radius: var(--r); font-size: var(--fs-base); max-width: 360px;
  animation: toastin .18s ease-out; box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.toast.err { border-left-color: var(--red); }
.toast.ok { border-left-color: var(--green); }
@keyframes toastin { from { transform: translateX(20px); opacity: 0; } }

/* == Battle setup (prep wizard) =========================================== */
.prep-wrap { width: min(1040px, calc(100vw - 32px)); margin: 16px auto 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.prep-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Setup header: the screen's identity (title + tags) sits on the right of the topbar;
   the leave/cancel control replaces the generic "Lobby" back button on the left. */
.setup-head-meta { display: flex; align-items: center; gap: 8px; }
.setup-head-meta .shm-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-md); color: var(--ink); }
.setup-topbar .leave-btn { color: var(--red); border-color: rgba(247,107,107,.4); }
.setup-topbar .leave-btn:hover { color: var(--red); background: rgba(247,107,107,.1); border-color: rgba(247,107,107,.7); }
@media (max-width: 560px) {
  .setup-head-meta .shm-title { display: none; }
  .setup-topbar .leave-btn .ico { vertical-align: -3px; }
}

/* Slim VS status strip (replaces the old command-bar ready plates) */
.setup-status { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-chip { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--line-bright); border-radius: 6px; background: var(--bg-1); }
.ss-chip.is-ready { border-color: rgba(95,217,143,.5); background: rgba(95,217,143,.07); }
.ss-chip.ghost { opacity: .6; border-style: dashed; }
.ss-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-state { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint); white-space: nowrap; flex: none; }
.ss-state.on { color: var(--green); }
.ss-vs { flex: none; font-family: var(--font-display); font-size: var(--fs-xs); color: var(--ink-faint); letter-spacing: .1em; }

/* Step rail */
.step-rail { position: relative; display: flex; align-items: stretch; gap: 0; background: linear-gradient(160deg, var(--line-bright), var(--line)); padding: 13px 15px;
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); }
.step-rail > * { position: relative; z-index: 1; }
.step-rail::before { content: ""; position: absolute; inset: 1.4px; z-index: 0; background: var(--bg-1);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); }
.step-rail.mini { background: transparent; padding: 0 0 10px; clip-path: none; }
.step-rail.mini::before { display: none; }
.step { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 5px; }
.step[role=button] { cursor: pointer; }
.step[role=button]:hover { background: var(--bg-3); }
.step-dot { width: 27px; height: 27px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-base); font-weight: 700; border: 1.5px solid var(--line-bright); color: var(--ink-faint); background: var(--bg-0); }
.step-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-md); color: var(--ink-dim); }
.step-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint); margin-top: 1px; }
.step.active .step-dot { border-color: var(--accent); color: var(--accent-hi); box-shadow: 0 0 0 3px rgba(242,106,46,.2), var(--glow-accent); }
.step.active .step-label { color: var(--ink); }
.step.done .step-dot { border-color: var(--green); color: var(--green); background: rgba(95,217,143,.12); }
.step.done .step-label { color: var(--ink-dim); }
.step.future { opacity: .45; }
.step-link { flex: 1; height: 2px; min-width: 18px; align-self: center; margin: 0 4px; background: var(--line); border-radius: 2px; }
.step-link.done { background: var(--green); }
@media (max-width: 720px) { .step-sub { display: none; } .step-label { font-size: var(--fs-sm); } }
/* On phones the rail collapses to dots + only the current step's label, so 4–5 steps
   never force horizontal scroll. */
@media (max-width: 560px) {
  .step-rail { padding: 10px 12px; }
  .step { padding: 2px 3px; gap: 6px; }
  .step .step-label { display: none; }
  .step.active .step-label { display: block; }
  .step-link { min-width: 6px; margin: 0 2px; }
  .step-dot { width: 24px; height: 24px; }
}

.step-help { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-faint); line-height: 1.6; margin: 0 0 4px; }
.cfg-h { font-size: var(--fs-sm); color: var(--ink-dim); margin: 0 0 8px; }
label.field.chk { display: flex; gap: 8px; align-items: center; text-transform: none; margin-top: 4px; }

/* Map picker */
.map-thumb { border: 1px solid var(--line-bright); border-radius: var(--r); cursor: pointer; padding: 4px; background: var(--bg-0); transition: border-color .12s, box-shadow .12s; }
.map-thumb:hover { border-color: var(--cyan); }
.map-thumb.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(242,106,46,.3), var(--glow-accent); }
.map-thumb-img { position: relative; width: 120px; height: 90px; background: linear-gradient(160deg,#21303d,#16202a); border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-2xs); overflow: hidden; }
.map-thumb-img svg.map-mini { width: 100%; height: 100%; display: block; }
.map-enlarge { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; border: 1px solid var(--line-bright); border-radius: 3px; background: rgba(10,15,20,.62); color: var(--ink-dim); font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s, color .12s, border-color .12s; }
.map-thumb:hover .map-enlarge, .map-enlarge:focus-visible { opacity: 1; }
.map-enlarge:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(10,15,20,.85); }
.map-pick { display: flex; gap: 12px; flex-wrap: wrap; }
.map-pick .nm { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-dim); text-align: center; padding-top: 4px; }

/* Map enlarge modal */
.map-modal { display: flex; flex-direction: column; gap: 12px; }
.map-modal-stage { background: linear-gradient(160deg,#1a2530,#10171f); border: 1px solid var(--line-bright); border-radius: var(--r); padding: 8px; }
.map-modal-stage svg.map-mini { width: 100%; height: auto; max-height: 56vh; display: block; }
.map-modal-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-xs); color: var(--ink-dim); }
.map-modal-stats b { color: var(--ink); }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-dim); }
.map-swatch { width: 13px; height: 13px; border-radius: 2px; border: 1px solid rgba(255,255,255,.12); }
.map-swatch.t-clear { background: #243441; }
.map-swatch.t-lwoods { background: #1f4630; }
.map-swatch.t-hwoods { background: #16341f; }
.map-swatch.t-water { background: #0f3f63; }
.map-swatch.t-rough { background: #3e3526; }
.map-swatch.t-rubble { background: #3a2f3e; }
.map-mini-zonelbl { font-family: var(--font-mono); font-size: 8px; fill: #7fe0a6; opacity: .9; }

/* Lance builder */
.lance-panel.opfor { background: linear-gradient(160deg, #6a4444, var(--line)); }
.lance-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .lance-cards { grid-template-columns: 1fr; } }
.mech-card { background: var(--bg-0); border: 1px solid var(--line-bright); border-radius: 6px; padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
.mc-head { display: flex; align-items: center; gap: 8px; }
.mc-name { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-tons { font-size: var(--fs-sm); color: var(--ink-dim); }
.mc-stats { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--ink-dim); }
.mc-weapons { display: flex; flex-wrap: wrap; gap: 5px; }
.wchip { font-family: var(--font-mono); font-size: var(--fs-2xs); padding: 2px 7px; border-radius: 3px; background: var(--bg-3); border: 1px solid var(--line-bright); color: var(--ink-dim); }
.wchip.dim { color: var(--ink-faint); }
.mc-foot { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-dim); border-top: 1px solid var(--line); padding-top: 8px; }
.heat-pill { font-family: var(--font-mono); font-size: var(--fs-2xs); padding: 1px 7px; border-radius: 999px; border: 1px solid; }
.heat-pill.ok { color: var(--green); border-color: rgba(95,217,143,.5); }
.heat-pill.warn { color: var(--amber); border-color: rgba(255,193,90,.5); }
.heat-pill.bad { color: var(--red); border-color: rgba(247,107,107,.55); }
.mc-pilot { display: flex; align-items: center; gap: 8px; }
.mc-pilot .pilot-sel { flex: 1; }
.pilot-static { font-size: var(--fs-xs); color: var(--ink-dim); }

/* Mech-bay slide-over drawer */
.drawer-back { position: fixed; inset: 0; z-index: 120; background: rgba(5,8,11,0); transition: background .2s; }
.drawer-back.show { background: rgba(5,8,11,.6); backdrop-filter: blur(2px); }
.drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw);
  background: var(--bg-1); border-left: 2px solid var(--cyan); box-shadow: -8px 0 30px rgba(0,0,0,.55);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease-out; }
.drawer.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-back { transition: none; } }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-bright); }
.drawer-head h3 { flex: 1; font-size: var(--fs-lg); }
.drawer-head .icon-btn { font-size: var(--fs-lg); }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.drawer-foot { margin-top: auto; padding-top: 6px; }
.bay-meter { font-size: var(--fs-sm); color: var(--ink-dim); }
.bay-meter.over { color: var(--red); }
.bay-search { width: 100%; }
.bay-list { display: flex; flex-direction: column; gap: 8px; }
.bay-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-0); }
.bay-item:hover { border-color: var(--line-bright); background: var(--bg-2); }
.bay-item.tight { opacity: .55; }
.bi-main { flex: 1; min-width: 0; }
.bi-nm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: .02em; }
.bi-sub { font-size: var(--fs-2xs); color: var(--ink-dim); margin-top: 1px; }
.bi-load { font-size: var(--fs-2xs); color: var(--ink-faint); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bay-item .btn { flex: none; }
.submit-lance { width: 100%; margin-top: 10px; }
.add-mech { width: 100%; margin-top: 12px; justify-content: center; border-style: dashed; }
.add-mech:hover { border-color: var(--accent); color: var(--ink); }

.tons-meter { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin: 12px 0 4px; }
.tons-meter div { height: 100%; background: var(--green); box-shadow: 0 0 8px rgba(95,217,143,.5); transition: width .2s; }
.tons-meter.over div { background: var(--red); box-shadow: 0 0 8px rgba(247,107,107,.5); }
.tons-label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-dim); }
.tons-label .over { color: var(--red); }
.lance-pick-row { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 8px; margin-bottom: 8px; align-items: center; }

/* Command bar — now a single clear step CTA (the hint names what this step does / why
   it's blocked, the button advances it; Confirm Ready only appears on the final step). */
.command-bar { position: sticky; bottom: 0; padding: 12px 17px;
  background: linear-gradient(160deg, var(--line-bright), var(--line));
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  box-shadow: 0 -6px 20px rgba(0,0,0,.4); }
.command-bar > * { position: relative; z-index: 1; }
.command-bar::before { content: ""; position: absolute; inset: 1.4px; z-index: 0; background: linear-gradient(180deg, #18222d, #10171f);
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); }
.cmd-action { display: flex; align-items: center; gap: 16px; }
.foot-hint { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-dim); line-height: 1.5; }
.foot-hint.blocked { color: var(--amber); }
.btn-gateway { flex: none; font-size: var(--fs-md); padding: 11px 26px; white-space: nowrap; }
/* Phones: footer becomes a fixed action bar with safe-area padding; the wrap reserves
   room so the last rows are never hidden behind it. No bottom nav competes in-battle. */
@media (max-width: 640px) {
  .prep-wrap { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .step-foot-host { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
  .command-bar { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); clip-path: none; background: linear-gradient(180deg, #18222d, #10171f); box-shadow: 0 -2px 18px rgba(0,0,0,.5); border-top: 1px solid var(--line-bright); }
  .command-bar::before { display: none; }
  .cmd-action { gap: 12px; }
  .foot-hint { font-size: var(--fs-2xs); }
}

/* Deployment screen */
.deploy-screen { display: grid; grid-template-columns: 1fr 320px; height: calc(100vh - 54px); }
@media (max-width: 1000px) { .deploy-screen { grid-template-columns: 1fr; grid-template-rows: 60vh auto; height: auto; } }
.deploy-side { border-left: 1px solid var(--line-bright); background: var(--bg-1); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.deploy-head { display: flex; flex-direction: column; gap: 6px; }
.deploy-zone-tag { font-size: var(--fs-xs); color: var(--cyan); }
.deploy-progress { display: flex; flex-direction: column; gap: 5px; }
.dp-bar { height: 5px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.dp-bar div { height: 100%; background: var(--accent); box-shadow: 0 0 8px rgba(242,106,46,.5); transition: width .25s; }
.dp-label { font-size: var(--fs-xs); color: var(--ink-dim); }
.deploy-list { display: flex; flex-direction: column; gap: 6px; }
.deploy-unit { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-0); }
.deploy-unit.placed { border-color: rgba(95,217,143,.4); }
.deploy-unit.next { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(242,106,46,.18); }
.du-main { flex: 1; min-width: 0; }
.du-nm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); }
.du-sub { font-size: var(--fs-2xs); color: var(--ink-faint); }
.du-state { font-family: var(--font-mono); color: var(--ink-dim); width: 16px; text-align: center; }
.deploy-unit.next .du-state { color: var(--accent-hi); }
.deploy-unit.placed .du-state { color: var(--green); }
.deploy-action { margin-top: auto; }

/* == Battle screen ======================================================== */
/* Map is the hero: it fills the area below the (slim) battle top bar. All controls and
   the selected-unit cards float over it as a HUD; detailed lists live in a side drawer.
   Explicit height (not flex:1) because the battle root wrapper is a plain div, not a
   flex column — flex:1 there collapses the pane to zero height. */
.battle-screen { position: relative; height: calc(100dvh - 54px); overflow: hidden; }
.battle-screen .map-pane { position: absolute; inset: 0; }

/* Battle top bar: just a back button + logo + details toggle. */
.battle-topbar .details-btn .ico, .battle-topbar .back-btn .ico { vertical-align: -3px; }

/* Floating HUD dock along the bottom of the map. The dock itself is click-through; only
   its cards/controls capture taps, so the map between them stays interactive. */
.battle-hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
  display: grid; grid-template-columns: minmax(0, 270px) 1fr minmax(0, 270px);
  align-items: end; gap: 10px; padding: 10px;
  pointer-events: none;
}
.battle-hud > * { pointer-events: auto; min-width: 0; }
.hud-action { grid-column: 2; display: flex; justify-content: center; align-items: flex-end; }
.hud-action:empty { display: none; }
.hud-armor { grid-column: 1; justify-self: start; }
.hud-weapon { grid-column: 3; justify-self: end; }
.hud-card { width: 100%; max-width: 280px; }
.hud-inner {
  background: rgba(13,19,26,.94); border: 1px solid var(--line-bright); border-radius: 8px;
  padding: 9px 11px; box-shadow: 0 6px 24px rgba(0,0,0,.55);
  border-top: 2px solid var(--accent);
}
.hud-inner.enemy { border-top-color: var(--red); }
.hud-head { display: flex; align-items: center; gap: 7px; cursor: pointer; margin-bottom: 7px; }
.hud-head .uh-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--cyan); flex: none; }
.hud-inner.enemy .uh-dot { background: var(--red); }
.hud-head .uh-nm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: .03em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-head .uh-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint); white-space: nowrap; }
.hud-card-title { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px; }
.hud-empty { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-faint); padding: 4px 0; }

/* Weapon pick-list inside the weapon HUD card (and a compact loadout otherwise) */
.wpick { display: flex; flex-direction: column; gap: 3px; max-height: 38dvh; overflow-y: auto; }
.wpick-row {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 7px 8px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--bg-1); font-family: var(--font-mono); font-size: var(--fs-xs);
  touch-action: manipulation;
}
.wpick-row.picked { background: rgba(242,106,46,.16); border-color: var(--line-bright); }
.wpick-row.destroyed { opacity: .5; text-decoration: line-through; }
.wpick-nm { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.wpick-loc {
  flex: none; color: var(--cyan); font-size: var(--fs-2xs); letter-spacing: .04em;
  padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-2);
}
.wpick-th { flex: none; color: var(--ink-dim); }
.wpick-row:not(.destroyed) { cursor: pointer; }
.wpick-row:not(.destroyed):hover { border-color: var(--line-bright); }

/* Projected-heat strip above the weapon pick-list */
.heat-plan {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1);
  padding: 6px 8px; margin-bottom: 6px;
}
.heat-plan-row { display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-2xs); letter-spacing: .08em; color: var(--ink-dim); }
.heat-plan-detail { font-size: var(--fs-2xs); color: var(--ink-faint); margin-top: 2px; }

/* The phase action controls now live inside the HUD dock — make them flow statically
   there instead of floating absolutely over the map. */
.hud-action .action-bar, .hud-action .waiting-banner, .hud-action .gameover-banner {
  position: static; transform: none; left: auto; right: auto; bottom: auto; top: auto;
  max-width: 100%; margin: 0;
}
.hud-action .gameover-banner { background: rgba(13,19,26,.96); }
.map-pane { position: relative; overflow: hidden; background: #070b0f; }
.map-pane::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px); opacity: .35; }
@media (prefers-reduced-motion: reduce) { .map-pane::after { opacity: .2; } }
.map-pane svg.hexmap { display: block; width: 100%; height: 100%; cursor: grab; user-select: none; touch-action: none; }
.map-pane svg.hexmap:active { cursor: grabbing; }

.phase-strip {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; z-index: 10;
  background: rgba(13,19,26,.94); border: 1px solid var(--line-bright); border-radius: 6px; padding: 6px 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(56,198,244,.06);
}
.phase-step { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 3px 9px; border-radius: 3px; }
.phase-step.on { background: var(--accent); color: #fff; font-weight: 600; box-shadow: var(--glow-accent); }
.phase-step.done { color: var(--ink-dim); }
.turn-pill { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); padding-right: 10px; border-right: 1px solid var(--line-bright); margin-right: 6px; color: var(--cyan); }

.action-bar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; gap: 10px; align-items: center;
  background: rgba(13,19,26,.96); border: 1px solid var(--line-bright); border-radius: 8px; padding: 10px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6); max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center;
}
.action-hint { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-dim); width: 100%; text-align: center; }
.waiting-banner {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 10;
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
  background: rgba(13,19,26,.96); border: 1px solid rgba(255,193,90,.45); border-radius: 8px; padding: 12px 22px;
  display: flex; gap: 12px; align-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.55);
}
.mode-seg { display: flex; border: 1px solid var(--line-bright); border-radius: var(--r); overflow: hidden; }
.mode-seg button {
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  background: transparent; color: var(--ink-dim); border: none; padding: 6px 13px; cursor: pointer;
}
.mode-seg button.on { background: var(--accent); color: #fff; }
.mode-seg button:disabled { opacity: .35; cursor: not-allowed; }
.mp-readout { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--cyan); }

/* Side pane */
.side-pane { border-left: 1px solid var(--line-bright); background: var(--bg-1); display: flex; flex-direction: column; overflow: hidden; }
.side-tabs { display: flex; border-bottom: 1px solid var(--line-bright); }
.side-tabs button {
  flex: 1; background: transparent; border: none; color: var(--ink-faint); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-base);
  padding: 11px 0; border-bottom: 2px solid transparent;
}
.side-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); background: rgba(242,106,46,.06); }
.side-scroll { overflow-y: auto; flex: 1; padding: 12px; }

/* Unit cards */
.unit-card { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 10px; background: var(--bg-2); overflow: hidden; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.unit-card:hover { border-color: var(--line-bright); }
.unit-card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--glow-accent); }
.unit-card.enemy.sel { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 14px rgba(247,107,107,.4); }
.unit-card.dead { opacity: .45; filter: saturate(.3); }
.unit-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.unit-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--cyan); flex: none; box-shadow: 0 0 6px rgba(56,198,244,.6); }
.unit-card.enemy .unit-dot { background: var(--red); box-shadow: 0 0 6px rgba(247,107,107,.6); }
.unit-card-head .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: .03em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-card-head .stat { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint); }
.unit-flags { display: flex; gap: 4px; padding: 0 10px 8px; flex-wrap: wrap; }

/* == Selected-unit header ================================================= */
.unit-header { padding: 10px 12px; background: var(--bg-2); border-top: 2px solid var(--accent); border-bottom: 1px solid var(--line-bright); box-shadow: 0 0 16px rgba(242,106,46,.12); }
.unit-header.enemy { border-top-color: var(--red); box-shadow: 0 0 16px rgba(247,107,107,.12); }
.uh-top { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.uh-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--cyan); flex: none; }
.unit-header.enemy .uh-dot { background: var(--red); }
.uh-nm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: .03em; flex: none; max-width: 48%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint); }
.uh-pilot { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-dim); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uh-bars { display: flex; align-items: flex-end; gap: 10px; margin: 8px 0; }
.uh-bar { flex: 1; min-width: 0; }
.uh-bar-l { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 3px; }
.uh-bar-t { height: 6px; background: var(--bg-0); border-radius: 3px; overflow: hidden; }
.uh-bar-f { height: 100%; border-radius: 3px; transition: width .25s; }
.uh-mv { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--cyan); white-space: nowrap; padding-bottom: 1px; }
.uh-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }

/* Armor / structure paper doll */
.paperdoll { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.pd-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 0; border-radius: 3px; border: 1px solid; font-family: var(--font-mono); line-height: 1.05; }
.pd-loc { font-size: 9px; letter-spacing: .04em; opacity: .85; }
.pd-val { font-size: var(--fs-base); font-weight: 700; }
.pd-ok { background: rgba(95,217,143,.14); border-color: rgba(95,217,143,.55); color: var(--green); }
.pd-warn { background: rgba(255,193,90,.14); border-color: rgba(255,193,90,.55); color: var(--amber); }
.pd-low { background: rgba(242,106,46,.16); border-color: rgba(242,106,46,.6); color: var(--accent-hi); }
.pd-exposed { background: rgba(247,107,107,.16); border-color: rgba(247,107,107,.6); color: var(--red); }
.pd-struct { background: rgba(40,52,64,.55); border-color: var(--red); color: var(--ink-faint); }
.pd-dead { background: rgba(40,52,64,.55); border-color: var(--line); color: var(--ink-faint); }

/* == Record sheet ========================================================= */
.record-sheet { font-family: var(--font-mono); font-size: var(--fs-xs); }
.rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-armor-diagram { display: block; width: 100%; }
.rs-row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dotted #2a3845; }
.rs-row .lbl { color: var(--ink-faint); }
.pips { display: flex; flex-wrap: wrap; gap: 2px; max-width: 130px; justify-content: flex-end; }
.pip { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--line-bright); background: transparent; }
.pip.on { background: var(--green); border-color: var(--green); }
.pip.st.on { background: var(--cyan); border-color: var(--cyan); }
.pip.lost { background: #4a2424; border-color: #6a2f2f; }
.pip.flash { animation: pipflash .8s ease-out; }
@keyframes pipflash { 0% { background: #fff; box-shadow: 0 0 8px #fff; } }
.heat-bar { display: flex; height: 14px; border: 1px solid var(--line-bright); border-radius: 3px; overflow: hidden; margin: 6px 0; }
.heat-cell { flex: 1; border-right: 1px solid rgba(0,0,0,.4); background: var(--bg-3); }
.heat-cell.hot { background: linear-gradient(180deg, var(--amber), var(--accent)); }
.heat-cell.crit { background: linear-gradient(180deg, #ff7045, #d63a2a); box-shadow: inset 0 0 6px rgba(255,112,69,.6); }
.weap-table { width: 100%; border-collapse: collapse; }
.weap-table th { text-align: left; color: var(--ink-faint); font-weight: 400; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; padding: 3px 4px; border-bottom: 1px solid var(--line-bright); }
.weap-table td { padding: 4px; border-bottom: 1px solid #1f2a34; }
.weap-table tr.destroyed td { color: var(--ink-faint); text-decoration: line-through; }
.weap-table tr.pick { cursor: pointer; }
.weap-table tr.pick:hover td { background: var(--bg-3); }
.weap-table tr.picked td { background: rgba(242,106,46,.18); }

/* Target legend (weapon phase): one chip per enemy this mech is firing on. */
.target-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; color: var(--ink-dim);
  border: 1px solid var(--line-bright); background: var(--bg-0);
}
.tl-chip .tl-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--tc, var(--red)); box-shadow: 0 0 6px var(--tc, var(--red)); }
.tl-chip.cur { color: var(--ink); border-color: var(--tc, var(--red)); box-shadow: 0 0 0 1px var(--tc, var(--red)); }
.crit-loc { margin-bottom: 8px; }
.crit-loc h5 { margin: 0 0 3px; font-size: var(--fs-2xs); color: var(--ink-dim); font-weight: 600; letter-spacing: .1em; }
.crit-slot { display: flex; gap: 6px; padding: 1px 0; color: var(--ink-dim); }
.crit-slot .n { color: var(--ink-faint); width: 10px; }
.crit-slot.empty { color: #46545f; font-style: italic; }
.crit-slot.hit { color: var(--red); text-decoration: line-through; }

/* == Combat log =========================================================== */
.log-feed { font-family: var(--font-mono); font-size: var(--fs-sm); }
.log-turn {
  display: flex; align-items: center; gap: 10px; margin: 16px 0 9px;
  color: var(--accent); font-weight: 700; letter-spacing: .2em; font-size: var(--fs-2xs);
}
.log-turn::before, .log-turn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-bright)); }
.log-turn::after { background: linear-gradient(90deg, var(--line-bright), transparent); }

.log-entry { border-left: 2px solid var(--line-bright); padding: 4px 0 5px 9px; margin-bottom: 7px; }
.le-head { display: flex; align-items: center; gap: 7px; line-height: 1.5; }
.le-ico { width: 13px; height: 13px; flex: none; color: var(--ink-faint); display: inline-flex; align-items: center; }
.le-ico svg { width: 13px; height: 13px; }
.le-tx { flex: 1; min-width: 0; color: var(--ink); }
.le-tx b { font-weight: 600; }
.le-pill { margin-left: 8px; flex: none; font-size: 9px; letter-spacing: .12em; padding: 1px 8px; border-radius: 10px; }
.le-det { padding-left: 20px; margin-top: 1px; }
.le-line { color: var(--ink-dim); line-height: 1.55; }
.le-line.muted, .le-line .muted { color: var(--ink-faint); }
.le-line.muted { font-size: var(--fs-xs); }
.log-entry .dmg { color: var(--amber); font-weight: 600; }
.log-entry .crit { color: var(--red); font-weight: 600; }
.nm-me { color: var(--cyan); }
.nm-foe { color: var(--red); }

/* category rails + icon tint */
.cat-move, .cat-attack { border-left-color: rgba(56,198,244,.55); }
.cat-move .le-ico, .cat-attack .le-ico { color: var(--cyan); }
.cat-crit { border-left-color: rgba(247,107,107,.6); }
.cat-crit .le-ico { color: var(--red); }
.cat-kill { border-left-color: var(--red); background: rgba(247,107,107,.09); }
.cat-kill .le-ico { color: var(--red); }
.cat-kill .le-tx { font-weight: 600; }
.cat-heat, .cat-status { border-left-color: rgba(255,193,90,.55); }
.cat-heat .le-ico, .cat-status .le-ico { color: var(--amber); }
.cat-phase { border-left-color: var(--accent); }
.cat-phase .le-ico { color: var(--accent); }
.cat-phase .le-tx { color: var(--ink-dim); letter-spacing: .08em; }
.cat-sys { border-left-color: var(--line); }

/* outcome pills */
.pill-hit, .pill-ok { background: rgba(95,217,143,.18); color: var(--green); }
.pill-miss { background: rgba(130,153,172,.24); color: var(--ink-dim); }
.pill-crit { background: rgba(247,107,107,.2); color: var(--red); }

/* == SVG map elements ===================================================== */
.hex { stroke: #2b3b48; stroke-width: .8; }
.hex.t-clear { fill: #243441; }
.hex.t-rough { fill: #3e3526; }
.hex.t-rubble { fill: #3a2f3e; }
.hex.t-lwoods { fill: #1f4630; }
.hex.t-hwoods { fill: #16341f; }
.hex.t-water { fill: #0f3f63; }
.hex.e1 { filter: brightness(1.16) saturate(1.1); stroke: #c98a3c; stroke-width: 1.1; }
.hex.e2 { filter: brightness(1.32) saturate(1.18); stroke: #e0a44a; stroke-width: 1.3; }
.hex.e3 { filter: brightness(1.5) saturate(1.25); stroke: #ffc16b; stroke-width: 1.6; }
.hex-label { font-family: var(--font-mono); font-size: 4.5px; fill: #5d7184; pointer-events: none; }
.hex-elev-badge { fill: #2a2114; stroke: #ffc16b; stroke-width: .5; pointer-events: none; }
.hex-elev { font-size: 5px; font-weight: 700; fill: #ffce85; pointer-events: none; }
.hex-terrain-ico { pointer-events: none; opacity: .9; }
.hex-reach { fill: rgba(56,198,244,.2); stroke: rgba(56,198,244,.55); stroke-width: .7; pointer-events: none; }
.hex-reach.run { fill: rgba(255,193,90,.17); stroke: rgba(255,193,90,.5); }
.hex-reach.jump { fill: rgba(242,106,46,.18); stroke: rgba(242,106,46,.6); }
.hex-path { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-dasharray: 4 3; stroke-linecap: round; pointer-events: none; filter: drop-shadow(0 0 2px rgba(56,198,244,.7)); animation: dashmove 1s linear infinite; }
@keyframes dashmove { to { stroke-dashoffset: -7; } }
.mp-badge-bg { fill: var(--cyan); stroke: #06121a; stroke-width: .6; pointer-events: none; opacity: .95; }
.mp-badge { font-family: var(--font-mono); font-size: 7px; font-weight: 700; fill: #06121a; pointer-events: none; }
.move-facing { fill: var(--cyan); stroke: #06121a; stroke-width: .5; pointer-events: none; }
.move-facing.reverse { fill: var(--amber); }
.move-reverse-tag { font-family: var(--font-mono); font-size: 6px; font-weight: 700; fill: var(--amber); letter-spacing: .08em; pointer-events: none; }
.hex-deploy { fill: rgba(95,217,143,.16); stroke: rgba(95,217,143,.55); stroke-width: .8; stroke-dasharray: 3 2; pointer-events: none; }
.fire-line { stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 6 3; opacity: .92; pointer-events: none; filter: drop-shadow(0 0 2px rgba(247,107,107,.6)); }
.fire-line.friendly { stroke: var(--accent-hi); filter: drop-shadow(0 0 2px rgba(255,138,77,.6)); }
.los-blocked { stroke: var(--ink-faint); filter: none; }

/* Torso-twist aim indicator (weapon phase) */
.torso-arc { pointer-events: none; }
.torso-aim { stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 2 2; opacity: .85; }
.torso-chevron { fill: var(--amber); stroke: #06121a; stroke-width: .5; filter: drop-shadow(0 0 2px rgba(255,193,90,.7)); }

.unit-g { cursor: pointer; }
.unit-body { transition: transform .22s ease; }
.unit-chassis { fill: #b6cddd; stroke: #06121a; stroke-width: .8; }
.unit-g.friendly .unit-chassis { fill: var(--cyan); }
.unit-g.enemy .unit-chassis { fill: var(--red); }
.unit-ring { fill: none; stroke: transparent; stroke-width: 1.2; opacity: .8; }
.unit-g.selected .unit-ring { stroke-width: 2.2; opacity: .9; }
.unit-g.friendly.selected .unit-ring { stroke: var(--cyan); }
.unit-g.enemy.selected .unit-ring { stroke: var(--red); }
.unit-bracket { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; opacity: 0; pointer-events: none; }
.unit-g.selected .unit-bracket { opacity: .95; animation: reticle 1.4s ease-in-out infinite; }
.unit-g.friendly.selected .unit-bracket { stroke: var(--cyan-hi); }
.unit-g.enemy.selected .unit-bracket { stroke: var(--red); }
@keyframes reticle { 50% { opacity: .35; } }
.unit-g.dimmed { opacity: .5; transition: opacity .15s; }
.unit-g.dimmed:hover { opacity: .8; }
.unit-g.moved-flag .unit-chassis { opacity: .62; }
.unit-g.shutdown-flag .unit-chassis { fill: #67788a; }
.unit-facing { fill: #fff; opacity: .9; }
.unit-name-tag { font-family: var(--font-mono); font-size: 5px; fill: #d6e8f5; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.85); stroke-width: 1.6; }
.unit-hp-bar { height: 2px; }
.dmg-float {
  font-family: var(--font-display); font-weight: 700; font-size: 14px; fill: var(--amber);
  text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.9); stroke-width: 2.8;
  animation: dmgfloat 1.6s ease-out forwards; pointer-events: none;
}
.dmg-float.miss { fill: var(--ink-dim); font-size: 10px; }
.dmg-float.crit-f { fill: var(--red); font-size: 16px; }
@keyframes dmgfloat { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.shot-flash { animation: shotflash .5s ease-out forwards; pointer-events: none; }
@keyframes shotflash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Weapon-fire FX (see js/hexmap.js animateShot). All FX layers are click-through. */
.fx-round  { pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(255,220,150,.9)); }
.fx-trail  { pointer-events: none; animation: fxtrail .6s ease-out forwards; }
.fx-flamer { pointer-events: none; opacity: .8; animation: fxflamer .46s ease-out forwards; }
@keyframes fxtrail  { 0% { opacity: .6; } 100% { opacity: 0; } }
@keyframes fxflamer { 0% { opacity: .85; stroke-width: 3; } 40% { opacity: .8; stroke-width: 8; } 100% { opacity: 0; stroke-width: 9; } }

/* Destruction / ammo-cookoff puff: fire flash + rising smoke (js/hexmap.js explode). */
.fx-explosion { pointer-events: none; transform-box: fill-box; transform-origin: center; animation: fxboom .62s ease-out forwards; }
.fx-smoke     { pointer-events: none; transform-box: fill-box; transform-origin: center; animation: fxsmoke 1.5s ease-out forwards; }
@keyframes fxboom  { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes fxsmoke { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .55; } 100% { opacity: 0; transform: translateY(-22px) scale(1.6); } }

.deploy-banner, .gameover-banner {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 9;
  background: rgba(13,19,26,.96); border: 1px solid var(--line-bright); border-radius: 8px;
  padding: 10px 20px; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,.55);
}
.gameover-banner { top: 40%; padding: 26px 44px; }
.gameover-banner h2 { font-size: 32px; }
.gameover-banner.win h2 { color: var(--green); text-shadow: 0 0 20px rgba(95,217,143,.4); }
.gameover-banner.loss h2 { color: var(--red); text-shadow: 0 0 20px rgba(247,107,107,.4); }

/* Initiative flash */
.init-flash {
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 12;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink);
  background: rgba(13,19,26,.96); border: 1px solid var(--line-bright); border-radius: 6px; padding: 8px 18px;
  animation: initflash 3.4s ease forwards; pointer-events: none;
}
@keyframes initflash { 0% { opacity: 0; transform: translate(-50%, -8px); } 10% { opacity: 1; transform: translate(-50%, 0); } 85% { opacity: 1; } 100% { opacity: 0; } }

.zoom-ctl { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 10; }
.zoom-ctl button { width: 34px; height: 34px; font-size: 17px; padding: 0; }

/* Reduce 300ms tap delay on interactive controls */
.btn, .mode-seg button, .side-tabs button, .zoom-ctl button, .unit-card, .weap-table tr.pick { touch-action: manipulation; }

/* == Mobile / touch pass ================================================== */
@media (max-width: 760px) {
  /* Touch targets >= 44px (Apple HIG / Material) */
  .zoom-ctl button { width: 44px; height: 44px; font-size: 19px; }
  .mode-seg button { padding: 12px 15px; font-size: var(--fs-sm); }
  .btn { padding: 11px 18px; }
  .btn-sm { padding: 10px 14px; font-size: var(--fs-sm); }
  .side-tabs button { padding: 15px 0; font-size: var(--fs-md); }

  /* HUD dock reflows to a stack: action controls on top (full width), then the two
     selected-unit cards side-by-side (armour | weapons) along the bottom edge. */
  .battle-hud {
    grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .hud-action { grid-column: 1 / -1; order: -1; }
  .hud-armor { grid-column: 1; justify-self: stretch; }
  .hud-weapon { grid-column: 2; justify-self: stretch; }
  .hud-card { max-width: 100%; }
  .hud-action .action-bar { width: 100%; }
  .wpick { max-height: 30dvh; }
  .battle-screen { height: calc(100dvh - 50px); } /* slim mobile top bar */

  /* Weapon/record rows: bigger tap targets on touch. */
  .weap-table td { padding: 9px 5px; }
  .weap-table tr.pick td { font-size: var(--fs-sm); }
  .wpick-row { padding: 10px 9px; font-size: var(--fs-sm); }
  .gameover-banner { width: min(92vw, 360px); padding: 22px 20px; }
  .gameover-banner h2 { font-size: 24px; }

  /* Context bar (phase strip): keep it on one line within the viewport. */
  .phase-strip { top: 8px; padding: 5px 8px; gap: 1px; max-width: calc(100vw - 16px); flex-wrap: nowrap; }
  .phase-step { padding: 3px 6px; letter-spacing: .04em; }
  .turn-pill { font-size: var(--fs-sm); padding-right: 7px; margin-right: 4px; }
  .phase-strip .tag { display: none; } /* init won/lost — phase steps already show state */

  /* Selected-unit header: keep the glanceable bits, let long text breathe */
  .uh-nm { max-width: 60%; }
  .uh-pilot { font-size: 9px; }
}

/* ---- Web push: lobby nudge, Dossier toggle, opt-in modals ------------------ */
.notify-nudge {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 14px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-bright); border-left: 3px solid var(--accent);
  border-radius: var(--r); color: var(--ink);
}
.notify-nudge .ico { color: var(--accent); flex: none; }
.notify-nudge .nn-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.notify-nudge .nn-text b { font-size: var(--fs-base); }
.notify-nudge .nn-text span { color: var(--ink-faint); font-size: var(--fs-sm); }
.notify-nudge .btn { margin-left: auto; flex: none; }
.notify-nudge .nn-x { flex: none; }

.notify-panel .notify-state { color: var(--ink-faint); font-size: var(--fs-sm); margin-top: 8px; }

/* Toggle row: a styled checkbox that reads as a switch. */
.switch-row { display: flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; }
.switch-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-ui {
  position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line-bright); transition: background .15s, border-color .15s;
}
.switch-ui::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--ink-dim); transition: transform .15s, background .15s;
}
.switch-row input:checked + .switch-ui { background: var(--accent); border-color: var(--accent-hi); }
.switch-row input:checked + .switch-ui::after { transform: translateX(18px); background: #fff; }
.switch-row input:focus-visible + .switch-ui { outline: 2px solid var(--cyan); outline-offset: 2px; }
.switch-label { font-size: var(--fs-base); color: var(--ink); }

/* Opt-in / blocked modals. */
.notify-modal { color: var(--ink-dim); font-size: var(--fs-base); line-height: 1.6; }
.notify-modal p { margin: 0 0 12px; }
.notify-points, .notify-steps { margin: 0 0 12px; padding-left: 20px; }
.notify-points li, .notify-steps li { margin: 4px 0; }
.notify-points { list-style: none; padding-left: 4px; }
.notify-points li::before { content: '▸ '; color: var(--accent); }
.notify-fine { color: var(--ink-faint); font-size: var(--fs-sm); margin-bottom: 0 !important; }