/* ============================================================================
   game.css — El tapete: mesa de 1v1 (#game-screen) y de 2v2 (#game-screen-4).
   Se carga DESPUÉS de style.css, style4.css y menu.css.

   Continúa el lenguaje de "tinta de medianoche" del menú (ver menu.css): fondo
   casi negro, tipografía con serifa en versalitas, filetes de 1px, el oro como
   único acento y el rojo reservado al órdago y a los errores. Aquí se añaden
   dos ideas propias de la mesa:

     · La CHAPA del jugador (.cm-plate): nombre, tanteo grande con serifa y las
       "piedras" (los amarrakos de toda la vida) en vez de un contador seco.
     · El TANTEADOR de lances (.cm-botes): Grande · Chica · Pares · Juego en
       cuatro columnas separadas por filetes, con el lance en curso en oro.

   Reparto de responsabilidades: style.css y style4.css mantienen la RETÍCULA
   (flex, grid, medidas, animaciones); este archivo pone el ASPECTO de las dos
   mesas y de los overlays de partida. Convenio de nombres: .cm-  (CallMus).
   ========================================================================== */

/* ============================================================
   1. La superficie de la mesa
   ============================================================ */

#game-screen:not(.hidden),
#game-screen-4:not(.hidden) {
    max-width: 100%;
    /* Arriba, aire para el aviso de turno y las esquinas. Alrededor, el recorte
       de la pantalla: con viewport-fit=cover el tapete llega hasta el borde
       físico del teléfono, así que la muesca, la barra de gestos y las esquinas
       redondeadas las esquiva el contenido. Fuera del móvil env() vale 0 y todo
       queda exactamente como estaba. */
    padding-top: max(18px, env(safe-area-inset-top));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(10px, env(safe-area-inset-left));
    background: var(--cm-ink);
    color: var(--cm-bone);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* La mesa de 2v2 se medía en 100vh, que en el móvil es la pantalla ENTERA
   incluida la barra del navegador: la fila de abajo se iba por debajo del
   pliegue. Con dvh mide lo que de verdad se ve (el 1v1 ya lo hacía). */
#game-screen-4:not(.hidden) { height: 100dvh; position: relative; overflow: hidden; }

/* ============================================================
   1 bis. Modo mesa: el tapete se comporta como una aplicación
   ============================================================ */

/* Lo enciende pantalla.js mientras se ve una mesa. Sirve para lo mismo que
   servía la pantalla completa: que deslizar el dedo sobre el tapete sea un
   mando del juego (las señas del 2v2) y no el gesto del navegador de mover la
   página, rebotar o tirar hacia abajo para recargar. Con esto se juega igual de
   bien sin pantalla completa, que en el iPhone no existe.

   `position: fixed` en el body es lo único que congela de verdad el documento
   en Safari; `overflow: hidden` a secas no le basta. */
html.modo-mesa, html.modo-mesa body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    /* manipulation = se conservan los toques y el pellizco, se pierde el
       "doble toque para acercar", que es el que se comía el segundo golpe. */
    touch-action: manipulation;
}
html.modo-mesa body {
    position: fixed;
    inset: 0;
    width: 100%;
}

/* Lo que sí se desplaza por dentro (el recuento largo del 1v1, la chuleta de
   señas, una ventana que no cabe) sigue haciéndolo, pero sin contagiarle el
   gesto a la página cuando llega a su tope. */
html.modo-mesa #center-table,
html.modo-mesa .cm-win-body,
html.modo-mesa .cm-ayuda,
html.modo-mesa #senas-denuncia,
html.modo-mesa #modal-overlay,
html.modo-mesa #game-log-4 {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Los botones fijos de las esquinas también esquivan el recorte: en apaisado
   la muesca del iPhone se come justo esa franja. */
html.modo-mesa .cm-corner { margin-right: env(safe-area-inset-right); }

/* Un halo de luz muy tenue en el centro, como una lámpara sobre el tapete:
   da profundidad sin recurrir a degradados de color ni a texturas. */
#game-screen:not(.hidden)::before,
#game-screen-4:not(.hidden)::before {
    content: "";
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 55% at 50% 45%,
                var(--cm-halo) 0%, transparent 70%);
}
/* Sólo el contenido en flujo se pone por delante del halo: los botones fijos de
   las esquinas y los overlays llevan su propio z-index y no deben tocarse. */
#game-screen > .area,
#game-screen > .turno-indicador,
#game-screen-4 > #score-bar-4,
#game-screen-4 > #mesa-4,
#game-screen-4 > #action-dock-4 { position: relative; z-index: 1; }

/* ============================================================
   2. Esquinas de la mesa: ayuda (izq.) y salir (dcha.)
   ============================================================ */

/* Reaprovechamos el botón de icono del menú; sólo cambian la posición y, en el
   de salir, el color al pasar por encima. */
.cm-mesa-btn {
    position: fixed; top: 13px; z-index: 1000;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; margin: 0;
    background: rgba(var(--cm-fg-rgb), 0.03);
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    color: var(--cm-bone);
    font-family: var(--cm-serif); font-size: 1.05rem; font-weight: 400;
    line-height: 1; cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    -webkit-tap-highlight-color: transparent;
}
.cm-mesa-btn:hover {
    background: rgba(var(--cm-gold-rgb), 0.09);
    border-color: var(--cm-gold);
    color: var(--cm-gold-hi);
}
.cm-mesa-ayuda { left: max(15px, env(safe-area-inset-left)); top: max(13px, env(safe-area-inset-top)); }

/* Área táctil de 44px sin agrandar los iconos de la mesa (⛶ · ✕ · 🔊 · ?): un
   pseudo transparente centrado extiende la zona sensible más allá del botón de
   34px. Los tres de la esquina derecha van a 47px de centro, así que sus áreas
   no se solapan. Igual que en el menú (.cm-icon-btn). */
.cm-mesa-btn::before, .btn-salir-mesa::before {
    content: "";
    position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
}

/* El «✕» de abandonar: mismo hueco de siempre (a la izquierda del de pantalla
   completa), pero en rojo al pasar por encima porque es una salida. */
.btn-salir-mesa {
    right: calc(62px + env(safe-area-inset-right));
    /* `margin: 0` porque style.css se lo da de 5px a TODO input y button, y este
       botón nunca lo reponía: quedaba 5px más bajo y 5px más a la izquierda que
       sus vecinos. Con tres botones en la esquina (⛶ · ✕ · 🔊) la escalerilla ya
       se veía, así que la fila se alinea en los 15px de .cm-corner. */
    margin: 0;
    top: max(15px, env(safe-area-inset-top));
    width: 34px; height: 34px;
    background: rgba(var(--cm-fg-rgb), 0.03);
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    color: var(--cm-dim);
    font-size: 1.05rem; font-weight: 400;
    box-shadow: none;
    transition: border-color .2s, color .2s, background .2s;
}
.btn-salir-mesa:hover {
    background: rgba(var(--cm-red-rgb), 0.12);
    border-color: var(--cm-red);
    color: var(--cm-red-txt-hi);
    transform: none;
}

