/*
 * La mesa de espera, compartida por todos los juegos.
 *
 * Estaba dentro de la hoja del Tute con las cuatro sillas colocadas a mano. Al traer a
 * Flota se generalizó: cada silla llega con su ángulo ya calculado en `--x` y `--y`, así
 * que la misma regla vale para dos sillas o para ocho. Con cuatro caen exactamente donde
 * caían, que era la condición para no cambiarle el aspecto al Tute.
 *
 * Los colores salen de variables para que cada juego ponga las suyas: el Tute sobre su
 * fieltro verde y Flota sobre su mar. Lo que no cambia entre juegos es la maquetación, que
 * es de lo que va este fichero.
 */
.mesa-espera {
    display: grid;
    /* Sillas, apuesta y acciones. Las sillas ceden altura: son las únicas que pueden. */
    grid-template-rows: minmax(0, 1fr) auto auto;
    height: 100vh;
    height: 100dvh;
    padding: var(--space-4) var(--space-3) max(var(--space-4), env(safe-area-inset-bottom));
    gap: var(--space-3);
    color: var(--mesa-texto, #eafff8);
}

/*
 * La rueda se mide por el hueco que le queda, no por el ancho de la pantalla.
 *
 * Midiéndola por el ancho salía siempre igual de grande hubiera sitio o no, así que en
 * cuanto la pantalla creció por abajo —la apuesta— el círculo se desbordaba de su fila y
 * los nombres caían encima del panel.
 *
 * Y con `container-type: size`, porque las sillas se miden en `cqmin`: la rueda encoge y
 * las caras, los nombres y las letras de bando encogen **con ella**. Sin eso, la rueda se
 * hacía pequeña y las sillas seguían midiendo lo mismo, que es exactamente cómo cuatro
 * nombres acaban unos encima de otros.
 */
.mesa-sillas {
    position: relative;
    align-self: center;
    justify-self: center;
    block-size: 100%;
    inline-size: auto;
    aspect-ratio: 1;
    max-inline-size: min(92vw, 26rem);
    min-block-size: 11rem;
    container-type: size;
}

/*
 * Cada silla, en su ángulo.
 *
 * El 50 % es el centro y el radio se aparta el ancho de media silla para que ninguna se
 * salga del círculo por el borde.
 */
.silla {
    position: absolute;
    left: calc(50% + var(--x) * (50% - 2.4rem));
    top: calc(50% + var(--y) * (50% - 2.4rem));
    translate: -50% -50%;
    display: grid;
    justify-items: center;
    gap: 2px;
    /* El suelo en rem no es decorativo: por debajo deja de poder tocarse con el dedo. */
    width: 4.4rem;
    width: clamp(4.4rem, 22cqmin, 5.5rem);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: default;
}

.silla[data-mover]:not([disabled]) { cursor: pointer; }

.silla-cara {
    display: grid;
    place-items: center;
    width: 2.6rem;
    width: clamp(2.6rem, 13.5cqmin, 3.4rem);
    height: 2.6rem;
    height: clamp(2.6rem, 13.5cqmin, 3.4rem);
    border-radius: 50%;
    background: rgb(255 255 255 / .14);
    border: 2px solid rgb(255 255 255 / .3);
    font-size: 1.05rem;
    font-size: clamp(1.05rem, 6cqmin, 1.4rem);
    font-weight: 800;
}

/* Tu bando en claro, el contrario apagado. Se ve sin leer nada. */
.silla.mio .silla-cara { border-color: var(--mesa-mio, #8ef5d2); background: rgb(142 245 210 / .22); }
.silla.vacia .silla-cara { border-style: dashed; opacity: .6; }

.silla-nombre {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .64rem;
    font-size: clamp(.64rem, 3cqmin, .72rem);
}

.silla-equipo {
    position: absolute;
    top: 1.7rem;
    top: clamp(1.7rem, 9cqmin, 2.3rem);
    inset-inline-end: .35rem;
    inset-inline-end: clamp(.35rem, 2.4cqmin, .6rem);
    display: grid;
    place-items: center;
    width: 1.05rem;
    width: clamp(1.05rem, 5.2cqmin, 1.3rem);
    height: 1.05rem;
    height: clamp(1.05rem, 5.2cqmin, 1.3rem);
    border-radius: 50%;
    background: var(--mesa-fondo, #0d3f38);
    border: 2px solid rgb(255 255 255 / .35);
    font-size: .56rem;
    font-size: clamp(.56rem, 2.8cqmin, .68rem);
    font-weight: 800;
}

.silla.mio .silla-equipo { border-color: var(--mesa-mio, #8ef5d2); color: var(--mesa-mio, #8ef5d2); }

.mesa-centro {
    position: absolute;
    inset: 28%;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 2px;
    border-radius: 50%;
    background: rgb(255 255 255 / .06);
}

.mesa-centro strong { font-size: clamp(.82rem, 5cqmin, 1.1rem); }
.mesa-centro small { color: rgb(234 255 248 / .65); font-size: clamp(.6rem, 3.2cqmin, .72rem); }

/* El bloque de rango en la silla: el nombre debajo, sin robarle sitio al del jugador. */
.silla .rango-bloque { gap: 2px; }
.silla .con-rango { padding: clamp(3px, 1.4cqmin, 5px); }
.silla .con-rango-nombre { font-size: clamp(.5rem, 2.6cqmin, .58rem); max-width: 100%; }
.silla .con-rango-num { box-shadow: 0 0 0 2px var(--mesa-fondo, #12564a); }

/* ── Lo de abajo: código, botones y reglas ────────────────────────────────────────────── */

.mesa-acciones {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
}

.mesa-codigo { margin: 0; font-size: .8rem; color: rgb(234 255 248 / .7); }
.mesa-codigo b { letter-spacing: .18em; font-size: 1.1rem; color: #eafff8; }
.mesa-pie { margin: 0; font-size: .78rem; color: rgb(234 255 248 / .6); }
.mesa-reglas { margin: 0; font-size: .74rem; color: rgb(234 255 248 / .5); text-align: center; }

.mesa-jugar {
    width: min(100%, 22rem);
    padding: var(--space-3) var(--space-5);
    border: 0;
    border-radius: 999px;
    background: var(--mesa-mio, #8ef5d2);
    color: var(--mesa-fondo, #0d3f38);
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgb(0 0 0 / .3);
}

.mesa-jugar:disabled { opacity: .55; cursor: not-allowed; }
.mesa-jugar:active:not(:disabled) { scale: .98; }

/*
 * Los tres de al lado, en una fila.
 *
 * Apilados se comían casi trescientos píxeles de alto, y ese alto sale de la rueda de
 * sillas, que es donde están las caras. En una fila siguen siendo tres dianas grandes
 * —un tercio del ancho cada una— y devuelven el sitio a la mesa.
 */
.mesa-secundarios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
    width: min(100%, 22rem);
}

.mesa-secundarios button {
    width: 100%;
    /* Alto de dedo: 2,75 rem es el mínimo con el que esto se acierta andando. */
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-1);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.mesa-invitar { border: 1px solid rgb(255 255 255 / .35); background: transparent; color: inherit; }
.mesa-ajustar { border: 0; background: rgb(255 255 255 / .1); color: rgb(234 255 248 / .85); }
.mesa-dejar { border: 0; background: transparent; color: rgb(234 255 248 / .55); }

/*
 * En pantallas cortas se aprieta lo que se lee; lo que se toca, no.
 *
 * 720 px de alto es un móvil pequeño de verdad. Ahí el pie de la apuesta y la línea de
 * reglas sobran antes que una cara: la cifra sigue en grande y el botón sigue diciendo
 * cuántas monedas se apuestan, que es lo que hay que entender.
 */
@media (max-height: 720px) {
    .mesa-espera .apuesta-mesa { padding: var(--space-2); }
    .mesa-espera .apuesta-pie { display: none; }
    .mesa-pie, .mesa-reglas { font-size: .7rem; }
    .mesa-codigo { font-size: .72rem; }
}

/*
 * Y en apaisado, o en un móvil muy corto, se cae lo primero que sobra: el rango bajo cada
 * silla. Es un adorno bonito —dice con quién te sientas— pero no es la cara ni el nombre,
 * y a esa altura la elección es esa o que las sillas se pisen.
 */
@media (max-height: 620px) {
    .mesa-sillas { min-block-size: 9rem; }
    .silla .con-rango-nombre { display: none; }
    .mesa-centro { display: none; }
}

/* ── La apuesta de la mesa ──────────────────────────────────────────────────────────────
 *
 * Lo único de la pantalla que cuesta dinero, así que va en su propia caja y con la cifra
 * en grande. Es la misma en el lobby genérico y encima del fieltro de una mesa, y ese es
 * justo el motivo de que los colores salgan de variables: la caja y la maquetación no
 * cambian entre juegos, el fondo sí.
 *
 * Vivía en la hoja del lobby, pensada para fondo claro, y al ponerla sobre el verde del
 * Tute salía una caja blanca con el texto ilegible.
 */
.apuesta-mesa {
    display: grid;
    justify-items: center;
    /*
     * Apretado a propósito. Todo lo que quite esta caja se lo lleva la rueda de sillas, y
     * ahí es donde están las caras. Lo que NO encoge es el botón de apostar: es lo único
     * que se toca.
     */
    gap: var(--space-1);
    width: min(100%, 26rem);
    justify-self: center;
    margin-block-end: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg, 1rem);
    background: var(--apuesta-fondo, var(--surface-2, rgb(0 0 0 / .04)));
    border: 1px solid var(--apuesta-borde, var(--border, rgb(0 0 0 / .08)));
    color: var(--apuesta-texto, inherit);
    text-align: center;
}

.apuesta-titulo {
    margin: 0;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .7;
}

.apuesta-cifra { margin: 0; line-height: 1; }
.apuesta-mesa .con-moneda.grande { font-size: clamp(1.7rem, 8vh, 2.6rem); }

.apuesta-pie,
.apuesta-quienes,
.apuesta-saldo { margin: 0; font-size: .78rem; text-wrap: balance; opacity: .8; }

.apuesta-saldo { opacity: .6; }

/* Se avisa de que no llega, pero el botón se queda: el «no» lo dice el servidor. */
.apuesta-mesa.sin-saldo .apuesta-saldo { color: #ffb4a8; opacity: 1; font-weight: 700; }

.apuesta-si {
    width: min(100%, 20rem);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: 999px;
    background: #ffd558;
    color: #4a3400;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgb(0 0 0 / .28);
}

.apuesta-si:disabled { opacity: .6; cursor: progress; }

/*
 * Los saltos: una fila que se desplaza de lado. Es la única tira con scroll de la
 * pantalla y es horizontal, así que no rompe la regla de no bajar nunca en el móvil.
 */
.apuesta-pasos {
    display: flex;
    gap: var(--space-1);
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    /* El borde se difumina en vez de cortarse: una ficha partida por la mitad parece un
       fallo de maquetación; desvanecida se lee como que hay más si se arrastra. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 .6rem, #000 calc(100% - .6rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 .6rem, #000 calc(100% - .6rem), transparent 100%);
}

.apuesta-pasos::-webkit-scrollbar { display: none; }

.apuesta-paso {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--apuesta-borde, var(--border, rgb(0 0 0 / .12)));
    background: transparent;
    color: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.apuesta-paso.puesto { background: #ffd558; border-color: #e8ae1e; color: #4a3400; }
.apuesta-paso .moneda { width: .9em; height: .9em; }

/*
 * Encima del fieltro de una mesa, el panel se oscurece.
 *
 * Es la misma caja: solo cambian las tres variables de color. Sin esto salía una tarjeta
 * blanca de lado a lado sobre el verde, con el texto claro encima y sin poder leerse.
 */
.mesa-espera .apuesta-mesa {
    --apuesta-fondo: rgb(0 0 0 / .22);
    --apuesta-borde: rgb(255 255 255 / .12);
    --apuesta-texto: var(--mesa-texto, #eafff8);

    margin-block-end: 0;
}

/* ── Flota sobre su mar ─────────────────────────────────────────────────────────────────
 *
 * La misma mesa que el Tute, con otros colores. Eso es todo lo que separa a los dos
 * juegos en esta pantalla, y es exactamente lo que se quería: que quien viene de uno
 * reconozca el otro sin tener que aprender nada.
 */
.flota-espera {
    --mesa-fondo: #06283d;
    --mesa-mio: #7cd4ff;
    --mesa-texto: #e6f4ff;

    background: radial-gradient(circle at 50% 30%, #0b3a56, #04121c 70%);
}

/* Los ajustes, encima de la mesa. El mismo marco que el del Tute. */
.flota-ajustes {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: var(--space-3);
    background: rgb(0 0 0 / .55);
}

.flota-panel {
    width: min(100%, 26rem);
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    padding: var(--space-4);
    border-radius: var(--radius-lg, 1rem);
    background: #0b2b40;
    color: #e6f4ff;
    box-shadow: 0 24px 60px rgb(0 0 0 / .45);
}

.flota-panel h3 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.flota-ajustes-nota { margin: 0 0 var(--space-2); font-size: .78rem; opacity: .75; }
.flota-panel .primary { width: 100%; margin-top: var(--space-3); }

/*
 * La ranura de Flota se come la pantalla entera mientras se espera, igual que la del
 * Tute: sin la cabecera del sitio encima no quedan doscientos píxeles para el tablero.
 */
[data-game-slot="flota"] { position: relative; }

/* ── La partida se come la pantalla ─────────────────────────────────────────────────────
 *
 * Con la cabecera del sitio y el encabezado de la sala encima, en un móvil quedaban
 * doscientos píxeles para la mesa. Jugando no hace falta nada de eso —el código de la
 * sala, el logotipo, «esperando jugadores»— así que se aparta.
 *
 * Vivía en la hoja del Tute aunque nunca fue suyo: la regla ya era genérica. Al traer a
 * Flota se mudó aquí, que es donde tenía que estar.
 */
body[data-jugando] .site-header,
body[data-jugando] .lobby-head,
body[data-jugando] .site-footer { display: none; }

body[data-jugando] { overflow: hidden; }

body[data-jugando] main,
body[data-jugando] .lobby {
    padding: 0;
    margin: 0;
    max-width: none;
}

/*
 * El chat no sale en la mesa de espera.
 *
 * Tapa el botón de «Jugar», que es lo que más se toca de toda la pantalla. En Flota
 * vuelve en cuanto empieza el combate, porque ahí sí sirve: coordinar el disparo con tu
 * bando es media partida. En el Tute no vuelve nunca — hablar con tu pareja durante la
 * mano está prohibido, así que un chat allí solo sirve para hacer trampas.
 */
body[data-jugando="tute"] .chat-launcher,
body[data-jugando="tute"] .chat-panel,
body[data-jugando="flota"][data-fase="espera"] .chat-launcher,
body[data-jugando="flota"][data-fase="espera"] .chat-panel,
body[data-jugando="flota"][data-fase="colocando"] .chat-launcher,
body[data-jugando="flota"][data-fase="colocando"] .chat-panel { display: none; }

/*
 * Mientras se espera, el combate no asoma.
 *
 * La ranura de Flota lleva dentro la mesa de espera **y** todo el tablero, que viene en la
 * plantilla de la página. Cada sección de combate se esconde sola según la fase, pero la
 * barra de turno no: se quedaba debajo de la espera añadiendo alto, y con ella volvía el
 * scroll a una pantalla que no puede tenerlo.
 */
body[data-jugando="flota"][data-fase="espera"] [data-game-slot="flota"] > *:not(.flota-espera):not(.flota-ajustes) {
    display: none;
}

/* Y al revés: empezada la partida, la mesa de espera no estorba. */
body[data-jugando="flota"]:not([data-fase="espera"]) .flota-espera { display: none; }

/* Los modos, en una fila de pastillas encima de las reglas. */
.flota-modos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.flota-modo {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-1);
    border: 1px solid rgb(255 255 255 / .2);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.flota-modo.puesto { background: var(--mesa-mio, #7cd4ff); border-color: var(--mesa-mio, #7cd4ff); color: #06283d; }
.flota-modo:disabled { opacity: .5; cursor: not-allowed; }

/* La silla vacía, cuando se puede sentar a alguien, es un botón de verdad. */
.silla.vacia[data-sentar] { cursor: pointer; }
.silla.vacia[data-sentar]:hover .silla-cara { border-style: solid; opacity: 1; }

/* ── Flota en el móvil: colocar y combatir ──────────────────────────────────────────────
 *
 * La pantalla de Flota se maquetó para un ordenador: la lista de barcos a un lado, el
 * tablero al otro, y todo cabía. En un móvil eso se apilaba, y el resultado era que la
 * lista de cinco barcos ocupaba la pantalla entera y el tablero —lo único que hay que
 * tocar— quedaba por debajo del pliegue, con scroll.
 *
 * Aquí manda la misma regla que en la mesa de cartas: **el tablero es lo grande y no hay
 * scroll**. La lista de barcos pasa a ser una tira horizontal, como las fichas de apuesta,
 * y los botones bajan a una barra fija. Solo en móvil: en pantallas anchas la maquetación
 * de siempre está bien y no se toca.
 */
body[data-jugando="flota"][data-fase="jugando"] [data-game-slot="flota"],
body[data-jugando="flota"][data-fase="colocando"] [data-game-slot="flota"] {
    /*
     * Dentro de Flota manda su paleta, y se dice con los tokens.
     *
     * El tablero, la barra de turno y los paneles ya estaban escritos contra `--surface`,
     * `--line` y `--text`. Redefinirlos aquí los vuelve marinos de golpe, sin tocar una
     * sola regla de `game.css` ni repetir sus estilos con otro color. Es la diferencia
     * entre cambiar el tema y volver a escribir la pantalla.
     */
    --bg: #04121c;
    --bg-deep: #020a11;
    --surface: #0d2f45;
    --surface-2: #0a2437;
    --line: #1d4c68;
    --text: #e6f4ff;
    --text-dim: #8fb6cd;

    --flota-fondo: #04121c;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    background: radial-gradient(circle at 50% 25%, #0b3a56, #04121c 75%);
    color: #e6f4ff;
    padding-bottom: env(safe-area-inset-bottom);
}

body[data-jugando="flota"] .placing,
body[data-jugando="flota"] .combat {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    min-height: 0;
    padding: var(--space-2);
}

/*
 * El tablero se mide por el hueco que queda, igual que la rueda de sillas.
 *
 * Y hay que decirlo en toda la cadena. El tablero llevaba `width: 100%`, que en una
 * columna de ancho automático no significa nada: el contenedor medía lo que midiera el
 * tablero y el tablero, lo que midiera el contenedor. Salía de cincuenta píxeles.
 *
 * Con el alto mandando y `aspect-ratio: 1`, el tablero es el cuadrado más grande que cabe
 * en el hueco, que es lo que se quería. `min-height: 0` en cada eslabón porque un elemento
 * de rejilla no encoge por debajo de su contenido si no se le dice.
 */
body[data-jugando="flota"] .placing-board-box,
body[data-jugando="flota"] .boards {
    display: grid;
    place-items: center;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

body[data-jugando="flota"] .board-wrap {
    display: grid;
    place-items: center;
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

/*
 * El tablero es el cuadrado más grande que cabe, y medido en unidades de pantalla.
 *
 * Estuvo con `min(100cqw, 100cqh)` y las unidades de contenedor, que es lo elegante. En un
 * iPhone de verdad no resolvía: el tablero salía de unos 450 de ancho en una pantalla de
 * 390, corrido hacia la derecha y con las casillas rectangulares. En Chrome se veía
 * perfecto, que es la peor manera de tener un fallo.
 *
 * Así que se mide contra la pantalla, descontando a mano lo que hay arriba y abajo. Es
 * menos bonito y funciona en todas partes, que aquí importa más: esto es la pantalla en la
 * que se juega.
 *
 *   combate  = barra de turno (4,75rem) + pestañas (2,75) + flotas (2,5) + huecos ≈ 12rem
 *   colocar  = barra de turno + ayuda + tira de barcos + botones          ≈ 15rem
 */
body[data-jugando="flota"] .boards,
body[data-jugando="flota"] .placing-board-box {
    display: grid;
    place-items: center;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

body[data-jugando="flota"] [data-board] {
    --lado: min(calc(100vw - var(--space-4)), calc(100vh - 12rem));
    --lado: min(calc(100vw - var(--space-4)), calc(100dvh - 12rem));

    inline-size: var(--lado);
    block-size: var(--lado);
    max-inline-size: 100%;
    /* Las filas se reparten el alto: sin esto miden lo que midan sus casillas y el
       cuadrado deja de cuadrar con lo que hay dentro. */
    grid-auto-rows: 1fr;
    margin: 0;
    max-width: none;
}

body[data-jugando="flota"][data-fase="colocando"] [data-board] {
    --lado: min(calc(100vw - var(--space-4)), calc(100vh - 15rem));
    --lado: min(calc(100vw - var(--space-4)), calc(100dvh - 15rem));
}

/*
 * La barra de turno no empuja el ancho de la página.
 *
 * Es una fila con el turno, el reloj, el sonar, las salvas y la racha: en un móvil suma
 * más de quinientos píxeles y, sin esto, estira la pantalla entera y todo lo demás con
 * ella. Lo que sobra se desplaza de lado dentro de la propia barra.
 */
body[data-jugando="flota"] .game-bar {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

@media (max-width: 780px) {
    /*
     * Y en el móvil se parte en dos filas.
     *
     * En una sola no cabe: el turno, el reloj, el sonar, las salvas y la racha suman más
     * de quinientos píxeles. Se desplazaba de lado, y el resultado era un botón de
     * «Escanear una zona» cortado por el borde — que no se lee como «hay más a la
     * derecha», se lee como que la pantalla está rota.
     *
     * El alto deja de ser fijo aquí. En escritorio esa altura fija es lo que impide que la
     * barra mueva los tableros a mitad de partida; en el móvil solo hay una fila de
     * recompensas debajo y no se mueve nada.
     */
    body[data-jugando="flota"] .game-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "turno reloj salir" "premios premios premios";
        gap: var(--space-1) var(--space-2);
        height: auto;
    }

    body[data-jugando="flota"] .turn-info { grid-area: turno; min-width: 0; }
    body[data-jugando="flota"] .turn-clock { grid-area: reloj; }
    body[data-jugando="flota"] .game-actions { grid-area: salir; }

    body[data-jugando="flota"] .game-bar-rewards {
        grid-area: premios;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body[data-jugando="flota"] .game-bar-rewards::-webkit-scrollbar { display: none; }
    body[data-jugando="flota"] .game-bar-rewards > * { flex: 0 0 auto; }
}

@media (max-width: 780px) {
    /*
     * La flota, en una tira que se desliza de lado.
     *
     * Cinco barcos en vertical son cinco filas grandes y toda la pantalla. En horizontal
     * caben tres y se arrastra para ver el resto, que es el mismo gesto que ya se hace en
     * las fichas de apuesta.
     */
    /*
     * El orden se dice a mano, y hace falta.
     *
     * `display: contents` sube los hijos del lateral a la rejilla, pero en el orden del
     * documento: ayuda, barcos, botones… y el tablero al final. Sin reordenar, el tablero
     * caía en la fila de los botones y la tira de barcos se estiraba para llenar el hueco
     * libre — cinco pastillas de media pantalla de alto.
     *
     * Con las filas fijadas y cada uno en la suya, el `1fr` se lo lleva el tablero, que es
     * lo que hay que tocar.
     */
    body[data-jugando="flota"] .placing {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        align-content: stretch;
    }

    body[data-jugando="flota"] .placing-side { display: contents; }
    body[data-jugando="flota"] .placing-side h2 { display: none; }

    body[data-jugando="flota"] .placing .hint { order: 1; }
    body[data-jugando="flota"] .ship-list { order: 2; }
    body[data-jugando="flota"] .placing-board-box { order: 3; }
    body[data-jugando="flota"] .placing-actions { order: 4; }

    body[data-jugando="flota"] .ship-list {
        display: flex;
        gap: var(--space-1);
        overflow-x: auto;
        margin: 0;
        padding: 0 0 2px;
        list-style: none;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 .6rem, #000 calc(100% - .6rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 .6rem, #000 calc(100% - .6rem), transparent 100%);
    }

    body[data-jugando="flota"] .ship-list::-webkit-scrollbar { display: none; }

    body[data-jugando="flota"] .ship-list > * {
        flex: 0 0 auto;
        /* Que no se estiren con la fila: son pastillas, no columnas. */
        align-self: start;
        min-height: 2.75rem;
        padding: var(--space-1) var(--space-2);
        border-radius: 999px;
        background: rgb(255 255 255 / .08);
        border: 1px solid rgb(255 255 255 / .16);
        font-size: .78rem;
        white-space: nowrap;
    }

    body[data-jugando="flota"] .placing-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-1);
    }

    /* «Listo para zarpar» ocupa la fila entera: es el que remata. */
    body[data-jugando="flota"] .placing-actions .primary { grid-column: 1 / -1; min-height: 3rem; }
    body[data-jugando="flota"] .placing-actions button { min-height: 2.75rem; }

    body[data-jugando="flota"] .placing-hint,
    body[data-jugando="flota"] .placing .hint { font-size: .74rem; margin: 0; text-wrap: balance; }

    /* Solo se ve un tablero a la vez, con sus pestañas: dos no caben y no hacen falta. */
    body[data-jugando="flota"] .board-wrap:not(.is-active) { display: none; }
    body[data-jugando="flota"] .board-wrap figcaption { display: none; }

    /*
     * El combate, con la misma idea: pestañas arriba, tablero en medio y lo demás abajo.
     *
     * Se salía a lo ancho porque los dos tableros seguían maquetados en fila —uno al lado
     * del otro— aunque solo se viera uno: el contenedor seguía midiendo para dos.
     */
    body[data-jugando="flota"] .combat {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
    }

    body[data-jugando="flota"] .board-tabs { order: 1; }
    body[data-jugando="flota"] .fleet-progress { order: 2; }
    body[data-jugando="flota"] .boards { order: 3; }
    body[data-jugando="flota"] .votes { order: 4; }

    body[data-jugando="flota"] .boards {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
    }

    body[data-jugando="flota"] .board-wrap { min-width: 0; width: 100%; }
}

/*
 * Y nada de aquí dentro estira la pantalla.
 *
 * La lista de barcos y la fila de botones se miden por su contenido, y con cinco nombres
 * largos —«Portaaviones»— eso son más de cuatrocientos píxeles. `min-width: 0` es lo que
 * permite que un elemento de rejilla encoja por debajo de su contenido; sin él, la
 * pantalla entera se ensancha para caberlo.
 */
body[data-jugando="flota"] .placing > *,
body[data-jugando="flota"] .combat > *,
body[data-jugando="flota"] .ship-list,
body[data-jugando="flota"] .placing-actions,
body[data-jugando="flota"] .board-tabs { min-width: 0; max-width: 100%; }

body[data-jugando="flota"] .board-tabs { overflow-x: auto; scrollbar-width: none; }
body[data-jugando="flota"] .board-tabs::-webkit-scrollbar { display: none; }

/*
 * Detalles de la pantalla de combate en el móvil.
 *
 * El marco del tablero se queda sin fondo: el hueco que sobra alrededor del cuadrado se
 * veía como un panel vacío, y no lo es — es aire.
 */
body[data-jugando="flota"] .board-wrap { background: none; border: 0; padding: 0; }

/*
 * Y la barra de turno cabe.
 *
 * Con el turno, el reloj, el sonar, las salvas y la racha suma más de lo que hay, y lo
 * que sobresalía era justo el botón de usar el sonar. Se aprieta el texto y se deja que
 * los paneles encojan; lo que no encoge es el alto de los botones, que se tocan.
 */
@media (max-width: 780px) {
    body[data-jugando="flota"] .game-bar {
        gap: var(--space-1);
        padding: var(--space-2);
    }

    body[data-jugando="flota"] .game-bar-rewards { gap: var(--space-1); min-width: 0; }
    body[data-jugando="flota"] .sonar-panel { padding: var(--space-1) var(--space-2); gap: var(--space-1); }
    body[data-jugando="flota"] .sonar-title { font-size: .62rem; }
    body[data-jugando="flota"] .sonar-panel .small { font-size: .7rem; padding: .3rem .6rem; min-height: 2.25rem; }
    body[data-jugando="flota"] .turn-label { font-size: .6rem; }
    body[data-jugando="flota"] .turn-info strong { font-size: .85rem; }
}

/* ── El final de la partida, en el móvil ────────────────────────────────────────────────
 *
 * Salía todo seguido —resultado, MVP, marcador, medallas y por último los botones— y en
 * un móvil eso son dos pantallas y media. Lo que quedaba abajo del todo era justo lo único
 * que hay que poder pulsar: otra partida o volver.
 *
 * Se le da la vuelta: el resultado arriba, los botones **anclados abajo** y en medio lo
 * que se lee, que es lo único que puede desplazarse. Así nunca hay que buscar la salida.
 */
body[data-jugando="flota"][data-fase="jugando"] .game-over,
body[data-jugando="flota"][data-fase="colocando"] .game-over {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    height: 100%;
    min-height: 0;
    padding: var(--space-3);
    text-align: center;
    /*
     * Centrado, y esto no es un detalle.
     *
     * Sin ello, el bloque del medio se estiraba de lado a lado y sus hijos —marcador y
     * medallas— se quedaban pegados a la izquierda: en un monitor ancho, media pantalla
     * de contenido y media de vacío. En el móvil no se notaba porque no sobra ancho.
     */
    justify-items: center;
}

body[data-jugando="flota"] .game-over h2 { margin: 0; font-size: clamp(1.3rem, 7vw, 1.8rem); }
body[data-jugando="flota"] .game-over > p { margin: 0; font-size: .82rem; color: var(--text-dim); }

/* Lo ganado, en grande y junto: es lo que se busca al acabar. */
.premio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.premio-xp {
    padding: .25rem .75rem;
    border-radius: 999px;
    background: rgb(124 212 255 / .18);
    color: #7cd4ff;
    font-weight: 800;
    font-size: 1rem;
}

.premio-monedas {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-weight: 800;
    font-size: 1rem;
    color: #ffd558;
}

.premio-monedas .moneda { width: 1.1em; height: 1.1em; }

/*
 * El bloque del medio es lo único que se desplaza, y dentro de sí mismo.
 *
 * MVP, marcador y medallas pueden ser largos con ocho jugadores. Que se desplace **esta
 * caja** y no la página es lo que mantiene los botones donde están.
 */
.final-cuerpo {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    justify-items: center;
    min-height: 0;
    min-width: 0;
    /*
     * Un ancho de lectura, no el de la pantalla.
     *
     * Un marcador de ocho jugadores estirado en un monitor de 27 pulgadas deja el nombre
     * en un extremo y los puntos en el otro, y hay que barrer con la vista para leer una
     * línea. Con tope, se lee de un vistazo aquí y en el móvil.
     */
    width: min(34rem, 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.final-cuerpo > * { width: 100%; }

body[data-jugando="flota"] .final-cuerpo > * { margin: 0; min-width: 0; }

/* Las medallas, en una tira que se desliza: apiladas se comían el resto. */
body[data-jugando="flota"] .medal-list {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    padding-bottom: 2px;
    margin: 0;
    list-style: none;
    scrollbar-width: none;
}

body[data-jugando="flota"] .medal-list::-webkit-scrollbar { display: none; }
body[data-jugando="flota"] .medal-list > * { flex: 0 0 auto; max-width: 80vw; }
body[data-jugando="flota"] .medals h3 { font-size: .68rem; margin: 0 0 var(--space-1); }

/* Y los botones, anclados abajo. Nunca hay que ir a buscarlos. */
.final-acciones {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    padding-bottom: env(safe-area-inset-bottom);
}

.final-acciones .primary {
    width: min(100%, 22rem);
    min-height: 3rem;
    font-size: 1rem;
    font-weight: 800;
}

.final-acciones .ghost { font-size: .85rem; }
.final-aviso { font-size: .74rem; color: var(--text-dim); }

/*
 * Y en una pantalla ancha, el final se comporta como en una pantalla ancha.
 *
 * Las medallas van en tira que se desliza porque en un móvil apiladas se comen el resto;
 * en un monitor sobra sitio, así que se reparten en filas y no se corta ninguna. Y el
 * bloque entero se centra en vertical en lugar de quedarse arriba con medio monitor vacío
 * debajo.
 */
@media (min-width: 781px) {
    body[data-jugando="flota"] .game-over { align-content: center; }

    body[data-jugando="flota"] .medal-list {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }

    body[data-jugando="flota"] .medal-list > * { max-width: 100%; }
}