:root {
  --bg: #070b14;
  --panel: rgba(12, 18, 32, 0.84);
  --panel2: rgba(20, 29, 50, 0.9);
  --line: rgba(120, 160, 230, 0.2);
  --line2: rgba(120, 170, 255, 0.38);
  --text: #e6edf8;
  --dim: #8fa0bd;
  --dim2: #5f7090;
  --accent: #4fc3ff;
  --accent2: #8f7bff;
  --hot: #ff8a3d;
  --good: #58e39a;
  --warn: #ffc857;
  --bad: #ff5d6c;
  --mono: 'Cascadia Mono', 'Consolas', 'SF Mono', 'Menlo', monospace;
  --ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
/* manipulation: quick repeated taps (warp, throttle) must not trigger iOS double-tap zoom */
* { box-sizing: border-box; touch-action: manipulation; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--ui);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ---------- loading ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 50;
  background: radial-gradient(ellipse at 50% 35%, #16233f 0%, #070b14 70%); }
.load-box { text-align: center; width: min(420px, 86vw); }
.logo-big { font-size: clamp(34px, 8vw, 58px); font-weight: 800; letter-spacing: .12em; color: #fff; text-shadow: 0 0 30px rgba(80, 170, 255, .45); }
.logo-big span, .brand span { color: var(--hot); margin-left: .18em; }
.load-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; margin: 26px 0 12px; overflow: hidden; }
#loadFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .25s; }
#loadText { color: var(--dim); font-size: 14px; }

/* ---------- panels ---------- */
.panel { position: fixed; z-index: 10; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.ptitle { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding: 12px 14px 8px; }
.ptitle span { color: var(--dim2); letter-spacing: .05em; font-weight: 600; }

#topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 12; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(8,12,22,.95), rgba(8,12,22,.75)); border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; letter-spacing: .14em; font-size: 17px; white-space: nowrap; }
#rocketName { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 7px 10px;
  font-size: 15px; font-weight: 600; width: 220px; min-width: 90px; -webkit-user-select: text; user-select: text; }
#rocketName:focus { outline: none; border-color: var(--accent); }
.topbtns { margin-left: auto; display: flex; gap: 6px; flex-wrap: nowrap; }
.tbtn { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tbtn:hover { background: rgba(79,195,255,.14); border-color: var(--line2); }
.tbtn.icon { padding: 7px 10px; font-size: 15px; }
.tbtn:disabled { opacity: .35; pointer-events: none; }
.tbtn .ico { display: none; }

/* palette */
#palette { top: 64px; left: 12px; bottom: 12px; width: 300px; display: flex; flex-direction: column; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; }
.tab { background: transparent; border: 1px solid var(--line); border-radius: 20px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--dim); }
.tab.on { background: rgba(79,195,255,.16); border-color: var(--accent); color: #fff; }
.cards { flex: 1; overflow-y: auto; padding: 4px 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.cards::-webkit-scrollbar, #stackList::-webkit-scrollbar, #propsBox::-webkit-scrollbar { width: 8px; }
.cards::-webkit-scrollbar-thumb, #stackList::-webkit-scrollbar-thumb, #propsBox::-webkit-scrollbar-thumb { background: rgba(120,160,230,.25); border-radius: 4px; }
.card { position: relative; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 7px 8px; text-align: left; transition: transform .1s, border-color .1s; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card:active { transform: translateY(0); }
.card img, .card .thumb { width: 100%; aspect-ratio: 1.25; object-fit: contain; display: block; border-radius: 6px; background: radial-gradient(circle at 50% 40%, #243152, #10172a); }
.card .cn { font-size: 12.5px; font-weight: 700; margin: 5px 0 2px; line-height: 1.2; }
.card .cs { font-size: 10.5px; color: var(--dim); line-height: 1.35; font-family: var(--mono); }
.card .badge { position: absolute; top: 9px; left: 10px; font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 10px; color: #0a0f1a; letter-spacing: .04em; }
.hint { font-size: 11.5px; color: var(--dim); padding: 8px 14px 12px; border-top: 1px solid var(--line); line-height: 1.45; }

/* inspector */
#inspector { top: 64px; right: 12px; width: 320px; bottom: 262px; display: flex; flex-direction: column; }
#stackList { overflow-y: auto; padding: 0 10px 8px; flex: 1 1 45%; min-height: 80px; }
.stagehdr { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--dim2); margin: 8px 4px 4px; text-transform: uppercase; display: flex; justify-content: space-between; }
.stagehdr b { color: var(--accent); font-weight: 700; letter-spacing: .02em; }
.srow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; font-size: 13px; cursor: pointer; }
.srow:hover { background: rgba(255,255,255,.04); }
.srow.sel { background: rgba(79,195,255,.12); border-color: rgba(79,195,255,.5); }
.srow .sw { width: 10px; height: 24px; border-radius: 3px; flex: none; }
.srow .sn { flex: 1; min-width: 0; }
.srow .sn div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .sn small { color: var(--dim); font-size: 11px; font-family: var(--mono); }
.srow .sub { padding-left: 16px; }
.srow button { background: none; border: none; color: var(--dim); font-size: 14px; padding: 2px 5px; border-radius: 5px; }
.srow button:hover { color: #fff; background: rgba(255,255,255,.1); }
.attach { margin-left: 22px; font-size: 11.5px; color: var(--dim); padding: 2px 8px; }
#propsBox { border-top: 1px solid var(--line); padding: 10px 14px 12px; overflow-y: auto; flex: 1 1 55%; }
.propt { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.propd { color: var(--dim); font-size: 12px; line-height: 1.45; margin-bottom: 8px; }
.prow { margin: 9px 0; }
.prow label { display: block; font-size: 11px; font-weight: 700; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12px; font-weight: 600; }
.chip.on { background: rgba(79,195,255,.18); border-color: var(--accent); color: #fff; }
.chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.range { display: flex; align-items: center; gap: 8px; }
.range input[type=range] { flex: 1; accent-color: var(--accent); }
.range output { font-family: var(--mono); font-size: 12px; min-width: 58px; text-align: right; }
#propsBox select { background: #0d1528; color: var(--text); border: 1px solid var(--line2); border-radius: 7px; padding: 6px 8px; font-size: 12.5px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 12px; margin-top: 8px; font-family: var(--mono); }
.kv span:nth-child(odd) { color: var(--dim); font-family: var(--ui); }
.pbtns { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pbtn { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; font-size: 12px; font-weight: 600; }
.pbtn:hover { border-color: var(--accent); }
.pbtn.danger:hover { border-color: var(--bad); color: #ffb3ba; }

/* stats */
#statsBar { right: 12px; bottom: 136px; width: 320px; height: 116px; padding: 8px 12px; overflow: hidden; display: flex; flex-direction: column; }
#statsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; }
.st { min-width: 0; }
.st .sl { font-size: 9.5px; letter-spacing: .1em; color: var(--dim); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.st .sv { font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st .sv.good { color: var(--good); } .st .sv.warn { color: var(--warn); } .st .sv.bad { color: var(--bad); }
#warnings { margin-top: 5px; font-size: 11px; line-height: 1.35; overflow: hidden; }
.w { display: flex; gap: 6px; } .w.error { color: #ff9aa4; } .w.warn { color: #ffd98a; } .w.info { color: var(--dim); }

/* launch */
#launchBox { right: 12px; bottom: 12px; width: 320px; padding: 10px 12px 12px; }
.plan { display: flex; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 3px; }
.seg { flex: 1; background: none; border: none; padding: 6px 4px; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--dim); }
.seg.on { background: rgba(79,195,255,.2); color: #fff; }
#estimate { font-size: 12px; color: var(--dim); margin: 7px 2px 8px; min-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#estimate b { color: #fff; font-family: var(--mono); font-size: 13px; }
#estimate .el::after { content: ': '; }
#btnLaunch { width: 100%; padding: 12px; border-radius: 10px; border: none; font-size: 18px; font-weight: 800; letter-spacing: .2em;
  background: linear-gradient(180deg, #ff9a4d, #f0621e); color: #fff; box-shadow: 0 6px 24px rgba(255,120,40,.35), inset 0 1px 0 rgba(255,255,255,.3); }
#btnLaunch:hover { filter: brightness(1.08); }
#btnLaunch:disabled { background: #3a4458; box-shadow: none; color: #8793aa; cursor: not-allowed; }
#viewHint { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(200,215,240,.55); z-index: 5; pointer-events: none; white-space: nowrap; }
#mobileTabs { display: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-family: var(--ui); }
#hud .lbl { font-size: 10px; letter-spacing: .16em; color: rgba(210,226,255,.78); font-weight: 700; }
/* the sky behind the HUD ranges from black space to a white launch-morning haze */
#hud .lbl, #stageLbl, #altSub, .tick, .fuel .fl, #keysHint { text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 7px rgba(0,0,0,.55); }
#hudTop { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 12px 14px; gap: 10px; }
#metBox { min-width: 160px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
#met { font-family: var(--mono); font-size: 24px; font-weight: 600; }
#stageLbl { font-size: 12px; color: var(--accent); font-weight: 700; margin-top: 2px; }
#altBox { text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
#altVal { font-family: var(--mono); font-size: clamp(30px, 5vw, 50px); font-weight: 700; line-height: 1.05; }
#altSub { font-size: 13px; color: #ffd98a; min-height: 18px; font-weight: 600; }
#hudBtns { display: flex; gap: 6px; pointer-events: auto; min-width: 160px; justify-content: flex-end; }
.hbtn { pointer-events: auto; background: rgba(8,14,28,.62); border: 1px solid rgba(140,180,255,.35); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 700; color: #dce8ff; backdrop-filter: blur(4px); }
.hbtn:hover { background: rgba(40,70,120,.75); }
.hbtn.icon { padding: 7px 10px; }
.hbtn.on { border-color: var(--accent); color: #fff; background: rgba(79,195,255,.25); }
#leftCol { position: absolute; left: 14px; top: 96px; width: 210px; display: flex; flex-direction: column; gap: 8px; }
#telemetry { background: rgba(6,10,20,.6); border: 1px solid rgba(120,160,230,.18); border-radius: 10px; padding: 8px 10px; font-size: 12px; backdrop-filter: blur(3px); }
.trow { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; white-space: nowrap; }
.trow span:first-child { color: rgba(200,220,255,.62); }
.trow span:last-child { font-family: var(--mono); font-weight: 600; }
#fuelBox { background: rgba(6,10,20,.42); border-radius: 10px; padding: 2px 10px 5px; }
#fuelBox:empty { display: none; }
.fuel { margin: 5px 0; font-size: 11px; }
.fuel .fl { display: flex; justify-content: space-between; color: rgba(210,226,255,.8); margin-bottom: 2px; }
.fuel .fb { height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.fuel .fb div { height: 100%; border-radius: 4px; transition: width .2s linear; }
.fuel.dead { opacity: .35; }
#eventLog { position: absolute; left: 50%; transform: translateX(-50%); top: 118px; width: min(440px, 70vw); text-align: center; }
.ev { font-size: 14px; font-weight: 700; margin: 3px 0; text-shadow: 0 2px 8px rgba(0,0,0,.8); animation: evIn .35s ease-out; transition: opacity .6s; }
.ev.space { color: #9fd4ff; font-size: 17px; } .ev.fail { color: #ff8f9a; font-size: 16px; } .ev.orbit { color: var(--good); font-size: 17px; }
.ev.stage { color: #ffd98a; } .ev.milestone { color: #d9e4ff; } .ev.apogee { color: #ffd98a; font-size: 16px; } .ev.escape { color: #c7a8ff; font-size: 17px; }
@keyframes evIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
#tape { position: absolute; right: 14px; top: 90px; bottom: 120px; width: 150px; }
#tapeInner { position: relative; height: 100%; border-right: 2px solid rgba(160,200,255,.35); }
.tick { position: absolute; right: 0; transform: translateY(50%); font-size: 10.5px; color: rgba(200,220,255,.7); white-space: nowrap; padding-right: 8px; display: flex; align-items: center; gap: 5px; }
.tick::after { content: ''; width: 8px; height: 1px; background: rgba(200,220,255,.6); position: absolute; right: 0; }
.tick.done { color: #9ff0c4; }
.tick.done::after { background: #58e39a; }
.tick.nolabel { color: transparent; text-shadow: none; }
.marker { position: absolute; right: -7px; width: 12px; height: 12px; transform: translateY(50%) rotate(45deg); background: var(--hot); box-shadow: 0 0 10px var(--hot); }
.marker.max { background: transparent; border: 2px solid #ffd98a; box-shadow: none; width: 10px; height: 10px; right: -6px; }
#bigMsg { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); font-size: clamp(40px, 10vw, 110px); font-weight: 800; letter-spacing: .08em; text-shadow: 0 0 40px rgba(120,180,255,.7); opacity: 0; transition: opacity .3s; white-space: nowrap; }
#hudBottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 14px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
#warpBox, #ctrlBox { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
#warpVal { font-family: var(--mono); font-weight: 700; min-width: 58px; text-align: center; font-size: 14px; background: rgba(8,14,28,.62); border: 1px solid rgba(140,180,255,.25); border-radius: 8px; padding: 6px 6px; }
#thrBar { position: relative; width: 110px; height: 30px; background: rgba(8,14,28,.62); border: 1px solid rgba(140,180,255,.35); border-radius: 8px; overflow: hidden; }
#thrFill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,140,60,.55), rgba(255,200,90,.8)); }
#thrBar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.hbtn.stage { background: rgba(255,120,40,.3); border-color: rgba(255,150,80,.7); padding: 8px 18px; letter-spacing: .12em; }
/* Military: live score + floating hit labels */
#scoreBox { margin-top: 4px; display: inline-flex; align-items: baseline; gap: 8px; padding: 3px 12px; border-radius: 20px; background: rgba(8,12,24,.55); border: 1px solid rgba(255,200,90,.45); text-shadow: 0 1px 3px #000; }
#scoreBox small { font-size: 10px; letter-spacing: .16em; color: #ffd98a; font-weight: 800; }
#scoreBox b { font-family: var(--mono); font-size: 22px; color: #fff; }
#scoreBox span { font-size: 12px; color: #dfe8ff; white-space: nowrap; }
#scoreBox.bump { animation: scoreBump .35s ease-out; }
@keyframes scoreBump { 0% { transform: scale(1.18); border-color: #ffd98a; } 100% { transform: none; } }
/* Military camera switcher */
#camSwitch { display: flex; gap: 0; }
#camSwitch.hidden { display: none; }
#camSwitch .hbtn { border-radius: 0; margin-left: -1px; padding: 7px 10px; white-space: nowrap; }
#camSwitch .hbtn:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
#camSwitch .hbtn:last-child { border-radius: 0 8px 8px 0; }
#camSwitch .hbtn.on { position: relative; z-index: 1; }
#camSwitch .hbtn:disabled { opacity: .4; }
@media (max-width: 1100px) { #camSwitch .txt { display: none; } #camSwitch .hbtn { padding: 6px 9px; font-size: 14px; } }
/* warp to target */
.hbtn.hot { background: linear-gradient(180deg, rgba(255,140,70,.55), rgba(220,80,30,.55)); border-color: rgba(255,170,110,.85); color: #fff; }
#warpProg { width: min(260px, 60vw); height: 5px; margin: 3px auto 0; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
#warpFill { height: 100%; width: 0; background: linear-gradient(90deg, #ffb35c, #ff6a3d); transition: width .15s linear; }
/* warhead cam: black-and-white TV feed with a crosshair */
body.bombcam #view { filter: grayscale(1) contrast(1.35) brightness(1.08); }
#hud.hidden #bombCam { display: none; }
#bombCam { position: absolute; inset: 0; pointer-events: none; font-family: var(--mono); color: rgba(235,255,235,.92); font-size: 13px; letter-spacing: .08em; text-shadow: 0 0 4px rgba(0,0,0,.9); }
body.bombcam #hud #leftCol, body.bombcam #hud #tape, body.bombcam #hud #steerBox, body.bombcam #hud #eventLog, body.bombcam #hud #keysHint, body.bombcam #hud #bigMsg { display: none; }
.bc-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.bc-frame i { position: absolute; width: 38px; height: 38px; border: 2px solid rgba(235,255,235,.85); }
.bc-frame i:nth-child(1) { left: 22%; top: 26%; border-right: 0; border-bottom: 0; }
.bc-frame i:nth-child(2) { right: 22%; top: 26%; border-left: 0; border-bottom: 0; }
.bc-frame i:nth-child(3) { left: 22%; bottom: 26%; border-right: 0; border-top: 0; }
.bc-frame i:nth-child(4) { right: 22%; bottom: 26%; border-left: 0; border-top: 0; }
.bc-cross { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; transform: translate(-50%,-50%);
  background: linear-gradient(rgba(235,255,235,.9), rgba(235,255,235,.9)) center/2px 30% no-repeat, linear-gradient(90deg, rgba(235,255,235,.9), rgba(235,255,235,.9)) center/30% 2px no-repeat; border: 2px solid rgba(235,255,235,.7); border-radius: 50%; }
.bc-tl, .bc-tr, .bc-bl { position: absolute; }
.bc-tl { left: max(16px, env(safe-area-inset-left)); top: 150px; }
.bc-tl::first-line { color: #ff5a4d; }
.bc-tr { right: max(16px, env(safe-area-inset-right)); top: 150px; text-align: right; }
.bc-bl { left: 50%; transform: translateX(-50%); bottom: 130px; white-space: nowrap; }
.bc-lost { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: #fff; letter-spacing: .2em;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 2px, rgba(0,0,0,.35) 2px 4px), rgba(40,40,40,.85); }
#bombCam.lost .bc-lost { display: flex; animation: lostFlick .12s steps(2) infinite; }
@keyframes lostFlick { 50% { background-position: 0 2px; opacity: .85; } }
#hud.detonated #leftCol, #hud.detonated #steerBox, #hud.detonated #tape { display: none; }
/* Military: side view of the flight (launch site → target) */
#profileBox { position: absolute; left: 14px; bottom: 80px; width: 350px; background: rgba(6,10,20,.6); border: 1px solid rgba(120,160,230,.18); border-radius: 10px; padding: 6px 8px 5px; backdrop-filter: blur(3px); }
#profileBox .pfHead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 10px; letter-spacing: .14em; color: #9fb4d8; font-weight: 800; white-space: nowrap; }
#pfInfo { margin-left: auto; min-width: 0; letter-spacing: 0; font-family: var(--mono); color: #e6eeff; font-weight: 600; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
#pfSwap { display: none; font-style: normal; letter-spacing: 0; font-weight: 600; color: #7fa8e8; margin-left: 4px; }
#profileCv { display: block; width: 100%; height: 138px; margin-top: 3px; }
#pfFoot { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: #cfdcf5; margin-top: 2px; white-space: nowrap; }
#hud.detonated #profileBox, body.bombcam #hud #profileBox { display: none; }
#pfHide { pointer-events: auto; flex: none; margin: -4px -4px -4px 0; background: rgba(255,255,255,.07); border: 1px solid rgba(140,180,255,.25); border-radius: 6px; color: #cfdcf5; font-size: 12px; line-height: 1; width: 24px; height: 22px; padding: 0; }
#pfHide:hover { background: rgba(255,255,255,.16); }
/* hidden profile: a small button brings it back */
#hud.pf-hidden #profileBox { display: none; }
#pfShow { position: absolute; left: 14px; bottom: 80px; font-size: 16px; padding: 5px 9px; }
#hud:not(.strike) #pfShow, #hud:not(.pf-hidden) #pfShow, #hud.detonated #pfShow, body.bombcam #hud #pfShow { display: none; }
/* (desktop: the score pill sits where the event log starts, so the log steps down below it) */
@media (min-width: 821px) and (min-height: 521px) { #hud.detonated #eventLog { top: 152px; } }
#bigMsg.rating { top: 24%; font-size: clamp(26px, 5.5vw, 58px); text-shadow: 0 2px 10px rgba(0,0,0,.8), 0 0 30px rgba(0,0,0,.4); }
#hitLayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hitlbl { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 800; font-size: 13px; color: #ffe39a; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0,0,0,.8); will-change: transform; }
.hitlbl b { font-family: var(--mono); }
.hitlbl.damaged { color: #ffc27a; font-size: 12px; }
.hitlbl.disabled { color: #9fdcff; }
.hitlbl.big { font-size: 16px; color: #fff; }
.hitlbl.big b { color: #ffd23d; }
.hitlbl i { font-style: normal; color: #ff8a5c; font-size: .8em; letter-spacing: .08em; }
@media (max-width: 600px) { .hitlbl { font-size: 11px; } .hitlbl.big { font-size: 12.5px; } #scoreBox b { font-size: 19px; } }
.hitlbl.miss { font-size: 12px; color: #ffe07a; background: rgba(10,14,26,.6); border: 1px solid rgba(255,220,120,.5); padding: 1px 7px; border-radius: 10px; }
.result-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: -4px 0 10px; }
.result-score small { font-size: 11px; letter-spacing: .14em; color: var(--dim); font-weight: 700; }
.result-score b { font-family: var(--mono); font-size: 26px; color: #ffd98a; }
.result-score em { font-style: normal; font-weight: 800; color: #8ff0bd; }
.result-score span { font-size: 12px; color: var(--dim); }

/* steering stick: above the throttle/stage controls, left of the altitude tape */
#steerBox { position: absolute; right: 180px; bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; transition: opacity .3s; }
#steerBox.off { opacity: .3; }
#steerBox.off #stick, #steerBox.off #hAuto { pointer-events: none; }
#hAuto { font-size: 11px; letter-spacing: .1em; padding: 5px 10px; white-space: nowrap; }
#hAuto.manual { border-color: var(--hot); color: #fff; background: rgba(255,120,40,.32); }
#stick { pointer-events: auto; position: relative; width: 124px; height: 124px; border-radius: 50%; touch-action: none; cursor: grab;
  background: radial-gradient(circle, rgba(8,14,28,.25) 0 30%, rgba(8,14,28,.55) 70%); border: 1px solid rgba(140,180,255,.35); backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
#stick::before, #stick::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(160,200,255,.18); transform: translate(-50%,-50%); }
#stick::before { width: 1px; height: 76%; } #stick::after { width: 76%; height: 1px; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 40% 35%, rgba(220,235,255,.9), rgba(120,160,230,.75) 60%, rgba(60,90,150,.8)); box-shadow: 0 2px 10px rgba(0,0,0,.5); transition: transform .12s ease-out; }
#stick.active { cursor: grabbing; border-color: var(--accent); }
#stick.active #stickKnob { transition: none; }
#keysHint { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); font-size: 11px; color: rgba(200,215,240,.5); white-space: nowrap; }

/* ---------- modal ---------- */
#modal { position: fixed; inset: 0; z-index: 40; background: rgba(3,6,14,.62); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(3px); }
#modalBox { background: linear-gradient(180deg, #121b30, #0c1324); border: 1px solid var(--line2); border-radius: 16px; width: min(640px, 100%); max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 22px 24px; box-shadow: 0 20px 80px rgba(0,0,0,.6); -webkit-user-select: text; user-select: text; }
#modalBox h2 { margin: 0 0 4px; font-size: 22px; }
#modalBox .sub { color: var(--dim); margin-bottom: 14px; font-size: 13.5px; line-height: 1.5; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.mcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: left; }
.mcard:hover { border-color: var(--accent); }
.mcard img { width: 100%; aspect-ratio: 1.6; object-fit: contain; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #243152, #10172a); }
.mcard .mt { font-weight: 700; margin-top: 6px; } .mcard .mtag { font-size: 11px; color: var(--accent); font-weight: 700; }
.mcard .md { font-size: 12px; color: var(--dim); line-height: 1.4; margin-top: 3px; }
.mcard .mreach { font-size: 11.5px; font-family: var(--mono); color: #dfe8ff; margin-top: 3px; }
.mcard .mreach.ok { color: var(--good); } .mcard .mreach.bad { color: #ff9aa4; }
/* phones: two compact columns so the whole list is a short scroll */
@media (max-width: 560px) {
  .mgrid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .mcard { padding: 6px; border-radius: 10px; }
  .mcard img { aspect-ratio: 1.15; }
  .mcard .md { display: none; }
  .mcard .mtag { font-size: 10px; } .mcard .mt { margin-top: 3px; font-size: 14px; }
  .mcard .mreach { font-size: 10px; line-height: 1.3; }
}
.mbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.mbtn { background: rgba(255,255,255,.06); border: 1px solid var(--line2); border-radius: 9px; padding: 9px 16px; font-weight: 700; font-size: 14px; }
.mbtn.primary { background: linear-gradient(180deg, #4fb8ff, #2d7fe0); border-color: transparent; color: #fff; }
.mbtn.hot { background: linear-gradient(180deg, #ff9a4d, #f0621e); border-color: transparent; color: #fff; }
.mbtn:hover { filter: brightness(1.1); }
.result-alt { font-family: var(--mono); font-size: clamp(38px, 9vw, 60px); font-weight: 700; line-height: 1.1; margin: 4px 0; }
.result-civ { margin-top: 6px; color: #ffb4a8; font-size: 13px; }
.result-cmp { color: #ffd98a; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.result-tip { margin: -4px auto 12px; max-width: 460px; font-size: 13px; line-height: 1.4; color: #ffc2b8; background: rgba(255, 90, 70, .1); border: 1px solid rgba(255, 110, 90, .3); border-radius: 8px; padding: 6px 10px; }
#stressBox { margin: 5px auto 0; width: 190px; max-width: 70vw; padding: 3px 8px 5px; border-radius: 8px; background: rgba(40, 8, 8, .6); border: 1px solid rgba(255, 120, 90, .5); text-shadow: 0 1px 3px #000; }
#stressBox .sl { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #ffc9a0; }
#stressBox .sb { height: 5px; margin-top: 3px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
#stressBox .sb div { height: 100%; width: 0; background: linear-gradient(90deg, #ffd060, #ff5a3c); }
#stressBox.crit { animation: stressBlink .35s infinite alternate; border-color: #ff5a3c; }
#stressBox.crit .sl { color: #ff8a70; }
@keyframes stressBlink { from { background: rgba(40, 8, 8, .6); } to { background: rgba(150, 20, 10, .75); } }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
.rgrid div { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; }
.rgrid small { display: block; font-size: 10px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; font-weight: 700; }
.rgrid b { font-family: var(--mono); font-size: 15px; }
.ladder { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lad { font-size: 11.5px; padding: 4px 9px; border-radius: 20px; border: 1px solid var(--line); color: var(--dim); }
.lad.on { border-color: var(--good); color: #bff5d6; background: rgba(88,227,154,.1); }
table.rec { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rec td, table.rec th { padding: 6px 6px; border-bottom: 1px solid var(--line); text-align: left; }
table.rec th { font-size: 10.5px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
table.rec td.num { font-family: var(--mono); text-align: right; }
.setrow { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); gap: 10px; }
.setrow select { background: #0d1528; color: var(--text); border: 1px solid var(--line2); border-radius: 7px; padding: 5px 8px; max-width: 58%; }
.setrow small, .setgroup small { color: var(--dim); font-weight: 400; font-size: 11px; }
.setgroup { margin-top: 12px; padding-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.setgroup small { text-transform: none; letter-spacing: 0; display: block; margin-top: 2px; }
.setnote { font-size: 11.5px; color: #ffd98a; padding: 4px 0 2px; }
.setnote:empty { display: none; }
#toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 60; background: rgba(10,16,30,.92); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 16px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s; white-space: normal; width: max-content; max-width: min(92vw, 560px); text-align: center; line-height: 1.35; }
#toast.show { opacity: 1; }
#testout { position: fixed; top: 0; left: 0; z-index: 99; margin: 0; background: rgba(0,0,0,.88); color: #7dffb0; font: 12px/1.35 var(--mono); padding: 10px; max-width: 100vw; max-height: 100vh; overflow: auto; white-space: pre-wrap; }

/* ---------- Military mode ---------- */
#modeSwitch { display: flex; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 9px; padding: 2px; gap: 2px; flex: none; }
#modeSwitch button { background: none; border: none; border-radius: 7px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; color: var(--dim); white-space: nowrap; }
#modeSwitch button.on { background: rgba(79,195,255,.2); color: #fff; }
#modeSwitch button[data-mode="military"].on { background: rgba(255,90,70,.24); }
#modeSwitch .ico { margin-right: 4px; }
body.military { --accent: #ff8a5c; --line2: rgba(255,150,110,.38); }
body.military #btnLaunch { background: linear-gradient(180deg, #ff6a4d, #c8321e); }
body.military .brand span { color: #ff5d4d; }
#strikeBox { display: flex; gap: 6px; }
.sbtn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; text-align: left; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px; }
.sbtn:hover { border-color: var(--accent); }
.sbtn .si { font-size: 18px; flex: none; }
.sbtn .st2 { min-width: 0; display: flex; flex-direction: column; }
.sbtn b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbtn small { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
#picker { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#pkPanel { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); padding: 12px 14px; pointer-events: auto; }
.pk-title { font-weight: 800; font-size: 15px; margin-bottom: 8px; }
#pkInfo { font-size: 13px; color: var(--dim); margin: 8px 2px 0; line-height: 1.5; min-height: 40px; }
#pkInfo b { color: #fff; font-family: var(--mono); }
#pkInfo .ok { color: var(--good); } #pkInfo .bad { color: #ff9aa4; }
#pkPanel .mbtns { margin-top: 8px; }
#pkHint { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(220,230,250,.7); white-space: nowrap; text-shadow: 0 1px 3px #000; }
#flashFx { position: fixed; inset: 0; z-index: 25; pointer-events: none; background: #fffaf0; opacity: 0; }
#flashFx.go { animation: flashGo 2.4s ease-out; }
#flashFx.emp { background: #cfe6ff; animation: flashGo 1.2s ease-out; }
@keyframes flashGo { 0% { opacity: .95; } 12% { opacity: .75; } 100% { opacity: 0; } }
#hud.glitch { animation: glitch 1.6s steps(12); }
@keyframes glitch { 0%, 100% { filter: none; transform: none; } 10% { filter: hue-rotate(90deg) contrast(2); transform: translateX(6px); } 25% { filter: invert(1); transform: translateX(-8px); } 40% { opacity: .2; } 55% { filter: saturate(4); transform: translateY(4px); } 70% { opacity: .6; } }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.wcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: left; }
.wcard.on { border-color: var(--accent); background: rgba(255,120,80,.12); }
.wcard .wi { font-size: 22px; } .wcard .wt { font-weight: 800; margin-top: 2px; }
.wcard .wd { font-size: 11.5px; color: var(--dim); line-height: 1.35; margin-top: 3px; }
.wcard .wk { font-size: 10.5px; font-family: var(--mono); color: #ffd98a; margin-top: 5px; }
@media (max-width: 560px) { .wcard .wd { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } }
.wgroup { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 12px 2px 6px; }
.wcard.exotic { background: linear-gradient(160deg, rgba(120,90,255,.14), rgba(40,220,255,.06)) , var(--panel2); border-color: rgba(150,120,255,.35); }
.wcard.exotic.on { border-color: var(--accent); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  #palette { width: 250px; }
  #inspector, #statsBar, #launchBox { width: 280px; }
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px), (max-height: 520px) and (max-width: 1000px) {
  #topbar { height: 48px; gap: 8px; padding: 0 8px; padding-left: max(8px, env(safe-area-inset-left)); }
  .brand { display: none; }
  #rocketName { width: 120px; font-size: 13px; padding: 6px 8px; }
  .topbtns { overflow-x: auto; }
  .tbtn { padding: 6px 8px; font-size: 12px; }
  /* dvh: on iPhones vh is measured with Safari's toolbars hidden, so vh-sized boxes overshoot */
  #palette, #inspector, #statsBar { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(118px + env(safe-area-inset-bottom)); height: 44vh; height: 44dvh; display: none; }
  #statsBar { height: auto; max-height: 44vh; max-height: 44dvh; overflow-y: auto; }
  #palette.mshow, #inspector.mshow { display: flex; }
  #statsBar.mshow { display: flex; }
  #launchBox { left: 8px; right: 8px; width: auto; bottom: calc(52px + env(safe-area-inset-bottom)); padding: 7px 8px; display: flex; gap: 8px; align-items: center; }
  #launchBox .plan { flex: none; }
  .seg { padding: 6px 6px; font-size: 11.5px; }
  #estimate { flex: 1; margin: 0; font-size: 11px; }
  #btnLaunch { width: auto; padding: 9px 14px; font-size: 14px; letter-spacing: .12em; }
  #mobileTabs { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 11; display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
  #mobileTabs button { flex: 1; background: none; border: none; padding: 7px 0; border-radius: 7px; font-weight: 700; font-size: 13px; color: var(--dim); }
  #mobileTabs button.on { background: rgba(79,195,255,.18); color: #fff; }
  #viewHint { display: none; }
  #estimate { white-space: normal; line-height: 1.2; }
  #estimate .el { display: block; font-size: 10px; letter-spacing: .02em; }
  #estimate .el::after { content: none; }
  #leftCol { top: 84px; width: 160px; gap: 6px; }
  #telemetry { font-size: 11px; padding: 6px 8px; }
  #fuelBox { padding: 1px 8px 4px; }
  #tape { width: 96px; top: 84px; bottom: 150px; }
  .tick { font-size: 9px; }
  #hudTop { padding: 8px 8px; }
  #metBox { min-width: 0; } #met { font-size: 17px; }
  #stageLbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hudBtns { min-width: 0; flex-wrap: nowrap; gap: 4px; }
  .hbtn { padding: 6px 8px; font-size: 12px; }
  #hudBottom { flex-direction: column; align-items: stretch; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  #warpBox, #ctrlBox { justify-content: center; }
  #keysHint { display: none; }
  #eventLog { top: 150px; }
}

/* narrow phones: top-bar buttons become icons */
@media (max-width: 560px) {
  .topbtns { gap: 3px; overflow: visible; }
  #rocketName { flex: 1 1 auto; width: 0; min-width: 52px; padding: 6px 6px; }
  .tbtn, .tbtn.icon { padding: 6px 0; width: 30px; text-align: center; font-size: 14px; line-height: 1.1; }
  .tbtn .txt { display: none; }
  .tbtn .ico { display: inline; }
  /* the mode switch collapses to one toggle button (tap = switch to the other mode) so Settings stays on screen */
  #modeSwitch .txt { display: none; }
  #modeSwitch .ico { margin: 0; font-size: 15px; }
  #modeSwitch button { padding: 4px 7px; }
  #modeSwitch button:not(.on) { display: none; }
  #topbar { gap: 6px; }
  /* military: target + warhead get their own full-width row above the estimate and LAUNCH */
  #launchBox { flex-wrap: wrap; row-gap: 6px; }
  #strikeBox { flex: 1 1 100%; min-width: 0; }
  .sbtn { padding: 4px 8px; gap: 6px; }
  .sbtn .si { font-size: 16px; }
  body.military #palette, body.military #inspector, body.military #statsBar { bottom: calc(166px + env(safe-area-inset-bottom)); }
}

/* phone portrait: the altitude gets its own row under the clock and buttons; events sit low */
@media (max-width: 820px) and (orientation: portrait) {
  #hudTop { flex-wrap: wrap; row-gap: 0; padding-top: max(8px, env(safe-area-inset-top)); }
  #metBox { order: 1; flex: 1 1 0; }
  #hudBtns { order: 2; }
  #altBox { order: 3; flex: 1 1 100%; margin-top: -4px; }
  #altVal { font-size: 36px; }
  #altSub { font-size: 12px; min-height: 16px; }
  #leftCol { top: calc(120px + max(8px, env(safe-area-inset-top))); width: 150px; }
  #telemetry { font-size: 10.5px; padding: 5px 7px; }
  .trow { padding: 1px 0; }
  #tape { top: calc(120px + max(8px, env(safe-area-inset-top))); bottom: calc(170px + env(safe-area-inset-bottom)); width: 70px; right: 8px; }
  #eventLog { top: auto; bottom: calc(150px + env(safe-area-inset-bottom)); width: min(360px, 92vw); }
  .ev { font-size: 13px; }
  .ev.space, .ev.orbit, .ev.escape, .ev.fail, .ev.apogee { font-size: 14.5px; }
  #bigMsg { top: 56%; }
  /* thumb stick bottom-left above the controls; events move up out of its way */
  #steerBox { right: auto; left: max(10px, env(safe-area-inset-left)); bottom: calc(108px + env(safe-area-inset-bottom)); gap: 6px; }
  #stick { width: 112px; height: 112px; }
  #eventLog { bottom: calc(262px + env(safe-area-inset-bottom)); }
  /* stress warning between the telemetry column and the altitude tape */
  #stressBox { position: absolute; top: calc(120px + max(8px, env(safe-area-inset-top))); left: 164px; right: 84px; width: auto; margin: 0; padding: 3px 6px 5px; }
  #stressBox .sl { font-size: 10px; letter-spacing: .04em; }
}

/* phone landscape: very little height — telemetry in two columns, controls in one row */
@media (max-height: 520px) and (orientation: landscape) {
  #hudTop { padding: 6px max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); }
  #altVal { font-size: 30px; }
  #altSub { font-size: 12px; min-height: 15px; }
  #leftCol { top: 60px; left: max(8px, env(safe-area-inset-left)); width: 292px; gap: 5px; }
  #telemetry { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; font-size: 10.5px; padding: 4px 8px; }
  .trow { padding: 1px 0; }
  .fuel { margin: 3px 0; }
  #tape { top: 60px; bottom: 56px; width: 84px; right: max(8px, env(safe-area-inset-right)); }
  #hudBottom { flex-direction: row; align-items: flex-end; padding: 0 max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  #eventLog { top: auto; bottom: 54px; width: min(380px, 46vw); }
  .ev { font-size: 12.5px; margin: 2px 0; }
  .ev.space, .ev.orbit, .ev.escape, .ev.fail, .ev.apogee { font-size: 14px; }
  #bigMsg { top: 44%; }
  /* stick on the right thumb, beside the altitude tape */
  #steerBox { right: calc(100px + env(safe-area-inset-right)); bottom: 52px; gap: 5px; }
  #stick { width: 100px; height: 100px; }
  #stickKnob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
}

/* phones: the flight profile takes the telemetry's place — tap it to swap between the two */
@media (max-width: 820px), (max-height: 520px) and (max-width: 1000px) {
  #hud.strike #profileBox, #hud.strike #leftCol { pointer-events: auto; cursor: pointer; }
  #hud.strike.pf-on #leftCol { display: none; }
  #hud.strike:not(.pf-on) #profileBox { display: none; }
  #pfSwap { display: inline; }
  #profileBox { left: 8px; bottom: auto; top: 84px; width: min(262px, 64vw); padding: 5px 7px 4px; }
  #profileCv { height: 108px; }
}
@media (max-width: 820px) and (orientation: portrait) {
  #profileBox { top: calc(120px + max(8px, env(safe-area-inset-top))); }
}
@media (max-height: 520px) and (orientation: landscape) {
  #profileBox { top: 74px; left: max(8px, env(safe-area-inset-left)); width: min(250px, 32vw); }
  #profileCv { height: 90px; }
}
/* phones: hiding the profile frees its spot entirely (the telemetry stays away too); 📈 brings it back */
@media (max-width: 820px), (max-height: 520px) and (max-width: 1000px) {
  #hud.strike.pf-hidden #leftCol { display: none; }
  #pfShow { left: 8px; bottom: auto; top: 84px; }
  #pfHide { width: 30px; height: 26px; font-size: 14px; }
}
@media (max-width: 820px) and (orientation: portrait) {
  #pfShow { top: calc(120px + max(8px, env(safe-area-inset-top))); }
}
@media (max-height: 520px) and (orientation: landscape) {
  #pfShow { top: 74px; left: max(8px, env(safe-area-inset-left)); }
}

/* Military: aim-point picker (top-down map of the target area) */
#aimWrap { position: relative; }
#aimCv { display: block; width: 100%; height: min(58vh, 520px); border-radius: 10px; border: 1px solid var(--line); touch-action: none; cursor: crosshair; background: #27301f; }
#aimZoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
#aimZoom .hbtn { width: 36px; height: 34px; padding: 0; font-size: 18px; }
#aimInfo { margin-top: 8px; font-size: 13.5px; line-height: 1.45; }
#aimInfo .aimPrev { color: #ffd98a; font-size: 12.5px; }
#aimInfo .aimMove { color: #ffe680; font-size: 12px; opacity: .9; }
.sbtn.aimb { flex: 0 0 auto; padding: 5px 9px; }
.sbtn.aimb.on { border-color: var(--hot); background: rgba(255,138,61,.14); }
@media (max-width: 560px) { #aimCv { height: min(52vh, 420px); } .sbtn.aimb { padding: 4px 7px; } }
@media (max-width: 820px) { #aimAgain .txt, #hResults .txt, #hReplay .txt { display: none; } }
#hReplay.busy { opacity: .6; }
/* narrow phones: the military camera switcher needs the room (photos still come from the replay window) */
@media (max-width: 420px) { #hud.strike #hPhoto { display: none; } }
/* instant replay window */
.rp-wrap { position: relative; margin: 6px auto 8px; border-radius: 8px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; max-width: 100%; }
.rp-wrap video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
#rpWait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; animation: stressBlink 0.8s infinite alternate; background: transparent; }
.rp-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.rp-speed { display: inline-flex; gap: 4px; }
.rp-bar .mbtn { padding: 6px 12px; min-width: 44px; }
.rp-speed .mbtn.on { border-color: #ffb454; color: #ffd98a; background: rgba(255, 170, 60, .18); }

/* ============ MISSIONS (Military) ============ */
#missionBar { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center;
  max-width: min(94vw, 900px); padding: 7px 12px; border-radius: 12px; background: rgba(12, 18, 32, .88); border: 1px solid rgba(255, 190, 90, .45); font-size: 12.5px; }
#missionBar .bad { color: #ff9aa4; font-weight: 700; }
#missionBar .mbBtns { display: flex; gap: 6px; }
#missionBar .hbtn { padding: 3px 9px; font-size: 12px; }
.sbtn.aimb#btnMissions.on { border-color: #ffc45a; background: rgba(255, 196, 90, .16); }
#btnLaunch { white-space: nowrap; }
.mgridm { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.mcard { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; text-align: left; }
.mcard.on { border-color: #ffc45a; }
.mcard .mci { font-size: 22px; } .mcard .mct { font-weight: 800; margin-top: 2px; }
.mcard .mcs, .mstars { color: #ffd34d; letter-spacing: 2px; font-size: 15px; }
.mcard .mcs span, .mstars span { color: #4b5367; }
.mstars.big { font-size: 38px; text-align: center; margin: 4px 0 6px; }
.mcard .mck { font-size: 11px; color: var(--dim); margin-top: 3px; }
.mbrief { margin: 8px 0; line-height: 1.45; }
.mrules { margin: 8px 0; display: grid; gap: 4px; }
.mstar { font-size: 13px; color: var(--dim); }
.mstar b { color: #4b5367; margin-right: 4px; }
.mstar.on { color: var(--text); } .mstar.on b { color: #ffd34d; }
.mstar.bad { color: #ff9aa4; }
/* space missions + unlocks */
.pmis { flex: none; padding: 0 9px; border-radius: 7px; font-size: 15px; background: transparent; border: 1px solid transparent; }
.pmis.on { border-color: #ffc45a; background: rgba(255, 196, 90, .16); }
.plan .seg { white-space: nowrap; }
/* booster landing */
#hud.landing #ctrlBox, #hud.landing #tape { display: none; }
#landBox { margin: 6px auto 0; width: 250px; max-width: 80vw; padding: 5px 9px 7px; border-radius: 10px; background: rgba(8, 20, 16, .62); border: 1px solid rgba(90, 230, 150, .45); text-shadow: 0 1px 3px #000; font-size: 12.5px; }
#landBox .ldRow { display: flex; justify-content: space-between; gap: 8px; margin: 1px 0; color: #cfe9dc; }
#landBox b { color: #fff; font-family: var(--mono); }
#ldCue { position: relative; margin-top: 5px; height: 20px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .12); }
#ldCueFill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #3fcf87, #ffd060 65%, #ff5a3c); }
#ldCueTxt { position: relative; display: block; text-align: center; line-height: 20px; font-weight: 800; letter-spacing: .06em; font-size: 12px; }
#ldCue.now { box-shadow: 0 0 0 2px #ffb454; animation: stressBlink .3s infinite alternate; }
#ldCue.late { box-shadow: 0 0 0 2px #ff5a3c; }
#burnBtn { pointer-events: auto; user-select: none; -webkit-user-select: none; touch-action: none; min-width: 150px; padding: 16px 22px; border-radius: 16px; font-size: 20px; font-weight: 900; letter-spacing: .08em; color: #fff; background: linear-gradient(180deg, rgba(255, 120, 50, .55), rgba(190, 50, 20, .6)); border: 2px solid rgba(255, 160, 90, .8); text-shadow: 0 1px 4px #000; }
#burnBtn.now { animation: burnPulse .35s infinite alternate; }
#burnBtn.on { background: linear-gradient(180deg, #ffb13d, #ff4d1f); border-color: #ffe0a0; box-shadow: 0 0 26px rgba(255, 140, 40, .8); transform: scale(.97); }
@keyframes burnPulse { from { box-shadow: 0 0 0 0 rgba(255, 150, 60, .9); } to { box-shadow: 0 0 0 10px rgba(255, 150, 60, 0); } }
@media (max-width: 820px) and (orientation: portrait) {
  #burnBtn { align-self: flex-end; min-width: 140px; padding: 14px 18px; }
  #hud.landing #leftCol { display: none; } /* (the landing panel says what matters) */
  #landBox { width: min(300px, 86vw); font-size: 13px; }
}
@media (max-height: 520px) and (orientation: landscape) { #hud.landing #leftCol { display: none; } }
@media (max-width: 560px) { .plan .seg { padding: 6px 5px; font-size: 11px; } .pmis { padding: 0 6px; font-size: 14px; } }
.card.locked { opacity: .55; filter: grayscale(.7); }
.card.locked .cs { color: #ffd98a; }
.chip.locked { opacity: .5; }
.wcard.locked { opacity: .6; filter: grayscale(.6); }
.unlocks { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 3px 12px; font-size: 12.5px; }
.unlocks .unlh { grid-column: 1 / -1; color: var(--dim); margin-bottom: 3px; }
.unl { color: var(--dim); } .unl b { color: #7c859a; margin-right: 4px; font-family: var(--mono); }
.unl.on { color: var(--text); } .unl.on b { color: #ffd34d; }
.smres { margin: 4px 0 12px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 196, 90, .35); background: rgba(255, 196, 90, .06); text-align: left; }
.smres .smh { font-weight: 700; } .smres .ok { color: #8ff0bd; } .smres .bad { color: #ff9aa4; }
.smres .mrules { margin: 6px 0 4px; }
.smres .smb { font-size: 12px; color: var(--dim); }
#missionBar .mbStars { color: #ffd34d; letter-spacing: 1px; } #missionBar .mbStars i { color: #4b5367; font-style: normal; }
.mbudget, .mdef { font-size: 12.5px; line-height: 1.45; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.mdef { border-color: rgba(255, 90, 70, .4); }
#missionHud { margin-top: 5px; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: rgba(10, 14, 26, .72); border: 1px solid rgba(255, 190, 90, .45); white-space: nowrap; }
#missionHud .ok { color: #8ff0bd; } #missionHud .bad { color: #ff9aa4; }
@media (max-width: 560px) {
  #missionBar { top: 50px; font-size: 11px; gap: 3px 9px; padding: 5px 8px; }
  #missionHud { font-size: 11px; white-space: normal; text-align: center; }
  .mgridm { grid-template-columns: 1fr 1fr; }
}