/* ============ NYX: VANGUARDIA — estilos ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  position: fixed; inset: 0;
  width: 100%; height: 100%; overflow: hidden;
  background: #030014; touch-action: manipulation;
  overscroll-behavior: none;
  font-family: 'Courier New', monospace;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
canvas { display: block; }
canvas, #hud { touch-action: none; }
.overlay, #hangar, #settings, .final-record { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.hidden { display: none !important; }

/* ---------- colores neón ---------- */
.neon-cyan    { color: #0ff; text-shadow: 0 0 8px #0ff; }
.neon-magenta { color: #f0f; text-shadow: 0 0 8px #f0f; }
.neon-yellow  { color: #ff0; text-shadow: 0 0 8px #ff0; }
.neon-red     { color: #f44; text-shadow: 0 0 10px #f00; }
.neon-green   { color: #0f8; text-shadow: 0 0 8px #0f8; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }

.hud-tl { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: calc(20px + env(safe-area-inset-left)); }
#score { font-size: 26px; letter-spacing: 3px; }
#combo { font-size: 15px; margin-top: 2px; min-height: 18px; }

.hud-tc {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(340px, 44vw); text-align: center;
}
#levelrow { font-size: 13px; letter-spacing: 3px; color: #9df; margin-bottom: 4px; }
#levelrow .lbl { opacity: .7; }
#levelnum { font-size: 16px; }

.hud-tr { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right)); text-align: right; }
#gamepadico { font-size: 18px; color: #567; margin-bottom: 6px; transition: color .3s; }
#gamepadico.on { color: #0f8; text-shadow: 0 0 10px #0f8; }
#powerups { font-size: 12px; letter-spacing: 1px; }
.pu-item { margin-bottom: 5px; }
.pu-item .bar { width: 110px; height: 4px; margin-top: 2px; margin-left: auto; }

.hud-bc {
  position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: min(300px, 70vw); text-align: center;
}
.hull-label { font-size: 11px; letter-spacing: 3px; color: #0ff; text-shadow: 0 0 6px #0ff; margin: 5px 0 3px; }
#shieldpips { min-height: 14px; letter-spacing: 4px; font-size: 12px; color: #0f8; text-shadow: 0 0 8px #0f8; }
#statsrow { font-size: 10px; color: #79c; letter-spacing: 1px; margin-top: 5px; opacity: .8; }

/* ---------- barras ---------- */
.bar {
  height: 8px; border: 1px solid #0ff5;
  box-shadow: 0 0 8px #0ff3, inset 0 0 6px #0002;
  background: #0113;
}
.bar > div { height: 100%; width: 100%; transition: width .15s linear; }

.xpbar { height: 5px; border-color: #ff05; box-shadow: 0 0 8px #ff03; }
#xpfill { background: linear-gradient(90deg, #fa0, #ff0); box-shadow: 0 0 8px #ff0; width: 0%; }

.hullbar { height: 10px; }
#hullfill { background: linear-gradient(90deg, #0ff, #08f); box-shadow: 0 0 12px #0ff; }
#hullfill.low { background: linear-gradient(90deg, #f33, #f80); box-shadow: 0 0 12px #f33; }

#bosswrap { margin-top: 8px; }
#bossname { font-size: 12px; letter-spacing: 4px; margin-bottom: 3px; animation: blink 1s infinite; }
.bossbar { height: 9px; border-color: #f445; box-shadow: 0 0 10px #f003; }
#bossfill { background: linear-gradient(90deg, #f0f, #f33); box-shadow: 0 0 14px #f0f; }

.pu-fill-rapid  { background: #ff0; box-shadow: 0 0 6px #ff0; }
.pu-fill-triple { background: #f0f; box-shadow: 0 0 6px #f0f; }
.pu-fill-plasma { background: #a6f; box-shadow: 0 0 6px #a6f; }
.pu-fill-over   { background: #fd0; box-shadow: 0 0 6px #fd0; }
.pu-fill-vamp   { background: #f04; box-shadow: 0 0 6px #f04; }
.pu-fill-tempo  { background: #0bf; box-shadow: 0 0 6px #0bf; }
.pu-fill-ghost  { background: #ddd; box-shadow: 0 0 6px #fff; }

@keyframes blink { 50% { opacity: .45; } }

/* ---------- mensaje central ---------- */
#message {
  position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%);
  font-size: clamp(26px, 5vw, 44px); letter-spacing: 8px; text-align: center;
  color: #0ff; text-shadow: 0 0 20px #0ff, 0 0 60px #08f;
  opacity: 0; transition: opacity .3s;
  white-space: nowrap;
}
#message.show { opacity: 1; }
#message.danger { color: #f44; text-shadow: 0 0 20px #f00, 0 0 60px #f00; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; overflow-y: auto; overflow-x: hidden;
  padding: 16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background: rgba(3, 0, 20, .78); backdrop-filter: blur(5px);
  color: #fff;
}

/* La portada siempre cabe en el viewport; no debe comportarse como una página. */
#menu { overflow: hidden; width: 100%; max-width: 100vw; }
#menu > * { max-width: 100%; flex-shrink: 0; }

/* ---------- carga inicial / desbloqueo de audio móvil ---------- */
#boot {
  position:fixed; inset:0; z-index:120; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; padding:20px;
  overflow:hidden; color:#fff; text-align:center; background:#030014;
  transition:opacity .35s ease, visibility .35s ease;
}
#boot.done { opacity:0; visibility:hidden; pointer-events:none; }
.boot-grid { position:absolute; inset:48% -10% -20%; opacity:.35; transform:perspective(420px) rotateX(63deg); transform-origin:center top; background-image:linear-gradient(#0ff4 1px,transparent 1px),linear-gradient(90deg,#f0f3 1px,transparent 1px); background-size:52px 52px; }
#boot > :not(.boot-grid) { position:relative; }
.bootbar { width:min(440px,78vw); height:9px; overflow:hidden; border:1px solid #0ff9; background:#001024; box-shadow:0 0 14px #0ff4; }
#bootfill { width:0; height:100%; background:linear-gradient(90deg,#0ff,#78f,#f0f); box-shadow:0 0 16px #0ff; transition:width .12s linear; }
#bootstatus { min-height:18px; color:#9df; font-size:11px; letter-spacing:2px; }
.boot-hint { color:#567; font-size:10px; letter-spacing:1px; }
#bootenter:disabled { opacity:.38; cursor:wait; filter:none; }
.title {
  /* el nombre NYX:VANGUARDIA es más largo que el logo original: tamaño contenido */
  font-size: clamp(28px, 6.5vw, 60px); letter-spacing: 8px;
  color: #0ff; text-shadow: 0 0 20px #0ff, 0 0 60px #08f;
}
.title span { color: #f0f; text-shadow: 0 0 20px #f0f, 0 0 60px #f0f; }
.gameover-title { color: #f33; text-shadow: 0 0 20px #f33, 0 0 70px #f00; }
.subtitle { color: #79c; font-size: 13px; letter-spacing: 4px; }

.panel {
  border: 1px solid #0ff4; padding: 16px 26px;
  box-shadow: 0 0 16px #0ff2, inset 0 0 20px #0ff1;
  color: #9df; font-size: 13px; line-height: 2; max-width: 520px;
}
.panel .key { color: #ff0; text-shadow: 0 0 8px #ff0; }
.panel .warn { color: #f66; text-shadow: 0 0 8px #f00; }

.neonbtn {
  pointer-events: auto; cursor: pointer;
  font-family: inherit; font-size: 18px; letter-spacing: 4px;
  padding: 14px 44px; background: transparent; color: #0ff;
  border: 2px solid #0ff; box-shadow: 0 0 16px #0ff8, inset 0 0 16px #0ff3;
  text-shadow: 0 0 8px #0ff; transition: all .15s;
}
.neonbtn:hover, .neonbtn.gp-focus {
  background: #0ff2; box-shadow: 0 0 30px #0ff, inset 0 0 24px #0ff5;
}
button:focus-visible, input:focus-visible, a:focus-visible, [role="button"]:focus-visible,
button.gp-focus, input.gp-focus, a.gp-focus, [role="button"].gp-focus {
  outline: 3px solid #fff; outline-offset: 4px;
  filter: brightness(1.25); text-shadow: 0 0 10px currentColor;
}
button:active, [role="button"]:active { filter: brightness(1.35); }
@media (prefers-reduced-motion: reduce) {
  .menu-orbit, .warp-lines i, .final-warp i { animation-duration: 4s !important; }
  * { scroll-behavior: auto !important; }
}
#finalscore { font-size: 26px; letter-spacing: 3px; }
.gp-hint { color: #567; font-size: 12px; letter-spacing: 2px; min-height: 16px; }

/* ---------- cartas de mejora ---------- */
.uptitle { font-size: clamp(24px, 5vw, 38px); letter-spacing: 6px; }
#cards {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  padding: 10px 16px; pointer-events: auto;
}
.card {
  width: 190px; padding: 20px 16px; cursor: pointer;
  border: 2px solid var(--c, #0ff); color: #fff;
  background: rgba(0, 8, 30, .6);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 50%, transparent),
              inset 0 0 18px color-mix(in srgb, var(--c) 15%, transparent);
  transition: transform .12s, box-shadow .12s;
}
.card:hover, .card.gp-focus {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 0 30px var(--c), inset 0 0 26px color-mix(in srgb, var(--c) 30%, transparent);
}
.card .ico { font-size: 34px; margin-bottom: 8px; color: var(--c); text-shadow: 0 0 14px var(--c); }
.card .nm { font-size: 15px; letter-spacing: 2px; color: var(--c); text-shadow: 0 0 8px var(--c); margin-bottom: 8px; }
.card .ds { font-size: 11px; color: #9db; line-height: 1.6; }
.card .lv { font-size: 10px; color: #678; margin-top: 8px; letter-spacing: 1px; }

/* ---------- flash y números de daño ---------- */
#flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 8;
  opacity: 0; transition: opacity .25s;
}
#dmgnums { position: fixed; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.dmg-num {
  position: absolute; top: 0; left: 0; font-family: 'Courier New', monospace;
  font-size: 15px; font-weight: bold; color: #fff; text-shadow: 0 0 6px #0ff;
  will-change: transform, opacity;
}
.dmg-num.crit { font-size: 22px; color: #ffaa00; text-shadow: 0 0 10px #f80; }
.dmg-num.heal { color: #0f8; text-shadow: 0 0 8px #0f8; }
.dmg-num.bonus { font-size: 18px; color: #ff0; text-shadow: 0 0 10px #ff0; }

/* ---------- misiles ---------- */
.neon-orange { color: #f80; text-shadow: 0 0 8px #f80; }
#missiles { font-size: 16px; letter-spacing: 2px; margin-top: 4px; }
#cyclenum { margin-left: 8px; font-size: 13px; }

/* ---------- menú: filas de botones, récords ---------- */
.btnrow { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.neonbtn.alt { color: #f0f; border-color: #f0f; box-shadow: 0 0 14px #f0f6, inset 0 0 14px #f0f2; text-shadow: 0 0 8px #f0f; font-size: 14px; padding: 12px 24px; }
.neonbtn.alt:hover { background: #f0f2; }
.neonbtn.small { font-size: 13px; padding: 8px 18px; }
.panel.compact { line-height: 1.7; font-size: 12px; padding: 12px 20px; }

.scorespanel { min-height: 20px; }
.scoretable { border-collapse: collapse; font-size: 13px; color: #9df; letter-spacing: 1px; }
.scoretable td { padding: 2px 12px; text-align: left; }
.scoretable td:nth-child(3) { color: #ff0; text-shadow: 0 0 6px #ff0; }
.scoretable tr.hl td { color: #0ff; text-shadow: 0 0 8px #0ff; }
.score-empty { color: #567; font-size: 12px; letter-spacing: 2px; }

/* ---------- iniciales de récord ---------- */
#initialsrow { display: flex; gap: 12px; align-items: center; pointer-events: auto; }
#initials {
  width: 90px; text-align: center; font-family: inherit; font-size: 24px;
  letter-spacing: 6px; text-transform: uppercase;
  background: transparent; color: #ff0; border: 2px solid #ff0;
  box-shadow: 0 0 12px #ff06, inset 0 0 10px #ff03; outline: none; padding: 6px;
}

/* ---------- hangar ---------- */
#hangaritems {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  max-width: 760px; pointer-events: auto;
}
.shopitem {
  width: 200px; padding: 14px; border: 1px solid #0ff5; cursor: pointer;
  background: rgba(0,8,30,.6); box-shadow: 0 0 10px #0ff2;
  transition: box-shadow .15s, transform .15s;
}
.shopitem:hover:not(.off) { box-shadow: 0 0 22px #0ff8; transform: translateY(-3px); }
.shopitem.off { opacity: .45; cursor: default; }
.shopitem .ico { font-size: 24px; color: #0ff; text-shadow: 0 0 10px #0ff; }
.shopitem .nm { font-size: 13px; color: #0ff; letter-spacing: 2px; margin: 4px 0; }
.shopitem .ds { font-size: 11px; color: #9db; }
.shopitem .cost { font-size: 12px; color: #ff0; text-shadow: 0 0 6px #ff0; margin-top: 6px; }
.shopitem .lv { font-size: 10px; color: #678; margin-top: 3px; }

/* ---------- naves del hangar ---------- */
.hangar-sec { font-size: 12px; letter-spacing: 4px; margin-top: 4px; }
#shipitems {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: 900px; pointer-events: auto;
}
.shopitem.ship { width: 160px; border-color: var(--c, #0ff); }
.shopitem.ship .ico, .shopitem.ship .nm { color: var(--c, #0ff); text-shadow: 0 0 10px var(--c, #0ff); }
.shopitem.ship .stats { font-size: 10px; color: #9db; margin-top: 5px; line-height: 1.5; }
.shopitem.ship.equipped {
  box-shadow: 0 0 24px var(--c), inset 0 0 18px color-mix(in srgb, var(--c) 25%, transparent);
}
.shopitem.ship .tag { font-size: 11px; letter-spacing: 2px; margin-top: 6px; }
#hangar { overflow-y: auto; padding: 20px 0; }

/* ---------- opciones ---------- */
.setpanel { display: flex; flex-direction: column; gap: 16px; pointer-events: auto; min-width: 300px; }
.setpanel label { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; letter-spacing: 2px; color: #9df; }
.setpanel input[type=range] { accent-color: #0ff; width: 150px; }
.setpanel input[type=checkbox] { accent-color: #0ff; width: 18px; height: 18px; }
.setrow-title { font-size: 12px; letter-spacing: 2px; color: #9df; margin-bottom: -8px; }
.qualrow { display: flex; gap: 8px; }
.qualrow .diffbtn { flex: 1; padding: 8px 6px; }

/* ---------- selector de dificultad ---------- */
.diffbtn {
  pointer-events: auto; cursor: pointer; font-family: inherit;
  font-size: 12px; letter-spacing: 3px; padding: 8px 18px;
  background: transparent; color: #567; border: 1px solid #345;
  transition: all .15s;
}
.diffbtn.active {
  color: #0ff; border-color: #0ff;
  box-shadow: 0 0 12px #0ff6, inset 0 0 10px #0ff2; text-shadow: 0 0 8px #0ff;
}
.diffbtn[data-diff="dificil"].active {
  color: #f44; border-color: #f44;
  box-shadow: 0 0 12px #f446, inset 0 0 10px #f442; text-shadow: 0 0 8px #f00;
}

/* ---------- selector de modo (menú principal) ---------- */
.modebtns { gap: 20px; }
.modebtn {
  pointer-events: auto; cursor: pointer; font-family: inherit;
  width: min(250px, 42vw); padding: 18px 14px; text-align: center;
  background: rgba(0, 8, 30, .55); color: #fff;
  border: 2px solid #0ff; box-shadow: 0 0 18px #0ff6, inset 0 0 18px #0ff2;
  transition: all .15s;
}
.modebtn:hover, .modebtn.gp-focus { background: #0ff2; box-shadow: 0 0 32px #0ff, inset 0 0 26px #0ff4; transform: translateY(-3px); }
.modebtn.alt { border-color: #f0f; box-shadow: 0 0 18px #f0f6, inset 0 0 18px #f0f2; }
.modebtn.alt:hover, .modebtn.alt.gp-focus { background: #f0f2; box-shadow: 0 0 32px #f0f, inset 0 0 26px #f0f4; }
/* HISTORIA II (expansión): dorado Precursor; bloqueado hasta terminar la base */
.modebtn.exp { border-color: #fc3; box-shadow: 0 0 18px #fc36, inset 0 0 18px #fc32; }
.modebtn.exp:hover, .modebtn.exp.gp-focus { background: #fc32; box-shadow: 0 0 32px #fc3, inset 0 0 26px #fc34; }
.modebtn.exp.locked { opacity: .45; filter: saturate(.4); }
.modebtn.exp.locked:hover { transform: none; background: rgba(0, 8, 30, .55); }
.mb-title { font-size: 22px; letter-spacing: 5px; }
.mb-sub { font-size: 10px; letter-spacing: 2px; color: #79c; margin-top: 6px; }
.mb-progress { font-size: 10px; letter-spacing: 1px; color: #ff0; text-shadow: 0 0 6px #ff0; margin-top: 8px; min-height: 13px; }

/* ---------- pantalla de historia (archivo) ---------- */
.storypanel { max-width: 560px; min-height: 130px; line-height: 1.9; text-align: left; }
.st-title { font-size: 14px; letter-spacing: 3px; margin-bottom: 10px; }
.st-text { font-size: 14px; color: #bdf; min-height: 80px; }
.st-text .cursor { display: inline-block; width: 9px; background: #0ff; box-shadow: 0 0 8px #0ff; animation: blink .7s infinite; }
.st-dots { display: flex; gap: 10px; }
.st-dots i { width: 9px; height: 9px; border: 1px solid #0ff8; transform: rotate(45deg); transition: all .2s; }
.st-dots i.on { background: #0ff; box-shadow: 0 0 10px #0ff; }

/* ---------- mapa estelar (overlay transparente sobre el 3D) ---------- */
#mapui { position: fixed; inset: 0; z-index: 10; pointer-events: none; color: #fff; }
.map-top {
  position: absolute; top: calc(18px + env(safe-area-inset-top)); left: 0; right: 0;
  text-align: center; display: flex; flex-direction: column; gap: 4px;
}
.map-title { font-size: clamp(16px, 3vw, 24px); letter-spacing: 6px; }
.map-bottom {
  position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.map-node { font-size: clamp(20px, 4vw, 30px); letter-spacing: 6px; }
.map-objective { font-size: 12px; letter-spacing: 2px; color: #0f8; text-shadow: 0 0 8px #0f8; min-height: 15px; }
.map-medals { font-size: 16px; letter-spacing: 6px; min-height: 20px; }
.map-medals .off { opacity: .25; }

/* bitácora del piloto: estadísticas por nivel (mapa y briefing) */
.log-stats { color: #6ac; font-size: 11px; letter-spacing: 1.5px; min-height: 14px; }
.log-stats b { color: #0ff; font-weight: 700; }
.log-stats .off { color: #567; }

/* botón de acción destructiva (borrar progreso) */
.neonbtn.danger { color: #f66; border-color: #f66; }
.neonbtn.danger:hover, .neonbtn.danger:focus-visible { background: rgba(255, 60, 60, .12); box-shadow: 0 0 14px rgba(255, 60, 60, .45); }
#mapui .neonbtn, #mapui .map-arrow { pointer-events: auto; }
#mapui .btnrow { margin-top: 4px; }
.map-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(12px + env(safe-area-inset-left));
  width: 52px; height: 52px; cursor: pointer; font-family: inherit;
  font-size: 22px; color: #0ff; background: rgba(0, 8, 30, .4);
  border: 1px solid #0ff8; box-shadow: 0 0 12px #0ff4;
}
.map-arrow.right { left: auto; right: calc(12px + env(safe-area-inset-right)); }
.map-arrow:hover { background: #0ff2; box-shadow: 0 0 20px #0ff8; }
.map-locked { color: #567 !important; text-shadow: none !important; }

/* ---------- briefing ---------- */
.brief-objective { font-size: 15px; letter-spacing: 3px; }

/* ---------- pantalla de carga / salto warp ---------- */
#loading { background: #030014; overflow: hidden; }
.load-title { font-size: clamp(22px, 4.5vw, 34px); letter-spacing: 8px; animation: blink 1.2s infinite; }
.loadbar { width: min(320px, 70vw); height: 6px; }
#loadfill { background: linear-gradient(90deg, #0ff, #f0f); box-shadow: 0 0 14px #0ff; width: 0%; }
.warp-lines { position: absolute; inset: 0; pointer-events: none; }
.warp-lines i {
  position: absolute; top: 50%; left: 50%;
  width: 2px; height: 38vh; border-radius: 2px;
  background: linear-gradient(180deg, transparent, #0ff, transparent);
  opacity: 0; animation: warpline 1.1s linear infinite;
}
.warp-lines i:nth-child(2n) { background: linear-gradient(180deg, transparent, #f0f, transparent); }
.warp-lines i:nth-child(1)  { --a: 0deg;   animation-delay: 0s; }
.warp-lines i:nth-child(2)  { --a: 30deg;  animation-delay: .12s; }
.warp-lines i:nth-child(3)  { --a: 60deg;  animation-delay: .30s; }
.warp-lines i:nth-child(4)  { --a: 90deg;  animation-delay: .05s; }
.warp-lines i:nth-child(5)  { --a: 120deg; animation-delay: .40s; }
.warp-lines i:nth-child(6)  { --a: 150deg; animation-delay: .22s; }
.warp-lines i:nth-child(7)  { --a: 180deg; animation-delay: .55s; }
.warp-lines i:nth-child(8)  { --a: 210deg; animation-delay: .18s; }
.warp-lines i:nth-child(9)  { --a: 240deg; animation-delay: .48s; }
.warp-lines i:nth-child(10) { --a: 270deg; animation-delay: .08s; }
.warp-lines i:nth-child(11) { --a: 300deg; animation-delay: .35s; }
.warp-lines i:nth-child(12) { --a: 330deg; animation-delay: .60s; }
@keyframes warpline {
  0%   { transform: rotate(var(--a)) translateY(-6vh) scaleY(.2); opacity: 0; }
  30%  { opacity: .9; }
  100% { transform: rotate(var(--a)) translateY(-58vh) scaleY(1.4); opacity: 0; }
}

/* ---------- nivel completado ---------- */
.clear-medals { font-size: 30px; letter-spacing: 12px; }
.clear-medals .off { opacity: .22; }
.clear-medals .lbl { display: block; font-size: 10px; letter-spacing: 2px; color: #79c; margin-top: 6px; }

/* ---------- objetivo en el HUD ---------- */
#objective { font-size: 12px; letter-spacing: 2px; margin-top: 4px; }
.objbar {
  width: 190px; height: 4px; margin-top: 4px;
  background: rgba(0, 255, 136, .14); border: 1px solid rgba(0, 255, 136, .35);
}
#objfill {
  height: 100%; width: 0; background: #0f8;
  box-shadow: 0 0 8px #0f8; transition: width .3s;
}

/* ---------- interferencia visual (núcleo corrupto, cap. 2) ---------- */
#blindfx {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at 50% 55%,
    transparent 9%, rgba(4, 0, 24, .55) 22%, rgba(4, 0, 24, .96) 46%);
}
#blindfx.on { opacity: 1; }

/* ---------- cinemática de cambio de capítulo ---------- */
#chapterfx {
  position: fixed; inset: 0; z-index: 70; background: #000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; cursor: pointer; overflow: hidden;
}
.cfx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.cfx-ring, .cfx-ring.r2 {
  position: absolute; width: 40vmin; height: 40vmin; border-radius: 50%;
  border: 3px solid #0ff; box-shadow: 0 0 40px #0ff8, inset 0 0 40px #0ff5;
  opacity: 0;
}
.cfx-ship {
  position: absolute; color: #0ff; font-size: 26px;
  text-shadow: 0 0 14px #0ff; opacity: 0;
}
.cfx-text { position: absolute; text-align: center; opacity: 0; }
.cfx-title { font-size: 34px; letter-spacing: 12px; text-shadow: 0 0 18px #0ff; }
.cfx-sub { margin-top: 10px; font-size: 13px; letter-spacing: 5px; color: #9df; }
.cfx-skip {
  position: absolute; bottom: calc(24px + env(safe-area-inset-bottom));
  font-size: 10px; letter-spacing: 3px; color: #567;
}
#chapterfx.play .cfx-flash { animation: cfxflash 1.4s ease-out forwards; }
#chapterfx.play .cfx-ring  { animation: cfxring 3.2s ease-out forwards; }
#chapterfx.play .cfx-ring.r2 { animation: cfxring 3.2s ease-out .35s forwards; }
#chapterfx.play .cfx-ship  { animation: cfxship 3s ease-in forwards .2s; }
#chapterfx.play .cfx-text  { animation: cfxtext 1.2s ease-out 3.2s forwards; }
@keyframes cfxflash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes cfxring {
  0%   { transform: scale(.15); opacity: 1; }
  70%  { opacity: .8; }
  100% { transform: scale(4.5); opacity: 0; }
}
@keyframes cfxship {
  0%   { transform: scale(.3) translateY(0);      opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: scale(5) translateY(26vh);    opacity: 0; }
}
@keyframes cfxtext { to { opacity: 1; } }

/* variante capítulo 3 (LA CAÍDA): tinte rojo de reentrada atmosférica */
#chapterfx.ch3 .cfx-ring, #chapterfx.ch3 .cfx-ring.r2 {
  border-color: #f53; box-shadow: 0 0 40px #f538, inset 0 0 40px #f535;
}
#chapterfx.ch3 .cfx-ship { color: #fa4; text-shadow: 0 0 14px #f53; }
#chapterfx.ch3 .cfx-title { color: #f96; text-shadow: 0 0 18px #f53; }
#chapterfx.ch3 .cfx-sub { color: #fba; }
#chapterfx.ch3 .cfx-flash { background: #fda; }

/* variante capítulo 4: la captura cierra el iris de la nave nodriza */
#chapterfx.ch4 { background: radial-gradient(circle, #51004a 0, #08000f 48%, #000 100%); }
#chapterfx.ch4 .cfx-ring, #chapterfx.ch4 .cfx-ring.r2 {
  border-color: #f2c; border-radius: 18%;
  box-shadow: 0 0 45px #f2c9, inset 0 0 52px #60f6;
}
#chapterfx.ch4 .cfx-ship { color: #0ff; text-shadow: 0 0 18px #0ff; }
#chapterfx.ch4 .cfx-title { color: #f5d; text-shadow: 0 0 22px #f2c; }
#chapterfx.ch4 .cfx-sub { color: #9ff; }
#chapterfx.ch4 .cfx-flash { background: #f2c; }
#chapterfx.ch5 { background:radial-gradient(circle,#fff 0,#24a 8%,#13002b 35%,#000 72%); }
#chapterfx.ch5 .cfx-ring,#chapterfx.ch5 .cfx-ring.r2 { border-color:#fc3; border-radius:50% 35% 55% 40%; box-shadow:0 0 55px #fc3a,inset 0 0 65px #46fc; }
#chapterfx.ch5 .cfx-ship { color:#fff;text-shadow:0 0 20px #0ff; }
#chapterfx.ch5 .cfx-title { color:#fc3;text-shadow:0 0 24px #fc3; }
#chapterfx.ch5 .cfx-sub { color:#9ff; }
#chapterfx.ch5 .cfx-flash { background:#8ff; }

/* ========== interfaz v4: puente, hangar y progreso de campaña ========== */
.hud-sector { color:#789; font-size:9px; letter-spacing:2px; margin-bottom:3px; text-transform:uppercase; }
.hud-telemetry { color:#79c; font-size:9px; letter-spacing:1px; margin-bottom:7px; }
.overlay::after { content:''; position:fixed; inset:0; pointer-events:none; opacity:.22; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(100,220,255,.035) 4px); }

#menu { background:radial-gradient(circle at 50% 38%,rgba(30,0,90,.42),rgba(2,0,18,.94) 60%); }
#menu > *:not(.menu-grid):not(.menu-orbit) { position:relative; z-index:2; }
.menu-grid { position:absolute; inset:48% -20% -30%; transform:perspective(300px) rotateX(58deg); transform-origin:top; background-image:linear-gradient(#0ff2 1px,transparent 1px),linear-gradient(90deg,#f0f2 1px,transparent 1px); background-size:50px 36px; mask-image:linear-gradient(to bottom,#000,transparent 75%); }
.menu-orbit { position:absolute; width:60vmin; height:60vmin; border:1px solid #0ff2; border-radius:50%; box-shadow:0 0 80px #0ff1; animation:menuorbit 18s linear infinite; }
.menu-orbit.o2 { width:82vmin; height:32vmin; border-color:#f0f2; animation-direction:reverse; animation-duration:25s; }
@keyframes menuorbit { to { transform:rotate(360deg); } }

#hangar { overflow-y:auto; justify-content:flex-start; padding:26px 12px 40px; background:radial-gradient(ellipse at 50% 0%,rgba(90,0,130,.35),rgba(1,3,16,.94) 55%),repeating-linear-gradient(90deg,transparent 0 79px,#0ff09 80px); }
.hangar-head { width:min(1120px,94vw); display:flex; align-items:center; justify-content:space-between; text-align:left; border-bottom:1px solid #ff05; padding:8px 0 14px; }
.scrap-wallet { padding:10px 18px; border:1px solid #ff06; color:#ff0; box-shadow:inset 0 0 16px #ff02; }
.scrap-wallet span { display:block; color:#897b32; font-size:8px; letter-spacing:2px; }
.scrap-wallet strong { font-size:25px; letter-spacing:3px; }
.hangar-sec { width:min(1120px,94vw); margin-top:10px; padding-bottom:7px; border-bottom:1px solid currentColor; text-align:left; }
#shipitems,#hangaritems { max-width:1120px; }
.shopitem { width:178px; min-height:170px; padding:16px 14px; }
.shopitem.ship { width:238px; min-height:326px; text-align:left; position:relative; overflow:hidden; }
.shopitem.ship::before { content:''; position:absolute; inset:0; opacity:.13; background:linear-gradient(135deg,var(--c),transparent 55%); }
.shopitem.ship .nm { font-size:18px; margin:10px 0 6px; }
.shopitem.ship .ds { min-height:38px; line-height:1.5; }
.shopitem.ship .stats { color:#ffda70; margin-top:10px; min-height:32px; }
.ship-visual { height:70px; display:flex; align-items:center; justify-content:center; position:relative; border-bottom:1px solid color-mix(in srgb,var(--c) 35%,transparent); }
.ship-visual span { position:absolute; right:0; bottom:5px; color:#789; font-size:8px; letter-spacing:2px; }
.ship-glyph { font-size:46px; color:var(--c); text-shadow:0 0 18px var(--c); transform:perspective(80px) rotateX(42deg); }
.ship-ratings { display:grid; gap:4px; margin-top:10px; font-size:8px; color:#789; }
.ship-ratings div { display:flex; justify-content:space-between; }
.ship-ratings i { color:var(--c); font-style:normal; letter-spacing:2px; }

/* ---------- plataforma de visualización 3D ---------- */
#shipbay {
  --c:#0ff; width:min(1120px,94vw); display:flex; gap:20px; margin:16px 0 8px;
  padding:16px; pointer-events:auto; text-align:left; position:relative;
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 7%,transparent),rgba(1,4,18,.75) 60%);
  box-shadow:0 0 26px color-mix(in srgb,var(--c) 18%,transparent), inset 0 0 30px color-mix(in srgb,var(--c) 6%,transparent);
}
.shipbay-view {
  position:relative; flex:1 1 46%; min-height:250px; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
  background:
    radial-gradient(ellipse at 50% 72%,color-mix(in srgb,var(--c) 14%,transparent),transparent 62%),
    linear-gradient(color-mix(in srgb,var(--c) 8%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--c) 8%,transparent) 1px,transparent 1px),
    #010312;
  background-size:100% 100%,34px 34px,34px 34px,100% 100%;
}
#shipbaycanvas { position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none; }
#shipbaycanvas:active { cursor:grabbing; }
.shipbay-hint { position:absolute; left:10px; bottom:8px; font-size:8px; letter-spacing:2px; color:#678; pointer-events:none; }
.shipbay-info { flex:1 1 54%; display:flex; flex-direction:column; gap:9px; min-width:0; }
.shipbay-role { font-size:9px; letter-spacing:3px; color:#789; }
.shipbay-name { font-size:30px; letter-spacing:5px; color:var(--c); text-shadow:0 0 18px var(--c); }
.shipbay-desc { font-size:12px; line-height:1.6; color:#9db; }
.shipbay-stats { font-size:11px; line-height:1.6; color:#ffda70; }
#shipbay .ship-ratings { max-width:270px; font-size:9px; }
#shipbayaction { margin-top:auto; align-self:flex-start; }
#shipbayaction.off { opacity:.4; cursor:default; pointer-events:none; }

/* tarjetas: miniatura 3D real + estados de plataforma */
.ship-thumb { max-width:100%; max-height:100%; display:block; }
.shopitem.ship { cursor:pointer; }
.shopitem.ship.locked { opacity:.62; }
.shopitem.ship.locked:hover { opacity:.85; }
.shopitem.ship.previewed {
  outline:1px solid var(--c); outline-offset:2px;
  box-shadow:0 0 20px color-mix(in srgb,var(--c) 55%,transparent);
}
.shopitem.ship.previewed::after {
  content:'◢ EN PLATAFORMA'; position:absolute; top:6px; right:8px;
  font-size:7px; letter-spacing:2px; color:var(--c); text-shadow:0 0 8px var(--c);
}

.setpanel { width:min(620px,92vw); min-width:0; gap:12px; background:linear-gradient(135deg,rgba(0,255,255,.04),rgba(255,0,255,.04)); }
.settings-group { display:flex; flex-direction:column; gap:13px; padding:13px 15px; border-left:2px solid #0ff8; background:#00152e44; }
.set-group-title { color:#0ff; font-size:10px; letter-spacing:4px; text-align:left; }
.setval { color:#ff0; margin-left:auto; font-size:10px; }

.campaign-progress { position:absolute; top:calc(78px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; pointer-events:none; }
.chapter-chip { width:105px; padding:7px 8px; display:grid; grid-template-columns:24px 1fr; text-align:left; border:1px solid #3458; background:#02081dcc; color:#567; }
.chapter-chip span { grid-row:span 2; font-size:18px; }.chapter-chip b { font-size:9px; letter-spacing:1px; }.chapter-chip i { font-size:8px; font-style:normal; }
.chapter-chip.active { color:#0ff; border-color:#0ff; box-shadow:0 0 14px #0ff5; }.chapter-chip.complete { color:#0f8; border-color:#0f87; }.campaign-progress em { color:#456; font-style:normal; }

@media (max-width:640px) {
  .campaign-progress { top:calc(70px + env(safe-area-inset-top)); gap:2px; width:96vw; }
  .chapter-chip { width:auto; flex:1; grid-template-columns:18px 1fr; padding:5px 4px; }.chapter-chip span{font-size:13px}.chapter-chip b{font-size:7px}.campaign-progress em{display:none}
  .hangar-head { flex-direction:column; align-items:flex-start; gap:10px; }.scrap-wallet{align-self:stretch}.shopitem.ship{width:min(290px,88vw)}
  #shipbay { flex-direction:column; gap:14px; }.shipbay-view{min-height:200px}.shipbay-name{font-size:22px}#shipbayaction{align-self:stretch}
  .setpanel label { flex-wrap:wrap; }.setpanel input[type=range]{width:100%}
  .hud-sector,.hud-telemetry{display:none}
}

/* ---------- monitor de rendimiento (perf.show() en consola) ---------- */
#perfmon {
  position: fixed; z-index: 100; pointer-events: none;
  top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left));
  background: rgba(0, 4, 16, .72); border: 1px solid #0ff6;
  box-shadow: 0 0 12px #0ff4; padding: 6px 10px 8px;
}
#perfmon canvas { display: block; width: 180px; height: 34px; margin-bottom: 4px; image-rendering: pixelated; }
#perfmon pre {
  margin: 0; font-family: 'Courier New', monospace; font-size: 11px; line-height: 1.5;
  color: #9df; white-space: pre;
}

/* ---------- aviso de rotación ---------- */
#rotate { display: none; z-index: 50; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; }
}

@media (max-width: 640px) {
  #cards { gap: 10px; }
  .card { width: 150px; padding: 14px 10px; }
  .hud-tc { width: 52vw; }
}

/* ---------- botones táctiles flotantes (misil, pausa) ---------- */
.touchbtn {
  display: none;
  position: absolute;
  width: 64px; height: 64px; border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  color: #f80; background: rgba(10, 4, 0, .35);
  border: 2px solid #f80; box-shadow: 0 0 16px #f808, inset 0 0 14px #f803;
  pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent;
  padding: 0; font-family: inherit; appearance: none;
}
.touchbtn:active { background: #f803; box-shadow: 0 0 26px #f8a, inset 0 0 18px #f805; }

#missilebtn {
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
}

#pausebtn {
  left: calc(20px + env(safe-area-inset-left));
  bottom: calc(24px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; font-size: 20px;
  color: #0ff; background: rgba(0, 8, 20, .35);
  border-color: #0ff; box-shadow: 0 0 16px #0ff8, inset 0 0 14px #0ff3;
}
#pausebtn:active { background: #0ff3; box-shadow: 0 0 26px #0ff, inset 0 0 18px #0ff5; }

#hud-audio-controls {
  position:absolute; left:calc(20px + env(safe-area-inset-left));
  bottom:calc(24px + env(safe-area-inset-bottom)); display:flex; gap:7px;
  pointer-events:auto;
}
.hud-audio-btn {
  min-width:36px; height:32px; padding:0 8px; border:1px solid #0ff8; border-radius:5px;
  color:#9df; background:#02081dbb; box-shadow:0 0 9px #0ff3; font:11px 'Courier New',monospace;
  cursor:pointer;
}
.hud-audio-btn.muted { color:#f66; border-color:#f448; box-shadow:0 0 9px #f443; text-decoration:line-through; }

@media (pointer: coarse) {
  .touchbtn { display: flex; }
  #hud-audio-controls { bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------- botones más grandes en pantallas táctiles (objetivo de dedo) ---------- */
@media (pointer: coarse) {
  .neonbtn { padding: 16px 40px; font-size: 17px; }
  .neonbtn.small { padding: 12px 24px; }
  .diffbtn { padding: 12px 20px; }
  .btnrow { gap: 12px; }
  button, a, [role="button"], input[type="checkbox"] { min-width: 44px; min-height: 44px; }
  input[type="range"] { min-height: 44px; touch-action: pan-x; }
  .shopitem { min-height: 176px; }
}

/* ---------- controles globales: pantalla completa y silencio de audio ---------- */
/* visibles sobre cualquier pantalla del juego (menú, hangar, mapa, pausa, HUD…), en escritorio y móvil */
#uiControls {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index: 60;
  display: flex; gap: 7px;
  pointer-events: none;
}
#uiControls button {
  display: flex;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; font-family: inherit;
  color: #0ff; background: rgba(3, 0, 20, .55);
  border: 1px solid #0ff9; border-radius: 6px;
  box-shadow: 0 0 10px #0ff5, inset 0 0 8px #0ff2;
  cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
#uiControls button:active, #uiControls button.on { background: #0ff2; box-shadow: 0 0 16px #0ff8, inset 0 0 10px #0ff4; }
#uiControls button.hidden { display: none !important; }
#audioquick.muted { color: #f66; border-color: #f448; box-shadow: 0 0 9px #f443; }

/* baja el HUD superior para dejar sitio a los botones de la esquina */
.hud-tl, .hud-tr { top: calc(52px + env(safe-area-inset-top)); }
.hud-tc { top: calc(50px + env(safe-area-inset-top)); }

@media (max-width: 700px) {
  #uiControls { top: calc(6px + env(safe-area-inset-top)); right: calc(6px + env(safe-area-inset-right)); }
  #uiControls button { width: 34px; height: 34px; font-size: 16px; }
}

/* ---------- móviles en horizontal con poca altura: layout compacto y con scroll ---------- */
@media (max-height: 430px) {
  .overlay { justify-content: flex-start; gap: 10px; padding-top: calc(46px + env(safe-area-inset-top)); }
  #menu { justify-content:center; gap:7px; padding:6px calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left)); }
  #menu .panel.compact, #menu .scorespanel, #menu #menugamepad { display:none; }
  #menu .modebtn { padding:10px 8px; }
  #menu .mb-title { font-size:18px; }
  #menu .mb-sub, #menu .mb-progress { margin-top:3px; }
  #menu .diffbtn { padding:6px 13px; min-height:34px; }
  #menu .neonbtn.alt { padding:7px 17px; min-height:34px; }
  .title { font-size: clamp(24px, 6vw, 40px); letter-spacing: 6px; }
  .subtitle { font-size: 10px; letter-spacing: 2px; }
  .panel.compact { font-size: 10.5px; line-height: 1.4; padding: 8px 14px; }
  .uptitle { font-size: clamp(18px, 4vw, 26px); }
  .neonbtn { padding: 10px 26px; font-size: 14px; }
  .neonbtn.alt { padding: 9px 18px; font-size: 12px; }
  .scorespanel { max-height: 90px; overflow-y: auto; }
}

@media (max-width: 560px) {
  #menu .subtitle { font-size:9px; letter-spacing:1px; }
  #menu .modebtns { width:100%; gap:8px; }
  #menu .modebtn { width:calc(50% - 4px); }
  #menu .mb-title { font-size:clamp(14px,4.5vw,18px); letter-spacing:2px; }
}

#upgrade { background:radial-gradient(circle at 50% 35%,rgba(255,180,0,.13),rgba(3,0,20,.94) 58%); }
#upgrade #cards { padding:24px; border-top:1px solid #ff03; border-bottom:1px solid #ff03; }
#upgrade .card { min-height:230px; display:flex; flex-direction:column; justify-content:center; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
#settings { background:radial-gradient(circle at 50% 25%,rgba(0,110,150,.23),rgba(2,0,18,.95) 62%); }

/* ---------- final de campaña: llegada a Auriga + créditos ---------- */
#finale { position:fixed; inset:0; z-index:95; overflow:hidden; color:#fff; background:radial-gradient(circle at 78% 50%,#09244e 0,#05051d 32%,#010008 70%); }
.final-warp { position:absolute; inset:0; perspective:400px; opacity:.8; }
.final-warp i { position:absolute; left:50%; top:50%; width:2px; height:42vh; transform-origin:50% 0; background:linear-gradient(transparent,#0ff,transparent); box-shadow:0 0 9px #0ff; animation:finalWarp 1.15s linear infinite; }
.final-warp i:nth-child(2n){background:linear-gradient(transparent,#f3c,transparent);box-shadow:0 0 9px #f3c}.final-warp i:nth-child(3n){background:linear-gradient(transparent,#fc3,transparent);box-shadow:0 0 9px #fc3}
.final-warp i:nth-child(1){--a:0deg}.final-warp i:nth-child(2){--a:45deg;animation-delay:-.7s}.final-warp i:nth-child(3){--a:90deg;animation-delay:-.3s}.final-warp i:nth-child(4){--a:135deg;animation-delay:-.9s}.final-warp i:nth-child(5){--a:180deg;animation-delay:-.5s}.final-warp i:nth-child(6){--a:225deg;animation-delay:-.1s}.final-warp i:nth-child(7){--a:270deg;animation-delay:-.8s}.final-warp i:nth-child(8){--a:315deg;animation-delay:-.4s}
@keyframes finalWarp { from{transform:rotate(var(--a)) translateY(8vh) scaleY(.08);opacity:0} 35%{opacity:1} to{transform:rotate(var(--a)) translateY(-72vh) scaleY(1.8);opacity:0} }
.arrival-planet { position:absolute; width:54vmin; height:54vmin; right:-12vmin; top:50%; transform:translateY(-50%) scale(.18); border-radius:50%; background:radial-gradient(circle at 32% 30%,#9ff,#1674a9 18%,#142b75 46%,#070a35 72%); box-shadow:0 0 30px #6ff,0 0 120px #25f8,inset -35px -25px 70px #010219; opacity:0; }
.planet-grid { position:absolute; inset:4%; border-radius:50%; opacity:.38; background:repeating-radial-gradient(circle at 45% 45%,transparent 0 13px,#9ff6 14px 15px); transform:rotate(-22deg); }
.planet-halo { position:absolute; inset:-7%; border:2px solid #9ff8; border-radius:50%; box-shadow:0 0 38px #0ff; }
.arrival-ship { position:absolute; left:9%; top:51%; font-size:58px; color:#fff; text-shadow:0 0 12px #fff,0 0 28px #0ff; transform:translate(-50%,-50%) rotate(90deg) scale(.35); opacity:0; }
.arrival-ship span { position:absolute; width:32vw; height:4px; right:70%; top:50%; background:linear-gradient(90deg,transparent,#0ff,#fff); box-shadow:0 0 18px #0ff; }
.arrival-copy { position:absolute; left:8%; bottom:10%; display:grid; gap:8px; letter-spacing:5px; opacity:0; }
.arrival-copy strong { font-size:clamp(40px,8vw,86px); color:#fff; text-shadow:0 0 22px #0ff,0 0 70px #26f; }.arrival-copy small{color:#fc3}
#finale.landing .arrival-planet { animation:planetArrival 6.2s ease-out forwards; }
#finale.landing .arrival-ship { animation:shipArrival 6.2s cubic-bezier(.15,.65,.2,1) forwards; }
#finale.landing .arrival-copy { animation:arrivalCopy 6.2s ease forwards; }
@keyframes planetArrival { 0%{opacity:0;transform:translateY(-50%) scale(.18)} 35%{opacity:1} 100%{opacity:1;transform:translateY(-50%) scale(1)} }
@keyframes shipArrival { 0%{opacity:0;left:8%;transform:translate(-50%,-50%) rotate(90deg) scale(.28)} 12%{opacity:1} 72%{opacity:1;left:58%;transform:translate(-50%,-50%) rotate(90deg) scale(.82)} 100%{opacity:.9;left:69%;top:48%;transform:translate(-50%,-50%) rotate(90deg) scale(.42)} }
@keyframes arrivalCopy { 0%,64%{opacity:0;transform:translateY(20px)} 78%,100%{opacity:1;transform:none} }
.final-record { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:22px; text-align:center; background:rgba(1,0,12,.82); backdrop-filter:blur(7px); opacity:0; pointer-events:none; transform:scale(1.04); transition:opacity 1.4s,transform 1.4s; overflow-y:auto; }
#finale.credits .final-record { opacity:1; pointer-events:auto; transform:none; }.final-record h1{font-size:clamp(36px,8vw,76px);letter-spacing:10px;color:#fc3;text-shadow:0 0 24px #fc3,0 0 70px #f37}.final-credit{font-size:17px;letter-spacing:4px;color:#9df}.final-credit strong{color:#fff;text-shadow:0 0 10px #0ff}.final-record>a{pointer-events:auto;color:#0ff;text-decoration:none;font-size:11px;letter-spacing:3px;border-bottom:1px solid #0ff6;padding:5px}
.career-stats { display:grid; grid-template-columns:repeat(3,minmax(155px,210px)); gap:6px; width:min(660px,94vw); }
.career-stats div { display:flex;flex-direction:column;padding:8px 10px;border:1px solid #0ff3;background:#00142b88;text-align:left }.career-stats span{font-size:8px;letter-spacing:1px;color:#678}.career-stats strong{font-size:14px;color:#cff;margin-top:3px}
.pilot-name { display:grid;gap:6px;color:#fc3;font-size:10px;letter-spacing:3px;width:min(520px,88vw);text-align:left}.pilot-name input{pointer-events:auto;font:inherit;font-size:15px;letter-spacing:1px;color:#fff;background:#02051dcc;border:1px solid #0ff;padding:11px 14px;outline:none;box-shadow:inset 0 0 12px #0ff2}.pilot-name input:focus{box-shadow:0 0 18px #0ff8,inset 0 0 12px #0ff3}.final-record .saved{color:#0f8;text-shadow:0 0 8px #0f8}
@media(max-width:640px){.career-stats{grid-template-columns:repeat(2,1fr)}.final-record{justify-content:flex-start;padding-top:34px}.final-record h1{font-size:32px}.arrival-copy{left:5%;bottom:7%}}