/* Frontline 2030 — serious military UI. Palette: navy #0a0f1c, steel panels,
   gold #ffd23d, Blue #3b6fe0, Red #d0483e. No greens/teals (brand rule). */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #0a0f1c; color: #e7ecf7;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: none;
}
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ------------------------------ menus ------------------------------ */
.scr {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(6, 10, 22, .82), rgba(6, 10, 22, .55));
  padding: 20px;
}
.backlink {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left));
  color: #8fa0c4; text-decoration: none; font-size: 14px; font-weight: 600;
}
.backlink:hover { color: #fff; }
.game-title {
  font-size: clamp(38px, 9vw, 74px); letter-spacing: .14em; font-weight: 900;
  text-shadow: 0 2px 24px rgba(59, 111, 224, .45);
}
.game-title .yr { color: #ffd23d; }
.game-sub { color: #aebadb; max-width: 560px; font-size: 15px; letter-spacing: .04em; }
.exp-note { color: #77829f; font-size: 12.5px; margin-top: 6px; }

.btn {
  background: #16203a; border: 1px solid #2c3f74; border-radius: 10px;
  padding: 11px 26px; font-size: 16px; font-weight: 700; letter-spacing: .06em;
  transition: background .15s, transform .06s;
}
.btn:hover { background: #1d2a4c; }
.btn:active { transform: scale(.97); }
.btn.primary { background: #3b6fe0; border-color: #5b86ec; }
.btn.primary:hover { background: #4a7ce8; }
.btn.big { font-size: 20px; padding: 15px 54px; }
.btn.small { font-size: 13px; padding: 7px 14px; text-decoration: none; }
.btn-row { display: flex; gap: 10px; align-items: center; }

.help-box, .deploy-box {
  background: rgba(13, 19, 38, .96); border: 1px solid #2c3f74; border-radius: 16px;
  padding: 26px 30px; max-width: min(620px, 94vw); max-height: 86vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; text-align: left;
}
.help-box h2, .deploy-box h2 { font-size: 20px; letter-spacing: .08em; text-align: center; }
.help-box h3 { color: #ffd23d; font-size: 14.5px; letter-spacing: .08em; margin-top: 6px; }
.help-box p { color: #c3cde8; font-size: 14.5px; line-height: 1.55; }
.help-box .btn { align-self: center; margin-top: 8px; }

/* deploy */
.side-tabs { display: flex; gap: 8px; justify-content: center; }
.side {
  flex: 1; max-width: 220px; padding: 10px 8px; border-radius: 10px; font-weight: 900;
  letter-spacing: .1em; background: #121a30; border: 2px solid #2c3f74; opacity: .55;
}
.side.blue.on { border-color: #3b6fe0; color: #9db9f5; opacity: 1; }
.side.red.on { border-color: #d0483e; color: #ff9d90; opacity: 1; }
#spawn-list { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.spawn-chip {
  padding: 9px 18px; border-radius: 999px; background: #121a30; border: 1px solid #2c3f74;
  font-weight: 800; letter-spacing: .08em; color: #aebadb;
}
.spawn-chip.on { border-color: #ffd23d; color: #ffd23d; }
.role-row { display: flex; gap: 10px; }
.role {
  flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 13px 10px;
  background: #121a30; border: 2px solid #2c3f74; border-radius: 12px; text-align: center;
}
.role.on { border-color: #ffd23d; background: #1a2340; }
.role.off { opacity: .35; cursor: not-allowed; }
.role-name { font-weight: 900; letter-spacing: .1em; font-size: 15px; }
.role-sub { font-size: 11.5px; color: #93a1c6; line-height: 1.35; }
.deploy-box .btn.big { align-self: center; }

/* ------------------------------ in-game HUD ------------------------------ */
#game-ui { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#game-ui button { pointer-events: auto; }

#topbar {
  position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: rgba(9, 14, 30, .72); border: 1px solid #223258; border-radius: 12px;
  padding: 6px 14px;
}
.tk { display: flex; align-items: center; gap: 7px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tk-name { font-size: 11px; letter-spacing: .1em; color: #93a1c6; }
.tk.blue #tk-blue, .tk.blue .tk-name { color: #7da3f0; }
.tk.red #tk-red, .tk.red .tk-name { color: #ff8a78; }
.tk-wrap { width: 74px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
#tk-blue-bar { height: 100%; width: 100%; background: #3b6fe0; }
#tk-red-bar { height: 100%; width: 100%; background: #d0483e; margin-left: auto; }
#zone-pips { display: flex; gap: 7px; }
.zp {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 2px solid #8f9bb0; border-radius: 6px; font-weight: 900; font-size: 13px; color: #8f9bb0;
}
.zp.contested { animation: zp-pulse .8s infinite alternate; }
@keyframes zp-pulse { from { opacity: .45; } to { opacity: 1; } }

#minimap {
  position: absolute; top: max(52px, calc(env(safe-area-inset-top) + 44px)); right: max(10px, env(safe-area-inset-right));
  border: 1px solid #223258; border-radius: 10px; background: #0a1322;
  width: 164px; height: 164px;
}
#killfeed {
  position: absolute; top: max(52px, calc(env(safe-area-inset-top) + 44px)); left: max(12px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #c3cde8;
}
#killfeed div {
  background: rgba(9, 14, 30, .6); border-left: 3px solid #ffd23d; padding: 3px 9px;
  border-radius: 4px; transition: opacity .8s;
}
#killfeed div.fade { opacity: 0; }

.hud-btns {
  position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  display: flex; gap: 8px; z-index: 4; /* above #aimlayer (z2) or touch can't reach pause */
}
.hud-btns button {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid #223258;
  background: rgba(9, 14, 30, .72); font-size: 15px;
}

#reticle {
  position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  pointer-events: none;
}
#reticle::before, #reticle::after {
  content: ''; position: absolute; background: rgba(255, 210, 61, .95);
}
#reticle::before { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px;
  clip-path: polygon(0 0, 100% 0, 100% 34%, 0 34%, 0 66%, 100% 66%, 100% 100%, 0 100%); }
#reticle::after { top: 50%; left: 0; height: 2px; width: 100%; margin-top: -1px;
  clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%, 66% 0, 100% 0, 100% 100%, 66% 100%); }

#hitmarker {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 26px; font-weight: 900; color: #ffd23d; opacity: 0; pointer-events: none;
  text-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
#hitmarker.on { animation: hit-pop .3s ease-out; }
@keyframes hit-pop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }

/* lock-on launcher: dashed amber box while acquiring, solid red + LOCK when set */
#lockon {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; box-sizing: border-box; border: 2px dashed rgba(255, 210, 61, .9);
  border-radius: 7px; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 3px; font-size: 10px; font-weight: 900; letter-spacing: .1em;
  color: #ffd23d; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); pointer-events: none;
}
#lockon.locked {
  width: 50px; height: 50px; border-style: solid; border-color: #ff5d5d; color: #ff5d5d;
  animation: lock-pulse .5s infinite alternate;
}
@keyframes lock-pulse { from { opacity: .65; } to { opacity: 1; } }

.ctx {
  position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 7px;
}
body.touch .ctx { left: max(18px, env(safe-area-inset-left)); bottom: max(196px, calc(env(safe-area-inset-bottom) + 186px)); }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.bar-row .lbl { min-width: 42px; text-align: right; font-weight: 800; letter-spacing: .07em; color: #93a1c6; }
.bar {
  width: 130px; height: 9px; border-radius: 5px; overflow: hidden;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .25);
}
.bar > div { height: 100%; width: 100%; background: #ffd23d; }
#j-heat { background: #ff8a3d; width: 0%; }
#j-heat.hot { background: #ff5d5d; }
.pill-row { display: flex; gap: 7px; flex-wrap: wrap; }
.pill {
  background: rgba(9, 14, 30, .72); border: 1px solid #223258; border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; color: #aebadb; letter-spacing: .04em;
}
.pill b { color: #ffd23d; font-variant-numeric: tabular-nums; }

#hud-hint {
  position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%);
  color: #ffd23d; font-weight: 800; font-size: 15px; letter-spacing: .04em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8); text-align: center;
}
#ctl-card {
  position: absolute; bottom: max(74px, calc(env(safe-area-inset-bottom) + 62px)); left: 50%; transform: translateX(-50%);
  background: rgba(13, 19, 38, .92); border: 1px solid #3b6fe0; border-radius: 12px;
  padding: 9px 18px; font-size: 13.5px; color: #cdd7f0; text-align: center;
  max-width: 92vw; line-height: 1.5;
}
body.touch #ctl-card { bottom: max(240px, calc(env(safe-area-inset-bottom) + 230px)); }
#toast {
  position: absolute; top: 26%; left: 50%; transform: translateX(-50%);
  background: rgba(13, 19, 38, .94); border: 1px solid #ffd23d; border-radius: 10px;
  padding: 9px 20px; font-weight: 800; font-size: 15px; letter-spacing: .04em;
}

/* ------------------------------ touch controls ------------------------------ */
#aimlayer { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
body.touch #aimlayer { pointer-events: auto; } /* ALWAYS auto on touch (Wirecut lore) */
#stick, #throt, #btn-fire, #btn-alt, #btn-fpv, #btn-enter { display: none; position: absolute; z-index: 4; }
body.touch #btn-fire { display: block; pointer-events: auto; }
/* floating joystick: purely visual (the aim layer owns the touch), spawns where
   the thumb lands, invisible until active (Wirecut / Lanternfall lineage) */
body.touch #stick { display: block; pointer-events: none; opacity: 0; transition: opacity .08s; }
body.touch #stick.on { opacity: 1; }
body.touch #btn-alt, body.touch #btn-fpv, body.touch #btn-enter { display: block; pointer-events: auto; }
body.touch.in-jet #throt { display: block; pointer-events: auto; }
body.touch.in-heli #throt { display: block; pointer-events: auto; } /* collective */
body.touch.in-jet #btn-fpv, body.touch.in-jet #btn-enter { display: none; }
body.touch.in-fpv #btn-alt, body.touch.in-fpv #btn-fpv, body.touch.in-fpv #btn-enter { display: none; }

#stick {
  left: 0; top: 0; /* JS repositions to the touch point on each grab */
  width: 124px; height: 124px; border-radius: 50%;
  background: rgba(13, 19, 38, .45); border: 2px solid rgba(91, 134, 236, .55); touch-action: none;
}
#stick-knob {
  position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -25px;
  width: 50px; height: 50px; border-radius: 50%; background: rgba(91, 134, 236, .85); pointer-events: none;
}
#throt {
  right: max(14px, env(safe-area-inset-right)); bottom: max(180px, calc(env(safe-area-inset-bottom) + 168px));
  width: 50px; height: 150px; border-radius: 13px;
  background: rgba(13, 19, 38, .45); border: 2px solid rgba(255, 210, 61, .5); touch-action: none;
}
#throt-knob {
  position: absolute; left: 4px; right: 4px; height: 30px; top: 4px; border-radius: 8px;
  background: rgba(255, 210, 61, .8); pointer-events: none;
}

