/* Game styles, built on the design tokens in tokens.css.
   Menus: night-sky ink panels with chamfered corners, signal cyan for focus and
   selection, afterburner orange for the "go" buttons. HUD: phosphor green in
   B612 Mono. Clip-path cuts outlines, so focus is shown with inset shadows. */

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000;
  font: var(--text-body); color: var(--text-primary); -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
#game canvas { display: block; }
button { font-family: inherit; }

.icon { font-style: normal; line-height: 1; }

/* Key caps, for key hints */
kbd {
  display: inline-flex; align-items: center; justify-content: center; height: 22px; min-width: 22px; padding: 0 6px;
  border-radius: var(--radius-1); background: var(--ink-700); color: var(--ink-50);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 1px var(--line-strong);
  font: 700 11px/1 var(--font-hud); text-transform: uppercase;
}

/* ---------- Screens ---------- */
.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-6);
  background: rgba(4, 7, 11, 0.6); backdrop-filter: blur(4px);
  animation: screen-in var(--dur-base) var(--ease-out);
}
.overlay.clear { background: rgba(4, 7, 11, 0.3); backdrop-filter: none; }
@keyframes screen-in { from { opacity: 0; } }

/* A chamfered panel with a hairline edge and a glowing cyan tick on top */
.panel {
  position: relative; width: min(600px, 100%); max-height: 92vh; overflow-y: auto;
  padding: var(--space-7) var(--space-8) var(--space-7);
  background: var(--surface-panel); backdrop-filter: var(--blur-panel);
  clip-path: var(--clip-chamfer); box-shadow: inset 0 0 0 1px var(--line-subtle);
  text-align: left;
  scrollbar-width: thin; scrollbar-color: var(--ink-500) transparent;
}
.panel::before {
  content: ''; position: absolute; top: 0; left: var(--chamfer); width: 72px; height: 2px;
  background: var(--cyan-500); box-shadow: 0 0 10px rgba(34, 195, 238, 0.7);
}
.panel.wide { width: min(900px, 100%); }

.eyebrow {
  margin: 0 0 var(--space-3); font: 600 12px/1 var(--font-ui); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cyan-400);
}
.panel h2 {
  margin: 0 0 var(--space-5); font: 700 var(--fs-h1)/1.1 var(--font-display);
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-50);
}
.panel h3 {
  margin: var(--space-6) 0 var(--space-3); font: 600 12px/1.2 var(--font-ui);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary);
}
.about { margin: var(--space-3) 0 0; min-height: 1.4em; font: 400 16px/1.5 var(--font-ui); color: var(--text-secondary); }
.note { margin: var(--space-2) 0 0; font: 400 14px/1.4 var(--font-ui); color: var(--text-tertiary); }
.note.warn { color: var(--caution-500); }
.tagline { margin: 0 0 var(--space-6); font: 400 17px/1.5 var(--font-ui); color: var(--text-secondary); }

/* ---------- Buttons ---------- */
.big-button, .menu-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; white-space: nowrap; clip-path: var(--clip-chamfer-sm);
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.big-button:focus, .menu-button:focus { outline: none; }
.big-button:active, .menu-button:active { transform: translateY(1px) scale(0.98); }

/* The "go" button: afterburner orange */
.big-button { height: var(--control-h-lg); padding: 0 28px; font-size: 21px; background: var(--burn-500); color: var(--text-on-accent); }
.big-button:hover, .big-button:focus-visible { background: var(--burn-400); }
.big-button:focus-visible { box-shadow: inset 0 0 0 2px var(--ink-50); }

/* DONE / GOT IT: the primary (cyan) button, bottom right of its panel */
.big-button.done { display: flex; margin: var(--space-7) 0 0 auto; background: var(--cyan-500); }
.big-button.done:hover, .big-button.done:focus-visible { background: var(--cyan-400); }

