/*
 * La mesa de Tute.
 *
 * Dos reglas mandan sobre todas las demás y explican casi cada decisión de aquí:
 *
 * 1. **La partida ocupa la pantalla entera.** Jugando no hacen falta ni el logotipo, ni
 *    el código de la sala, ni «esperando tripulación»: con todo eso encima, en un móvil
 *    quedaban doscientos píxeles para la mesa y no se distinguía un caballo de un rey.
 * 2. **Nunca hay scroll.** Si algo no cabe, se encoge la carta; jamás crece la mesa. Por
 *    eso casi todas las medidas salen de `--carta-h`, que calcula el módulo con el sitio
 *    que hay de verdad. Poner aquí un alto en píxeles sería reabrir el scroll por la
 *    puerta de atrás.
 */

/* ─── El marco de la página se aparta ──────────────────────────────────────── */

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;
}

/*
 * En el Tute, el chat no está.
 *
 * Se probó abajo a la derecha y tapaba la última carta jugando y el botón de «Jugar»
 * esperando, que son las dos cosas que más se tocan en toda la pantalla; subirlo lo puso
 * encima del tapete. En una mesa donde además el chat con la pareja está prohibido
 * durante la mano, no compensa: se quita hasta que tenga un sitio pensado —los emotes de
 * la Fase 9, seguramente, que es lo que de verdad hace falta en una mesa de cartas—.
 */
body[data-jugando="tute"] .chat-launcher,
body[data-jugando="tute"] .chat-panel { display: none; }

/* ─── Tacto de aplicación, no de página ────────────────────────────────────── */

/*
 * Lo que separa una web de una aplicación no son las animaciones: es que al tocar no
 * pase nada raro. Sin esto, un toque en una carta enciende el rectángulo gris de Android,
 * un toque doble hace zoom y el arrastre rebota la pantalla.
 */
.tute,
.tute button,
.tute a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.tute {
    overscroll-behavior: contain;
    user-select: none;
    -webkit-user-select: none;
}

/* Respuesta inmediata al dedo, antes de que llegue nada del servidor. */
.tute button:active { scale: .97; }
.tute .tute-carta:active { scale: 1; }

.tute-jugar:active,
.tute-invitar:active,

/*
 * Lo que se mueve, avisado.
 *
 * `will-change` en lo que de verdad se anima —y solo en eso—: las cartas de la mano y las
 * de la mesa. Puesto en todo, el navegador reserva capas para nada y va peor.
 */
.tute-carta,
.tute-jugada { will-change: transform; }

/* ─── La mesa ──────────────────────────────────────────────────────────────── */

.tute {
    --tute-oros: #d99400;
    --tute-copas: #c8384a;
    --tute-espadas: #2f6fb5;
    --tute-bastos: #2f8f5b;

    --carta-w: calc(var(--carta-h) * 0.66);
    /*
     * Las cartas de la mesa van algo más pequeñas que las de la mano, y no es capricho:
     * en la mano hay que reconocerlas de un vistazo entre diez solapadas, y en la mesa
     * solo hay cuatro y con sitio de sobra. Bajarlas un 15 % le da aire a la cruz y hace
     * que el abanico —que es lo que se toca— siga siendo lo más grande de la pantalla.
     */
    --mesa-h: calc(var(--carta-h) * 0.85);
    --mesa-w: calc(var(--mesa-h) * 0.66);
    /*
     * Lo que se ve de cada carta en el abanico.
     *
     * Lo calcula el módulo una vez por tamaño de ventana, para una mano llena, y no se
     * vuelve a tocar: si cambiara con las cartas que quedan, el abanico se encogería y se
     * estiraría en cada jugada. El valor de aquí es solo el respaldo de antes de la
     * primera medida.
     */
    --canto: calc(var(--carta-h) * 0.26);
    --carta-h: 5rem;

    position: fixed;
    inset: 0;
    z-index: 30;
    display: block;
}

