:root {
  color-scheme:dark;
  --bg:#100916;
  --panel:#180e21;
  --border:#482951;
  --text:#f2e9f1;
  --muted:#ad9daf;
  --cyan:#bf96ed;
  --lime:#ec6d88;
  --danger:#f07b84;
  font-family:Georgia,"Times New Roman",serif;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text)
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  font:inherit;
  cursor:pointer
}

button:disabled {
  opacity:.35;
  cursor:default
}

button:focus-visible,a:focus-visible,canvas:focus-visible {
  outline:2px solid var(--lime);
  outline-offset:4px
}

button {
  color:var(--text)
}

.app-shell {
  max-width:1560px;
  margin:auto;
  padding:0 52px
}

.topbar {
  height:98px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--border);
  gap:32px
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  font-size:30px;
  letter-spacing:4px
}

.brand svg {
  width:47px;
  fill:none;
  stroke:var(--lime);
  stroke-width:1.6
}

.brand-dot {
  color:var(--lime)
}

.brand-caption,.eyebrow,.header-actions,.card-label,.flight-topline,.flight-footer,.canvas-status,.telemetry,.overlay-kicker,.overlay-footnote,.catch-heading,.resource-heading,.small-hint,.controls-label,.control-item,.page-footer,.route-number,.dialog-note {
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace
}

.brand-caption {
  font-size:9px;
  letter-spacing:1.9px;
  color:var(--muted)
}

.header-actions {
  display:flex;
  align-items:center;
  gap:23px;
  margin-left:auto;
  font-size:10px;
  letter-spacing:1px
}

.live-indicator {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--cyan)
}

.live-indicator i,.tiny-dot {
  width:5px;
  height:5px;
  background:var(--cyan);
  display:inline-block;
  border-radius:50%;
  box-shadow:0 0 9px #79d8c266
}

.icon-button {
  background:transparent;
  border:1px solid var(--border);
  font-family:inherit;
  font-size:10px;
  padding:10px 12px;
  letter-spacing:1px
}

.icon-button:hover {
  border-color:var(--cyan);
  color:var(--cyan)
}

.icon-button span {
  color:var(--muted);
  margin-left:5px
}

.help-button {
  font-size:14px;
  padding:8px 12px
}

.page-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:38px 0 28px
}

.eyebrow {
  color:var(--cyan);
  font-size:10px;
  letter-spacing:2px;
  margin:0 0 12px
}

h1 {
  font-size:clamp(28px,3vw,42px);
  font-weight:500;
  letter-spacing:-1.5px;
  margin:0
}

.heading-note {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 3px
}

.game-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:20px
}

.flight-panel {
  border:1px solid var(--border);
  min-width:0;
  background:#090f12;
  display:flex;
  flex-direction:column
}

.flight-topline {
  height:45px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  font-size:10px;
  letter-spacing:1.2px;
  border-bottom:1px solid var(--border);
  color:#b2c1bf
}

.flight-topline .tiny-dot {
  margin-right:8px
}

.view-label {
  color:var(--muted);
  font-size:8px
}

.canvas-wrap {
  position:relative;
  min-height:545px;
  flex:1;
  isolation:isolate;
  overflow:hidden;
  background:#080f13
}

canvas {
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  inset:0;
  touch-action:none
}

.canvas-status {
  position:absolute;
  inset:19px 20px auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted)
}

.canvas-button {
  pointer-events:auto;
  background:#0c151bb3;
  border:1px solid var(--border);
  padding:8px 10px;
  font:inherit;
  font-size:8px;
  letter-spacing:1px
}

.canvas-button span {
  margin-left:12px;
  color:var(--cyan)
}

.telemetry {
  position:absolute;
  bottom:18px;
  left:20px;
  right:20px;
  display:flex;
  gap:27px;
  pointer-events:none;
  color:var(--muted);
  font-size:7px;
  letter-spacing:1px
}

.telemetry span {
  display:flex;
  align-items:baseline;
  gap:8px
}

.telemetry b {
  color:#b9ceca;
  font-size:13px;
  font-weight:400;
  letter-spacing:0
}

