/*
 * 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: eso está ahora en `mesa.css`.
 *
 * Era genérico desde el principio —`body[data-jugando]`, sin nombre de juego— y vivía
 * aquí solo porque el Tute fue el primero en necesitarlo. Flota lo necesita igual, así
 * que se mudó a la hoja compartida en vez de copiarlo.
 */

/*
 * 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—.
 */
/* ─── 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.651);
    /*
     * 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.98);
    --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-w) * 0.251);
    --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: 100vh;
    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; }

/*
 * El de enfrente: nombre a la izquierda de sus cartas, y quieto.
 *
 * Mismo problema que a los lados y misma solución. El nombre colgaba encima del mazo, y
 * el mazo encoge en ANCHO con cada carta que juega —aquí las cartas se solapan en
 * horizontal, no en vertical como a los lados—, así que el nombre se desplazaba con cada
 * jugada.
 *
 * Se estira el mazo a todo el ancho de su columna —`justify-self: stretch`, el equivalente
 * horizontal del `align-self: stretch` de los lados—, así el cuadro deja de encoger. Las
 * cartas se centran dentro de ese cuadro fijo, y el nombre se ancla a su borde izquierdo,
 * que no se mueve aunque no quede ni una carta en el mazo.
 */
.tute-mazo--norte {
    grid-area: norte;
    flex-direction: row;
    justify-self: stretch;
    justify-content: center;
}

.tute-mazo--norte .tute-nombre {
    position: absolute;
    left: var(--space-1);
    top: 50%;
    translate: 0 -50%;
}
/*
 * Los de los lados van pegados al filo de la pantalla.
 *
 * El tapete respira por los lados, y con ese respiro los mazos quedaban a un dedo del
 * borde: las cartas se leían como cortadas a media pantalla en vez de como cartas que
 * siguen fuera. Se les come el margen del tapete con uno negativo del mismo tamaño, y
 * cada una asoma desde su borde.
 */
.tute-mazo--oeste {
    grid-area: oeste;
    margin-inline-start: calc(var(--space-2) * -1);
}

.tute-mazo--este {
    grid-area: este;
    flex-direction: row-reverse;
    margin-inline-end: calc(var(--space-2) * -1);
}

.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: de canto, en una esquina, y quietos.
 *
 * Escritos en vertical porque es donde hay sitio: al lado del mazo la pantalla no da para
 * un nombre en horizontal —se salía, o había que cortarlo a tres letras—, y de canto cabe
 * entero pegado al filo.
 *
 * Y **no se mueven en toda la mano**, que es lo que más se notaba. Iban colgados del
 * propio mazo, y el mazo encoge con cada carta que se juega: el nombre subía y bajaba solo
 * mientras jugabas, y con cuatro nombres bailando la mesa parecía inestable. Ahora la
 * franja de cada lado se estira de arriba abajo —`align-self: stretch`— y el nombre se
 * ancla a **su esquina de la franja**, que no cambia aunque no quede ni una carta.
 *
 * Uno abajo y otro arriba, en esquinas opuestas: puestos los dos igual, con la cruz en
 * medio, se leían como una pareja y no como dos rivales enfrentados.
 */
.tute-mazo--oeste,
.tute-mazo--este {
    align-self: stretch;
    justify-content: center;
}

.tute-mazo--oeste .tute-nombre,
.tute-mazo--este .tute-nombre {
    position: absolute;
    writing-mode: vertical-rl;
    max-height: 42%;
    max-width: none;
    font-size: .62rem;
    padding: var(--space-2) 1px;
}

/*
 * Cada uno mira hacia la mesa.
 *
 * De canto, un texto tiene dos sentidos posibles y solo uno queda de cara a la partida: el
 * de la izquierda se lee de abajo arriba y el de la derecha de arriba abajo, como dos
 * personas sentadas una enfrente de otra. Puestos los dos igual, uno de ellos queda del
 * revés y hay que ladear la cabeza al otro lado para leerlo.
 *
 * El giro es sobre el centro, así que no mueve la caja: el nombre sigue anclado donde
 * estaba.
 */