.tute-mesa {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    /* `dvh` y no `vh`: en el móvil la barra del navegador aparece y desaparece, y con
       `vh` la mesa se sale por abajo justo cuando vas a tocar una carta. */
    height: 100dvh;
    overflow: hidden;
    position: relative;
    /* El tapete. Verde de bar, que es de donde viene el juego. */
    background:
        radial-gradient(ellipse 120% 80% at 50% 42%, #1f7a63, #12564a 60%, #0d3f38);
    color: #eafff8;
    font-family: var(--font-ui);
}

/* ─── Barra de arriba ──────────────────────────────────────────────────────── */

.tute-barra {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto 2.5rem;
    align-items: center;
    gap: var(--space-2);
    padding: max(var(--space-2), env(safe-area-inset-top)) var(--space-3) var(--space-2);
    background: rgb(0 0 0 / .18);
}

.tute-salir {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    background: rgb(255 255 255 / .1);
    /* Ahora es un `<button>` y no un enlace: sin esto hereda la tipografía del navegador. */
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.tute-turno {
    text-align: center;
    font-weight: 700;
    font-size: clamp(.85rem, 3.6vw, 1.05rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cuando toca a uno, se nota sin tener que leer. */
.tute-mesa.me-toca .tute-turno { color: #8ef5d2; }

.tute-reloj {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: .95rem;
    /* El aro se vacía con el turno. Es un degradado cónico y no un `<svg>` animado:
       una propiedad que cambia, sin un solo nodo nuevo por fotograma. */
    background:
        conic-gradient(#8ef5d2 calc(var(--queda, 1) * 360deg), rgb(255 255 255 / .12) 0);
    box-shadow: inset 0 0 0 3px #12564a;
}

.tute-reloj.apura { background: conic-gradient(#ff8b6b calc(var(--queda, 1) * 360deg), rgb(255 255 255 / .12) 0); }

/* ─── Tapete ───────────────────────────────────────────────────────────────── */

/*
 * El tapete, repartido en zonas que no se pisan.
 *
 * Con los mazos colocados en absoluto sobre el tapete, la carta que echaba el compañero
 * caía encima de sus dorsos y la mía por debajo del abanico. Con una rejilla, cada cosa
 * tiene su sitio reservado y el cruce **no puede** ocurrir: la cruz recibe el hueco que
 * sobra y se centra en él.
 */
.tute-tapete {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        ".     norte .   "
        "oeste cruz  este";
    align-items: center;
    justify-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
}

.tute-mazo {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    opacity: .8;
    transition: opacity var(--transition);
    position: relative;
}

.tute-mazo.le-toca { opacity: 1; }

.tute-mazo--norte { grid-area: norte; flex-direction: column-reverse; }
.tute-mazo--oeste { grid-area: oeste; }
.tute-mazo--este { grid-area: este; flex-direction: row-reverse; }

.tute-nombre {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px var(--space-2);
    border-radius: var(--radius-1);
    font-size: .68rem;
    background: rgb(0 0 0 / .28);
}

.tute-mazo.le-toca .tute-nombre {
    background: #8ef5d2;
    color: #0d3f38;
    font-weight: 700;
}

/*
 * Los nombres de los lados van pegados al borde de dentro, no centrados sobre su mazo.
 *
 * Centrados se salían de la pantalla por la izquierda y por la derecha: el mazo está en
 * el borde y la etiqueta es más ancha que él. Pegados hacia dentro, crecen hacia el
 * tapete, que es donde sobra sitio.
 */
.tute-mazo--oeste .tute-nombre,
.tute-mazo--este .tute-nombre {
    position: absolute;
    top: -1.25rem;
    max-width: 5.5rem;
    font-size: .6rem;
}

.tute-mazo--oeste .tute-nombre { left: 0; }
.tute-mazo--este .tute-nombre { right: 0; }

.tute-dorsos { display: flex; }

.tute-dorsos .carta-svg {
    height: calc(var(--carta-h) * 0.5);
    width: auto;
    border-radius: 3px;
}

/*
 * De frente se apilan a lo ancho; de lado, a lo alto y más pequeños.
 *
 * Los de los lados iban girados noventa grados, que se ve muy bien y **se salía de la
 * pantalla**: girar no cambia la caja que ocupa el elemento, así que una carta de pie
 * seguía reservando su altura a lo ancho. Se quedan de pie y pequeños: se entiende igual
 * —son cartas boca abajo— y caben en un móvil estrecho.
 */
.tute-mazo--norte .tute-dorsos .carta-svg { margin-inline-start: calc(var(--carta-h) * -0.2); }
.tute-mazo--norte .tute-dorsos .carta-svg:first-child { margin-inline-start: 0; }

.tute-mazo--oeste .tute-dorsos,
.tute-mazo--este .tute-dorsos { flex-direction: column; }

.tute-mazo--oeste .tute-dorsos .carta-svg,
.tute-mazo--este .tute-dorsos .carta-svg {
    height: calc(var(--carta-h) * 0.4);
    margin-block-start: calc(var(--carta-h) * -0.26);
}

.tute-mazo--oeste .tute-dorsos .carta-svg:first-child,
.tute-mazo--este .tute-dorsos .carta-svg:first-child { margin-block-start: 0; }

/* ─── La cruz: las cuatro cartas y la muestra en el centro ─────────────────── */

.tute-cruz {
    grid-area: cruz;
    position: relative;
    width: calc(var(--mesa-w) * 3.3);
    height: calc(var(--mesa-h) * 3.3);
    max-width: 100%;
    max-height: 100%;
}

/*
 * La muestra, en el centro y por debajo.
 *
 * Es la carta que más se mira en toda la mano —«¿qué pintaba?»— y tenerla arriba en un
 * marcador obligaba a apartar la vista de la mesa cada dos por tres. Va atenuada para
 * que no se confunda ni un segundo con una carta jugada.
 */
.tute-muestra {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mesa-w);
    height: var(--mesa-h);
    margin-inline-start: calc(var(--mesa-w) / -2);
    margin-block-start: calc(var(--mesa-h) / -2);
    z-index: 0;
    opacity: .8;
}

.tute-muestra .carta-svg {
    height: var(--mesa-h);
    width: var(--mesa-w);
    border-radius: 5px;
    box-shadow: 0 0 0 2px rgb(255 255 255 / .35), 0 6px 16px rgb(0 0 0 / .4);
    filter: saturate(.75);
}

.tute-baza {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/*
 * Cada carta jugada ocupa **exactamente una carta**, centrada en la cruz.
 *
 * Antes ocupaba la cruz entera y se desplazaba un 100 % de su propio tamaño, o sea tres
 * cartas: la mía acababa por debajo del abanico y la del compañero detrás de sus dorsos.
 * Con la caja del tamaño de la carta, «un 100 %» quiere decir «una carta», que es lo que
 * hace falta para que las cuatro formen una cruz que se toca.
 */
.tute-jugada {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mesa-w);
    height: var(--mesa-h);
    margin-inline-start: calc(var(--mesa-w) / -2);
    margin-block-start: calc(var(--mesa-h) / -2);
    pointer-events: none;
    /* La transición vive aquí y no en la clase de recogida: declarada solo al recoger,
       el navegador no tiene estado anterior desde el que interpolar y la carta salta al
       sitio en vez de irse. */
    transition: translate 520ms cubic-bezier(.4, 0, .2, 1), opacity 520ms ease-in;
}

.tute-jugada .carta-svg {
    height: var(--mesa-h);
    width: var(--mesa-w);
    border-radius: 5px;
    box-shadow: 0 6px 16px rgb(0 0 0 / .45);
    animation: tute-echar 280ms cubic-bezier(.2, .8, .3, 1);
}

/*
 * Cada uno echa desde su lado: una carta justa de separación, en cruz alrededor de la
 * muestra.
 *
 * Un poco más de una carta: se separan sin llegar a tocarse. Con el 100 % justo quedaban
 * pegadas y la cruz parecía un bloque; con un 96 % —que fue el primer intento— la de
 * arriba y la de abajo pisaban la muestra, y eso se veía. Con aire de por medio se lee de
 * un vistazo quién ha echado qué.
 */
.tute-jugada--sur   { translate: 0 108%; }
.tute-jugada--norte { translate: 0 -108%; }
.tute-jugada--oeste { translate: -110% 0; }
.tute-jugada--este  { translate: 110% 0; }

/* La que gana se marca antes de que se recoja todo. */
.tute-jugada.gana .carta-svg {
    box-shadow: 0 0 0 3px #8ef5d2, 0 6px 18px rgb(0 0 0 / .5);
    z-index: 2;
}

/* Recogida: las cuatro se van hacia quien se la ha llevado. */
.tute-baza.recogiendo .tute-jugada { opacity: .05; }

.tute-baza.recogiendo[data-hacia="sur"] .tute-jugada   { translate: 0 320%; }
.tute-baza.recogiendo[data-hacia="norte"] .tute-jugada { translate: 0 -320%; }
.tute-baza.recogiendo[data-hacia="oeste"] .tute-jugada { translate: -360% 0; }
.tute-baza.recogiendo[data-hacia="este"] .tute-jugada  { translate: 360% 0; }

@keyframes tute-echar {
    from { opacity: 0; scale: .78; }
    to   { opacity: 1; scale: 1; }
}

/* ─── Pie: marcador y mano ─────────────────────────────────────────────────── */

.tute-pie {
    display: grid;
    justify-items: center;
    padding-block-end: max(var(--space-2), env(safe-area-inset-bottom));
}

/*
 * La mano: un marco quieto y la tira de cartas dentro.
 *
 * Las dos capas quedaron de cuando la tira se deslizaba dentro del marco como un carrusel.
 * Aquello se quitó —las diez cartas caben siempre porque se solapan, así que no había a
 * dónde deslizarse— pero la separación se queda: el marco reserva el alto de la carta
 * levantada y la tira solo coloca las cartas, y eso es más fácil de leer que un elemento
 * haciendo las dos cosas.
 */
.tute-mano {
    position: relative;   /* para que la carta que se va pueda salirse del flujo */
    max-width: 100%;
    /* Sitio para que la carta levantada no se salga por arriba del pie. */
    min-height: calc(var(--carta-h) * 1.3);
    padding-block-start: calc(var(--carta-h) * 0.3);
}

.tute-mano-tira {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/*
 * Deslizándose, el marco recorta y la tira deja de centrarse: la centra Swiper, y con las
 * dos cosas a la vez el abanico se quedaba pegado a un lado.
 */
/*
 * El gesto sobre una carta es de la carta, no del navegador.
 *
 * `touch-action: none` le dice que no se quede esperando a ver si esto era un desliz de la
 * página —no lo es, la página no se desplaza— para decidir si manda los eventos. Esa duda
 * son los 100 ms que convierten un arrastre en un tirón.
 */
.tute-mano .tute-carta { touch-action: none; }

/* Arrastrando: la carta va por encima de todo y sin transición propia, que la mueve GSAP
   y dos cosas moviendo lo mismo se pelean. */
.tute-carta.arrastrando {
    z-index: 40;
    transition: none;
    cursor: grabbing;
}

/* Ya vale: soltándola aquí, sale. Se dice con luz, que se ve sin mirar. */
.tute-carta.a-punto {
    filter: drop-shadow(0 0 14px rgb(142 245 210 / .85)) brightness(1.08);
}

/*
 * El abanico.
 *
 * Las cartas se solapan porque diez no caben de otra forma en 360 px, y de cada una se
 * ve una tira: `--canto`. La esquina de la baraja española lleva el número pero **no el
 * palo**, así que sobre esa tira va una banda de color con el número en grande y el
 * símbolo del palo. Con solo el color, quien no distinga el rojo del verde se queda
 * igual de perdido; con el símbolo, no.
 */
.tute-carta {
    position: relative;
    flex: 0 0 auto;
    width: var(--canto);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    /*
     * Dos curvas distintas y a propósito.
     *
     * Al levantar la carta, una con un punto de rebote: es la diferencia entre «se mueve»
     * y «responde». Al recolocarse el abanico, una que sale rápido y frena al llegar, que
     * es como se cierra un hueco de verdad. Con la misma para las dos, o el abanico rebota
     * o la carta se levanta sin gracia.
     */
    transition:
        translate 220ms cubic-bezier(.22, 1.15, .36, 1),
        width 340ms cubic-bezier(.32, 0, .3, 1),
        filter 180ms;
}

/*
 * El color del palo, por si alguna vez hace falta: lo usan las de alto contraste.
 *
 * Aquí vivía «el canto»: una banda de color con el número y el palo, dibujada encima de
 * la tira que se ve de cada carta solapada. Servía para leer la mano de un vistazo, y se
 * ha quitado porque ahora **el palo se dibuja dentro de la propia carta**, bajo el número
 * de su esquina. Una capa encima tapaba el dibujo de la baraja, que es lo que se fue a
 * buscar a Wikimedia.
 */
.tute-carta[data-palo="O"] { --canto-color: var(--tute-oros); }
.tute-carta[data-palo="C"] { --canto-color: var(--tute-copas); }
.tute-carta[data-palo="E"] { --canto-color: var(--tute-espadas); }
.tute-carta[data-palo="B"] { --canto-color: var(--tute-bastos); }

/* La última del abanico se ve entera. La marca el módulo, no `:last-child`: la carta que
   se está yendo sigue siendo el último hijo un instante más y hacía rebotar el abanico. */
.tute-carta.ultima { width: var(--carta-w); }

/*
 * El ancho de cada carta no cambia en toda la mano.
 *
 * Aquí hubo un modo «suelta» que separaba las cartas cuando quedaban pocas. Se quitó: el
 * abanico cambiaba de anchura con cada jugada y se veía respirar. Lo que resuelve el
 * problema de fondo —ver la carta entera— es levantarla, no separarlas.
 */

.tute-carta .carta-svg {
    height: var(--carta-h);
    width: var(--carta-w);
    display: block;
    border-radius: 5px;
    box-shadow: -2px 2px 6px rgb(0 0 0 / .45);
}

/*
 * Aquí había una banda de color por carta con el número y el palo.
 *
 * Servía para saber qué había en la mano cuando las cartas se tapaban unas a otras, y
 * dejó de hacer falta en cuanto la carta se levanta al pasar por encima o al primer
 * toque: entonces se ve entera, que es mejor que cualquier resumen. Además tapaba el
 * dibujo, que es justo lo que se ha ido a buscar a una baraja de verdad.
 *
 * Lo que se ve de cada carta es su propia esquina, con su número y su pinta.
 */

/*
 * Levantar una carta la enseña entera.
 *
 * Es lo que resuelve el problema de fondo del abanico: solapadas se ve el canto de cada
 * una, pero no la carta. Al levantarla sube por encima de las demás y se ve completa —
 * con ratón basta con pasar por encima; con el dedo, el primer toque.
 */
.tute-carta:focus-visible,
.tute-carta.elegida {
    translate: 0 -20%;
    z-index: 3;
}

.tute-carta.elegida .carta-svg { box-shadow: 0 8px 18px rgb(0 0 0 / .5); }

.tute-carta.jugable.elegida .carta-svg {
    box-shadow: 0 0 0 3px #8ef5d2, 0 8px 18px rgb(0 0 0 / .5);
}

@media (hover: hover) and (pointer: fine) {
    .tute-carta:hover {
        translate: 0 -20%;
        z-index: 3;
    }

    .tute-carta:hover .carta-svg { box-shadow: 0 8px 18px rgb(0 0 0 / .5); }
    .tute-carta.jugable:hover .carta-svg { box-shadow: 0 0 0 3px #8ef5d2, 0 8px 18px rgb(0 0 0 / .5); }
}

/*
 * Con el dedo, la carta levantada avisa de que el siguiente toque la echa. Sin el aviso,
 * los dos toques se sienten como un fallo del primero.
 */
.tute[data-toque="dedo"] .tute-carta.elegida.jugable::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -0.5rem;
    height: 3px;
    border-radius: 3px;
    background: #8ef5d2;
}

.tute[data-toque="dedo"] .tute-carta.elegida { translate: 0 -28%; }

/*
 * Las que no se pueden echar se atenúan y no responden.
 *
 * Es lo que hace el Tute accesible a quien no domina el arrastre: en vez de probar y que
 * te lo rechacen, se ve. En modo estricto esta clase no se pone — la ayuda se apaga, la
 * validación del servidor no.
 */
.tute-carta.vetada {
    cursor: not-allowed;
}

/*
 * Se atenúa **el dibujo**, no el canto.
 *
 * El canto es lo único que se lee de una carta tapada, y apagarlo junto con el resto
 * dejaba la mano ilegible justo cuando más falta hace mirarla: cuando te toca y estás
 * decidiendo. Que no se pueda jugar se ve igual —el dibujo apagado y sin brillo— y lo que
 * llevas se sigue leyendo.
 */
.tute-carta.vetada .carta-svg { filter: grayscale(.6) brightness(.78); }

/* Reparto y descarte. */
.tute-carta.entra {
    animation: tute-repartir 400ms cubic-bezier(.2, .8, .3, 1) backwards;
    animation-delay: var(--retardo, 0ms);
}

.tute-carta.se-va {
    /*
     * El hueco se cierra con la misma curva con la que las demás se recolocan, y la carta
     * sale volando por encima sin aplastarse: va en absoluto dentro de su propio botón,
     * que es lo que le permite al botón encogerse a cero.
     */
    width: 0 !important;
    z-index: 4;
    pointer-events: none;
    overflow: visible;
}

.tute-carta.se-va .carta-svg {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    animation: tute-soltar 340ms cubic-bezier(.32, 0, .3, 1) forwards;
}

@keyframes tute-repartir {
    from { opacity: 0; translate: 0 90%; rotate: -10deg; }
    to   { opacity: 1; translate: 0 0; rotate: 0deg; }
}

/* Sube hacia la mesa, que es a donde va de verdad. */
@keyframes tute-soltar {
    from { opacity: 1; translate: 0 0; scale: 1; }
    to   { opacity: 0; translate: 0 -120%; scale: .88; }
}

.tute-carta.niega { animation: tute-niega 300ms; }

@keyframes tute-niega {
    0%, 100% { translate: 0 0; }
    25%      { translate: -4px 0; }
    75%      { translate: 4px 0; }
}

/* ─── Cante ────────────────────────────────────────────────────────────────── */

.tute-cante {
    position: absolute;
    inset-inline: var(--space-3);
    z-index: 15;
    display: none;
    gap: var(--space-2);
    justify-items: center;
    padding: var(--space-4);
    background: rgb(8 44 38 / .96);
    border: 1px solid #8ef5d2;
    border-radius: var(--radius-3);
    box-shadow: 0 12px 40px rgb(0 0 0 / .5);
    text-align: center;
    /*
     * Justo encima del abanico, que es donde se está mirando al ganar una baza.
     *
     * Ha estado en los tres sitios posibles y este es el bueno. Debajo de las cartas no
     * vale: empujaba el abanico hacia arriba cada vez que aparecía. Arriba del todo
     * tampoco: hay que apartar la vista de la mano justo cuando estás decidiendo qué hacer
     * con ella. Aquí sale pegado a las cartas y sin tocarlas — va en posición absoluta, así
     * que no ocupa sitio en la maquetación y el abanico no se entera de que existe.
     */
    bottom: calc(var(--carta-h) * 1.5);
    animation: tute-asomar 260ms cubic-bezier(.2, 1.1, .35, 1);
}

.tute-cante.abierto { display: grid; }

.tute-cante-aviso { color: #ffce4d; font-size: .72rem; }

/* Asoma desde abajo, desde las cartas: viene de la mano, no del techo. */
@keyframes tute-asomar {
    from { opacity: 0; translate: 0 30%; scale: .94; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
}

.tute-cante-opciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.tute-cante button {
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-2);
    font-weight: 700;
    cursor: pointer;
}

.tute-cante .primary { background: #8ef5d2; color: #0d3f38; }
.tute-cante .ghost { background: transparent; color: #eafff8; border: 1px solid rgb(255 255 255 / .3); }
.tute-boton-tute { background: #ffce4d !important; color: #3a2a00 !important; }

/* ─── Recuento de la mano y final de la partida ────────────────────────────── */

/*
 * Los dos son modales de pantalla completa, y no un cartelito en una esquina.
 *
 * Estaban colocados en absoluto sobre el tapete y salían abajo, medio tapados por el
 * abanico: lo más importante que pasa en toda la mano —quién la ha ganado y cómo va la
 * partida— competía por el sitio con las cartas. Cubriendo la pantalla no hay competencia
 * posible, y de paso se entiende que el juego está parado esperando.
 */
.tute-recuento,
.tute-final {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: rgb(4 26 22 / .84);
    backdrop-filter: blur(4px);
    animation: tute-velo 220ms ease-out;
}

.tute-panel {
    width: min(100%, 28rem);
    max-height: 88dvh;
    overflow-y: auto;
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    padding: var(--space-5) var(--space-4);
    background: linear-gradient(180deg, #10513f, #08352c);
    border: 1px solid rgb(142 245 210 / .35);
    border-radius: var(--radius-3);
    box-shadow: 0 24px 70px rgb(0 0 0 / .6);
    text-align: center;
}

/* Ganar se ve antes de leer nada. */
.tute-recuento.gana .tute-panel,
.tute-final.gana .tute-panel {
    border-color: #8ef5d2;
    box-shadow: 0 24px 70px rgb(0 0 0 / .6), 0 0 50px rgb(142 245 210 / .22);
}

.tute-recuento h3,
.tute-final h3 {
    margin: 0;
    font-size: clamp(1.5rem, 8vw, 2.3rem);
    line-height: 1.1;
    color: #ff9a6b;
}

.tute-recuento.gana h3,
.tute-final.gana h3 { color: #8ef5d2; }

.tute-recuento p,
.tute-final p { margin: 0; color: rgb(234 255 248 / .8); }

/* ─── Los dos bandos, uno junto al otro ────────────────────────────────────── */

/*
 * Puestos en columnas, la comparación se hace sola. Antes era una frase con cuatro
 * números dentro —«38 puntos contra 92, 1 juego, partida 2–1 a 4»— y no se leía ninguno.
 */
.tute-bandos {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.tute-bando {
    display: grid;
    gap: 2px;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-2);
    background: rgb(255 255 255 / .05);
    border: 1px solid transparent;
}

.tute-bando.gana {
    background: rgb(142 245 210 / .14);
    border-color: rgb(142 245 210 / .5);
}

.tute-bando-quien {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgb(234 255 248 / .65);
}

.tute-bando-puntos {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tute-bando.gana .tute-bando-puntos { color: #8ef5d2; }

.tute-bando-pie { font-size: .7rem; color: rgb(234 255 248 / .6); }
.tute-bando.gana .tute-bando-pie { color: #8ef5d2; }
.tute-bando-vs { color: rgb(234 255 248 / .35); }

.tute-recuento-nota {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: rgb(255 206 77 / .16);
    color: #ffce4d !important;
    font-size: .78rem;
    font-weight: 700;
}

/* ─── Cómo va la partida ───────────────────────────────────────────────────── */

/*
 * Los juegos, como luces que se encienden.
 *
 * Un «2 – 1 a 4» obliga a pararse a contar cuánto falta. Cuatro puntitos, de los que dos
 * están encendidos, se leen sin pensar — y entre mano y mano no se quiere pensar.
 */
.tute-partida {
    display: grid;
    gap: var(--space-1);
    width: 100%;
}

.tute-juegos {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-1);
    background: rgb(255 255 255 / .04);
    font-size: .72rem;
    color: rgb(234 255 248 / .7);
    text-align: start;
}

.tute-juegos.nuestro { color: #eafff8; }
.tute-juegos b { font-variant-numeric: tabular-nums; font-size: .95rem; }

.tute-luces { display: flex; gap: 4px; }

.tute-luces i {
    width: 100%;
    max-width: 2.2rem;
    height: 6px;
    border-radius: 999px;
    background: rgb(255 255 255 / .14);
}

.tute-juegos.nuestro .tute-luces i.on { background: #8ef5d2; }
.tute-juegos:not(.nuestro) .tute-luces i.on { background: #ff9a6b; }

/* ─── El resultado final, por equipos ──────────────────────────────────────── */

.tute-final-lista {
    width: 100%;
    display: grid;
    gap: var(--space-3);
}

.tute-equipo-final {
    border-radius: var(--radius-2);
    padding: var(--space-3);
    background: rgb(255 255 255 / .05);
    border: 1px solid transparent;
    text-align: start;
}

.tute-equipo-final.gana {
    background: linear-gradient(180deg, rgb(142 245 210 / .2), rgb(142 245 210 / .06));
    border-color: #8ef5d2;
}

.tute-equipo-final.pierde { opacity: .8; }

.tute-equipo-final header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
}

.tute-copa { font-size: 1.4rem; line-height: 1; }
.tute-equipo-final:not(.gana) .tute-copa { display: none; }
.tute-equipo-final:not(.gana) header { grid-template-columns: minmax(0, 1fr) auto; }

.tute-equipo-final h4 {
    margin: 0;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgb(234 255 248 / .75);
}

.tute-equipo-final header strong {
    font-size: 2rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tute-equipo-final.gana header strong { color: #8ef5d2; }

.tute-equipo-total {
    margin: 2px 0 var(--space-2) !important;
    font-size: .72rem;
    color: rgb(234 255 248 / .55) !important;
}

.tute-equipo-final ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
}

.tute-equipo-final li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: var(--space-2);
    align-items: baseline;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-1);
    background: rgb(0 0 0 / .18);
    font-size: .68rem;
    color: rgb(234 255 248 / .6);
}

.tute-final-dato b { color: #eafff8; font-size: .8rem; font-variant-numeric: tabular-nums; }

.tute-final-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #eafff8;
    font-size: .8rem;
}

.tute-final-acciones {
    display: grid;
    gap: var(--space-2);
    justify-items: center;
    width: 100%;
}

.tute-final-acciones .primary,
.tute-final-acciones .ghost {
    width: min(100%, 20rem);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    font-size: .95rem;
    cursor: pointer;
    text-decoration: none;
}

.tute-final-acciones .primary { background: #8ef5d2; color: #0d3f38; }
.tute-final-acciones .primary:disabled { background: rgb(142 245 210 / .3); color: rgb(13 63 56 / .7); cursor: default; }
.tute-final-acciones .ghost { background: transparent; color: rgb(234 255 248 / .8); border: 1px solid rgb(255 255 255 / .25); }
.tute-revancha-aviso { color: rgb(234 255 248 / .6); font-size: .72rem; }

@keyframes tute-velo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── El reparto ───────────────────────────────────────────────────────────── */

/*
 * El mazo del centro y las cartas que salen de él.
 *
 * Las dos cosas son decorado —el estado del juego no cambia— pero sin ellas una mano
 * empieza con diez cartas apareciendo de golpe, que no se siente como una mano que
 * empieza sino como una pantalla que se ha refrescado.
 */
/*
 * El mazo y las cartas que salen de él viven **dentro de la cruz**, en el mismo hueco que
 * la muestra y con su mismo tamaño.
 *
 * De ahí que el mazo la tape por completo mientras se reparte: la muestra es la última
 * carta del reparto y no tiene por qué verse antes de que se reparta. Cuando el mazo se
 * retira, aparece debajo — que es exactamente lo que pasa en una mesa.
 */
.tute-reparto,
.tute-mazo-centro {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mesa-w);
    height: var(--mesa-h);
    margin-inline-start: calc(var(--mesa-w) / -2);
    margin-block-start: calc(var(--mesa-h) / -2);
    pointer-events: none;
}

.tute-reparto .carta-svg,
.tute-mazo-centro .carta-svg {
    width: var(--mesa-w);
    height: var(--mesa-h);
    border-radius: 5px;
    box-shadow: 0 6px 16px rgb(0 0 0 / .45);
}

/* Las que vuelan, por encima de todo lo que hay en la mesa. */
.tute-reparto { z-index: 6; }

/*
 * El mazo son tres dorsos, no uno.
 *
 * Uno solo se lee como «una carta boca abajo» y entonces las cartas del reparto no
 * parecen salir de ningún sitio. Con tres desplazados un par de píxeles se lee como un
 * montón, y de un montón sí se entiende que salgan cartas.
 */
.tute-mazo-centro .carta-svg { position: absolute; inset: 0; }
.tute-mazo-centro .carta-svg:nth-child(1) { translate: -3px -3px; rotate: -1.5deg; }
.tute-mazo-centro .carta-svg:nth-child(2) { translate: -1px -1px; rotate: .8deg; }
.tute-mazo-centro .carta-svg:nth-child(3) { translate: 0 0; rotate: 0deg; }

/*
 * El mazo, justo por debajo de las que vuelan y por encima de la muestra.
 *
 * Sin margen negativo propio: el `translate` lo pone el `left/top` con los márgenes de
 * arriba, igual que la muestra, y así los dos ocupan el mismo rectángulo al píxel.
 */
.tute-mazo-centro {
    z-index: 5;
    animation: tute-mazo-fuera 360ms ease-in forwards;
    animation-delay: 2050ms;
}

/*
 * Ni el mazo ni las cartas del reparto llevan `translate`: se centran con los márgenes
 * negativos de arriba, los mismos que la muestra. Si alguna vez se le añade uno aquí o en
 * la animación, las cartas volverán a salir media carta desplazadas del mazo.
 */
@keyframes tute-mazo-fuera {
    to { opacity: 0; scale: .82; }
}

/* Cada dorso de los demás aparece cuando le llega su carta del reparto. */
.tute-dorsos .carta-svg.entra {
    animation: tute-dorso-entra 320ms cubic-bezier(.2, .9, .3, 1) backwards;
    animation-delay: var(--retardo, 0ms);
}

@keyframes tute-dorso-entra {
    from { opacity: 0; scale: .8; }
    to   { opacity: 1; scale: 1; }
}

/* ─── Los puntos de la baza ────────────────────────────────────────────────── */

/*
 * El número sube desde el centro hacia quien se lleva la baza.
 *
 * **Verde lo que ganamos, rojo lo que se llevan.** En una mesa se sabe de quién es la
 * baza por dónde van las cartas; en una pantalla, no tanto. El color lo dice antes de que
 * dé tiempo a leer el número, y con el rojo se entiende que eso ha sido un golpe y no un
 * premio.
 *
 * (Este bloque y el de arriba estuvieron borrados un rato: una reescritura de la sección
 * de al lado se los llevó por delante. Si vuelven a desaparecer, el síntoma es un número
 * suelto en mitad del tapete y cartas de reparto del tamaño que les dé la gana.)
 */
.tute-puntos {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    translate: -50% -50%;
    font-size: clamp(1.5rem, 8vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -.02em;
    text-shadow: 0 2px 14px rgb(0 0 0 / .75);
    pointer-events: none;
    white-space: nowrap;
    animation: tute-subir 1.7s cubic-bezier(.2, .8, .3, 1) forwards;
}

.tute-puntos.nuestro { color: #4ef0b4; }
.tute-puntos.suyo { color: #ff5f52; }

.tute-puntos[data-hacia="sur"]   { --ida: 70%; }
.tute-puntos[data-hacia="norte"] { --ida: -170%; }
.tute-puntos[data-hacia="oeste"] { --ida: -120%; }
.tute-puntos[data-hacia="este"]  { --ida: -120%; }

@keyframes tute-subir {
    0%   { opacity: 0; scale: .55; translate: -50% -50%; }
    16%  { opacity: 1; scale: 1.2; }
    28%  { scale: 1; }
    100% { opacity: 0; translate: -50% calc(-50% + var(--ida, -140%)); }
}

/* ─── Avisos y adornos ─────────────────────────────────────────────────────── */

/* El cante, celebrado como merece: 40 tantos son casi un tercio de la mano. */
.tute-cartel {
    position: absolute;
    inset-inline: 0;
    top: 22%;
    margin: 0;
    z-index: 14;
    text-align: center;
    font-size: clamp(1.3rem, 7vw, 2.6rem);
    font-weight: 800;
    letter-spacing: .01em;
    text-shadow: 0 3px 16px rgb(0 0 0 / .7);
    opacity: 0;
    scale: .7;
    pointer-events: none;
    transition: opacity 240ms, scale 240ms cubic-bezier(.2, 1.4, .4, 1);
}

.tute-cartel.visible { opacity: 1; scale: 1; }
.tute-cartel.nuestro { color: #8ef5d2; }
.tute-cartel.suyo { color: #ff9a6b; }

/*
 * Los puntos de mi pareja en esta mano, en la barra.
 *
 * El tamaño se adapta al hueco: al lado va el nombre de quien tiene el turno, que puede
 * ser largo, y entre los dos tienen que caber sin empujarse. Con `clamp` el número manda
 * y el nombre se recorta, que es el orden correcto — el nombre se adivina, un marcador a
 * medias no.
 */
.tute-puntos-mano {
    padding: 2px var(--space-2);
    border-radius: 999px;
    background: rgb(142 245 210 / .18);
    color: #8ef5d2;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: clamp(.85rem, 4vw, 1.15rem);
    letter-spacing: .01em;
    white-space: nowrap;
}

/* Las partículas van sobre el tapete y por debajo de todo lo que se toca: un canvas que
   capture los toques deja la mesa muerta, y ha pasado antes. */
.tute-tapete .fx-canvas {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

/* ─── Las cartas ───────────────────────────────────────────────────────────── */

/*
 * Las de la baraja clásica son `<img>` de ficheros SVG, así que aquí solo se les da
 * tamaño: el dibujo viene hecho y no se toca. Las de alto contraste sí se pintan desde
 * el cliente, y esas sí llevan estilo.
 */
.carta-svg {
    width: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.carta-contraste .carta-fondo { fill: #fff; stroke: #111; stroke-width: 3; }
.carta-contraste .carta-tinta { color: var(--palo); fill: var(--palo); }

.carta-contraste .carta-indice {
    font-weight: 800;
    font-family: var(--font-ui);
    paint-order: stroke;
    stroke: #111;
    stroke-width: 1.5;
}

.tute-sprite {
    position: absolute;
    width: 0;
    height: 0;
}

/* ─── Escritorio ───────────────────────────────────────────────────────────── */

@media (min-width: 48rem) {
    .tute-mazo--oeste { left: 4%; }
    .tute-mazo--este { right: 4%; }
    .tute-turno { font-size: 1.1rem; }
}

/*
 * Con movimiento reducido, nada se mueve.
 *
 * No es una casilla que marcar: para quien tiene sensibilidad al movimiento, diez cartas
 * repartiéndose y una baza volando marean de verdad. La información sigue estando toda
 * —lo que se quita es el viaje, no el resultado—.
 */
@media (prefers-reduced-motion: reduce) {
    .tute-carta,
    .tute-jugada,
    .tute-cartel,
    .tute-puntos,
    .tute-reparto,
    .tute-panel,
    .tute-carta.entra,
    .tute-carta.se-va,
    .tute-carta.niega,
    .tute-jugada .carta-svg {
        animation: none !important;
        transition: none !important;
    }

    .tute-carta.se-va { opacity: 0; }
}

/* ─── La mesa antes de empezar ─────────────────────────────────────────────── */

/*
 * Cuatro sillas alrededor de una mesa, no dos listas de nombres.
 *
 * El Tute son cuatro sitios fijos y enfrentados, y verlos colocados dice de un vistazo
 * quién es tu pareja y quién no. Con dos listas hay que leer, contar y acordarse.
 */
/* En la espera solo se ve la mesa de sillas... y lo que se abre encima de ella:
   la pregunta de pareja y el panel de reglas. Sin la excepción, abrir los ajustes
   no enseñaba nada. */
.tute[data-fase="espera"] .tute-mesa > *:not(.tute-espera, .tute-pregunta, .tute-ajustes) { display: none; }
.tute[data-fase="jugando"] .tute-espera { display: none; }

.tute-espera {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100dvh;
    padding: var(--space-4) var(--space-3) max(var(--space-4), env(safe-area-inset-bottom));
    gap: var(--space-3);
}

.tute-sillas {
    position: relative;
    align-self: center;
    justify-self: center;
    width: min(92vw, 26rem);
    aspect-ratio: 1;
}

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

.tute-espera-centro strong { font-size: 1.1rem; }
.tute-espera-centro small { color: rgb(234 255 248 / .65); font-size: .72rem; }

.tute-silla {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 5.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: default;
}

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

.tute-silla--sur   { bottom: 0; left: 50%; translate: -50% 0; }
.tute-silla--norte { top: 0; left: 50%; translate: -50% 0; }
.tute-silla--oeste { left: 0; top: 50%; translate: 0 -50%; }
.tute-silla--este  { right: 0; top: 50%; translate: 0 -50%; }

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

/* Tu pareja y tú, en verde; los contrarios, apagados. Se ve sin leer nada. */
.tute-silla.mio .tute-silla-cara { border-color: #8ef5d2; background: rgb(142 245 210 / .22); }
.tute-silla.vacia .tute-silla-cara { border-style: dashed; opacity: .6; }

.tute-silla-nombre {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
}

.tute-silla-equipo {
    position: absolute;
    top: 2.3rem;
    inset-inline-end: 0.6rem;
    display: grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #0d3f38;
    border: 2px solid rgb(255 255 255 / .35);
    font-size: .68rem;
    font-weight: 800;
}

.tute-silla.mio .tute-silla-equipo { border-color: #8ef5d2; color: #8ef5d2; }

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

.tute-espera-codigo { margin: 0; font-size: .8rem; color: rgb(234 255 248 / .7); }
.tute-espera-codigo b { letter-spacing: .18em; font-size: 1.1rem; color: #eafff8; }
.tute-espera-pie { margin: 0; font-size: .78rem; color: rgb(234 255 248 / .6); }

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

/* ─── La pregunta de la pareja ─────────────────────────────────────────────── */

.tute-pregunta {
    position: absolute;
    inset-inline: var(--space-4);
    top: 30%;
    z-index: 20;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgb(8 44 38 / .97);
    border: 1px solid #8ef5d2;
    border-radius: var(--radius-3);
    box-shadow: 0 12px 40px rgb(0 0 0 / .5);
    text-align: center;
}

.tute-pregunta p { margin: 0; font-size: 1rem; }

.tute-pregunta-opciones {
    display: grid;
    gap: var(--space-2);
}

.tute-pregunta button {
    padding: var(--space-3);
    border: 0;
    border-radius: var(--radius-2);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
}

.tute-pregunta .primary { background: #8ef5d2; color: #0d3f38; }
.tute-pregunta .ghost { background: transparent; color: #eafff8; border: 1px solid rgb(255 255 255 / .3); }

.tute-invitar {
    width: min(100%, 22rem);
    padding: var(--space-3) var(--space-5);
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 999px;
    background: transparent;
    color: #eafff8;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}

/* ─── La puerta de entrada ─────────────────────────────────────────────────── */

/*
 * Vive en la hoja del Tute pero no es del Tute: aparece sobre cualquier sala. Se queda
 * aquí porque es donde está el resto de lo que se pinta encima del tapete; cuando la
 * Fase 9 unifique las pantallas, se muda con ellas.
 *
 * Se entra desde el propio modal, sin salir de la sala: la mesa se ve de fondo mientras
 * se escribe la contraseña, que es lo que hace que se entienda a qué te han invitado.
 */
.puerta {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: rgb(4 26 22 / .8);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}

.puerta-panel {
    width: min(100%, 24rem);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4);
    background: linear-gradient(180deg, #10513f, #08352c);
    border: 1px solid rgb(142 245 210 / .45);
    border-radius: var(--radius-3);
    box-shadow: 0 20px 60px rgb(0 0 0 / .55);
    color: #eafff8;
    text-align: center;
    animation: tute-panel 300ms cubic-bezier(.2, 1.1, .3, 1);
}

/* El color se pone a mano: los encabezados de la página son oscuros y aquí el fondo
   también lo es, así que el título salía casi ilegible. */
.puerta-panel h2 {
    margin: 0;
    font-size: 1.25rem;
    color: #eafff8;
}
.puerta-panel > p { margin: 0; color: rgb(234 255 248 / .78); font-size: .88rem; }

.puerta-form {
    display: grid;
    gap: var(--space-1);
    text-align: start;
}

.puerta-form label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgb(234 255 248 / .6);
}

.puerta-form input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    margin-block-end: var(--space-1);
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: var(--radius-2);
    background: rgb(0 0 0 / .25);
    color: #eafff8;
    font-size: 1rem;   /* 16px: por debajo, iOS hace zoom al enfocar */
}

.puerta-form input:focus-visible {
    outline: 0;
    border-color: #8ef5d2;
}

.puerta-form .primary {
    margin-block-start: var(--space-2);
    padding: var(--space-3);
    border: 0;
    border-radius: 999px;
    background: #8ef5d2;
    color: #0d3f38;
    font-weight: 800;
    font-size: .95rem;
    cursor: pointer;
}

.puerta-form .primary:disabled { opacity: .6; cursor: default; }

.puerta-cambio {
    margin: 0;
    font-size: .85rem;
    color: rgb(234 255 248 / .7);
}

.puerta-enlace {
    padding: 0;
    border: 0;
    background: none;
    color: #8ef5d2;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.puerta-error {
    margin: 0;
    padding: var(--space-2);
    border-radius: var(--radius-2);
    background: rgb(255 95 82 / .18);
    color: #ffb4ab;
    font-size: .82rem;
}

/* ─── Reglas de la partida, en la mesa de espera ──────────────────────────────
 *
 * Estaban en la portada, en un formulario previo a crear la sala. Aquí se deciden con
 * la mesa delante y con las sillas ya ocupadas, que es cuando se sabe si vais a ser dos
 * o cuatro.
 */

.tute-espera-reglas {
    margin: 0;
    color: rgb(234 255 248 / .62);
    font-size: .8rem;
    text-align: center;
    text-wrap: balance;
}

.tute-ajustar {
    width: min(100%, 22rem);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / .1);
    color: rgb(234 255 248 / .85);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.tute-ajustar:active { scale: .97; }

.tute-ajustes {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: var(--space-3);
    background: rgb(4 26 22 / .82);
    /* Es lo único que se desplaza en toda la mesa, y solo aquí: con muchas reglas y un
       móvil apaisado, el panel no cabe. Durante la partida no hay scroll en ninguna
       parte, que es la regla que importa. */
    overflow: auto;
    overscroll-behavior: contain;
}

.tute-ajustes .tute-panel {
    width: min(100%, 26rem);
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgb(8 44 38 / .97);
    border: 1px solid rgb(142 245 210 / .55);
    border-radius: var(--radius-3);
    box-shadow: 0 12px 40px rgb(0 0 0 / .5);
}

.tute-ajustes h3 { margin: 0; font-size: 1.05rem; text-align: center; }

.tute-ajustes-nota {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-2);
    background: rgb(255 255 255 / .07);
    color: rgb(234 255 248 / .75);
    font-size: .82rem;
    text-align: center;
}

.tute-ajustes-form {
    display: grid;
    gap: var(--space-3);
}

/* Etiqueta y control en la misma línea; la explicación, debajo y a media voz: es la
   misma forma que tenía en la portada y no hace falta reaprenderla. */
.tute-ajustes-form .option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid rgb(255 255 255 / .08);
}

.tute-ajustes-form .option:last-child { border-block-end: 0; padding-block-end: 0; }

.tute-ajustes-form .option-label {
    margin: 0;
    font-weight: 600;
    font-size: .9rem;
}

.tute-ajustes-form .option-help {
    grid-column: 1 / -1;
    margin: 0;
    color: rgb(234 255 248 / .55);
    font-size: .76rem;
    line-height: 1.35;
}

.tute-ajustes-form select {
    min-width: 8rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgb(255 255 255 / .25);
    border-radius: var(--radius-2);
    background: rgb(8 44 38 / .9);
    color: #eafff8;
    font: inherit;
    font-size: .88rem;
}

.tute-ajustes-form input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: #8ef5d2;
}

.tute-ajustes-form :disabled { opacity: .55; cursor: not-allowed; }

.tute-ajustes .primary {
    padding: var(--space-3);
    border: 0;
    border-radius: var(--radius-2);
    background: #8ef5d2;
    color: #0d3f38;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
}

/* ─── La sala es la mesa ───────────────────────────────────────────────────────
 *
 * Se pone en el `<body>` desde el servidor cuando la sala es de Tute. Pinta el tapete
 * y aparta el marco de la web antes de que arranque el JavaScript: la mesa es un
 * `position: fixed` que monta el módulo, y hasta entonces se veía la cabecera del sitio
 * y el fondo claro asomando debajo. Esconderlo desde el cliente siempre llega un
 * repintado tarde.
 */
body.mesa-completa {
    background:
        radial-gradient(ellipse 120% 80% at 50% 42%, #1f7a63, #12564a 60%, #0d3f38);
    color: #eafff8;
    overflow: hidden;
}

body.mesa-completa .site-header,
body.mesa-completa .site-footer,
body.mesa-completa .skip-link { display: none; }

body.mesa-completa main,
body.mesa-completa .lobby { margin: 0; padding: 0; max-width: none; }

/* Salir desde la sala de espera: la barra de arriba no se ve todavía, así que el aspa de
   allí no sirve. Discreto y al final, que no es lo que se viene a hacer. */
.tute-dejar {
    width: min(100%, 22rem);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgb(234 255 248 / .55);
    font-size: .82rem;
    cursor: pointer;
}

.tute-dejar:active { scale: .97; }