/* Layout de public/play-ai-v2.html -- ver PLAY-AI-V2-SPEC.md.
   Se carga DESPUÉS de style.css y play.css a propósito: reusa ahí todo lo
   que ya existe (.card-tile, .pile-tile, .decision-overlay,
   .card-hover-preview, .zone-viewer-overlay, .btn, colores de :root) y acá
   solo pisa layout/tamaño para el modo "una sola pantalla horizontal, sin
   scroll de página". No se duplica ningún selector de esos archivos. */

html, body.v2-body {
  /* 100dvh tiene un bug conocido en Chrome Android: en el primer paint
     puede reportar la altura "grande" (como si la barra de direcciones ya
     estuviera oculta) y no recalcular hasta el próximo scroll/resize -- con
     overflow:hidden ese excedente se recorta sin forma de revelarlo, y lo
     que queda cortado es la última fila (el dock de la mano). 100svh evita
     esto: es la altura "chica" garantizada, la que siempre entra aunque la
     barra de Chrome esté visible. Costo aceptado: cuando el usuario hace
     scroll/interactúa y la barra se oculta, queda una franja vacía abajo
     en vez de aprovechar ese espacio extra -- mejor eso que tapar la mano. */
  height: 100svh;
  overflow: hidden;
  margin: 0;
}
body.v2-body { display: flex; flex-direction: column; }

.v2-app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* --- header compacto ---------------------------------------------------- */
/* Reusa .app-header (padding/menu hamburguesa de style.css, nav-toggle.js
   sigue funcionando porque el elemento conserva la clase app-header) --
   acá solo se lo achica en alto. */
.v2-header {
  flex: 0 0 auto;
  padding: 0.35rem 0.6rem;
  gap: 0.5rem;
  min-height: 0;
}
.v2-header h1 { display: none; } /* no hay <h1> en v2, ver v2-header-brand */
.v2-header-brand {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
}
.v2-header-brand strong { font-size: 0.95rem; white-space: nowrap; }
.v2-header-brand #status-line {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-icon-btn {
  flex: 0 0 auto;
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* El dropdown de navegación (style.css) solo colapsa por debajo de 640px de
   ANCHO -- v2 es siempre angosto en ALTO (landscape mobile, 390-430px) pero
   ancho normal (844-915px+), así que esa media query nunca se disparaba y
   los 3-9 links de header-actions se mostraban en fila, empujando el header
   a 2 líneas (le comía alto al tablero, justo lo que esta pantalla existe
   para evitar). Acá se fuerza el mismo comportamiento colapsado SIEMPRE,
   sin depender de max-width. */
.v2-header .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; padding: 0; }
.v2-header .header-actions {
  display: none;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 100%;
  left: 0.6rem;
  right: 0.6rem;
  margin-top: 0.4rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem;
  gap: 0.3rem;
  z-index: 40;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.v2-header.nav-open .header-actions { display: flex; }
.v2-header .header-actions a.btn, .v2-header .header-actions button.btn { width: 100%; justify-content: center; }

/* Riel de fases: colapsado SIEMPRE a un solo chip con la fase actual (misma
   técnica que play.css usa solo bajo @media max-width:640px, ver
   renderPhaseRail en play-client.js -- pinta .current, sin cambios de JS).
   Vive dentro de .rail-col para que el card-hover-preview NO anclado (hover
   de mouse en desktop, ver showCardPreview en play-client.js) tenga dónde
   posicionarse -- en touch (el caso real en mobile) usa .floating y no
   depende de esto. */
.v2-phase-rail-col {
  position: relative;
  flex: 0 0 auto;
}
.v2-phase-rail-col .phase-rail {
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0.3rem 0.6rem;
  gap: 0;
  overflow: hidden;
}
.v2-phase-rail-col .phase-step:not(.current) { display: none; }
.v2-phase-rail-col .phase-group:not(:has(.phase-step.current)) { display: none; }
.v2-phase-rail-col .phase-group-label { display: none; }
.v2-phase-rail-col .phase-group { border-left: none; padding-left: 0; margin: 0; }
.v2-phase-rail-col .phase-step.current { white-space: nowrap; padding: 0.25rem 0.6rem; }

/* --- tablero: una columna, todo en flex, cada bloque se reparte el alto
   disponible con flex-grow -- así el layout entero siempre entra en
   100svh sin importar el tamaño real de pantalla, en vez de calcular
   tamaños de carta a ciegas en px/vh. Las cartas dentro (ver más abajo)
   usan height:100% + aspect-ratio para estirarse exactamente al alto que
   les tocó. */
.v2-table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0.5rem;
  gap: 0.25rem;
}

