/* ===================== Teacher Fighter — estilos ===================== */
:root{
  --log-w: 1280px;
  --log-h: 853px;
  --gold:#ffcf3f;
  --gold-dark:#c8860a;
  --navy:#17203b;
  --navy-light:#243156;
  --red:#e23b2e;
  --green:#39d353;
  --ink:#0c1020;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  width:100%; height:100%;
  background:#05070e;
  overflow:hidden;
  font-family:"Press Start 2P", monospace;
  color:#fff;
  -webkit-font-smoothing:none;
}

#game{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#05070e;
}

/* El escenario lógico se escala para caber en la ventana (letterbox) */
#stage{
  position:relative;
  width:var(--log-w);
  height:var(--log-h);
  transform-origin:center center;
  background:#000;
  box-shadow:0 0 40px rgba(0,0,0,.8);
  overflow:hidden;
}

/* ---------- Pantallas ---------- */
.screen{
  position:absolute; inset:0;
  display:none;
  background-repeat:no-repeat;
  background-position:center center;
  image-rendering:pixelated;
}
.screen.is-active{ display:block; }
.screen[data-fit="fill"]{ background-size:100% 100%; }
.screen[data-fit="cover"]{ background-size:cover; }

/* ---------- Hotspots del título ---------- */
.hotspot{
  position:absolute;
  background:transparent;
  border:0;
  cursor:pointer;
  border-radius:10px;
  transition:background .1s, box-shadow .1s;
}
.hotspot:hover,.hotspot:focus-visible{
  background:rgba(255,207,63,.18);
  box-shadow:0 0 0 3px rgba(255,207,63,.55) inset;
  outline:none;
}

/* ---------- Selección de personaje ---------- */
.card-hotspot{
  position:absolute; background:transparent; border:0; cursor:pointer;
  border-radius:12px; transition:background .1s, box-shadow .1s;
}
.card-hotspot:hover,.card-hotspot:focus-visible{
  background:rgba(255,207,63,.14);
  box-shadow:0 0 0 4px var(--gold) inset, 0 0 18px rgba(255,207,63,.6);
  outline:none;
}
.card-hotspot.locked-p1{ box-shadow:0 0 0 5px #39a0ff inset, 0 0 18px #39a0ff; background:rgba(57,160,255,.16); }
.card-hotspot.locked-p2{ box-shadow:0 0 0 5px var(--red) inset, 0 0 18px var(--red); background:rgba(226,59,46,.16); }
/* Tarjeta ya tomada por el P1: no disponible para el P2 */
.card-hotspot.taken{ cursor:not-allowed; }
.card-hotspot.taken::after{
  content:"P1"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:"Press Start 2P", monospace; font-size:22px; color:#fff;
  background:rgba(4,8,20,.55); border-radius:12px; text-shadow:2px 2px 0 #000;
}
.card-hotspot.taken:hover{ box-shadow:0 0 0 5px #39a0ff inset; }

#select-mode{
  position:absolute; top:2.5%; right:2.5%;
  display:flex; gap:10px; z-index:5;
}
.mode-btn{
  font-family:inherit; font-size:12px; color:#fff;
  background:var(--navy); border:3px solid #000;
  box-shadow:0 3px 0 #000, 0 0 0 3px var(--gold);
  padding:12px 14px; cursor:pointer; border-radius:4px;
}
.mode-btn.is-active{ background:var(--gold); color:var(--ink); }

/* Selector de escenario en la pantalla de selección */
#scene-pick{
  position:absolute; left:2.2%; bottom:3%; z-index:6;
  display:flex; align-items:center; gap:10px;
  background:rgba(12,16,32,.6); padding:8px 12px; border-radius:8px;
  box-shadow:0 0 0 2px #000;
}
.scene-label{ font-size:10px; color:var(--gold); text-shadow:2px 2px 0 #000; }
.scene-btn{
  position:relative; width:118px; height:66px; padding:0;
  border:3px solid #000; border-radius:5px; cursor:pointer;
  background-size:cover; background-position:center;
  image-rendering:pixelated; box-shadow:0 2px 0 #000;
}
.scene-btn span{
  position:absolute; top:3px; left:5px; font-size:12px; color:#fff;
  text-shadow:2px 2px 0 #000, 0 0 4px #000;
}
.scene-btn.is-active{ border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), 0 0 14px rgba(255,207,63,.8); }

