:root {
  --bg-dark: #07090e;
  --panel-bg: rgba(14, 20, 32, 0.75);
  --panel-border: rgba(0, 243, 255, 0.2);
  --accent-cyan: #00f3ff;
  --accent-green: #00ff99;
  --accent-amber: #ffb703;
  --accent-red: #ff0055;
  --text-main: #f1f5f9;
  --text-dim: #94a3b8;
  --font-display: 'Orbitron', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-display);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#canvas3d {
  width: 100%;
  height: 100%;
  display: block;
}

#hudCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* UI Overlay Container */
.ui-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
}

/* Top Header Bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  padding: 0.6rem 1.2rem;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
}

.brand-icon {
  font-size: 1.5rem;
}

.brand-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #fff, var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-sub {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.mission-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  padding: 0.6rem 1.2rem;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mission-status {
  color: var(--accent-amber);
  font-weight: 700;
}

/* Flight Controls Bar */
.controls-hint-bar {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  padding: 0.6rem 1.2rem;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  display: flex;
  gap: 1.5rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  pointer-events: auto;
}

.key-badge {
  background: rgba(0, 243, 255, 0.15);
  border: 1px solid var(--accent-cyan);
  color: #fff;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Bottom Controls & Mode Bar */
.bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: auto;
}

.mode-selector {
  display: flex;
  gap: 0.5rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  padding: 0.4rem;
  border-radius: 12px;
  backdrop-filter: blur(12px);
}

.mode-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.mode-btn:hover {
  background: rgba(0, 243, 255, 0.1);
  color: #fff;
}

.mode-btn.active {
  background: linear-gradient(135deg, rgba(0, 243, 255, 0.25), rgba(0, 255, 153, 0.2));
  border-color: var(--accent-cyan);
  color: #fff;
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
}

.action-btn {
  background: linear-gradient(135deg, rgba(255, 183, 3, 0.2), rgba(255, 0, 85, 0.2));
  border: 1px solid var(--accent-amber);
  color: #fff;
  padding: 0.6rem 1.25rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 15px rgba(255, 183, 3, 0.2);
}

.action-btn:hover {
  background: linear-gradient(135deg, rgba(255, 183, 3, 0.4), rgba(255, 0, 85, 0.4));
  transform: translateY(-2px);
}

/* Touch On-Screen Joysticks */
.touch-joystick-container {
  display: none;
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  width: 140px;
  height: 140px;
  border: 2px solid var(--panel-border);
  border-radius: 50%;
  background: rgba(14, 20, 32, 0.5);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .controls-hint-bar { display: none; }
  .touch-joystick-container { display: block; }
}