.v2-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}
.v2-strip-id {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
}
.v2-strip-id strong { font-size: 0.8rem; }
.v2-strip .pile-row.v2-pile-row {
  flex: 0 0 auto;
  gap: 0.35rem;
  padding: 0;
  flex-wrap: nowrap;
}
.v2-pile-row .pile-slot { width: auto; gap: 0.1rem; }
.v2-pile-row .pile-slot-label { display: none; } /* sin lugar vertical -- el nombre completo ya está en el tooltip del click (showZoneViewer) */
.v2-pile-row .pile-tile {
  width: clamp(22px, 4.4vh, 34px);
  height: clamp(30px, 6vh, 46px);
  border-radius: 5px;
  border-width: 1px;
}
.v2-pile-row .pile-count { font-size: 0.6rem; padding: 0 0.2rem; }

.v2-lines {
  flex: 3 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.15rem 0.3rem;
}
.v2-lines-rival { border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.v2-lines-you { border-color: color-mix(in srgb, var(--accent-2) 30%, var(--border)); }

.v2-line {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
}
.v2-line-tag {
  flex: 0 0 auto;
  width: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}
/* La fila en sí (id="rival-apoyo" etc.) -- fillZoneDeCombate() le hace
   innerHTML="" en cada render, así que la etiqueta de arriba vive AFUERA
   (en .v2-line-tag, hermano) y nunca se borra. Se apaga el chip ::before
   heredado de play.css (pensado para el layout vertical, no entra acá) y
   el "— vacío —" (con las filas tan angostas, el texto se corta feo). */
.v2-line .zone-row {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.1rem 0;
}
.v2-line .zone-row::before { display: none; }
.v2-line .zone-row:empty::after { display: none; }

.v2-center {
  flex: 0 0 auto;
  text-align: center;
  min-height: 0;
}
.v2-center .turn-banner { padding: 0; font-size: 0.72rem; }
.v2-center #pvp-spectator-banner,
.v2-center #pvp-opponent-status { margin: 0; font-size: 0.68rem; }

.v2-hand-dock {
  flex: 2 1 0;
  min-height: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.2rem 0.4rem;
}
.v2-hand-row {
  height: 100%;
  min-height: 0;
  align-items: stretch;
  gap: 0.4rem;
  padding: 0.15rem 0;
}
.v2-hand-row::before { display: none; }

/* --- cartas: se estiran al 100% del alto de su fila (asignado arriba por
   flex-grow), ancho calculado por aspect-ratio -- por eso el tamaño real
   en px nunca hay que adivinarlo, sale exacto para cualquier viewport. */
.v2-table .card-tile,
.v2-table .equipo-group {
  width: auto;
  min-width: 0;
  height: 100%;
  aspect-ratio: 84 / 118;
  flex: 0 0 auto;
}
.v2-table .card-tile-name { font-size: clamp(0.4rem, 1.5vh, 0.62rem); padding: 0.1rem 0.15rem; }
/* Cartas ya en juego (líneas de tablero, no la Mano): se oculta la franja
   de nombre para que quede solo la imagen -- .card-tile-img tiene flex:1
   y es la única hija flex que queda, así que crece sola para llenar el
   100% del alto sin dejar hueco (no es un clip-path que recorte y deje un
   espacio vacío abajo). La Mano (fuera de .v2-line) conserva el nombre,
   ahí sí hace falta para identificar qué se está por jugar. */
.v2-line .card-tile-name { display: none; }
/* .card-tile-flags (estado: "listo para atacar", "Imbloqueable", etc.) es
   texto superpuesto sobre la imagen, no una franja aparte -- pero pedido
   jugando: "aun tiene la parte de abajo de texto", sigue estorbando igual
   que el nombre. Se oculta acá también; el dato de estado ya se puede
   inferir del resto de la UI (flechas de combate, badges) y no es crítico
   como para justificar tapar la imagen. */
.v2-line .card-tile-flags { display: none; }
/* Ocultar .card-tile-name/.card-tile-flags no alcanzaba: el .webp de cada
   carta es el ESCANEO COMPLETO (arte + nombre + caja de texto de Habilidad
   ya HORNEADOS en los píxeles), no solo la ilustración -- confirmado
   descargando un .webp real. Ningún <span> de la UI tapa eso, hay que
   recortar la IMAGEN misma. Técnica: sacar la img del flujo flex (position:
   absolute dentro de .card-tile, que ya es position:relative+overflow:
   hidden) y agrandarla a 125% de alto -- con object-fit:cover llenando esa
   caja de 125%, el 100% visible del tile (recortado por overflow:hidden)
   termina mostrando exactamente el 80% superior de la carta original
   (100/125 = 0.8), cortando la caja de texto de abajo sin dejar hueco. */
.v2-line .card-tile-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 125%;
  object-fit: cover;
}
.v2-table .card-tile-cost,
.v2-table .card-tile-attack { font-size: clamp(0.48rem, 1.6vh, 0.68rem); }
.v2-table .card-tile-flags { font-size: clamp(0.4rem, 1.1vh, 0.55rem); bottom: 0.9rem; }
.v2-table .equipo-arma-tile {
  width: 78% !important;
  min-width: 0 !important;
  height: 78% !important;
}

