/* Capas del cliente Phaser: lienzo del mapa debajo y HUD (src/gui/space.css, sin cambios) encima, como el DOMContainer del motor. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #091321; touch-action: none; }
/* Fondo vivo (fondo.js): dos lienzos fijos detrás del de Phaser, que es transparente. */
.fondo-vivo, .fondo-ambiente { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.fondo-vivo[hidden], .fondo-ambiente[hidden] { display: none; }
#lienzo { position: fixed; inset: 0; }
#lienzo canvas { touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#acceso:empty { display: none; }
#acceso { position: fixed; inset: 0; z-index: 900; }
/* App de Google Play: el HUD oculta la tienda si VF_TIENDA_PLAY está apagado; si está encendido se paga con Google Play. */
.space-ui .pay-error { color: #ff8a7a; margin: 4px 0; }
/* Ajustes → Cuenta: borrar la cuenta (Google Play). */
.space-ui .settings-group button.danger { border-color: #a85a50; color: #ffb0a4; }
.space-ui .delete-account { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid #a85a50; border-radius: 8px; background: #2a1414cc; }
.space-ui .delete-account p { margin: 0; color: #ffd6cf; }
.space-ui .delete-account .delete-error { color: #ff8a7a; }

/* ---- Mejoras visuales 2 (aprobadas el 30 oct. 2026) ---- */

/* Sin conexión antes de entrar (principal.js): aviso mientras se reintenta, en lugar de una pantalla vacía. */
.aviso-conexion { position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%); z-index: 950; margin: 0; padding: 10px 16px; border-radius: 20px;
  background: #0b1626e6; border: 1px solid #3e6283; color: #bfe9ff; font: 600 14px/1.3 system-ui, sans-serif; text-align: center; max-width: calc(100% - 32px); }

/* Pantalla de acceso sobre el fondo vivo: sin la ilustración fija, el nombre con un brillo dorado que lo recorre y la tarjeta translúcida. */
body.acceso-vivo .rpg-account-root { background: transparent !important; }
body.acceso-vivo .rpg-account-root .rpg-ui-account-brand h1 {
  background: linear-gradient(100deg, #b98a3a 0%, #ffe3a3 22%, #fff6d8 30%, #ffcf6b 38%, #b98a3a 60%, #ffcf6b 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px rgba(255, 170, 70, 0.35));
  animation: logo-brillo 5s linear infinite;
}
@keyframes logo-brillo { from { background-position: 100% 0; } to { background-position: -150% 0; } }
body.acceso-vivo .rpg-account-root .rpg-ui-account {
  background-color: rgba(10, 22, 38, 0.62) !important; border-color: rgba(140, 190, 230, 0.28) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Hiperespacio (fondo.js): la pantalla de carga se vuelve transparente y queda un rótulo abajo con el sector de destino. */
body.en-salto .loading-screen { background: transparent; }
body.en-salto .loading-screen::before { display: none; }
body.en-salto .loading-screen .loading-box { position: absolute; left: 50%; top: 74%; transform: translateX(-50%); padding: 8px 18px; border-radius: 18px;
  background: rgba(5, 10, 20, 0.45); border: 1px solid rgba(140, 190, 230, 0.25); box-shadow: none; }
body.en-salto .loading-screen .loading-bar, body.en-salto .loading-screen [data-testid="loading-progress"] { display: none; }

/* Créditos que suben contando (hud.js): el chip brilla mientras cuenta. */
.space-ui .chip.credits { transition: box-shadow 0.25s, border-color 0.25s; }
.space-ui .chip.credits.counting { border-color: #ffd98a; box-shadow: 0 0 12px #ffb34788; }
.space-ui .chip.credits b { font-variant-numeric: tabular-nums; }

/* Casco y escudo con rastro: al recibir daño, la parte perdida queda clara y se vacía tras una pausa. */
.status-bar .stat-bar { position: relative; }
.status-bar .stat-bar span { position: relative; }
.status-bar .stat-bar .trail { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #fff3e0; transition: width 0.55s cubic-bezier(0.3, 0.7, 0.4, 1) 0.35s; }
.status-bar .shield .stat-bar .trail { background: #dff6ff; }

/* Paneles: entran con un pequeño salto y salen desvaneciéndose (la copia inerte de panel-motion.js). */
.space-ui .modal:not(.hidden) { animation: velo-entra 0.2s ease-out; }
.space-ui .modal:not(.hidden) > .panel { animation: panel-entra 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.space-ui .modal.saliendo { pointer-events: none !important; animation: velo-sale 0.19s ease-in forwards; }
.space-ui .modal.saliendo > .panel { animation: panel-sale 0.19s ease-in forwards; }
@keyframes velo-entra { from { opacity: 0; } }
@keyframes velo-sale { to { opacity: 0; } }
@keyframes panel-entra { from { opacity: 0; transform: translateY(14px) scale(0.94); } }
@keyframes panel-sale { to { opacity: 0; transform: translateY(8px) scale(0.97); } }

/* Mapa galáctico vivo (hud/galaxy-live.js): nebulosa animada detrás de los hexágonos y luces encima; cada sector con su miniatura. */
.galaxy-live, .galaxy-live-top { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.galaxy-live-top { z-index: 3; }
.galaxy-scroll.vivo { background: radial-gradient(ellipse at center, #0b1236 0%, #050a14 72%); }
.galaxy-scroll.vivo .galaxy-live, .galaxy-scroll.vivo .galaxy-live-top { display: block; }
.galaxy-scroll.vivo .galaxy-live { -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%); }
.hex .hex-icon { box-sizing: content-box; padding: 3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--orb-b, #99aabb), var(--orb-a, #334455) 55%, #05070e 100%); background-size: 150% 150%; background-position: 30% 30%;
  box-shadow: 0 0 8px color-mix(in srgb, var(--orb-b, #99aabb) 45%, transparent); }
.galaxy-scroll.vivo .hex .hex-icon { animation: orbe 7s ease-in-out infinite alternate; }
@keyframes orbe { to { background-position: 70% 65%; } }

@media (prefers-reduced-motion: reduce) {
  body.acceso-vivo .rpg-account-root .rpg-ui-account-brand h1, .galaxy-scroll.vivo .hex .hex-icon { animation: none; }
  .status-bar .stat-bar .trail { transition: none; }
  .space-ui .modal:not(.hidden), .space-ui .modal:not(.hidden) > .panel { animation: none; }
}