.telemetry small {
  font-size:8px;
  margin-left:-4px
}

.telemetry-time {
  margin-left:auto
}

.flight-footer {
  min-height:43px;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:22px;
  border-top:1px solid var(--border);
  font-size:8px;
  color:var(--muted);
  letter-spacing:.5px
}

.flight-footer>span {
  display:flex;
  align-items:center;
  gap:7px
}

.legend-line {
  width:12px;
  height:1px;
  background:var(--cyan)
}

.legend-diamond {
  width:5px;
  height:5px;
  border:1px solid var(--lime);
  transform:rotate(45deg)
}

.legend-circle {
  width:7px;
  height:7px;
  border:1px solid #4d8b83;
  border-radius:50%
}

.footer-coordinate {
  margin-left:auto;
  font-size:7px
}

.sidebar {
  display:flex;
  flex-direction:column;
  gap:16px
}

.mission-card,.route-card {
  padding:23px;
  background:var(--panel);
  border:1px solid var(--border)
}

.card-label {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:9px;
  letter-spacing:1px
}

.card-label>span:last-child {
  color:var(--cyan)
}

.mission-card h2 {
  font-size:25px;
  font-weight:500;
  letter-spacing:-.5px;
  margin:22px 0 10px
}

.mission-card>p:not(.small-hint) {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin:0 0 26px
}

.catch-heading {
  font-size:8px;
  letter-spacing:1px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#a6b7b4
}

.insect-icon {
  color:var(--lime);
  font-size:23px;
  line-height:18px
}

.catch-counter {
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:6px 0 13px
}

.catch-counter strong {
  color:var(--lime);
  font-size:64px;
  font-weight:400;
  letter-spacing:-4px;
  line-height:1.1;
  font-variant-numeric:tabular-nums
}

.catch-counter>span {
  color:var(--muted);
  font-size:21px;
  letter-spacing:-1px
}

.progress-track,.sonar-meter {
  height:4px;
  background:#253233;
  overflow:hidden
}

.progress-track>div {
  width:0;
  height:100%;
  background:var(--lime);
  transition:width .25s
}

.mission-divider {
  height:1px;
  background:var(--border);
  margin:23px 0
}

.resource-heading {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.5px;
  color:#a6b7b4
}

.resource-heading span:last-child {
  color:var(--cyan);
  font-size:7px
}

.health-bars {
  display:flex;
  gap:5px;
  margin-top:10px
}

.health-bars i {
  height:5px;
  flex:1;
  background:var(--cyan);
  transition:background .2s
}

.health-bars i.lost {
  background:#2c3335
}

.sonar-heading {
  margin-top:22px
}

.sonar-meter {
  margin-top:10px
}

.sonar-meter>div {
  width:100%;
  height:100%;
  background:var(--cyan)
}

.small-hint {
  font-size:8px;
  color:var(--muted);
  line-height:1.7;
  margin:13px 0 0
}

.small-hint kbd {
  font-size:7px;
  padding:2px 4px;
  min-width:0
}

.route-card {
  flex:1;
  padding-top:20px;
  padding-bottom:10px
}

.route-list {
  list-style:none;
  padding:0;
  margin:18px 0 0
}

.route-list li {
  display:flex;
  align-items:center;
  gap:13px;
  padding:0 0 15px;
  color:#728484
}

.route-list li+li {
  padding-top:0
}

.route-number {
  font-size:10px;
  color:#526965
}

.route-list li>span:nth-child(2) {
  font-size:12px
}

.route-list small {
  display:block;
  color:#53696b;
  font-size:9px;
  margin-top:4px
}

.route-list i {
  margin-left:auto;
  width:5px;
  height:5px;
  border:1px solid #3f514f;
  border-radius:50%
}

.route-list .active {
  color:var(--text)
}

.route-list .active .route-number {
  color:var(--lime)
}

.route-list .active i {
  background:var(--lime);
  border-color:var(--lime);
  box-shadow:0 0 10px #d2f54a44
}

.route-list .complete i {
  background:var(--cyan);
  border-color:var(--cyan)
}