/* Eventos/Log: se siguen registrando en el DOM (ver §6) pero nunca se
   muestran -- display:none en el contenedor, no en las listas mismas
   (play-client.js hace `#events-list`.appendChild/`#log-list`.innerHTML=
   incondicionalmente en cada render; si el propio nodo no existiera,
   rompería con "Cannot set properties of null"). */
.v2-hidden-panels { display: none; }

/* --- "arrastrar para jugar" (play-ai-v2-drag.js) -------------------------
   Reemplaza, solo en v2, el modal con lista de cartas duplicada para
   "jugarOro"/"jugarCartaVigilia" (ver esJugarDesdeManoArrastrable en
   play-client.js) -- acá se resuelve el caso normal: tocás y arrastrás la
   carta REAL de tu mano hacia el tablero. */

/* La caja de decisión, en este modo, ya no tiene fila de cartas -- queda
   chica (solo texto + un botón "Ninguno") y se reubica arriba del todo en
   vez de tapar la mano, que es justo donde hay que poder arrastrar. */
.decision-overlay.v2-hint-mode {
  align-items: flex-start;
  background: none;
  padding-top: 2.6rem;
}
.decision-overlay.v2-hint-mode .decision-box {
  width: max-content;
  max-width: min(92vw, 460px);
  border-radius: 10px;
  padding: 0.5rem 0.9rem 0.6rem;
  max-height: none;
}
.decision-overlay.v2-hint-mode .decision-box h2 { display: none; } /* el subtítulo ya dice todo lo que hace falta acá */

/* Carta jugable ahora mismo -- brillo sutil para que se note cuál se puede
   arrastrar sin tener que adivinar. touch-action:none evita que el
   navegador interprete el gesto como scroll/pan antes de que lleguen los
   pointer events (la página no tiene scroll de todos modos, pero en iOS el
   gesto de "swipe back" puede robarse el toque sin esto). */
