/* Arena nocturna de arcade: pantalla 16:9 al centro y mandos a los lados (o abajo en vertical) */
:root {
  --fondo: #0a0a1e;
  --panel: #16163a;
  --borde: #2e2e6a;
  --texto: #f0eeff;
  --suave: #9a96c8;
  --amarillo: #ffd84d;
  --rosa: #ff4f9a;
  --cian: #4fd8ff;
  --pixel: "Press Start 2P", ui-monospace, "Courier New", monospace;
  color-scheme: dark;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo) radial-gradient(circle at 50% 30%, #1e1650, transparent 70%);
  color: var(--texto); font-family: var(--pixel);
  display: flex; flex-direction: column;
  padding-inline: 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* ---------- Barra de arriba ---------- */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; }
.barra-der { display: flex; gap: 8px; }
.logo-chico { font-size: 11px; color: var(--amarillo); letter-spacing: 0.12em; text-shadow: 2px 2px 0 var(--rosa); }
.chip {
  font: inherit; font-size: 10px; color: var(--texto); text-decoration: none; cursor: pointer;
  background: var(--panel); border: 2px solid var(--borde); border-radius: 999px; padding: 8px 12px; min-height: 36px;
  display: inline-flex; align-items: center;
}
.chip:focus-visible, .menu button:focus-visible, .jugar:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* ---------- Arena: mandos + pantalla ---------- */
.arena {
  flex: 1; min-height: 0;
  display: grid; gap: 12px; align-items: center; justify-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "pantalla pantalla" "izq der";
  grid-template-rows: auto 1fr;
}
.pantalla {
  grid-area: pantalla; position: relative; overflow: hidden; touch-action: none;
  width: min(100%, (100svh - 300px) * 16 / 9); aspect-ratio: 16 / 9;
  background: #000; border: 3px solid var(--borde); border-radius: 8px;
  container-type: inline-size; font-size: 2cqw; line-height: 1.5;
}
#mando-izq { grid-area: izq; }
#mando-der { grid-area: der; }
@media (orientation: landscape) {
  .arena { grid-template-columns: 1fr auto 1fr; grid-template-areas: "izq pantalla der"; grid-template-rows: 1fr; }
  /* Dejar al menos 220 px por lado para que la cruceta y A/B quepan completos */
  .pantalla { width: min(100vw - 2 * 220px - 64px, (100svh - 80px) * 16 / 9); }
  .pad { width: 156px; height: 156px; }
  .botones-ab button { width: 74px; height: 74px; }
}
#juego, #capa, #hud { position: absolute; inset: 0; }
#juego canvas { display: block; image-rendering: pixelated; }
#capa, #hud { pointer-events: none; }
#capa > * { pointer-events: auto; }