/* El icono de silenciar: tercer hueco de la fila (⛶ 15px · ✕ 62px · sonido
   109px). Vive fuera de las dos pantallas de juego —lo quieren las dos igual—,
   así que se enseña por la clase que pantalla.js pone en <html> mientras hay
   tapete: en el menú no pinta nada. Ahora es un SVG de trazo (currentColor), así
   que obedece a `color` y se pone de oro al pasar por encima como sus vecinos:
   ya no hace falta desaturar ni realzar con brillo. */
.cm-mesa-sonido {
    display: none;
    right: calc(109px + env(safe-area-inset-right));
    top: max(15px, env(safe-area-inset-top));
}
html.modo-mesa .cm-mesa-sonido { display: inline-flex; }
/* Los iconos SVG de la mesa (sonido) al mismo tamaño que en el menú. */
.cm-mesa-btn .pinta { width: 18px; height: 18px; }

/* Silenciada: se apaga sola, sin tachados ni rojos. El icono ya dice que no
   suena; el botón sólo tiene que dejar de pedir atención. */
.cm-mesa-sonido.apagado {
    color: var(--cm-dim);
    border-color: var(--cm-hair);
    opacity: 0.75;
}
.cm-mesa-sonido.apagado:hover { opacity: 1; }

/* ============================================================
   3. La chapa del jugador (1v1)
   ============================================================ */

/* La chapa se estrecha respecto al ancho que traía #opponent-area / #my-area
   (800px) para quedar a la anchura de las cuatro cartas. Van con id porque el
   ancho antiguo lo fija #opponent-area / #my-area en style.css. */
#opponent-area.cm-plate, #my-area.cm-plate {
    display: flex; flex-direction: column; gap: 8px;
    max-width: 620px; padding: 0;
}

.cm-plate-head {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 5px 14px 5px 11px;
    box-sizing: border-box;
    background: rgba(var(--cm-fg-rgb), 0.018);
    border: 1px solid var(--cm-hair);
    border-left: 2px solid var(--cm-hair-2);
    border-radius: 2px;
    transition: border-color .25s, background .25s;
}

.cm-plate-who {
    display: flex; align-items: center; gap: 8px;
    min-width: 0; flex: 1;
}
.cm-plate-who .pinta { color: var(--cm-dim-2); }
#my-area .cm-plate-who .pinta { color: var(--cm-gold); }

.cm-plate-name {
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.95rem; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--cm-bone);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El rol (mano / postre) se escribe entre paréntesis desde app.js. */
.cm-plate-rol {
    font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cm-gold);
    white-space: nowrap;
}
.cm-plate-rol:empty { display: none; }

/* El tanteo: 32 grande con serifa, el /40 discreto al lado. */
.cm-plate-score {
    flex: 0 0 auto;
    display: flex; align-items: baseline; gap: 1px;
    font-family: var(--cm-serif);
}
.cm-pts {
    font-size: 1.5rem; line-height: 1;
    color: var(--cm-bone);
    font-variant-numeric: tabular-nums;
}
.cm-pts-max {
    font-size: 0.82rem;
    color: var(--cm-dim-2);
}

.cm-plate-games {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
}
.cm-plate-meta {
    font-size: 0.63rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cm-dim-2);
    white-space: nowrap;
}

/* Las piedras (amarrakos): una por partida necesaria para llevarse el match;
   se rellenan de oro a medida que se ganan. Las pinta pintarPiedras(). */
.cm-piedras { display: inline-flex; align-items: center; gap: 5px; }
.piedra {
    width: 8px; height: 8px;
    border: 1px solid var(--cm-hair-2); border-radius: 50%;
    transition: background .3s, border-color .3s;
}
.piedra.es-ganada {
    background: var(--cm-gold);
    border-color: var(--cm-gold);
}

/* --- A quién le toca hablar --- */
/* Los avisos viven justo antes de su chapa en el HTML, así que el hermano
   adyacente nos deja marcar la chapa activa sin tocar el JavaScript. */
#turno-rival:not(.hidden) + #opponent-area .cm-plate-head,
#mi-turno:not(.hidden) + #my-area .cm-plate-head {
    border-color: var(--cm-hair-2);
    border-left-color: var(--cm-gold);
    background: rgba(var(--cm-gold-rgb), 0.05);
}

#game-screen .turno-indicador {
    margin: 6px 0 3px;
    font-family: var(--cm-serif); font-weight: 400;
    /* Subido de 0.7rem: era el único aviso de "te toca" (el mensaje de fase se
       silencia) y pasaba desapercibido, sobre todo en móvil. */
    font-size: 0.85rem; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--cm-gold);
    animation: cm-respirar 2.4s ease-in-out infinite;
}
#turno-rival { color: var(--cm-dim) !important; animation: none !important; }

@keyframes cm-respirar {
    0%, 100% { opacity: 0.62; }
    50%      { opacity: 1; }
}

/* --- Las cartas --- */
.cards-placeholder {
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cm-dim);   /* dim-2 (#6B6862) sobre ink daba ~3.5:1 < AA; dim sube a ~5.3:1 */
}
/* Sin sombra: la carta ya destaca sola sobre la tinta, y sobre el halo del
   centro cualquier sombra negra se recortaba como un cuadrado sucio. */
#game-screen .carta img {
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    box-shadow: none;
}
#game-screen .carta.seleccionada img {
    border-color: var(--cm-gold);
    box-shadow: 0 6px 30px rgba(var(--cm-gold-rgb), 0.3);
}
#my-cards:not(:has(.carta)) {
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cm-dim);   /* contraste AA (ver .cards-placeholder) */
}

/* ------------------------------------------------------------
   3 bis. Chispa de la mesa (portado del 2v2 → style4.css)
   ------------------------------------------------------------
   Reparto, giro del recuento, "+N" flotante y drama del órdago.
   Autocontenido (keyframes propios) para no depender de style4.css. */

/* Reparto: cada carta cae desde arriba de la mesa. */
@keyframes cmDeal1v1 {
    from { transform: translateY(-90px) scale(0.6); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}
#game-screen .carta.cm-deal { animation: cmDeal1v1 0.42s ease-out both; }

/* Recuento: la mano del rival se revela con un giro 3D. */
@keyframes cmFlip1v1 {
    from { transform: rotateY(180deg); }
    to   { transform: rotateY(0deg); }
}
#game-screen .carta.cm-flip img {
    animation: cmFlip1v1 0.5s ease-out both;
    backface-visibility: hidden;
}

/* "+N" flotante sobre el marcador que acaba de subir. */
@keyframes cmFloat1v1 {
    0%   { transform: translateY(0);     opacity: 1; }
    100% { transform: translateY(-52px); opacity: 0; }
}
.cm-pts-flotantes {
    position: fixed; z-index: 1400;
    font-family: var(--cm-serif); font-size: 1.7rem; font-weight: 700;
    pointer-events: none;
    animation: cmFloat1v1 0.9s ease-out forwards;
}

/* Órdago: temblor de la mesa + destello rojo a pantalla completa. */
@keyframes cmShake1v1 {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-7px); }
    80% { transform: translateX(6px); }
}
#game-screen.cm-ordago-shake { animation: cmShake1v1 0.4s; }

