:root {
  --hud: rgba(244, 241, 232, 0.92);
  --hud-dim: rgba(244, 241, 232, 0.50);
  --hud-faint: rgba(244, 241, 232, 0.28);
  --hud-ghost: rgba(244, 241, 232, 0.12);
  --accent: rgba(255, 255, 255, 0.95);
  --warn: rgba(255, 255, 255, 0.75);
  --tx: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
  --tx-mont: 'Montserrat', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0d12; color: var(--hud); font-family: var(--tx); }
body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body * { -webkit-user-select: none; user-select: none; }
canvas { touch-action: none; }
button, input[type="range"], .legal-link, .lb-close {
  touch-action: manipulation;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* === PRE-GAME: hide HUD until splash + brief done === */
body.pre-game #hud,
body.pre-game #scan-reticle,
body.pre-game #target-counter,
body.pre-game #ticker,
body.pre-game #hud-detail,
body.pre-game #mosaic-btn-wrap,
body.pre-game #tracking-panel {
  opacity: 0 !important;
  pointer-events: none !important;
}
body:not(.pre-game) #hud,
body:not(.pre-game) #scan-reticle,
body:not(.pre-game) #target-counter,
body:not(.pre-game):not(.mission-won) #hud-detail {
  transition: opacity 1.4s ease-out;
}

/* === MISSION WON: clean win screen === */
body.mission-won #hud,
body.mission-won #scan-reticle,
body.mission-won #target-counter,
body.mission-won #ticker,
body.mission-won #tracking-panel,
body.mission-won #hud-detail {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 900ms ease-out !important;
}
body.mission-won #mosaic-btn-wrap { display: none !important; }
body.mission-won .target { display: none !important; }
body.mission-won .ring { display: none !important; }
body.mission-won::before {
  content: '';
  position: fixed; inset: 0; z-index: 195;
  background: rgba(6, 8, 14, 0.76);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  animation: winBgFade 1200ms ease-out forwards;
  pointer-events: none;
}
@keyframes winBgFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* === SCREEN FADE OVERLAY === */
#screen-fade {
  position: fixed; inset: 0; z-index: 99999;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
#screen-fade.fade-in  { opacity: 1; pointer-events: none; }

/* === BG SHADER === */
#bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
#bg-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(10,13,18,0.22) 100%);
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 48;
  background: radial-gradient(ellipse at center, transparent 75%, rgba(0,0,0,0.18) 100%);
}

/* === CORNER LOGOS === */
.corner-logo {
  position: fixed; z-index: 50;
  width: 44px; opacity: 0.90;
  pointer-events: none;
  filter: brightness(0) invert(1);
}
.corner-tl { top: 18px;  left: 18px;  }
.corner-tr { top: 18px;  right: 18px; }
.corner-bl { bottom: 18px; left: 18px;  }
.corner-br { bottom: 18px; right: 18px; }

/* === MOSAIC MODE — light frosted-glass blur behind UI === */
#mosaic-blur {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 3;                    /* above bg + overlay, below HUD chrome */
  opacity: 0;
  background: rgba(70, 95, 130, 0.04);   /* very faint cool tint */
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition:
    opacity 600ms ease,
    -webkit-backdrop-filter 600ms ease,
    backdrop-filter 600ms ease,
    background 600ms ease;
}
body.autopilot-on #mosaic-blur { opacity: 0; }

/* === HUD CONTAINER === */
#hud {
  position: fixed; inset: 0; z-index: 10;
  pointer-events: none;
  font-size: 8px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 300;
  will-change: transform; color: var(--hud);
}

/* === BRAND (always visible) === */
.brand {
  position: fixed; top: 5%; left: 50%;
  transform: translateX(-50%);
  text-align: center; z-index: 510;
  pointer-events: none;
}
.brand img { height: 38px; width: auto; display: block; margin: 0 auto; opacity: 0.95; }
.brand .geo {
  margin-top: 90px; font-size: 10px;
  letter-spacing: 0.28em; color: var(--hud); font-weight: 300;
}

/* === LINESTACKS === */
.linestack { position: absolute; pointer-events: none; }
.linestack svg { width: 100%; height: 100%; overflow: visible; }
.linestack line, .linestack path { stroke-linecap: square; }
.ls-left { left: 3%; top: 22%; width: 44%; height: 56%; }
.ls-right { right: 3%; top: 22%; width: 44%; height: 56%; }

/* === COORD BLOCKS === */
.coord-block {
  position: absolute; font-size: 7px;
  letter-spacing: 0.22em; line-height: 1.7;
  color: var(--hud);
}
.coord-block.left { top: 60%; left: 30%; text-align: right; }
.coord-block.right { top: 60%; right: 30%; }
.coord-block .line span:first-child { color: var(--hud-dim); margin-right: 6px; }

/* === CENTER CIRCLES === */
.center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 200px;
  pointer-events: none;
  transition: transform 0.18s ease-out;
  will-change: transform;
}
.center svg { width: 100%; height: 100%; overflow: visible; }
.center .sd { stroke: var(--hud-dim); fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }

.emblem {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: auto;
  pointer-events: none; z-index: 12; opacity: 0.95;
}

/* === SCATTERED DOTS === */
.dots { position: absolute; inset: 0; pointer-events: none; }
.dots i {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--hud-dim);
  border-radius: 50%;
}

/* === SCAN RETICLE === */
#scan-reticle {
  position: fixed; top: 0; left: 0;
  width: 100px; height: 130px;
  pointer-events: none; z-index: 200;
  transition: transform 80ms ease-out;
  will-change: transform; mix-blend-mode: screen;
}
#scan-reticle svg { width: 100%; height: 100%; overflow: visible; }
#scan-reticle .sl-stroke { stroke: rgba(255,255,255,0.8); fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
#scan-reticle .scan-ring {
  stroke: rgba(201,251,2,0.8); fill: none;
  stroke-width: 1; vector-effect: non-scaling-stroke;
  animation: scanPulse 3s ease-in-out infinite;
}
#scan-reticle .progress-arc {
  stroke: rgba(201,251,2,0.95); fill: none;
  stroke-width: 1.5; vector-effect: non-scaling-stroke;
  stroke-dasharray: 180; stroke-dashoffset: 180;
  transition: none;
}
#scan-reticle .scan-bar { fill: rgba(255,255,255,0.55); transition: fill 220ms ease; }
#scan-reticle .scan-bar-bg { fill: rgba(255,255,255,0.15); }
#scan-reticle.state-tracking .scan-ring {
  stroke: rgba(201,251,2,0.95);
  animation: scanPulse 1s ease-in-out infinite;
}
#scan-reticle.state-tracking .scan-bar { fill: rgba(255,255,255,0.95); }
#scan-reticle.state-lock .scan-ring {
  stroke: rgba(201,251,2,0.98);
  stroke-width: 1.5; animation: none; opacity: 1;
}
#scan-reticle.state-lock .scan-bar { fill: rgba(255,255,255,1); }
@keyframes scanPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.9; } }

/* === WIN SCREEN — single centred flex column === */
#win-screen {
  position: fixed; inset: 0; z-index: 196;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none;
  padding: 60px 24px;
  text-align: center;
  font-family: var(--tx-mont);
}
.win-blip {
  font-family: var(--tx-mont);
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff; line-height: 1.05;
  margin: 0 0 28px;
  opacity: 0; transition: opacity 800ms ease-out;
}
#lock-date {
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 300; letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.90);
  opacity: 0; transition: opacity 700ms ease-out 250ms;
  margin: 0 0 10px;
}
#lock-cta {
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 300; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  max-width: 60vw;
  opacity: 0; transition: opacity 700ms ease-out 450ms;
  margin: 0 0 6px;
}
#lock-disclaimer {
  font-size: 12px; font-weight: 300;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.30);
  opacity: 0; transition: opacity 700ms ease-out 600ms;
  margin: 0 0 32px;
}
.win-blip.visible, #lock-date.visible,
#lock-cta.visible, #lock-disclaimer.visible { opacity: 1; }

#win-poster {
  display: block;
  width: min(360px, 72vw);
  height: auto;
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity 800ms ease-out 800ms;
  margin: 0 0 36px;
}
#win-poster.visible { opacity: 1; }

#lock-restart {
  font-family: var(--tx-mont); font-size: 12px;
  font-weight: 500; letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(8,11,16,0.55);
  border: 1px solid rgba(201, 251, 2, 0.65);
  padding: 18px 48px; cursor: pointer; opacity: 0;
  transition: opacity 700ms ease-out 1100ms, color 200ms, border-color 200ms, background 200ms, letter-spacing 220ms;
  pointer-events: none; white-space: nowrap;
}
#lock-restart.visible { opacity: 1; pointer-events: auto; }
#lock-restart:hover {
  background: rgba(201, 251, 2, 0.95);
  color: #0a0d12; border-color: rgba(201, 251, 2, 0.95);
  letter-spacing: 0.5em;
}