/* ---------- Título ---------- */
.titulo {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw;
  background: linear-gradient(180deg, rgba(10, 10, 40, 0.55), rgba(10, 10, 40, 0.85));
  text-align: center;
}
.titulo h1 {
  margin: 0; font-size: 8cqw; line-height: 1.05; color: var(--amarillo); letter-spacing: 0.06em;
  text-shadow: 0.6cqw 0.6cqw 0 var(--rosa), 0 0 2cqw #ff9a00;
}
.retratos { display: flex; gap: 2cqw; }
.retratos img { width: 6.5cqw; image-rendering: pixelated; filter: drop-shadow(0 0.5cqw 0 #000); }
.jugar {
  font: inherit; font-size: 2.6cqw; color: #2a1000; background: var(--amarillo); cursor: pointer;
  border: 0; border-radius: 1cqw; padding: 1.6cqw 4cqw; box-shadow: 0 0.8cqw 0 #b08a10;
}
.jugar:active { transform: translateY(0.6cqw); box-shadow: 0 0.2cqw 0 #b08a10; }
.nota { margin: 0; font-size: 1.4cqw; color: var(--suave); }

/* ---------- Menús ---------- */
.menu {
  position: absolute; inset: 0; overflow-y: auto; padding: 3cqw;
  background: rgba(8, 8, 30, 0.92); display: flex; flex-direction: column; align-items: center; gap: 2cqw;
}
.menu h2 { margin: 0; font-size: 2.8cqw; color: var(--amarillo); text-align: center; text-wrap: balance; }
.opciones { display: grid; gap: 1.6cqw; width: 100%; max-width: 90cqw; }
.menu button {
  --color: var(--cian);
  font: inherit; font-size: 1.8cqw; color: var(--texto); cursor: pointer; text-align: center;
  background: var(--panel); border: 0.4cqw solid var(--borde); border-radius: 1.2cqw;
  padding: 1.6cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw;
  min-width: 0; touch-action: manipulation;
}
.menu button:hover, .menu button:active { border-color: var(--color); box-shadow: 0 0 1.5cqw var(--color); }
.menu button img { width: 10cqw; image-rendering: pixelated; }
.op-detalle { font-size: 1.2cqw; color: var(--suave); line-height: 1.6; white-space: pre-line; }
.menu .volver { align-self: flex-start; background: transparent; border-color: transparent; color: var(--suave); padding: 1cqw; }
.menu-luchadores .op-texto { color: var(--color); }
.menu-resultados button { padding: 1cqw; }
.menu-resultados button:first-child img { width: 9cqw; }

/* ---------- Marcador ---------- */
.marcador {
  position: absolute; left: 1.5cqw; right: 1.5cqw; bottom: 1.2cqw;
  display: flex; justify-content: center; gap: 1.5cqw;
}
.tarjeta {
  display: flex; align-items: center; gap: 0.8cqw; min-width: 0; flex: 0 1 22cqw;
  background: rgba(10, 10, 30, 0.75); border: 0.3cqw solid var(--color); border-radius: 1cqw; padding: 0.6cqw 1cqw;
}
.tarjeta img { width: 4cqw; image-rendering: pixelated; }
.tarjeta p { margin: 0; }
.t-nombre { font-size: 1.1cqw; color: var(--color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-daño { font-size: 2.6cqw; text-shadow: 0.25cqw 0.25cqw 0 #000; font-variant-numeric: tabular-nums; }
.t-vidas { font-size: 1.1cqw; color: var(--color); letter-spacing: 0.2em; }
.tarjeta.fuera { opacity: 0.4; }
.reloj {
  position: absolute; top: 1cqw; left: 50%; transform: translateX(-50%);
  font-size: 2.4cqw; color: var(--amarillo); text-shadow: 0.3cqw 0.3cqw 0 #000;
}

/* ---------- Mandos ---------- */
.mando { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; touch-action: none; }
body:not(.peleando) .mando { visibility: hidden; }
.etiqueta-jugador { margin: 0; font-size: 11px; color: var(--amarillo); }
.pad {
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 4px;
  width: 170px; height: 170px; touch-action: none;
}
.pad.chica { width: 130px; height: 130px; }
.flecha {
  border: 3px solid var(--borde); border-radius: 12px; cursor: pointer; touch-action: none;
  font: inherit; font-size: 18px; color: #fff; -webkit-user-select: none; user-select: none;
  background: radial-gradient(circle at 35% 30%, #5a5aa0, #2e2e6a); box-shadow: 0 5px 0 #070718;
}
.pad.chica .flecha { font-size: 14px; }
.f-arriba { grid-area: 1 / 2; }
.f-izq { grid-area: 2 / 1; }
.f-der { grid-area: 2 / 3; }
.f-abajo { grid-area: 3 / 2; }
.flecha.pulsado { transform: translateY(4px); box-shadow: 0 1px 0 #070718; background: #7a7ad0; }
.botones-ab { display: flex; gap: 18px; align-items: flex-end; }
.botones-ab button {
  width: 82px; height: 82px; border-radius: 50%; border: 0; cursor: pointer; touch-action: none;
  font: inherit; font-size: 20px; color: #fff; box-shadow: 0 6px 0 #070718;
}
.botones-ab.chica button { width: 62px; height: 62px; font-size: 15px; }
.boton-a { background: radial-gradient(circle at 35% 30%, #ff8ab8, var(--rosa) 60%, #a01f55); margin-bottom: 26px; }
.boton-b { background: radial-gradient(circle at 35% 30%, #9aeaff, var(--cian) 60%, #1f7a9a); }
.botones-ab button.pulsado { transform: translateY(5px); box-shadow: 0 1px 0 #070718; }


/* Créditos abajito */
.creditos { margin: 6px 0 0; font-size: 9px; color: var(--suave); text-align: center; line-height: 1.6; }

/* Sin zoom de Safari: los toques no se interpretan como doble tap (ver compartido/sin-zoom.js) */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }