/* ============================================================
   NUMBER NINJA — Estilos
   Colección EL TÍO IA · eltioia.cl
   Estética: arcade neón. Pensado para verse proyectado en clase.
   Sin fuentes externas: funciona 100% offline.
   ============================================================ */

:root{
  --bg:        #070b16;
  --bg-2:      #0d1428;
  --panel:     #121b33;
  --panel-2:   #182446;
  --cyan:      #22e6ff;
  --magenta:   #ff3d9a;
  --lime:      #8bff3d;
  --amber:     #ffc531;
  --red:       #ff4d4d;
  --text:      #e8f0ff;
  --text-dim:  #8ea3c8;
  --radius:    20px;
  --font: "Trebuchet MS", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, system-ui, sans-serif;
  --font-num: "Consolas", "SF Mono", "Roboto Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  min-height:100dvh;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 600px at 20% 0%,  rgba(34,230,255,.12) 0%, transparent 60%),
    radial-gradient(800px 600px at 85% 100%, rgba(255,61,154,.12) 0%, transparent 60%),
    var(--bg);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

/* ---------- Fondo arcade ---------- */
.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(34,230,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,230,255,.07) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
}
.scanline{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
}

/* ---------- Pantallas ---------- */
#app{ position:relative; z-index:1; }

.screen{ display:none; min-height:100dvh; padding:clamp(14px,3vw,32px); place-items:center; }
.screen.is-active{ display:grid; animation:screenIn .4s ease both; }
@keyframes screenIn{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:none; }
}

.card{
  width:min(820px,100%);
  background:linear-gradient(180deg, rgba(18,27,51,.96) 0%, rgba(10,16,32,.96) 100%);
  border:1px solid rgba(34,230,255,.28);
  border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(255,61,154,.12), 0 24px 60px rgba(0,0,0,.6);
  padding:clamp(20px,4vw,38px);
  text-align:center;
}

/* ---------- Inicio ---------- */
.ninja-logo{
  font-size:clamp(56px,14vw,96px); line-height:1;
  filter:drop-shadow(0 0 26px rgba(34,230,255,.5));
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%    { transform:translateY(-12px) rotate(3deg); }
}

.title{
  font-size:clamp(34px,9vw,72px);
  margin:.08em 0 .05em;
  letter-spacing:.05em;
  font-weight:900;
  background:linear-gradient(180deg,#fff 0%, var(--cyan) 45%, var(--magenta) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(34,230,255,.45));
}
.subtitle{
  font-size:clamp(15px,3.6vw,21px); color:var(--cyan);
  margin:0 0 26px; letter-spacing:.02em;
}

/* ---------- Bloques de configuración ---------- */
.setting{ margin-bottom:20px; text-align:left; }
.setting-title{
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim); margin:0 0 10px; font-weight:900;
}
.setting-hint{ font-size:12.5px; color:var(--magenta); margin:8px 0 0; min-height:16px; opacity:0; transition:opacity .2s; }
.setting-hint.show{ opacity:1; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }

.chip{
  flex:1 1 130px;
  font-family:var(--font); font-size:15px; font-weight:900;
  color:var(--text-dim);
  background:var(--panel);
  border:2px solid rgba(142,163,200,.25);
  border-radius:14px;
  padding:12px 14px;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .12s ease, border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.chip small{ font-weight:400; font-size:11.5px; opacity:.75; }
.chip .chip-sym{ font-family:var(--font-num); font-size:20px; }
.chip:hover{ transform:translateY(-2px); border-color:rgba(34,230,255,.5); color:var(--text); }
.chip:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }
.chip.is-on{
  color:#04121a;
  background:linear-gradient(180deg,var(--cyan) 0%, #12b9d6 100%);
  border-color:#7ff4ff;
  box-shadow:0 0 22px rgba(34,230,255,.4);
}
.chip.is-on small{ opacity:.8; }

/* ---------- Modo relámpago ---------- */
.lightning-toggle{
  width:100%;
  display:flex; align-items:center; gap:14px; text-align:left;
  background:linear-gradient(100deg, rgba(255,197,49,.12) 0%, rgba(255,61,154,.1) 100%);
  border:2px solid rgba(255,197,49,.35);
  border-radius:16px; padding:14px 16px; margin:6px 0 24px;
  cursor:pointer; color:var(--text); font-family:var(--font);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.lightning-toggle:hover{ border-color:var(--amber); }
.lightning-toggle:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }
.lightning-toggle[aria-pressed="true"]{
  border-color:var(--amber);
  box-shadow:0 0 26px rgba(255,197,49,.35);
  background:linear-gradient(100deg, rgba(255,197,49,.24) 0%, rgba(255,61,154,.18) 100%);
}
.lt-icon{ font-size:30px; line-height:1; }
.lightning-toggle[aria-pressed="true"] .lt-icon{ animation:zap .9s ease-in-out infinite; }
@keyframes zap{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.22) rotate(-8deg);} }
.lt-text{ flex:1; }
.lt-text strong{ display:block; font-size:15px; letter-spacing:.08em; color:var(--amber); }
.lt-text small{ display:block; font-size:12px; color:var(--text-dim); margin-top:3px; line-height:1.4; }
.lt-switch{
  flex:0 0 auto; width:52px; height:28px; border-radius:99px;
  background:rgba(142,163,200,.25); position:relative; transition:background .2s;
}
.lt-switch i{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--text-dim); transition:transform .2s, background .2s;
}
.lightning-toggle[aria-pressed="true"] .lt-switch{ background:rgba(255,197,49,.4); }
.lightning-toggle[aria-pressed="true"] .lt-switch i{ transform:translateX(24px); background:var(--amber); }

/* ---------- Botones ---------- */
.btn{
  font-family:var(--font); font-weight:900; cursor:pointer;
  border:none; border-radius:14px; padding:14px 24px; font-size:16px;
  text-decoration:none; display:inline-block;
  transition:transform .12s ease, box-shadow .2s, filter .2s, background .2s, color .2s;
}
.btn:active{ transform:translateY(2px) scale(.99); }
.btn:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }

.btn-primary{
  background:linear-gradient(180deg, var(--magenta) 0%, #c9186f 100%);
  color:#fff;
  box-shadow:0 8px 0 #8b0f4b, 0 0 34px rgba(255,61,154,.45);
  letter-spacing:.05em;
}
.btn-primary:hover{ filter:brightness(1.1); }
.btn-primary:active{ box-shadow:0 3px 0 #8b0f4b, 0 0 20px rgba(255,61,154,.4); }

.btn-xl{ font-size:clamp(19px,4.6vw,26px); padding:18px 40px; width:100%; }

.btn-ghost{
  background:transparent; color:var(--text-dim);
  border:2px solid rgba(142,163,200,.3);
  font-size:14px; padding:10px 18px; font-weight:700;
}
.btn-ghost:hover{ border-color:var(--cyan); color:var(--text); }

.brand{
  margin:24px 0 12px; font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-dim);
}
.brand strong{ color:var(--cyan); }

.home-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---------- HUD ---------- */
#screen-game{ align-content:center; gap:12px; }

.hud{
  width:min(1000px,100%);
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.hud-box{
  background:rgba(18,27,51,.85);
  border:2px solid rgba(142,163,200,.2);
  border-radius:14px; padding:8px 6px; text-align:center;
}
.hud-label{ display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.hud-value{
  display:block; font-family:var(--font-num); font-weight:700;
  font-size:clamp(24px,6vw,40px); line-height:1.1;
}
.hud-time  .hud-value{ color:var(--cyan); }
.hud-points .hud-value{ color:var(--amber); }
.hud-streak .hud-value{ color:var(--magenta); }

.hud-time.low{ border-color:var(--red); animation:alarm .9s ease-in-out infinite; }
.hud-time.low .hud-value{ color:var(--red); }
@keyframes alarm{ 0%,100%{ box-shadow:0 0 0 rgba(255,77,77,0);} 50%{ box-shadow:0 0 26px rgba(255,77,77,.6);} }

.hud-value.pop{ animation:pop .35s ease; }
@keyframes pop{ 0%{ transform:scale(1);} 45%{ transform:scale(1.32);} 100%{ transform:scale(1);} }

.time-bar{
  width:min(1000px,100%); height:10px; border-radius:99px;
  background:rgba(142,163,200,.18); overflow:hidden;
}
.time-fill{
  height:100%; width:100%;
  background:linear-gradient(90deg, var(--cyan), var(--lime));
  border-radius:99px;
}
.time-fill.low{ background:linear-gradient(90deg, var(--red), var(--amber)); }

/* ---------- Arena de juego ---------- */
.arena{
  width:min(1000px,100%);
  background:linear-gradient(180deg, rgba(18,27,51,.92) 0%, rgba(9,14,29,.92) 100%);
  border:2px solid rgba(34,230,255,.22);
  border-radius:var(--radius);
  padding:clamp(16px,3.5vw,30px);
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.55);
}

.flash-bar{
  height:8px; border-radius:99px; background:rgba(255,197,49,.18);
  overflow:hidden; margin-bottom:14px;
}
.flash-fill{
  height:100%; width:100%;
  background:linear-gradient(90deg, var(--amber), var(--magenta));
  border-radius:99px;
}

.question{
  font-family:var(--font-num); font-weight:700;
  font-size:clamp(40px,12vw,104px);
  line-height:1.15;
  text-align:center;
  margin:6px 0 clamp(16px,3vw,28px);
  color:#fff;
  text-shadow:0 0 28px rgba(34,230,255,.5);
  word-break:break-word;
  animation:qIn .28s cubic-bezier(.2,1.5,.4,1) both;
}
.q-eq{ color:var(--cyan); }
@keyframes qIn{
  from{ opacity:0; transform:translateY(-18px) scale(.9); }
  to  { opacity:1; transform:none; }
}

.answers{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(9px,2vw,14px); }
@media (min-width:900px){ .answers{ grid-template-columns:repeat(4,1fr); } }

.answer{
  font-family:var(--font-num); font-weight:700;
  font-size:clamp(26px,7vw,46px);
  padding:clamp(14px,3vw,22px) 8px;
  color:var(--text);
  background:linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border:2px solid rgba(34,230,255,.3);
  border-radius:16px;
  cursor:pointer;
  transition:transform .1s ease, border-color .15s, box-shadow .15s, background .15s;
}
.answer:hover:not(:disabled){
  transform:translateY(-3px);
  border-color:var(--cyan);
  box-shadow:0 0 24px rgba(34,230,255,.35);
}
.answer:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }
.answer:disabled{ cursor:default; }

.answer.good{
  background:linear-gradient(180deg,#25c26a 0%, #128a48 100%);
  border-color:var(--lime); color:#fff;
  animation:slash .32s ease;
}
.answer.bad{
  background:linear-gradient(180deg,#c93030 0%, #8c1b1b 100%);
  border-color:var(--red); color:#fff;
  animation:shake .3s ease;
}
.answer.reveal{
  border-color:var(--lime);
  box-shadow:0 0 26px rgba(139,255,61,.5);
  animation:blink .5s ease 2;
}
@keyframes slash{ 0%{ transform:scale(1);} 40%{ transform:scale(1.09) rotate(-1.5deg);} 100%{ transform:scale(1);} }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-9px);} 75%{ transform:translateX(9px);} }
@keyframes blink{ 0%,100%{ opacity:1;} 50%{ opacity:.55;} }

/* Puntos flotantes */
.floater{
  position:fixed; z-index:20; pointer-events:none;
  font-family:var(--font-num); font-weight:700; font-size:clamp(24px,5vw,38px);
  color:var(--lime); text-shadow:0 0 16px rgba(139,255,61,.7);
  animation:floatUp .9s ease-out forwards;
}
.floater.miss{ color:var(--red); text-shadow:0 0 16px rgba(255,77,77,.7); }
@keyframes floatUp{
  0%{ opacity:0; transform:translate(-50%,0) scale(.7); }
  25%{ opacity:1; transform:translate(-50%,-18px) scale(1.1); }
  100%{ opacity:0; transform:translate(-50%,-90px) scale(1); }
}