/* thumb arc, bottom-right: FIRE nearest the thumb, then ALT, FPV, E */
#btn-fire {
  right: max(20px, env(safe-area-inset-right)); bottom: max(58px, calc(env(safe-area-inset-bottom) + 46px));
  width: 68px; height: 68px; border-radius: 50%; padding: 13px;
  background: rgba(13, 19, 38, .6); border: 2px solid rgba(255, 210, 61, .6); color: #ffd23d;
  touch-action: none;
}
#btn-fire svg { width: 100%; height: 100%; display: block; }
#btn-fire.held { background: rgba(255, 210, 61, .35); color: #fff; }
#btn-alt {
  right: max(96px, calc(env(safe-area-inset-right) + 92px)); bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px));
  width: 56px; height: 56px; border-radius: 50%; font-size: 13px; font-weight: 900;
  background: rgba(13, 19, 38, .6); border: 2px solid rgba(255, 138, 61, .6); color: #ffc79b; touch-action: none;
}
#btn-alt.held { background: rgba(255, 138, 61, .4); color: #fff; }
#btn-fpv {
  right: max(120px, calc(env(safe-area-inset-right) + 116px)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  width: 52px; height: 52px; border-radius: 50%; font-size: 12px; font-weight: 900;
  background: rgba(13, 19, 38, .6); border: 2px solid rgba(143, 155, 176, .6); color: #c3cde8; touch-action: none;
}
#btn-fpv.held { background: rgba(143, 155, 176, .4); }
#btn-enter {
  right: max(30px, calc(env(safe-area-inset-right) + 26px)); bottom: max(136px, calc(env(safe-area-inset-bottom) + 124px));
  width: 48px; height: 48px; border-radius: 50%; font-size: 15px; font-weight: 900;
  background: rgba(13, 19, 38, .6); border: 2px solid rgba(59, 111, 224, .65); color: #9db9f5; touch-action: none;
}
#btn-enter.held { background: rgba(59, 111, 224, .4); color: #fff; }