.v2-table .card-tile.v2-draggable {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 45%, transparent), 0 0 10px color-mix(in srgb, var(--accent-2) 55%, transparent);
  touch-action: none;
  animation: v2-draggable-pulso 1.6s ease-in-out infinite;
}
@keyframes v2-draggable-pulso {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.v2-table .card-tile.v2-drag-source { opacity: 0.3; }

.v2-drag-ghost {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.15s ease;
}
.v2-drag-ghost.v2-drag-ghost-valido {
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 3px var(--accent-2), 0 12px 30px rgba(0, 0, 0, 0.55);
}

/* --- botón flotante "Reportar un bug" (§5 de la spec) -------------------
   Mismos IDs/lógica que play-ai.html (pb-bug-*, ver play-client.js) -- acá
   solo se reposiciona: el toggle es el propio ícono flotante, el cuerpo se
   muestra como panel superpuesto en vez de empujar el layout (no hay
   espacio libre en una sola pantalla sin scroll). */
.v2-bug-box {
  position: fixed;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 40;
  background: none;
  border: none;
  margin: 0;
}
.v2-bug-box .bug-report-toggle {
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  font-size: 1.15rem;
  text-align: center;
  padding: 0;
}
.v2-bug-box .bug-report-body {
  position: fixed;
  right: 0.6rem;
  bottom: 3.6rem;
  left: 0.6rem;
  max-width: 360px;
  margin-left: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  max-height: 60vh;
  overflow-y: auto;
}

/* --- overlays que ya venían de play.css: en una pantalla baja (390-430px
   de alto) su max-height:70vh sigue entrando bien, no hace falta tocarlos.
   El hover-preview NO anclado (desktop con mouse real -- en touch/mobile
   real siempre usa .floating, ver supportsHover en play-client.js) sí
   necesita reposicionarse: play.css lo ancla con position:absolute a
   .rail-col (top: calc(100% + 0.6rem); left:0), pero en v2 esa columna
   vive DENTRO del header en flexbox (display:flex; justify-content:
   space-between) -- con el riel de fases vacío (sin fase .current todavía,
   p. ej. durante el mulligan) termina en cualquier punto del header según
   cómo reparta el espacio, a veces pegado al borde derecho, y el panel se
   corta fuera de la pantalla (reportado con captura: "la carta se ve muy
   en la orilla y cortada"). En vez de depender de dónde caiga esa columna,
   position:fixed anclado directo al viewport -- siempre entra completo. */
#card-hover-preview:not(.floating) {
  position: fixed;
  top: 2.8rem;
  left: auto;
  right: 0.5rem;
  width: min(240px, 46vw);
}

/* La imagen (style.css: width:100%, sin alto máximo) se comía casi todo el
   panel a lo alto -- en una pantalla de 390-430px de alto no quedaba lugar
   para el texto, que terminaba necesitando scroll. Y ese scroll no se podía
   usar: mover el mouse hacia el texto significa salir de la carta, así que
   pointerleave cerraba el preview antes de poder leer nada (reportado
   jugando: "si trato de darle scroll dejo de seleccionar la carta").
   Achicar la imagen en vez de scrollear el texto -- el arte ya se ve en el
   tile chico, acá lo que importa es poder leer el efecto completo. Aplica
   tanto al modo flotante (touch, ver toggleCardPreview) como al anclado
   (mouse) -- el mismo problema de imagen gigante afecta a los dos. */
#card-hover-preview img {
  max-height: 20vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}
#card-hover-preview .chp-effect {
  font-size: clamp(0.68rem, 1.7vh, 0.82rem);
  line-height: 1.35;
}
#card-hover-preview .chp-body { padding-top: 0.3rem; }

/* --- efectos de partículas (play-ai-v2-fx.js) ---------------------------- */
.v2-fx-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 15; /* por debajo de .decision-overlay (50) y .card-hover-preview (1000), por encima de .combat-arrows (10) */
}

@keyframes v2-fx-pulso-destruccion {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 70%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--danger) 0%, transparent); }
}
.v2-fx-pulso-destruccion { animation: v2-fx-pulso-destruccion 0.7s ease-out; }

@keyframes v2-fx-pulso-impacto {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 70%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--warn) 0%, transparent); }
}
.v2-fx-pulso-impacto { animation: v2-fx-pulso-impacto 0.7s ease-out; }

@keyframes v2-fx-pulso-accion {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 6px var(--accent)); }
}
.v2-fx-pulso-accion { animation: v2-fx-pulso-accion 0.7s ease-in-out; }

/* --- aviso de portrait ---------------------------------------------------
   El layout de arriba asume horizontal (7+ zonas por jugador no entran
   apiladas en un celular angosto sin repetir el problema de scroll que
   toda esta pantalla existe para evitar) -- en portrait se oculta TODO el
   juego y se pide girar el teléfono, en vez de pelear un segundo layout
   vertical. */
.v2-portrait-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.v2-portrait-hint-box { display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.v2-portrait-hint-box .v2-portrait-icon { font-size: 2.6rem; animation: v2-portrait-spin 1.8s ease-in-out infinite; }
@keyframes v2-portrait-spin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}
@media (orientation: portrait) and (max-width: 900px) {
  .v2-portrait-hint { display: flex; }
  .v2-app, .v2-bug-box, .v2-fx-canvas, .combat-arrows, .accion-toast-container,
  #decision-overlay, #zone-viewer-overlay, #game-over-overlay { display: none; }
}