/* Concepto: consola de control orbital. Espacio azul noche, paneles marfil
   como cascos militares, naranja de señalización para lo importante. */
:root {
  --espacio: #070b18;
  --panel: #111a33;
  --panel-borde: #24335c;
  --marfil: #ece6d6;
  --tenue: #93a0bf;
  --senal: #ff7b1c;
  --baliza: #4aa8ff;
  --peligro: #ff4258;
  --ok: #56d68b;
  --f-titulo: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-texto: "Barlow Semi Condensed", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: var(--espacio); color: var(--marfil); overflow: hidden; }
body { font-family: var(--f-texto); font-size: 16px; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; }

#app { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Pantallas ---------- */
.pantalla {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 14px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 20px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: color-mix(in srgb, var(--espacio) 82%, transparent);
}
.pantalla.scroll { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.pantalla.centro { justify-content: center; align-items: stretch; text-align: center; max-width: 520px; margin: 0 auto; }
.pantalla.velo { background: color-mix(in srgb, var(--espacio) 88%, transparent); }
.pantalla > * { max-width: 520px; width: 100%; margin-inline: auto; }

h1, h2, h3 { font-family: var(--f-titulo); text-transform: uppercase; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(3.2rem, 17vw, 5.4rem); line-height: .86; font-weight: 800; letter-spacing: .01em; }
h2 { font-size: 2rem; font-weight: 700; letter-spacing: .02em; }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; color: var(--tenue); margin-top: 8px; display: flex; gap: 8px; align-items: baseline; }
.ojal { font-family: var(--f-titulo); color: var(--senal); text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; margin: 0; font-weight: 700; }
.sub { color: var(--tenue); margin: 0; line-height: 1.4; }
.nota { color: var(--tenue); font-size: .85rem; margin: 0; }

#pTitulo { justify-content: flex-end; background: linear-gradient(to top, var(--espacio) 22%, transparent 70%); }
.titulo-bloque { display: flex; flex-direction: column; gap: 16px; padding-bottom: 6vh; }
.titulo-bloque h1 span { color: var(--senal); }

.btn-prim, .btn-sec {
  border: 0; border-radius: 4px; padding: 15px 18px; font-family: var(--f-titulo);
  text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: 1.15rem; cursor: pointer;
}
.btn-prim { background: var(--senal); color: #1a0d02; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.btn-prim:active { transform: translateY(1px); filter: brightness(1.1); }
.btn-sec { background: transparent; color: var(--marfil); border: 1px solid var(--panel-borde); font-size: .95rem; }
.btn-prim:focus-visible, .btn-sec:focus-visible, .carta:focus-visible { outline: 2px solid var(--baliza); outline-offset: 3px; }
button:disabled { opacity: .4; cursor: default; }

/* ---------- Hangar ---------- */
.cab { display: flex; justify-content: space-between; align-items: center; }
.saldo { text-align: right; font-family: var(--f-titulo); }
.saldo span { display: block; font-size: .75rem; letter-spacing: .18em; color: var(--tenue); text-transform: uppercase; }
.saldo b { font-size: 1.7rem; color: var(--senal); font-variant-numeric: tabular-nums; }

/* Carrusel: una nave grande por vez */
.carrusel { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.flecha {
  height: 64px; border: 2px solid var(--panel-borde); background: var(--panel); border-radius: 4px; cursor: pointer;
  font-family: var(--f-titulo); font-size: 2.4rem; line-height: 1; color: var(--senal); display: grid; place-items: center; padding: 0 0 4px;
}
.flecha:active { border-color: var(--senal); }
.visor {
  height: min(38vh, 300px); min-height: 190px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--baliza) 14%, var(--panel)), var(--panel) 70%);
  display: grid; place-items: center; touch-action: pan-y; overflow: hidden;
}
.visor img { grid-area: 1 / 1; max-width: 78%; max-height: 82%; object-fit: contain; image-rendering: pixelated; }
.visor .num { position: absolute; top: 8px; left: 10px; font-family: var(--f-titulo); font-size: .85rem; letter-spacing: .1em; color: var(--tenue); z-index: 1; }
/* bloqueada: solo la silueta negra con su contorno y un signo de pregunta */
.visor.bloq img { filter: brightness(0) drop-shadow(1.5px 0 0 var(--tenue)) drop-shadow(-1.5px 0 0 var(--tenue)) drop-shadow(0 1.5px 0 var(--tenue)) drop-shadow(0 -1.5px 0 var(--tenue)); }
.visor .incognita { grid-area: 1 / 1; z-index: 1; font-family: var(--f-titulo); font-weight: 800; font-size: 5rem; color: var(--marfil); text-shadow: 0 0 12px var(--espacio), 0 0 3px var(--espacio); }
.entra-der { animation: entraDer .22s ease-out; }
.entra-izq { animation: entraIzq .22s ease-out; }
@keyframes entraDer { from { transform: translateX(40px); opacity: 0; } }
@keyframes entraIzq { from { transform: translateX(-40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .entra-der, .entra-izq { animation: none; } }
.puntos { display: flex; justify-content: center; gap: 6px; margin-top: -4px; }
.puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--panel-borde); }
.puntos i.on { background: var(--senal); }
.puntos i.bloq:not(.on) { background: transparent; box-shadow: inset 0 0 0 1px var(--panel-borde); }

.ficha { display: flex; flex-direction: column; background: var(--panel); padding: 12px; }
.ficha h4 { margin: 0; font-family: var(--f-titulo); font-size: 1.5rem; text-transform: uppercase; }
.ficha .disp { color: var(--senal); font-weight: 600; margin: 2px 0 8px; font-size: .95rem; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; font-size: .8rem; }
.stats span { font-family: var(--f-titulo); letter-spacing: .1em; color: var(--tenue); }
.pips { display: flex; gap: 3px; }
.pips i { flex: 1; height: 7px; background: var(--panel-borde); border-radius: 1px; }
.pips i.on { background: var(--marfil); }
.pips.comb i.on { background: var(--baliza); }
.ficha .min { margin: 0 0 8px; color: var(--tenue); font-size: .85rem; }

