/* Auralith — capa "cyberpunk calmado": se carga DESPUÉS de style.css y
   recolorea todo via variables + añade brillos sutiles y escaneo tenue.
   Mantener discreto: misterio, no neón chillón. */
:root{
  --bg:#04060d; --bg2:#080d1a; --panel:#0a1120; --panel2:#070b16;
  --line:#16263f; --txt:#cfe9ff; --muted:#67809f;
  --accent:#1fd6e6;   /* cian */
  --accent2:#a774ff;  /* violeta */
  --ok:#2ee6a6; --warn:#ffbf66; --bad:#ff5170;
  --metal:#cdd6e6; --crystal:#7fe0ff; --deut:#8affc8;
  --neon: 0 0 6px rgba(31,214,230,.5), 0 0 18px rgba(31,214,230,.18);
}

body{
  background:
    radial-gradient(1100px 650px at 82% -12%, rgba(31,214,230,.10) 0%, transparent 58%),
    radial-gradient(900px 600px at -5% 110%, rgba(167,116,255,.12) 0%, transparent 55%),
    var(--bg) !important;
}
/* Líneas de escaneo muy tenues sobre todo el fondo */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background:repeating-linear-gradient(0deg, rgba(120,180,255,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.wrap, .topbar, .foot{ position:relative; z-index:1; }

/* Marca y cabecera con halo */
.topbar{ border-bottom:1px solid rgba(31,214,230,.35); box-shadow:0 1px 24px rgba(31,214,230,.06); }
.brand{ letter-spacing:1px; display:inline-flex; align-items:center; gap:9px; }
.brand .brand-word span{ color:var(--accent); text-shadow:var(--neon); }
.brand-logo{ filter:drop-shadow(0 0 6px rgba(31,214,230,.45)); }
.dev-badge{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:#0b1120; background:linear-gradient(135deg,var(--accent),var(--accent2));
  padding:3px 8px; border-radius:20px; margin-left:-4px; box-shadow:var(--neon); }
.dev-badge:hover{ text-decoration:none; filter:brightness(1.1); }
.topbar nav a.on{ background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:var(--neon); color:#03121a; }
.topbar nav a:hover{ box-shadow:inset 0 0 0 1px rgba(31,214,230,.35); }

/* Títulos con aire tecno */
h1,h2,h3{ letter-spacing:.4px; }
h1 span, .lore-title{ text-shadow:0 0 10px rgba(167,116,255,.35); }

/* Paneles con borde fino y brillo al pasar */
.card,.planet-card,.lore-card,.block,.oracle-event,.spiral-result,.ban-card{
  box-shadow:0 0 0 1px rgba(31,214,230,.05), 0 10px 30px rgba(0,0,0,.45);
  transition:box-shadow .25s ease, transform .25s ease;
}
.card:hover,.lore-card:hover,.planet-card:hover{
  box-shadow:0 0 0 1px rgba(31,214,230,.28), 0 0 26px rgba(31,214,230,.08);
}

/* Botones neón */
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2)) !important;
  color:#04121a !important; box-shadow:var(--neon); border:0;
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-small{ box-shadow:0 0 10px rgba(31,214,230,.18); }
a{ color:var(--accent); }

/* HUD del mundo (barra de estado) */
.world-hud{
  position:sticky; top:0; z-index:9;
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  padding:7px 22px; font-size:13px;
  background:linear-gradient(90deg, rgba(8,13,26,.92), rgba(10,17,32,.92));
  border-bottom:1px solid rgba(167,116,255,.28);
  backdrop-filter:blur(8px); color:var(--muted);
}
.world-hud .hud-item{ display:flex; align-items:center; gap:6px; }
.world-hud .hud-item b{ color:var(--txt); font-weight:600; }
.world-hud .hud-clock{ font-family:"Consolas",monospace; color:var(--accent); text-shadow:var(--neon); }
.world-hud .hud-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); animation:hud-pulse 2.4s infinite; }
.world-hud .hud-online{ color:var(--ok); font-weight:700; }
.world-hud .hud-tension{ color:var(--warn); }
.world-hud .hud-players{ color:var(--muted); }
.world-hud .hud-players b{ color:var(--accent2); }
.world-hud .hud-sand b{ color:var(--accent); font-family:"Consolas",monospace; }
.world-hud .hud-sand.charging b{ color:var(--warn); text-shadow:0 0 8px rgba(255,191,102,.5); }
@keyframes hud-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* Botón de sonido ambiental */
.ambient-btn{
  position:fixed; right:16px; bottom:16px; z-index:30;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(31,214,230,.5); background:rgba(8,13,26,.85);
  color:var(--accent); font-size:18px; box-shadow:var(--neon);
  display:flex; align-items:center; justify-content:center;
}
.ambient-btn:hover{ filter:brightness(1.15); }

@media(max-width:680px){
  .world-hud{ gap:12px; padding:7px 14px; font-size:12px; }
}