/* === TARGETS (UFOs - Level 1) === */
.target {
  position: fixed; width: 80px; height: 80px;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 11; /* above HUD so it's never hidden */
  opacity: 0;
  will-change: transform, opacity, filter;
  --t-ring-stroke: rgba(201,251,2,0.7);
  --t-cross-stroke: rgba(201,251,2,0.6);
  /* Removed mix-blend-mode: screen — was hiding red strokes on white clouds */
}
.target svg { width: 100%; height: 100%; overflow: visible; }
.target .t-ring {
  fill: none; stroke: var(--t-ring-stroke);
  stroke-width: 1; vector-effect: non-scaling-stroke;
  animation: targetPulse 2.5s ease-in-out infinite;
}
.target .t-progress {
  fill: none; stroke: rgba(201,251,2,0.95);
  stroke-width: 1.5; vector-effect: non-scaling-stroke;
  stroke-dasharray: 180; stroke-dashoffset: 180;
}
/* Drone delta silhouette */
.target .ufo-stroke {
  fill: rgba(220, 40, 40, 0.96);
  stroke: none;
}
.target .ufo-underside {
  fill: rgba(150, 20, 20, 0.78);
  stroke: rgba(255, 130, 130, 0.30);
  stroke-width: 0.5; vector-effect: non-scaling-stroke;
}
.target .ufo-light {
  fill: rgba(255, 230, 230, 1);
  animation: ufoLightBlink 1.8s ease-in-out infinite;
}
.target .ufo-light:nth-child(odd) { animation-delay: 0.45s; }
.target .ufo-light:nth-child(3n) { animation-delay: 0.9s; }
@keyframes ufoLightBlink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1.0; } }
.target.tracking { mix-blend-mode: normal; z-index: 20; }
.target.tracking .t-ring { stroke: rgba(201,251,2,0.95) !important; animation: targetPulse 0.8s ease-in-out infinite; }
.target.tracking .ufo-stroke    { fill: rgba(255, 60, 60, 1) !important; stroke: rgba(255, 200, 200, 0.6) !important; }
.target.tracking .ufo-underside { fill: rgba(200, 30, 30, 0.9) !important; stroke: rgba(255, 200, 200, 0.4) !important; }
.target.tracking .ufo-light     { fill: rgba(255, 255, 255, 1) !important; }
.target.tracking .ufo-light { fill: rgba(255, 255, 255, 1) !important; animation: ufoLightBlink 0.5s ease-in-out infinite; }
.target.tracking .t-label { color: rgba(255,255,255,0.92); }
.target .t-label {
  position: absolute; top: 62%; left: 100%;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 7px; letter-spacing: 0.22em;
  color: rgba(255,255,255,0.5);
  white-space: nowrap; padding-left: 4px;
  text-transform: uppercase;
}
@keyframes targetPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* === HEXAGONS (Level 2 — fly-through gates) === */
.ring {
  position: fixed;
  pointer-events: none; z-index: 7;
  opacity: 0;
  will-change: transform, opacity, left, top, width, height;
  mix-blend-mode: screen;
}
.ring svg { width: 100%; height: 100%; overflow: visible; }
.ring .r-outer {
  fill: none; stroke: rgba(255,255,255,0.75);
  stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.ring .r-inner {
  fill: none; stroke: rgba(255,255,255,0.40);
  stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.ring .r-num {
  fill: rgba(255,255,255,0.55);
  font-family: var(--tx);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-anchor: middle;
}
.ring.aim .r-outer { stroke: rgba(201,251,2,0.98) !important; stroke-width: 2.5; }
.ring.aim .r-inner { stroke: rgba(201,251,2,0.55) !important; }
.ring.aim .r-num   { fill: rgba(201,251,2,0.95) !important; }
.ring.passed .r-outer { stroke: rgba(201,251,2,0.85) !important; }
.ring.passed .r-inner { stroke: rgba(201,251,2,0.55) !important; }
.ring.missed .r-outer { stroke: rgba(255,60,60,0.95) !important; }
.ring.missed .r-inner { stroke: rgba(255,60,60,0.55) !important; }
.ring.missed .r-num   { fill: rgba(255,60,60,0.9) !important; }

#trail-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 6;
}
body:not(.level2) #trail-canvas { opacity: 0; }

body.level2 .target { display: none !important; }
/* Level 2 — hide center emblem + concentric halos that clash with the rings */
body.level2 .center,
body.level2 .emblem,
body.level2 .dots {
  display: none !important;
}
/* Level 2 — body becomes a 3D scene root so rings can be pitched in space */
body.level2 {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
/* Reticle locks to screen center + rolls AND pitches with flight */
body.level2 #scan-reticle {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(var(--roll, 0deg)) rotateX(var(--pitch, 0deg)) !important;
  transition: transform 90ms ease-out !important;
}
/* Level 2 — hide HUD chrome that doesn't belong to flight control */
body.level2 #tracking-panel,
body.level2 #ap-tracking-points,
body.level2 #ap-triangle {
  display: none !important;
}
/* Autopilot toggle stays visible in Level 2 (auto-fly mode) */

/* === COUNTER — sits directly above the CENTER EMBLEM in mid-screen === */
#target-counter {
  position: fixed;
  top: calc(50% - 148px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  pointer-events: none;
  font-family: var(--tx-mont); font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.32em; text-align: center;
  white-space: nowrap;
}
#target-counter .tc-num { font-size: 30px; display: inline-block; }
#target-counter .tc-sep {
  font-size: 22px; margin: 0 8px;
  color: rgba(255, 255, 255, 0.45);
  display: inline-block; vertical-align: 1px;
}
#target-counter .tc-current {
  color: rgba(255, 255, 255, 0.98);
  transition: color 300ms ease;
}
#target-counter .tc-total { color: rgba(255, 255, 255, 0.45); }

