/* ==========================================================================
   MAGIC COMMANDER — estilos de "JUGAR"
   ==========================================================================

   ESTE ARCHIVO SE PUEDE EDITAR EN CALIENTE.
   Ábrelo con el Bloc de notas, cambia lo que quieras, guarda y pulsa F5 en
   el navegador. NO hace falta reiniciar el servidor ni tocar nada de Python.

   El marco de tres columnas, las tarjetas y los campos vienen de
   `formulario.css`; los botones, distintivos y el estado vacío, de
   `componentes.css`. Aquí abajo sólo está lo propio de esta pestaña.
   ========================================================================== */

/* ==========================================================================
   ELEGIR CON QUÉ MAZO JUGAR
   --------------------------------------------------------------------------
   Antes era un desplegable con una línea larguísima por mazo. Ahora cada mazo
   es una fila que se puede pulsar entera, con el mismo aire que las filas de
   "Mis Mazos": el nombre, su comandante, cuántas cartas tiene y de dónde
   salió. Sigue siendo el mismo campo `deck_id` del formulario de siempre.
   ========================================================================== */
.mazos-elegir { display: grid; gap: 10px; }

.mazo-opcion {
  display: block; position: relative; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 12px;
  padding: 14px 16px 14px 46px;
  background: rgba(255, 255, 255, .025);
  transition: border-color var(--transicion), background var(--transicion);
}
.mazo-opcion:hover { border-color: var(--borde-brillo); background: rgba(255, 255, 255, .05); }

/* El redondel del formulario, a la izquierda y centrado con la primera línea. */
.mazo-opcion input[type=radio] {
  position: absolute; left: 16px; top: 17px; margin: 0;
  width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer;
}

/* El mazo elegido se enciende en dorado, para que se vea de un vistazo cuál
   va a jugarse al pulsar el botón. */
.mazo-opcion:has(input:checked) {
  border-color: var(--acento-oscuro); background: rgba(217, 164, 65, .08);
}

.mazo-opcion-nombre { display: block; font-size: .95rem; font-weight: 600; color: var(--texto); }
.mazo-opcion-datos {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 5px; font-size: .84rem; color: var(--texto-suave);
}
.mazo-opcion-datos .sep { color: var(--texto-tenue); }

/* ==========================================================================
   LO QUE EL MOTOR TODAVÍA NO HACE
   --------------------------------------------------------------------------
   Va aparte y en su propia caja a propósito: es una limitación real del
   motor, no un detalle de relleno, y el usuario tiene que verla ANTES de
   empezar la partida, no descubrirla a mitad.
   ========================================================================== */
.aviso-alcance {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--borde-brillo); border-left: 3px solid var(--acento);
  border-radius: 12px; padding: 14px 16px;
  background: rgba(255, 255, 255, .025);
}
.aviso-alcance .icono { font-size: 1rem; line-height: 1.4; }
.aviso-alcance p { margin: 0; font-size: .86rem; color: var(--texto-suave); }
.aviso-alcance strong { color: var(--texto); }

/* ==========================================================================
   LAS PANTALLAS DE ANTES DEL TAPETE (26/09/2026)
   --------------------------------------------------------------------------
   Crear o unirse a una mesa, y elegir si juegas o miras. Hasta ahora estas
   dos usaban el esqueleto claro antiguo y ninguna de sus clases tenía estilo
   en ninguna hoja: por eso se veían en blanco, con los botones de fábrica
   del navegador y el título repetido.

   Aquí abajo NO hay ningún componente nuevo inventado: el marco, las
   tarjetas, los campos y los botones son los de `formulario.css` y
   `componentes.css`, los mismos de Generar mazo y el Constructor. Lo único
   propio es cómo se reparten las dos tarjetas de la entrada y el campo del
   código, que pide verse como un código y no como un campo de texto normal.
   ========================================================================== */

/* Las dos puertas de entrada, una al lado de la otra. En una pantalla
   estrecha se ponen una debajo de otra solas. */
.mesa-entrada {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px; align-items: stretch;
}

/* La tarjeta ya es una `.seccion`; esto solo hace que las dos tengan la misma
   altura y que sus botones queden alineados abajo aunque los textos midan
   distinto. */
.mesa-opcion { display: flex; flex-direction: column; margin-bottom: 0; }
.mesa-opcion-texto {
  margin: 0 0 18px; color: var(--texto-suave); font-size: .9rem; line-height: 1.55;
}
.mesa-opcion-pie { margin-top: auto; padding-top: 4px; display: flex; justify-content: center; }
.mesa-opcion .campo { margin-bottom: 18px; }

/* El código de la mesa son seis letras que se dictan en voz alta o se pegan.
   Se escribe centrado, espaciado y en mayúsculas para poder leerlo de un
   vistazo y cantarlo sin equivocarse. */
.mesa-codigo-campo {
  text-align: center; text-transform: uppercase;
  font-size: 1.5rem; font-weight: 800; letter-spacing: .38em;
  padding-left: .38em;            /* compensa el hueco que el espaciado deja a la derecha */
  font-variant-numeric: tabular-nums;
}
.mesa-codigo-campo::placeholder {
  font-weight: 600; letter-spacing: .38em; text-transform: uppercase;
}

/* La nota del final: es una limitación real (las mesas viven en este
   ordenador), no decoración, así que se lee pero no grita. */
.mesa-nota {
  margin: 18px 0 0; text-align: center;
  font-size: .8rem; color: var(--texto-tenue);
}

/* ---------- elegir si juegas o miras ---------- */
.mesa-rol-texto {
  margin: 0 0 16px; color: var(--texto-suave); font-size: .9rem; line-height: 1.55;
}
.mesa-rol-texto:last-child { margin-bottom: 0; }

/* Cuando ya no quedan sitios: se dice antes del botón, y el botón se queda
   apagado en vez de desaparecer, para que se entienda por qué no se puede. */
.mesa-llena {
  margin: 14px 0 0; padding: 10px 14px;
  border: 1px solid var(--acento-oscuro); border-radius: 10px;
  background: rgba(217, 164, 65, .08);
  font-size: .84rem; color: var(--texto-suave);
}
.mesa-entrada + .mesa-nota { margin-top: 20px; }
button.boton-principal:disabled {
  filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none;
  box-shadow: none;
}

/* El botón de cada tarjeta necesita aire POR ARRIBA. `.con-aire` solo pone
   margen abajo, que dentro de una tarjeta además sobra: el relleno de la
   propia tarjeta ya lo da. Así el botón no queda pegado a la lista de mazos
   ni al texto que tenga encima. */
.seccion > .zona-boton.con-aire:last-child { margin-top: 26px; margin-bottom: 2px; }