@keyframes cmFlash1v1 { 0% { opacity: 0.5; } 100% { opacity: 0; } }
#cm-ordago-flash {
    position: fixed; inset: 0; z-index: 1500;
    background: var(--cm-red); opacity: 0; pointer-events: none;
    animation: cmFlash1v1 0.45s ease-out forwards;
}

/* ============================================================
   4. El centro de la mesa
   ============================================================ */

/* Sin mensaje no reserva línea: la mesa se aprieta sola en pantallas cortas. */
#game-log:empty, #game-log-4:empty { display: none; }
#game-log, #game-log-4 {
    margin: 0 0 4px;
    font-family: var(--cm-serif);
    font-size: 1rem; line-height: 1.6; letter-spacing: 0.03em;
    color: var(--cm-dim);
    min-height: 1.2em;
}
/* «Habla X» en el centro: misma voz que el aviso de turno del 1v1. */
#game-log-4.es-habla {
    color: var(--cm-gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.85rem;
    min-height: 0;
}
#game-log b, #game-log-4 b { color: var(--cm-bone); font-weight: 400; }
#game-log i, #game-log em { color: var(--cm-dim-2); }

/* Rótulo de transición ("Nadie tiene Pares", "Fase de recuento"…) */
.cm-transicion {
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.12rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cm-bone);
}
/* Recuento: el titular y los dos remates (gana la partida / gana el match). */
.cm-res-title {
    display: inline-block; margin-bottom: 6px;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--cm-dim);
}
.cm-res-big {
    display: inline-block; margin-top: 8px;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.3rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cm-gold);
}
.cm-nota-mesa {
    font-size: 0.78rem; font-style: normal;
    color: var(--cm-dim-2);
}

/* --- El tanteador de lances --- */
#betting-log, #betting-log-4 {
    width: 100%; max-width: 460px;
    box-sizing: border-box;
    margin: 6px auto 12px;
    padding: 0;
    background: rgba(var(--cm-shade-rgb), 0.28);
    border: 1px solid var(--cm-hair);
    border-radius: 2px;
    box-shadow: none;
}
#betting-log-4 { max-width: 100%; }

/* La apuesta en el aire. Sin apuesta no ocupa nada (antes reservaba 65px de
   hueco vacío que hundía la mesa). */
.cm-aire {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--cm-hair);
    text-align: center;
}
.cm-aire:empty { display: none; }
.cm-aire-vista {
    margin: 0;
    font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cm-dim-2);
}
.cm-aire-vista b {
    font-family: var(--cm-serif); font-size: 1.05rem; letter-spacing: 0.05em;
    color: var(--cm-bone); font-weight: 400;
}
.cm-aire-sube {
    margin: 0;
    font-family: var(--cm-serif);
    font-size: 1.05rem; letter-spacing: 0.08em;
    color: var(--cm-dim);
}
.cm-aire-sube.es-mia { color: var(--cm-gold-hi); }

.cm-botes { display: flex; }
.cm-bote {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px 9px;
    border-left: 1px solid var(--cm-hair);
    transition: background .25s;
}
.cm-bote:first-child { border-left: 0; }
.cm-bote-fase {
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cm-dim-2);
    white-space: nowrap;
    transition: color .25s;
}
.cm-bote-val {
    font-family: var(--cm-serif);
    font-size: 1.3rem; line-height: 1;
    color: var(--cm-dim);
    font-variant-numeric: tabular-nums;
    transition: color .25s;
}
/* El lance que se está jugando: en oro, con su filete debajo. */
.cm-bote.is-activa {
    background: rgba(var(--cm-gold-rgb), 0.06);
    box-shadow: inset 0 -2px 0 var(--cm-gold);
}
.cm-bote.is-activa .cm-bote-fase { color: var(--cm-gold-hi); }
.cm-bote.is-activa .cm-bote-val { color: var(--cm-bone); }
/* Lance ya resuelto por un deje: 3(+) lo ganamos, 3(−) lo perdimos. */
.cm-bote.es-deje .cm-bote-val { color: var(--cm-bone); }
.cm-bote-signo { font-size: 0.7em; vertical-align: super; margin-left: 1px; }
.cm-bote-signo.es-mas  { color: var(--cm-live); }
.cm-bote-signo.es-menos { color: var(--cm-red); }

/* ---- El recuento SOBRE el tanteador (app.js: reproducirRecuentoVisual) ---- */
/* La nota bajo el valor: lo que el recuento AÑADE al bote (pares/juego/punto).
   Reserva su línea siempre (aunque esté vacía en apuestas) para que el
   tanteador no cambie de alto al ir apareciendo durante la cuenta. */
.cm-bote-sub {
    font-family: var(--cm-serif);
    font-size: 0.62rem; line-height: 1; letter-spacing: 0.04em;
    color: var(--cm-dim-2);
    min-height: 0.72em;
}
/* Lance ya resuelto en el recuento: se queda encendido en el color del ganador.
   El color lo pone app.js en línea (oro/acero en 1v1; equipo A/B en 2v2), así
   que aquí todo tira de `currentColor` y vale para los dos modos. */
.cm-bote.es-ganado { background: rgba(var(--cm-fg-rgb), 0.05); box-shadow: inset 0 -2px 0 currentColor; }
.cm-bote.es-ganado .cm-bote-fase,
.cm-bote.es-ganado .cm-bote-val,
.cm-bote.es-ganado .cm-bote-sub { color: currentColor; }
.cm-bote.cm-bote-resuelto { animation: cmBoteLatido 0.5s ease-out; }
@keyframes cmBoteLatido {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}
/* El tanteo de la chapa (1v1 .cm-pts / 2v2 .pts) da un latido al recibir puntos. */
.cm-tanteo-pulse { animation: cmTanteoPulse 0.5s ease-out; display: inline-block; }
@keyframes cmTanteoPulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/* Espacio reservado: durante el recuento el hueco de los botones se mantiene
   aunque estén ocultos, para que "Siguiente ronda" no dé un salto al aparecer
   al final de la cuenta (empujando las cartas). Gana a `.hidden` (!important)
   por especificidad. */
#center-table.cm-recuento #action-buttons.hidden,
#game-screen-4:has(#center-table-4.cm-recuento) #action-buttons-4.hidden {
    display: flex !important;
    min-height: 48px;
}
#center-table-4.cm-recuento #game-log-4 { display: none; }
#action-dock-4 { flex-shrink: 0; }
#game-screen-4:has(#center-table-4.cm-recuento) #btn-volver-menu-4:not(.hidden) {
    border-color: var(--cm-bone);
    color: var(--cm-bone);
}

/* ============================================================
   5. Los botones de la mesa
   ============================================================ */