/* Everything else: secondary */
.menu-button { height: var(--control-h-md); padding: 0 20px; font-size: 17px; background: var(--ink-700); color: var(--text-primary); }
.menu-button:hover, .menu-button:focus-visible { background: var(--ink-600); }
.menu-button:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan-500); }
.menu-button.danger { background: var(--warning-600); color: var(--ink-50); }
.menu-button.danger:hover, .menu-button.danger:focus-visible { background: var(--warning-500); }

/* A panel's buttons: one row, the main one on the right */
.button-column {
  display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start; align-items: center;
  gap: var(--space-4); margin-top: var(--space-7);
}

/* ---------- Main menu and pause: a menu stack on the left ---------- */
.menu-stage {
  display: block; padding: 0; backdrop-filter: none;
  background: linear-gradient(90deg, rgba(4, 7, 11, 0.92) 0%, rgba(4, 7, 11, 0.6) 34%, rgba(4, 7, 11, 0) 60%);
}
.menu-stage.pause { background: var(--bg-scrim); backdrop-filter: blur(6px); }
.menu-column {
  position: absolute; left: clamp(24px, 6vw, 96px); top: clamp(24px, 9vh, 96px); bottom: 72px;
  width: min(500px, calc(100% - 48px)); overflow-y: auto; scrollbar-width: none;
}
.wordmark {
  margin: 0; font: 800 clamp(28px, 2.6vw, 42px)/1 var(--font-display);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-50); white-space: nowrap;
}
.pilot-line {
  margin: var(--space-4) 0 var(--space-7); font: 500 13px/1.3 var(--font-hud);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary);
}
.mode-about { margin: var(--space-4) 0 var(--space-6); min-height: 2.9em; font: 400 15px/1.45 var(--font-ui); color: var(--text-secondary); }
.pause-title { margin: 0 0 var(--space-7); font: 800 64px/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }

.menu-stack { display: flex; flex-direction: column; align-items: stretch; width: min(460px, 100%); }
.menu-stack .big-button { margin-bottom: var(--space-5); }

/* Menu items: a chevron cursor and the description show on the focused one */
.menu-stack .menu-button {
  display: block; position: relative; height: auto; padding: 10px 20px 10px 40px; text-align: left;
  background: transparent; color: var(--text-secondary); font-size: 28px; letter-spacing: 0.04em; line-height: 1.05;
}
.menu-stack .menu-button::before {
  content: ''; position: absolute; left: 14px; top: 21px; width: 9px; height: 9px;
  border: solid var(--cyan-400); border-width: 2.5px 2.5px 0 0; transform: translateX(-6px) rotate(45deg);
  opacity: 0; transition: all var(--dur-fast) var(--ease-out);
}
.menu-stack .menu-button:hover, .menu-stack .menu-button:focus-visible {
  background: linear-gradient(90deg, rgba(34, 195, 238, 0.18), rgba(34, 195, 238, 0) 85%);
  color: var(--ink-50); box-shadow: none;
}
.menu-stack .menu-button:hover::before, .menu-stack .menu-button:focus-visible::before { opacity: 1; transform: rotate(45deg); }
.menu-stack .menu-button[data-desc]:hover::after, .menu-stack .menu-button[data-desc]:focus-visible::after {
  content: attr(data-desc); display: block; margin-top: 4px;
  font: 400 14px/1.35 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-tertiary);
}

/* Mode toggle (and the plane tabs): underlined tabs */
.mode-toggle { width: min(460px, 100%); }
.mode-toggle, .tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line-subtle); }
.mode-toggle .option, .tab {
  position: relative; height: auto; padding: 12px 0 10px; background: none; border: 0; clip-path: none; box-shadow: none;
  font: 700 18px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary); cursor: pointer;
}
.mode-toggle .option::after, .tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--cyan-500); box-shadow: 0 0 10px rgba(34, 195, 238, 0.6);
  transform: scaleX(0); transition: transform var(--dur-base) var(--ease-out);
}
.mode-toggle .option.selected, .tab.selected { color: var(--ink-50); background: none; box-shadow: none; }
.mode-toggle .option.selected::after, .tab.selected::after { transform: scaleX(1); }
.mode-toggle .option:hover, .tab:hover { color: var(--ink-100); background: none; }
.mode-toggle .option:focus-visible, .tab:focus-visible { outline: none; color: var(--cyan-300); background: none; box-shadow: none; }