.tute-mazo--oeste .tute-nombre {
    bottom: var(--space-2);
    left: var(--space-1);
    rotate: 180deg;
}

.tute-mazo--este .tute-nombre { top: var(--space-2); right: var(--space-1); }

/*
 * La etiqueta de máquina se queda derecha: dos letras de canto no se leen.
 *
 * Y en la de la izquierda hay que deshacerle el giro del nombre, que si no se lee «AI» y
 * boca abajo. Un giro dentro de otro giro: el de fuera coloca el nombre de cara a la mesa
 * y el de dentro devuelve la etiqueta a su sitio.
 */
.tute-mazo--oeste .tute-nombre .tag-ia,
.tute-mazo--este .tute-nombre .tag-ia { writing-mode: horizontal-tb; }

.tute-mazo--oeste .tute-nombre .tag-ia { rotate: 180deg; }

.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, asomando por el borde.
 *
 * Las cartas de los lados son **las mismas que las de enfrente**: mismo tamaño, misma
 * proporción, de pie. Lo único que cambia es cuánto se ve de ellas — el mazo se recorta y
 * cada carta asoma un dedo, como si el jugador las tuviera fuera de la mesa.
 *
 * Antes se probaron dos cosas y las dos fallaron por lo mismo. Girarlas noventa grados
 * **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. Y darles una caja apaisada y
 * recortarlas con `object-fit` sí cabía, pero dejaban de ser la misma carta que las de
 * enfrente.
 *
 * Recortando el mazo entero no hace falta ni girar ni deformar nada: la carta es la que
 * es, y el hueco decide cuánta se ve. La columna ocupa un tercio de lo que ocupaba a lo
 * ancho, que es donde va justo un móvil.
 */
/*
 * El de enfrente, tan compacto como los de los lados.
 *
 * Con -0.2 de solape se veía casi la carta entera: nueve cartas ocupaban un tercio de la
 * pantalla, un bulto ancho justo encima de la cruz. Los de los lados no tienen ese
 * problema porque su franja visible es minúscula y fija —13 px, da igual cuántas
 * cartas—, así que diez caben en el alto de la pantalla sin robarle sitio a nada.
 *
 * Aquí se aprieta al mismo orden de magnitud: apenas un filo de cada carta, lo justo para
 * contarlas, y el mazo entero cabe en una fracción de lo que ocupaba antes.
 */
.tute-mazo--norte .tute-dorsos .carta-svg {
    margin-inline-start: calc(var(--carta-h) * -0.29);
    /* El filo de cada una, igual que a los lados: por fuera de la imagen, que dentro no
       se ve. Aquí el corte es vertical, así que el filo va al lado y no arriba. */
    box-shadow: -1px 0 0 rgb(255 255 255 / .4), -3px 0 6px -2px rgb(0 0 0 / .55);
}

.tute-mazo--norte .tute-dorsos .carta-svg:first-child {
    margin-inline-start: 0;
    box-shadow: none;
}

.tute-mazo--oeste .tute-dorsos,
.tute-mazo--este .tute-dorsos {
    flex-direction: column;
    /* Lo que asoma de cada carta: poco más de un tercio de su ancho. */
    width: calc(var(--carta-h) * 0.13);
    overflow: hidden;
}

/* Cada uno asoma por su lado: el de la izquierda enseña su borde derecho, y al revés. */
.tute-mazo--oeste .tute-dorsos { align-items: flex-end; }
.tute-mazo--este .tute-dorsos { align-items: flex-start; }