#game-screen button:not(.cm-mesa-btn):not(.btn-salir-mesa),
:is(#center-table-4, #action-dock-4) button {
    margin: 0;
    padding: 11px 20px;
    background: rgba(var(--cm-fg-rgb), 0.025);
    border: 1px solid var(--cm-hair-2);
    border-radius: 2px;
    color: var(--cm-bone);
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    -webkit-tap-highlight-color: transparent;
}
#game-screen button:not(.cm-mesa-btn):not(.btn-salir-mesa):hover,
:is(#center-table-4, #action-dock-4) button:hover {
    background: rgba(var(--cm-gold-rgb), 0.1);
    border-color: var(--cm-gold);
    color: var(--cm-gold-hi);
}
#game-screen button:disabled,
:is(#center-table-4, #action-dock-4) button:disabled {
    opacity: 0.35; cursor: default;
    background: rgba(var(--cm-fg-rgb), 0.025) !important;
    border-color: var(--cm-hair) !important;
    color: var(--cm-dim) !important;
}

/* La acción que hace avanzar la partida va en oro macizo: repartir, siguiente
   ronda, ver la apuesta. Sólo hay una a la vez, así que no compiten. */
#game-screen :is(#btn-deal, #btn-next-round, #btn-descartar, #btn-ver),
:is(#center-table-4, #action-dock-4) :is(#btn-deal-4, #btn-next-round-4, #btn-descartar-4, #btn-ver-4) {
    background: var(--cm-gold-fill);
    border-color: var(--cm-gold-fill);
    color: var(--cm-on-gold);
}
#game-screen :is(#btn-deal, #btn-next-round, #btn-descartar, #btn-ver):hover,
:is(#center-table-4, #action-dock-4) :is(#btn-deal-4, #btn-next-round-4, #btn-descartar-4, #btn-ver-4):hover {
    background: var(--cm-gold-fill-hi);
    border-color: var(--cm-gold-fill-hi);
    color: var(--cm-on-gold);
}

/* "Todas" acompaña a Descartar, no compite con él: el oro macizo se lo queda la
   acción que cierra la jugada y ésta va en oro perfilado. Es más estrecha
   porque su rótulo es una palabra y así el par entra en una línea en móvil. */
#game-screen #btn-todas,
:is(#center-table-4, #action-dock-4) #btn-todas-4 {
    padding-left: 14px; padding-right: 14px;
    background: rgba(var(--cm-gold-rgb), 0.07);
    border-color: rgba(var(--cm-gold-rgb), 0.45);
    color: var(--cm-gold-hi);
}
#game-screen #btn-todas:hover,
:is(#center-table-4, #action-dock-4) #btn-todas-4:hover {
    background: rgba(var(--cm-gold-rgb), 0.18);
    border-color: var(--cm-gold);
}

/* El órdago es lo único rojo de la mesa: se juega la partida entera. */
#game-screen :is(#btn-ordago, #btn-ordago-resp),
:is(#center-table-4, #action-dock-4) :is(#btn-ordago-4, #btn-ordago-resp-4) {
    border-color: rgba(var(--cm-red-rgb), 0.55);
    color: var(--cm-red-txt);
}
#game-screen :is(#btn-ordago, #btn-ordago-resp):hover,
:is(#center-table-4, #action-dock-4) :is(#btn-ordago-4, #btn-ordago-resp-4):hover {
    background: var(--cm-red);
    border-color: var(--cm-red);
    color: #FFF6F5;
}

/* «¿Qué hago?»: no es una jugada, es una pregunta. Va perfilado y en cursiva,
   separado de los botones que sí juegan por un filete. */
#action-dock-4 #btn-consultar-4 {
    background: transparent;
    border-color: var(--cm-hair-2);
    color: var(--cm-dim);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.06em;
    font-size: 0.86rem;
}
#action-dock-4 #btn-consultar-4:hover {
    border-color: var(--cm-gold);
    color: var(--cm-gold-hi);
    background: rgba(var(--cm-gold-rgb), 0.06);
}
/* Las respuestas que puede dar la pareja: el órdago, rojo como siempre. */
#action-dock-4 .btn-consejo-4.es-ordago {
    border-color: rgba(var(--cm-red-rgb), 0.55);
    color: var(--cm-red-txt);
}
#action-dock-4 .btn-consejo-4.es-ordago:hover {
    background: var(--cm-red);
    border-color: var(--cm-red);
    color: var(--cm-on-red);
}
#action-dock-4 .consulta-etiqueta-4 {
    font-family: var(--cm-serif);
    font-style: italic;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    color: var(--cm-dim);
    margin-right: 2px;
}
/* El consejo recibido, marcado en el botón de quien preguntó: un filete de oro
   alrededor. Indica, no obliga (el botón sigue igual de pulsable). */
#action-dock-4 button.cm-consejo {
    outline: 1px solid var(--cm-gold);
    outline-offset: 3px;
}

/* Volver al menú al acabar el match: un botón de salida, no de juego. */
#game-screen #btn-volver-menu,
:is(#center-table-4, #action-dock-4) #btn-volver-menu-4 {
    background-color: transparent !important;
    border-color: var(--cm-hair-2);
    color: var(--cm-dim);
}
#game-screen #btn-volver-menu:hover,
:is(#center-table-4, #action-dock-4) #btn-volver-menu-4:hover {
    border-color: var(--cm-bone);
    color: var(--cm-bone);
    background-color: transparent !important;
}

/* ¡Pedrete! aparece de pronto en cualquier turno: merece un guiño en oro. */
#game-screen #btn-pedrete,
:is(#center-table-4, #action-dock-4) #btn-pedrete-4 {
    border-color: rgba(var(--cm-gold-rgb), 0.5);
    color: var(--cm-gold-hi);
}