/* ------------------------------ overlays ------------------------------ */
.overlay {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 22, .6);
}
.overlay.dim { background: rgba(120, 24, 24, .18); pointer-events: none; }
.panel {
  background: rgba(13, 19, 38, .97); border: 1px solid #2c3f74; border-radius: 18px;
  padding: 26px 32px; text-align: center; display: flex; flex-direction: column; gap: 12px;
  width: min(430px, 92vw);
}
.panel h2 { font-size: 22px; letter-spacing: .08em; }
.panel.slim { background: rgba(13, 19, 38, .85); padding: 18px 26px; }
.panel p { color: #c3cde8; font-size: 15px; }
.panel p b { color: #ffd23d; }
.ov-leave { color: #8fa0c4; font-size: 13px; text-decoration: none; margin-top: 4px; }
.ov-leave:hover { color: #fff; }
#scr-results { background: rgba(6, 10, 22, .7); }

#loading {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; background: #0a0f1c; color: #b9c6e4; font-size: 16px;
}
#loadbar {
  width: min(320px, 70vw); height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
}
#loadbar-fill { height: 100%; width: 0%; background: #ffd23d; transition: width .15s; }

@media (max-height: 480px) { /* phone landscape */
  #minimap { width: 128px; height: 128px; }
  #topbar { gap: 8px; padding: 4px 10px; }
  .tk-wrap { width: 52px; }
  body.touch .ctx { bottom: max(170px, calc(env(safe-area-inset-bottom) + 160px)); }
}

/* ------------------------------ v1.1: compass · capture · score · settings ------------------------------ */
#compass {
  position: absolute; top: max(46px, calc(env(safe-area-inset-top) + 38px)); left: 50%;
  transform: translateX(-50%); pointer-events: none; opacity: .92;
}
#capbar {
  position: absolute; top: max(74px, calc(env(safe-area-inset-top) + 66px)); left: 50%;
  transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  background: rgba(9, 14, 30, .7); border: 1px solid #223258; border-radius: 999px;
  padding: 4px 12px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
}
.cap-wrap { width: 120px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
#capbar-fill { height: 100%; width: 0%; background: #3b6fe0; transition: width .2s; }
#killbanner {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.9);
  font-size: 20px; font-weight: 900; letter-spacing: .1em; color: #ffd23d;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8); opacity: 0; pointer-events: none;
}
#killbanner.on { animation: kb-pop 1.4s ease-out; }
@keyframes kb-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  22% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
#score-pill {
  position: absolute; top: max(224px, calc(env(safe-area-inset-top) + 216px)); right: max(10px, env(safe-area-inset-right));
  min-width: 64px; text-align: center; background: rgba(9, 14, 30, .72); border: 1px solid #223258;
  border-radius: 999px; padding: 4px 12px; font-weight: 900; color: #ffd23d;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
