/* assets/tokens.css — Sistema visual Konverxo (inspeccionado desde
   pucelometro.es/jugar). Compartido entre las 4 rutas de la app. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Anton&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#0a0611; --bg2:#130a23;
  --panel:rgba(255,255,255,.035); --panel2:rgba(255,255,255,.06);
  --br:rgba(168,85,247,.22); --br2:rgba(168,85,247,.4);
  --violeta:#a855f7; --violeta2:#c084fc; --violeta-deep:#6d28d9;
  --oro:#f6c945; --oro2:#ffe08a;
  --txt:#efeaf8; --dim:#a99cc6; --dim2:#8d80a8;
  --verde:#34e89e; --rojo:#ff5470; --cian:#18c8e8;
  --r:7px;
  --font-display:"Anton",sans-serif;
  --font-body:"Space Grotesk",system-ui,sans-serif;
  --font-mono:"Space Mono",monospace;
}

.alp-h{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.01em; font-weight:400; }

body.alp{
  margin:0; min-height:100vh; background:radial-gradient(ellipse at 50% 0%, var(--bg2), var(--bg));
  color:var(--txt); font-family:"Space Grotesk",system-ui,sans-serif;
  position:relative; overflow-x:hidden;
}

.alp-card{
  background:var(--panel); border:1px solid var(--br2); border-radius:var(--r);
  padding:22px 18px; box-shadow:0 0 24px rgba(168,85,247,.08);
}

.alp-btn{
  font-family:"Space Grotesk",sans-serif; font-weight:600; border-radius:var(--r);
  border:1px solid var(--br); background:var(--panel); color:var(--txt);
  padding:12px 18px; cursor:pointer; transition:.13s;
}
.alp-btn:hover{ border-color:var(--br2); background:var(--panel2); }
.alp-btn.gold{ background:var(--oro); border-color:var(--oro); color:#1a1204; font-weight:700; }
.alp-btn.verde{ background:var(--verde); border-color:var(--verde); color:#04231a; font-weight:700; }
.alp-btn.rojo{ background:var(--rojo); border-color:var(--rojo); color:#2a0410; font-weight:700; }

.alp-opt{
  text-align:left; font-family:"Space Grotesk",sans-serif; font-weight:600;
  background:var(--panel); border:1px solid var(--br); color:var(--txt);
  padding:14px 15px; border-radius:var(--r); cursor:pointer;
  display:flex; align-items:center; gap:13px; transition:.13s; width:100%;
}
.alp-opt:hover{ border-color:var(--br2); background:var(--panel2); }
.alp-opt.elegido{
  background:rgba(52,232,158,.18); border-color:var(--verde); color:#bdffe2;
  box-shadow:0 0 0 1px var(--verde), 0 0 12px rgba(52,232,158,.4);
}
.alp-opt.deshabilitado{ opacity:.3; pointer-events:none; }
.alp-key{
  flex:0 0 34px; height:34px; border-radius:7px; background:rgba(168,85,247,.18);
  display:grid; place-items:center; font-weight:700; font-size:13px; color:var(--violeta2);
}

/* Partículas flotantes */
.alp-particulas{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.alp-particula{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--violeta2); box-shadow:0 0 6px var(--violeta);
  animation:alp-flt linear infinite;
}
@keyframes alp-flt{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:.6; }
  88%{ opacity:.4; }
  100%{ transform:translateY(-104vh); opacity:0; }
}

/* Skyline (silueta genérica, técnica de degradado violeta) */
.alp-skyline{ position:fixed; left:0; right:0; bottom:0; height:14vh; min-height:90px; z-index:0; pointer-events:none; }
.alp-skyline svg{ width:100%; height:100%; display:block; }

/* Portal de escaneo (fondo de /pantalla) */
.alp-portal{
  position:fixed; top:50%; left:50%; width:min(70vmin,720px); height:min(70vmin,720px);
  transform:translate(-50%,-50%); z-index:0; pointer-events:none;
  transition:filter .5s ease;
}
.alp-portal svg{ width:100%; height:100%; display:block; }
.alp-anillo-a{ transform-origin:200px 200px; animation:alp-spin 46s linear infinite; }
.alp-anillo-b{ transform-origin:200px 200px; animation:alp-spin-rev 60s linear infinite; }
@keyframes alp-spin{ to{ transform:rotate(360deg); } }
@keyframes alp-spin-rev{ to{ transform:rotate(-360deg); } }

.alp-portal-glow{
  position:absolute; inset:18%; border-radius:50%; filter:blur(34px);
  background:radial-gradient(circle, color-mix(in srgb, var(--portal, var(--violeta)) 55%, transparent), transparent 72%);
  transition:background .5s ease;
}
.alp-portal-sweep{
  position:absolute; inset:0; border-radius:50%; mix-blend-mode:screen;
  background:conic-gradient(from 0deg, transparent 0deg,
    color-mix(in srgb, var(--portal, var(--violeta)) 45%, transparent) 18deg, transparent 42deg);
  animation:alp-spin 5s linear infinite;
}

.alp-footer{
  position:fixed; bottom:8px; left:0; right:0; text-align:center; z-index:6;
}
.alp-footer img{ height:16px; opacity:.92; filter:invert(1) brightness(1.6); }

/* ------------------------------------------------------------
   Efectos de acabado "Konverxo" (inspirados en creadores.donodelobo.es):
   banda de escaneo + textura CRT. Uso: alpInitCRT() desde fx.js.
   ------------------------------------------------------------ */
.alp-scan{
  position:fixed; left:0; right:0; height:110px; z-index:1; pointer-events:none;
  background:linear-gradient(transparent, color-mix(in srgb, var(--violeta2) 8%, transparent), transparent);
  animation:alp-scanmove 7.5s linear infinite;
}
@keyframes alp-scanmove{ 0%{ top:-110px; } 100%{ top:100%; } }
.alp-crt{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.4; mix-blend-mode:multiply;
  background:repeating-linear-gradient(rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px, transparent 1px, transparent 3px);
}

/* Tarjeta con marco neón + esquinas tipo HUD */
.alp-card-neon{
  position:relative; background:var(--panel); border:1px solid var(--br2); border-radius:var(--r);
  padding:26px 22px; box-shadow:0 0 30px color-mix(in srgb, var(--violeta) 25%, transparent),
    inset 0 0 40px color-mix(in srgb, var(--violeta) 6%, transparent);
}
.alp-card-neon::before, .alp-card-neon::after{
  content:''; position:absolute; width:16px; height:16px; border:2px solid var(--violeta2); opacity:.7;
}
.alp-card-neon::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.alp-card-neon::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* Refuerzos de las 4 familias de transición de /pantalla */
@keyframes alp-punch{ 0%{transform:scale(.9)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }
.alp-clase-impacto{ animation:alp-punch .32s cubic-bezier(.2,.7,.3,1); }
@keyframes alp-medalla{ 0%{filter:drop-shadow(0 0 0 transparent)} 100%{filter:drop-shadow(0 0 22px currentColor)} }
.alp-clase-resultado{ animation:alp-medalla .5s ease forwards; }