/* La cantidad que se envida o se sube. */
#game-screen input[type="number"],
:is(#center-table-4, #action-dock-4) input[type="number"] {
    width: 58px; margin: 0;
    padding: 10px 4px;
    background: var(--cm-ink-3);
    border: 1px solid var(--cm-hair-2);
    border-radius: 2px;
    color: var(--cm-bone);
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.15rem; text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
#game-screen input[type="number"]:focus,
:is(#center-table-4, #action-dock-4) input[type="number"]:focus {
    outline: none; border-color: var(--cm-gold);
}
#game-screen input[type="number"]::-webkit-outer-spin-button,
#game-screen input[type="number"]::-webkit-inner-spin-button,
:is(#center-table-4, #action-dock-4) input[type="number"]::-webkit-outer-spin-button,
:is(#center-table-4, #action-dock-4) input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* El centro es una columna flexible con scroll propio: si algo crece (el
   recuento va escribiendo línea a línea), sus vecinos no deben encogerse por
   debajo de su contenido o el texto se monta encima del tanteador. */
#center-table > * { flex: 0 0 auto; }

#action-buttons, #action-buttons-4 { gap: 9px; }
#action-buttons {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}

/* El importe va pegado a su acción (2 | ENVIDAR): así se lee que ese número es
   lo que se envida, y no un dato suelto de la mesa. */
.panel-apuestas {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 9px;
}
.panel-apuestas > * { margin-left: 0; }

/* --- Selector de importe con −/+ (1v1 y 2v2) ---
   El input a secas era diminuto y en el móvil abría el teclado. Ahora se ajusta
   a toques con dos botones grandes a los lados, formando una barra segmentada
   −│nº│+│ENVIDAR que se sigue leyendo como "esta cifra es lo que envidas".
   El importe se puede seguir escribiendo (el input queda en medio).
   `:is(#game-screen, #center-table-4, #action-dock-4)` cubre las dos mesas sin duplicar. */
.cm-apuesta { display: inline-flex; align-items: stretch; }
.cm-stepper { display: inline-flex; align-items: stretch; }
/* Los :not() igualan la especificidad de la regla genérica de botones del juego
   (que además usa !important en móvil), para que estas medidas manden. */
:is(#game-screen, #center-table-4, #action-dock-4) .cm-step:not(.cm-mesa-btn):not(.btn-salir-mesa) {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-width: 44px;
    padding: 0 !important;
    font-size: 1.35rem !important; letter-spacing: 0 !important; line-height: 1;
    border-radius: 0;
}
:is(#game-screen, #center-table-4, #action-dock-4) .cm-stepper .cm-step:first-child { border-radius: 2px 0 0 2px; }
/* Piezas centrales sin redondear y con el filete compartido (‑1px de solape). */
:is(#game-screen, #center-table-4, #action-dock-4) .cm-stepper :is(#in-envidar, #in-subir, #in-envidar-4, #in-subir-4) {
    border-radius: 0; width: 52px; margin-left: -1px;
}
:is(#game-screen, #center-table-4, #action-dock-4) .cm-stepper .cm-step:last-child { margin-left: -1px; }
/* La acción cierra la barra por la derecha. */
:is(#game-screen, #center-table-4, #action-dock-4) .cm-apuesta :is(#btn-envidar, #btn-subir, #btn-envidar-4, #btn-subir-4) {
    margin-left: -1px;
    border-left: 1px solid var(--cm-hair-2);
    border-radius: 0 2px 2px 0;
}
/* Al resaltar, el segmento se pone por delante para que su filete dorado no lo
   tape el vecino con el que comparte borde. */
:is(#game-screen, #center-table-4, #action-dock-4) .cm-step:hover,
:is(#game-screen, #center-table-4, #action-dock-4) .cm-stepper :is(#in-envidar, #in-subir, #in-envidar-4, #in-subir-4):focus { position: relative; z-index: 1; }
/* En el 1v1 el tanteador va ENCIMA de los botones (como en el 2v2): primero se
   lee cómo va el lance y luego se decide. */
#center-table { gap: 2px; }

/* ------------------------------------------------------------
   Anti-mispulsación (§05): blindaje de la botonera de decisión
   ------------------------------------------------------------
   Cuando el rival canta, la botonera cambia bajo el dedo (el panel pasa de
   iniciar→responder, o cambian Ver/Subir/No ver/Órdago). Un toque que ya venía
   en camino dispararía la acción NUEVA por accidente. Al cambiar, la botonera
   se blinda un instante: ignora los toques y entra con un leve fundido para que
   se note que ha cambiado antes de volver a tocar. Lo pone/quita app.js. */
#game-screen .cm-blindada,
#game-screen-4 .cm-blindada { pointer-events: none; }
#game-screen .cm-blindada,
#game-screen-4 .cm-blindada { animation: cmBotoneraEntra 0.34s ease-out; }
@keyframes cmBotoneraEntra {
    from { opacity: 0.25; transform: translateY(5px); }
    to   { opacity: 1;    transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    /* Sin movimiento, pero el blindaje (ignorar toques) sigue en pie: es
       protección, no adorno. */
    #game-screen .cm-blindada,
    #game-screen-4 .cm-blindada { animation: none; }
}

/* ============================================================
   6. Mesa de 2v2: marcador de equipos
   ============================================================ */

#score-bar-4 { gap: 14px; margin: 2px 0 8px; }

.team-score {
    gap: 11px;
    padding: 6px 14px;
    background: rgba(var(--cm-fg-rgb), 0.018);
    border: 1px solid var(--cm-hair) !important;
    border-left: 2px solid var(--cm-hair-2) !important;
    border-radius: 2px;
    font-weight: 400;
}
#score-team-a { border-left-color: var(--equipo-a) !important; }
#score-team-b { border-left-color: var(--equipo-b) !important; }
/* Mi equipo: el fondo se ilumina un punto, sin sombras de color. */
.team-score.mi-equipo {
    box-shadow: none;
    background: rgba(var(--cm-fg-rgb), 0.055);
    border-color: var(--cm-hair-2) !important;
}

.team-score .team-label {
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.team-score .team-pts {
    font-family: var(--cm-serif);
    font-size: 1.35rem; line-height: 1;
    color: var(--cm-bone);
    font-variant-numeric: tabular-nums;
}
.team-score .team-pts .cm-pts-max { font-size: 0.72rem; }
/* El contador de partidas es ahora una hilera de piedras (ver pintarPiedras). */
.team-score .team-games {
    background: none; color: inherit;
    min-width: 0; height: auto;
    border-radius: 0;
    font-size: 1em;
}
#score-mejor-de-4 {
    opacity: 1;
    font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cm-dim-2);
}

/* ============================================================
   7. Mesa de 2v2: los cuatro asientos
   ============================================================ */

/* Los asientos no llevan caja: en la rejilla ocupan toda su fila y un marco
   los convertía en paneles enormes. Lo que se marca es el nombre. */
.seat-4 {
    padding: 7px 6px;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.seat-4.ausente { opacity: 0.35; }

/* A quién le toca: un pip de oro junto al nombre. El cuerpo no lleva caja:
   en el móvil un panel alrededor de las cartas parecía un recuadro vacío. */
.seat-4.turno-activo { animation: none; }
.seat-4.turno-activo .seat-cuerpo {
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.seat-4.turno-activo .seat-name::before {
    content: "";
    width: 7px; height: 7px; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--cm-gold);
    box-shadow: 0 0 8px var(--cm-gold);
    animation: cm-respirar 2.4s ease-in-out infinite;
}

.seat-name {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; min-width: 0;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.8rem; letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--cm-bone);
}
/* Color RELATIVO al espectador (table4.js añade equipo-propio/equipo-rival):
   tu equipo en oro, el rival en acero, igual para los 4 puntos de vista. */
.seat-4.equipo-propio .seat-name { color: var(--equipo-a); }
.seat-4.equipo-rival  .seat-name { color: var(--equipo-b); }

/* Ficha de Mano: el botón del dealer. Una palabra, siempre visible, jamás
   mezclada con el nombre. */
.seat-dealer {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2em;
    height: 1.35em;
    padding: 0 7px;
    border: 1.5px solid var(--cm-gold);
    border-radius: 999px;
    background: var(--cm-ink);
    color: var(--cm-gold);
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
    line-height: 1;
}
.seat-dealer[hidden] { display: none !important; }

/* «Tú hablas»: sólo en tu asiento, cuando te toca. Es el aviso que no se
   puede perder; en los demás basta el halo. */
.seat-habla {
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--cm-gold);
    animation: cm-respirar 2.4s ease-in-out infinite;
}
#seat-bottom.turno-activo .seat-habla { display: block; }

.chip {
    padding: 2px 8px;
    background: none;
    border: 1px solid var(--cm-hair);
    border-radius: 2px;
    color: var(--cm-dim);
    font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.chip.si {
    background: rgba(var(--cm-gold-rgb), 0.1);
    border-color: rgba(var(--cm-gold-rgb), 0.45);
    color: var(--cm-gold-hi);
    font-weight: 400;
}
.chip.no { background: none; border-color: var(--cm-hair); color: var(--cm-dim-2); }
.chip.descartes {
    background: none;
    border-color: rgba(var(--cm-steel-rgb), 0.4);
    color: var(--cm-steel-txt);
}

.seat-cards .carta-4 img {
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    box-shadow: none;
}
#seat-bottom .carta-4.seleccionada img {
    border-color: var(--cm-gold);
    box-shadow: 0 5px 24px rgba(var(--cm-gold-rgb), 0.3);
}

/* --- Lo que canta cada jugador --- */
/* La colocación y la animación las pone style4.css; aquí sólo el aspecto: una
   plaquita de la misma tinta que el resto de la mesa. */
.accion-burbuja {
    padding: 4px 11px;
    background: var(--cm-ink-2);
    border: 1px solid var(--cm-hair-2);
    border-radius: 2px;
    box-shadow: 0 4px 14px rgba(var(--cm-shade-rgb), 0.45);
    font-family: var(--cm-serif);
    font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--cm-bone);
}
/* El equipo de quien canta, en el filete: de un vistazo se ve de qué lado va. */
.seat-4.equipo-propio .accion-burbuja { border-color: rgba(var(--cm-gold-rgb), 0.45); }
.seat-4.equipo-rival  .accion-burbuja { border-color: rgba(var(--cm-steel-rgb), 0.45); }
/* Cortar el mus abre la mano: merece destacar sin llegar a ser un órdago. */
.accion-burbuja.corta { color: var(--cm-gold-hi); }
/* La vuelta de cantes previa a Pares y a Juego: se dice en voz alta, pero no es
   una jugada. Va en la misma plaquita, sólo que sin peso; y el «no» aún menos,
   que es lo que más se repite y no aporta nada mirarlo. */
.accion-burbuja.cante { color: var(--cm-bone); opacity: 0.92; }
.accion-burbuja.cante-no { color: var(--cm-dim); opacity: 0.75; }
/* El órdago y el pedrete se juegan la partida entera. */
.accion-burbuja.fuerte {
    border-color: rgba(var(--cm-red-rgb), 0.7) !important;
    color: var(--cm-red);
    font-size: 0.72rem; letter-spacing: 0.16em;
}

/* «¿Qué hago?» y el consejo de la pareja (pintarBurbujasConsulta4). La pregunta
   va en cursiva y apagada, que es una duda y no una jugada; el consejo, en
   hueso como un cante más. Se quedan puestas mientras dura el turno. */
.accion-burbuja.consulta-burbuja.pregunta {
    font-style: italic;
    color: var(--cm-dim);
}
.accion-burbuja.consulta-burbuja.consejo { color: var(--cm-bone); }

/* --- El centro de la mesa de 2v2 --- */
/* El centro es tapete, no un panel: el recuadro alrededor del tanteador
   dejaba un hueco vacío que comía a los asientos. El filete va SÓLO en la
   rejilla Grande/Chica/Pares/Juego. */
#center-table-4 {
    gap: 6px;
    padding: 4px 6px;
    background: none;
    border: 0;
    border-radius: 0;
}
#game-log-4:empty { display: block; visibility: hidden; }
#center-table-4:has(#betting-log-4 .cm-aire p) #game-log-4 {
    visibility: hidden;
}
#betting-log-4 { background: none; border: 0; margin: 0; padding: 0; }
#betting-log-4 .cm-botes {
    border: 1px solid var(--cm-hair);
    border-radius: 2px;
    background: rgba(var(--cm-shade-rgb), 0.18);
}
/* Envite en el aire: encima del log (misma línea reservada), no sobre las
   cartas de la pareja. */
#betting-log-4 .cm-aire {
    position: absolute;
    left: 6px; right: 6px;
    top: 4px;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: none;
    z-index: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 6px 12px;
}
#betting-log-4 .cm-aire p { margin: 0; }

