/* Polaris Command, design 01. UI-only tokens and layout; the live city,
   camera, map and team markers keep their existing behaviour. */
:root {
  --ink: #eaf5fd;
  --dim: #9bb7ca;
  --panel: rgba(8, 26, 41, 0.94);
  --panel-solid: #081a29;
  --glass: rgba(16, 39, 56, 0.9);
  --line: #57d8ff;
  --line-dim: rgba(87, 216, 255, 0.25);
  --amber: #ffc455;
  --mech-accent: #57d8ff;
  --mech-secondary: #2a5ecf;
}
button, a, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}
.menu-loadout, .menu-setup, .cp-body { scrollbar-width: thin; scrollbar-color: #426277 #0c2030; }
.go { background: var(--amber); box-shadow: none; text-shadow: none; }
.ghost, .seg button, .stepper button { background: #102738; border-color: #385365; }
.seg button[aria-pressed="true"] { color: var(--ink); background: #234153; border-color: var(--mech-accent); box-shadow: inset 0 -2px var(--mech-accent); }
.ghost:hover, .seg button:hover:not(:disabled) { border-color: var(--mech-accent); background: #203b4d; }

/* Two independently scrollable stations, with launch always reachable. The sheet is as tall as what's
   in it, down to the foot of the window at most (docs/UI-GUIDE.md). */
#menu::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #081a29bd, #081a2920 58%, transparent 72%); }
.logo { top: calc(66px + var(--safe-t)); }
.logo h1 { font-size: clamp(34px, 3.8vw, 48px); font-style: normal; letter-spacing: -0.02em; text-shadow: 0 2px 16px #081a29; }
.logo-en { font-size: 12px; letter-spacing: 0.42em; color: var(--mech-accent); }
.dev-badge { color: var(--dim); background: #081a29e8; border-left: 2px solid var(--amber); font-size: 10px; }
.menu-sheet {
  top: calc(184px + var(--safe-t)); width: min(var(--w-l), 56vw); height: fit-content;
  display: grid; grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr) minmax(0, 1fr);
  padding: 0; overflow: hidden; border: 1px solid var(--line-dim); border-top: 2px solid var(--mech-accent);
  background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 50px #0006; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.menu-command { grid-column: 1 / -1; padding: 12px 14px 0; border-bottom: 1px solid var(--line-dim); background: #0b2132; }
#mode { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
#mode button { min-width: 0; font-size: 13px; letter-spacing: 0; min-height: 40px; }
.mode-note { margin: 8px 0 10px; line-height: 1.45; font-size: 11px; }
.menu-loadout, .menu-setup { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px; }
.menu-loadout { border-right: 1px solid var(--line-dim); }
.menu-sheet h2 { font-size: 11px; letter-spacing: 0.14em; color: var(--dim); }
.menu-sheet .mechs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mech-card { min-width: 0; min-height: 76px; padding: 10px 9px 10px 12px; clip-path: none; border: 1px solid #294253; background: #102738; box-shadow: inset 2px 0 color-mix(in srgb, var(--glow) 45%, #102738); }
.mech-card[aria-pressed="true"] { background: linear-gradient(110deg, color-mix(in srgb, var(--glow) 20%, #102738), #102738); border-color: var(--glow); box-shadow: inset 3px 0 var(--glow); }
.mech-card:hover { border-color: var(--glow); }
.mech-card .mech-name { font-size: 16px; line-height: 1.2; overflow-wrap: normal; }
.mech-card .mech-code { font-size: 8px; letter-spacing: 0.06em; }
.mech-card .mech-role { font-size: 11px; }
.mech-card .stats { display: none; }
.mech-detail { background: #102738; margin: 10px 0 0; padding: 10px; font-size: 11px; }
.mech-detail ul { gap: 4px 8px; font-size: 11px; }
.menu-setup .row { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 12px; }
.menu-setup .label { font-size: 11px; }
.menu-setup .seg button { min-height: 34px; font-size: 12px; }
.menu-setup .slot { min-height: 36px; }
.menu-setup .slot b { font-size: 15px; }
.menu-setup .join-hint { font-size: 11px; line-height: 1.45; }
.menu-deploy { grid-column: 1 / -1; display: flex; flex-direction: row-reverse; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line-dim); background: #0b2132; }
.menu-deploy .go, .menu-deploy .ghost { margin: 0; min-height: 44px; font-size: 17px; }
.menu-deploy .go { flex: 1; }
.menu-deploy .ghost { width: auto; padding-inline: 18px; }
#menu .model-control { left: min(720px, 59vw); }
.model-hint { font-size: 12px; padding: 7px 10px; background: #081a29b8; border-right: 2px solid var(--mech-accent); }

/* Campaign: the same framing, with a pilot's identity carried into the base. */
.cp-sheet { border: 1px solid var(--line-dim); border-top: 2px solid var(--mech-accent); background: rgba(8, 26, 41, 0.92); }
.cp-top { padding: 18px 22px; background: #0b2132e8; }
.cp-head h1 { font-style: normal; letter-spacing: 0; }
.cp-head p { line-height: 1.5; letter-spacing: 0.03em; }
.cp-funds { padding-left: 20px; border-left: 1px solid var(--line-dim); }
.cp-tabs { position: sticky; top: -18px; z-index: 2; max-width: none; margin-bottom: 20px; padding-block: 10px 12px; border-bottom: 1px solid var(--line-dim); background: #081a29; }
.cp-tabs button { min-height: 46px; }
.cp-up { padding: 14px 12px; border-bottom-color: #294253; }
.cp-up:nth-of-type(even) { background: #10273890; }
.cp-pips i.on { background: var(--mech-accent); box-shadow: none; }
.overlay-box { background: #081a29f5; border-top: 2px solid var(--mech-accent); box-shadow: 0 20px 80px #0008; }

/* Mech colour frames the instruments; P1–P4 still match their world tags. */
.card { padding: 10px 12px 12px 14px; }
.card::before { background: #081a29ed; border: 1px solid color-mix(in srgb, var(--c) 32%, #102738); border-top: 2px solid var(--c); border-left: 3px solid var(--c); }
.card::after { content: ''; position: absolute; right: 12px; top: 0; width: 40px; height: 2px; background: var(--mech-secondary); }
.card-p { background: var(--player-color); border-radius: 2px; }
.card-mech { font-style: normal; font-size: 17px; }
.card-code { color: var(--c); font-size: 9px; letter-spacing: 0.06em; }
.card-hp { height: 16px; transform: none; }
.card-hp-n { transform: translateY(-50%); text-shadow: 0 1px 3px #000, 0 0 4px #000; font-variant-numeric: tabular-nums; }
.card-hp .fill { background: var(--c); box-shadow: none; }
.card-hp::after { background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #081a2970 calc(10% - 1px) 10%); }
.card.low .card-hp { outline: 1px solid var(--red); }
.card.low::before { border-top-color: var(--red); }
.card.low .card-hp .fill { background: repeating-linear-gradient(135deg, #ff4b3e 0 7px, #a92524 7px 10px); }
.mv { background: #173246; }
.mv .key { color: var(--c); background: #081a29; border-right: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.hud-clock { font-variant-numeric: tabular-nums; }
.cp-obj, .cp-radio { background: #081a29ed; border-color: var(--mech-accent); }

@media (max-width: 1100px) {
  .menu-sheet { width: min(620px, 62vw); }
  #menu .model-control { left: 64vw; }
}
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .logo { top: calc(64px + var(--safe-t)); left: 20px; right: 20px; text-align: left; }
  .logo h1 { font-size: 32px; }
  .logo-en { font-size: 10px; }
  .menu-sheet { top: 38%; bottom: calc(10px + var(--safe-b)); left: calc(10px + var(--safe-l)); width: calc(100% - 20px - var(--safe-l) - var(--safe-r)); height: auto; max-height: none; display: block; overflow-y: auto; scrollbar-width: thin; }
  .menu-command { position: sticky; top: 0; z-index: 3; padding: 10px 10px 0; }
  #mode button { min-height: 40px; }
  .mode-note { font-size: 11px; }
  .menu-loadout, .menu-setup { overflow: visible; padding: 14px; }
  .menu-loadout { border-right: 0; border-bottom: 1px solid var(--line-dim); }
  .menu-sheet .mechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mech-card .mech-name { font-size: 15px; }
  .mech-card .mech-role { font-size: 10px; }
  .menu-setup .row { grid-template-columns: 5.4em minmax(0, 1fr); align-items: center; }
  .menu-deploy { position: sticky; bottom: 0; z-index: 3; padding: 10px 14px; }
  #menu .model-control { inset: 0 0 62%; }
  .model-hint { top: calc(38% - 36px); bottom: auto; right: 12px; font-size: 10px; }
  .cp-sheet { left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); }
  .cp-top { padding: 12px; gap: 10px; }
  .cp-head h1 { font-size: 23px; }
  .cp-head p { font-size: 11px; }
  .cp-funds { padding-left: 10px; }
  .cp-funds b { font-size: 18px; }
  .cp-body { padding: 12px; }
  .cp-tabs { top: -12px; }
  .cp-up { padding-inline: 4px; }
}
@media (max-width: 390px) {
  .menu-sheet .mechs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 540px) and (min-aspect-ratio: 4/5) {
  .logo { top: calc(58px + var(--safe-t)); left: auto; right: 22px; max-width: 34vw; text-align: right; }
  .logo h1 { font-size: 28px; }
  .logo-en { display: none; }
  .menu-sheet { top: calc(58px + var(--safe-t)); width: 60vw; bottom: calc(10px + var(--safe-b)); left: calc(12px + var(--safe-l)); height: auto; display: grid; max-height: none; overflow: hidden; }
  .menu-command { position: static; padding: 8px 10px 0; }
  #mode button { min-height: 30px; font-size: 12px; }
  .mode-note { display: none; }
  .menu-loadout, .menu-setup { overflow-y: auto; padding: 10px; }
  .menu-sheet .mechs { grid-template-columns: 1fr; }
  .menu-setup .row { grid-template-columns: 1fr; }
  .menu-deploy { position: static; padding: 8px 10px; }
  .menu-deploy .go, .menu-deploy .ghost { min-height: 36px; font-size: 15px; }
  #menu .model-control { inset: 0 0 0 63vw; }
  .model-hint { top: auto; bottom: 12px; max-width: 33vw; }
}
:root.touch .card::after { display: none; }
:root.touch .card-code { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cp-scene, .frame path { transition: none; }
  .card.low .card-hp .fill { animation: none; }
}