/* === PRE-SPLASH TEASER === */
#pre-splash {
  position: fixed; inset: 0; z-index: 505;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center;
  font-family: var(--tx-mont);
  background: rgba(8, 11, 16, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  color: rgba(255, 255, 255, 0.92);
  transition: opacity 700ms ease;
  pointer-events: auto;
}
#pre-splash.dismissed {
  opacity: 0;
  pointer-events: none;
}
/* Hide all siblings while pre-splash is visible */
#pre-splash:not(.dismissed) ~ *:not(.brand) {
  visibility: hidden !important;
}
/* brand logo visible but hide its geo/coord sub-text */
#pre-splash:not(.dismissed) ~ .brand { visibility: visible !important; }
#pre-splash:not(.dismissed) ~ .brand .geo { visibility: hidden !important; }
.prs-headline {
  font-size: clamp(26px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 56px;
  color: #fff;
}
/* Countdown */
.prs-countdown {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0 0 64px;
}
.prs-cd-unit {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 56px;
}
.prs-cd-val {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #C9FB02;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prs-cd-lbl {
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}
.prs-cd-sep {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 300;
  color: rgba(201,251,2,0.35);
  line-height: 1;
  margin-top: 2px;
  align-self: flex-start;
}
/* Body copy */
.prs-body {
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.9;
  color: rgba(255,255,255,0.88);
  max-width: 52vw;
  margin: 0 0 48px;
  font-family: var(--tx-mont);
}
/* CTA button */
.prs-btn {
  font-family: var(--tx-mont);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #C9FB02;
  background: rgba(8,11,16,0.55);
  border: 1px solid rgba(201,251,2,0.65);
  padding: 18px 56px;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.prs-btn:hover {
  background: #C9FB02;
  color: #0a0d12;
  border-color: #C9FB02;
}

/* Pre-splash mobile adjustments */
@media (max-width: 768px) {
  #pre-splash { justify-content: center; overflow-y: auto; padding: 90px 24px 40px; }
  .prs-headline { font-size: clamp(20px, 6vw, 36px); letter-spacing: 0.04em; margin-bottom: 32px; }
  .prs-countdown { margin-bottom: 40px; gap: 4px; }
  .prs-cd-unit { min-width: 44px; }
  .prs-cd-val { font-size: clamp(32px, 9vw, 52px); }
  .prs-cd-sep { font-size: clamp(26px, 7vw, 42px); }
  .prs-cd-lbl { font-size: 8px; }
  .prs-body { font-size: 11px; max-width: 88vw; margin-bottom: 32px; line-height: 1.7; }
  .prs-btn { padding: 14px 36px; font-size: 10px; }
}
@media (max-width: 480px) {
  .prs-headline { font-size: clamp(18px, 5.5vw, 28px); }
  .prs-cd-val { font-size: 32px; }
  .prs-cd-sep { font-size: 24px; }
}

/* === GAME BUTTON (shared: Initiate Scan, Begin Flight, Retry) === */
.game-btn {
  font-family: var(--tx-mont);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: #C9FB02;
  background: rgba(8,11,16,0.85);
  border: 1px solid rgba(201,251,2,0.75);
  padding: 18px 56px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.game-btn:hover, .game-btn:active {
  background: #C9FB02;
  color: #0a0d12;
  border-color: #C9FB02;
}
@media (max-width: 768px) {
  .game-btn { padding: 14px 36px; font-size: 10px; }
}

/* === SPLASH === */
#splash {
  position: fixed; inset: 0; z-index: 500;
  cursor: default;
  background: rgba(8, 11, 16, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
  font-family: var(--tx-mont);
  color: rgba(255, 255, 255, 0.92);
  pointer-events: auto;
  transition: opacity 900ms ease, backdrop-filter 900ms, -webkit-backdrop-filter 900ms;
  padding: 40px 24px;
}
#splash.dismissed {
  opacity: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
#splash .sp-blip,
#level-transition .sp-blip {
  font-family: var(--tx-mont);
  font-size: 56px;
  font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 0 0 28px;
  color: rgba(255, 255, 255, 1);
  line-height: 1.05;
  animation: spFadeIn 700ms 150ms ease both;
}
#splash .sp-divider,
#level-transition .sp-divider {
  width: 36px; height: 1px;
  background: rgba(201,251,2,0.80);
  margin: 32px auto; transform-origin: center;
  animation: spDivider 800ms 1000ms ease both;
}
#splash .sp-coords {
  font-family: var(--tx-mont); font-size: 9px;
  letter-spacing: 0.34em;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 36px; font-weight: 300;
  text-transform: uppercase;
  animation: spFadeIn 800ms 1600ms ease both;
}
@keyframes spFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spDivider { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (max-width: 600px) {
  #splash .sp-title { font-size: 24px; letter-spacing: 0.28em; }
  #splash .sp-instructions { font-size: 11px; letter-spacing: 0.18em; }
  #splash .sp-mission { font-size: 10px; letter-spacing: 0.4em; }
}

/* === HUD DETAIL LAYER (only visible when autopilot is ON) === */
#hud-detail {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 8;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
body.autopilot-on #hud-detail { opacity: 1; }
#hud-detail svg { overflow: visible; }
#hud-detail .hd-stroke { stroke: rgba(255, 255, 255, 0.42); stroke-width: 0.8; fill: none; vector-effect: non-scaling-stroke; }
#hud-detail .hd-stroke-dim { stroke: rgba(255, 255, 255, 0.20); stroke-width: 0.6; fill: none; vector-effect: non-scaling-stroke; }
#hud-detail .hd-label {
  fill: rgba(255, 255, 255, 0.55);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 7px; letter-spacing: 0.22em;
}
#hud-detail .hd-corner { position: absolute; width: 84px; height: 84px; }
#hud-detail .hd-corner.hd-tl { top: 28%; left: 4%; }
#hud-detail .hd-corner.hd-tr { top: 28%; right: 4%; transform: scaleX(-1); }
#hud-detail .hd-corner.hd-bl { bottom: 28%; left: 4%; transform: scaleY(-1); }
#hud-detail .hd-corner.hd-br { bottom: 28%; right: 4%; transform: scale(-1, -1); }
#hud-detail .hd-corner svg { width: 100%; height: 100%; }
#hud-detail .hd-scale-top { position: absolute; top: 26%; left: 22%; right: 22%; height: 18px; }
#hud-detail .hd-scale-top svg { width: 100%; height: 100%; }
#hud-detail .hd-pitch-left { position: absolute; top: 35%; left: 6%; width: 70px; height: 30%; }
#hud-detail .hd-pitch-left svg { width: 100%; height: 100%; }
#hud-detail .hd-pitch-right { position: absolute; top: 35%; right: 6%; width: 70px; height: 30%; transform: scaleX(-1); }
#hud-detail .hd-pitch-right svg { width: 100%; height: 100%; }
#hud-detail .hd-horizon {
  position: absolute; top: 50%; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0.18) 12%, rgba(255,255,255,0.18) 38%,
    transparent 45%, transparent 55%, rgba(255,255,255,0.18) 62%,
    rgba(255,255,255,0.18) 88%, transparent 100%);
}