/* Progress, top right of the main menu */
.progress-panel { position: absolute; right: clamp(24px, 3vw, 48px); top: clamp(24px, 5vh, 48px); width: 320px; padding: var(--space-6); }
.star-total { display: flex; align-items: baseline; gap: 10px; color: var(--burn-500); }
.star-total .icon { font-size: 26px; align-self: center; }
.star-count { font: 800 48px/1 var(--font-display); color: var(--ink-50); }
.star-unit { font: 600 12px/1 var(--font-ui); letter-spacing: 0.16em; color: var(--text-tertiary); }
.next-unlock { margin-top: var(--space-5); }
.bar-label {
  display: flex; justify-content: space-between; margin-bottom: 6px;
  font: 600 11px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary);
}
.bar-label span + span { font: 400 12px/1 var(--font-hud); letter-spacing: 0; color: var(--ink-50); }
.bar { position: relative; height: 6px; background: var(--ink-700); overflow: hidden; }
.bar span {
  position: absolute; inset: 0 auto 0 0; background: var(--burn-500); box-shadow: 0 0 10px var(--burn-500);
  transition: width var(--dur-slow) var(--ease-out);
}

.footer-hints, .hud-hint {
  position: absolute; right: clamp(24px, 3vw, 48px); bottom: 28px; display: flex; align-items: center; gap: 8px;
  font: 600 13px/1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary);
}
.footer-hints kbd:not(:first-child), .hud-hint kbd:not(:first-child) { margin-left: 18px; }

/* ---------- Choices ---------- */
.option-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-3); }
.option {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  border: 0; cursor: pointer; clip-path: var(--clip-chamfer-sm);
  background: var(--ink-800); box-shadow: inset 0 0 0 1px var(--line-default); color: var(--text-secondary);
  font: 600 15px/1 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.option:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink-50); }
.option.selected { background: var(--surface-selected); box-shadow: inset 0 0 0 1px var(--cyan-500); color: var(--ink-50); }
.option:focus { outline: none; }
.option:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan-400), 0 0 0 0; color: var(--ink-50); background: var(--surface-selected); }
.option:disabled { opacity: 0.4; cursor: default; }
.soon-badge {
  display: inline-flex; align-items: center; height: 18px; margin-left: 8px; padding: 0 6px;
  box-shadow: inset 0 0 0 1px currentColor; color: var(--ink-200);
  font: 700 10px/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase;
}

