:root {
  --bg: #0b1620; --panel: #10202c; --ink: #dfeaf2; --muted: #5a6b78;
  --line: #1d2f3d; --accent: #7fd4ff; --good: #7fe6a0; --warn: #ffd24d; --bad: #ff6b5e;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; }
/* the typed-order box must stay selectable/editable */
#cmdText { -webkit-user-select: text; user-select: text; }
#app { position: fixed; inset: 0; }

#fp { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#fp:active { cursor: grabbing; }

/* top bar */
#topbar { position: absolute; top: 0; left: 0; right: 0; height: 52px; display: flex; align-items: center;
  gap: 10px; padding: 0 10px; background: linear-gradient(#0b1620cc, #0b162000); z-index: 5; }
#topbar .title { flex: 1; line-height: 1.15; overflow: hidden; }
#topbar .title b { font-size: 14px; }
.brief { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon { background: #16283400; border: none; color: var(--ink); font-size: 20px; padding: 6px 10px; border-radius: 8px; }
.chip { background: #18303f; border: 1px solid var(--line); color: var(--ink); padding: 7px 12px; border-radius: 8px; font-size: 12px; }
.chip.primary { background: #1d5f7a; border-color: #2a7fa0; }

/* HUD */
#hud { position: absolute; top: 56px; left: 8px; display: grid; grid-template-columns: repeat(2, auto);
  gap: 4px; z-index: 4; }
.cell { background: #0a161eb0; border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; min-width: 74px;
  text-align: left; color: var(--ink); font: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
.cell:hover, .cell:focus-visible { border-color: var(--accent); background: #0c1d28; outline: none; }
.cell:active { transform: scale(.97); }
.cell .lbl { display: block; font-size: 8.5px; letter-spacing: .08em; color: var(--muted); }
.cell .lbl .hint { font-style: normal; color: var(--accent); opacity: .55; }
.cell .val { font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; }

/* HUD metric explainer */
#hudInfo, #cmdHelp { position: absolute; inset: 0; background: #04090dcc; z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.hi-card { width: min(92%, 380px); max-height: 80%; overflow-y: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 20px; box-shadow: 0 20px 60px #000a; }
.hi-head { display: flex; justify-content: space-between; align-items: center; }
.hi-head h2 { margin: 0; font-size: 18px; }
.hi-now { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); margin: 4px 0 12px; }
.hi-body { font-size: 13px; line-height: 1.5; }
.hi-body h4 { margin: 12px 0 3px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.hi-body p { margin: 0; color: var(--ink); }
.hi-body .target { color: var(--good); }
.hi-body .tip { color: var(--warn); }

/* minimap */
#mini { position: absolute; top: 56px; right: 8px; width: 132px; height: 132px;
  border: 1px solid var(--line); border-radius: 10px; z-index: 4; background: #0c2230; }

#voiceEcho { position: absolute; top: 200px; left: 50%; transform: translateX(-50%);
  background: #0a161ed8; border: 1px solid var(--good); color: #eaf6ff; padding: 8px 16px;
  border-radius: 20px; font-size: 16px; z-index: 6; }

/* slip-off "Let Go" button — prominent, centred above the controls */
#btnSlip { position: absolute; left: 50%; bottom: 175px; transform: translateX(-50%);
  background: #1d5f3a; border: 1px solid var(--good); color: #eafff0; font-size: 15px; font-weight: 700;
  letter-spacing: .03em; padding: 12px 22px; border-radius: 24px; z-index: 6;
  box-shadow: 0 6px 24px #0007; }
#btnSlip:active { transform: translateX(-50%) scale(.96); }

/* live speech caption, centred on screen while holding to talk */
#voiceCaption { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  max-width: 82%; text-align: center; font-size: 22px; font-weight: 600; line-height: 1.35;
  color: #eaf6ff; background: rgba(8, 16, 22, 0.66); border: 1px solid var(--accent);
  padding: 14px 22px; border-radius: 16px; z-index: 6; pointer-events: none;
  box-shadow: 0 8px 30px #0008; }

/* controls */
#controls { position: absolute; left: 0; right: 0; bottom: 84px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 8px; padding: 0 10px; z-index: 5; }
.ctl { background: #0a161ec4; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.ctl-top { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: var(--muted); letter-spacing: .06em; margin-bottom: 4px; }
.learn { background: none; border: none; padding: 0; font: inherit; font-size: 9px; letter-spacing: .06em;
  color: var(--muted); cursor: pointer; }
.learn .hint { font-style: normal; color: var(--accent); opacity: .6; }
.learn:hover, .learn:focus-visible { color: var(--ink); outline: none; }
.ctl-top .echo, .echo { color: var(--accent); font-weight: 700; }
.ctl-bot { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: var(--muted);
  margin-top: 3px; min-height: 24px; }
.rudderbox, .thrusterbox { flex: 1; }
.rudderbox input, .thrusterbox input { width: 100%; }
.throttlebox { display: flex; flex-direction: column; align-items: center; width: 84px; }
/* engine: stack "ENGINE ⓘ" over the current-state echo instead of side by side */
.throttlebox .ctl-top { flex-direction: column; align-items: center; gap: 2px; }
.throttlebox .echo { text-align: center; }
.mini-btn { background: #16283f; border: 1px solid var(--line); color: var(--ink); font-size: 10px;
  border-radius: 6px; padding: 3px 6px; }

/* vertical throttle */
input[type=range][orient=vertical] { writing-mode: vertical-lr; direction: rtl; width: 30px; height: 120px; }

/* range styling */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: #21323f; border-radius: 4px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px;
  background: var(--accent); border-radius: 50%; border: 2px solid #0b1620; }
input[type=range][orient=vertical]::-webkit-slider-runnable-track { width: 6px; }
/* vertical track's thickness runs horizontally, so re-centre the thumb on that axis
   and clear the -10px offset inherited from the horizontal thumb rule */
input[type=range][orient=vertical]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: 0; margin-left: -12px; }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; background: var(--accent); border: none; border-radius: 50%; }

/* action bar */
#actionbar { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; gap: 6px; padding: 0 10px; z-index: 5; }
.act { background: #16283f; border: 1px solid var(--line); color: var(--ink); padding: 9px 10px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.act.small { padding: 9px 12px; }
.act.on { background: #1d5f7a; border-color: var(--good); }
#btnMic { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* hold-to-talk */
.act.rec { background: #5a1d1d; border-color: var(--bad); }
.act.disabled { opacity: .4; }
.cmd { flex: 1; min-width: 0; background: #0a161e; border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 9px 10px; font-size: 12px; }

#status { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: var(--muted); z-index: 5; }

/* result card */
#result { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(86%, 360px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; z-index: 8;
  box-shadow: 0 20px 60px #000a; }
#result h2 { margin: 0 0 6px; font-size: 20px; }
#result .score { font-size: 13px; color: var(--muted); margin: 8px 0; }
#result .score b { font-size: 30px; color: var(--ink); }
#result .detail { font-size: 12px; color: var(--muted); }
#result .row { display: flex; gap: 8px; margin-top: 12px; }

/* panel */
#panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(88%, 340px); background: var(--panel);
  border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform .22s ease;
  z-index: 9; display: flex; flex-direction: column; }
#panel.open { transform: translateX(0); }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 8px; border-bottom: 1px solid var(--line); }
.panel-body { overflow-y: auto; padding: 12px 14px 30px; }
.panel-body section { margin-bottom: 18px; }
.panel-body h3 { font-size: 12px; letter-spacing: .05em; color: var(--accent); margin: 0 0 8px; text-transform: uppercase; }
.panel-body label { display: block; font-size: 12px; color: var(--ink); margin-bottom: 12px; }
.panel-body .v { float: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.panel-body select, .panel-body input[type=range] { width: 100%; margin-top: 5px; }
.panel-body select { background: #0a161e; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.row { display: flex; gap: 8px; }
.muted { color: var(--muted); font-size: 11px; }
.fineprint { font-size: 10px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 10px; }

.run { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.run .rl { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run .rs { font-size: 12px; color: var(--good); font-weight: 700; width: 26px; text-align: right; }
.rbtns { display: flex; gap: 6px; flex-basis: 100%; }
.rbtns button { flex: 1; background: #16283f; border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 5px 4px; font-size: 11px; }

.hidden { display: none !important; }

@media (max-width: 380px) {
  .cell { min-width: 64px; }
  #mini { width: 108px; height: 108px; }
}