/* Aviso de turno: nada hasta que quedan 10 s, y sólo si te toca. A la
   izquierda del muelle, un número en oro — sin barra permanente. */
#action-dock-4 > #turno-timer-4 {
    position: absolute;
    left: max(10px, env(safe-area-inset-left));
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    background: none;
    z-index: 8;
    pointer-events: none;
    font-family: var(--cm-serif);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--cm-gold);
    opacity: 0.8;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
#action-dock-4 > #turno-timer-4.urgente {
    color: var(--cm-red);
    opacity: 0.9;
}

.puntos-flotantes {
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.5em; letter-spacing: 0.05em;
}

/* ============================================================
   8. Overlays de partida (pausa, salida, sustituciones)
   ============================================================ */

.overlay-partida {
    background: rgba(var(--cm-veil-rgb), 0.86);
    backdrop-filter: blur(6px);
}

.overlay-partida .caja-overlay,
.cm-pausa-caja {
    position: relative;
    max-width: 430px; width: 100%;
    padding: 26px 26px 22px;
    background: var(--cm-ink-2);
    border: 1px solid var(--cm-hair-2);
    border-radius: 2px;
    box-shadow: 0 24px 60px rgba(var(--cm-shade-rgb), 0.75);
    text-align: center;
}
.overlay-partida .caja-overlay::before,
.cm-pausa-caja::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--cm-gold), transparent);
    opacity: 0.75;
}

.overlay-partida h3, .cm-pausa-caja h3 {
    margin: 0 0 12px;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.1rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cm-bone);
}
.overlay-partida p, .cm-pausa-caja p {
    margin: 0 0 8px;
    font-size: 0.86rem; line-height: 1.6;
    color: var(--cm-dim);
}
.overlay-partida .cuenta-atras, .cm-pausa-cont {
    margin: 12px 0 0;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.35rem; letter-spacing: 0.1em;
    color: var(--cm-gold);
}

/* El giro de espera, en un filete de oro. */
.overlay-partida .spinner-reconexion, .cm-pausa-spinner {
    width: 34px; height: 34px;
    margin: 0 auto 18px;
    border: 1px solid var(--cm-hair-2);
    border-top-color: var(--cm-gold);
    border-radius: 50%;
    animation: girar-reconexion 1.1s linear infinite;
}

.acciones-overlay { gap: 9px; margin-top: 20px; }
.acciones-overlay button {
    min-width: 130px;
    padding: 11px 16px;
    background: transparent;
    border: 1px solid var(--cm-hair-2);
    border-radius: 2px;
    color: var(--cm-bone);
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
    transition: background .2s, border-color .2s, color .2s;
}
.acciones-overlay button:hover { filter: none; }
.acciones-overlay .btn-ok {
    background: var(--cm-gold-fill); border-color: var(--cm-gold-fill); color: var(--cm-on-gold);
}
.acciones-overlay .btn-ok:hover {
    background: var(--cm-gold-fill-hi); border-color: var(--cm-gold-fill-hi);
}
.acciones-overlay .btn-peligro {
    background: transparent; border-color: rgba(var(--cm-red-rgb), 0.55); color: var(--cm-red-txt);
}
.acciones-overlay .btn-peligro:hover {
    background: var(--cm-red); border-color: var(--cm-red); color: #FFF6F5;
}
.acciones-overlay .btn-neutro {
    background: transparent; border-color: var(--cm-hair-2); color: var(--cm-dim);
}
.acciones-overlay .btn-neutro:hover { border-color: var(--cm-bone); color: var(--cm-bone); }