#select-prompt{
  position:absolute; top:2.5%; left:50%; transform:translateX(-50%);
  font-size:15px; color:var(--gold);
  text-shadow:3px 3px 0 #000; white-space:nowrap; z-index:5;
  background:rgba(12,16,32,.55); padding:10px 16px; border-radius:6px;
}

/* ---------- Botones de esquina ---------- */
.corner-btn{
  position:absolute; top:16px; left:16px; z-index:6;
  font-family:inherit; font-size:11px; color:#fff;
  background:var(--navy); border:3px solid #000;
  box-shadow:0 3px 0 #000; padding:10px 12px; cursor:pointer; border-radius:4px;
}
.corner-btn:hover{ background:var(--navy-light); }
#pause-btn{ left:auto; right:16px; top:16px; }
/* Acceso a MOVIMIENTOS Y COMBOS (no toca los hotspots del título) */
.moves-btn{ left:auto; right:16px; color:var(--gold); box-shadow:0 3px 0 #000, 0 0 0 2px var(--gold); }
.moves-btn-select{ right:auto; left:16px; top:66px; }

/* Selector de dificultad de la CPU */
#diff-pick{
  position:absolute; right:80px; bottom:3%; z-index:6;   /* deja libre el botón de sonido */
  display:flex; align-items:center; gap:8px;
  background:rgba(12,16,32,.6); padding:8px 12px; border-radius:8px;
  box-shadow:0 0 0 2px #000; transition:opacity .15s;
}
#diff-pick.is-off{ opacity:.35; }
.diff-btn{
  font-family:inherit; font-size:10px; color:#fff;
  background:var(--navy); border:3px solid #000; box-shadow:0 2px 0 #000;
  padding:9px 10px; cursor:pointer; border-radius:4px;
}
.diff-btn.is-active{ background:var(--gold); color:var(--ink); box-shadow:0 0 0 2px var(--gold), 0 0 10px rgba(255,207,63,.7); }

/* ---------- HUD de batalla ---------- */
#hud{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:14px 58px; gap:16px;
  pointer-events:none;
}
.hud-side{ flex:1; max-width:46%; }
.hud-name{ font-size:13px; margin-bottom:6px; text-shadow:2px 2px 0 #000; }
.hud-p2{ text-align:right; }
.hp-bar{
  height:26px; background:#2a0b0b; border:3px solid #000;
  box-shadow:0 0 0 2px #000, inset 0 0 6px rgba(0,0,0,.7);
  overflow:hidden; border-radius:3px;
}
.hp-fill{
  height:100%; width:100%;
  background:linear-gradient(#7dff8a,var(--green));
  transition:width .18s linear;
}
.hud-p2 .hp-fill{ margin-left:auto; background:linear-gradient(#ff9a7d,var(--red)); }
.hp-fill.low{ background:linear-gradient(#ffd27d,#e2a52e); }
/* Barra de energía (super) */
.en-bar{
  height:10px; width:70%; margin-top:5px; background:#0b1430; border:2px solid #000;
  box-shadow:0 0 0 1px rgba(255,255,255,.18); overflow:hidden; border-radius:2px;
}
.en-right{ margin-left:auto; }
.en-fill{ height:100%; width:0; background:linear-gradient(#9fd4ff,#2f7bff); transition:width .12s linear; }
.en-right .en-fill{ margin-left:auto; }
.en-bar.full{ box-shadow:0 0 0 1px var(--gold), 0 0 10px var(--gold); }
.en-bar.full .en-fill{ background:linear-gradient(#fff3a0,var(--gold)); animation:blink .5s steps(2) infinite; }
.pips{ display:flex; gap:8px; margin-top:8px; }
.pips-right{ justify-content:flex-end; }
.pips span{
  width:16px; height:16px; border-radius:50%;
  background:rgba(0,0,0,.45); border:3px solid #000;
  box-shadow:0 0 0 2px rgba(255,255,255,.25);
}
.pips span.won{ background:var(--gold); box-shadow:0 0 0 2px #000, 0 0 10px var(--gold); }

#hud-center{ text-align:center; padding-top:2px; }
#timer{
  font-size:26px; color:var(--gold); text-shadow:3px 3px 0 #000;
  background:rgba(12,16,32,.6); padding:6px 14px; border-radius:6px;
}
#round-label{ font-size:9px; margin-top:6px; color:#fff; text-shadow:2px 2px 0 #000; }

/* ---------- Luchadores ---------- */
#arena{ position:absolute; inset:0; z-index:2; overflow:hidden; }
.fighter{
  position:absolute; bottom:0; left:0;
  background-repeat:no-repeat;
  background-size:100% 100%;              /* un frame por pose */
  image-rendering:pixelated;
  will-change:transform;                  /* se mueve solo con transform */
  transform-origin:bottom center;
  z-index:2;
}
.fighter.hurt{ filter:brightness(1.8) saturate(.4) sepia(1) hue-rotate(-30deg); }
.fighter.block{ filter:brightness(1.2) drop-shadow(0 0 6px #39a0ff); }
.fighter.tp{ opacity:.1; transition:opacity .08s; }   /* Teletransporte: instante invisible */

/* Oscurecido del congelado de SUPER (detrás de los luchadores) */
#arena::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(circle at 50% 60%, rgba(40,10,60,.35), rgba(0,0,0,.72));
  opacity:0; transition:opacity .12s; pointer-events:none;
}
#arena.super-dim::before{ opacity:1; }

/* ---------- Efectos (pools de nodos, nunca tocan el sprite) ---------- */
#fx-layer{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.fx-float{
  position:absolute; white-space:nowrap; font-size:16px; color:#fff;
  text-shadow:3px 3px 0 #000, 0 0 8px rgba(0,0,0,.6); will-change:transform,opacity;
}
.fx-float.small{ font-size:11px; color:#cbd5ff; }
.fx-float.name{ font-size:13px; color:var(--gold); }
.fx-float.counter{ font-size:18px; color:#ff6b5a; }
.fx-float.perfect{ font-size:16px; color:#7fe3ff; }
.fx-float.juggle{ font-size:16px; color:#b8ff6b; }
.fx-float.super{ font-size:44px; color:var(--gold); text-shadow:5px 5px 0 #000, 0 0 22px rgba(255,140,0,.9); }
.fx-spark{
  position:absolute; width:64px; height:64px; border-radius:50%; will-change:transform,opacity;
  background:radial-gradient(circle, #fff 0 18%, #ffe27a 30%, rgba(255,140,0,.6) 50%, transparent 70%);
}
.fx-spark.big{ width:96px; height:96px; }
.fx-spark.super{ width:150px; height:150px; background:radial-gradient(circle, #fff 0 15%, #ffcf3f 30%, rgba(255,60,0,.7) 52%, transparent 72%); }
.fx-spark.block{ background:radial-gradient(circle, #fff 0 14%, #7fc8ff 32%, rgba(57,160,255,.5) 52%, transparent 70%); }
.fx-spark.armor{ width:110px; height:110px; background:radial-gradient(circle, transparent 38%, rgba(255,200,80,.9) 44%, transparent 58%); }
.fx-spark.dust{ width:80px; height:34px; border-radius:50% 50% 10% 10%; background:radial-gradient(ellipse at 50% 80%, rgba(210,190,150,.85), rgba(150,120,80,.4) 50%, transparent 72%); }
.fx-spark.wind{ width:120px; height:60px; background:radial-gradient(ellipse, rgba(255,255,255,.9) 0 20%, rgba(255,240,200,.5) 45%, transparent 70%); }
.fx-spark.streak{ width:130px; height:16px; border-radius:8px; background:linear-gradient(90deg, transparent, rgba(255,240,150,.85), transparent); }
.fx-spark.streak.big{ height:28px; background:linear-gradient(90deg, transparent, rgba(255,120,40,.9), transparent); }
.fx-spark.rise{ width:60px; height:150px; border-radius:30px; background:linear-gradient(0deg, transparent, rgba(255,220,90,.85), transparent); }
.fx-spark.star{ background:radial-gradient(circle, #fff 0 12%, #ffb3f0 30%, rgba(255,80,200,.5) 50%, transparent 70%); }
.fx-spark.tp{ width:120px; height:230px; border-radius:50%; background:radial-gradient(ellipse, rgba(140,255,170,.75), rgba(40,200,120,.35) 45%, transparent 70%); }
.fx-spark.jab{ width:70px; height:26px; background:radial-gradient(ellipse, #fff 0 15%, rgba(255,220,120,.7) 40%, transparent 70%); }

.proj{ position:absolute; left:0; top:0; z-index:3; pointer-events:none; will-change:transform; }
.proj.onda{ border-radius:50%; background:radial-gradient(ellipse at 40% 50%, #fff 0 18%, #ffe066 32%, rgba(255,150,0,.75) 55%, transparent 72%); box-shadow:0 0 24px rgba(255,190,40,.7); animation:projPulse .18s steps(2) infinite; }
.proj.lazo{ height:10px !important; margin-top:20px; border-radius:6px; background:repeating-linear-gradient(90deg, #ffd23f 0 10px, #e0a200 10px 16px); box-shadow:0 0 10px rgba(255,210,60,.9); }
.proj.lazo.big{ height:14px !important; }
.proj.quake{ border-radius:50% 50% 8px 8px; background:radial-gradient(ellipse at 50% 100%, #fff3c4 0 12%, #c9893a 35%, rgba(110,70,30,.75) 60%, transparent 75%); animation:projPulse .1s steps(2) infinite; }
.proj.calc{ display:flex; align-items:center; justify-content:center; font-size:14px; color:#d8ffe0; border:3px solid #2f8f4e; border-radius:6px; background:rgba(16,60,34,.88); text-shadow:2px 2px 0 #000; box-shadow:0 0 14px rgba(80,255,140,.6); }
.proj.calc.big{ font-size:20px; }
@keyframes projPulse{ 50%{ filter:brightness(1.35); } }

/* ---------- Contador de combo ---------- */
.combo{
  position:absolute; top:150px; z-index:5; pointer-events:none;
  opacity:0; transition:opacity .2s; text-align:center;
}
.combo.show{ opacity:1; }
.combo-1{ left:60px; }
.combo-2{ right:60px; }
.combo b{ display:block; font-size:52px; color:var(--gold); text-shadow:4px 4px 0 #000, 0 0 16px rgba(255,140,0,.7); }
.combo span{ display:block; font-size:12px; margin-top:6px; color:#fff; text-shadow:2px 2px 0 #000; }
.combo.pop b{ animation:comboPop .25s ease-out; }
@keyframes comboPop{ 0%{ transform:scale(1.7); } 100%{ transform:scale(1); } }

#announce{
  position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) scale(1);
  z-index:5; font-size:60px; color:var(--gold);
  text-shadow:5px 5px 0 #000, 0 0 18px rgba(255,207,63,.7);
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
}
#announce.show{ opacity:1; }

/* ---------- Paneles (opciones / récords / salir) ---------- */
.panel-screen{
  display:none;
  background:
    radial-gradient(circle at 50% 0%, #24305a 0%, #0c1020 70%);
}
.panel-screen.is-active{ display:flex; }
.panel-screen{ align-items:center; justify-content:center; }
.panel{
  width:82%; max-height:88%; overflow:auto;
  background:rgba(10,14,28,.92);
  border:4px solid var(--gold);
  box-shadow:0 0 0 4px #000, 0 12px 40px rgba(0,0,0,.7);
  padding:28px 30px; border-radius:10px;
}
.panel h2{ font-size:22px; color:var(--gold); text-shadow:3px 3px 0 #000; margin-bottom:22px; text-align:center; }
.panel h3{ font-size:13px; color:#9db4ff; margin:16px 0 10px; }
.center-panel{ text-align:center; }
.center-panel .hint{ margin:14px 0 24px; }

.binds{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px; }
.binds h3{ grid-column:1 / -1; }
.bind-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bind-label{ font-size:10px; color:#cbd5ff; }
.bind-key{
  font-family:inherit; font-size:10px; color:var(--ink);
  background:var(--gold); border:3px solid #000; box-shadow:0 3px 0 #000;
  padding:8px 10px; min-width:70px; text-align:center; cursor:pointer; border-radius:4px;
}
.bind-key.arr{ font-family:Arial, sans-serif; font-size:16px; font-weight:bold; padding:5px 10px; }
.bind-key.listening{ background:var(--red); color:#fff; animation:blink .6s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.4; } }

.hint{ font-size:9px; color:#8ea0c8; margin-top:18px; line-height:1.6; text-align:center; }

.panel-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.retro-btn{
  font-family:inherit; font-size:12px; color:#fff;
  background:var(--navy); border:3px solid #000;
  box-shadow:0 4px 0 #000, 0 0 0 3px var(--gold);
  padding:14px 18px; cursor:pointer; border-radius:4px;
}
.retro-btn:hover{ background:var(--gold); color:var(--ink); }
.retro-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #000, 0 0 0 3px var(--gold); }

/* Tabla de récords */
.rec-table{ width:100%; border-collapse:collapse; font-size:10px; }
.rec-table th,.rec-table td{ border:2px solid #000; padding:8px 6px; text-align:center; }
.rec-table th{ background:var(--gold); color:var(--ink); }
.rec-table tr:nth-child(even) td{ background:rgba(255,255,255,.05); }
.rec-empty{ text-align:center; font-size:11px; color:#8ea0c8; padding:30px 0; }

/* ---------- Movimientos y combos ---------- */
.moves-panel{ width:90%; max-height:92%; padding:22px 26px; }
.moves-panel h2{ margin-bottom:10px; }
.moves-panel h3{ color:var(--gold); font-size:12px; margin:18px 0 8px; }
.mv-note{ margin-top:0; }
.mv-table{ width:100%; border-collapse:collapse; font-size:9px; line-height:1.5; }
.mv-table th{ font-size:8px; color:#8ea0c8; text-align:left; padding:4px 6px; font-weight:normal; }
.mv-table td{ padding:5px 6px; border-top:2px solid rgba(255,255,255,.07); vertical-align:middle; }
.mv-name{ color:#fff; width:28%; }
.mv-name em{ font-style:normal; color:#7fb2ff; font-size:8px; }
.mv-name em.sup{ color:var(--gold); }
.mv-in{ width:34%; white-space:nowrap; }
.mv-in .p1, .mv-in .p2{ display:inline-block; }
.mv-in .p2{ margin-left:10px; padding-left:10px; border-left:2px solid rgba(255,255,255,.15); }
.mv-desc{ color:#cbd5ff; }
.mv-table kbd{
  display:inline-block; min-width:20px; text-align:center; font-family:inherit; font-size:9px;
  padding:4px 5px; margin:1px; border-radius:3px; border:2px solid #000; box-shadow:0 2px 0 #000;
}
.p1 kbd{ background:#39a0ff; color:#05101f; }
.p2 kbd{ background:var(--red); color:#fff; }
.mv-table th .p1{ color:#39a0ff; } .mv-table th .p2{ color:var(--red); }
.mv-table b{ color:var(--gold); margin:0 3px; font-weight:normal; }
.mv-table i{ color:#8ea0c8; font-style:normal; font-size:8px; margin:0 3px; }
.mv-keys{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px 12px; font-size:9px; }
.mv-keys > div{ display:flex; align-items:center; gap:6px; background:rgba(36,49,86,.35); padding:4px 8px; border-radius:4px; }
.mv-keys > div > span:first-child{ flex:1; color:#cbd5ff; }
.mv-keys kbd{
  display:inline-block; min-width:20px; text-align:center; font-family:inherit; font-size:9px;
  padding:4px 5px; border-radius:3px; border:2px solid #000; box-shadow:0 2px 0 #000;
}
kbd.arr{ font-family:Arial, sans-serif; font-size:14px; font-weight:bold; line-height:1; padding:2px 5px; }
.mv-keys .p1.p2 kbd{ background:var(--gold); color:var(--ink); }
.mv-chars{ display:grid; grid-template-columns:1fr; gap:10px; }
.mv-char{ background:rgba(36,49,86,.45); border:2px solid #000; border-radius:6px; padding:8px 10px; }
.mv-char h4{ font-size:11px; color:var(--gold); text-shadow:2px 2px 0 #000; margin-bottom:4px; }

/* ---------- Overlays ---------- */
.overlay{
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,6,14,.82);
}
.overlay.hidden{ display:none; }
.result-box{
  text-align:center; background:rgba(10,14,28,.95);
  border:4px solid var(--gold); box-shadow:0 0 0 4px #000;
  padding:34px 40px; border-radius:12px;
}
.result-box h2{ font-size:40px; color:var(--red); text-shadow:4px 4px 0 #000; margin-bottom:12px; }
.result-box #result-sub{ font-size:12px; color:#fff; margin-bottom:10px; line-height:1.6; }

/* ---------- Carga ---------- */
#loading{
  position:absolute; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:#05070e; color:var(--gold); font-size:18px;
  letter-spacing:2px;
}
#loading.hidden{ display:none; }

/* ---------- Botón de sonido (fijo, fuera del escenario) ---------- */
#sound-toggle{
  position:fixed; bottom:14px; right:14px; z-index:60;
  font-size:18px; line-height:1;
  background:rgba(12,16,32,.8); color:#fff;
  border:2px solid var(--gold); border-radius:6px;
  padding:8px 10px; cursor:pointer;
}
#sound-toggle.muted{ opacity:.55; border-color:#777; }

.hidden{ display:none !important; }

/* Movimiento reducido: sin pulsos ni saltos de escala (el temblor ya se omite en JS) */
@media (prefers-reduced-motion: reduce){
  .proj.onda, .proj.quake, .en-bar.full .en-fill, .combo.pop b{ animation:none; }
}