/* ============================================================
   BASE — variables, reset, fondo y utilidades
   ============================================================ */
:root{
  --bg:#05040c;
  --ink:#f5f5f7;
  --ink2:rgba(245,245,247,.66);
  --ink3:rgba(245,245,247,.42);
  --glass:rgba(30,28,48,.52);
  --glass2:rgba(22,20,38,.99);
  --line:rgba(255,255,255,.12);
  --accent:#a9bbff;
  --sel:rgba(120,140,255,.40);
  --menu-h:30px;
  --lvl:0;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

.skip{position:fixed;left:12px;top:-60px;z-index:300;background:#fff;color:#111;padding:8px 14px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .25s}
.skip:focus{top:40px}

/* ---------- Fondo (ligero: capas CSS + sprites dibujados una vez) ---------- */
.space{position:fixed;inset:0;z-index:0;overflow:hidden;
  /* Base estática: el color del espacio se ve aunque falle cualquier capa animada */
  background:
    radial-gradient(60vmax 50vmax at 20% 30%,rgba(255,122,47,.16),transparent 70%),
    radial-gradient(55vmax 45vmax at 78% 25%,rgba(255,61,139,.14),transparent 70%),
    radial-gradient(70vmax 55vmax at 55% 80%,rgba(138,77,255,.20),transparent 70%),
    radial-gradient(45vmax 40vmax at 12% 85%,rgba(53,212,255,.08),transparent 70%),
    #06030f}
.nebula{position:absolute;inset:0;transition:opacity .5s linear}
.nebula i{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:50%;will-change:transform;
  background:radial-gradient(circle,rgba(var(--c),var(--a)) 0%,rgba(var(--c),calc(var(--a) * .35)) 40%,rgba(var(--c),0) 68%);
  animation:drift var(--d) ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(var(--fx),var(--fy),0) scale(1)}to{transform:translate3d(var(--tx),var(--ty),0) scale(1.12)}}
.stars{position:absolute;left:-40px;top:-40px;will-change:transform,opacity;animation:tw 6s ease-in-out infinite alternate}
.stars.s2{animation-duration:8s;animation-delay:-3s}
.stars.s3{animation-duration:4.5s;animation-delay:-1.5s}
@keyframes tw{from{opacity:.55}to{opacity:1}}
.wplanet{position:absolute;opacity:.3;animation:pdrift var(--d) ease-in-out infinite alternate}
@keyframes pdrift{from{transform:translate3d(-14px,-8px,0)}to{transform:translate3d(16px,10px,0)}}
.shoot{position:absolute;width:110px;height:2px;border-radius:2px;opacity:0;transform:rotate(24deg);
  background:linear-gradient(90deg,rgba(255,240,210,0),rgba(255,240,210,.9));animation:shoot 1.1s ease-out forwards}
@keyframes shoot{0%{opacity:0;transform:translate3d(0,0,0) rotate(24deg)}15%{opacity:1}100%{opacity:0;transform:translate3d(320px,150px,0) rotate(24deg)}}

.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(3,2,10,.55) 100%),
    linear-gradient(180deg,rgba(5,4,12,.3),transparent 25%,transparent 75%,rgba(5,4,12,.4))}
/* Grano estático y sin mezcla (antes animado: muy costoso en equipos modestos) */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.nojs{position:fixed;inset:40% 10% auto;text-align:center;color:var(--ink2)}

/* ---------- Modo ligero (se activa solo en equipos lentos, o con ?lite) ---------- */
.lite .nebula i,.lite .stars,.lite .wplanet,.lite .icon.playing .planet,.lite .art-glow{animation:none!important}
.lite .wplanet,.lite .shoot,.lite .grain,.lite .art-glow{display:none}
.lite .menubar,.lite .widget,.lite .dock-in,.lite .hint,.lite .win{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.lite .menubar{background:rgba(14,12,26,.94)}
.lite .widget,.lite .dock-in,.lite .hint{background:rgba(24,22,40,.94)}
.lite .win{box-shadow:0 0 0 .5px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.45)!important}
.lite .art img{transform:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}

}