/* Clean-sheet CNY corridor interface */
:root {
  --ink: #f3f0e8; --muted: #9ba4a0; --glass: rgba(17, 22, 22, .82);
  --line: rgba(229, 235, 228, .16); --red: #ef3d32; --lime: #c9ef6c;
  --dark: #101416; --mono: "DM Mono", ui-monospace, monospace;
  --sans: "Manrope", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body, #sim { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--dark); color: var(--ink); font-family: var(--sans); }
button { font: inherit; }
#scene { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, transparent 43%, rgba(5,8,8,.28) 100%); }
.is-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.briefing { position: fixed; inset: 0 auto 0 0; width: min(560px, 100%); padding: clamp(30px, 7vh, 76px) clamp(28px, 5vw, 68px); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(90deg, rgba(10,15,16,.97) 0%, rgba(10,15,16,.9) 76%, transparent 100%); transition: opacity .5s ease, visibility .5s ease; z-index: 20; }
.briefing__eyebrow { color: var(--lime); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; display:flex; align-items:center; gap:10px; }
.briefing__eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px var(--lime); }
.briefing h1 { font-size: clamp(58px, 8vw, 96px); line-height: .88; letter-spacing: -.065em; margin: 28px 0 22px; }
.briefing__lede { max-width: 430px; color: #c8cfcb; font-size: 16px; line-height: 1.65; margin: 0 0 28px; }
.route-card { border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.04); padding: 17px; display: grid; gap: 15px; max-width: 440px; }
.route-card div { display: grid; gap: 3px; }
.route-card small, .phase small, .telemetry small { font: 10px/1 var(--mono); letter-spacing: .13em; color: var(--muted); }
.route-card strong { font-size: 14px; }
.route-card span { color: var(--muted); font-size: 11px; }
.route-card i { display: block; width: 1px; height: 16px; background: var(--red); margin-left: 4px; }
.briefing__facts { display: flex; gap: 20px; color: var(--muted); font: 10px/1 var(--mono); margin: 22px 0; text-transform: uppercase; }
.briefing__facts b { color: var(--ink); font-weight: 500; }
.primary-button { width: min(440px, 100%); border: 0; background: var(--red); color: white; border-radius: 3px; padding: 17px 20px; font-weight: 700; cursor: pointer; display:flex; justify-content:space-between; transition: transform .2s, background .2s; }
.primary-button:hover { transform: translateY(-2px); background: #ff4b40; }
.briefing__note { color: #6f7a76; font: 9px/1.5 var(--mono); margin-top: 16px; }
.cockpit-ui { transition: opacity .4s ease, visibility .4s ease; }
.topbar { position: fixed; inset: 18px 22px auto; height: 53px; display:flex; align-items:center; justify-content:space-between; z-index:10; }
.wordmark { display:flex; align-items:center; gap:10px; }
.wordmark__mark { display:grid; place-items:center; width:39px; height:39px; background:var(--red); font-weight:700; transform:skew(-8deg); }
.wordmark div, .phase { display:grid; gap:3px; }
.wordmark strong { font: 600 11px/1 var(--mono); letter-spacing:.08em; }
.wordmark small { color:var(--muted); font: 8px/1 var(--mono); letter-spacing:.12em; }
.phase { position:absolute; left:50%; transform:translateX(-50%); text-align:center; }
.phase strong { font:500 12px/1 var(--mono); letter-spacing:.05em; }
.icon-button { width:38px; height:38px; border:1px solid var(--line); color:var(--ink); background:var(--glass); border-radius:3px; cursor:pointer; backdrop-filter:blur(12px); }
.telemetry, .nav-card { position:fixed; background:var(--glass); border:1px solid var(--line); border-radius:4px; backdrop-filter:blur(14px); z-index:10; }
.telemetry { left:22px; top:92px; width:192px; padding:14px; }
.telemetry__primary { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.telemetry__primary div { display:grid; grid-template-columns:auto 1fr; align-items:end; }
.telemetry__primary small { grid-column:1/-1; }
.telemetry__primary strong { font:500 31px/.95 var(--mono); letter-spacing:-.06em; }
.telemetry__primary span { font:8px/1 var(--mono); color:var(--muted); margin:0 0 3px 4px; }
.instrument-row { display:flex; justify-content:space-between; padding:8px 0 0; font:9px/1.2 var(--mono); }
.instrument-row span, .battery span { color:var(--muted); }
.instrument-row b { font-weight:500; }
.battery { margin-top:13px; }
.battery div { display:flex; justify-content:space-between; font:9px/1 var(--mono); }
.battery i { display:block; height:3px; background:rgba(255,255,255,.12); margin-top:8px; }
.battery em { display:block; width:100%; height:100%; background:var(--lime); transition:width .2s; }
.nav-card { right:22px; bottom:52px; width:282px; overflow:hidden; }
.nav-card__top, .nav-card__footer { display:flex; justify-content:space-between; align-items:center; padding:11px 12px; font:9px/1 var(--mono); }
.nav-card__top span { color:var(--lime); }
.nav-card__top b { font-weight:500; }
#mapCanvas { display:block; width:100%; height:150px; background:#18201e; }
.nav-card__footer { border-top:1px solid var(--line); color:var(--muted); }
.reticle { position:fixed; left:50%; top:49%; transform:translate(-50%,-50%); display:flex; gap:8px; align-items:center; pointer-events:none; }
.reticle i { width:34px; height:1px; background:rgba(255,255,255,.7); }
.reticle span { width:8px; height:8px; border:1px solid var(--lime); border-radius:50%; }
.guidance { position:fixed; left:50%; bottom:91px; transform:translateX(-50%); font:10px/1 var(--mono); background:rgba(12,16,16,.72); border:1px solid var(--line); padding:10px 14px; border-radius:3px; white-space:nowrap; }
kbd { min-width:23px; padding:4px 6px; display:inline-grid; place-items:center; color:var(--ink); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:3px; font:9px/1 var(--mono); box-shadow:0 1px 0 rgba(255,255,255,.18) inset; }
.controls { position:fixed; left:22px; bottom:22px; display:flex; gap:15px; }
.controls div { display:flex; gap:4px; align-items:center; }
.controls span { color:var(--muted); font:8px/1 var(--mono); margin-left:3px; }
.attribution { position:fixed; right:23px; bottom:23px; color:rgba(255,255,255,.5); font:8px/1 var(--mono); }
.attribution a { color:inherit; }
.mission-complete { position:fixed; inset:0; z-index:30; display:grid; place-content:center; text-align:center; background:rgba(8,12,12,.82); backdrop-filter:blur(16px); transition:opacity .4s, visibility .4s; }
.mission-complete__check { margin:auto; display:grid; place-items:center; width:55px; height:55px; border:1px solid var(--lime); color:var(--lime); border-radius:50%; font-size:25px; }
.mission-complete small { margin:21px 0 7px; color:var(--lime); font:10px/1 var(--mono); letter-spacing:.15em; }
.mission-complete h2 { font-size:clamp(44px,7vw,76px); letter-spacing:-.055em; margin:0; }
.mission-complete p { color:var(--muted); margin:13px 0 28px; }
.mission-complete .primary-button { margin:auto; width:260px; }
.touch-controls { display:none; position:fixed; inset:auto 18px 24px; justify-content:space-between; align-items:end; z-index:12; }
.touch-stick { width:116px; height:116px; border:1px solid var(--line); background:rgba(10,15,15,.35); border-radius:50%; touch-action:none; display:grid; place-items:center; }
.touch-stick span { width:42px; height:42px; border-radius:50%; background:rgba(239,61,50,.75); border:1px solid rgba(255,255,255,.25); }
.touch-actions { display:grid; grid-template-columns:52px 52px 52px; gap:5px; }
.touch-actions button { height:52px; background:var(--glass); color:var(--ink); border:1px solid var(--line); border-radius:50%; }
@media (max-width: 780px), (pointer: coarse) {
  .controls { display:none; } .touch-controls { display:flex; } .topbar { inset:12px 13px auto; }
  .phase { left:auto; right:48px; transform:none; text-align:right; } .wordmark div { display:none; } .phase small { display:none; }
  .telemetry { top:68px; left:12px; width:165px; padding:11px; } .telemetry__primary strong { font-size:25px; }
  .instrument-row { display:none; } .nav-card { right:12px; bottom:155px; width:190px; } #mapCanvas { height:105px; }
  .nav-card__footer { display:none; } .guidance { bottom:154px; max-width:calc(100% - 28px); overflow:hidden; text-overflow:ellipsis; }
  .attribution { display:none; } .reticle { top:42%; }
}
@media (max-height: 650px) {
  .briefing { justify-content:flex-start; overflow-y:auto; padding-top:25px; } .briefing h1 { font-size:55px; margin:17px 0; }
  .route-card { padding:11px 15px; } .briefing__facts { margin:14px 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration:.01ms !important; } }