/* === TRACKING LINES — small left/right wings near reticle === */
#tracking-panel {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 60;
  opacity: 0; transition: opacity 220ms ease;
}
#tracking-panel.active { opacity: 1; }
#tracking-panel .tp-line {
  position: absolute; top: 50%;
  height: 1.5px; background: rgba(255, 255, 255, 0.92);
  width: 0;
  max-width: 70px;
  transition: width 80ms linear;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}
/* Anchor 90px out from horizontal center, grow outward up to 70px */
#tracking-panel .tp-line-left  { right: calc(50% + 90px); }
#tracking-panel .tp-line-right { left:  calc(50% + 90px); }

/* === TICKER === */
#ticker {
  position: fixed; top: 23%;
  left: 0; right: 0; height: 16px;
  overflow: hidden; z-index: 13;
  opacity: 0; transition: opacity 1000ms ease;
  pointer-events: none; white-space: nowrap;
  font-family: var(--tx); font-size: 8px;
  letter-spacing: 0.34em; color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
#ticker.visible { opacity: 1; }
#ticker .ticker-inner {
  display: inline-block; white-space: nowrap;
  animation: tickerScroll 75s linear infinite;
  will-change: transform;
}
#ticker .ticker-inner span { display: inline-block; padding: 0 32px; }
#ticker .ticker-inner b { color: rgba(255, 255, 255, 0.85); font-weight: 400; margin: 0 6px; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* === MISSION BRIEF === */
#mission-brief {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--tx-mont);
  color: rgba(255, 255, 255, 0.95);
  text-align: center; z-index: 70;
  opacity: 0; pointer-events: none;
  transition: opacity 900ms ease;
  white-space: nowrap;
}
#mission-brief.visible { opacity: 1; }
#mission-brief .mb-blip {
  font-size: clamp(28px, 4.4vw, 48px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 28px;
  line-height: 1.05;
}
#mission-brief .mb-tag {
  font-size: 11px; letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400; margin-bottom: 30px;
}
#mission-brief .mb-title {
  font-size: 20px; font-weight: 300;
  letter-spacing: 0.30em; text-transform: uppercase;
  margin-bottom: 14px; line-height: 1.4;
  color: rgba(255, 255, 255, 0.98);
}
#mission-brief .mb-arrival {
  font-family: var(--tx-mont); font-size: 20px;
  font-weight: 300; letter-spacing: 0.30em;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase; margin-bottom: 14px;
}
#mission-brief .mb-coords {
  font-family: var(--tx-mont); font-size: 20px;
  font-weight: 300; letter-spacing: 0.30em;
  color: rgba(255, 255, 255, 0.96);
  margin-bottom: 28px;
  white-space: pre; line-height: 1.5;
}
#mission-brief .mb-divider {
  width: 36px; height: 1px;
  background: rgba(255, 255, 255, 0.45);
  margin: 0 auto 28px;
}
#mission-brief .mb-auth {
  font-family: var(--tx); font-size: 11px;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); font-weight: 400;
}
#mission-brief .mb-auth b {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400; margin: 0 4px;
}
/* === VOLUME CONTROL — bottom-centre, always visible === */
#volume-control {
  transition: opacity 200ms ease;
}
body.lightbox-open #volume-control,
body.lightbox-open #legal-links {
  opacity: 0;
  pointer-events: none;
}
#volume-control {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
#vc-icon {
  width: 32px; height: 32px;
  cursor: pointer;
  transition: opacity 180ms;
}
#vc-icon .vc-body,
#vc-icon .vc-wave-1,
#vc-icon .vc-wave-2 {
  fill: none;
  stroke: rgba(255,255,255,0.85);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#vc-icon .vc-body { fill: rgba(255,255,255,0.85); }