/* Settings rows: label and note on the left, the control on the right */
.setting {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-6); row-gap: 2px;
  padding: var(--space-4) var(--space-5); box-shadow: inset 0 -1px 0 var(--line-subtle);
}
.setting:hover { background: var(--surface-hover); }
.setting > h3 { grid-column: 1; margin: 0; font: 600 16px/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.setting > .note { grid-column: 1; margin: 0; font-size: 13px; }
.setting > :not(h3):not(.note) { grid-column: 2; }
.setting:has(#reset-button) { display: block; box-shadow: none; padding-top: var(--space-6); }
.setting:has(#reset-button):hover { background: none; }
.volume { width: 240px; accent-color: var(--cyan-500); cursor: pointer; }
.volume-value { margin-left: 6px; font: 400 14px/1 var(--font-hud); color: var(--cyan-400); }
.reset-confirm p { margin: 0 0 var(--space-4); font: 400 15px/1.45 var(--font-ui); color: var(--text-secondary); }
.reset-confirm { flex-basis: 100%; }
.reset-confirm .menu-button { margin: 0 var(--space-3) 0 0; }

.war-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 var(--space-6); }
.war-grid .setting { display: block; padding: var(--space-3) 0 var(--space-4); }
.war-grid .setting:hover { background: none; }
.war-grid .setting > h3 { margin-bottom: var(--space-3); font: 600 12px/1.2 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); }
.war-grid .option { height: 34px; padding: 0 12px; }

/* ---------- Planes ---------- */
.tabs { margin-bottom: var(--space-6); }
.plane-body { display: flex; gap: var(--space-7); align-items: flex-start; }
.plane-list { display: flex; flex-direction: column; min-width: 260px; }
.plane-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  border: 0; cursor: pointer; text-align: left; background: transparent; box-shadow: inset 0 -1px 0 var(--line-subtle);
  font: 700 19px/1.1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary);
}
.plane-card:hover, .plane-card:focus-visible { outline: none; color: var(--ink-50); background: var(--surface-hover); }
.plane-card.selected { color: var(--ink-50); background: linear-gradient(90deg, rgba(34, 195, 238, 0.18), rgba(34, 195, 238, 0) 85%); }
.plane-card .icon { color: var(--text-tertiary); font-size: 16px; }
.plane-detail { flex: 1; }
.plane-detail h3 { margin: var(--space-4) 0 0; font: 700 26px/1.1 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-50); }
.plane-preview {
  display: block; width: 100%; height: 230px; clip-path: var(--clip-chamfer);
  background: radial-gradient(ellipse at center, var(--ink-700), var(--ink-900) 75%);
  box-shadow: inset 0 0 0 1px var(--line-subtle);
}
.stats { margin-top: var(--space-5); }
.stat { display: flex; align-items: center; gap: var(--space-5); margin: 8px 0; }
.stat-label { width: 110px; font: 600 11px/1 var(--font-ui); letter-spacing: 0.14em; color: var(--text-tertiary); }
.stat-bar { display: flex; gap: 3px; }
.stat-bar i { width: 30px; height: 8px; transform: skewX(-15deg); background: var(--ink-600); }
.stat-bar i.on { background: var(--cyan-500); box-shadow: 0 0 6px rgba(34, 195, 238, 0.5); }
.plane-status { display: flex; align-items: center; gap: 8px; min-height: 1.4em; margin: var(--space-5) 0 0; font: 600 14px/1.3 var(--font-ui); letter-spacing: 0.06em; }
.plane-status.ok { color: var(--ok-500); }
.plane-status.locked { color: var(--caution-500); }
.soon-box { padding: 60px 20px; font: 400 17px/1.5 var(--font-ui); color: var(--text-tertiary); text-align: center; }

/* ---------- How to play ---------- */
.help-table { width: 100%; margin: 0 0 var(--space-6); border-collapse: collapse; font: 400 15px/1.3 var(--font-ui); }
.help-table td { padding: 8px 12px; box-shadow: inset 0 -1px 0 var(--line-subtle); color: var(--text-secondary); }
.help-table td:last-child { font: 400 13px/1.3 var(--font-hud); color: var(--ink-50); text-align: right; }
.help-table tr.soon { opacity: 0.45; }
.tips { margin: 0; font: 400 15px/1.6 var(--font-ui); color: var(--text-secondary); }
.tips p { margin: 0 0 var(--space-4); }
.tips b { font-weight: 600; color: var(--ink-50); }
.credits ul { padding-left: 18px; font: 400 13px/1.5 var(--font-ui); color: var(--text-tertiary); word-break: break-word; }

/* ---------- Briefings and story ---------- */
.goals { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-3); font: 500 15px/1.3 var(--font-ui); }
.goals li { display: flex; gap: var(--space-4); padding: 9px 0; box-shadow: inset 0 -1px 0 var(--line-subtle); }
.goals .star { flex: 0 0 48px; color: var(--burn-500); letter-spacing: 0.08em; }
.name-input {
  width: 100%; margin: var(--space-5) 0 var(--space-2); padding: 12px 16px; border: 0;
  clip-path: var(--clip-chamfer-sm); background: var(--ink-1000); box-shadow: inset 0 0 0 1px var(--cyan-500);
  font: 700 28px/1 var(--font-display); letter-spacing: 0.04em; color: var(--ink-50);
}
.name-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cyan-400), inset 0 0 18px rgba(34, 195, 238, 0.2); }
.story-text p { margin: var(--space-4) 0; font: 400 16px/1.6 var(--font-ui); color: var(--text-secondary); }
.story-ending { font: 500 16px/1.55 var(--font-ui); color: var(--burn-400); }
#story-chapters .option { min-width: 44px; justify-content: center; }

