/* Star Wars — campo de estrellas, amarillo del rótulo inicial y azul de sable láser. */

:root {
  --bg: #05060a;
  --fondo:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fffa, transparent),
    radial-gradient(1.5px 1.5px at 55% 35%, #fff, transparent), radial-gradient(1px 1px at 75% 80%, #fff9, transparent),
    radial-gradient(1px 1px at 90% 15%, #fffc, transparent), radial-gradient(1px 1px at 45% 90%, #fff8, transparent),
    #05060a;
  --surface: #11141c;
  --surface-2: #1a1e29;
  --borde: rgba(255, 232, 31, .15);
  --texto: #eef0f5;
  --suave: #9aa1b3;
  --acento: #ffe81f;
  --grad: linear-gradient(180deg, #fff06a, #e6cf00);
  --sobre-acento: #111;
  --ok: #2e9e5a;
  --sobre-ok: #fff;
  --casi: #e0b33c;
  --sobre-casi: #241a00;
  --mal: #a3242e;
  --sobre-mal: #fff;
  --r: 6px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Orbitron', 'Inter', sans-serif;
  --cab-bg: linear-gradient(180deg, #1c2130, #11141c);
}

.top { border-bottom: 2px solid var(--acento); backdrop-filter: none; background: #05060a; }
.top .logo, .top .tema-link { color: #fff; }
.top .logo b { background: none; color: var(--acento); -webkit-text-fill-color: var(--acento); }
.top .tema-link { font: 900 16px/1 'Orbitron', sans-serif; color: var(--acento); letter-spacing: 2px; text-transform: uppercase; }
.top .nav a { color: #cfd3de; }
.top .nav a:hover, .top .nav a.on { background: rgba(255, 232, 31, .1); color: #fff; }
.top .nav a.on { box-shadow: inset 0 -2px 0 var(--acento); }
@media (max-width: 860px) { .top .nav { background: #0b0d14; } }

h1.titulo { font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--acento); }
.btn { font-family: 'Orbitron', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
/* Filo de sable láser azul */
.tarjeta, .modal, .juego, .celda.pj, .pista, .pixel, .aprendiz { box-shadow: 0 0 0 1px rgba(80, 170, 255, .35), 0 0 16px rgba(80, 170, 255, .12); }

.sw-hero { text-align: center; padding: 18px 0 30px; }
.sw-hero .lejana { color: #4fb3ff; font-size: 15px; margin-bottom: 12px; }
.sw-hero h1 { font: 900 clamp(52px, 13vw, 104px)/1 var(--font-d); color: transparent; -webkit-text-stroke: 3px var(--acento); letter-spacing: 4px; text-transform: uppercase; }
.sw-hero p:last-child { color: var(--suave); margin-top: 12px; }
.juego .cuerpo b { font: 700 22px/1 var(--font-d); text-transform: uppercase; color: var(--acento); }
.juego .muestra { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), #0b0d14; }

/* Maestro: tarjeta del aprendiz */
.aprendiz { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 10px; background: var(--surface); }
.aprendiz img { width: 110px; height: 110px; object-fit: contain; border-radius: 8px; background: #0b0d14; }
.aprendiz small { display: block; text-transform: uppercase; letter-spacing: 3px; font-size: 11px; color: #4fb3ff; }
.aprendiz b { display: block; margin-top: 6px; font: 700 clamp(20px, 5vw, 30px)/1.1 var(--font-d); }