.controls-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:24px 0;
  border-bottom:1px solid var(--border)
}

.controls-label {
  font-size:8px;
  letter-spacing:1px;
  line-height:1.9;
  color:#b2c1bf
}

.controls-label>span {
  color:var(--muted)
}

.control-item {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:9px;
  color:var(--muted)
}

.control-item>div {
  display:flex;
  gap:4px;
  align-items:center
}

kbd {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  padding:6px 5px;
  border:1px solid #304143;
  border-bottom-color:#405454;
  color:#c2d1cc;
  border-radius:3px;
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:10px;
  font-weight:400;
  background:#111b1e
}

.key-or {
  font-size:9px;
  padding:0 1px;
  color:#4b605e
}

.wide-key {
  min-width:65px
}

.page-footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:8px;
  letter-spacing:1.3px;
  color:#617473;
  padding:22px 0 26px
}

.muted {
  color:#344b49;
  margin:0 6px
}

.game-overlay {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,#080f13eb 8%,#080f139c 54%,#080f131a);
  display:grid;
  place-items:center;
  padding:50px 24px;
  z-index:2
}

.game-overlay.hidden {
  display:none
}

.overlay-card {
  text-align:center;
  max-width:395px
}

.overlay-kicker {
  font-size:8px;
  letter-spacing:2.3px;
  color:var(--cyan);
  margin-bottom:25px
}

.hero-bat {
  width:117px;
  height:61px;
  fill:#d2f58a07;
  stroke:var(--lime);
  stroke-width:1;
  filter:drop-shadow(0 0 13px #d2f58a35);
  margin-bottom:13px
}

.bat-detail {
  opacity:.3
}

.overlay-card h2 {
  font-size:clamp(26px,2.8vw,36px);
  line-height:1.15;
  font-weight:500;
  letter-spacing:-1px;
  margin:8px 0 15px
}

.overlay-card>p {
  font-size:12px;
  line-height:1.85;
  color:#9aafad;
  margin:0 auto;
  max-width:320px
}

.intro-steps {
  display:flex;
  justify-content:center;
  gap:22px;
  margin:25px 0;
  color:#abbcb7;
  font-size:10px
}

.intro-steps b {
  font-family:monospace;
  font-weight:400;
  font-size:8px;
  color:var(--cyan);
  margin-right:5px
}

.primary-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  margin:25px auto 0;
  padding:15px 20px;
  background:var(--lime);
  color:#14200d;
  border:1px solid var(--lime);
  min-width:225px;
  font-family:monospace;
  font-size:10px;
  letter-spacing:1.2px;
  font-weight:700;
  transition:background .15s,transform .15s
}

.primary-button:hover {
  background:#e0ffa6;
  transform:translateY(-1px)
}

.primary-button>span {
  font-size:18px;
  font-weight:400;
  line-height:10px
}

.overlay-footnote {
  font-size:8px;
  color:#607977;
  margin-top:17px;
  letter-spacing:.3px
}

.toast {
  position:absolute;
  top:69px;
  left:50%;
  transform:translateX(-50%) translateY(-5px);
  padding:10px 15px;
  border:1px solid #3e6559;
  background:#0d1b17ee;
  color:var(--lime);
  font-family:monospace;
  font-size:10px;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s,transform .2s;
  white-space:nowrap;
  z-index:1
}

.toast.visible {
  opacity:1;
  transform:translateX(-50%) translateY(0)
}

.toast.warning {
  color:var(--danger);
  border-color:#885646;
  background:#251714ed
}