/* ---------- End of flight ---------- */
.crash-title {
  font: 800 56px/1 var(--font-display) !important; letter-spacing: 0.06em !important;
  color: var(--ink-50) !important; text-shadow: 0 0 24px var(--warning-500);
}
.crash-title.success { text-shadow: 0 0 24px var(--ok-500); }
.crash-score { margin-bottom: var(--space-4); font: 400 15px/1.6 var(--font-hud); color: var(--text-secondary); }
.crash-score p { margin: 0; }
.crash-score .stars { margin: var(--space-2) 0; font: 400 40px/1 var(--font-ui); letter-spacing: 0.12em; color: var(--burn-500); }
.unlock-banner {
  margin: 0 0 var(--space-3); font: 600 13px/1 var(--font-ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--burn-500);
}
#unlock-preview { width: 520px; max-width: 100%; }

.loading {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 7, 11, 0.85);
  font: 700 22px/1 var(--font-display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-secondary);
}

/* White mist while flying through a cloud */
.cloud-fog { position: fixed; inset: 0; background-color: #eef2f6; opacity: 0; pointer-events: none; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; inset: 0; pointer-events: none; user-select: none;
  font-family: var(--font-hud); color: var(--hud-color); text-shadow: var(--text-glow-hud);
}
.hud-box {
  position: absolute; padding: 8px 14px; clip-path: var(--clip-chamfer-sm);
  background: rgba(4, 7, 11, 0.55); box-shadow: inset 0 0 0 1px rgba(61, 255, 126, 0.22);
}
.hud-label { font: 400 12px/1.2 var(--font-hud); letter-spacing: 0.1em; opacity: 0.75; }
.hud-value { font: 400 34px/1.1 var(--font-hud); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.hud-value small { font-size: 13px; opacity: 0.75; }
.hud-value.small { font-size: 18px; text-align: center; }

.hud-left { left: 24px; top: 50%; transform: translateY(-50%); min-width: 150px; }
.hud-right { right: 24px; top: 50%; transform: translateY(-50%); min-width: 170px; text-align: right; }

/* Instrument panel, bottom left: a sunken, chamfered panel like a cockpit's */
.instrument-panel {
  position: absolute; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  clip-path: var(--clip-chamfer); background: rgba(11, 17, 24, 0.88);
  box-shadow: inset 0 0 0 1px var(--ink-600), inset 0 2px 0 rgba(255, 255, 255, 0.04);
  text-shadow: none;
}
.dial { display: block; width: 144px; height: 144px; }
.dial-bezel { fill: var(--ink-850); stroke: var(--ink-600); stroke-width: 2; }
.dial-face { fill: var(--ink-1000); }
.dial-band { fill: none; stroke-width: 5; }
.dial-band.ok { stroke: var(--ok-500); }
.dial-band.caution { stroke: var(--caution-500); }
.dial-band.warning { stroke: var(--warning-500); }
.dial-tick { stroke: var(--ink-50); stroke-width: 1; }
.dial-tick.major { stroke-width: 2; }
.dial-number { fill: var(--ink-100); font: 700 10px var(--font-hud); text-anchor: middle; }
.dial-label { fill: var(--ink-300); font: 700 8px var(--font-hud); letter-spacing: 0.1em; text-anchor: middle; }
.dial-window { fill: var(--ink-950); stroke: var(--ink-600); }
.dial-readout { fill: var(--ink-50); font: 400 14px var(--font-hud); text-anchor: middle; }
.dial-unit { fill: var(--ink-300); font: 400 9px var(--font-hud); text-anchor: middle; }
.dial-needle { stroke: var(--burn-500); stroke-width: 3; stroke-linecap: round; transition: transform 80ms linear; }
.dial-hub { fill: var(--ink-700); stroke: var(--ink-400); }

/* Tape gauges: green normally, amber when low, red when empty */
.bar-gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 44px; }
.gauge-label { font: 700 11px/1 var(--font-hud); letter-spacing: 0.06em; color: var(--ink-200); }
.gauge-value { font: 400 13px/1 var(--font-hud); color: var(--ink-50); }
.throttle-bar {
  position: relative; width: 24px; height: 96px; background: var(--ink-1000); box-shadow: inset 0 0 0 1px var(--ink-600);
  background-image: linear-gradient(var(--ink-300), var(--ink-300)), linear-gradient(var(--ink-300), var(--ink-300)), linear-gradient(var(--ink-300), var(--ink-300));
  background-size: 4px 1px; background-repeat: no-repeat; background-position: right 0 top 25%, right 0 top 50%, right 0 top 75%;
}
.throttle-fill {
  position: absolute; left: 3px; right: 3px; bottom: 3px; max-height: calc(100% - 6px);
  background: var(--ok-500); box-shadow: 0 0 8px var(--ok-500);
}
.fuel-low .throttle-fill.fuel-fill { background: var(--caution-500); box-shadow: 0 0 8px var(--caution-500); }
.fuel-low #hud-fuel { color: var(--caution-500); }