/* Pausa por caída de un jugador (antes iba con estilos en línea en el HTML). */
.cm-pausa {
    position: absolute; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(var(--cm-veil-rgb), 0.86);
    backdrop-filter: blur(6px);
}
.cm-pausa.hidden { display: none; }

/* ============================================================
   9. Responsivo
   ============================================================ */

/* Con la ventana estrecha, la chapa del rival llegaría por debajo de los
   botones fijos de las esquinas: entonces —y sólo entonces— se les reserva una
   banda arriba. En pantallas anchas no hace falta y sería alto desperdiciado. */
@media screen and (max-width: 830px) {
    #game-screen:not(.hidden), #game-screen-4:not(.hidden) { padding-top: 52px; }
}

@media screen and (max-width: 600px) {
    .cm-plate-head { gap: 9px; padding: 6px 10px 6px 9px; }
    .cm-plate-name { font-size: 0.82rem; letter-spacing: 0.09em; }
    .cm-pts { font-size: 1.35rem; }
    .cm-plate-meta { display: none; }   /* las piedras ya lo cuentan todo */
    .cm-bote { padding: 8px 2px 9px; }
    .cm-bote-fase { font-size: 0.56rem; letter-spacing: 0.08em; }
    .cm-bote-val { font-size: 1.1rem; }
    #game-screen .turno-indicador { font-size: 0.74rem; letter-spacing: 0.18em; }

    #game-screen button:not(.cm-mesa-btn):not(.btn-salir-mesa),
    :is(#center-table-4, #action-dock-4) button {
        padding: 9px 13px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.12em;
    }
    #game-screen input[type="number"],
    :is(#center-table-4, #action-dock-4) input[type="number"] { width: 48px; padding: 8px 2px !important; font-size: 1rem !important; }
    /* El importe se estrecha un poco en móvil para ganar sitio; los símbolos −/+
       ya los mantiene grandes y a 44px la regla principal del stepper. */
    :is(#game-screen, #center-table-4, #action-dock-4) .cm-stepper :is(#in-envidar, #in-subir, #in-envidar-4, #in-subir-4) { width: 46px; }

    .seat-name { font-size: 0.7rem; letter-spacing: 0.06em; }
    .seat-dealer { font-size: 0.52rem; letter-spacing: 0.1em; height: 1.25em; padding: 0 5px; }
    .seat-habla { font-size: 0.74rem; letter-spacing: 0.16em; }
    .team-score .team-pts { font-size: 1.15rem; }
    #center-table-4 { padding: 4px 6px; }
}

/* Ventana baja (portátil pequeño, móvil en horizontal): el centro de la mesa
   tiene que caber sin scroll, así que se recorta todo el aire sobrante. */
@media screen and (max-height: 620px) {
    #opponent-area.cm-plate, #my-area.cm-plate { gap: 5px; }
    .cm-plate-head { padding: 3px 12px 3px 9px; }
    .cm-pts { font-size: 1.25rem; }
    #center-table { padding: 2px 0 !important; }
    #betting-log { margin: 4px auto 8px; }
    .cm-aire { padding: 8px 10px; }
    .cm-bote { padding: 6px 3px 7px; gap: 3px; }
    .cm-bote-val { font-size: 1.15rem; }
    #game-screen .turno-indicador { margin: 3px 0 2px; }
}

/* ============================================================
   9 bis. 2v2 en el teléfono: se juega en horizontal
   ============================================================ */

/* Velo de «gira el teléfono». Sólo en retrato estrecho, encima del tapete
   (por debajo del sorteo de la Mano, que es un instante). */
.giro-mesa {
    display: none;
    position: absolute; inset: 0; z-index: 80;
    align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(var(--cm-ink-rgb), 0.94);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}
.giro-mesa-caja {
    max-width: 280px; width: 100%;
    padding: 28px 22px 24px;
    background: var(--cm-ink-2);
    border: 1px solid var(--cm-hair-2);
    border-radius: 2px;
    text-align: center;
}
.giro-mesa-icono {
    display: inline-flex; color: var(--cm-gold);
    width: 48px; height: 48px; margin-bottom: 12px;
}
.giro-mesa-icono svg { width: 48px; height: 48px; }
.giro-mesa-icono svg rect {
    transform-box: fill-box;
    transform-origin: center;
    animation: giroMesaTel 2.2s ease-in-out infinite;
}
.giro-mesa-titulo {
    margin: 0 0 6px;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cm-bone);
}
.giro-mesa-sub {
    margin: 0;
    font-size: 0.88rem; line-height: 1.45;
    color: var(--cm-dim);
}
@keyframes giroMesaTel {
    0%, 18%  { transform: rotate(0deg); }
    42%, 100% { transform: rotate(90deg); }
}

@media (orientation: portrait) and (max-width: 700px) {
    #game-screen-4:not(.hidden) .giro-mesa { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
    .giro-mesa-icono svg rect { animation: none; transform: rotate(90deg); }
}

/* Mesa apaisada: el tapete no reserva la banda de 52px (no sobra alto) y se
   compacta el aspecto sin cambiar la paleta ni la jerarquía oro / filete. */
@media (orientation: landscape) and (max-height: 540px) {
    #game-screen-4:not(.hidden) {
        padding-top: max(6px, env(safe-area-inset-top));
        padding-right: max(6px, env(safe-area-inset-right));
        padding-bottom: max(4px, env(safe-area-inset-bottom));
        padding-left: max(6px, env(safe-area-inset-left));
        overflow: hidden;
    }
    #score-bar-4 {
        flex-shrink: 0;
        gap: 8px;
        /* ? a la izq. (15+34); 🔊 ✕ ⛶ a la dcha. (109+34). */
        margin: 0 max(152px, calc(env(safe-area-inset-right) + 152px))
                  2px max(56px, calc(env(safe-area-inset-left) + 56px));
    }
    .team-score { gap: 7px; padding: 3px 8px; }
    .team-score .team-label { font-size: 0.62rem; letter-spacing: 0.12em; }
    .team-score .team-pts { font-size: 1.05rem; }
    #score-mejor-de-4 { display: none; }
    .seat-name { font-size: 0.64rem; letter-spacing: 0.08em; gap: 4px; }
    .seat-dealer { font-size: 0.5rem; height: 1.15em; padding: 0 5px; letter-spacing: 0.1em; }
    .seat-habla { font-size: 0.68rem; letter-spacing: 0.14em; }
    #seat-bottom.turno-activo .seat-habla { display: none; }
    .chip { padding: 1px 5px; font-size: 0.55rem; }
    .accion-burbuja { padding: 3px 8px; font-size: 0.6rem; z-index: 14; }
    #game-log-4 {
        width: 100%;
        font-size: 0.86rem; line-height: 1.35;
        margin: 0;
        max-height: 2.7em;
        overflow: hidden;
    }
    #center-table-4 { padding: 2px 6px; gap: 4px; }
    .cm-aire { padding: 4px 8px; }
    .cm-bote { padding: 4px 2px 5px; gap: 2px; }
    .cm-bote-fase { font-size: 0.5rem; letter-spacing: 0.06em; }
    .cm-bote-val { font-size: 0.95rem; }
    #betting-log-4 { margin: 0; max-width: none; width: 100%; }
    #center-table-4.cm-recuento #game-log-4 {
        display: none;
    }
    #center-table-4.cm-recuento .cm-res-big {
        font-size: 0.95rem;
        margin-top: 2px;
        letter-spacing: 0.12em;
    }
    :is(#center-table-4, #action-dock-4) button {
        padding: 7px 11px !important;
        font-size: 0.66rem !important;
        letter-spacing: 0.1em;
    }
    :is(#center-table-4, #action-dock-4) input[type="number"] {
        width: 40px; padding: 6px 2px !important; font-size: 0.95rem !important;
    }
    :is(#center-table-4, #action-dock-4) .cm-step:not(.cm-mesa-btn):not(.btn-salir-mesa) {
        width: 36px; min-width: 36px;
        font-size: 1.15rem !important;
    }
    :is(#center-table-4, #action-dock-4) .cm-stepper :is(#in-envidar-4, #in-subir-4) { width: 40px; }
    .panel-apuestas { gap: 6px; width: 100%; }
    #action-dock-4 > #turno-timer-4 { font-size: 1.05rem; }
}