#vc-icon .vc-mute {
  stroke: rgba(255,255,255,0.85);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
#volume-control.muted #vc-icon .vc-mute { opacity: 1; }
#volume-control.muted #vc-icon .vc-wave-1,
#volume-control.muted #vc-icon .vc-wave-2 { opacity: 0.18; }
#vc-icon:hover { opacity: 0.7; }

/* === LEGAL LINKS === */
#legal-links {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  pointer-events: auto;
  white-space: nowrap;
}
.legal-link {
  font-family: var(--tx-mont);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  background: none; border: none;
  cursor: pointer; padding: 2px 0;
  transition: color 180ms ease;
}
.legal-link:hover { color: rgba(255,255,255,0.65); }
.legal-sep {
  font-size: 11px;
  color: rgba(255,255,255,0.15);
}

/* === LIGHTBOXES === */
.lightbox {
  position: fixed; inset: 0; z-index: 19999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 250ms ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(8,11,16,0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.lb-card {
  position: relative; z-index: 1;
  background: rgba(14,18,28,0.97);
  border: 1px solid rgba(255,255,255,0.10);
  width: min(560px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding: 48px 40px 40px;
  font-family: var(--tx-mont);
  color: rgba(255,255,255,0.78);
  scrollbar-width: thin;
  scrollbar-color: rgba(201,251,2,0.3) transparent;
}
.lb-close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none;
  color: rgba(255,255,255,0.35);
  font-size: 14px; cursor: pointer; padding: 4px;
  transition: color 150ms ease;
}
.lb-close:hover { color: #C9FB02; }
.lb-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; margin: 0 0 24px;
}
.lb-meta {
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase; margin: -16px 0 24px;
}
.lb-content h3 {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(201,251,2,0.80);
  margin: 24px 0 8px;
}
.lb-content p, .lb-content li {
  font-size: 14px; line-height: 1.75;
  color: rgba(255,255,255,0.62);
  margin: 0 0 10px;
}
.lb-content ul {
  padding-left: 18px; margin: 0 0 10px;
}
.lb-content a {
  color: rgba(201,251,2,0.80);
  text-decoration: none;
}
.lb-content a:hover { text-decoration: underline; }
.lb-content strong { color: rgba(255,255,255,0.88); }


/* Mobile: slightly larger touch target */
@media (max-width: 768px) {
  #volume-control { bottom: 48px; }
  #vc-icon { width: 32px; height: 32px; }
}

/* === MOSAIC MODE — image button centred at bottom === */
#mosaic-btn-wrap {
  position: fixed; bottom: 14%; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  z-index: 220;
  pointer-events: auto !important;
}
.mosaic-activate-lbl {
  font-family: var(--tx); font-size: 10px;
  letter-spacing: 0.52em;
  color: rgba(201, 251, 2, 0.75);
  text-transform: uppercase;
  font-weight: 400;
}
#autopilot-toggle {
  background: none;
  border: 1px solid rgba(201, 251, 2, 0.45);
  padding: 14px 20px;
  cursor: pointer;
  pointer-events: auto !important;
  display: block;
  position: relative;
  transition: border-color 200ms;
}
#autopilot-toggle:hover {
  border-color: rgba(201, 251, 2, 0.85);
}
#autopilot-toggle.active {
  border-color: rgba(201, 251, 2, 0.95);
  background: rgba(201, 251, 2, 0.55);
  box-shadow: inset 0 0 0 999px rgba(201, 251, 2, 0.55);
}
#autopilot-toggle.tracking {
  border-color: rgba(201, 251, 2, 0.85);
}
#autopilot-toggle::before,
#autopilot-toggle::after {
  content: '';
  position: absolute; inset: -1px;
  border: 1px solid rgba(201, 251, 2, 0.55);
  pointer-events: none;
  animation: mosaicRipple 3.0s ease-out infinite;
}
#autopilot-toggle::after {
  animation-delay: 1.5s;
}
body.autopilot-on #autopilot-toggle::before,
body.autopilot-on #autopilot-toggle::after {
  border-color: rgba(201, 251, 2, 0.75);
  animation-duration: 1.4s;
}
body.autopilot-on #autopilot-toggle::after {
  animation-delay: 0.7s;
}
@keyframes mosaicRipple {
  0%   { transform: scaleX(1);    opacity: 0.8; }
  100% { transform: scaleX(1.9);  opacity: 0;   }
}
#autopilot-toggle img {
  width: 180px;
  display: block;
  opacity: 0.80;
  transition: opacity 200ms, filter 200ms;
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(201,251,2,0.4));
}
#autopilot-toggle:hover img {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(201,251,2,0.7));
}
#autopilot-toggle.active img {
  opacity: 1;
  filter: brightness(0);
}
#autopilot-toggle.tracking img {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(201,251,2,0.9));
  animation: autopilotPulse 1.0s ease-in-out infinite;
}
@keyframes autopilotPulse {
  0%, 100% { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(201,251,2,0.7)); }
  50%       { filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(201,251,2,1)); }
}
#mosaic-status-lbl {
  font-family: var(--tx); font-size: 9px;
  letter-spacing: 0.38em;
  color: rgba(201, 251, 2, 0.55);
  text-transform: uppercase;
  font-weight: 300;
}