/* Annunciator lights: dark but readable when off, glowing in their colour when on */
.annunciators { display: grid; grid-template-columns: repeat(3, 84px); gap: 4px; padding: 4px; background: var(--ink-950); }
.ann {
  display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 4px; text-align: center;
  font: 700 10px/1.15 var(--font-hud); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink-1000); color: var(--ink-500); box-shadow: inset 0 0 0 1px var(--ink-700);
}
.ann[data-state="ok"] { color: var(--ok-500); background: rgba(61, 255, 126, 0.12); box-shadow: inset 0 0 0 1px var(--ok-500), 0 0 14px rgba(61, 255, 126, 0.4); text-shadow: 0 0 6px currentColor; }
.ann[data-state="advisory"] { color: var(--advisory-500); background: rgba(34, 195, 238, 0.14); box-shadow: inset 0 0 0 1px var(--advisory-500), 0 0 14px rgba(34, 195, 238, 0.45); text-shadow: 0 0 6px currentColor; }
.ann[data-state="caution"] { color: var(--caution-500); background: rgba(255, 178, 26, 0.16); box-shadow: inset 0 0 0 1px var(--caution-500), 0 0 14px rgba(255, 178, 26, 0.5); text-shadow: 0 0 6px currentColor; }
.ann[data-state="warning"] { color: var(--warning-500); background: rgba(255, 59, 59, 0.16); box-shadow: inset 0 0 0 1px var(--warning-500), 0 0 14px rgba(255, 59, 59, 0.5); text-shadow: 0 0 6px currentColor; }
.ann.flash:not([data-state="off"]) { animation: fs-blink 1s linear infinite; }

.hud-compass { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); padding: 4px 10px 6px; }
.hud-compass canvas { display: block; filter: drop-shadow(0 0 3px rgba(61, 255, 126, 0.55)); }
.hud-compass-marker {
  position: absolute; left: 50%; bottom: 33px; transform: translateX(-50%);
  border: 7px solid transparent; border-bottom-color: var(--hud-500);
}
.hud-heading {
  width: 64px; margin: 2px auto 0; padding: 3px 0; text-align: center;
  background: rgba(4, 7, 11, 0.78); box-shadow: inset 0 0 0 1.5px var(--hud-500); font: 400 16px/1.2 var(--font-hud);
}