@media (max-height: 480px) { #score-pill { top: max(188px, calc(env(safe-area-inset-top) + 180px)); } }

/* settings sheet */
#settings-sheet .panel { gap: 16px; }
.set-row {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  font-size: 14.5px; color: #c3cde8; text-align: left;
}
.set-row input[type="range"] { flex: 1; accent-color: #3b6fe0; }
.set-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: #3b6fe0; }
.set-row select {
  background: #16203a; color: #e7ecf7; border: 1px solid #2c3f74; border-radius: 8px;
  padding: 7px 10px; font: inherit;
}
.set-row b { min-width: 52px; text-align: right; color: #ffd23d; }

/* four role cards: wrap to 2×2 on narrow screens */
.role-row { flex-wrap: wrap; }
.role { min-width: 130px; }
.spawn-chip.squad { border-style: dashed; color: #9db9f5; }

/* ADS: reticle tightens + slight vignette */
body.ads #reticle { transform: scale(.62); }
body.ads #reticle::before, body.ads #reticle::after { background: rgba(255, 235, 160, 1); }
body.ads #aimlayer { box-shadow: inset 0 0 140px rgba(4, 8, 18, .55); }

/* v1.1 touch buttons: AIM (foot), RKT (jet/heli); FPV pushed outward */
#btn-aim, #btn-rkt { display: none; position: absolute; z-index: 4; }
body.touch #btn-aim { display: block; pointer-events: auto; }
body.touch.in-jet #btn-aim, body.touch.in-heli #btn-aim, body.touch.in-fpv #btn-aim { display: none; }
body.touch.in-jet #btn-rkt, body.touch.in-heli #btn-rkt { display: block; pointer-events: auto; }
body.touch.in-heli #btn-alt, body.touch.in-heli #btn-fpv { display: none; }
#btn-aim {
  right: max(100px, calc(env(safe-area-inset-right) + 96px)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  width: 52px; height: 52px; border-radius: 50%; font-size: 22px; font-weight: 900;
  background: rgba(13, 19, 38, .6); border: 2px solid rgba(255, 235, 160, .55); color: #ffeba0; touch-action: none;
}
#btn-aim.held { background: rgba(255, 235, 160, .35); color: #fff; }
#btn-rkt {
  right: max(100px, calc(env(safe-area-inset-right) + 96px)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  width: 54px; height: 54px; border-radius: 50%; font-size: 12px; font-weight: 900;
  background: rgba(13, 19, 38, .6); border: 2px solid rgba(255, 138, 61, .6); color: #ffc79b; touch-action: none;
}
#btn-rkt.held { background: rgba(255, 138, 61, .45); color: #fff; }
body.touch #btn-fpv {
  right: max(168px, calc(env(safe-area-inset-right) + 164px)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px));
}
#settings-sheet { z-index: 30; } /* above .scr menus (z20) — gate-caught */
body.touch.in-tank #btn-aim, body.touch.in-tank #btn-fpv { display: none; } /* tank has MG on ALT, no ADS/FPV */
/* boat context: pintle MG on FIRE only */
body.touch.in-boat #btn-aim, body.touch.in-boat #btn-fpv, body.touch.in-boat #btn-alt, body.touch.in-boat #btn-rkt { display: none; }
#spawn-list.dim { opacity: .35; pointer-events: none; } /* air roles launch from HQ */

/* ============================ v1.4 ============================ */

/* map picker (title screen) */
.map-pick { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.map-pick-hd { font-size: 11.5px; letter-spacing: .22em; color: #8fa0c4; font-weight: 800; }
#map-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mapcard {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 10px 16px; min-width: 168px; max-width: 220px;
  background: #121a30; border: 2px solid #2c3f74; border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.mapcard:hover { background: #18213c; }
.mapcard.on { border-color: #ffd23d; background: #1a2340; }
.mapcard b { font-size: 14.5px; font-weight: 900; letter-spacing: .08em; }
.mapcard.on b { color: #ffd23d; }
.mapcard span { font-size: 11.5px; color: #93a1c6; line-height: 1.35; }
.deploy-map-name {
  text-align: center; font-size: 12px; letter-spacing: .16em; color: #8fa0c4; font-weight: 700;
  margin-top: -4px;
}
.deploy-map-name b { color: #ffd23d; letter-spacing: .1em; }

/* TAC-LINK transit panel */
#transit {
  position: absolute; left: 50%; bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px));
  transform: translateX(-50%); z-index: 5; pointer-events: auto;
  background: rgba(9, 14, 30, .88); border: 1px solid #2c3f74; border-radius: 13px;
  padding: 9px 13px 11px; display: flex; flex-direction: column; gap: 7px;
  min-width: min(430px, 92vw); box-shadow: 0 6px 26px rgba(0, 0, 0, .45);
}
#transit.active { border-color: #ffd23d; }
#transit-title {
  font-size: 10.5px; letter-spacing: .22em; color: #ffd23d; font-weight: 900; text-align: center;
}
#transit-list { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
#transit-list em { color: #8fa0c4; font-size: 12.5px; font-style: normal; }
.tac-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 15px; border-radius: 9px; background: #121a30; border: 1px solid #3b6fe0;
  color: #cfdcff; touch-action: none;
}
.tac-chip:hover { background: #1a2340; border-color: #ffd23d; }
.tac-chip b { font-size: 13px; font-weight: 900; letter-spacing: .07em; }
.tac-chip span { font-size: 10px; color: #8fa0c4; letter-spacing: .05em; }
.transit-wrap { height: 4px; background: rgba(255, 255, 255, .12); border-radius: 3px; overflow: hidden; }
#transit-fill { height: 100%; width: 0%; background: #ffd23d; transition: width .08s linear; }

/* jet mouse-aim marker */
#jetaim {
  position: absolute; left: 50%; top: 50%; width: 42px; height: 42px;
  border: 2px solid rgba(255, 210, 61, .8); border-radius: 50%; z-index: 3;
  box-shadow: 0 0 0 1px rgba(6, 10, 22, .6) inset;
}
#jetaim::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px; background: #ffd23d; border-radius: 50%;
}

/* tactical map */
#tacmap { z-index: 26; background: rgba(4, 8, 18, .84); }
.tacmap-box { display: flex; flex-direction: column; gap: 10px; align-items: center; }
#tacmap-canvas {
  border: 1px solid #2c3f74; border-radius: 12px; background: #0a0f1c;
  box-shadow: 0 10px 44px rgba(0, 0, 0, .6);
}
.tacmap-foot {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  font-size: 12px; color: #8fa0c4; letter-spacing: .06em;
}

/* touch: CROUCH (left thumb) + tactical MAP */
#btn-crouch, #btn-map { display: none; position: absolute; z-index: 4; }
body.touch #btn-crouch, body.touch #btn-map { display: block; pointer-events: auto; }
body.touch.in-jet #btn-crouch, body.touch.in-heli #btn-crouch, body.touch.in-tank #btn-crouch,
body.touch.in-boat #btn-crouch, body.touch.in-ltv #btn-crouch, body.touch.in-fpv #btn-crouch { display: none; }
#btn-crouch {
  left: max(20px, env(safe-area-inset-left)); bottom: max(26px, calc(env(safe-area-inset-bottom) + 14px));
  width: 52px; height: 52px; border-radius: 50%; font-size: 20px; font-weight: 900;
  background: rgba(13, 19, 38, .6); border: 2px solid rgba(143, 155, 176, .6); color: #c3cde8; touch-action: none;
}
#btn-crouch.held { background: rgba(255, 210, 61, .32); color: #fff; border-color: rgba(255, 210, 61, .7); }
#btn-map {
  left: max(20px, env(safe-area-inset-left)); bottom: max(88px, calc(env(safe-area-inset-bottom) + 76px));
  width: 46px; height: 46px; border-radius: 12px; font-size: 17px; font-weight: 900;
  background: rgba(13, 19, 38, .6); border: 2px solid rgba(59, 111, 224, .55); color: #9db9f5; touch-action: none;
}
#btn-map.held { background: rgba(59, 111, 224, .4); color: #fff; }

/* LTV context: roof gun on FIRE, no ADS/FPV/ALT/RKT */
body.touch.in-ltv #btn-aim, body.touch.in-ltv #btn-fpv,
body.touch.in-ltv #btn-alt, body.touch.in-ltv #btn-rkt { display: none; }

/* objective markers: where the zones are, including behind you */
#objmarks { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
/* Small on purpose: these sit on the horizon, which is where the enemies are.
   main.js also fades one out as it nears the crosshair (owner-reported: the
   markers were blocking the view when attacking). */
.objmark {
  position: absolute; left: 0; top: 0; display: flex; align-items: baseline;
  gap: 4px; padding: 0 4px; border: 0; border-radius: 5px;
  background: rgba(9, 14, 30, .34); text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  transition: opacity .12s linear;
}
.objmark b { font-size: 10.5px; font-weight: 900; letter-spacing: .1em; line-height: 1.35; }
.objmark span { font-size: 8.5px; color: #b9c6e2; letter-spacing: .04em; line-height: 1.35; }
.objmark.edge { border: 1px solid currentColor; border-style: dashed; padding: 0 4px; }
.objmark.contested { animation: objpulse .9s ease-in-out infinite; }
@keyframes objpulse { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }

/* directional damage: an arc on the side the round came from */
#dmgdir {
  position: absolute; left: 50%; top: 50%; width: min(58vmin, 460px); height: min(58vmin, 460px);
  margin-left: min(-29vmin, -230px); margin-top: min(-29vmin, -230px);
  pointer-events: none; z-index: 3; opacity: 0;
  transform: rotate(var(--a, 0deg));
}
#dmgdir::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 40%; height: 13%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(208, 72, 62, .92), rgba(208, 72, 62, 0) 72%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
#dmgdir.on { animation: dmgflash 1.1s ease-out forwards; }
@keyframes dmgflash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* squad order chip + button */
#order-chip {
  position: absolute; right: max(14px, env(safe-area-inset-right));
  top: calc(max(8px, env(safe-area-inset-top)) + 218px);
  background: rgba(9, 14, 30, .8); border: 1px solid #ffd23d; border-radius: 999px;
  padding: 4px 11px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: #ffd23d;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#btn-order { display: none; position: absolute; z-index: 4; }
