:root { --fondo:#0a0d1c; --morado:#1a0a33; --panel:#141936; --borde:#2a3170; --tinta:#f4f6ff; --tenue:#a6adde; --oro:#ffd447; --rojo:#ff3355; --verde:#39ff88; --cian:#3fe4ff; --rosa:#ff4fd2;
  --grande:"Big Shoulders Display",Impact,sans-serif; --pix:"Press Start 2P",monospace; --cod:"Courier Prime",monospace; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: #05060f; overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body { display: flex; align-items: center; justify-content: center; color: var(--tinta); font-family: var(--grande); }
/* Todo se maqueta en 540×960 y se escala: el mismo juego en teléfono, aula y escritorio. */
#escenario { position: relative; flex: none; width: 540px; height: 960px; overflow: hidden; background: var(--fondo); transform-origin: center; user-select: none; }
canvas { position: absolute; inset: 0; pointer-events: none; }
#efectos { z-index: 30; }
[hidden] { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 16px; right: 60px; top: 16px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; z-index: 5; }
#hud b { font: 16px var(--pix); color: var(--oro); padding-top: 6px; }
.vida span { display: block; margin-top: 6px; font: 10px var(--pix); color: var(--tinta); }
.vida.der span { text-align: right; color: var(--rosa); white-space: nowrap; overflow: hidden; }
.barra { height: 24px; border: 3px solid #fff; background: #000; padding: 2px; }
.barra i { display: block; height: 100%; width: 100%; background: var(--verde); transition: width .28s steps(6); }
.der .barra i { background: var(--rosa); margin-left: auto; }
.barra i.baja { background: var(--rojo); }
#sonido { position: absolute; right: 12px; top: 12px; z-index: 6; width: 40px; height: 40px; background: #000; color: var(--oro); border: 3px solid var(--oro); font: 16px var(--pix); cursor: pointer; }
#sonido[aria-pressed="false"] { color: #666; border-color: #666; text-decoration: line-through; }

/* ---------- los luchadores ---------- */
#arena { position: absolute; left: 0; right: 0; top: 76px; height: 190px; z-index: 4; }
.luchador { position: absolute; bottom: 8px; animation: baile 1s steps(4) infinite; }
#luchador-j { left: 44px; }
#luchador-f { right: 34px; width: 170px; height: 147px; animation-delay: -.5s; }
#luchador-f svg { width: 100%; height: 100%; display: block; }
.consola { position: relative; width: 148px; height: 112px; background: #07142a; border: 6px solid var(--cian); }
.consola i { position: absolute; left: 0; right: 0; top: 0; height: 18px; background: var(--cian); }
.consola span { position: absolute; left: 14px; top: 42px; font: 32px var(--pix); color: var(--cian); }
.consola em { position: absolute; left: 62px; top: 40px; width: 28px; height: 36px; background: var(--cian); animation: cursor 1s steps(2) infinite; }
@keyframes baile { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cursor { 50% { opacity: 0; } }
.luchador.ataca { animation: ataca-j .32s steps(5); }
@keyframes ataca-j { 40% { transform: translateX(130px) scale(1.15); } }
.luchador.ataca-f { animation: ataca-f .32s steps(5); }
@keyframes ataca-f { 40% { transform: translateX(-130px) scale(1.15); } }
.luchador.herido { animation: herido .42s steps(6); }
@keyframes herido { 0% { filter: brightness(4); } 25% { transform: translateX(26px) rotate(7deg); } 60% { transform: translateX(-10px); filter: none; } }
#luchador-j.herido { animation-name: herido-j; }
@keyframes herido-j { 0% { filter: brightness(4); } 25% { transform: translateX(-26px) rotate(-7deg); } 60% { transform: translateX(10px); filter: none; } }
.luchador.ko { animation: ko 1.1s steps(10) forwards; }
@keyframes ko { 100% { transform: translateY(70px) rotate(24deg) scale(.5); opacity: 0; } }
#burla { position: absolute; left: 150px; right: 150px; top: 8px; min-height: 0; padding: 7px 8px; background: #fff; color: #000; border: 3px solid #000; font: 800 21px/1.05 var(--grande); text-align: center; transform: rotate(-1.5deg); opacity: 0; transition: opacity .12s; }
#burla.ver { opacity: 1; }
#combo { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 900 54px/1 var(--grande); color: var(--oro); -webkit-text-stroke: 3px #000; paint-order: stroke fill; opacity: 0; }
#combo.ver { opacity: 1; animation: cae .2s steps(4); }

/* ---------- la portada ---------- */
#titulo { position: absolute; inset: 276px 24px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; z-index: 6; }
.kicker { font: 11px var(--pix); color: var(--tenue); }
h1 { font: 900 112px/.88 var(--grande); color: var(--oro); -webkit-text-stroke: 4px #000; paint-order: stroke fill; text-shadow: 6px 6px 0 var(--rosa); transform: rotate(-2deg); }
.gancho { font: 900 64px/.95 var(--grande); color: var(--rojo); -webkit-text-stroke: 3px #000; paint-order: stroke fill; margin-top: 8px; }
.gancho .g2 { font-size: 40px; color: #fff; }
.nota { font: 10px/1.6 var(--pix); color: var(--tenue); }
.boton { display: block; border: 4px solid var(--cian); background: #07142a; color: #fff; font: 900 34px/1 var(--grande); padding: 15px 22px; cursor: pointer; text-align: center; text-decoration: none; }
.boton:hover, .boton:focus-visible { background: #123; outline: 3px solid #fff; outline-offset: 2px; }
.boton.prim { background: var(--rojo); border-color: #fff; box-shadow: 0 6px 0 #7a0f27; }
.boton.oro { background: var(--oro); border-color: var(--oro); color: #000; }
#empezar { width: 320px; font-size: 54px; padding: 16px; margin-top: 12px; animation: late .9s steps(3) infinite; }
@keyframes late { 50% { transform: scale(1.05); } }
.pantalla-titulo #hud, .pantalla-lista #hud, .pantalla-lista #arena { visibility: hidden; }
.pantalla-titulo #arena { top: 62px; }

/* ---------- la ronda ---------- */
#ronda { position: absolute; left: 16px; right: 16px; top: 272px; z-index: 6; background: rgba(20,25,54,.96); border: 4px solid var(--borde); padding: 0 14px 12px; }
#reloj { height: 14px; background: #000; margin: 0 -14px 8px; }
#reloj i { display: block; height: 100%; width: 100%; background: var(--oro); transform-origin: left; }
#reloj.poco i { background: var(--rojo); }
#pide { font: 800 40px/1.05 var(--grande); color: #fff; margin-bottom: 8px; }
#sql { font: 700 24px/1.3 var(--cod); white-space: pre-wrap; color: #fff; margin-bottom: 8px; }
#sql b { color: var(--oro); font-weight: 700; } #sql u { color: var(--rosa); text-decoration: none; }
#tablas { display: flex; gap: 10px; align-items: flex-start; }
.tabla { border-collapse: collapse; font: 700 20px/1.25 var(--cod); }
.tabla caption { font: 10px var(--pix); color: var(--cian); text-align: left; padding-bottom: 4px; white-space: nowrap; }
.tabla th { color: var(--tenue); font-weight: 700; text-align: left; padding: 1px 12px 1px 0; }
.tabla td { padding: 1px 12px 1px 0; color: #fff; }
.tabla td.nulo { color: var(--rosa); }
#respuestas { position: absolute; left: 16px; right: 16px; bottom: 18px; z-index: 6; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
#respuestas.lista { grid-template-columns: 1fr; gap: 8px; }
.opcion { min-height: 124px; border: 4px solid var(--cian); background: #07142a; color: #fff; font: 900 58px/1 var(--grande); cursor: pointer; padding: 6px; box-shadow: 0 6px 0 #05293a; }
.opcion:nth-child(2) { border-color: var(--rosa); box-shadow: 0 6px 0 #4a1140; }
.opcion:nth-child(3) { border-color: var(--oro); box-shadow: 0 6px 0 #5c4a0c; }
.opcion:active { transform: translateY(5px); box-shadow: none; }
.opcion:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.opcion.texto { font-size: 38px; }
.opcion small { display: block; margin-top: 8px; font: 700 15px/1.1 var(--cod); color: var(--tenue); }
.lista .opcion { font: 700 16px/1.2 var(--cod); text-align: left; white-space: pre-wrap; min-height: 0; padding: 8px 10px; }
#porque { position: absolute; left: 16px; right: 16px; bottom: 18px; min-height: 190px; z-index: 7; padding: 14px 16px; background: #000; border: 4px solid var(--verde); cursor: pointer; }
#porque.mal { border-color: var(--rojo); }
#porque b { display: block; font: 900 38px/1 var(--grande); color: var(--verde); margin-bottom: 8px; }
#porque.mal b { color: var(--rojo); }
#porque p { font: 700 24px/1.25 var(--cod); color: #fff; }
#porque small { display: block; margin-top: 10px; font: 9px var(--pix); color: var(--tenue); text-align: right; }

/* ---------- letreros y golpes ---------- */
#letrero { position: absolute; left: 0; right: 0; top: 400px; z-index: 40; text-align: center; font: 900 110px/.92 var(--grande); color: var(--oro); -webkit-text-stroke: 5px #000; paint-order: stroke fill; text-shadow: 7px 7px 0 var(--rosa); pointer-events: none; opacity: 0; }
#letrero.ver { opacity: 1; animation: cae .2s cubic-bezier(.2,1.6,.4,1); }
#letrero small { display: block; font: 16px/1.5 var(--pix); color: #fff; -webkit-text-stroke: 0; text-shadow: 3px 3px 0 #000; margin-top: 12px; }
@keyframes cae { from { transform: scale(2.2) rotate(-5deg); opacity: 0; } }
#destello { position: absolute; inset: 0; z-index: 35; background: #fff; opacity: 0; pointer-events: none; }
#destello.ver { animation: destello .13s linear; }
@keyframes destello { 0% { opacity: .55; } 100% { opacity: 0; } }
#escenario.sacude { animation: sacude .28s steps(7); }
@keyframes sacude { 15% { transform: var(--esc) translate(-11px,6px); } 30% { transform: var(--esc) translate(10px,-7px); } 45% { transform: var(--esc) translate(-7px,-4px); } 60% { transform: var(--esc) translate(6px,5px); } 80% { transform: var(--esc) translate(-3px,2px); } }

/* ---------- el final ---------- */
#fin { position: absolute; inset: 276px 18px 18px; z-index: 8; display: flex; flex-direction: column; gap: 9px; text-align: center; }
#fin h2 { font: 900 64px/.95 var(--grande); color: var(--oro); -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
#fin.perdio h2 { color: var(--rojo); }
#rango { font: 22px/1.3 var(--pix); color: var(--verde); }
#datos { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
#datos div { background: var(--panel); border: 3px solid var(--borde); padding: 7px 2px; }
#datos dt { font: 8px var(--pix); color: var(--tenue); margin-bottom: 5px; }
#datos dd { font: 900 34px/1 var(--grande); }
#repaso { flex: 1; min-height: 0; overflow: hidden; background: rgba(0,0,0,.72); border: 3px solid var(--borde); padding: 8px 10px; text-align: left; font: 700 16px/1.25 var(--cod); }
#repaso h3 { font: 9px/1.5 var(--pix); color: var(--cian); margin-bottom: 6px; }
#repaso p { margin-bottom: 6px; }
.botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#fin .boton { font-size: 30px; padding: 12px 8px; }

.enlace { background: none; border: 0; color: var(--cian); font: 11px/1.6 var(--pix); text-decoration: underline; cursor: pointer; padding: 6px; }
/* ---------- el mapa y el muro ---------- */
#mapa { position: absolute; inset: 24px 16px 14px; z-index: 8; display: flex; flex-direction: column; gap: 10px; }
#mapa h2, #muro h2 { font: 900 56px/1 var(--grande); color: var(--oro); text-align: center; -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
#mapa-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.m-jefe { flex: 1; min-height: 0; display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: rgba(20,25,54,.96); border: 4px solid var(--cian); color: #fff; cursor: pointer; text-align: left; }
.m-jefe:hover, .m-jefe:focus-visible { background: #1e2650; outline: 3px solid #fff; outline-offset: 1px; }
.m-jefe.cerrado { border-color: var(--borde); }
.m-jefe.cerrado .m-arte { filter: grayscale(.85) brightness(.75); }
.m-arte { flex: none; width: 78px; height: 68px; display: block; }
.m-arte svg { width: 100%; height: 100%; display: block; }
.m-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m-txt strong { font: 800 32px/1 var(--grande); }
.m-txt em { font: 700 15px/1.15 var(--cod); color: var(--tenue); font-style: normal; }
.m-jefe b { flex: none; font: 9px/1.3 var(--pix); padding: 6px 6px; text-align: center; max-width: 92px; }
.m-gratis { background: var(--verde); color: #000; } .m-rango { color: var(--oro); border: 2px solid var(--oro); } .m-candado { color: var(--tenue); border: 2px solid var(--borde); }
.m-rush { border-color: var(--rosa); background: linear-gradient(90deg, #3a0d3a, #141936); }
.m-rush .m-txt strong { color: var(--rosa); }
#muro { position: absolute; inset: 130px 28px 40px; z-index: 8; display: flex; flex-direction: column; gap: 16px; text-align: center; }
#muro p { font: 700 24px/1.3 var(--cod); color: #fff; }
#muro ul { list-style: none; padding: 16px; background: rgba(0,0,0,.7); border: 4px solid var(--oro); text-align: left; display: flex; flex-direction: column; gap: 10px; font: 800 30px/1.1 var(--grande); }
#muro li::before { content: "▶ "; color: var(--oro); font-size: 20px; }
.botones.uno { grid-template-columns: 1fr; }
#fin .botones.uno .boton { font-size: 22px; padding: 8px; }

@media (prefers-reduced-motion: reduce) {
  .luchador, #empezar, .consola em { animation: none !important; }
  #escenario.sacude, #destello.ver { animation: none !important; }
  #letrero.ver, #combo.ver { animation: none !important; }
}