/* === AUTOPILOT THREE TRACKING POINTS === */
#ap-tracking-points {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 65;
  opacity: 0;
  transition: opacity 220ms ease;
}
body.autopilot-on #ap-tracking-points.active { opacity: 1; }

/* Triangle connecting the three autopilot scan points */
#ap-triangle {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 64;
  opacity: 0;
  transition: opacity 250ms ease;
}
body.autopilot-on #ap-triangle.active { opacity: 1; }
#ap-triangle line {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
.aptp {
  position: absolute;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.aptp svg { width: 100%; height: 100%; overflow: visible; }
.aptp svg circle {
  fill: none;
  stroke: rgba(201, 251, 2, 0.75);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.aptp svg circle:last-child { fill: rgba(201, 251, 2, 0.9); stroke: none; }
.aptp .aptp-num {
  position: absolute;
  top: 50%; left: 100%;
  transform: translateY(-50%);
  margin-left: 8px;
  font-family: var(--tx);
  font-size: 8px;
  letter-spacing: 0.24em;
  color: rgba(201, 251, 2, 0.85);
  white-space: nowrap;
}
.aptp.primary svg circle { stroke: rgba(201, 251, 2, 1); stroke-width: 1.5; }
.aptp.primary svg circle:last-child { fill: rgba(201, 251, 2, 1); }
.aptp.primary .aptp-num { color: rgba(201, 251, 2, 1); }
.aptp.secondary svg circle { stroke: rgba(201, 251, 2, 0.55); }
.aptp.secondary .aptp-num { color: rgba(201, 251, 2, 0.55); }
.aptp.tertiary svg circle { stroke: rgba(201, 251, 2, 0.30); }
.aptp.tertiary .aptp-num { color: rgba(201, 251, 2, 0.30); }

/* === AUTOPILOT-ON: lime HUD accents === */
body.autopilot-on #scan-reticle .sl-stroke,
body.autopilot-on #scan-reticle .scan-ring {
  stroke: rgba(201, 251, 2, 0.85) !important;
}
body.autopilot-on #scan-reticle .progress-arc {
  stroke: rgba(201, 251, 2, 0.95) !important;
}
body.autopilot-on #scan-reticle .scan-bar {
  fill: rgba(201, 251, 2, 0.75) !important;
}
body.autopilot-on #hud-detail .hd-stroke {
  stroke: rgba(150, 200, 0, 0.55) !important;
}
body.autopilot-on #hud-detail .hd-stroke-dim {
  stroke: rgba(150, 200, 0, 0.28) !important;
}
body.autopilot-on #hud-detail .hd-label {
  color: rgba(201, 251, 2, 0.75) !important;
}
body.autopilot-on #ap-triangle line {
  stroke: rgba(255, 255, 255, 0.92) !important;
}
body.autopilot-on #ticker {
  color: rgba(201, 251, 2, 0.75);
}
/* === LEVEL CARD (level-transition) === */
#level-transition {
  position: fixed; inset: 0; z-index: 480;
  background: rgba(8, 11, 16, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
  font-family: var(--tx-mont);
  color: rgba(255, 255, 255, 0.92);
  opacity: 0; pointer-events: none;
  transition: opacity 600ms ease;
  cursor: default;
}
#level-transition.visible { opacity: 1; pointer-events: auto; }
#splash .lt-tag,
#level-transition .lt-tag {
  font-size: 11px; letter-spacing: 0.5em;
  color: rgba(201,251,2,0.75);
  text-transform: uppercase; font-weight: 400;
  margin-bottom: 30px;
}
#splash .lt-title,
#level-transition .lt-title {
  font-size: 56px; font-weight: 700;
  letter-spacing: 0.06em; color: white;
  text-transform: uppercase; margin: 0 0 16px;
}
#splash .lt-subtitle,
#level-transition .lt-subtitle {
  font-size: 18px; font-weight: 300;
  letter-spacing: 0.36em;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase; margin-bottom: 50px;
}
/* === LEVEL 2 FAIL CARD === */
#level-fail {
  position: fixed; inset: 0; z-index: 482;
  background: rgba(10, 6, 6, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  backdrop-filter: blur(22px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
  font-family: var(--tx-mont);
  color: rgba(255, 255, 255, 0.92);
  opacity: 0; pointer-events: none;
  transition: opacity 600ms ease;
  cursor: default;
}
#level-fail.visible { opacity: 1; pointer-events: auto; }
#level-fail .lf-tag {
  font-size: 11px; letter-spacing: 0.5em;
  color: rgba(255, 80, 80, 0.85);
  text-transform: uppercase; font-weight: 400;
  margin-bottom: 30px;
}
#level-fail .lf-title {
  font-size: 56px; font-weight: 700;
  letter-spacing: 0.06em; color: rgba(255, 80, 80, 1);
  text-transform: uppercase; margin: 0 0 16px;
}
#level-fail .lf-stats {
  font-size: 18px; font-weight: 300;
  letter-spacing: 0.36em;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase; margin-bottom: 50px;
}
#level-fail .lf-stats span {
  color: rgba(255, 80, 80, 0.95);
  font-weight: 500;
}
#level-fail .lt-btn {
  font-family: var(--tx-mont); font-size: 12px;
  letter-spacing: 0.42em;
  color: rgba(255, 80, 80, 0.95);
  background: rgba(8,11,16,0.55);
  border: 1px solid rgba(255, 80, 80, 0.65);
  padding: 18px 48px; text-transform: uppercase;
  cursor: pointer; font-weight: 500;
  transition: background 220ms ease, color 220ms ease, letter-spacing 220ms ease;
}
#level-fail .lt-btn:hover {
  background: rgba(255, 80, 80, 0.95);
  color: #0a0d12; letter-spacing: 0.5em;
}