body.touch #btn-order { display: block; pointer-events: auto; }
body.touch.in-jet #btn-order, body.touch.in-fpv #btn-order { display: none; }
#btn-order {
  left: max(20px, env(safe-area-inset-left)); bottom: max(146px, calc(env(safe-area-inset-bottom) + 134px));
  width: 46px; height: 46px; border-radius: 12px; font-size: 18px; font-weight: 900;
  background: rgba(13, 19, 38, .6); border: 2px solid rgba(255, 210, 61, .55); color: #ffd23d; touch-action: none;
}
#btn-order.held { background: rgba(255, 210, 61, .34); color: #fff; }

/* controls card: dismissible (✕ / any input / the ? button) — owner-reported
   that it was too long, had no way out, and could not be brought back */
#ctl-card { display: flex; align-items: center; gap: 10px; max-width: min(720px, 92vw); }
#ctl-card-text { flex: 1; }
#ctl-card-x {
  flex: none; pointer-events: auto; width: 22px; height: 22px; line-height: 1;
  border-radius: 6px; border: 1px solid rgba(255, 210, 61, .5);
  background: rgba(13, 19, 38, .8); color: #ffd23d; font-size: 12px; font-weight: 900;
}
#ctl-card-x:hover { background: rgba(255, 210, 61, .28); color: #fff; }
#btn-ctl { font-weight: 900; }

/* infantry class chips on the deploy screen */
.class-row { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.class-row.dim { opacity: .3; pointer-events: none; }
.classchip {
  flex: 1 1 46%; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 11px; text-align: left; border-radius: 10px;
  background: #121a30; border: 2px solid #2c3f74;
}
.classchip.on { border-color: #ffd23d; background: #1a2340; }
.classchip b { font-size: 12.5px; font-weight: 900; letter-spacing: .1em; }
.classchip.on b { color: #ffd23d; }
.classchip span { font-size: 10.5px; color: #93a1c6; line-height: 1.35; }
#f-res { font-style: normal; font-size: 11px; color: #8fa0c4; font-weight: 700; }
/* vehicle optics: the ⌖ button doubles as zoom in a chase-cam vehicle */
body.touch.in-tank #btn-aim, body.touch.in-ltv #btn-aim, body.touch.in-boat #btn-aim { display: block; }