.hud-land { font: 700 13px/1.4 var(--font-hud); letter-spacing: 0.04em; }
.hud-land.good { color: var(--ok-500); }
.hud-land.bad { color: var(--warning-500); }
.hud-vs { font: 400 15px/1.4 var(--font-hud); font-variant-numeric: tabular-nums; opacity: 0.9; }
.hud-vs.up { color: var(--ok-500); }
.hud-vs.down { color: var(--caution-500); }

/* Messages: a toast top right */
.toast {
  position: absolute; right: 24px; top: 24px; width: min(400px, calc(100vw - 48px));
  display: grid; grid-template-columns: 44px 1fr; clip-path: var(--clip-chamfer-sm);
  background: var(--surface-panel); backdrop-filter: var(--blur-panel); box-shadow: inset 0 0 0 1px var(--line-subtle);
  text-shadow: none; animation: fs-slide-in var(--dur-base) var(--ease-out);
}
.toast .icon {
  display: flex; justify-content: center; padding-top: 13px; font-size: 20px;
  background: linear-gradient(180deg, var(--cyan-500), transparent 300%); color: var(--ink-1000);
}
.toast span { padding: 12px 16px 13px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-50); }

.hud-hint { right: 24px; bottom: 16px; color: var(--text-secondary); text-shadow: none; opacity: 0.8; }

/* Warnings: boxed, glowing, blinking at 1 Hz */
.warning {
  position: absolute; left: 50%; transform: translateX(-50%); padding: 6px 18px;
  font: 700 40px/1 var(--font-hud); letter-spacing: 0.12em;
  background: rgba(4, 7, 11, 0.35); box-shadow: inset 0 0 0 2px currentColor, 0 0 16px currentColor;
  text-shadow: 0 0 10px currentColor; animation: fs-blink 1s linear infinite;
}
.warning.amber { top: 26%; color: var(--caution-500); }
.warning.red { top: 62%; color: var(--warning-500); }
.warning.missile { top: 36%; }

/* Combat */
.hud-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Health and stores, part of the instrument panel in War and Mission */
.combat-gauges { display: flex; align-items: center; gap: 12px; }
.combat-gauges .bar-gauge { width: 52px; }
.stores {
  width: 168px; padding: 8px 10px; color: var(--hud-500); text-shadow: var(--text-glow-hud);
  background: radial-gradient(circle at 50% 40%, #07110a, #020503);
  box-shadow: inset 0 0 0 2px var(--ink-1000), inset 0 0 18px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--ink-600);
}
.stores-title { margin-bottom: 4px; font: 700 10px/1 var(--font-hud); letter-spacing: 0.1em; text-align: center; opacity: 0.8; }
.store { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font: 400 11px/1.2 var(--font-hud); letter-spacing: 0.06em; }
.store + .store { box-shadow: inset 0 1px 0 rgba(61, 255, 126, 0.15); }
.store b { font: 400 16px/1 var(--font-hud); font-variant-numeric: tabular-nums; }
.store.kills b { color: var(--burn-500); text-shadow: 0 0 6px rgba(255, 122, 26, 0.6); }
.hud-radar {
  position: absolute; right: 24px; bottom: 56px; width: 180px; height: 180px; border-radius: 50%;
  background: rgba(4, 7, 11, 0.6); box-shadow: inset 0 0 0 1px rgba(61, 255, 126, 0.45), 0 0 12px rgba(61, 255, 126, 0.15);
}
.hurt-flash { position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; box-shadow: inset 0 0 160px 40px rgba(255, 59, 59, 0.7); }
.hurt-flash.on { opacity: 1; transition: none; }

/* Mission: an arrow to the target, its distance and the clock */
.hud-mission { left: 24px; top: 24px; display: flex; align-items: center; gap: 22px; padding: 8px 18px; }
.target-arrow { width: 36px; height: 36px; fill: var(--nav-500); filter: drop-shadow(0 0 4px rgba(229, 75, 255, 0.7)); }

/* Choice rows between a briefing's text and its goals */
#briefing-missions, #story-chapters { margin: var(--space-5) 0 var(--space-2); }