.tute-mazo--oeste .tute-dorsos .carta-svg,
.tute-mazo--este .tute-dorsos .carta-svg {
    flex: 0 0 auto;
    /* Solapadas a lo alto para que diez quepan; de cada una se ve una franja. */
    margin-block-start: calc(var(--carta-h) * -0.39);
    /*
     * El filo de cada una, por fuera de la imagen.
     *
     * Sin él, diez reversos del mismo dibujo apilados se funden en una sola tira y parece
     * una columna de tela. Una sombra `inset` no vale: en un `<img>` el contenido se pinta
     * encima y no se ve.
     */
    box-shadow: 0 -1px 0 rgb(255 255 255 / .4), 0 -3px 6px -2px rgb(0 0 0 / .55);
}

.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.
     *
     * Y va despacio a propósito. La baza es el momento en que se resuelve la jugada: verla
     * recogerse es entender quién se la ha llevado. A 520 ms se iban de golpe; a 900, con
     * una curva que arranca suave y llega frenando, se sigue con la vista sin esfuerzo. El
     * desvanecido entra tarde para que las cartas se vean **viajar** y no borrarse a medio
     * camino.
     *
     * Esto no lo recorta el nivel de efectos. La medida del aparato quita partículas y
     * sacudidas; el viaje de las cartas es lo que cuenta la jugada y va igual en todos.
     */
    transition:
        translate 900ms cubic-bezier(.22, .61, .36, 1),
        scale 900ms cubic-bezier(.22, .61, .36, 1),
        opacity 480ms 380ms 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);
}

/*
 * 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é.
 */
/*
 * La separación entre las cuatro es la misma que antes **en píxeles**, no en tantos por
 * ciento. Al crecer la carta, un 108 % de ella es más hueco: los porcentajes se han
 * recalculado sobre el tamaño nuevo para que la cruz siga igual de apretada y lo único que
 * cambie sea el tamaño de las cartas.
 */