/* Banner de combo */
.combo-banner{
  position:absolute; left:50%; top:6px; transform:translateX(-50%);
  background:linear-gradient(90deg,var(--amber),var(--magenta));
  color:#1a0620; font-weight:900; letter-spacing:.1em;
  font-size:clamp(13px,3vw,18px);
  padding:7px 20px; border-radius:99px; white-space:nowrap;
  box-shadow:0 0 30px rgba(255,197,49,.55);
  animation:comboIn .9s ease both;
}
@keyframes comboIn{
  0%  { opacity:0; transform:translateX(-50%) scale(.5); }
  20% { opacity:1; transform:translateX(-50%) scale(1.12); }
  70% { opacity:1; transform:translateX(-50%) scale(1); }
  100%{ opacity:0; transform:translateX(-50%) translateY(-14px) scale(1); }
}

.btn-abort{ margin-top:4px; }

/* ---------- Cuenta regresiva ---------- */
.countdown{
  position:fixed; inset:0; z-index:40;
  display:grid; place-items:center;
  background:rgba(7,11,22,.92);
  font-family:var(--font-num); font-weight:700;
  font-size:clamp(90px,26vw,220px);
  color:var(--cyan);
  text-shadow:0 0 60px rgba(34,230,255,.7);
}
/* display:grid ganaria al atributo hidden: hay que anularlo explicitamente */
.countdown[hidden]{ display:none; }
.countdown span{ animation:cdPop .8s ease both; }
@keyframes cdPop{
  0%  { opacity:0; transform:scale(2.2); }
  30% { opacity:1; transform:scale(1); }
  75% { opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(.7); }
}

/* ---------- Resultado ---------- */
.times-up{
  font-size:clamp(34px,10vw,78px); font-weight:900; letter-spacing:.08em;
  margin:0 0 14px;
  background:linear-gradient(180deg,#fff,var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:slamIn .55s cubic-bezier(.2,1.7,.4,1) both;
}
@keyframes slamIn{
  0%{ opacity:0; transform:scale(2.4) rotate(-6deg); }
  100%{ opacity:1; transform:none; }
}

.rank-wrap{ margin-bottom:18px; }
.rank-icon{
  font-size:clamp(50px,13vw,84px); line-height:1;
  filter:drop-shadow(0 0 24px rgba(255,197,49,.5));
  animation:bob 2.6s ease-in-out infinite;
}
.rank-name{
  font-size:clamp(24px,6.5vw,44px); margin:6px 0 4px; font-weight:900;
  color:var(--amber); letter-spacing:.03em;
}
.rank-msg{ margin:0; color:var(--text-dim); font-size:14.5px; }

.final-score{
  background:rgba(255,197,49,.08);
  border:2px solid rgba(255,197,49,.35);
  border-radius:18px; padding:14px; margin-bottom:16px;
}
.fs-num{
  display:block; font-family:var(--font-num); font-weight:700;
  font-size:clamp(44px,13vw,84px); color:var(--amber); line-height:1;
  text-shadow:0 0 30px rgba(255,197,49,.5);
}
.fs-lbl{ display:block; font-size:13px; letter-spacing:.24em; color:var(--text-dim); margin-top:6px; }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
@media (min-width:600px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{
  background:rgba(24,36,70,.7); border:1px solid rgba(142,163,200,.2);
  border-radius:14px; padding:12px 6px;
}
.stat-num{
  display:block; font-family:var(--font-num); font-weight:700;
  font-size:clamp(22px,6vw,32px); color:var(--cyan);
}
.stat-lbl{ display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin-top:4px; }

.run-recap{ font-size:13.5px; color:var(--text-dim); margin:0 0 20px; }

.result-actions{ display:grid; gap:10px; margin-bottom:6px; }
@media (min-width:520px){ .result-actions{ grid-template-columns:2fr 1fr; align-items:center; } }
.result-actions .btn-xl{ font-size:clamp(18px,4vw,22px); padding:16px 24px; }

/* ---------- Confeti ---------- */
.confetti{
  position:fixed; top:-16px; width:9px; height:16px; z-index:30;
  pointer-events:none; border-radius:2px;
  animation:fall linear forwards;
}
@keyframes fall{ to{ transform:translateY(112vh) rotate(760deg); opacity:0; } }

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

/* ---------- Móvil ---------- */
@media (max-width:520px){
  .chip{ flex:1 1 45%; font-size:14px; padding:10px 8px; }
  .hud-box{ padding:6px 4px; }
  .lightning-toggle{ gap:10px; padding:12px; }
  .lt-text small{ font-size:11px; }
}