:root {
  --bg: #070b0d; --panel: #0b1215; --panel2: #0f191c; --panel3: #13211f;
  --line: #1c2d31; --line2: #2a434a;
  --hud: #62f0cf; --hud2: #3fbfa2; --hud-dim: rgba(98, 240, 207, 0.35); --hud-faint: rgba(98, 240, 207, 0.08);
  --cyan: #8fdcff; --txt: #cfe6e2; --dim: #6f8b87; --dim2: #4b605d;
  --warn: #ffb648; --enemy: #ff4d4d; --friend: #4fa3ff; --good: #7dff9a; --gold: #ffd84a;
  --mono: 'Share Tech Mono', ui-monospace, Consolas, monospace;
  --sans: 'Rajdhani', 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font-family: var(--sans); font-size: 14px; overflow: hidden;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
button { font-family: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
select { font-family: var(--mono); }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.hidden { display: none !important; }

/* ---------- layout ---------- */
#app { position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
#main { flex: 1; display: flex; min-height: 0; }
#mapwrap { flex: 1; position: relative; min-width: 0; overflow: hidden; }
#map { position: absolute; inset: 0; background: #0b0f11; }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 450; transform-origin: 0 0; will-change: transform; }

/* gray theme for OSM/CARTO tiles */
.leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(0.78) contrast(1.15); }
.leaflet-container { background: #0b0f11; font-family: var(--mono); }
.leaflet-control-attribution { background: rgba(5, 10, 12, 0.7) !important; color: var(--dim2) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: var(--dim) !important; }
.leaflet-bar a { background: rgba(10, 20, 22, 0.9) !important; color: var(--hud) !important; border-color: var(--line2) !important; width: 34px !important; height: 34px !important; line-height: 34px !important; }
.leaflet-bottom.leaflet-right { margin-bottom: 4px; }

/* ---------- top bar ---------- */
#topbar { height: calc(52px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top) !important; flex: none; display: flex; align-items: stretch; gap: 2px; padding: 0 8px;
  background: linear-gradient(180deg, #0e181b, #080e10); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
#topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--hud-dim), transparent); }
.brand { display: flex; align-items: center; gap: 8px; padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--line); }
.logo { color: var(--hud); font-size: 22px; text-shadow: 0 0 12px rgba(98, 240, 207, .6); }
.bt { font-weight: 700; letter-spacing: 3px; font-size: 15px; color: var(--txt); }
.bt b { color: var(--hud); margin-left: 4px; }
.tb-item { display: flex; flex-direction: column; justify-content: center; padding: 0 12px; border-right: 1px solid var(--line); min-width: 0; position: relative; }
.tb-item label { font-size: 10px; letter-spacing: 2px; color: var(--dim); font-weight: 600; white-space: nowrap; }
.tb-item span { font-size: 16px; color: var(--hud); white-space: nowrap; }
.tb-item.threat { flex: 1; min-width: 140px; max-width: 320px; }
.threat-row { display: flex; align-items: center; gap: 8px; }
.threat-bar { flex: 1; height: 8px; background: #121c1f; border: 1px solid var(--line2); position: relative; overflow: hidden; }
.threat-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--hud2), var(--warn) 60%, var(--enemy)); background-size: 320px 100%; transition: width .4s; }
.threat-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.6) 9px 10px); }
#tb-threat.hot { color: var(--enemy); animation: blink 1s steps(2) infinite; }
#tb-float { position: absolute; right: 4px; top: 2px; font-size: 11px !important; color: var(--good) !important; opacity: 0; transition: opacity .3s, transform .9s; }
#tb-float.show { opacity: 1; transform: translateY(-4px); }
#tb-float.loss { color: var(--enemy) !important; }
.menu-btn { font-size: 16px !important; color: var(--txt) !important; }
.speed { display: flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 8px; }
.speed button { background: #0f1a1d; border: 1px solid var(--line2); color: var(--dim); height: 32px; min-width: 40px; font-family: var(--mono); font-size: 13px; }
.speed button.on { color: #041210; background: var(--hud); border-color: var(--hud); box-shadow: 0 0 12px rgba(98,240,207,.4); }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- HUD overlays on the map ---------- */
.hud-frame { position: absolute; inset: 0; pointer-events: none; z-index: 460;
  background: repeating-linear-gradient(0deg, rgba(98,240,207,0.022) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); }
.hud-frame .c { position: absolute; width: 26px; height: 26px; border: 2px solid var(--hud-dim); }
.hud-frame .tl { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
.hud-frame .tr { right: 8px; top: 8px; border-left: 0; border-bottom: 0; }
.hud-frame .bl { left: 8px; bottom: 8px; border-right: 0; border-top: 0; }
.hud-frame .br { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }
#hud-coords { position: absolute; right: 50px; bottom: 10px; z-index: 470; font-size: 10px; color: var(--dim); pointer-events: none; }
#pause-tag { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 470; font-family: var(--mono); font-size: 12px; letter-spacing: 3px;
  color: var(--warn); border: 1px solid rgba(255,182,72,.5); background: rgba(20,14,4,.75); padding: 4px 12px; display: none; animation: blink 1.2s steps(2) infinite; pointer-events: none; }
body.paused #pause-tag { display: block; }
#flash { position: absolute; inset: 0; pointer-events: none; z-index: 480; opacity: 0; }
#flash.red { animation: flashRed .6s; }
#flash.amber { animation: flashAmber .8s; }
#flash.white { animation: flashWhite 2.4s; }
@keyframes flashRed { 0% { opacity: 1; box-shadow: inset 0 0 120px rgba(255,40,40,.75); } 100% { opacity: 0; box-shadow: inset 0 0 120px rgba(255,40,40,0); } }
@keyframes flashAmber { 0%,50% { opacity: 1; box-shadow: inset 0 0 90px rgba(255,170,40,.6); } 100% { opacity: 0; } }
@keyframes flashWhite { 0% { opacity: 1; background: rgba(255,255,255,.95); } 100% { opacity: 0; background: rgba(255,255,255,0); } }

#comms { position: absolute; left: 12px; bottom: 12px; z-index: 470; width: min(460px, 70%); max-height: 40%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; font-family: var(--mono); font-size: 11px; line-height: 1.35;
  background: linear-gradient(0deg, rgba(4,9,10,.85), rgba(4,9,10,.55)); border-left: 2px solid var(--hud-dim); padding: 6px 8px; }
#comms.open { max-height: 70%; background: rgba(4,9,10,.92); }
#comms .ln { padding: 1px 0; color: #a9c4bf; animation: lnIn .35s; }
#comms .ln .t { color: var(--dim2); margin-right: 6px; }
#comms .c-radio { color: var(--cyan); }
#comms .c-warn { color: var(--warn); }
#comms .c-alert { color: #ff7a7a; }
#comms .c-good { color: var(--hud); }
#comms .hdr { color: var(--dim); font-size: 9px; letter-spacing: 2px; display: flex; justify-content: space-between; margin-bottom: 2px; }
@keyframes lnIn { from { opacity: 0; transform: translateX(-6px); } }

#hud-sel { position: absolute; left: 12px; top: 12px; z-index: 470; width: 250px; display: none; }
#hud-sel.show { display: block; }
.selcard { background: rgba(6,13,15,.92); border: 1px solid var(--line2); border-top: 2px solid var(--hud); padding: 8px 10px; font-size: 12px; }
.selcard.enemy { border-top-color: var(--enemy); }
.selcard.friend { border-top-color: var(--friend); }
.selcard.warnc { border-top-color: var(--gold); }
.selcard h4 { margin: 0 0 2px; font-size: 15px; letter-spacing: 1px; }
.selcard .k { color: var(--dim); font-size: 10px; letter-spacing: 1.5px; }
.selcard .row { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11px; padding: 1px 0; }
.selcard .x { position: absolute; right: 6px; top: 4px; background: none; border: 0; color: var(--dim); font-size: 16px; }
.selcard { position: relative; }

#toasts { position: absolute; right: 12px; top: 12px; z-index: 475; display: flex; flex-direction: column; gap: 8px; width: 270px; pointer-events: none; }
.toast { pointer-events: auto; background: rgba(6,13,15,.95); border: 1px solid var(--line2); border-left: 3px solid var(--hud); padding: 8px 10px; font-size: 12px; animation: toastIn .3s; cursor: pointer; }
.toast.err { border-left-color: var(--enemy); }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* ---------- side panel ---------- */
#panel { width: min(var(--panel-w, clamp(320px, 33vw, 410px)), 48vw); flex: none; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); }
#tabs { display: flex; border-bottom: 1px solid var(--line); background: #091013; flex: none; }
#tabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 2px 10px; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; color: var(--dim); position: relative; }
#tabs button.on { color: var(--hud); border-bottom-color: var(--hud); background: linear-gradient(0deg, var(--hud-faint), transparent); }
.badge { position: absolute; top: 5px; right: 6px; min-width: 7px; height: 7px; border-radius: 4px; background: var(--warn); display: none; }
.badge.show { display: block; }
#panel-body { flex: 1; overflow-y: auto; padding: 10px 12px 28px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }

.sec-title { font-size: 11px; letter-spacing: 2.5px; font-weight: 700; color: var(--dim); margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.sec-title:first-child { margin-top: 2px; }
.sec-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sec-title.warn { color: var(--gold); }
.small { font-size: 12px; }
p.brief { font-size: 13.5px; line-height: 1.4; color: #b5ccc8; margin: 6px 0 10px; border-left: 2px solid var(--line2); padding-left: 10px; }

.btn { background: #0f1b1e; border: 1px solid var(--line2); color: var(--hud); padding: 8px 12px; font-weight: 700; letter-spacing: 1.5px; font-size: 12px; }
.btn:active { background: var(--hud-faint); }
.btn.sm { padding: 5px 9px; font-size: 11px; }
.btn.pri { background: var(--hud); color: #041210; border-color: var(--hud); }
.btn.pri:disabled { background: #1a2a2a; color: var(--dim2); border-color: var(--line2); }
.btn.red { color: var(--enemy); border-color: rgba(255,77,77,.5); }
.btn.gold { color: var(--gold); border-color: rgba(255,216,74,.5); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.btn-row .btn { flex: 1; }

.chip { display: inline-block; font-size: 10px; letter-spacing: 1.5px; font-weight: 700; padding: 2px 6px; border: 1px solid currentColor; line-height: 1.2; white-space: nowrap; }
.chip.red { color: var(--enemy); } .chip.hud { color: var(--hud); } .chip.gray { color: var(--dim); } .chip.warn { color: var(--warn); } .chip.blue { color: var(--friend); } .chip.gold { color: var(--gold); }
.chip.pulse { animation: blink 1s steps(2) infinite; }

.bar { height: 5px; background: #142023; position: relative; flex: 1; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hud); }
.bar.red i { background: var(--enemy); } .bar.blue i { background: var(--friend); } .bar.warn i { background: var(--warn); }

/* zone cards */
.zcard { border: 1px solid var(--line); background: var(--panel2); padding: 9px 10px; margin-bottom: 7px; cursor: pointer; position: relative; }
.zcard::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--enemy); }
.zcard.secured::before { background: var(--hud); } .zcard.dormant::before { background: var(--dim2); } .zcard.critical::before { background: var(--warn); }
.zcard.dormant { opacity: .7; }
.zcard:active { background: var(--panel3); }
.zc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.zc-name { font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.zc-sub { font-size: 12px; color: var(--dim); margin-top: 1px; }
.zc-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.zc-row label { width: 64px; letter-spacing: 1px; }
.zc-row span { width: 36px; text-align: right; color: var(--txt); }

.pilot-card { display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(255,216,74,.4); background: rgba(40,32,4,.35); padding: 7px 10px; margin-bottom: 6px; }

.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stat { background: var(--panel2); border: 1px solid var(--line); padding: 6px 8px; }
.stat label { display: block; font-size: 9.5px; letter-spacing: 1.5px; color: var(--dim); font-weight: 700; }
.stat b { font-family: var(--mono); font-weight: 400; font-size: 16px; color: var(--hud); }
.stat b.red { color: var(--enemy); }

.frow { display: grid; grid-template-columns: 62px 1fr auto; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.frow .fk { font-family: var(--mono); font-size: 10.5px; color: #ff9a9a; border: 1px solid rgba(255,77,77,.4); padding: 1px 4px; text-align: center; }
.frow .fk.aa { background: rgba(255,77,77,.15); }
.frow .n { font-family: var(--mono); color: var(--txt); }
.frow small { display: block; color: var(--dim); font-size: 11px; }

/* ops */
.mission-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mission-grid button { background: #0e181b; border: 1px solid var(--line2); color: var(--dim); padding: 8px 2px; font-weight: 700; font-size: 11.5px; letter-spacing: 1px; }
.mission-grid button.on { color: #041210; background: var(--hud); border-color: var(--hud); }
.mission-grid button.nuke { color: var(--gold); border-color: rgba(255,216,74,.4); }
.mission-grid button.nuke.on { background: var(--gold); color: #1a1400; }
.mdesc { font-size: 12.5px; color: var(--dim); margin: 6px 0 8px; }
.field { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.field label { font-size: 10px; letter-spacing: 1.5px; color: var(--dim); font-weight: 700; width: 64px; flex: none; }
.field select { flex: 1; background: #0e181b; color: var(--txt); border: 1px solid var(--line2); padding: 7px 6px; font-size: 12px; min-width: 0; }

.acrow { border: 1px solid var(--line); background: var(--panel2); margin-bottom: 5px; }
.acrow.sel { border-color: var(--hud2); background: #0f201d; }
.acrow.dis { opacity: .5; }
.ac-line { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; }
.ac-check { width: 18px; height: 18px; border: 1px solid var(--line2); flex: none; display: grid; place-items: center; color: #041210; font-size: 12px; font-weight: 700; }
.acrow.sel .ac-check { background: var(--hud); border-color: var(--hud); }
.ac-main { flex: 1; min-width: 0; }
.ac-main b { font-size: 14px; letter-spacing: .5px; }
.ac-main .t { color: var(--dim); font-size: 12px; margin-left: 4px; }
.ac-sub { font-family: var(--mono); font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.surv { font-family: var(--mono); font-size: 13px; text-align: right; }
.surv small { display: block; font-size: 8.5px; letter-spacing: 1px; color: var(--dim); }
.surv.good { color: var(--hud); } .surv.mid { color: var(--warn); } .surv.bad { color: var(--enemy); }
.loadout { border-top: 1px dashed var(--line2); padding: 6px 8px 8px; }
.lo-head { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 1.5px; color: var(--dim); font-weight: 700; margin-bottom: 5px; }
.lo-head .mono { color: var(--txt); font-weight: 400; }
.lo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.wchip { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: #0b1416; border: 1px solid var(--line); padding: 3px 3px 3px 6px; min-width: 0; }
.wchip.has { border-color: var(--hud2); }
.wchip.locked { opacity: .4; }
.wchip .wn { min-width: 0; overflow: hidden; }
.wchip .wn b { font-size: 11.5px; display: block; white-space: nowrap; }
.wchip .wn small { font-size: 9.5px; color: var(--dim); white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.stepper { display: flex; align-items: center; flex: none; }
.stepper button { width: 24px; height: 24px; background: #12201f; border: 1px solid var(--line2); color: var(--hud); font-size: 14px; padding: 0; line-height: 1; }
.stepper span { width: 18px; text-align: center; font-family: var(--mono); font-size: 12px; }
.launchbar { position: sticky; bottom: -28px; margin: 10px -12px -28px; padding: 10px 12px 14px; background: linear-gradient(0deg, var(--panel) 80%, rgba(11,18,21,0)); border-top: 1px solid var(--line); }
.launchbar .sum { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--dim); margin-bottom: 6px; gap: 6px; flex-wrap: wrap; }
.launchbar .sum b { color: var(--txt); font-weight: 400; }
.launchbar .btn { width: 100%; padding: 12px; font-size: 14px; letter-spacing: 3px; }

.pkg { border: 1px solid var(--line); background: var(--panel2); margin-bottom: 7px; }
.pkg-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); gap: 6px; }
.pkg-head b { letter-spacing: 1px; }
.pkg-mem { display: grid; grid-template-columns: 1fr 70px 52px; gap: 6px; align-items: center; padding: 3px 8px; font-family: var(--mono); font-size: 11px; }
.pkg-mem .st { font-size: 10px; color: var(--dim); }
.pkg-mem.lost { color: var(--enemy); text-decoration: line-through; opacity: .7; }
.pkg-btns { display: flex; gap: 4px; padding: 6px 8px; }
.pkg-btns .btn { flex: 1; }

/* fleet */
.typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.typegrid button { background: #0e181b; border: 1px solid var(--line2); padding: 6px 4px; text-align: left; color: var(--txt); }
.typegrid button b { display: block; font-size: 12.5px; }
.typegrid button small { font-family: var(--mono); color: var(--dim); font-size: 10px; }
.typegrid button.on { border-color: var(--hud); background: #0f201d; }
.typegrid button.locked { opacity: .4; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; font-family: var(--mono); font-size: 11px; margin: 8px 0; }
.specs div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 2px 0; }
.specs span { color: var(--dim); }
.base { border: 1px solid var(--line); background: var(--panel2); margin-bottom: 6px; }
.base-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; cursor: pointer; }
.base-head b { letter-spacing: .5px; }
.base-ac { display: grid; grid-template-columns: 1fr 60px 76px; gap: 6px; align-items: center; padding: 3px 8px; font-family: var(--mono); font-size: 11px; border-top: 1px dashed var(--line); }
.st-ready { color: var(--hud); } .st-rearm { color: var(--warn); } .st-air { color: var(--cyan); }

/* research */
.rcard { border: 1px solid var(--line); background: var(--panel2); padding: 8px 10px; margin-bottom: 6px; display: flex; gap: 10px; align-items: center; }
.rcard.done { border-color: rgba(98,240,207,.35); }
.rcard.locked { opacity: .45; }
.rcard .rt { flex: 1; min-width: 0; }
.rcard .rt b { font-size: 14px; }
.rcard .rt small { display: block; color: var(--dim); font-size: 12px; line-height: 1.3; margin-top: 2px; }

/* debriefs */
.deb { border: 1px solid var(--line); background: var(--panel2); margin-bottom: 6px; }
.deb-head { display: flex; gap: 10px; align-items: center; padding: 6px 8px; cursor: pointer; }
.grade { width: 34px; height: 34px; display: grid; place-items: center; font-weight: 700; font-size: 22px; border: 1px solid currentColor; flex: none; }
.grade.S { color: var(--gold); } .grade.A { color: var(--hud); } .grade.B { color: var(--cyan); } .grade.C { color: var(--warn); } .grade.D { color: var(--enemy); }
.deb-body { padding: 4px 10px 10px; font-family: var(--mono); font-size: 11px; border-top: 1px dashed var(--line); }
.deb-body .row { display: flex; justify-content: space-between; padding: 1px 0; }
.deb-body .row span:first-child { color: var(--dim); }
.deb-body .lost { color: #ff8a8a; }

/* ---------- fold overlay ---------- */
#fold { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(circle at 50% 35%, #0f1d1d, #050809 70%); }
.fold-card { text-align: center; max-width: 340px; }
.fold-card h1 { font-size: 34px; letter-spacing: 6px; margin: 6px 0 8px; color: var(--hud); text-shadow: 0 0 18px rgba(98,240,207,.5); }
.fold-card p { margin: 4px 0; font-size: 15px; }
.fold-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--warn); animation: blink 1.2s steps(2) infinite; }
.fold-status { margin-top: 18px; font-size: 11px; color: var(--dim); border: 1px solid var(--line2); padding: 6px; }
.fold-note { margin-top: 6px; font-size: 10px; color: var(--dim2); letter-spacing: 2px; }
.fold-anim { width: 120px; height: 110px; margin: 0 auto 18px; position: relative; perspective: 400px; display: flex; justify-content: center; }
.fold-anim .ph { width: 52px; height: 100px; border: 2px solid var(--hud); background: rgba(98,240,207,.06); }
.fold-anim .l { border-radius: 8px 0 0 8px; border-right-width: 1px; }
.fold-anim .r { border-radius: 0 8px 8px 0; border-left-width: 1px; transform-origin: left center; animation: unfold 2.6s ease-in-out infinite; position: relative; }
.fold-anim .r span { position: absolute; inset: 8px; background: repeating-linear-gradient(0deg, rgba(98,240,207,.25) 0 2px, transparent 2px 8px); }
@keyframes unfold { 0%, 15% { transform: rotateY(-178deg); } 55%, 85% { transform: rotateY(0); } 100% { transform: rotateY(-178deg); } }

@media (max-width: 719px) {
  #fold { display: flex; }
  #app, #title, #modal { visibility: hidden; }
}

/* ---------- title ---------- */
#title { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 20px; }
.title-bg { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(10,30,28,.82), rgba(4,7,8,.96) 70%),
  repeating-linear-gradient(0deg, rgba(98,240,207,.03) 0 1px, transparent 1px 4px); backdrop-filter: blur(2px); }
.title-inner { position: relative; max-width: 760px; width: 100%; text-align: center; margin: auto; }
.t-kicker { font-size: 11px; letter-spacing: 3px; color: var(--dim); }
.t-logo { font-size: clamp(40px, 7vw, 72px); letter-spacing: 10px; margin: 6px 0 0; font-weight: 700; line-height: 1; }
.t-logo span { color: var(--hud); display: block; font-size: .5em; letter-spacing: 22px; text-shadow: 0 0 22px rgba(98,240,207,.55); margin-top: 6px; }
.t-sub { color: #9db8b3; font-size: 16px; margin: 14px 0 22px; }
.diff { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.diff button { background: rgba(10,20,22,.85); border: 1px solid var(--line2); padding: 10px 16px; min-width: 160px; text-align: left; }
.diff button b { display: block; letter-spacing: 3px; color: var(--txt); }
.diff button small { color: var(--dim); font-size: 12px; }
.diff button.on { border-color: var(--hud); box-shadow: 0 0 0 1px var(--hud) inset, 0 0 22px rgba(98,240,207,.2); }
.diff button.on b { color: var(--hud); }
.btn-big { background: var(--hud); color: #041210; border: 0; font-weight: 700; letter-spacing: 6px; font-size: 18px; padding: 14px 40px; box-shadow: 0 0 30px rgba(98,240,207,.35); }
.how { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 24px; text-align: left; }
.how div { background: rgba(10,20,22,.8); border: 1px solid var(--line); padding: 10px 12px; font-size: 13px; color: #a9c2be; line-height: 1.35; }
.how b { display: block; color: var(--hud); letter-spacing: 2px; font-size: 12px; margin-bottom: 3px; }
#best { margin-top: 14px; font-size: 11px; color: var(--dim); letter-spacing: 1px; }

/* ---------- modal ---------- */
#modal { position: fixed; inset: 0; z-index: 1500; background: rgba(3,6,7,.82); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-card { background: var(--panel); border: 1px solid var(--line2); border-top: 3px solid var(--hud); max-width: 560px; width: 100%; padding: 20px 22px; max-height: 92vh; overflow-y: auto; }
.modal-card.defeat { border-top-color: var(--enemy); }
.modal-card h2 { margin: 0; font-size: 30px; letter-spacing: 6px; }
.modal-card .big-grade { font-size: 64px; font-weight: 700; line-height: 1; }

/* ---------- compact heights (landscape phones / unfolded inner screens) ---------- */
@media (max-height: 560px) {
  #topbar { height: calc(44px + env(safe-area-inset-top)); }
  .tb-item span { font-size: 14px; }
  .bt { display: none; }
  #tabs button { padding: 9px 2px 7px; }
  #comms { max-height: 30%; font-size: 10px; }
}
@media (max-width: 1000px) {
  .hide-sm { display: none; }
  .bt { display: none; }
  .tb-item { padding: 0 8px; }
  .speed button { min-width: 34px; }
  #hud-sel { width: 220px; }
  #toasts { width: 230px; }
}
@media (max-width: 860px) {
  .tb-item:nth-child(2) { display: none; }
  .how { grid-template-columns: 1fr; }
}

/* ---------- unit art ---------- */
.art { display: block; }
.ac-art { width: 34px; height: 34px; flex: none; opacity: .95; }
.ac-art .art, .r-art .art { width: 100%; height: 100%; }
.frow .fk { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 2px 1px; }
.frow .fk svg { width: 48px; height: 24px; }
.frow .fk i { font-style: normal; font-size: 9px; letter-spacing: .5px; }
.frow { grid-template-columns: 58px 1fr auto; }
.typegrid button svg { width: 30px; height: 30px; margin: 0 auto 3px; }
.typegrid button { text-align: center; }
.hero { position: relative; height: 130px; margin-top: 10px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(98,240,207,.10), transparent 70%), #091012; }
.hero svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); filter: drop-shadow(0 0 10px rgba(98,240,207,.35)); }
.hero-grid { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(98,240,207,.06) 1px, transparent 1px) 0 0 / 100% 16px, linear-gradient(90deg, rgba(98,240,207,.06) 1px, transparent 1px) 0 0 / 16px 100%; }
.r-art { width: 40px; height: 40px; flex: none; }
.sel-art { height: 54px; margin: -2px 0 4px; display: flex; justify-content: center; }
.sel-art svg { height: 54px; width: 54px; }
.sel-art.side svg { width: 108px; }

/* ---------- title / menu ---------- */
.diff.mode button { min-width: 230px; }
.title-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-big.alt { background: transparent; color: var(--hud); border: 1px solid var(--hud); box-shadow: none; display: flex; flex-direction: column; align-items: center; padding: 8px 28px; }
.btn-big.alt small { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--dim); margin-top: 3px; }
.btn-big.hidden { display: none; }
.menu-col { display: flex; flex-direction: column; gap: 8px; }
.menu-col .btn { padding: 13px; font-size: 14px; letter-spacing: 3px; }
body.paused #toasts { top: 52px; }


/* ==========================================================================
   LAYOUT MODES (Settings > Layout)
   ========================================================================== */
:root { --ui-scale: 1; }
#topbar, #panel, #dock, #hud-sel, #toasts, #comms, .modal-card { zoom: var(--ui-scale); }
#tabs .ti { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#tabs .ti .f { fill: currentColor; stroke: none; }
.dock-only { display: none; }
body.no-scan .hud-frame { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%); }
body.comms-off #comms { display: none; }
body.comms-compact #comms { max-height: 22%; }

/* panel on the left */
body.panel-left #main { flex-direction: row-reverse; }
body.panel-left #panel { border-left: 0; border-right: 1px solid var(--line); }

/* ---- floating thumb dock (THUMB + RAIL layouts) ---- */
body.dock-float #dock { position: absolute; left: 12px; bottom: 12px; z-index: 478; margin: 0; padding: 6px;
  display: grid; grid-template-columns: repeat(2, 54px); gap: 6px;
  background: rgba(6,13,15,.88); border: 1px solid var(--line2); border-top: 2px solid var(--hud-dim); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
body.dock-float #dock button { height: 46px; min-width: 0; width: 54px; font-size: 17px; display: block; }
body.dock-float #dock .dock-only { display: block; }
body.dock-float.panel-left #dock { left: auto; right: 12px; }
/* keep read-only HUD out of the thumb zones, actionable cards inside them */
body.dock-float #comms { top: 12px; bottom: auto; justify-content: flex-start; }
body.dock-float #hud-sel { top: auto; bottom: 238px; left: 12px; }
body.dock-float.panel-left #hud-sel { left: auto; right: 12px; }
body.dock-float #pause-tag { left: auto; right: 12px; transform: none; }
body.dock-float #toasts { top: auto; bottom: 12px; flex-direction: column-reverse; }
body.dock-float.panel-left #toasts { right: auto; left: 12px; }
body.dock-float.paused #toasts { top: auto; }
body.dock-float #hud-coords { display: none; }
body.dock-float .hud-frame .bl { display: none; }

/* bigger touch targets when playing with thumbs */
body.dock-float .btn { min-height: 40px; }
body.dock-float .btn.sm { min-height: 34px; }
body.dock-float .mission-grid button { padding: 12px 2px; }
body.dock-float .stepper button { width: 32px; height: 32px; }
body.dock-float .ac-line { padding: 9px 8px; }
body.dock-float .zcard { padding: 11px 12px; }
body.dock-float .selcard .x { font-size: 22px; padding: 4px 8px; right: 2px; top: 0; }

/* ---- THUMB: tab bar along the bottom of the panel ---- */
body.layout-thumb #tabs { order: 2; border-bottom: 0; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
body.layout-thumb #tabs button { padding: 9px 2px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; border-bottom: 0; border-top: 2px solid transparent; }
body.layout-thumb #tabs button.on { border-top-color: var(--hud); background: linear-gradient(180deg, var(--hud-faint), transparent); }
body.layout-thumb #tabs .ti { display: block; }
body.layout-thumb #panel { padding-bottom: 0; }

/* ---- RAIL: vertical tab rail on the outer screen edge, stacked toward the bottom ---- */
body.layout-rail #panel { flex-direction: row; }
body.layout-rail #panel-body { flex: 1; min-width: 0; }
body.layout-rail #tabs { order: 2; flex-direction: column; justify-content: flex-end; width: 74px; border-bottom: 0; border-left: 1px solid var(--line); padding-bottom: 8px; }
body.layout-rail.panel-left #tabs { order: 0; border-left: 0; border-right: 1px solid var(--line); }
body.layout-rail #tabs button { flex: none; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 10px; letter-spacing: 1px;
  border-bottom: 0; border-right: 3px solid transparent; }
body.layout-rail.panel-left #tabs button { border-right: 0; border-left: 3px solid transparent; }
body.layout-rail #tabs button.on { border-right-color: var(--hud); background: linear-gradient(270deg, var(--hud-faint), transparent); }
body.layout-rail.panel-left #tabs button.on { border-left-color: var(--hud); background: linear-gradient(90deg, var(--hud-faint), transparent); }
body.layout-rail #tabs .ti { display: block; width: 24px; height: 24px; }

/* ==========================================================================
   SETTINGS SCREEN
   ========================================================================== */
.modal-card.settings { max-width: 640px; }
.set-sec { font-size: 11px; letter-spacing: 2.5px; font-weight: 700; color: var(--dim); margin: 16px 0 8px; display: flex; gap: 8px; align-items: center; }
.set-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.set-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.set-row > label { width: 104px; flex: none; font-size: 11px; letter-spacing: 1.5px; color: var(--dim); font-weight: 700; }
.set-row input[type=range] { flex: 1; accent-color: var(--hud); height: 28px; }
.set-row .mono { width: 34px; text-align: right; color: var(--hud); }
.seg { display: flex; flex: 1; border: 1px solid var(--line2); }
.seg button { flex: 1; background: #0e181b; border: 0; border-right: 1px solid var(--line2); padding: 10px 4px; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; color: var(--dim); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--hud); color: #041210; }
.layout-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lp { background: #0e181b; border: 1px solid var(--line2); padding: 10px; text-align: left; color: var(--txt); }
.lp.on { border-color: var(--hud); box-shadow: 0 0 0 1px var(--hud) inset; }
.lp b { display: block; letter-spacing: 2px; font-size: 12.5px; margin-top: 8px; }
.lp.on b { color: var(--hud); }
.lp small { display: block; color: var(--dim); font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
.lp-pic { display: block; position: relative; height: 54px; border: 1px solid var(--line2); background: #0a1214; }
.lp-pic i { position: absolute; background: var(--hud-dim); }
.lp.on .lp-pic i { background: var(--hud); }
.lp-pic .a { left: 0; right: 0; top: 0; height: 6px; }
.lp-pic .b { right: 0; top: 6px; bottom: 0; width: 34%; opacity: .45; }
.lp-pic .c { right: 0; top: 6px; width: 34%; height: 6px; }
.lp-pic.thumb .c { top: auto; bottom: 0; }
.lp-pic.thumb::after, .lp-pic.rail::after { content: ""; position: absolute; left: 4px; bottom: 4px; width: 12px; height: 16px; border: 1px solid var(--hud); }
.lp-pic.rail .c { top: 20px; bottom: 0; height: auto; width: 8%; }
.tog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tog { display: flex; align-items: center; gap: 10px; background: #0e181b; border: 1px solid var(--line2); padding: 9px 10px; text-align: left; color: var(--txt); }
.tog b { display: block; font-size: 13.5px; }
.tog small { display: block; color: var(--dim); font-size: 11px; line-height: 1.25; }
.tog .sw { width: 34px; height: 18px; border-radius: 9px; background: #23353a; position: relative; flex: none; transition: background .15s; }
.tog .sw i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 7px; background: var(--dim); transition: left .15s, background .15s; }
.tog.on .sw { background: rgba(98,240,207,.35); }
.tog.on .sw i { left: 18px; background: var(--hud); }
@media (max-width: 860px) { .tog-grid { grid-template-columns: 1fr; } .lp small { display: none; } }

/* paused indicator that works in every layout */
body.paused .hud-frame { box-shadow: inset 0 0 0 2px rgba(255,182,72,.55); }
body.dock-float #pause-tag { display: none; }
body.dock-float.paused #dock [data-speed="0"] { animation: blink 1.2s steps(2) infinite; }
body.dock-float #comms { max-height: 32%; width: min(420px, 64%); }

/* choosing a carrier destination */
body.sail-mode .hud-frame { box-shadow: inset 0 0 0 3px rgba(143,220,255,.75); }
body.sail-mode #map { cursor: crosshair; }

/* ==========================================================================
   TAP-TO-STRIKE CARD
   ========================================================================== */
#strike { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 479; pointer-events: none; display: flex; justify-content: center; zoom: var(--ui-scale); }
body.dock-float #strike { left: 150px; }
body.dock-float.panel-left #strike { left: 12px; right: 150px; }
.sk { pointer-events: auto; width: 100%; max-width: 600px; background: rgba(6,13,15,.96); border: 1px solid var(--line2); border-top: 2px solid var(--enemy);
  box-shadow: 0 10px 30px rgba(0,0,0,.6); padding: 10px 12px 12px; }
.sk.enter { animation: skIn .18s ease-out; }
.sk.friendly, .sk.airlift { border-top-color: var(--friend); }
.sk.pilot { border-top-color: var(--gold); }
.sk.area { border-top-color: var(--warn); }
@keyframes skIn { from { transform: translateY(16px); opacity: 0; } }
.sk-head { display: flex; gap: 10px; align-items: center; position: relative; padding-right: 30px; }
.sk-art { width: 64px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,77,77,.35); background: rgba(255,77,77,.07); }
.sk-art svg { width: 58px; height: 32px; }
.sk-glyph { font-size: 24px; line-height: 1; }
.sk-title { min-width: 0; }
.sk-title .k { font-size: 10px; letter-spacing: 1.8px; color: var(--dim); font-weight: 700; }
.sk-title b { display: block; font-size: 17px; letter-spacing: .5px; line-height: 1.2; }
.sk-title small { display: block; color: var(--dim); font-size: 12px; line-height: 1.25; }
.sk .x { position: absolute; right: -4px; top: -6px; background: none; border: 0; color: var(--dim); font-size: 24px; padding: 4px 8px; }
.sk-pkg { display: flex; align-items: stretch; gap: 6px; margin-top: 10px; }
.sk-arrow { width: 38px; flex: none; background: #0e181b; border: 1px solid var(--line2); color: var(--hud); font-size: 14px; }
.sk-body { flex: 1; min-width: 0; background: #0b1416; border: 1px solid var(--line); padding: 6px 10px; }
.sk-var { font-size: 10px; letter-spacing: 2px; color: var(--hud); font-weight: 700; }
.sk-ac { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 3px 0; font-size: 14px; }
.sk-ac .dim { font-size: 12px; }
.sk-plane svg { width: 22px; height: 22px; display: block; }
.sk-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.sk-stats b { color: var(--txt); font-weight: 400; }
.sk-stats .good b { color: var(--hud); } .sk-stats .mid b { color: var(--warn); } .sk-stats .bad b { color: var(--enemy); }
.sk-none { margin-top: 10px; font-size: 13.5px; color: #b5ccc8; line-height: 1.35; }
.sk-actions { display: flex; gap: 6px; margin-top: 10px; }
.sk-actions .btn { min-height: 44px; }
.sk-go { flex: 1; font-size: 14px !important; letter-spacing: 2.5px !important; }
body.strike-open #toasts { bottom: 250px; }
body.strike-open #hud-sel { display: none; }

/* ==========================================================================
   CALLOUTS + COACH
   ========================================================================== */
#callout { position: absolute; left: 0; right: 0; top: 28%; z-index: 477; text-align: center; pointer-events: none; opacity: 0; }
#callout b { display: block; font-size: clamp(22px, 4vw, 38px); letter-spacing: 8px; font-weight: 700; color: #ffe066; text-shadow: 0 0 18px rgba(255,200,60,.6), 0 2px 0 #000; }
#callout small { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: 2px; color: #fff3c4; margin-top: 4px; text-shadow: 0 1px 2px #000; }
#callout.good b { color: var(--hud); text-shadow: 0 0 18px rgba(98,240,207,.6), 0 2px 0 #000; }
#callout.bad b { color: var(--enemy); text-shadow: 0 0 18px rgba(255,60,60,.6), 0 2px 0 #000; font-size: clamp(18px, 3vw, 28px); }
#callout.big b { color: var(--hud); font-size: clamp(28px, 5.5vw, 52px); text-shadow: 0 0 26px rgba(98,240,207,.75), 0 2px 0 #000; }
#callout.show { animation: callout 1.7s ease-out forwards; }
#callout.show.big { animation-duration: 2.6s; }
@keyframes callout { 0% { opacity: 0; transform: scale(1.4); } 12% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

#coach { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(470px, calc(100% - 24px)); z-index: 481; display: none;
  background: rgba(6,20,18,.97); border: 1px solid var(--hud); box-shadow: 0 0 0 1px rgba(98,240,207,.25), 0 8px 26px rgba(0,0,0,.6); padding: 10px 12px; zoom: var(--ui-scale); }
#coach.show { display: block; animation: skIn .25s ease-out; }
.cc-step { font-size: 10px; letter-spacing: 2px; color: var(--hud); }
.cc-text { font-size: 15px; line-height: 1.35; margin-top: 3px; padding-right: 64px; }
.cc-text b { color: var(--hud); }
.cc-skip { position: absolute; right: 8px; top: 8px; background: none; border: 1px solid var(--line2); color: var(--dim); font-size: 11px; letter-spacing: 1.5px; padding: 6px 10px; font-weight: 700; }

/* ==========================================================================
   SIMPLER PANELS
   ========================================================================== */
body:not(.advanced) #tabs [data-tab="ops"] { display: none; }
.goals { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 11.5px; color: var(--dim); }
.goals .done, .goal-list .done { color: var(--hud); }
.goal-list { font-size: 13.5px; line-height: 1.6; color: #b5ccc8; }
.frow.tap { cursor: pointer; }
.frow.tap:active { background: var(--hud-faint); }
.frow .n { white-space: nowrap; }
.btn-pair { display: flex; flex-direction: column; gap: 4px; }
.flt { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel2); padding: 6px 8px; margin-bottom: 5px; }
.flt-main { flex: 1; min-width: 0; }
.flt-st { font-family: var(--mono); font-size: 10px; color: var(--dim); white-space: nowrap; }
.flt-st.hot { color: var(--warn); }
.flt .btn.sm { min-width: 34px; }
.zone-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.zone-chips button { background: #0e181b; border: 1px solid var(--line2); color: var(--dim); padding: 8px 12px; font-weight: 700; letter-spacing: 1.5px; font-size: 12px; }
.zone-chips button.on { background: var(--hud); color: #041210; border-color: var(--hud); }
.station { font-size: 13px; color: #b5ccc8; margin: 8px 0 6px; line-height: 1.35; }
details.manual summary { font-size: 11.5px; color: var(--dim); cursor: pointer; margin-bottom: 4px; }

/* standing orders */
.auto-chip { margin-left: auto; margin-right: 6px; background: #0e181b; border: 1px solid var(--line2); color: var(--dim); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; padding: 3px 8px; }
.auto-chip.on { background: var(--hud); border-color: var(--hud); color: #041210; box-shadow: 0 0 10px rgba(98,240,207,.35); }
.auto-row { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: #0e181b; border: 1px solid var(--line2); padding: 10px; margin-bottom: 8px; color: var(--txt); }
.auto-row.on { border-color: var(--hud); background: #0f201d; }
.auto-row b { display: block; letter-spacing: 1.5px; font-size: 13px; }
.auto-row.on b { color: var(--hud); }
.auto-row small { display: block; color: var(--dim); font-size: 12px; line-height: 1.3; }
.auto-row .sw { width: 38px; height: 20px; border-radius: 10px; background: #23353a; position: relative; flex: none; }
.auto-row .sw i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 8px; background: var(--dim); transition: left .15s; }
.auto-row.on .sw { background: rgba(98,240,207,.35); }
.auto-row.on .sw i { left: 20px; background: var(--hud); }

.buy-sum { margin-top: 10px; font-size: 15px; }
.buy-sum .dim { font-size: 13px; }
.tb-net { position: absolute; left: 12px; bottom: 2px; font-size: 9.5px !important; font-family: var(--mono); color: var(--dim) !important; letter-spacing: .5px; }
.tb-net.neg { color: var(--warn) !important; }