.flight-controls {
  position:absolute;
  z-index:1;
  bottom:46px;
  left:max(18px, env(safe-area-inset-left));
  right:max(18px, env(safe-area-inset-right));
  margin:0;
  padding:0;
  border:0;
  min-width:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  pointer-events:none;
  font:9px "SFMono-Regular",Consolas,monospace;
  letter-spacing:1px;
  opacity:0;
  visibility:hidden;
}
.is-playing .flight-controls { opacity:1; visibility:visible; }
.flight-left-controls { width:150px; pointer-events:auto; }
.flight-right-controls { display:grid; justify-items:center; gap:8px; pointer-events:auto; }
.sonar-pad {
  display:block;
  width:100%;
  min-height:59px;
  border:1px solid #5b7660;
  background:#0c1b19e8;
  color:var(--lime);
  font:inherit;
  letter-spacing:1.5px;
  border-radius:6px;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.sonar-pad>span { font-size:21px; vertical-align:middle; margin-right:7px; }
.sonar-pad small { display:block; font-size:6px; letter-spacing:1px; color:#8aac93; margin:3px 0 6px; }
.sonar-pad.pressed { background:#294837; border-color:var(--lime); }
.throttle-control { display:block; margin-top:8px; padding:9px 10px 6px; background:#0a151be8; border:1px solid #36534e; border-radius:6px; }
.throttle-control>span { display:flex; justify-content:space-between; color:#a9c7bc; font-size:8px; }
.throttle-control output { color:var(--lime); }
#speed-slider { width:100%; height:34px; display:block; margin:0; accent-color:var(--lime); cursor:ew-resize; touch-action:none; }
.throttle-control .throttle-scale { font-size:6px; color:#6e9284; }
.flight-stick {
  width:124px;
  height:124px;
  border:1px solid #527d6c;
  border-radius:50%;
  background:radial-gradient(circle,#19302bcc,#0b181ce8);
  position:relative;
  display:grid;
  place-items:center;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
}
.flight-stick::after { content:''; position:absolute; inset:15px; border:1px dashed #52826955; border-radius:50%; pointer-events:none; }
.stick-cross::before,.stick-cross::after { content:''; position:absolute; background:#527d6c55; }
.stick-cross::before { left:12px; right:12px; top:50%; height:1px; }
.stick-cross::after { top:12px; bottom:12px; left:50%; width:1px; }
.stick-knob { width:43px; height:43px; border:1px solid #9dc7ac; border-radius:50%; background:#2a413be8; display:grid; place-items:center; color:#d2f58a; font-size:22px; pointer-events:none; position:absolute; }
.flight-stick.active { cursor:grabbing; border-color:var(--lime); }
.flight-stick.active .stick-knob { background:#3a5945; border-color:var(--lime); }
.stick-label { color:#86ad99; font-size:7px; }
.is-playing canvas { cursor:grab; }
.is-playing canvas.steering { cursor:grabbing; }
.pointer-hint { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:var(--muted); font:8px monospace; line-height:1.7; letter-spacing:.4px; margin:13px 0 0; }

@media(max-width:500px) {
  .flight-controls { left:12px; right:12px; bottom:43px; }
  .flight-left-controls { width:128px; }
  .flight-stick { width:108px; height:108px; }
  .pointer-hint { font-size:7px; }
}
@media(any-pointer:coarse) and (orientation:landscape) and (max-height:600px) {
  .canvas-wrap { min-height:calc(100dvh - 90px)!important; }
  .flight-stick { width:104px; height:104px; }
  .flight-left-controls { width:140px; }
  .flight-controls { bottom:36px; }
  .sonar-pad { min-height:47px; }
  .throttle-control { margin-top:5px; padding-top:6px; }
}

dialog {
  background:#0e181c;
  color:var(--text);
  border:1px solid #39534d;
  max-width:560px;
  width:calc(100% - 32px);
  padding:28px 32px;
  max-height:85dvh
}

dialog::backdrop {
  background:#030a0dda;
  backdrop-filter:blur(5px)
}

.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between
}

.dialog-heading .eyebrow {
  margin:0
}

dialog h2 {
  font-size:29px;
  font-weight:500;
  letter-spacing:-.8px
}

dialog p,dialog li {
  font-size:13px;
  line-height:1.8;
  color:#a0b4b0
}

dialog ul {
  padding-left:18px
}

dialog li {
  padding:5px 0
}

dialog strong {
  color:var(--text);
  font-weight:500
}

dialog .dialog-note {
  font-size:10px;
  color:#6f8985;
  border-top:1px solid var(--border);
  padding-top:15px
}

@media(min-width:1500px) {
  .canvas-wrap {
    min-height:605px
  }
  .mission-card {
    padding:27px
  }
  .mission-card>p:not(.small-hint) {
    margin-bottom:32px
  }
  .route-card {
    padding:24px 27px 12px
  }
  .route-list li {
    padding-bottom:19px
  }
}

@media(max-width:1150px) {
  .app-shell {
    padding:0 28px
  }
  .brand-caption {
    display:none
  }
  .game-layout {
    grid-template-columns:minmax(0,1fr) 250px;
    gap:14px
  }
  .mission-card,.route-card {
    padding-left:19px;
    padding-right:19px
  }
  .control-item {
    flex-direction:column;
    gap:9px
  }
  .controls-label {
    font-size:7px
  }
  .view-label {
    font-size:7px
  }
  .flight-footer {
    gap:15px
  }
  .footer-coordinate {
    display:none
  }
}

@media(max-width:800px) {
  .app-shell {
    padding:0 20px
  }
  .topbar {
    height:77px
  }
  .brand {
    font-size:25px
  }
  .brand svg {
    width:39px
  }
  .header-actions {
    gap:12px
  }
  .page-heading {
    padding:28px 0 22px
  }
  .heading-note {
    display:none
  }
  .game-layout {
    grid-template-columns:1fr
  }
  .canvas-wrap {
    min-height:520px
  }
  .sidebar {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:14px
  }
  .mission-card {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:20px;
    padding:19px
  }
  .mission-card .card-label,.mission-card h2,.mission-card>p:not(.small-hint) {
    grid-column:1 / -1
  }
  .mission-card h2 {
    margin:15px 0 7px;
    font-size:23px
  }
  .mission-card>p:not(.small-hint) {
    margin-bottom:18px;
    font-size:11px
  }
  .catch-heading {
    grid-column:1;
    grid-row:4
  }
  .catch-counter {
    grid-column:1;
    grid-row:5 / 8;
    margin:8px 0
  }
  .catch-counter strong {
    font-size:49px
  }
  .progress-track {
    grid-column:1;
    grid-row:8
  }
  .mission-divider {
    display:none
  }
  .resource-heading:not(.sonar-heading) {
    grid-column:2;
    grid-row:4;
    font-size:7px;
    gap:8px
  }
  .resource-heading span:last-child {
    font-size:6px
  }
  .health-bars {
    grid-column:2;
    grid-row:5;
    margin:10px 0
  }
  .sonar-heading {
    grid-column:2;
    grid-row:6;
    margin:7px 0;
    font-size:7px
  }
  .sonar-meter {
    grid-column:2;
    grid-row:7;
    margin:0 0 5px
  }
  .small-hint {
    grid-column:1 / -1;
    margin-top:15px
  }
  .route-card {
    padding:19px
  }
  .route-list {
    margin-top:25px
  }
  .route-list li {
    padding-bottom:22px
  }
  .controls-strip {
    gap:10px
  }
  .controls-label {
    display:none
  }
  .page-footer {
    font-size:7px
  }
  .page-footer>span:last-child {
    display:none
  }
}

@media(any-pointer:coarse) {
  .controls-strip {
    display:none
  }
}

@media(max-width:500px) {
  .app-shell {
    padding:0 12px
  }
  .topbar {
    height:68px;
    gap:12px
  }
  .brand {
    font-size:22px;
    gap:7px
  }
  .brand svg {
    width:35px
  }
  .live-indicator {
    display:none
  }
  .header-actions {
    gap:8px
  }
  .page-heading {
    padding:23px 2px 19px
  }
  h1 {
    font-size:29px;
    letter-spacing:-1px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.7px;
    margin-bottom:9px
  }
  .flight-topline {
    height:39px;
    padding:0 13px;
    font-size:8px
  }
  .view-label {
    font-size:5px;
    letter-spacing:.6px
  }
  .canvas-wrap {
    min-height:450px
  }
  .canvas-status {
    inset:13px 13px auto;
    font-size:6px
  }
  .telemetry {
    left:13px;
    right:13px;
    gap:15px;
    font-size:6px
  }
  .telemetry span {
    gap:5px
  }
  .telemetry span:nth-child(2) {
    display:none
  }
  .flight-footer {
    padding:0 13px;
    gap:17px;
    font-size:6px;
    min-height:37px
  }
  .overlay-card h2 {
    font-size:28px
  }
  .overlay-card>p {
    font-size:11px;
    max-width:255px
  }
  .overlay-kicker {
    font-size:7px;
    margin-bottom:17px
  }
  .hero-bat {
    width:97px;
    height:47px
  }
  .intro-steps {
    gap:15px;
    margin:21px 0;
    font-size:9px
  }
  .game-overlay {
    padding:50px 18px
  }
  .primary-button {
    padding:14px 18px
  }
  .sidebar {
    grid-template-columns:1fr
  }
  .mission-card {
    padding:18px;
    column-gap:25px
  }
  .mission-card .card-label {
    grid-column:1 / -1
  }
  .mission-card h2 {
    font-size:22px
  }
  .mission-card>p:not(.small-hint) {
    max-width:320px
  }
  .catch-counter strong {
    font-size:52px
  }
  .resource-heading:not(.sonar-heading),.sonar-heading {
    font-size:8px
  }
  .resource-heading span:last-child {
    font-size:7px
  }
  .route-card {
    display:none
  }
  .control-item {
    font-size:7px
  }
  .control-item kbd {
    min-width:19px;
    font-size:8px;
    padding:6px 4px
  }
  .key-or {
    display:none
  }
  .controls-strip {
    gap:8px;
    padding:18px 0
  }
  .page-footer>span:nth-child(2) {
    font-size:6px;
    letter-spacing:.5px
  }
  .toast {
    font-size:9px;
    padding:8px 10px;
    top:55px
  }
  dialog {
    padding:22px
  }
  dialog h2 {
    font-size:25px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}

/* Immersive game view */
html,body { width:100%; min-height:100%; overflow:hidden; }
.game-shell { width:100%; height:100dvh; }
.flight-panel { width:100%; height:100%; border:0; background:#100916; }
.canvas-wrap { width:100%; height:100%; min-height:0; background:#0b0710; }
.tactical-hud { position:absolute; inset:0; z-index:1; pointer-events:none; font:10px "SFMono-Regular",Consolas,monospace; letter-spacing:1.2px; }
.hud-top { position:absolute; top:max(18px, env(safe-area-inset-top)); left:max(20px, env(safe-area-inset-left)); display:flex; align-items:center; gap:14px; }
.hud-brand { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:4px; padding:3px 13px 3px 10px; min-height:38px; align-items:center; text-decoration:none; color:var(--text); border-left:2px solid var(--lime); background:#1b1024d9; font-family:Georgia,"Times New Roman",serif; letter-spacing:.5px; }
.hud-brand span { grid-row:1 / 3; font-size:11px; letter-spacing:1px; }
.hud-brand b { align-self:end; font-size:18px; font-weight:500; letter-spacing:1px; line-height:.8; }
.hud-brand::after { content:'DIE SCHWARZE SZENE IN NRW'; grid-column:2; align-self:start; color:#c0aabe; font:5px Arial,sans-serif; letter-spacing:.8px; white-space:nowrap; }
.hud-title { color:#efb7c5; padding:0 4px; font:8px Arial,sans-serif; letter-spacing:1.5px; }
.hud-scene,.hud-progress,.hud-bottom>span { background:#160d20cf; border:1px solid #5a3565a8; backdrop-filter:blur(8px); font-family:Arial,sans-serif; }
.hud-scene { padding:9px 11px; color:#e8dce8; }
.hud-progress { display:flex; align-items:baseline; gap:6px; padding:7px 10px; color:#c9b7c8; }
.hud-progress b { color:var(--lime); font-size:17px; font-weight:400; }
.hud-actions { position:absolute; top:max(18px, env(safe-area-inset-top)); right:max(20px, env(safe-area-inset-right)); display:flex; gap:7px; pointer-events:auto; }
.hud-button { width:35px; height:35px; display:grid; place-items:center; padding:0; color:#f0dfed; background:#160d20cf; border:1px solid #5a3565c4; border-radius:0; font:16px "SFMono-Regular",Consolas,monospace; backdrop-filter:blur(8px); }
.hud-button:hover { border-color:var(--cyan); color:var(--cyan); }
.hud-button:disabled { display:none; }
.sound-icon { font-size:18px; transform:rotate(180deg); }
.hud-bottom { position:absolute; bottom:max(18px, env(safe-area-inset-bottom)); left:max(20px, env(safe-area-inset-left)); right:max(20px, env(safe-area-inset-right)); display:flex; align-items:end; gap:8px; }
.hud-bottom>span { min-width:91px; padding:8px 10px; display:flex; align-items:baseline; gap:6px; color:#d7c6d5; }
.hud-bottom small { display:block; color:#ae90b6; font-size:7px; }
.hud-bottom b { color:#f4e7f1; font-size:15px; font-weight:400; }
.hud-bottom em { color:#bb9dbc; font-size:8px; font-style:normal; }
.hud-bottom .health-pips { display:flex; gap:3px; margin-left:auto; }
.health-pips i { width:8px; height:8px; background:var(--cyan); }
.health-pips i.lost { background:#442b48; }
.hud-bottom>span:last-child { margin-left:auto; min-width:124px; align-items:center; }
.hud-bottom .sonar-meter { flex:1; height:4px; margin:0; background:#442b48; }
.hud-bottom .sonar-meter>i { display:block; width:100%; height:100%; background:var(--cyan); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.toast { top:max(74px, calc(env(safe-area-inset-top) + 56px)); z-index:3; }
.game-overlay { background:radial-gradient(ellipse at center,#241126d9 0%,#120a19b5 49%,#08050d42),linear-gradient(135deg,#160a20aa,#09040d77); }
.overlay-card { max-width:330px; }
.overlay-kicker { margin-bottom:18px; color:#e1718a; font-family:Arial,sans-serif; }
.hero-bat { width:94px; margin-bottom:8px; stroke:#c695ee; filter:drop-shadow(0 0 13px #c695ee55); }
.overlay-card h2 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(33px,4vw,47px); line-height:.98; letter-spacing:-1.8px; }
.overlay-card>p { max-width:270px; color:#d7c2d3; }
.primary-button { background:linear-gradient(90deg,#a44562,#d85776); border-color:#e1708a; color:#fff7fb; font-family:Arial,sans-serif; box-shadow:inset 0 0 0 1px #ffffff22; }
.primary-button:hover { background:linear-gradient(90deg,#b24b69,#e76584); }
.brand-link { display:inline-flex; align-items:center; gap:12px; margin-top:16px; color:#d8b4f1; text-decoration:none; font:8px Arial,sans-serif; letter-spacing:1.4px; }
.brand-link:hover { color:#f1d1ff; }
.brand-link span { font-size:14px; }
.overlay-footnote { color:#b796b1; font-family:Arial,sans-serif; }
.overlay-footnote { margin-top:14px; }

/* Nur ausblenden, wenn die Maus das primäre Eingabegerät ist. Ein reines
   any-pointer:fine matcht auch auf Handys mit Stylus oder gekoppelter Maus
   und hat dort die Touch-Steuerung verschluckt. */
@media(pointer:fine) and (any-pointer:fine) {
  .is-playing .flight-controls { display:none; }
}

@media(max-width:600px) {
  .hud-top { top:max(12px, env(safe-area-inset-top)); left:max(12px, env(safe-area-inset-left)); }
  .hud-actions { top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); }
  .hud-top { gap:6px; }
  .hud-brand { min-height:34px; padding:3px 8px 3px 7px; }
  .hud-brand span { font-size:9px; }
  .hud-brand b { font-size:15px; }
  .hud-brand::after { font-size:4px; letter-spacing:.5px; }
  .hud-title { display:none; }
  .hud-scene { max-width:calc(100vw - 230px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hud-bottom { left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); gap:5px; }
  .hud-bottom>span { min-width:0; padding:7px 8px; }
  .hud-bottom>span:nth-child(2) { display:none; }
  .hud-bottom>span:last-child { min-width:74px; }
}