@media (orientation: landscape) and (max-height: 360px) {
    #seat-top .seat-cards .carta-4 { width: 26px; }
    #seat-left .seat-cards .carta-4,
    #seat-right .seat-cards .carta-4 { width: 24px; }
    #seat-bottom .carta-4 { width: 44px; }
    .cm-bote-val { font-size: 0.85rem; }
    :is(#center-table-4, #action-dock-4) button { padding: 6px 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
    #game-screen .turno-indicador { animation: none; opacity: 1; }
    .seat-habla { animation: none; opacity: 1; }
    .seat-4.turno-activo .seat-name::before { animation: none; }
    .overlay-partida .spinner-reconexion, .cm-pausa-spinner { animation: none; }
    /* La chispa es adorno: sin movimiento, las cartas y el "+N" aparecen sin
       animar y el órdago no sacude la mesa (el destello rojo tampoco parpadea). */
    #game-screen .carta.cm-deal,
    #game-screen .carta.cm-flip img,
    .cm-pts-flotantes,
    #game-screen.cm-ordago-shake,
    #cm-ordago-flash { animation: none !important; }
}

/* ============================================================
   12. El sorteo de la Mano (sorteo.js)
   ------------------------------------------------------------
   Telón opaco sobre la mesa mientras se echa a suertes quién es
   Mano: cada jugador con su(s) pinta(s) en su sitio y, en el
   centro, el oro corriendo por las cuatro pintas como en el
   adorno del menú (menu.css) hasta pararse en una.
   ============================================================ */

.sorteo {
    position: fixed; inset: 0; z-index: 3000;
    background: var(--cm-ink);
    color: var(--cm-bone);
    /* Mientras dure, la mesa no se toca: el telón se come los clics. */
    pointer-events: auto;
    opacity: 1;
    transition: opacity 380ms ease;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
             max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.sorteo.telon { opacity: 0; }

.sorteo-centro {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(92%, 420px);
    text-align: center;
}

.sorteo-titulo {
    margin: 0 0 18px;
    font-family: Georgia, 'Times New Roman', serif;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 0.95rem;
    color: var(--cm-dim);
}

.sorteo-ruleta {
    display: flex; justify-content: center; align-items: center;
    gap: clamp(14px, 6vw, 34px);
}
.sorteo-ruleta .sorteo-pinta {
    width: clamp(34px, 12vw, 58px);
    height: clamp(34px, 12vw, 58px);
    color: var(--cm-dim-2);
    opacity: 0.45;
    transition: opacity 90ms linear, transform 90ms linear;
}
.sorteo-ruleta .sorteo-pinta.encendida {
    color: var(--cm-gold-hi);
    opacity: 1;
    transform: scale(1.16);
}
/* La pinta donde se ha parado: se queda encendida y respira una vez. */
.sorteo-ruleta .sorteo-pinta.parada {
    color: var(--cm-gold-hi);
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(var(--cm-gold-hi-rgb), 0.55));
    animation: sorteo-parada 620ms ease-out;
}
@keyframes sorteo-parada {
    0%   { transform: scale(1.16); }
    45%  { transform: scale(1.5); }
    100% { transform: scale(1.28); }
}

.sorteo-resultado {
    margin: 20px 0 0;
    min-height: 1.5em;
    font-family: Georgia, 'Times New Roman', serif;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    font-size: 1.15rem;
    color: var(--cm-gold);
    opacity: 0;
    transition: opacity 260ms ease;
}
.sorteo-resultado.visible { opacity: 1; }

/* El sitio de cada jugador: lo único que hay en su área es su pinta y su
   nombre, colocados como se sienta en la mesa (uno mismo, siempre abajo). */
.sorteo-sitio {
    position: absolute;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--cm-dim);
    text-align: center;
}
.sorteo-sitio[data-slot="top"]    { top: 6%; left: 50%; transform: translateX(-50%); }
.sorteo-sitio[data-slot="bottom"] { bottom: 6%; left: 50%; transform: translateX(-50%); }
.sorteo-sitio[data-slot="left"]   { left: 4%; top: 50%; transform: translateY(-50%); }
.sorteo-sitio[data-slot="right"]  { right: 4%; top: 50%; transform: translateY(-50%); }

.sorteo-palos { display: flex; gap: 10px; }
.sorteo-palos .sorteo-palo {
    width: 22px; height: 22px;
    color: var(--cm-dim-2);
    transition: color 200ms ease;
}
.sorteo-nombre {
    font-family: Georgia, 'Times New Roman', serif;
    font-variant: small-caps;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    max-width: 30vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Al parar, se ilumina el dueño de la pinta ganadora. */
.sorteo-sitio.ganador { color: var(--cm-gold); }
.sorteo-sitio.ganador .sorteo-palo { color: var(--cm-gold-hi); }

/* En pantalla estrecha la ruleta ocupa casi todo el ancho y se comería a los
   jugadores de los costados: se encoge un poco y ellos suben por encima de la
   fila de pintas, sin dejar de estar cada uno en su lado. */
@media screen and (max-width: 560px) {
    .sorteo-ruleta { gap: 12px; }
    .sorteo-ruleta .sorteo-pinta { width: 36px; height: 36px; }
    .sorteo-sitio[data-slot="left"],
    .sorteo-sitio[data-slot="right"] { top: 30%; transform: none; }
    .sorteo-nombre { max-width: 34vw; }
}

@media (prefers-reduced-motion: reduce) {
    .sorteo-ruleta .sorteo-pinta { transition: none; }
    .sorteo-ruleta .sorteo-pinta.parada { animation: none; }
}