/* === MOBILE: tablet & phone responsive === */
@media (max-width: 768px) {
  .ls-left, .ls-right { width: 46%; }
  .center { width: 80%; }

  /* Brand + counter scaled down */
  .brand { top: 4%; }
  .brand img { height: 28px; }
  .brand .geo {
    margin-top: 60px;
    font-size: 8px; letter-spacing: 0.22em;
  }
  #target-counter {
    top: calc(50% - 80px);
  }
  #target-counter .tc-num { font-size: 16px; }
  #target-counter .tc-sep { font-size: 13px; }

  /* Win screen — tighter spacing on tablet */
  #lock-date     { margin-bottom: 10px; }
  #lock-disclaimer { margin-bottom: 32px; }
  #lock-restart { font-size: 10px; padding: 14px 28px; letter-spacing: 0.32em; }

  /* Mosaic button — smaller on mobile */
  #autopilot-toggle img { width: 130px; }

  /* FOV indicator — smaller, only essentials */
  .fov-indicator {
    font-size: 6px;
    letter-spacing: 0.18em;
    gap: 8px;
  }

  /* Splash adjustments */
  #splash {
    padding: 20px 16px;
  }
  #splash .sp-blip,
  #level-transition .sp-blip { font-size: 28px; }
  #splash .sp-coords {
    font-size: 8px;
    letter-spacing: 0.26em;
    margin-top: 24px;
  }

  /* Mission brief — smaller typography */
  #mission-brief .mb-title,
  #mission-brief .mb-arrival,
  #mission-brief .mb-coords {
    font-size: 16px;
    letter-spacing: 0.22em;
  }
  #mission-brief .mb-tag,
  #mission-brief .mb-auth {
    font-size: 9px;
    letter-spacing: 0.34em;
  }

  /* Level transition / fail */
  #level-transition .lt-title,
  #level-fail .lf-title {
    font-size: 36px;
    letter-spacing: 0.04em;
  }
  #level-transition .lt-subtitle,
  #level-fail .lf-stats {
    font-size: 14px;
    letter-spacing: 0.28em;
    max-width: 88%;
    text-align: center;
  }
  #level-transition .lt-btn,
  #level-fail .lt-btn {
    font-size: 10px;
    padding: 14px 28px;
  }

  /* Ticker — smaller font, faster scroll */
  #ticker { font-size: 7px; height: 14px; top: 22%; }

  /* HUD detail — corner brackets smaller */
  #hud-detail .hd-corner {
    width: 60px; height: 60px;
  }
  #hud-detail .hd-pitch-left,
  #hud-detail .hd-pitch-right {
    width: 50px;
  }

  /* Counters — coords blocks at edges hidden (too cluttered on phone) */
  .coord-block { display: none; }

  /* Linestacks dimmed further on small screens */
  .linestack { opacity: 0.55; }
}

/* === PHONE PORTRAIT: < 480px === */
@media (max-width: 480px) {
  .brand img { height: 22px; }
  #target-counter .tc-num { font-size: 14px; }
  /* Win screen phone — tighter gaps */
  #lock-date { white-space: normal; margin-bottom: 10px; }
  #lock-cta { max-width: 84vw; margin-bottom: 6px; }
  #lock-disclaimer { margin-bottom: 28px; }
}

/* Hide custom cursor on touch devices — gyro/touch is primary input */
.is-mobile { cursor: default; }
.is-mobile #scan-reticle { mix-blend-mode: normal; }