.tute-jugada--sur   { translate: 0 107%; }
.tute-jugada--norte { translate: 0 -107%; }
.tute-jugada--este  { translate: 108.7% 0; }
.tute-jugada--oeste { translate: -108.7% 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, encogiéndose como quien
   junta las cartas antes de guardarlas. */
.tute-baza.recogiendo .tute-jugada { opacity: 0; scale: .78; }

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

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

/*
 * El pie va por encima del tapete.
 *
 * Al recoger una baza que gano yo, las cuatro cartas bajan hacia mí y llegan a la altura
 * del abanico. Pasando por encima parecía que se me caían sobre la mano; por debajo, se
 * guardan — que es lo que de verdad está pasando. Las dos capas eran hermanas sin orden
 * declarado, así que mandaba el orden del marcado y ganaba el tapete.
 */
.tute-pie {
    display: grid;
    justify-items: center;
    padding-block-end: max(var(--space-2), env(safe-area-inset-bottom));
    position: relative;
    z-index: 2;
}

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

/*
 * En MI abanico las cartas van algo más pequeñas.
 *
 * Es la única mano que se lee de cerca y con diez cartas a la vez, y de paso hay menos
 * píxeles que rasterizar en el sitio donde más se mueve todo. Las de la mesa y los
 * dorsos de los demás no se tocan: ahí no hay que elegir nada.
 *
 * De cada carta tapada se ve al menos su columna del índice —el 25 % de su ancho, con el
 * número grande y la pinta—, y todo lo demás que quepa: el abanico lo abre el módulo con
 * lo que le deje la pantalla. Este valor es solo el respaldo de antes de la primera
 * medida.
 */
.tute-mano {
    --carta-h: var(--mano-h);
    /*
     * El ancho hay que volver a calcularlo aquí, no vale con heredarlo.
     *
     * `--carta-w` se declara arriba como `calc(var(--carta-h) * 0.651)`, y una propiedad
     * personalizada resuelve sus `var()` **donde se declara**, no donde se usa. Así que
     * al bajar la altura del abanico el ancho seguía siendo el de las cartas de la mesa:
     * la `<img>` quedaba más ancha de lo que le toca para su alto y el SVG, que respeta
     * su proporción, dejaba una banda transparente a cada lado. Eso era el hueco que se
     * veía entre carta y carta.
     */
    --carta-w: calc(var(--mano-h) * 0.651);
    --canto: calc(var(--carta-w) * 0.251);
}

/* 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);
}

/*
 * En un aparato justo, el mismo aviso sin el resplandor.
 *
 * `drop-shadow` sobre una carta que se está arrastrando se vuelve a calcular en cada
 * fotograma, y es en el arrastre donde más se nota un tirón. El contorno dice lo mismo
 * y no cuesta nada. El nivel lo pone la medida que se hace en la sala de espera.
 */
[data-efectos="bajo"] .tute-carta.a-punto {
    filter: none;
    outline: 3px solid rgb(142 245 210 / .95);
    outline-offset: -1px;
    border-radius: 6px;
}

/*
 * Y sin desenfoques de fondo, que son de lo más caro que hay en una GPU pequeña. El velo
 * se queda: lo que se va es el desenfoque de lo que hay detrás.
 */
[data-efectos="bajo"] .tute-final,
[data-efectos="bajo"] .puerta {
    backdrop-filter: none;
}

/*
 * 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.
     */
    /*
     * Dónde está la carta, compuesto de dos cosas que no se pisan.
     *
     * `--alzado` lo pone su estado —levantada, con el ratón encima, arrastrándose— y
     * `--empuje` lo escribe el dedo al abrir el abanico. Si el estado escribiera un
     * `translate` entero, abrir el abanico se lo cargaría, y al revés.
     */
    translate: var(--empuje, 0) var(--alzado, 0);

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

/*
 * En el abanico, sin sombra por carta.
 *
 * Cada una la proyectaba sobre el canto de la siguiente y lo que se veía entre carta y
 * carta era una raya oscura. Solapadas no hace falta: las separa el marco de color de la
 * propia carta. La sombra vuelve en cuanto se levanta una, que es cuando hay algo que
 * despegar del resto.
 */
.tute-mano .tute-carta .carta-svg { box-shadow: none; }

/*
 * 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 {
    --alzado: -20%;
    z-index: 3;
}

/*
 * Levantada, y sin aro.
 *
 * Llevaba un anillo verde de tres píxeles para decir «esta se puede echar». Sobra: la
 * carta ya sube por encima de las demás y se ve entera, que es una señal más grande que
 * cualquier borde y no le pinta un marco encima al dibujo. Se queda la sombra, que es lo
 * que la despega del resto.
 */
.tute-carta.elegida .carta-svg { box-shadow: 0 8px 18px rgb(0 0 0 / .5); }

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

    .tute-carta:hover .carta-svg { box-shadow: 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 { --alzado: -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.
 */
/*
 * La carta que ahora no se puede echar: apagada, no borrada.
 *
 * **Nunca con `opacity`.** Se probó, y en el abanico las cartas se solapan: una carta medio
 * transparente deja ver la de debajo y lo que se lee es un revoltijo de dos cartas. Da
 * igual lo barata que le salga a la GPU si lo que pinta no se entiende.
 *
 * Se apaga con filtro, y el filtro es sobre todo quitar color: en esta baraja el color es
 * la señal —el número y la pinta van del color del palo—, así que una carta en gris se lee
 * como apagada de un vistazo, y se sigue sabiendo cuál es, que hace falta para entender
 * **por qué** no vale.
 */
.tute-carta.vetada .carta-svg {
    filter: grayscale(.92) brightness(.86);
}

/* 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: 88vh;
    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—.
 */
/*
 * Con «reducir movimiento» se apaga casi todo… menos lo que cuenta la jugada.
 *
 * Dos cosas no están en esta lista, a propósito y por petición expresa:
 *
 *  - `.tute-jugada`: ver la carta salir de una mano e irse a su sitio, y ver la baza
 *    recogerse hacia quien la gana. Sin eso las cartas aparecen y desaparecen solas.
 *  - `.tute-puntos`: los puntos que suben en verde o en rojo al llevarse una baza. Son la
 *    única señal de cuánto ha valido, y quieta no se lee: sale y se queda encima.
 *
 * Lo demás —el abanico, los carteles, el reparto— sí se queda quieto.
 */
@media (prefers-reduced-motion: reduce) {
    .tute-carta,
    .tute-cartel,
    .tute-reparto,
    .tute-panel,
    .tute-carta.entra,
    .tute-carta.se-va,
    .tute-carta.niega {
        animation: none !important;
        transition: none !important;
    }

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

    /*
     * Y aquí se les devuelve el tiempo a las dos excepciones.
     *
     * No basta con dejarlas fuera de la lista de arriba: `base.css` apaga **todo** el
     * documento con `*, *::before, *::after { transition-duration: .001ms !important }`.
     * Con `!important` a los dos lados gana el selector más específico, así que hay que
     * volver a declarar la duración aquí.
     *
     * Se dice en un sitio y se ve en el otro: si alguna vez esto deja de funcionar, lo que
     * hay que mirar es la regla global de `base.css`, no esta hoja.
     */
    .tute-jugada {
        transition-duration: 900ms !important;
        transition-delay: 0ms, 0ms, 380ms !important;
    }

    .tute-puntos { animation-duration: 1.7s !important; }
}

/* ─── 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;
    /* 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);
}

/*
 * La rueda de sillas se mide por el hueco que le queda, no por el ancho de la pantalla.
 *
 * Con `width: min(92vw, 26rem)` la rueda salía siempre igual de grande hubiera sitio o no,
 * así que en cuanto la mesa creció por abajo —la apuesta— el círculo se desbordaba de su
 * fila y los nombres de las sillas caían encima del panel. Ahora manda el hueco vertical y
 * el ancho se deduce.
 *
 * 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 5,5 rem, que es exactamente cómo cuatro
 * nombres acaban unos encima de otros.
 */
.tute-sillas {
    position: relative;
    align-self: center;
    justify-self: center;
    block-size: 100%;
    inline-size: auto;
    aspect-ratio: 1;
    max-inline-size: min(92vw, 26rem);
    container-type: size;
}

.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: clamp(.82rem, 5cqmin, 1.1rem); }
.tute-espera-centro small { color: rgb(234 255 248 / .65); font-size: clamp(.6rem, 3.2cqmin, .72rem); }

.tute-silla {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 2px;
    /* El suelo en rem no es decorativo: por debajo de eso 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;
}

.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: 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 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: .64rem;
    font-size: clamp(.64rem, 3cqmin, .72rem);
}

.tute-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: #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; }

/* La experiencia ganada, en el cuadro final. Solo sale al ganar. */
.tute-final-xp {
    display: grid;
    gap: var(--space-1);
    justify-items: center;
    padding: var(--space-3);
    margin-block: var(--space-3);
    background: rgb(255 255 255 / .08);
    border-radius: var(--radius-2);
}

.tute-final-xp strong { font-size: 1.5rem; color: #8ef5d2; }
.tute-final-xp span { font-size: .85rem; color: rgb(234 255 248 / .7); }

/* Subir de rango es raro y cuesta miles de partidas: cuando pasa, se nota. */
.tute-final-xp.sube { background: rgb(255 206 77 / .18); }
.tute-final-xp.sube strong { color: #ffce4d; }
.tute-final-xp.sube span { color: #ffce4d; font-weight: 700; }


/* El aro del rango en la silla: el número toma el color del tapete para despegarse. */
.tute-silla .con-rango-num { box-shadow: 0 0 0 2px #12564a; }
.tute-silla .con-rango { padding: clamp(3px, 1.4cqmin, 5px); }

/* El bloque de rango en la silla: el nombre debajo, sin robarle sitio al del jugador. */
.tute-silla .rango-bloque { gap: 2px; }
.tute-silla .con-rango-nombre { font-size: clamp(.5rem, 2.6cqmin, .58rem); max-width: 100%; }

/* ── La apuesta de la mesa ──────────────────────────────────────────────────────────────
 *
 * Lo único de esta pantalla que cuesta dinero, así que va con su propia caja y la cifra
 * en grande. El resto de la mesa —el código, las reglas, los ajustes— se lee cuando a uno
 * le apetece; esto hay que leerlo antes de tocar nada.
 */
.tute-apuesta {
    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 los avatares. 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;
    padding: var(--space-3);
    border-radius: var(--radius-lg, 1rem);
    background: rgb(0 0 0 / .22);
    border: 1px solid rgb(255 255 255 / .12);
    text-align: center;
}

.tute-apuesta-titulo {
    margin: 0;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(234 255 248 / .6);
}

.tute-apuesta-cifra { margin: 0; line-height: 1; }
.tute-apuesta .con-moneda.grande { font-size: clamp(1.7rem, 8vh, 2.6rem); }
.tute-apuesta-pie { margin: 0; font-size: .74rem; color: rgb(234 255 248 / .68); text-wrap: balance; }
.tute-apuesta-quienes { margin: 0; font-size: .74rem; color: rgb(234 255 248 / .8); }
.tute-apuesta-saldo { margin: 0; font-size: .74rem; color: rgb(234 255 248 / .55); }

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

.tute-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);
}

.tute-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. */
.tute-apuesta-pasos {
    display: flex;
    gap: var(--space-1);
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

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

/*
 * El borde se difumina en vez de cortarse en seco.
 *
 * Una ficha partida por la mitad parece un fallo de maquetación; desvanecida se lee como
 * lo que es: que hay más apuestas si se arrastra.
 */
.tute-apuesta-pasos {
    -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%);
}

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

.tute-paso.puesto {
    background: #ffd558;
    border-color: #ffd558;
    color: #4a3400;
}

.tute-paso .moneda { width: .9em; height: .9em; }

/* ── La mesa de espera, apretada ────────────────────────────────────────────────────────
 *
 * Todo lo de aquí abajo existe por el mismo motivo: la pantalla no puede tener scroll y la
 * rueda de sillas se lleva lo que sobre. Cada píxel que se le quita a un texto se lo lleva
 * una cara. Lo que NO encoge es lo que se pulsa.
 */
.tute-espera-secundarios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
    width: min(100%, 22rem);
}

/* Los tres pierden el ancho de antes: aquí lo pone la rejilla. */
.tute-espera-secundarios .tute-invitar,
.tute-espera-secundarios .tute-ajustar,
.tute-espera-secundarios .tute-dejar {
    width: 100%;
    /* Alto de dedo: 2,75 rem es el mínimo con el que esto se sigue acertando andando. */
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-1);
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Y la rueda no baja de aquí.
 *
 * Por debajo de once rem las sillas de arriba y de abajo se tocan: sus caras tienen un
 * suelo en rem —si no, dejan de poder pulsarse— y dos suelos no caben en menos que esto.
 */
.tute-sillas { min-block-size: 11rem; }

/*
 * En pantallas cortas, lo que se lee se aprieta; 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) {
    .tute-apuesta { padding: var(--space-2); }
    .tute-apuesta-pie { display: none; }
    .tute-espera-pie,
    .tute-espera-reglas { font-size: .7rem; }
    .tute-espera-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) {
    .tute-sillas { min-block-size: 9rem; }
    .tute-silla .con-rango-nombre { display: none; }
    .tute-espera-centro { display: none; }
}

/* ── Mirando sin jugar ──────────────────────────────────────────────────────────────────
 *
 * Ocupa exactamente el alto que ocupaba el abanico —el mismo `min-height`— para que la
 * mesa no dé un salto al entrar de espectador. La partida de los demás sigue donde estaba;
 * lo único que cambia es lo que hay en el sitio de tu mano.
 */
.tute-espectando {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-1);
    min-height: calc(var(--carta-h) * 1.3);
    padding: var(--space-2) var(--space-4);
    text-align: center;
}

.tute-espectando strong {
    font-size: clamp(.82rem, 3.6vw, 1rem);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #eafff8;
    /* Un latido lento: dice «esto sigue vivo» sin robar la vista de la mesa. */
    animation: espectando-late 2.6s ease-in-out infinite;
}

.tute-espectando small {
    max-width: 22rem;
    font-size: .74rem;
    line-height: 1.35;
    color: rgb(234 255 248 / .6);
    text-wrap: balance;
}

@keyframes espectando-late {
    0%, 100% { opacity: .72; }
    50%      { opacity: 1; }
}

/* Quien respeta «menos movimiento» no necesita que nada palpite para entenderlo. */
@media (prefers-reduced-motion: reduce) {
    .tute-espectando strong { animation: none; opacity: 1; }
}

/* Las monedas cobradas al ganar, junto a la experiencia. */
.tute-final-monedas {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffd558;
}

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

/* ── Que la mesa vaya fina en un móvil normal ───────────────────────────────────────────
 *
 * Todo lo de aquí abajo es lo mismo: quitarle trabajo a la GPU sin quitar ni una
 * animación. En un gama baja de hace tres años el cuello de botella no es el JavaScript
 * —el turno lo decide el servidor— sino cuántos píxeles hay que volver a pintar en cada
 * fotograma.
 */

/*
 * El fondo de luces no se pinta mientras se juega.
 *
 * Son cuatro gradientes radiales enormes, en posición fija y animados durante minuto y
 * medio. Encima de ellos, la mesa ocupa la pantalla entera y es opaca: **no se ve ni un
 * píxel**. Se estaban componiendo dos capas de pantalla completa en cada fotograma para
 * nada. Fuera de la partida vuelven.
 */
body[data-jugando]::before,
body[data-jugando]::after { display: none; }

/*
 * Las cartas del abanico, en su propia capa y avisando de qué se mueve.
 *
 * `translate` es lo único que cambia al levantarlas, y decirlo por adelantado permite al
 * navegador dejar la carta rasterizada y limitarse a moverla. Sin esto vuelve a pintar el
 * dibujo entero en cada fotograma del gesto, que con diez cartas es lo que se nota.
 *
 * Solo en la mano: `will-change` en todo reserva memoria de vídeo para nada, y en un móvil
 * de gama baja esa memoria es justo lo que no sobra.
 */
.tute-mano .tute-carta { will-change: translate; }

/*
 * Y las de la baza, que se mueven al recogerla.
 *
 * `contain: paint` le dice al navegador que nada de esta carta se sale de su caja, así que
 * al repintarla no tiene que comprobar qué más pudo mancharse. Con cuatro cartas volando a
 * la vez, esa comprobación se hacía cuatro veces por fotograma.
 *
 * **Las del abanico no**, y esto costó encontrarlo: ahí la carta mide el canto y su dibujo
 * sobresale a propósito por la derecha, tapado por la siguiente. Con `contain: paint` el
 * navegador lo recortaba, y al levantar una carta salía cortada en vez de entera. La regla
 * llegó a decir `.tute-mesa .tute-carta`, y el abanico está dentro de la mesa.
 */
.tute-cruz .tute-carta,
.tute-baza .tute-carta { contain: paint; }

/*
 * Los dorsos de los demás no cambian nunca: se pintan una vez.
 *
 * Son hasta treinta imágenes iguales alrededor de la mesa. `content-visibility: auto` deja
 * que el navegador se salte su pintado cuando no han cambiado, que es siempre.
 */
.tute-dorsos { contain: layout paint; }

/*
 * Y con «menos movimiento» activado, se acaban las animaciones de adorno.
 *
 * No es solo accesibilidad: en un móvil justo de potencia, esa opción es también la forma
 * de decir «prefiero que vaya suave». Las animaciones que cuentan algo —la carta que se
 * echa, la baza que se recoge— se quedan; las que solo respiran, no.
 */
@media (prefers-reduced-motion: reduce) {
    .tute-cartel,
    .tute-espectando strong,
    .tute-turno-aro { animation: none !important; }
}