/* LUMEN · Aguante. Todo se mide en --u (1% del ancho del juego); en el celular parado vale más (ver el final). */
:root {
  /* 1% del ancho del juego (el juego es 16:9 y entra entero en la ventana). */
  --u: min(1vw, 1.7778vh);
  --azul: #1f5fae; --azul-osc: #133a72; --azul-claro: #3f8ee0;
  --borde: #f0a830; --borde-osc: #8a4a10;
  --texto: #fff; --muted: #b8d0f0;
  --hp: #ff4a4a; --mp: #4ac0ff; --oro: #ffd040; --cura: #6cf070;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #08121c; color: var(--texto); }
body { display: grid; place-items: center; font-family: 'Silkscreen', 'Courier New', monospace; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }

#juego {
  position: relative;
  width: min(100vw, 177.78vh); aspect-ratio: 16 / 9;
  background: #000; overflow: hidden; user-select: none;
  font-size: calc(1.55 * var(--u));
}
#escena { position: absolute; inset: 0; width: 100%; height: 100%; }

.pantalla { position: absolute; inset: 0; display: none; }
.pantalla.on { display: block; }
.panel-lleno { background: #0a1c2cdd; padding: calc(2.5 * var(--u)) calc(3 * var(--u)); display: none; flex-direction: column; gap: calc(1.2 * var(--u)); }
.panel-lleno.on { display: flex; }
.panel-centro.on { display: grid; place-items: center; background: #0006; }
h2 { margin: 0; font-size: calc(2.6 * var(--u)); color: var(--oro); text-shadow: calc(0.2 * var(--u)) calc(0.2 * var(--u)) 0 #000; }
h2 small, h3 span { color: var(--muted); font-size: 0.6em; }
.muted { color: var(--muted); }

/* Cajas azules con borde dorado, como la referencia. */
.caja {
  background: linear-gradient(var(--azul), var(--azul-osc));
  border: calc(0.35 * var(--u)) solid var(--borde); outline: calc(0.2 * var(--u)) solid #000;
  box-shadow: inset 0 0 0 calc(0.25 * var(--u)) var(--borde-osc);
  border-radius: calc(0.6 * var(--u)); padding: calc(0.8 * var(--u)) calc(1.2 * var(--u));
}
.btn {
  background: linear-gradient(var(--azul-claro), var(--azul)); border: calc(0.3 * var(--u)) solid var(--borde);
  border-radius: calc(0.6 * var(--u)); padding: calc(0.7 * var(--u)) calc(1.6 * var(--u)); text-shadow: calc(0.15 * var(--u)) calc(0.15 * var(--u)) 0 #000;
  box-shadow: 0 calc(0.3 * var(--u)) 0 #000;
}
.btn:hover:not(:disabled), .btn:focus-visible { filter: brightness(1.2); outline: none; }
.btn:active:not(:disabled) { transform: translateY(calc(0.2 * var(--u))); box-shadow: 0 calc(0.1 * var(--u)) 0 #000; }
.btn:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
.btn.grande { font-size: calc(1.9 * var(--u)); padding: calc(1 * var(--u)) calc(2.4 * var(--u)); background: linear-gradient(#ffb840, #d06a10); color: #2a1000; text-shadow: none; border-color: #fff2c0; }
.pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: calc(1 * var(--u)); }

/* Título */
#p-titulo { text-align: center; padding-top: calc(5 * var(--u)); background: linear-gradient(#0008, #0000 60%); }
.logo { font-size: calc(7 * var(--u)); font-weight: 700; color: var(--oro); text-shadow: calc(0.4 * var(--u)) calc(0.4 * var(--u)) 0 #8a2a10, calc(0.8 * var(--u)) calc(0.8 * var(--u)) 0 #000; line-height: 1; }
.logo small { display: block; font-size: calc(2.2 * var(--u)); color: #9fe8ff; letter-spacing: calc(1.2 * var(--u)); text-shadow: calc(0.2 * var(--u)) calc(0.2 * var(--u)) 0 #000; }
.bajada { text-shadow: calc(0.2 * var(--u)) calc(0.2 * var(--u)) 0 #000; margin: calc(1.2 * var(--u)) 0; }
.nombre { display: inline-flex; gap: calc(1 * var(--u)); align-items: center; text-shadow: calc(0.2 * var(--u)) calc(0.2 * var(--u)) 0 #000; }
.nombre input { font: inherit; width: calc(18 * var(--u)); padding: calc(0.4 * var(--u)) calc(0.8 * var(--u)); background: #0a1c2c; color: #fff; border: calc(0.25 * var(--u)) solid var(--borde); border-radius: calc(0.5 * var(--u)); }
.menu-titulo { display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); margin-top: calc(1.6 * var(--u)); }
.menu-titulo .btn:not(.grande) { width: calc(20 * var(--u)); }
.oro-titulo { color: var(--oro); text-shadow: calc(0.2 * var(--u)) calc(0.2 * var(--u)) 0 #000; }

/* Grupo */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.2 * var(--u)); overflow: auto; }
.tarjeta { display: flex; gap: calc(1 * var(--u)); text-align: left; align-items: flex-start; background: linear-gradient(var(--azul), var(--azul-osc)); border: calc(0.3 * var(--u)) solid #456; border-radius: calc(0.6 * var(--u)); padding: calc(0.8 * var(--u)); font-size: calc(1.2 * var(--u)); }
.tarjeta canvas { width: calc(6.4 * var(--u)); border: calc(0.2 * var(--u)) solid #000; flex: none; }
.tarjeta b { font-size: calc(1.5 * var(--u)); }
.tarjeta.elegida { border-color: var(--borde); box-shadow: 0 0 0 calc(0.3 * var(--u)) var(--oro); }
.tarjeta.bloqueada { filter: grayscale(1) brightness(0.6); cursor: default; }
.tarjeta p { margin: calc(0.3 * var(--u)) 0 0; color: var(--muted); }

/* Combate: la capa deja pasar los clics al canvas (para tocar a los enemigos) salvo en las cajas. */
#p-combate { pointer-events: none; }
#p-combate .caja, #p-combate .retratos { pointer-events: auto; }
.enemigos { position: absolute; left: calc(1.2 * var(--u)); top: calc(1.2 * var(--u)); min-width: calc(24 * var(--u)); font-size: calc(1.3 * var(--u)); padding: calc(0.6 * var(--u)) calc(1 * var(--u)); }
.enemigos h3 { margin: 0 0 calc(0.4 * var(--u)); font-size: calc(1.4 * var(--u)); color: var(--oro); }
.enemigos ul { list-style: none; margin: 0; padding: 0; }
.enemigos li { display: grid; grid-template-columns: 1fr calc(9 * var(--u)); gap: calc(0.8 * var(--u)); align-items: center; }
.enemigos li.muerto { opacity: 0.35; text-decoration: line-through; }
.barra { height: calc(0.9 * var(--u)); background: #000; border: calc(0.15 * var(--u)) solid #000; border-radius: calc(0.3 * var(--u)); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--hp); transition: width 0.3s; }
.barra.mp i { background: var(--mp); }
.anuncio { position: absolute; top: calc(1.2 * var(--u)); left: 50%; transform: translateX(-30%); max-width: calc(56 * var(--u)); text-align: center; background: #000c; border: calc(0.25 * var(--u)) solid #fff4; border-radius: calc(0.6 * var(--u)); padding: calc(0.6 * var(--u)) calc(1.4 * var(--u)); font-size: calc(1.4 * var(--u)); }
.anuncio.fuerte { color: #ffd0a0; border-color: #ff6040; animation: latido 0.5s ease-in-out 2; }
@keyframes latido { 50% { transform: translateX(-30%) scale(1.06); } }

.abajo { position: absolute; left: calc(0.8 * var(--u)); right: calc(0.8 * var(--u)); bottom: calc(0.8 * var(--u)); display: grid; grid-template-columns: calc(23 * var(--u)) auto 1fr; gap: calc(0.8 * var(--u)); align-items: end; }
.comandos { display: flex; flex-direction: column; gap: calc(0.2 * var(--u)); min-height: calc(14.5 * var(--u)); font-size: calc(1.45 * var(--u)); padding: calc(0.6 * var(--u)) calc(0.6 * var(--u)); position: relative; }
.comandos button { white-space: nowrap; background: none; border: 0; text-align: left; padding: calc(0.25 * var(--u)) calc(0.4 * var(--u)) calc(0.25 * var(--u)) calc(2.4 * var(--u)); position: relative; border-radius: calc(0.3 * var(--u)); display: flex; justify-content: space-between; gap: calc(0.6 * var(--u)); }
.comandos button:disabled { color: #8aa; cursor: default; }
.comandos button:hover:not(:disabled), .comandos button.foco { background: #fff2; }
.comandos button.foco::before { content: '▶'; position: absolute; left: calc(0.5 * var(--u)); color: var(--oro); }
.comandos .titulo-menu { color: var(--oro); font-size: calc(1.2 * var(--u)); padding-left: calc(0.4 * var(--u)); }
.comandos small { color: var(--muted); flex: none; }
.comandos button span { overflow: hidden; text-overflow: ellipsis; }
.comandos .lista { overflow-y: auto; max-height: calc(12 * var(--u)); display: flex; flex-direction: column; gap: calc(0.2 * var(--u)); }
.ayuda { position: absolute; left: 0; right: 0; bottom: calc(100% + calc(0.6 * var(--u))); font-size: calc(1.15 * var(--u)); background: #000d; border-radius: calc(0.5 * var(--u)); padding: calc(0.5 * var(--u)) calc(0.8 * var(--u)); color: var(--muted); }

.retratos { display: flex; gap: calc(0.6 * var(--u)); }
.retrato { position: relative; width: calc(9.5 * var(--u)); padding: 0; border: calc(0.35 * var(--u)) solid #456; border-radius: calc(0.5 * var(--u)); background: #000; }
.retrato canvas { display: block; width: 100%; }
.retrato.turno { border-color: var(--cura); box-shadow: 0 0 0 calc(0.3 * var(--u)) #6cf07088; transform: translateY(calc(-0.8 * var(--u))); transition: transform 0.15s; }
.retrato.elegible { border-color: var(--oro); animation: titila 0.6s infinite alternate; }
.retrato .marcas { position: absolute; left: calc(0.2 * var(--u)); top: calc(0.2 * var(--u)); font-size: calc(1.2 * var(--u)); display: flex; gap: calc(0.1 * var(--u)); }
.retrato.golpe { animation: sacudon 0.3s; }
@keyframes titila { to { box-shadow: 0 0 0 calc(0.4 * var(--u)) var(--oro); } }
@keyframes sacudon { 25% { transform: translateX(calc(-0.5 * var(--u))); } 75% { transform: translateX(calc(0.5 * var(--u))); } }
.estado { font-size: calc(1.35 * var(--u)); padding: calc(0.5 * var(--u)) calc(1 * var(--u)); }
.estado table { width: 100%; border-collapse: collapse; }
.estado td { padding: calc(0.15 * var(--u)) calc(0.4 * var(--u)); white-space: nowrap; }
.estado tr.turno td:first-child { color: var(--cura); }
.estado tr.caido { opacity: 0.5; }
.estado .lbl { color: var(--oro); font-size: calc(1.1 * var(--u)); }
.estado .barra { width: calc(8 * var(--u)); display: inline-block; vertical-align: middle; margin-left: calc(0.4 * var(--u)); height: calc(0.8 * var(--u)); }
.flota { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); font-weight: 700; font-size: calc(2 * var(--u)); text-shadow: calc(0.2 * var(--u)) calc(0.2 * var(--u)) 0 #000; pointer-events: none; animation: subir 1s forwards; }
@keyframes subir { to { transform: translate(-50%, calc(-4 * var(--u))); opacity: 0; } }

/* Diálogos */
.dialogo { width: calc(52 * var(--u)); text-align: center; padding: calc(2 * var(--u)); display: flex; flex-direction: column; gap: calc(1 * var(--u)); align-items: center; }
.dialogo p { margin: 0; }
.mini-grupo { display: flex; gap: calc(1.2 * var(--u)); justify-content: center; font-size: calc(1.2 * var(--u)); }
.mini-grupo div { display: flex; flex-direction: column; align-items: center; gap: calc(0.3 * var(--u)); }
.mini-grupo canvas { width: calc(6 * var(--u)); border: calc(0.2 * var(--u)) solid #000; }
.mini-grupo .barra { width: calc(8 * var(--u)); }
.siguiente { color: #ffd0a0; }
.datos { list-style: none; padding: 0; margin: 0; color: var(--muted); }
.datos b { color: #fff; }

/* Tienda, trofeos, ranking */
.oro { float: right; margin-right: calc(4.5 * var(--u)); color: var(--oro); font-size: 0.8em; }
.pestanas { display: flex; gap: calc(0.6 * var(--u)); }
.pestanas button { background: var(--azul-osc); border: calc(0.25 * var(--u)) solid #456; border-radius: calc(0.5 * var(--u)) calc(0.5 * var(--u)) 0 0; padding: calc(0.5 * var(--u)) calc(1.4 * var(--u)); }
.pestanas button.on { border-color: var(--borde); background: var(--azul); color: var(--oro); }
.estante { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(0.8 * var(--u)); overflow-y: auto; align-content: start; font-size: calc(1.3 * var(--u)); flex: 1; }
.articulo { display: grid; grid-template-columns: calc(3.6 * var(--u)) 1fr auto; gap: calc(1 * var(--u)); align-items: center; background: linear-gradient(var(--azul), var(--azul-osc)); border: calc(0.25 * var(--u)) solid #456; border-radius: calc(0.6 * var(--u)); padding: calc(0.6 * var(--u)) calc(1 * var(--u)); }
.articulo .ico { font-size: calc(2.4 * var(--u)); text-align: center; }
.articulo .ico canvas { width: calc(3.6 * var(--u)); }
.articulo p { margin: calc(0.2 * var(--u)) 0 0; color: var(--muted); font-size: calc(1.1 * var(--u)); }
.articulo .nivel { color: var(--oro); }
.articulo.listo { border-color: var(--cura); }
.trofeo.no { filter: grayscale(1); opacity: 0.55; }
.ranking { border-collapse: collapse; width: 100%; font-size: calc(1.35 * var(--u)); }
.ranking th { color: var(--oro); text-align: left; }
.ranking td, .ranking th { padding: calc(0.4 * var(--u)) calc(0.8 * var(--u)); border-bottom: calc(0.15 * var(--u)) solid #fff2; }
.ranking tr.yo td { color: var(--cura); }

#avisos { position: absolute; right: calc(1 * var(--u)); bottom: calc(18 * var(--u)); display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); pointer-events: none; }
.aviso { background: linear-gradient(#ffb840, #d06a10); color: #2a1000; border: calc(0.25 * var(--u)) solid #fff2c0; border-radius: calc(0.6 * var(--u)); padding: calc(0.6 * var(--u)) calc(1.2 * var(--u)); font-size: calc(1.3 * var(--u)); animation: entra 0.3s, sale 0.4s 3.4s forwards; }
@keyframes entra { from { transform: translateX(120%); } }
@keyframes sale { to { opacity: 0; transform: translateX(120%); } }
.mudo { position: absolute; right: calc(1 * var(--u)); top: calc(1 * var(--u)); background: #0008; border: 0; border-radius: 50%; width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); font-size: calc(1.8 * var(--u)); }
#p-combate.on ~ .mudo { top: auto; bottom: calc(19 * var(--u)); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important; transition: none !important; } }

/* Rareza de los héroes: ★ azul, ★★ violeta, ★★★ dorado. */
.estrellas { color: var(--oro); letter-spacing: -0.1em; }
.tarjetas { grid-template-columns: repeat(4, 1fr); gap: calc(0.8 * var(--u)); }
.tarjeta { font-size: calc(1.05 * var(--u)); padding: calc(0.5 * var(--u)); }
.tarjeta canvas { width: calc(5.6 * var(--u)); }
.tarjeta b { font-size: calc(1.3 * var(--u)); }
.tarjeta.r2, .retrato.r2 { border-color: #a070ff; }
.tarjeta.r3, .retrato.r3 { border-color: var(--oro); box-shadow: inset 0 0 calc(1 * var(--u)) #ffd04055; }
.tarjeta.elegida { border-color: var(--cura); box-shadow: 0 0 0 calc(0.3 * var(--u)) var(--cura); }
.chances { margin: 0; color: var(--muted); font-size: calc(1.25 * var(--u)); }
.cartas { flex: 1; display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)); justify-content: center; align-content: center; }
.carta { width: calc(8.6 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(0.2 * var(--u)); padding: calc(0.5 * var(--u)); text-align: center; border-radius: calc(0.6 * var(--u)); border: calc(0.3 * var(--u)) solid #6aa0d8; background: linear-gradient(#2a4a7a, #132a4a); font-size: calc(1.1 * var(--u)); animation: aparece 0.45s backwards; }
.carta canvas { width: calc(7 * var(--u)); border: calc(0.15 * var(--u)) solid #000; }
.carta small { color: var(--muted); font-size: calc(0.9 * var(--u)); }
.carta.r2 { border-color: #a070ff; background: linear-gradient(#4a2a8a, #1e1240); }
.carta.r3 { border-color: var(--oro); background: linear-gradient(#8a6010, #3a2008); box-shadow: 0 0 calc(1.5 * var(--u)) #ffd040aa; }
@keyframes aparece { from { transform: rotateY(90deg) scale(0.6); opacity: 0; } }
.invocando { font-size: calc(8 * var(--u)); animation: girar 0.65s linear; }
@keyframes girar { from { transform: rotate(0) scale(0.4); } to { transform: rotate(720deg) scale(1.4); } }
.bicho .ico { width: calc(6 * var(--u)); }
.bicho .ico canvas { width: 100%; }
.articulo.bicho { grid-template-columns: calc(6 * var(--u)) 1fr; }
.retrato canvas { }
.creditos { position: absolute; bottom: calc(0.6 * var(--u)); left: 0; right: 0; margin: 0; text-align: center; color: #c8d8e8aa; font-size: calc(0.9 * var(--u)); font-family: sans-serif; text-shadow: 0 0 3px #000; }
#p-titulo { padding-top: calc(3.5 * var(--u)); }
.menu-titulo { display: grid; grid-template-columns: repeat(2, calc(21 * var(--u))); justify-content: center; gap: calc(0.8 * var(--u)); }
.menu-titulo .grande { grid-column: 1 / -1; justify-self: center; }
.menu-titulo .btn:not(.grande) { width: auto; }
.menu-titulo .btn:last-child:nth-child(even) { grid-column: 1 / -1; justify-self: center; width: calc(21 * var(--u)); }

/* ---------- Celular y pantallas táctiles ---------- */
#juego { touch-action: manipulation; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

/* Celular acostado (pantalla baja): botones y letra más grandes para el dedo. */
@media (orientation: landscape) and (max-height: 500px) {
  .abajo { grid-template-columns: calc(27 * var(--u)) auto 1fr; }
  .comandos { font-size: calc(1.85 * var(--u)); min-height: calc(15 * var(--u)); padding: calc(0.4 * var(--u)); }
  .comandos button { padding: calc(0.5 * var(--u)) calc(0.6 * var(--u)) calc(0.5 * var(--u)) calc(2.6 * var(--u)); }
  .comandos .titulo-menu { display: none; }
  .comandos .lista { max-height: calc(17.5 * var(--u)); }
  .comandos .titulo-menu { font-size: calc(1.4 * var(--u)); }
  .retrato { width: calc(8.5 * var(--u)); }
  .estado { font-size: calc(1.45 * var(--u)); }
  .estado .barra { width: calc(6 * var(--u)); }
  .enemigos { font-size: calc(1.5 * var(--u)); }
  .anuncio, .ayuda { font-size: calc(1.6 * var(--u)); }
  .btn { padding: calc(0.9 * var(--u)) calc(1.8 * var(--u)); }
}

/* Celular parado: el juego ocupa toda la pantalla; la escena arriba y los menús abajo. */
@media (orientation: portrait) {
  :root { --u: 2.5vw; }
  body { display: block; }
  #juego { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; background: linear-gradient(#0a1c2c, #08121c); }
  #escena { inset: auto; top: 0; left: 0; width: 100vw; height: 56.25vw; }
  .mudo, #p-combate.on ~ .mudo { top: calc(1 * var(--u)); bottom: auto; }
  #avisos { top: calc(56.25vw + 1 * var(--u)); bottom: auto; right: calc(1.5 * var(--u)); }

  /* Pantallas de menú: a lo ancho y con scroll. */
  .panel-lleno { padding: calc(3 * var(--u)) calc(2.5 * var(--u)) calc(2 * var(--u)); overflow-y: auto; background: #0a1c2cf2; }
  h2 { font-size: calc(2.4 * var(--u)); }
  .oro { margin-right: calc(4 * var(--u)); }
  .pie { flex-wrap: wrap; justify-content: center; position: sticky; bottom: calc(-2 * var(--u)); margin: auto calc(-2.5 * var(--u)) calc(-2 * var(--u)); padding: calc(1.2 * var(--u)) calc(2.5 * var(--u)) calc(2 * var(--u)); background: linear-gradient(#0a1c2c00, #0a1c2c 30%); }
  .pie > span { display: flex; gap: calc(1 * var(--u)); }
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .tarjeta { min-width: 0; overflow-wrap: anywhere; }
  .tarjeta { font-size: calc(1.15 * var(--u)); }
  .tarjeta canvas { width: calc(8 * var(--u)); }
  .tarjeta b { font-size: calc(1.4 * var(--u)); }
  .estante { grid-template-columns: 1fr; overflow: visible; flex: none; }
  .articulo { grid-template-columns: calc(6 * var(--u)) 1fr auto; }
  .articulo .ico { font-size: calc(3 * var(--u)); }
  .articulo .ico canvas, .bicho .ico { width: calc(6 * var(--u)); }
  .articulo.bicho { grid-template-columns: calc(8 * var(--u)) 1fr; }
  .bicho .ico { width: calc(8 * var(--u)); }
  .carta { width: calc(17 * var(--u)); }
  .carta canvas { width: calc(14 * var(--u)); }
  .ranking { font-size: calc(1.1 * var(--u)); }
  .ranking td:nth-child(5), .ranking th:nth-child(5) { display: none; }
  .dialogo { width: 92vw; }
  .mini-grupo canvas { width: calc(10 * var(--u)); }
  .mini-grupo .barra { width: calc(12 * var(--u)); }

  /* Título. */
  #p-titulo { padding-top: calc(12 * var(--u)); }
  .logo { font-size: calc(6.6 * var(--u)); }
  .logo small { font-size: calc(2.6 * var(--u)); }
  .nombre input { width: calc(30 * var(--u)); }
  .menu-titulo { grid-template-columns: repeat(2, 44vw); gap: calc(1.2 * var(--u)); margin-top: calc(3 * var(--u)); }
  .menu-titulo .btn { padding: calc(1.2 * var(--u)) calc(1 * var(--u)); }
  .menu-titulo .btn:last-child:nth-child(even) { width: 44vw; }
  .creditos { position: absolute; bottom: calc(1 * var(--u)); font-size: calc(0.9 * var(--u)); padding: 0 calc(2 * var(--u)); }

  /* Combate: lo de los enemigos, el anuncio y el grupo van debajo de la escena. */
  #p-combate.on { display: flex; flex-direction: column; gap: calc(1 * var(--u)); padding: calc(56.25vw + 1 * var(--u)) calc(1.5 * var(--u)) calc(1.5 * var(--u)); }
  .enemigos { position: static; min-width: 0; font-size: calc(1.3 * var(--u)); }
  .enemigos li { grid-template-columns: 1fr calc(18 * var(--u)); }
  .anuncio, .anuncio.fuerte { position: static; transform: none; max-width: none; animation: none; font-size: calc(1.35 * var(--u)); }
  .anuncio[hidden] { display: block; visibility: hidden; }
  .abajo { position: static; margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: calc(1 * var(--u)); }
  .retratos { order: 1; justify-content: center; gap: calc(1.5 * var(--u)); }
  .estado { order: 2; }
  .comandos { order: 3; }
  .retrato { width: calc(12 * var(--u)); }
  .estado td { padding: calc(0.15 * var(--u)) calc(0.3 * var(--u)); }
  .retrato .marcas { font-size: calc(1.6 * var(--u)); }
  .estado { font-size: calc(1.25 * var(--u)); padding: calc(0.6 * var(--u)) calc(1 * var(--u)); }
  .estado .barra { width: calc(7 * var(--u)); }
  .estado table { table-layout: auto; }
  .comandos { min-height: calc(19 * var(--u)); font-size: calc(1.7 * var(--u)); padding: calc(1 * var(--u)); }
  .comandos .lista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(0.6 * var(--u)); max-height: calc(30 * var(--u)); overflow-y: auto; }
  .comandos button { padding: calc(1.3 * var(--u)) calc(0.8 * var(--u)) calc(1.3 * var(--u)) calc(2.4 * var(--u)); background: #ffffff14; min-width: 0; flex-wrap: wrap; white-space: normal; }
  .comandos button span { overflow: visible; }
  .comandos .ayuda { position: static; order: -1; font-size: calc(1.2 * var(--u)); margin-bottom: calc(0.4 * var(--u)); }
  .ayuda:empty { display: none; }
}
.comandos button.apagado { color: #8aa; }
#nombre:disabled { opacity: 1; color: var(--oro); cursor: default; }

/* Pelea automática: el botón vive en la caja de enemigos, a mano en PC y en celular. */
.enemigos h3 { display: flex; align-items: center; gap: calc(0.6 * var(--u)); }
.auto { margin-left: auto; font: inherit; font-size: calc(1.1 * var(--u)); color: #fff; background: #0006; border: calc(0.2 * var(--u)) solid var(--borde); border-radius: calc(0.4 * var(--u)); padding: calc(0.15 * var(--u)) calc(0.7 * var(--u)); cursor: pointer; flex: none; }
.auto.activo { background: var(--oro); color: #000; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { filter: brightness(1.25); } }
@media (orientation: portrait) { .auto { font-size: calc(1.6 * var(--u)); padding: calc(0.4 * var(--u)) calc(1 * var(--u)); } }
.nota-auto { color: var(--muted); font-size: calc(1.1 * var(--u)); padding: calc(0.4 * var(--u)); white-space: normal; }
@media (orientation: portrait) { .nota-auto { font-size: calc(1.5 * var(--u)); } }

/* Botones de arriba del combate (Auto y volver al menú) */
.botones-pelea { margin-left: auto; display: flex; gap: calc(0.5 * var(--u)); }
.botones-pelea .auto { margin-left: 0; }
#abandonar.seguro { background: #a02010; }
/* Entre peleas y al caer: salir al menú a la izquierda, seguir a la derecha */
.botones-botin { display: flex; justify-content: center; gap: calc(1 * var(--u)); flex-wrap: wrap; }
/* Menú principal simétrico: el botón grande y el último ocupan todo el ancho, el resto de a dos */
.menu-titulo .grande, .menu-titulo .btn:last-child:nth-child(even) { justify-self: stretch; width: auto; }
@media (orientation: portrait) { .menu-titulo .btn:last-child:nth-child(even) { width: auto; } }
/* El aviso va a la derecha, para no tapar los botones del cuadro de enemigos */
.anuncio { left: auto; right: calc(1.2 * var(--u)); transform: none; max-width: calc(46 * var(--u)); pointer-events: none; }
@media (orientation: portrait) { .anuncio { right: auto; max-width: none; } }
/* En el teléfono, el nombre del tramo y el piso bajan a su propio renglón para que entren Auto y Menú */
.enemigos h3 { flex-wrap: wrap; }
@media (orientation: portrait) { #piso { order: 3; flex-basis: 100%; } }