.contador { color: var(--senal); letter-spacing: .05em; font-size: .9rem; }
.lista-tripu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tripu {
  text-align: left; border: 1px solid var(--panel-borde); background: var(--panel); border-radius: 4px; padding: 8px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0;
}
.tripu b { font-family: var(--f-titulo); text-transform: uppercase; font-size: .95rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.tripu small { color: var(--tenue); font-size: .75rem; line-height: 1.25; }
.tripu.sel { border-color: var(--senal); box-shadow: inset 0 0 0 1px var(--senal); }
.tripu.bloq { opacity: .55; cursor: default; }
.tripu .foto { position: relative; display: block; margin-bottom: 2px; }
.tripu .foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.tripu .foto .escudo { position: absolute; right: -8px; bottom: -9px; width: 28%; aspect-ratio: auto; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); image-rendering: pixelated; }
.tripu.bloq .foto img { filter: grayscale(1) brightness(.6); }
.tripu em { font-style: normal; font-family: var(--f-titulo); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--senal); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; margin-top: -4px; }

.tienda { display: flex; flex-direction: column; gap: 6px; padding-bottom: 90px; }
.item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel); border-radius: 4px; padding: 10px 12px; }
.item div { min-width: 0; }
.item b { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .04em; display: block; }
.item small { color: var(--tenue); }
.item button { flex: none; border: 1px solid var(--senal); background: transparent; color: var(--senal); border-radius: 4px; padding: 8px 12px; font-family: var(--f-titulo); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }

.pie-fijo {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: none !important; z-index: 6;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 14px) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, var(--espacio) 65%, transparent);
  display: flex; justify-content: center;
}
.pie-fijo .btn-prim { width: 100%; max-width: 520px; }
.pie-fijo.dos { gap: 8px; }
.pie-fijo.dos .btn-sec { flex: none; width: auto; padding-left: 16px; padding-right: 16px; margin: 0; }
.pie-fijo.dos .btn-prim { flex: 1; }

/* Nave elegida, arriba de la tripulación */
.nave-elegida { display: flex; align-items: center; gap: 14px; background: var(--panel); padding: 10px 12px; }
.nave-elegida img { width: 64px; height: 64px; object-fit: contain; }
.nave-elegida small { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.nave-elegida b { display: block; font-family: var(--f-titulo); font-size: 1.4rem; text-transform: uppercase; }
.nave-elegida span { color: var(--senal); font-size: .9rem; font-weight: 600; }

/* Marcos: borde y esquinas en todos los cuadros */
.marco, .carta, .mapa, .resumen, .flecha {
  position: relative; border: 2px solid var(--panel-borde) !important; border-radius: 3px;
  --esq: var(--tenue);
}
.marco::after, .carta::after, .mapa::after, .resumen::after, .flecha::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  background:
    linear-gradient(var(--esq), var(--esq)) top left / 12px 2px, linear-gradient(var(--esq), var(--esq)) top left / 2px 12px,
    linear-gradient(var(--esq), var(--esq)) top right / 12px 2px, linear-gradient(var(--esq), var(--esq)) top right / 2px 12px,
    linear-gradient(var(--esq), var(--esq)) bottom left / 12px 2px, linear-gradient(var(--esq), var(--esq)) bottom left / 2px 12px,
    linear-gradient(var(--esq), var(--esq)) bottom right / 12px 2px, linear-gradient(var(--esq), var(--esq)) bottom right / 2px 12px;
  background-repeat: no-repeat;
}
.tripu.sel, .carta:active, .flecha:active { --esq: var(--senal); border-color: var(--senal) !important; }

/* ---------- Mejoras y rutas ---------- */
.opciones { display: flex; flex-direction: column; gap: 10px; }
.carta {
  text-align: left; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 4px; padding: 14px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
}
.carta b { font-family: var(--f-titulo); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em; }
.carta small { color: var(--tenue); font-size: .92rem; line-height: 1.35; }
.carta .etqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.carta .etq { font-family: var(--f-titulo); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; border: 1px solid var(--panel-borde); color: var(--tenue); }
.carta .etq.comb { border-color: var(--baliza); color: var(--baliza); }
.carta .etq.bueno { border-color: var(--ok); color: var(--ok); }
.carta .etq.secreta { border-color: var(--senal); color: var(--senal); }
.carta:active { border-color: var(--senal); }
.carta:disabled { opacity: .4; }

.progreso { display: flex; justify-content: center; gap: 6px; align-items: center; }
.progreso i { width: 22px; height: 6px; background: var(--panel-borde); border-radius: 1px; }
.progreso i.hecho { background: var(--marfil); }
.progreso i.ahora { background: var(--senal); }
.progreso i.jefe { width: 30px; }
.estado-comb { font-family: var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.estado-comb b { color: var(--baliza); font-size: 1.3rem; }
.alerta { background: color-mix(in srgb, var(--peligro) 18%, var(--panel)); border: 1px solid var(--peligro); border-radius: 4px; padding: 12px; text-align: left; }

.resumen { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; background: var(--panel); border-radius: 4px; padding: 16px; text-align: left; font-variant-numeric: tabular-nums; }
.resumen span { color: var(--tenue); }
.resumen b { font-family: var(--f-titulo); font-size: 1.2rem; text-align: right; }

/* ---------- HUD ---------- */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.hud-fila { display: flex; align-items: center; gap: 12px; }
.hud-casco { flex: 1; display: flex; align-items: center; gap: 8px; }
.hud-etq { font-family: var(--f-titulo); font-size: .7rem; letter-spacing: .16em; color: var(--tenue); }
.barra { flex: 1; height: 8px; background: rgba(255,255,255,.12); border-radius: 1px; overflow: hidden; }
.barra i { display: block; height: 100%; width: 100%; background: var(--ok); transition: width .15s; }
.hud-dato { font-family: var(--f-titulo); display: flex; gap: 5px; align-items: baseline; }
.hud-dato b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.btn-icono { pointer-events: auto; width: 38px; height: 38px; border-radius: 4px; border: 1px solid var(--panel-borde); background: rgba(7,11,24,.6); font-family: var(--f-titulo); font-weight: 800; cursor: pointer; }
.barra-etapa { margin-top: 6px; height: 3px; background: rgba(255,255,255,.08); }
.barra-etapa i { display: block; height: 100%; width: 0; background: var(--senal); }
.hud-nombre { margin-top: 4px; font-family: var(--f-titulo); font-size: .75rem; letter-spacing: .18em; color: var(--tenue); text-transform: uppercase; }

#habilidades {
  position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 12px;
  right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
}
.hab {
  --p: 1; position: relative; width: 62px; height: 62px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--senal); background: rgba(7,11,24,.7); display: grid; place-items: center;
  font-family: var(--f-titulo); font-weight: 800; letter-spacing: .06em; font-size: .9rem; touch-action: none;
}
.hab::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: conic-gradient(color-mix(in srgb, var(--senal) 45%, transparent) calc(var(--p) * 360deg), transparent 0);
}
/* el retrato queda recortado en el círculo; el escudo va en la esquina de abajo a la derecha, mitad afuera */
.hab .escudo { position: absolute; z-index: 3; right: -12px; bottom: -8px; width: 26px; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); image-rendering: pixelated; }
.hab img:not(.escudo) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
.hab::before { z-index: 1; inset: 0; background: conic-gradient(transparent calc(var(--p) * 360deg), rgba(7,11,24,.72) 0) !important; }
.hab span { position: relative; z-index: 2; align-self: end; margin-bottom: 3px; font-size: .72rem; padding: 0 4px; background: rgba(7,11,24,.75); border-radius: 2px; }
.hab.lista { box-shadow: 0 0 14px color-mix(in srgb, var(--senal) 60%, transparent); }
.hab.esperando { border-color: var(--panel-borde); color: var(--tenue); }

#aviso {
  position: absolute; z-index: 4; left: 0; right: 0; top: 38%; text-align: center; pointer-events: none;
  font-family: var(--f-titulo); text-transform: uppercase; font-weight: 800; letter-spacing: .08em; font-size: 1.7rem;
  padding-inline: 16px; text-shadow: 0 2px 10px #000; animation: aviso 2.2s ease forwards;
}
#aviso small { display: block; font-size: .95rem; font-weight: 600; color: var(--tenue); letter-spacing: .12em; }
@keyframes aviso { 0% { opacity: 0; transform: scale(.9); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { #aviso { animation: none; } }

.titulo-nave { width: min(46vw, 210px); align-self: center; margin-bottom: auto; margin-top: 6vh; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--senal) 35%, transparent)); animation: flotar 4s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .titulo-nave { animation: none; } }

/* ---------- Mapa de rutas ---------- */
.mapa { background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--baliza) 10%, var(--panel)), var(--panel)); border: 1px solid var(--panel-borde); border-radius: 4px; padding: 6px 0; }
.mapa svg { display: block; width: 100%; height: auto; }
.mapa line { stroke-width: 2; }
.mapa .l-futura { stroke: var(--panel-borde); stroke-dasharray: 3 4; }
.mapa .l-vieja { stroke: var(--panel-borde); opacity: .35; }
.mapa .l-oculta { stroke: var(--panel-borde); stroke-dasharray: 1 6; opacity: .6; }
.mapa .l-hecha { stroke: var(--marfil); stroke-width: 3; }
.mapa .l-posible { stroke: var(--senal); stroke-dasharray: 5 4; animation: avanzar 1s linear infinite; }
@keyframes avanzar { to { stroke-dashoffset: -18; } }
.mapa .nodo circle, .mapa .nodo rect { fill: var(--espacio); stroke: var(--panel-borde); stroke-width: 2; }
.mapa .nodo text { text-anchor: middle; font-family: var(--f-titulo); }
.mapa .ico { font-size: 11px; font-weight: 800; fill: var(--tenue); }
.mapa .etq-mapa { paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; font-size: 10.5px; letter-spacing: .04em; fill: var(--tenue); text-transform: uppercase; }
.mapa .visitado circle, .mapa .visitado rect { fill: var(--marfil); stroke: var(--marfil); }
.mapa .visitado .ico { fill: var(--espacio); }
.mapa .visitado .etq-mapa { fill: var(--marfil); }
.mapa .descartado { opacity: .35; }
.mapa .disponible { cursor: pointer; }
.mapa .disponible circle { stroke: var(--senal); stroke-width: 3; animation: latir 1.2s ease-in-out infinite; }
.mapa .disponible .ico, .mapa .disponible .etq-mapa { fill: var(--senal); font-weight: 700; }
.mapa .sin-comb circle { stroke: var(--peligro); stroke-dasharray: 3 3; }
.mapa .secreto circle { stroke-dasharray: 2 3; opacity: .6; }
.mapa .marcador { fill: var(--senal); }
@keyframes latir { 50% { stroke-width: 5; } }
@media (prefers-reduced-motion: reduce) { .mapa .l-posible, .mapa .disponible circle { animation: none; } }
#pRuta { justify-content: flex-start; }
.nave-elegida img, .titulo-nave { image-rendering: pixelated; }

.mapa .secreto[data-pista] { cursor: pointer; }
.mapa .mj circle { stroke: var(--peligro); }
.mapa .mj .ico { fill: var(--peligro); }
.mapa .mj.disponible circle { stroke: var(--peligro); }
.mapa .salto { cursor: pointer; }
.mapa .salto circle { stroke: var(--baliza); stroke-dasharray: 3 3; }
.modo-prueba { margin: 6px 0 0; font-size: 12px; color: var(--baliza); text-align: center; }
.carta .etq.peligro { border-color: var(--peligro); color: var(--peligro); }
.pista { margin: 0; padding: 10px 12px; border-left: 3px solid var(--senal); background: var(--panel); text-align: left; font-style: italic; color: var(--marfil); }

/* Estadísticas 1 a 100 con compra de +1 */
.stats100 { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) 2.2em auto; gap: 6px 8px; align-items: center; font-size: .8rem; }
.st-nom { font-family: var(--f-titulo); letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; color: var(--tenue); }
.st-val { font-family: var(--f-titulo); font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; }
.barra100 { height: 7px; background: var(--panel-borde); border-radius: 1px; overflow: hidden; }
.barra100 i { display: block; height: 100%; background: var(--marfil); }
.stats100 button { border: 1px solid var(--senal); background: transparent; color: var(--senal); border-radius: 4px; padding: 6px 9px; font-family: var(--f-titulo); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; cursor: pointer; min-width: 4.6em; }
.stats100 button:active:not(:disabled) { background: color-mix(in srgb, var(--senal) 25%, transparent); }
.pips.dis i.on { background: var(--senal); }

/* Puntos de tripulación */
.barra-pts { flex: none; height: 10px; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 2px; overflow: hidden; margin-top: -6px; }
.barra-pts i { display: block; height: 100%; background: var(--senal); transition: width .2s; }
.nota.izq { text-align: left; margin: -4px auto 0; }
.tripu { position: relative; }
.tripu .pts { position: absolute; top: 12px; right: 12px; font-family: var(--f-titulo); font-weight: 800; font-size: .8rem; padding: 1px 6px; border-radius: 2px; background: rgba(7,11,24,.85); color: var(--marfil); border: 1px solid var(--panel-borde); }
.tripu.sel .pts { background: var(--senal); color: var(--espacio); border-color: var(--senal); }
.tripu.no-entra .foto img { filter: brightness(.55); }
.tripu.no-entra small { color: var(--peligro); }
.rebote { animation: rebote .3s; }
@keyframes rebote { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Cartel de nave desbloqueada */
.cartel { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(4,7,16,.82); animation: aparecer .25s ease-out; }
.cartel-caja { width: 100%; max-width: 360px; background: var(--panel); padding: 20px 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; --esq: var(--senal); border-color: var(--senal) !important; }
.cartel-caja h2 { margin: 0; font-family: var(--f-titulo); font-size: 2rem; text-transform: uppercase; }
.cartel-caja .disp { margin: 0; color: var(--senal); font-weight: 600; }
.cartel-caja .sub { margin: 0 0 8px; color: var(--tenue); }
.cartel-nave { height: 170px; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--senal) 30%, transparent), transparent 65%); }
.cartel-nave img { max-height: 150px; max-width: 70%; image-rendering: pixelated; animation: revelar 1.1s ease-out both; }
@keyframes revelar { 0% { filter: brightness(0); transform: scale(.7); } 55% { filter: brightness(0); transform: scale(1.05); } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes aparecer { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cartel, .cartel-nave img { animation: none; } }

/* Tripulación: trabajos (escudos) y cada trabajo con sus 10 lugares */
.lista-trabajos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.trabajo { background: var(--panel); padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; min-width: 0; }
.trabajo img { width: 72%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.trabajo b { font-family: var(--f-titulo); text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; text-align: center; }
.trabajo small { color: var(--tenue); font-size: .75rem; }
.trabajo.sel { --esq: var(--senal); border-color: var(--senal) !important; }
.trabajo.sel small { color: var(--senal); font-weight: 600; }
.vista-trabajo { display: flex; flex-direction: column; gap: 10px; }
.volver-trabajos { align-self: flex-start; padding: 8px 14px; margin: 0; }
.rejilla-miembros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.miembro { position: relative; background: var(--panel); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: pointer; text-align: left; }
.miembro .foto { position: relative; display: block; }
.miembro .foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.miembro .foto .escudo { position: absolute; right: -8px; bottom: -9px; width: 29%; aspect-ratio: auto; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); image-rendering: pixelated; }
.miembro .pts { position: absolute; top: 10px; right: 10px; font-family: var(--f-titulo); font-weight: 800; font-size: .75rem; padding: 1px 5px; border-radius: 2px; background: rgba(7,11,24,.85); border: 1px solid var(--panel-borde); }
.miembro b { font-family: var(--f-titulo); text-transform: uppercase; font-size: .9rem; }
.miembro.sel { --esq: var(--senal); border-color: var(--senal) !important; }
.miembro.sel .pts { background: var(--senal); color: var(--espacio); border-color: var(--senal); }
.miembro.no-entra .foto img:first-child { filter: brightness(.55); }
.miembro.incognito { cursor: default; align-items: center; justify-content: center; aspect-ratio: 0.82; background: color-mix(in srgb, var(--panel) 60%, var(--espacio)); }
.miembro.incognito span { font-family: var(--f-titulo); font-weight: 800; font-size: 2.4rem; color: var(--panel-borde); line-height: 1; }
.miembro.incognito small { color: var(--panel-borde); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.ficha-miembro { background: var(--panel); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.ficha-miembro { display: grid !important; grid-template-columns: 50% 1fr; grid-template-rows: auto auto auto 1fr auto; align-content: stretch; column-gap: 10px; }
.ficha-miembro > * { grid-column: 2; }
.ficha-miembro .grande { grid-column: 1; grid-row: 1 / span 4; width: 100%; border-radius: 2px; image-rendering: pixelated; align-self: start; }
#pTripu { scroll-padding-bottom: 120px; }
.miembro.sel::before { content: '✓'; position: absolute; z-index: 2; top: 10px; left: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--senal); color: var(--espacio); font-weight: 800; font-size: .8rem; }
.miembro.visto { outline: 2px solid var(--tenue); outline-offset: 1px; }
.ficha-miembro b { font-family: var(--f-titulo); text-transform: uppercase; font-size: 1.3rem; }
.ficha-miembro em { font-style: normal; color: var(--senal); font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .06em; }
.ficha-miembro p { margin: 0; color: var(--tenue); font-size: .9rem; }
.ficha-miembro p strong { color: var(--marfil); font-weight: 600; }
.ficha-miembro p .recarga { white-space: nowrap; }
.ficha-miembro p.falta { color: var(--peligro); }
.ficha-miembro .btn-prim { margin-top: 6px; grid-row: 5; grid-column: 1 / -1; align-self: end; }   /* debajo del retrato, siempre en el mismo lugar */

/* ---------- Menú de inicio, pausa y opciones ---------- */
.titulo-cabeza { margin-top: 2vh; display: flex; flex-direction: column; gap: 6px; }
.titulo-cabeza h1 span { color: var(--senal); }
#pTitulo .titulo-nave { margin: auto; width: min(38vw, 170px); }
.menu { display: flex; flex-direction: column; gap: 10px; }
.titulo-resumen { display: flex; justify-content: center; gap: 18px; font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--tenue); }
.titulo-resumen b { color: var(--marfil); font-size: 1rem; margin-left: 4px; }
#pTitulo .nota { text-align: center; }
.btn-sec.peligro, .interruptor.peligro { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 55%, transparent); }
.btn-sec.confirmar { background: var(--peligro); color: #fff; border-color: var(--peligro); }
.volver-mini { background: none; border: 0; padding: 0 0 2px; color: var(--senal); font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .85rem; cursor: pointer; display: block; }
.pausa-resumen { background: var(--panel); padding: 12px; display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; text-align: left; align-items: center; }
.pausa-resumen > img { grid-row: span 3; width: 64px; image-rendering: pixelated; }
.pausa-resumen b { font-family: var(--f-titulo); text-transform: uppercase; font-size: 1.2rem; }
.pausa-resumen .fila { display: flex; gap: 14px; font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--tenue); }
.pausa-resumen .fila b { font-size: .95rem; color: var(--marfil); margin-left: 3px; }
.pausa-resumen .barra { height: 6px; }
.pausa-resumen .caras { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--panel-borde); padding-top: 8px; margin-top: 2px; font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: var(--tenue); }
.pausa-resumen .caras img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--senal); }
.opciones-lista { background: var(--panel); padding: 4px 14px; text-align: left; }
.opc { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--panel-borde); }
.opc:last-child { border-bottom: 0; }
.opc > span { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; }
.opc small { display: block; font-family: var(--f-texto); text-transform: none; letter-spacing: 0; color: var(--tenue); font-size: .8rem; }
.opc.col { flex-direction: column; align-items: stretch; gap: 6px; }
.opc.col b { color: var(--senal); }
.opc input[type=range] { width: 100%; accent-color: var(--senal); }
.opc .extremos { display: flex; justify-content: space-between; }
.opc .extremos i { font-style: normal; }
.interruptor { flex: none; min-width: 74px; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--panel-borde); background: transparent; color: var(--tenue); font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.interruptor[aria-pressed="true"] { background: var(--senal); border-color: var(--senal); color: #1a0d02; }
.interruptor:disabled { opacity: .5; cursor: default; }
.interruptor.confirmar { background: var(--peligro); color: #fff; border-color: var(--peligro); }
.como { background: var(--panel); margin: 0; padding: 6px 14px 6px 34px; text-align: left; display: flex; flex-direction: column; }
.como li { padding: 10px 0; border-bottom: 1px solid var(--panel-borde); color: var(--tenue); line-height: 1.35; }
.como li:last-child { border-bottom: 0; }
.como li::marker { color: var(--senal); font-family: var(--f-titulo); font-weight: 800; }
.como b { display: block; color: var(--marfil); font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .06em; }
#pComo { justify-content: flex-start; }
#pComo > h2 { margin-top: 4px; }
.pausa-resumen { grid-template-columns: 64px minmax(0, 1fr); }
.pausa-resumen .fila { flex-wrap: wrap; gap: 2px 12px; }
@media (max-height: 640px) {
  #pTitulo { gap: 10px; }
  .titulo-cabeza { margin-top: 0; }
  #pTitulo h1 { font-size: 3rem; }
  #pTitulo .titulo-nave { width: 92px; }
  #pTitulo .btn-sec { padding-top: 11px; padding-bottom: 11px; }
}
.mundo-carta .etq { align-self: flex-start; }
/* la ficha queda fija arriba mientras bajás por la grilla */
.vista-trabajo .ficha-miembro { position: sticky; top: -20px; z-index: 3; box-shadow: 0 10px 16px -8px rgba(0,0,0,.8); }
.ficha-miembro .btn-prim { font-size: 1rem; letter-spacing: .08em; padding: 12px 10px; }
/* tripulantes que todavía no se ganaron */
.miembro.bloq .foto img:first-child, .ficha-miembro .silueta { filter: grayscale(1) brightness(.3) contrast(1.4) blur(3px); }
.miembro.bloq b { color: var(--tenue); }
/* mapa: los tres caminos de colores y el fondo de cada mundo */
.mapa { background-size: cover; background-position: center; }
.mapa .franja { opacity: .07; }
.mapa .nombre-ruta { text-anchor: middle; font-family: var(--f-titulo); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mapa .nodo[style] circle { stroke: var(--c); }
.mapa .nodo.futuro[style] circle { stroke: color-mix(in srgb, var(--c) 70%, transparent); }
.mapa .nodo.disponible[style] .ico, .mapa .nodo.disponible[style] .etq-mapa { fill: var(--c); }
.mapa .nodo.visitado[style] circle { fill: var(--c); stroke: var(--marfil); }
.mapa .l-futura[style] { opacity: .45; }
.carta .etq.ruta { color: #10131c; background: var(--c); border-color: var(--c); font-weight: 800; }
.carta.con-ruta { border-left: 4px solid var(--c); }
.mapa .badge { text-anchor: middle; font-family: var(--f-titulo); font-size: 9px; font-weight: 800; fill: #c8ffb0; paint-order: stroke; stroke: #0b1a10; stroke-width: 3px; }
.mapa .nodo image { pointer-events: none; }
/* imagen de cada mundo en su carta */
.mundo-carta.con-img { position: relative; padding-left: 100px; min-height: 100px; }
.mundo-carta .mundo-img { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; border-radius: 8px; }

/* En pantallas anchas (computadora) el juego queda con forma de celular, centrado */
@media (min-aspect-ratio: 3/4) {
  html, body { background: #03050c; }
  #app {
    left: 50%; right: auto; width: min(100vw, calc(100dvh * 9 / 18));
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px var(--panel-borde), 0 0 60px rgba(74, 168, 255, .12);
  }
}

/* Flechita del mapa: avisa que se puede bajar para ver la info de los destinos */
.pantalla > .flecha-bajar {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 7;
  width: 44px; height: 44px; margin: 0 0 0 -22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--espacio) 75%, transparent); animation: titilar 1.6s ease-in-out infinite;
}
.flecha-bajar::before {
  content: ""; position: absolute; left: 50%; top: 16px; margin-left: -13px;
  border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 16px solid var(--senal);
  filter: drop-shadow(0 0 6px rgba(255, 123, 28, .6));
}
@keyframes titilar { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* contador de niveles terminados y marca en el mapa */
.contador-niveles { margin: -4px 0 8px; font-size: 13px; letter-spacing: .04em; color: var(--marfil); opacity: .9; }
.contador-niveles b { color: #7ee08a; font-size: 15px; }
.mapa .nodo .hecho circle { fill: #3fbf5a; stroke: #0b1a10; stroke-width: 1.5; }
.mapa .nodo .hecho path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Estilo "chapa remachada" ----------
   Piezas de pixel art en assets/menu (1 pixel de arte = 2 px de pantalla).
   Los cuadros y botones se estiran con border-image (9 partes: las esquinas
   con los remaches quedan fijas, el centro y los bordes se estiran). */
.marco, .carta, .mapa, .resumen, .ficha, .item, .nave-elegida, .trabajo, .miembro, .ficha-miembro,
.pausa-resumen, .opciones-lista, .como, .cartel-caja, .tripu, .alerta, .pista {
  border-style: solid !important; border-width: 6px !important; border-color: transparent !important; border-radius: 0;
  border-image: url("../assets/menu/panel.webp") 12 fill / 24px / 0 stretch !important;
  background-color: transparent; image-rendering: pixelated;
}
.marco::after, .carta::after, .mapa::after, .resumen::after, .flecha::after { display: none; }
.carta, .item, .opciones-lista, .como, .pausa-resumen, .ficha-miembro { padding-left: 16px; padding-right: 16px; }
/* elegido o apretado: borde amarillo */
.tripu.sel, .trabajo.sel, .miembro.sel, .carta:active:not(:disabled), .cartel-caja {
  border-image-source: url("../assets/menu/panel_sel.webp") !important;
}
/* el mapa y el visor de la nave muestran su fondo: solo el marco, sin relleno */
.mapa { border-image: url("../assets/menu/panel.webp") 12 / 24px / 0 stretch !important; padding: 10px 6px; }
.visor.marco {
  border-image: url("../assets/menu/panel.webp") 12 / 24px / 0 stretch !important;
  background: radial-gradient(circle at 50% 55%, #2c3340, #12151b 72%);
  box-shadow: inset 0 0 0 6px #0b0d11;
}
.alerta { border-image-source: url("../assets/menu/panel_sel.webp") !important; filter: hue-rotate(-40deg) saturate(1.3); }
.alerta > * { filter: none; }
.pista { border-left-width: 6px !important; font-style: italic; }
/* el color de la ruta, como una franja pintada adentro de la chapa */
.carta.con-ruta::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 4px; background: var(--c); }
.carta.con-ruta { padding-left: 22px; }

/* botones */
.btn-prim, .btn-sec {
  min-height: 48px; padding: 6px 22px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15;
  border: 0 solid transparent; border-radius: 0; clip-path: none; background: none; image-rendering: pixelated;
  border-image: url("../assets/menu/boton_prim.webp") 11 12 12 fill / 22px 24px 24px / 0 stretch !important; border-width: 1px;
}
.btn-prim { color: #2a1800; text-shadow: 0 1px 0 rgba(255, 236, 160, .55); padding-bottom: 9px; }
.btn-prim:active:not(:disabled) { border-image-source: url("../assets/menu/boton_prim_apretado.webp") !important; transform: none; filter: none; padding-top: 9px; padding-bottom: 6px; }
.btn-sec { border-image-source: url("../assets/menu/boton_sec.webp") !important; color: var(--marfil); text-shadow: 0 2px 0 #000; }
.btn-sec:active:not(:disabled) { filter: brightness(.8); }
.btn-sec.confirmar { background: none; filter: sepia(1) saturate(5) hue-rotate(-35deg) brightness(.9); }
.ficha-miembro .btn-prim, .volver-trabajos, #pTitulo .btn-sec { padding-top: 6px; padding-bottom: 6px; }

/* flechas del carrusel de naves */
.carrusel { grid-template-columns: 48px minmax(0, 1fr) 48px; }
.flecha {
  width: 48px; height: 48px; border: 0 !important; border-radius: 0; color: transparent; font-size: 0; padding: 0;
  background: url("../assets/menu/flecha_izq.webp") center / 48px 48px no-repeat; image-rendering: pixelated;
}
#navSig { background-image: url("../assets/menu/flecha_der.webp"); }
.flecha:active { transform: translateY(2px); filter: brightness(1.2); }

/* encabezado con la cinta de peligro abajo */
.cab { padding-bottom: 24px; background: url("../assets/menu/franja_peligro.webp") left bottom / 256px 16px repeat-x; image-rendering: pixelated; }

/* créditos en la pantallita verde */
.saldo b {
  display: inline-block; height: 48px; line-height: 48px; padding: 0 22px; margin-top: 2px; min-width: 96px; text-align: center;
  border: 1px solid transparent; border-image: url("../assets/menu/contador.webp") 12 fill / 24px / 0 stretch !important; image-rendering: pixelated;
  color: #b9ff9c; text-shadow: 0 0 6px rgba(120, 255, 120, .55); font-size: 1.35rem;
}

/* barras de estadísticas: segmentos llenos y vacíos */
.barra100 { height: 12px; border-radius: 0; background: url("../assets/menu/barra_vacia.webp") 0 0 / 30px 12px repeat-x; image-rendering: pixelated; }
.barra100 i { background: url("../assets/menu/barra_llena.webp") 0 0 / 30px 12px repeat-x; }
.pips i { height: 10px; border-radius: 0; background: url("../assets/menu/barra_vacia.webp") 0 0 / 100% 100%; image-rendering: pixelated; }
.pips i.on, .pips.comb i.on, .pips.dis i.on { background-image: url("../assets/menu/barra_llena.webp"); background-color: transparent; }
.pips.comb i.on { filter: hue-rotate(160deg); }
.barra-pts { height: 12px; border: 0; border-radius: 0; background: url("../assets/menu/barra_vacia.webp") 0 0 / 30px 12px repeat-x; image-rendering: pixelated; }
.barra-pts i { background: url("../assets/menu/barra_llena.webp") 0 0 / 30px 12px repeat-x; }
.barra-pts { position: relative; }
.barra-pts::before { content: ""; position: absolute; inset: 0; background: rgba(5,7,13,.62); }
.barra-pts b { position: absolute; left: 0; top: 0; height: 100%; background: url("../assets/menu/barra_vacia.webp") 0 0 / 30px 12px repeat-x; transition: width .2s; }
.barra-pts i { position: absolute; left: 0; top: 0; }

/* marco de metal alrededor de los retratos */
.miembro .foto::after, .tripu .foto::after {
  content: ""; position: absolute; inset: -4px; pointer-events: none; z-index: 1;
  border: 16px solid transparent; border-image: url("../assets/menu/aro_retrato.webp") 16 / 16px / 0 stretch !important; image-rendering: pixelated;
}
.miembro .foto .escudo, .tripu .foto .escudo { z-index: 2; }
.miembro .foto img, .tripu .foto img { border-radius: 0; }
.visor .num { top: 14px; left: 18px; }

/* ---------- Pantalla de título: cartel de chapa con el nombre ----------
   El nombre sale del <h1> (primera palabra gris, la segunda en el <span> amarilla),
   así cambiarlo es tocar solo ese texto. */
#pTitulo { background: linear-gradient(to top, var(--espacio) 18%, transparent 62%), radial-gradient(120% 50% at 50% 0%, rgba(242, 176, 30, .08), transparent 70%); }
#pTitulo .titulo-cabeza {
  position: relative; align-self: center; width: auto; max-width: min(100%, 380px); margin-top: 3vh;
  padding: 18px 26px 34px; text-align: center; gap: 0;
  border-style: solid; border-width: 6px; border-color: transparent;
  border-image: url("../assets/menu/panel.webp") 12 fill / 24px / 0 stretch; image-rendering: pixelated;
  box-shadow: 0 14px 0 -6px rgba(0, 0, 0, .55);
}
#pTitulo .titulo-cabeza::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 12px; height: 12px;
  background: url("../assets/menu/franja_peligro.webp") left center / 192px 12px repeat-x; image-rendering: pixelated;
  box-shadow: 0 2px 0 #07080a, 0 -2px 0 #07080a;
}
#pTitulo h1 {
  font-family: "Black Ops One", var(--f-titulo); font-weight: 400; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(2.5rem, 12.5vw, 3.7rem); line-height: .98; color: #cfd4db;
  text-shadow: -2px 0 0 #07080a, 2px 0 0 #07080a, 0 -2px 0 #07080a, 0 2px 0 #07080a, 0 5px 0 #07080a;
}
#pTitulo h1 span { color: #f2b01e; font-size: 1.12em; }
#pTitulo .titulo-cabeza .ojal { order: 2; margin-top: 10px; font-size: .7rem; letter-spacing: .24em; color: var(--tenue); }
#pTitulo .titulo-nave {
  filter: drop-shadow(0 22px 10px rgba(0, 0, 0, .65)) drop-shadow(0 0 28px rgba(242, 176, 30, .3));
}
.titulo-resumen b { color: #b9ff9c; text-shadow: 0 0 6px rgba(120, 255, 120, .45); }
@media (max-height: 640px) {
  #pTitulo .titulo-cabeza { padding: 12px 20px 30px; margin-top: 0; }
  #pTitulo h1 { font-size: 2.4rem; }
}
/* La portada no muestra la nave ni el fondo de un nivel: tiene su propio fondo
   (provisorio, hasta que llegue la ilustración de portada). */
#pTitulo .titulo-nave { display: none; }
#pTitulo { justify-content: flex-start; }
#pTitulo .menu { margin-top: auto; }
#pTitulo .titulo-cabeza { margin-top: 12vh; }
#pTitulo {
  background:
    linear-gradient(to top, rgba(6, 9, 20, .95) 0, rgba(6, 9, 20, .6) 28%, transparent 48%),
    radial-gradient(circle at 105% 62%, #e89a4a 0, #c0602a 18%, #7a3416 30%, #3a160c 34%, rgba(242, 150, 50, .5) 34.6%, rgba(242, 150, 50, .14) 38%, transparent 46%),
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 33% 9%, #cfe 50%, transparent),
    radial-gradient(1.5px 1.5px at 71% 14%, #fff 50%, transparent), radial-gradient(1px 1px at 88% 31%, #fff 50%, transparent),
    radial-gradient(1px 1px at 8% 44%, #9cf 50%, transparent), radial-gradient(1.5px 1.5px at 57% 41%, #fff 50%, transparent),
    radial-gradient(1px 1px at 26% 58%, #fff 50%, transparent), radial-gradient(1px 1px at 92% 52%, #fdb 50%, transparent),
    radial-gradient(1px 1px at 44% 24%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 80% 66%, #fff 50%, transparent),
    radial-gradient(70% 40% at 85% 22%, rgba(110, 70, 190, .28), transparent 70%),
    radial-gradient(60% 35% at 10% 40%, rgba(40, 110, 200, .22), transparent 70%),
    #060914;
}
@media (max-height: 640px) { #pTitulo .titulo-cabeza { margin-top: 4vh; } }

/* ---------- Logo: FRONTIER cromado delante de una X enorme ---------- */
#pTitulo .titulo-cabeza { border: 0; border-image: none; box-shadow: none; padding: 0; max-width: none; width: 100%; margin-top: 8vh; }
#pTitulo .titulo-cabeza::after { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#pTitulo h1.logo { position: relative; display: grid; place-items: center; height: clamp(190px, 58vw, 260px); text-shadow: none; }
#pTitulo h1 .logo-x {
  grid-area: 1 / 1; font-family: "Orbitron", "Black Ops One", sans-serif; font-weight: 900;
  font-size: clamp(11rem, 58vw, 15rem); line-height: 1; transform: skewX(-8deg);
  background: linear-gradient(180deg, #ffd34a 0%, #ff8a1c 45%, #d8261c 80%, #7a0f14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 2px #2a0606) drop-shadow(0 0 24px rgba(255, 110, 30, .55));
  opacity: .95;
}
#pTitulo h1 .logo-txt {
  grid-area: 1 / 1; position: relative; font-family: "Orbitron", "Black Ops One", sans-serif; font-weight: 900;
  font-size: clamp(2.3rem, 11.5vw, 3.3rem); letter-spacing: .04em; line-height: 1; transform: skewX(-8deg);
  background: linear-gradient(180deg, #ffffff 0%, #dfe9f7 38%, #6d86b8 50%, #23345e 54%, #9fb6e0 72%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 0 0 #070b18) drop-shadow(-2px 0 0 #070b18) drop-shadow(0 2px 0 #070b18) drop-shadow(0 -2px 0 #070b18) drop-shadow(0 6px 6px rgba(0, 0, 0, .7));
}
#pTitulo .titulo-cabeza .ojal { margin-top: 2px; }
@media (max-height: 640px) { #pTitulo h1.logo { height: 150px; } #pTitulo h1 .logo-x { font-size: 9.5rem; } #pTitulo h1 .logo-txt { font-size: 2.2rem; } #pTitulo .titulo-cabeza { margin-top: 2vh; } }
/* botones más arriba, cerca del logo; los datos y la nota quedan abajo */
#pTitulo .menu { margin-top: 5vh; }
#pTitulo .titulo-resumen { margin-top: auto; }
/* Portada con el arte final: fondo de planeta al amanecer y logo dibujado */
#pTitulo {
  background: linear-gradient(to top, rgba(6, 9, 20, .75) 0, transparent 22%),
    url("../assets/titulo/fondo.webp") center bottom / cover no-repeat, #0a0620;
}
#pTitulo h1.logo { height: auto; display: block; }
#pTitulo h1.logo img { display: block; width: min(92%, 420px); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
#pTitulo .titulo-cabeza { margin-top: 6vh; }
#pTitulo .titulo-cabeza .ojal { margin-top: 10px; }
#pTitulo .titulo-resumen, #pTitulo .nota { text-shadow: 0 1px 3px #000, 0 0 8px #000; color: #d8d2e8; }
@media (max-height: 640px) { #pTitulo h1.logo img { width: min(80%, 300px); } #pTitulo .titulo-cabeza { margin-top: 2vh; } }

/* ---------- Portada en movimiento ----------
   Estrellas que titilan, el sol que late en el horizonte, estrellas fugaces,
   un reflejo que cruza el logo, destellos en las puntas de la X y el botón Jugar que respira. */
#pTitulo::before, #pTitulo::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
#pTitulo::before {
  background:
    radial-gradient(2px 2px at 18% 22%, #fff 50%, transparent), radial-gradient(2px 2px at 76% 9%, #cfe6ff 50%, transparent),
    radial-gradient(1.5px 1.5px at 62% 31%, #fff 50%, transparent), radial-gradient(2px 2px at 9% 52%, #ffe9c9 50%, transparent),
    radial-gradient(1.5px 1.5px at 88% 44%, #fff 50%, transparent), radial-gradient(2px 2px at 40% 46%, #e4d6ff 50%, transparent),
    radial-gradient(1.5px 1.5px at 30% 12%, #fff 50%, transparent), radial-gradient(2px 2px at 93% 26%, #fff 50%, transparent);
  animation: titilar-estrellas 2.6s ease-in-out infinite alternate;
}
#pTitulo::after {
  background: radial-gradient(38% 12% at 50% 67.5%, rgba(255, 214, 120, .55), rgba(255, 140, 40, .22) 45%, transparent 75%);
  mix-blend-mode: screen; animation: latir-sol 4s ease-in-out infinite;
}
@keyframes titilar-estrellas { 0% { opacity: .15; } 60% { opacity: .9; } 100% { opacity: .35; } }
@keyframes latir-sol { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

/* estrellas fugaces */
#pTitulo .fugaz {
  position: absolute; z-index: -1; top: 14%; left: 70%; width: 90px !important; max-width: none; height: 2px; margin: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 85%, #fff);
  border-radius: 2px; transform: rotate(-28deg); opacity: 0; filter: drop-shadow(0 0 4px #bfe0ff);
  animation: fugaz 7s linear infinite 1.5s;
}
#pTitulo .fugaz.f2 { top: 36%; left: 20%; width: 60px !important; animation-duration: 11s; animation-delay: 5s; }
@keyframes fugaz {
  0% { opacity: 0; transform: rotate(-28deg) translateX(0); }
  2% { opacity: 1; }
  9% { opacity: 0; transform: rotate(-28deg) translateX(-260px); }
  100% { opacity: 0; transform: rotate(-28deg) translateX(-260px); }
}

/* logo: flota apenas, un reflejo lo cruza y titilan los destellos de las puntas */
#pTitulo h1.logo { position: relative; width: min(92%, 420px); margin: 0 auto; animation: flotar-logo 5s ease-in-out infinite; }
#pTitulo h1.logo img { width: 100%; }
#pTitulo h1.logo .brillo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 48%, rgba(255, 255, 255, .85) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  -webkit-mask: url("../assets/titulo/logo.webp") center / 100% 100% no-repeat; mask: url("../assets/titulo/logo.webp") center / 100% 100% no-repeat;
  mix-blend-mode: overlay; animation: reflejo 4.5s ease-in-out infinite 1s;
}
@keyframes reflejo { 0% { background-position: 150% 0; } 35%, 100% { background-position: -60% 0; } }
@keyframes flotar-logo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
#pTitulo h1.logo .destello {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none;
  background:
    linear-gradient(#fff, #fff) center / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 2px no-repeat,
    radial-gradient(circle, rgba(255, 240, 170, .95) 0 3px, rgba(255, 200, 80, .4) 5px, transparent 9px);
  filter: drop-shadow(0 0 4px #ffd34a); transform: scale(0) rotate(0deg); animation: destello 2.4s ease-in-out infinite;
}
#pTitulo h1.logo .d1 { left: 17.5%; top: 7%; }
#pTitulo h1.logo .d2 { left: 84%; top: 7.3%; animation-delay: .6s; }
#pTitulo h1.logo .d3 { left: 83%; top: 92%; animation-delay: 1.2s; }
#pTitulo h1.logo .d4 { left: 15.8%; top: 92%; animation-delay: 1.8s; }
@keyframes destello { 0%, 55%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 25% { transform: scale(1.2) rotate(45deg); opacity: 1; } }

/* el botón Jugar respira */
#pTitulo #btnJugar { animation: respirar 2.2s ease-in-out infinite; }
@keyframes respirar { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 200, 60, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(255, 200, 60, .75)); } }

@media (prefers-reduced-motion: reduce) {
  #pTitulo::before, #pTitulo::after, #pTitulo .fugaz, #pTitulo h1.logo, #pTitulo h1.logo .brillo, #pTitulo h1.logo .destello, #pTitulo #btnJugar { animation: none; }
  #pTitulo .fugaz, #pTitulo h1.logo .destello { display: none; }
}
@media (max-height: 640px) { #pTitulo h1.logo { width: min(80%, 300px); } #pTitulo h1.logo img { width: 100%; } }