/* Main menu: a lobby screen over the live hangar backdrop, and a PLAY screen
   that picks the game mode. The in-game hangar/deploy rules (.hangar-menu,
   .inv-wave-status) live at the bottom of this file and are unrelated. */

body.main-menu { overflow: hidden; }
body.main-menu #loading { display: none; }

#main-menu .pilot-account { padding:10px 12px; border-top:1px solid var(--ui-edge); display:grid; gap:8px; }
#main-menu .pilot-account-identity { display:flex; align-items:center; gap:8px; min-width:0; }
#main-menu .pilot-account-identity > div { min-width:0; }
#main-menu .pilot-account img { border-radius:50%; flex:none; }
#main-menu .pilot-account strong { display:block; color:var(--ui-text); font:600 12px var(--ui-font); overflow-wrap:anywhere; }
#main-menu .pilot-account [role="status"] { display:block; color:var(--ui-muted); font:11px/1.5 var(--ui-font); }
#main-menu .pilot-sync-gate { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:24px; background:rgba(6,11,16,.96); text-align:center; }
#main-menu .pilot-sync-gate > div { max-width:420px; }
#main-menu .pilot-sync-gate h2 { font:600 24px var(--ui-font); }
#main-menu .pilot-sync-gate p { color:var(--ui-muted); line-height:1.5; }

#main-menu {
  position: fixed; inset: 0; z-index: 20000; overflow: hidden;
  color: #edf3f4; background: #060b10; isolation: isolate;
  font-family: 'Segoe UI', system-ui, sans-serif;
  --edge: clamp(16px, 2.6vw, 40px);
  --cy: #6fd8ee; --amber: #edb46e;
}
#menu-scene {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.2s ease;
}
#main-menu.scene-ready #menu-scene { opacity: 1; }
/* Backdrop while the hangar bakes — and the permanent look with ?nomenu3d. */
#menu-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 62% 46%, rgba(66,122,142,.34), transparent 58%),
    radial-gradient(ellipse at 12% 8%, rgba(10,22,30,.9), transparent 62%),
    linear-gradient(180deg, rgba(4,9,13,.82) 0%, rgba(4,9,13,.18) 34%, rgba(4,9,13,.28) 64%, rgba(4,9,13,.88) 100%);
}
#main-menu.scene-ready #menu-scrim, #main-menu.transit #menu-scrim {
  background:
    radial-gradient(ellipse at 22% 84%, rgba(4,9,13,.72), transparent 56%),
    linear-gradient(180deg, rgba(4,9,13,.72) 0%, rgba(4,9,13,0) 26%, rgba(4,9,13,0) 62%, rgba(4,9,13,.8) 100%);
}
.menu-screen { position: absolute; inset: 0; }
#main-menu .menu-version {
  position: absolute; top: 4px; right: max(8px, env(safe-area-inset-right)); z-index: 3;
  color: var(--ui-muted, #9fb6bf); font: 11px/1 var(--ui-mono, monospace); letter-spacing: .06em;
  text-shadow: 0 1px 4px #000; white-space: nowrap; pointer-events: none;
}
/* Transparent interaction area occupies the clear center of the lobby grid. */
#main-menu .mech-inspection { display:none; grid-column:2; grid-row:2 / 4; min-width:0; min-height:0; z-index:1; flex-direction:column; }
#main-menu.scene-ready .mech-inspection { display:flex; }
#main-menu .mech-inspect-drag { flex:1; min-height:120px; cursor:grab; touch-action:none; outline:none; }
#main-menu .mech-inspection:not(.pointer-used) .mech-inspect-drag:focus-visible { outline:1px solid #88b9bf66; outline-offset:-8px; border-radius:8px; }
#main-menu .mech-inspection.dragging .mech-inspect-drag { cursor:grabbing; }
/* A 720p browser or embedded game frame commonly leaves about 650px of
   content height. Switch the inspection area to the compact grid before the
   desktop cards start forcing the menu to scroll. */
@media(max-height:700px) and (min-width:701px), (min-width:560px) and (max-width:700px) {
  #main-menu .mech-inspection { grid-row:2; }
}
@media(max-width:559px) {
  #main-menu .mech-inspection { position:absolute; grid-column:auto; grid-row:auto; top:374px; left:70px; right:70px; height:170px; }
}
/* Hangar backdrop load status; the menu itself never waits on it. */
#menu-loadchip {
  position: absolute; left: var(--edge); bottom: var(--edge); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 6px; width: 190px;
  color: #8fa8b2; font: 10px 'Share Tech Mono', monospace; letter-spacing: .2em;
  transition: opacity .8s ease;
}
#menu-loadchip .load-label::after { content: ''; animation: menu-load-dots 1.2s steps(4) infinite; }
#menu-loadchip .load-bar { height: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
#menu-loadchip .load-bar b { display: block; height: 100%; width: 0; background: var(--cy); box-shadow: 0 0 8px var(--cy); transition: width .35s ease; }
#menu-loadchip.done { opacity: 0; }
#menu-loadchip.done .load-label::after { content: none; }
#menu-loadchip.failed { color: var(--amber); }
#menu-loadchip.failed.done { opacity: 1; animation: menu-load-out .8s ease 3.2s forwards; }
#menu-loadchip.failed .load-bar b { background: var(--amber); box-shadow: none; }
#main-menu[data-screen="play"] #menu-loadchip { display: none; }
@keyframes menu-load-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@keyframes menu-load-out { to { opacity: 0; } }
/* id-level rules below (e.g. #menu-play { display:flex }) outrank the UA's
   [hidden] rule, so state the override once, for everything in the menu. */
#main-menu [hidden] { display: none !important; }
#main-menu button, #main-menu input, #main-menu select { font-family: inherit; }

/* ------------------------------- lobby -------------------------------- */
/* Pilot card: a chamfered HUD plate — header strip, hex rank emblem,
   callsign, and a segmented sortie bar (one notch per sortie to next rank). */
.pilot-card {
  --cut: 14px;
  position: absolute; top: var(--edge); left: var(--edge); width: min(300px, 60vw);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
.pilot-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  background:
    linear-gradient(90deg, rgba(111,216,238,.55), rgba(111,216,238,.08) 70%) top / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, rgba(111,216,238,.035) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(12,28,38,.94), rgba(6,14,20,.74));
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
/* corner brackets */
.pilot-card::after {
  content: ''; position: absolute; inset: -4px; pointer-events: none;
  --b: rgba(111,216,238,.7);
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / 14px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) 0 0 / 2px 14px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 100% / 14px 2px no-repeat,
    linear-gradient(var(--b), var(--b)) 100% 100% / 2px 14px no-repeat;
}
.pilot-strip {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 22px 5px 12px; background: linear-gradient(90deg, rgba(111,216,238,.18), transparent 80%);
  border-bottom: 1px solid rgba(111,216,238,.18);
  color: var(--cy); font: 10px 'Share Tech Mono', monospace; letter-spacing: .24em;
}
.pilot-status { display: flex; align-items: center; gap: 6px; color: #8fd9a0; letter-spacing: .18em; }
.pilot-status i { width: 6px; height: 6px; border-radius: 50%; background: #6fe08a; box-shadow: 0 0 8px #6fe08a; animation: pilot-pulse 1.8s ease-in-out infinite; }
@keyframes pilot-pulse { 50% { opacity: .35; } }
.pilot-body { display: flex; align-items: center; gap: 12px; padding: 11px 14px 8px 12px; }
.pilot-emblem { position: relative; flex: none; width: 50px; height: 56px; display: grid; place-items: center; }
.pilot-emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pilot-emblem .em-outer { fill: rgba(237,180,110,.12); stroke: var(--amber); stroke-width: 2; }
.pilot-emblem .em-inner { fill: none; stroke: rgba(237,180,110,.35); stroke-width: 1; }
.pilot-emblem .em-chev { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; opacity: .8; }
.pilot-emblem b {
  position: relative; margin-top: -16px; color: #fbe3c2;
  font: 900 24px/1 'Big Shoulders Stencil', Impact, sans-serif;
  text-shadow: 0 0 10px rgba(237,180,110,.6);
}
.pilot-info { flex: 1; min-width: 0; }
.pilot-name {
  display: block; width: 100%; border: 1px solid transparent; border-radius: 2px;
  background: none; color: #f4f9fa; padding: 1px 5px; margin-left: -6px;
  font: 800 22px/1.1 'Big Shoulders Stencil', Impact, 'Arial Narrow', sans-serif; letter-spacing: .08em;
  text-transform: uppercase; text-shadow: 0 0 14px rgba(111,216,238,.3);
}
.pilot-name:hover { border-color: rgba(111,216,238,.28); }
.pilot-name:focus { outline: none; border-color: var(--cy); background: rgba(4,14,20,.75); }
.pilot-title { margin-top: 2px; color: var(--amber); font: 11px 'Share Tech Mono', monospace; letter-spacing: .22em; }
.pilot-id { margin-top: 3px; color: #6f8791; font: 10px 'Share Tech Mono', monospace; letter-spacing: .16em; }
.pilot-id span { color: #9fb6bf; }
.pilot-xp { padding: 0 16px 13px 12px; }
.pilot-xp-head {
  display: flex; justify-content: space-between; margin-bottom: 5px;
  color: #7f97a1; font: 10px 'Share Tech Mono', monospace; letter-spacing: .14em;
}
#pilot-next { color: #c9dde3; }
.pilot-bar {
  position: relative; display: block; height: 7px; overflow: hidden;
  background: rgba(255,255,255,.08); transform: skewX(-24deg);
}
.pilot-bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #edb46e, #f7dcae); box-shadow: 0 0 10px rgba(237,180,110,.6); transition: width .5s ease; }
/* notch the bar into SORTIES_PER_RANK (5) segments */
.pilot-bar::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 3px), rgba(6,14,20,.95) calc(20% - 3px) 20%);
}

/* Settings: a gear in the top-right corner opens the full-screen SETTINGS menu
   (src/game/settingsmenu.js). */
.gear-btn {
  position: absolute; top: var(--edge); right: var(--edge);
  width: 50px; height: 50px; display: grid; place-items: center; cursor: pointer; color: #b9d5de;
  border: 1px solid rgba(111,216,238,.26); background: rgba(8,18,25,.76);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  transition: border-color .15s, color .15s, background .15s;
}
.gear-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.gear-btn:hover, .gear-btn:focus-visible { color: #fff; border-color: var(--cy); background: rgba(16,44,56,.86); outline: none; }
.gear-btn:hover svg, .gear-btn:focus-visible svg { transform: rotate(60deg); color: var(--cy); }

/* Title card: centred while the hangar loads (and for good on the flat
   ?nomenu3d backdrop), then shrinks into the bottom-left corner once the
   backdrop is up. Scaling about the bottom-left corner keeps that corner
   pinned to the page edge. */
.lobby-brand {
  position: absolute; top: 46%; left: 50%; --brand-y: calc(100% - var(--edge));
  transform: translate(-50%, -50%); transform-origin: 0 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px; white-space: nowrap;
  pointer-events: none;
  transition: top 1.1s cubic-bezier(.6,0,.2,1), left 1.1s cubic-bezier(.6,0,.2,1), transform 1.1s cubic-bezier(.6,0,.2,1);
}
#main-menu.scene-ready .lobby-brand {
  top: var(--brand-y); left: var(--edge); transform: translate(0, -100%) scale(var(--brand-scale, .4));
}
/* Wordmark: Big Shoulders Stencil, the lettering sprayed on the carrier hull. */
.brand-mark {
  margin: 0; display: flex; flex-direction: column; align-items: center; line-height: .84;
  font-family: 'Big Shoulders Stencil', Impact, 'Arial Narrow', sans-serif; font-weight: 900; text-transform: uppercase;
}
.brand-sub {
  color: var(--cy); font-size: clamp(12px, 2.3vw, 32px); font-weight: 700;
  letter-spacing: .16em; margin-left: .16em; margin-top: .65em; text-shadow: 0 0 14px rgba(111,216,238,.55);
}
.brand-main {
  color: #eef6f7; font-size: clamp(36px, 9vw, 136px); letter-spacing: .07em; margin-left: .07em;
  background: linear-gradient(180deg, #fbfdfd 0%, #d7e4e8 52%, #8fa6ae 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(3,8,12,.8)) drop-shadow(0 0 26px rgba(111,216,238,.28));
}


.lobby-right { position: absolute; right: var(--edge); top: 50%; transform: translateY(-50%); }
.chassis-btn {
  display: flex; align-items: center; gap: 13px; cursor: pointer; color: inherit;
  padding: 14px 18px; min-width: 232px; text-align: left; border-radius: 4px;
  border: 1px solid rgba(111,216,238,.26); background: rgba(8,18,25,.76);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: border-color .15s, background .15s, transform .15s;
}
.chassis-btn svg { width: 25px; height: 25px; flex: none; fill: none; stroke: var(--cy); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.chassis-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chassis-meta > span { color: #8fa8b2; font: 10px 'Share Tech Mono', monospace; letter-spacing: .2em; }
.chassis-meta strong { font-size: 15px; font-weight: 600; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chassis-btn:hover, .chassis-btn:focus-visible, .chassis-btn.on { border-color: var(--cy); background: rgba(16,44,56,.86); transform: translateX(-3px); outline: none; }

.lobby-bottom { position: absolute; right: var(--edge); bottom: var(--edge); }
.play-btn {
  cursor: pointer; padding: 20px clamp(48px, 9vw, 104px); border: none; border-radius: 3px;
  color: #08161d; background: linear-gradient(180deg, #d8f4fb, #8fd8ec);
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: .1em;
  box-shadow: 0 0 34px rgba(111,216,238,.4), 0 14px 34px rgba(0,0,0,.45);
  transition: transform .14s, box-shadow .14s, filter .14s;
}
.play-btn:hover, .play-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 0 52px rgba(111,216,238,.6), 0 18px 40px rgba(0,0,0,.5); outline: none; }
.play-btn:active { transform: translateY(0); }
/* Deployment clears the bay view and keeps one compact, stable control panel. */
#main-menu.matching { overflow:hidden; }
#main-menu.matching #menu-lobby { opacity:0; pointer-events:none; transition:opacity .35s ease; }
#main-menu.matching #menu-loadchip { display:none; }
.deployment-fade { position:fixed; inset:0; z-index:30000; background:#000; opacity:0; pointer-events:none; transition:opacity var(--deployment-fade-time, 650ms) linear; }
.deployment-fade.opaque { opacity:1; }
#menu-deployment {
  position:absolute; left:50%; bottom:clamp(24px, 5vh, 56px); transform:translateX(-50%);
  width:min(480px, calc(100% - 32px)); box-sizing:border-box; padding:22px 24px 16px;
  border:1px solid #8ac6d333; border-top:2px solid #8dcad4; border-radius:6px;
  background:linear-gradient(135deg, #13252eee, #091219f5); box-shadow:0 18px 60px #0008;
  backdrop-filter:blur(14px); color:#e8f2f4;
}
.deployment-heading { display:flex; align-items:center; gap:8px; color:#9cb7c0; font:10px 'Share Tech Mono',monospace; letter-spacing:.13em; }
.deployment-beacon { width:5px; height:5px; border-radius:50%; background:#a2e8ef; box-shadow:0 0 9px #77dbea66; }
.deployment-mode { margin-left:auto; color:#7e99a3; font-size:9px; letter-spacing:.06em; }
#deployment-stage { margin:14px 0 18px; font-size:clamp(20px, 2.1vw, 26px); font-weight:500; letter-spacing:-.02em; line-height:1.25; }
.deployment-meta { display:flex; justify-content:space-between; align-items:baseline; gap:16px; color:#8fa9b3; font-size:11px; line-height:1.5; }
#deployment-detail { min-width:0; overflow-wrap:anywhere; }
#deployment-percent { color:#bdd8df; font:11px 'Share Tech Mono',monospace; font-variant-numeric:tabular-nums; }
#deployment-progress { display:block; appearance:none; width:100%; height:3px; margin:10px 0 16px; border:none; border-radius:4px; background:#8abcca22; overflow:hidden; }
#deployment-progress::-webkit-progress-bar { background:#8abcca22; }
#deployment-progress::-webkit-progress-value { background:#9cdae3; transition:width .3s ease; }
#deployment-progress::-moz-progress-bar { background:#9cdae3; }
#btn-cancel-deploy { display:flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:42px; border:1px solid #87aebb40; border-radius:3px; background:#afdae908; color:#b8cdd4; font-size:11px; letter-spacing:.1em; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
#btn-cancel-deploy:hover, #btn-cancel-deploy:focus-visible { background:#b1dbe916; border-color:#9bcfdb99; color:#effcff; outline:none; }
#btn-cancel-deploy kbd { padding:2px 5px; border:1px solid #9dbec747; border-radius:3px; font:10px 'Share Tech Mono',monospace; letter-spacing:.04em; }
@media(max-width:480px) { #menu-deployment { padding:18px 18px 12px; } .deployment-mode { display:none; } }
@media(pointer:coarse) { #btn-cancel-deploy kbd { display:none; } }
@media(prefers-reduced-motion:reduce) { #main-menu.matching #menu-lobby, .deployment-fade, #deployment-progress::-webkit-progress-value { transition:none; } }
/* ---------------------------- mode select ----------------------------- */
#menu-play { display: flex; flex-direction: column; background: rgba(4,9,13,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.play-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--edge) var(--edge) 0; }
.back-btn {
  display: flex; align-items: center; gap: 12px; cursor: pointer; color: #eaf4f7;
  background: none; border: none; padding: 6px 4px; font-size: clamp(19px, 2.2vw, 25px); font-weight: 600; letter-spacing: .04em;
}
.back-arrow {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(111,216,238,.4); color: var(--cy); font-size: 17px;
  transition: background .15s, transform .15s;
}
.back-btn:hover .back-arrow, .back-btn:focus-visible .back-arrow { background: rgba(111,216,238,.16); transform: translateX(-3px); }
.back-btn:focus-visible { outline: none; }
.play-esc { color: #7f97a1; font: 10px 'Share Tech Mono', monospace; letter-spacing: .18em; }
.play-esc kbd { border: 1px solid rgba(159,182,191,.4); border-radius: 3px; padding: 2px 6px; margin-right: 6px; font: inherit; }

.play-body { flex: 1; min-height: 0; display: flex; gap: clamp(18px, 3vw, 44px); padding: clamp(14px, 3vh, 34px) var(--edge) var(--edge); }
.play-tabs { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.play-tab {
  display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer;
  background: none; border: none; color: #7f97a1; padding: 4px 2px; width: 76px;
  font-size: 13px; letter-spacing: .04em; transition: color .15s;
}
.play-tab svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.play-tab[aria-selected="true"] { color: #eaf4f7; }
.play-tab[aria-selected="true"] svg { stroke: var(--cy); }
.play-tab:hover, .play-tab:focus-visible { color: #eaf4f7; outline: none; }

.play-grid { flex: 1; min-width: 0; min-height: 0; display: grid; gap: 14px; overflow: auto;
  grid-template-columns: minmax(180px, .62fr) repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.play-grid[hidden] { display: none; }
#tab-training { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mode-card {
  position: relative; cursor: pointer; display: flex; flex-direction: column;
  padding: clamp(18px, 2vw, 26px); border-radius: 3px; min-height: min(56vh, 400px); overflow: auto;
  border: 1px solid rgba(111,216,238,.2); background: rgba(10,21,28,.84);
  transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
}
.mode-card:hover, .mode-card:focus-visible {
  transform: translateY(-4px); border-color: var(--cy); outline: none;
  box-shadow: 0 0 30px rgba(111,216,238,.22), 0 16px 34px rgba(0,0,0,.4);
}
/* RANDOM has no shot of its own: it shows BOTH operations, split on the card's
   diagonal, with a scrim under the mark so the copy stays readable. */
.mode-card.random {
  align-items: center; justify-content: center; text-align: center; gap: 14px;
  overflow: hidden; background: #08131a;
}
.mode-card.random .card-shot { transition: transform .5s ease, filter .5s ease; filter: saturate(.85); }
.mode-card.random .shot-a { clip-path: polygon(0 0, 100% 0, 0 100%); object-position: 33% 50%; }
.mode-card.random .shot-b { clip-path: polygon(100% 0, 100% 100%, 0 100%); object-position: 45% 50%; }
.mode-card.random::after { /* centre scrim */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 56%, rgba(4,10,14,.9) 0%, rgba(4,10,14,.52) 42%, rgba(4,10,14,.78) 100%);
}
.mode-card.random::before { /* the seam between the two operations */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: rgba(150,226,242,.55);
  clip-path: polygon(100% -3px, 100% 3px, 0 calc(100% + 3px), 0 calc(100% - 3px));
}
.mode-card.random > *:not(.card-shot) { position: relative; z-index: 3; }
.mode-card.random:hover .card-shot, .mode-card.random:focus-visible .card-shot { transform: scale(1.05); filter: saturate(1); }
.card-glyph {
  width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: 50%;
  font: 800 clamp(38px, 4.6vw, 60px)/1 'Segoe UI', system-ui, sans-serif; color: #eaf7fb;
  background: rgba(6,16,22,.74); border: 2px solid rgba(150,226,242,.55);
  box-shadow: 0 0 26px rgba(111,216,238,.3), inset 0 0 18px rgba(111,216,238,.12);
}
.mode-card.random strong {
  margin: 0; font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; letter-spacing: .06em;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.card-sub { color: #bcd0d8; font-size: 13px; line-height: 1.5; max-width: 210px; text-shadow: 0 1px 8px rgba(0,0,0,.85); }

.card-tag { color: #8fa8b2; font: 10px 'Share Tech Mono', monospace; letter-spacing: .2em; }
.card-art { width: clamp(60px, 7vw, 92px); height: clamp(60px, 7vw, 92px); margin: clamp(14px, 3vh, 34px) 0 0; fill: none; stroke: var(--cy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mode-card strong { font-size: clamp(19px, 2vw, 27px); font-weight: 650; letter-spacing: -.01em; margin: auto 0 10px; }
.mode-card p { color: #a5b8c0; font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.card-enter { margin-top: 4px; color: var(--cy); font: 10px 'Share Tech Mono', monospace; letter-spacing: .18em; }

/* screenshot cards: the shot runs full-bleed, a scrim keeps the copy readable */
.mode-card.photo { overflow: hidden; background: #0a151c; }
.card-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 45%; transform: scale(1.02); transition: transform .5s ease;
}
.mode-card.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,10,14,.62) 0%, rgba(4,10,14,.12) 26%, rgba(4,10,14,.74) 58%, rgba(4,10,14,.96) 100%);
}
.mode-card.photo > *:not(.card-shot) { position: relative; z-index: 1; }
.mode-card.photo:hover .card-shot, .mode-card.photo:focus-visible .card-shot { transform: scale(1.07); }
.mode-card.photo .card-tag { text-shadow: 0 1px 8px rgba(0,0,0,.85); }
.mode-card.photo strong { text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.mode-card.photo p { color: #c3d2d9; }
.mode-card.photo strong { margin-top: auto; }
[data-mode="conquest"] .card-shot { object-position: 33% 50%; }
[data-mode="waves"] .card-shot { object-position: 45% 50%; }
.mode-card.featured { background: linear-gradient(170deg, rgba(233,245,248,.96), rgba(203,231,239,.9)); border-color: transparent; color: #0b1d25; }
.mode-card.featured .card-tag { color: #4c6b78; }
.mode-card.featured p { color: #33525f; }
.mode-card.featured .card-art { stroke: #16626f; }
.mode-card.featured .card-enter { color: #0f5a68; }

.mode-card.wave { border-color: rgba(237,180,110,.36); background: linear-gradient(165deg, rgba(38,32,24,.92), rgba(12,22,28,.9)); }
.mode-card.wave .card-tag, .mode-card.wave .card-enter { color: var(--amber); }
.mode-card.wave .card-art { stroke: var(--amber); }
.mode-card.wave:hover, .mode-card.wave:focus-visible { border-color: var(--amber); box-shadow: 0 0 30px rgba(237,180,110,.2), 0 16px 34px rgba(0,0,0,.4); }


/* ------------------------------ popovers ------------------------------ */
.menu-popover {
  position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 2 * var(--edge))); padding: 18px 20px 20px; border-radius: 5px;
  border: 1px solid rgba(111,216,238,.3); background: rgba(8,18,25,.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.menu-popover[hidden] { display: none; }
.pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pop-head strong { font-size: 15px; font-weight: 650; letter-spacing: .16em; }
.pop-close { cursor: pointer; background: none; border: none; color: #8fa8b2; font-size: 14px; padding: 4px 6px; }
.pop-close:hover, .pop-close:focus-visible { color: #fff; outline: none; }
.pop-label { color: #8fa8b2; font: 10px 'Share Tech Mono', monospace; letter-spacing: .2em; margin-bottom: 10px; }
.pop-note { color: #8095a0; font-size: 12px; line-height: 1.6; margin: 16px 0 0; }
.pop-note b { color: #b9d5de; }

.armor-list { display: flex; flex-direction: column; gap: 8px; }
.armor-list button {
  display: flex; align-items: baseline; gap: 10px; cursor: pointer; text-align: left;
  padding: 12px 14px; border-radius: 3px; color: #dceaef;
  border: 1px solid rgba(111,216,238,.22); background: rgba(12,26,34,.78); transition: all .15s;
}
.armor-list button strong { font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.armor-list button span { color: #8095a0; font: 10px 'Share Tech Mono', monospace; letter-spacing: .14em; margin-left: auto; }
.armor-list button:hover, .armor-list button:focus-visible { border-color: var(--cy); outline: none; }
.armor-list button.on { border-color: var(--cy); background: rgba(111,216,238,.16); }
.armor-list button.on span { color: var(--cy); }
.back-label { margin-top: 20px; }
.back-system-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.back-system-list button { text-align: left; border: 1px solid #45606c; background: #14242be6; color: #e6f5f5; padding: 10px; cursor: pointer; }
.back-system-list button span { display: block; color: #92bbc8; font: 9px 'Share Tech Mono', monospace; letter-spacing: .12em; margin-bottom: 5px; }
.back-system-list button strong { font: 13px 'Share Tech Mono', monospace; }
.back-system-list button.on { background: #245363; border-color: var(--cy); }
.back-system-list button small { display:block; margin-top:7px; color:#e4bd73; font:10px 'Share Tech Mono',monospace; }
.back-system-list button.locked { background:#111c23; }
.back-system-list button.inspecting { outline:1px solid var(--cy); }
.back-wallet { color:#e4bd73; font:10px 'Share Tech Mono',monospace; line-height:1.6; margin:12px 0 8px; }
.back-unlock { width:100%; padding:12px; background:#e2c181; color:#152029; border:1px solid #ffe4ab; cursor:pointer; font:600 12px 'Share Tech Mono',monospace; }
.back-unlock:disabled { opacity:.55; cursor:default; }
.back-unlock[hidden] { display:none; }
.back-system-list button:hover, .back-system-list button:focus-visible { outline: 1px solid var(--cy); }
#panel-chassis { max-height: calc(100dvh - 100px); overflow-y: auto; }

/* ------------------------------ responsive ---------------------------- */
@media (max-width: 900px) {
  .play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  /* a stacked card is short, so the copy sits over much more of the shot */
  .mode-card.photo { min-height: 270px; }
  .mode-card.photo::after { background: linear-gradient(180deg, rgba(4,10,14,.58) 0%, rgba(4,10,14,.26) 18%, rgba(4,10,14,.88) 46%, rgba(4,10,14,.97) 100%); }
  .mode-card { min-height: 0; }
  /* stacked, it is a short banner — keep enough height for both shots to read */
  .mode-card.random { grid-column: 1 / -1; min-height: 148px; padding: 18px; flex-direction: row; gap: 18px; justify-content: flex-start; text-align: left; }
  .mode-card.random .card-sub { max-width: none; }
  .mode-card.random .card-glyph { font-size: 40px; }
  .card-art { margin-top: 10px; }
  .play-body { flex-direction: column; }
  .play-tabs { flex-direction: row; gap: 10px; padding: 0; }
  .play-tab { flex-direction: row; width: auto; padding: 8px 14px; border: 1px solid rgba(111,216,238,.2); border-radius: 3px; }
  .play-tab svg { width: 18px; height: 18px; }
}
@media (max-width: 700px) {
  .lobby-right { top: auto; bottom: calc(var(--edge) + 96px); }
  .chassis-btn { min-width: 0; }
  .chassis-btn:hover, .chassis-btn.on { transform: none; }
  .lobby-brand { --brand-scale: .55; }
  .play-grid { grid-template-columns: minmax(0, 1fr); }
  #tab-training { grid-template-columns: minmax(0, 1fr); }
  .play-esc { display: none; }
}
@media (max-height: 560px) {
  .pilot-card { width: min(250px, 50vw); }
  .pilot-body { padding: 7px 12px 5px 10px; }
  .pilot-xp { padding-bottom: 9px; }
  .play-btn { padding: 14px 40px; }
}

/* --------- in-game hangar / deploy screen (not the main menu) --------- */
.hangar-menu { position: absolute; top: 22px; left: 44px; z-index: 4; pointer-events: auto; color: #c4dce4; background: #101c26df; border: 1px solid #7795a166; padding: 10px 14px; cursor: pointer; font: 11px monospace; letter-spacing: .1em; }
#invdeploy .hangar-title { top: 76px; }
.hangar-menu:hover, .hangar-menu:focus-visible { color: white; border-color: #c4dce4; }
.inv-wave-status { border: 1px solid #cda36b70; padding: 12px; margin: 10px 0; color: #edbf80; background: #b8822910; }
.inv-wave-status[hidden] { display: none; }
#invhud [hidden] { display: none; }
.inv-wave-status strong, .inv-wave-status small { display: block; }
.inv-wave-status strong { font-size: 17px; margin-bottom: 5px; }
.inv-wave-status small { line-height: 1.6; color: #c8d3d8; }