/* ============================================================================
   menu.css — Menú principal, ventana de Jugar, clasificación y "Acerca de".
   Se carga DESPUÉS de style.css y style4.css.

   Idea de diseño ("tinta de medianoche"): fondo casi negro, tipografía con
   serifa en versalitas, filetes de 1px en vez de cajas redondeadas y las
   cuatro pintas de la baraja española (dibujadas en SVG en index.html) como
   única ornamentación. Nada de degradados de colores ni sombras de colores:
   el único acento es el oro, y el rojo queda para los errores.

   Convenio: todo lo nuevo lleva el prefijo .cm-  (CallMus menu).
   ========================================================================== */

:root {
    /* Paleta nueva */
    --cm-ink: #0B0C0E;          /* fondo de página            */
    --cm-ink-2: #101216;        /* ventanas                   */
    --cm-ink-3: #15181D;        /* campos y celdas hundidas   */
    --cm-hair: rgba(var(--cm-fg-rgb), 0.11);   /* filete normal  */
    --cm-hair-2: rgba(var(--cm-fg-rgb), 0.20); /* filete marcado */
    --cm-bone: #EDE9DC;         /* texto principal            */
    --cm-dim: #918E84;          /* texto secundario           */
    --cm-dim-2: #6B6862;        /* texto terciario            */
    --cm-gold: #C9A227;         /* acento                     */
    --cm-gold-hi: #E3BE45;      /* acento iluminado           */
    --cm-red: #C2352E;          /* errores (el rojo del logo) */
    --cm-live: #8FA76B;         /* "hay algo en marcha"       */
    --cm-steel: #7C93B8;        /* el equipo rival en 2v2     */

    /* Los mismos colores en canales RGB, para las transparencias (filetes,
       tintes, velos y sombras): el modo claro sólo tiene que cambiar el canal
       y todas las rgba() que lo usan cambian con él. */
    --cm-fg-rgb: 237, 233, 220;     /* el color del texto (hueso)   */
    --cm-gold-rgb: 201, 162, 39;
    --cm-gold-hi-rgb: 227, 190, 69;
    --cm-red-rgb: 194, 53, 46;
    --cm-live-rgb: 143, 167, 107;
    --cm-steel-rgb: 124, 147, 184;
    --cm-ink-rgb: 11, 12, 14;
    --cm-ink-2-rgb: 16, 18, 22;
    --cm-ink-3-rgb: 21, 24, 29;
    --cm-shade-rgb: 0, 0, 0;        /* sombras                      */
    --cm-veil-rgb: 5, 6, 8;         /* velos tras las ventanas      */

    /* Rellenos macizos y el texto que va encima. El oro de los botones
       es el mismo en los dos temas; el oro de leer (--cm-gold) no. */
    --cm-gold-fill: #C9A227;
    --cm-gold-fill-hi: #E3BE45;
    --cm-live-fill: #8FA76B;
    --cm-live-fill-hi: #9fb87b;
    --cm-on-gold: #0B0C0E;          /* texto sobre el oro macizo    */
    --cm-on-fill: #101216;          /* texto sobre oro / oliva      */
    --cm-on-red: #EDE9DC;           /* texto sobre el rojo          */

    /* Tonos que en claro se oscurecen para poder leerse sobre el papel. */
    --cm-steel-txt: #9FB0CB;
    --cm-red-txt: #D9645E;          /* el órdago escrito en la mesa */
    --cm-red-txt-hi: #E06862;
    --cm-fg-max: #FFFFFF;           /* texto de contraste máximo    */
    --cm-ok: #a3be8c;               /* avisos de las ventanas de cuenta */
    --cm-err: #bf616a;
    --cm-halo: rgba(var(--cm-fg-rgb), 0.045);  /* la lámpara sobre el tapete */
    --cm-marca-agua: rgba(255, 255, 255, 0.2);
    --cm-logo-oro: #C9A227;         /* las espadas del logo         */
    --cm-btn2-hover: #424E42;
    --cm-hover-2: #2a2e37;          /* botones del tutorial al pasar */
    --cm-steel-fill: #7C93B8;       /* acero macizo (tutorial)      */
    --cm-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia,
                'Times New Roman', serif;

    /* Reasignamos las variables antiguas para que las ventanas que todavía no
       se han rediseñado (ajustes, amigos, login) hereden la paleta nueva. */
    --bg-color: #0B0C0E;
    --menu-panel-bg: #101216;
    --menu-border: #21242B;
    --btn-primary-bg: #C9A227;
    --btn-primary-text: #0B0C0E;
    --btn-secondary-bg: #191C22;
    --text-bone: #EDE9DC;
    --input-bg: #15181D;
    --input-placeholder: rgba(var(--cm-fg-rgb), 0.35);
    --error-color: #C2352E;

    /* Equipos del 2v2: en el menú el oro eres tú, el acero son los rivales. */
    --equipo-a: #C9A227;
    --equipo-b: #7C93B8;

    /* Lo que tarda el oro en saltar de una pinta a la siguiente bajo el logo.
       index.html lo sobrescribe con lo que diga el administrador. */
    --cm-orn-paso: 1s;
}

/* ============================================================
   0 bis. Modo claro — «papel»
   ============================================================
   La misma mesa de cartas, de día: papel de naipe en vez de tinta de
   medianoche y tinta en vez de hueso. El oro que se lee (--cm-gold) se
   hunde hasta #7E610F para leerse sobre el papel (5:1); el oro macizo de
   los botones (--cm-gold-fill) es el de siempre, con su texto en tinta.
   Los grises guardan el mismo contraste que en oscuro: el secundario
   5,9:1 (6:1 en oscuro) y el terciario 3,7:1 (3,5:1).

   Lo enciende data-tema="claro" en <html>: lo pone Ajustes (settings.js)
   y, antes de pintar nada, un script del <head> de index.html, para que la
   página no parpadee en oscuro al cargar.

   Sombras y velos van «premultiplicados»: en vez de un marrón muy
   transparente, un beige que con el MISMO alfa de siempre oscurece el
   papel lo que ese marrón (shade = marrón 60,48,20 al 22 %; velo = marrón
   40,36,28 al 28 %). Así las reglas de siempre valen para los dos temas
   sin tocar un solo alfa. */
:root[data-tema="claro"] {
    color-scheme: light;
    --cm-ink: #F2EEE4;          /* papel: fondo de página           */
    --cm-ink-2: #FAF8F3;        /* ventanas: más claras, en relieve */
    --cm-ink-3: #E8E3D6;        /* campos y celdas: hundidos        */
    --cm-bone: #16171B;         /* texto: tinta                     */
    --cm-dim: #5E5A51;
    --cm-dim-2: #7F7A6E;
    --cm-gold: #7E610F;
    --cm-gold-hi: #6B520B;
    --cm-red: #B3322B;
    --cm-live: #56703A;
    --cm-steel: #4A6590;

    --cm-fg-rgb: 38, 31, 20;        /* tinta cálida: filetes y tintes a juego con el papel */
    --cm-gold-rgb: 138, 106, 18;
    --cm-gold-hi-rgb: 126, 97, 15;
    --cm-red-rgb: 179, 50, 43;
    --cm-live-rgb: 86, 112, 58;
    --cm-steel-rgb: 74, 101, 144;
    --cm-ink-rgb: 242, 238, 228;
    --cm-ink-2-rgb: 250, 248, 243;
    --cm-ink-3-rgb: 232, 227, 214;
    --cm-shade-rgb: 202, 196, 182;
    --cm-veil-rgb: 185, 181, 172;

    --cm-gold-fill: #C9A227;
    --cm-gold-fill-hi: #D6B13C;
    --cm-live-fill: #8FA76B;
    --cm-live-fill-hi: #9fb87b;
    --cm-on-gold: #0B0C0E;
    --cm-on-fill: #16171B;
    --cm-on-red: #FFF7F4;

    --cm-steel-txt: #4A6590;
    --cm-red-txt: #A92E27;
    --cm-red-txt-hi: #8F2620;
    --cm-fg-max: #0B0C0E;
    --cm-ok: #4F6B35;
    --cm-err: #A92E27;
    --cm-halo: rgba(255, 255, 255, 0.6);
    --cm-marca-agua: rgba(22, 23, 27, 0.3);
    --cm-logo-oro: #9A7A1A;     /* el oro viejo de callmus-logo-claro.svg */
    --cm-btn2-hover: #DDD6C6;
    --cm-hover-2: #DDD6C6;
    --cm-steel-fill: #7C93B8;

    /* Las variables antiguas que heredan las ventanas sin rediseñar. */
    --bg-color: #F2EEE4;
    --menu-panel-bg: #FAF8F3;
    --menu-border: #D8D1C2;
    --btn-primary-bg: #C9A227;
    --btn-primary-text: #0B0C0E;
    --btn-secondary-bg: #E6E0D2;
    --text-bone: #16171B;
    --input-bg: #E8E3D6;
    --error-color: #B3322B;
    --equipo-a: #7E610F;
    --equipo-b: #4A6590;
}

/* Lo poco que en claro no se arregla cambiando un color. */
/* Las ventanas flotan sobre el velo, que es más oscuro que el papel: ahí la
   sombra premultiplicada saldría más clara que el fondo, como un halo. Llevan
   una sombra de verdad. */
:root[data-tema="claro"] :is(.cm-win, .cm-fin-card, .cm-ayuda, .overlay-partida .caja-overlay, .cm-pausa-caja) {
    box-shadow: 0 22px 56px rgba(48, 38, 18, 0.30);
}
:root[data-tema="claro"] :is(#modal-settings, #modal-social, #modal-login, #modal-signup,
    #modal-verify, #modal-forgot, #modal-reset, #modal-tutorial) {
    box-shadow: 0 22px 56px rgba(48, 38, 18, 0.30) !important;
}
:root[data-tema="claro"] .cm-form input { color-scheme: light; }
/* Los botones de Google son blancos en los dos temas: en papel necesitan filete. */
:root[data-tema="claro"] .cm-btn-google,
:root[data-tema="claro"] .cm-fin-google { border: 1px solid var(--cm-hair-2); }
/* La respuesta del administrador en el soporte: oro macizo, texto tinta. */
:root[data-tema="claro"] .soporte-burbuja.admin { background: var(--cm-gold-fill); color: var(--cm-on-gold); }
/* El asiento que miras en el 2v2 se ilumina: en papel, la luz es blanca. */
:root[data-tema="claro"] #mesa-4 .seat-4::before {
    background: radial-gradient(ellipse at center,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(255, 255, 255, 0.45) 45%,
                transparent 72%);
}

/* El sprite de las pintas no debe ocupar sitio. */
.cm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pinta {
    width: 16px; height: 16px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}

/* style.css da a TODOS los botones un margin de 5px y un azul Nord; aquí
   partimos de cero para los componentes nuevos. */
.cm-icon-btn, .cm-link, .cm-play, .cm-row, .cm-minor-item, .cm-mode, .cm-opt,
.cm-primary, .cm-secondary, .cm-quiet, .cm-step-btn, .cm-close, .lb-name,
.cm-live-join {
    margin: 0;
    font-family: inherit;
    background: none;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   1. Esquinas fijas: amigos · ajustes · pantalla completa
   ============================================================ */

.cm-corner {
    position: fixed;
    /* Respeta el notch / Dynamic Island arriba y la cámara lateral en apaisado.
       En escritorio env() vale 0 y quedan los 15px de siempre. */
    top: max(15px, env(safe-area-inset-top));
    margin-right: env(safe-area-inset-right);
    z-index: 1000; display: flex;
}

.cm-icon-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: rgba(var(--cm-fg-rgb), 0.03);
    border: 1px solid var(--cm-hair-2);
    border-radius: 2px;
    color: var(--cm-bone);
    font-size: 1.05rem; line-height: 1;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, transform .12s ease;
}
.cm-icon-btn:hover {
    background: rgba(var(--cm-gold-rgb), 0.09);
    border-color: var(--cm-gold);
    color: var(--cm-gold-hi);
}
/* Área táctil de 44px sin agrandar el icono (guía de accesibilidad móvil): un
   pseudo transparente centrado extiende la zona sensible más allá del botón de
   34px. Un toque en él cuenta como toque del botón. Los botones vecinos de la
   esquina van a ≥45px de centro, así que sus áreas no se solapan. */
.cm-icon-btn::before {
    content: "";
    position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    transform: translate(-50%, -50%);
}
#btn-amigos .pinta { width: 17px; height: 17px; }
/* Iconos SVG de chrome (pantalla completa, ajustes): mismo trazo que las
   pintas, un pelín mayores que éstas para llenar el botón. */
.cm-icon-btn .pinta { width: 18px; height: 18px; }

/* Encabezado o etiqueta con un icono SVG de trazo delante del texto (Ajustes,
   Panel de administración, Rellenar con bots). El texto va en un <span> aparte
   para que la traducción (que reescribe su innerHTML) no borre el icono. */
.cm-h-ico { display: flex; align-items: center; justify-content: center; gap: 9px; }
.cm-h-ico .pinta { width: 18px; height: 18px; }
.cm-lbl-ico { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.cm-badge {
    position: absolute; top: -7px; right: -7px;
    min-width: 17px; height: 17px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cm-red); color: #fff;
    border-radius: 9px;
    font-size: 0.62rem; font-weight: bold;
}

/* ============================================================
   2. Identidad (arriba a la izquierda)
   ============================================================ */

.cm-top {
    position: fixed;
    top: max(15px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    z-index: 999;
    display: flex; align-items: center; gap: 12px; height: 34px;
}
.cm-whoami {
    font-family: var(--cm-serif);
    font-size: 0.92rem; letter-spacing: 0.1em;
    color: var(--cm-gold);
    /* Un nombre largo no debe empujar ni solaparse con los botones de la derecha. */
    max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-whoami:empty { display: none; }
.cm-auth { display: flex; align-items: center; gap: 9px; }
.cm-link {
    padding: 4px 0; border: 0;
    color: var(--cm-dim);
    font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; transition: color .2s;
}
.cm-link:hover { color: var(--cm-bone); }
.cm-dot { color: var(--cm-dim-2); }

/* ============================================================
   3. Columna del menú
   ============================================================ */

.cm-menu {
    flex-shrink: 0;
    width: 100%; max-width: 420px;
    margin: 0 auto;
    display: flex; flex-direction: column;
    text-align: left;
}

.cm-logo {
    display: block;
    width: 260px; max-width: 72%;
    height: auto;
    margin: 56px auto 0;
    overflow: visible;
}
/* El logo va en línea en index.html (lo escribe tools/logo/construir.py) para
   que sus colores salgan de aquí y sigan al tema: letras hueso, las dos espadas
   de la A en oro y, alrededor de la hoja de delante, un filete del color del
   fondo que la hace pasar por encima de la otra. */
.cm-logo-letra { fill: var(--cm-bone); }
.cm-logo-oro { fill: var(--cm-logo-oro); }
.cm-logo-corte { stroke: var(--cm-ink); }

/* Filete con las pintas centradas */
.cm-rule {
    display: flex; align-items: center; gap: 14px;
    margin: 20px 0 18px;
    color: var(--cm-dim-2);
}
.cm-rule::before, .cm-rule::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cm-hair-2), transparent);
}
.cm-rule-thin { margin: 14px 0 6px; }
.cm-rule-thin::before, .cm-rule-thin::after {
    background: linear-gradient(90deg, transparent, var(--cm-hair), transparent);
}
.cm-orn { display: inline-flex; align-items: center; gap: 11px; }
.cm-orn .pinta { width: 14px; height: 14px; }
.cm-orn .pinta:nth-child(3) { color: var(--cm-gold); }

/* El oro pasea por las cuatro pintas: oros → copas → espadas → bastos y vuelta
   a empezar. Las formas no se mueven; sólo cambia cuál está encendida. El paso
   lo fija el administrador (`menu_pintas_ms`); con 0 no arranca la animación y
   el oro se queda quieto en las espadas, que es la regla de arriba. */
.cm-orn-ciclo .pinta {
    animation: cm-orn-oro calc(var(--cm-orn-paso) * 4) linear infinite;
}
/* Retardos negativos: al cargar la página el ciclo ya está en marcha, así
   ninguna pinta se queda encendida de más esperando su turno. */
.cm-orn-ciclo .pinta:nth-child(2) { animation-delay: calc(var(--cm-orn-paso) * -3); }
.cm-orn-ciclo .pinta:nth-child(3) { animation-delay: calc(var(--cm-orn-paso) * -2); }
.cm-orn-ciclo .pinta:nth-child(4) { animation-delay: calc(var(--cm-orn-paso) * -1); }

@keyframes cm-orn-oro {
    0%, 10%   { color: var(--cm-dim-2); }
    15%, 35%  { color: var(--cm-gold); }
    40%, 100% { color: var(--cm-dim-2); }
}

#anuncios-fijados:not(:empty) { margin: 4px 0 16px; }
#menu-screen .anuncio-fijado {
    background: rgba(var(--cm-gold-rgb), 0.05);
    border: 1px solid var(--cm-hair);
    border-left: 2px solid var(--cm-gold);
    border-radius: 2px;
}
#menu-screen .anuncio-fijado h4 { color: var(--cm-gold); letter-spacing: 0.04em; }
#menu-screen .anuncio-fijado p { color: var(--cm-dim); }
#menu-screen .anuncio-fijado.mantenimiento {
    background: rgba(var(--cm-red-rgb), 0.08);
    border-left-color: var(--cm-red);
}
#menu-screen .anuncio-fijado.mantenimiento h4 { color: var(--cm-red); }

/* --- Botón grande de Jugar --- */
.cm-play {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; padding: 20px 22px 20px 26px;
    background: linear-gradient(180deg, rgba(var(--cm-gold-rgb), 0.10), rgba(var(--cm-gold-rgb), 0.02));
    border: 1px solid rgba(var(--cm-gold-rgb), 0.38);
    border-radius: 2px;
    color: var(--cm-bone); text-align: left; cursor: pointer;
    transition: background .25s, border-color .25s, transform .12s ease;
}
.cm-play::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--cm-gold);
    transition: width .25s;
}
.cm-play:hover {
    background: linear-gradient(180deg, rgba(var(--cm-gold-rgb), 0.18), rgba(var(--cm-gold-rgb), 0.05));
    border-color: var(--cm-gold);
}
.cm-play:hover::before { width: 6px; }
.cm-play:hover .cm-play-arrow { transform: translateX(5px); }
.cm-play-label {
    display: block;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.6rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cm-gold-hi);
}
.cm-play-sub {
    display: block; margin-top: 6px;
    font-size: 0.74rem; letter-spacing: 0.07em;
    color: var(--cm-dim);
}
.cm-play-arrow {
    font-size: 1.25rem; color: var(--cm-gold);
    transition: transform .25s;
}

/* --- Volver a una partida en curso ---
   Banner de reconexión: mismo lenguaje que .cm-play pero con el acento "en
   marcha" (oliva) para que se lea como algo vivo que te espera en la mesa. */
.cm-resume {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; margin-bottom: 18px; padding: 15px 20px 15px 24px;
    background: linear-gradient(180deg, rgba(var(--cm-live-rgb), 0.14), rgba(var(--cm-live-rgb), 0.03));
    border: 1px solid rgba(var(--cm-live-rgb), 0.45);
    border-radius: 2px;
    color: var(--cm-bone); text-align: left; cursor: pointer;
    transition: background .25s, border-color .25s;
}
.cm-resume::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--cm-live);
}
.cm-resume:hover {
    background: linear-gradient(180deg, rgba(var(--cm-live-rgb), 0.22), rgba(var(--cm-live-rgb), 0.06));
    border-color: var(--cm-live);
}
.cm-resume:hover .cm-resume-arrow { transform: translateX(5px); }
.cm-resume-txt { display: block; }
.cm-resume-txt b {
    display: block;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.15rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--cm-bone);
}
.cm-resume-txt small {
    display: block; margin-top: 4px;
    font-size: 0.72rem; letter-spacing: 0.06em; color: var(--cm-live);
}
.cm-resume-arrow {
    font-size: 1.2rem; color: var(--cm-live);
    transition: transform .25s;
}

/* --- Filas secundarias (tutorial, barajas) --- */
.cm-list { display: flex; flex-direction: column; margin-top: 20px; }
.cm-row {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 16px 4px;
    border: 0; border-bottom: 1px solid var(--cm-hair);
    color: var(--cm-bone); text-align: left; cursor: pointer;
    transition: background .2s, transform .12s ease;
}
.cm-list .cm-row:first-child { border-top: 1px solid var(--cm-hair); }
.cm-row .pinta { color: var(--cm-dim); transition: color .2s, transform .3s; }
.cm-row-label {
    font-family: var(--cm-serif);
    font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.cm-row:hover { background: rgba(var(--cm-fg-rgb), 0.03); }
.cm-row:hover .pinta { color: var(--cm-gold); transform: rotate(-9deg); }

.cm-tag {
    margin-left: auto;
    padding: 3px 7px;
    border: 1px solid var(--cm-hair-2); border-radius: 1px;
    color: var(--cm-dim-2);
    font-style: normal; font-size: 0.58rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    white-space: nowrap;
}
.is-soon { cursor: not-allowed; }
.cm-row.is-soon .cm-row-label { color: var(--cm-dim); }
.cm-row.is-soon:hover .pinta { color: var(--cm-dim); transform: none; }

/* --- Fila menor: clasificación · ko-fi · instagram · acerca de --- */
.cm-minor {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 2px 20px;
}
.cm-minor-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 2px; border: 0;
    color: var(--cm-dim); text-decoration: none;
    font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase;
    cursor: pointer; transition: color .2s;
}
.cm-minor-item .pinta { width: 13px; height: 13px; }
.cm-minor-item:hover { color: var(--cm-bone); }
#btn-kofi:hover { color: var(--cm-gold-hi); }
#btn-instagram:hover { color: var(--cm-gold-hi); }

/* ------------------------------------------------------------
   Feedback al pulsar (:active). En móvil no hay hover, así que
   sin esto los botones se sienten "muertos". Un micro-hundido
   basta para que respondan al dedo. Se anula en reduced-motion.
   ------------------------------------------------------------ */
.cm-play:active,
.cm-resume:active { transform: scale(.985); }
.cm-icon-btn:active { transform: scale(.92); background: rgba(var(--cm-gold-rgb), 0.14); border-color: var(--cm-gold); }
.cm-row:active { background: rgba(var(--cm-gold-rgb), 0.06); }
.cm-minor-item:active { color: var(--cm-gold-hi); }
.cm-link:active { color: var(--cm-bone); }
.cm-primary:active,
.cm-secondary:active,
.cm-step-btn:active,
.cm-close:active { transform: scale(.94); }
.cm-heart { color: var(--cm-red); font-size: 0.95rem; line-height: 1; }

.cm-msg {
    min-height: 1.2em; margin: 16px 0 0;
    color: var(--cm-red);
    font-size: 0.82rem; text-align: center;
}

/* ============================================================
   4. Ventanas (Jugar, Clasificación, Acerca de)
   ============================================================ */

/* El velo de los modales lo pinta un style="" en index.html: hay que ganarle.
   El z-index sube por encima de los botones de las esquinas (1000) para que no
   se cuelen sobre la ventana abierta. */
#modal-overlay {
    background: rgba(var(--cm-veil-rgb), 0.82) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 1200 !important;
    padding: 12px;
    box-sizing: border-box;
}

.cm-win {
    position: relative;
    width: 480px; max-width: 100%; max-height: 92vh;
    display: flex; flex-direction: column;
    background: var(--cm-ink-2);
    border: 1px solid var(--cm-hair-2);
    border-radius: 2px;
    box-shadow: 0 26px 70px rgba(var(--cm-shade-rgb), 0.75);
    color: var(--cm-bone);
    text-align: left;
}
.cm-win-wide { width: 560px; }
/* Filete de oro que corona la ventana */
.cm-win::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--cm-gold), transparent);
    opacity: 0.75;
}

.cm-close {
    position: absolute; top: 6px; right: 6px;
    /* Área táctil ≥44px (guía de accesibilidad móvil) aunque el glifo sea menor. */
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 2px;
    color: var(--cm-dim);
    font-size: 1.5rem; font-weight: 400; line-height: 1;
    cursor: pointer; transition: color .2s;
}
.cm-close:hover { color: var(--cm-red); }

.cm-win-head { padding: 24px 26px 16px; border-bottom: 1px solid var(--cm-hair); }
.cm-win-title {
    margin: 0;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.45rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--cm-bone);
}
.cm-win-sub {
    margin: 8px 0 0;
    font-size: 0.74rem; letter-spacing: 0.08em;
    color: var(--cm-dim);
}
.cm-win-sub:empty { display: none; }
.cm-win-body { padding: 6px 26px 24px; overflow-y: auto; }

/* ---- Ventanas de cuenta (login · registro · verificación · recuperación) ----
   Comparten el chasis .cm-win, pero más estrechas y con un cuerpo en forma de
   formulario nativo. Antes eran cajas con estilos en línea sueltos. */
.cm-win-auth { width: 380px; }

.cm-form { display: flex; flex-direction: column; gap: 13px; }
.cm-form input[type="text"],
.cm-form input[type="email"],
.cm-form input[type="password"],
.cm-form input[type="date"] {
    width: 100%; padding: 12px 13px; box-sizing: border-box;
    background: var(--cm-ink-3);
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    color: var(--cm-bone);
    font-family: inherit; font-size: 1rem;
    color-scheme: dark;
    transition: border-color .2s;
}
.cm-form input:focus { outline: none; border-color: var(--cm-gold); }
.cm-form input::placeholder { color: var(--cm-dim-2); }

/* Campo con etiqueta encima (fecha de nacimiento) */
.cm-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.cm-field > label { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--cm-dim); }

/* Casilla "mantener sesión" */
.cm-check {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9rem; color: var(--cm-bone); cursor: pointer; text-align: left;
}
.cm-check input { width: 18px; height: 18px; accent-color: var(--cm-gold); flex: 0 0 auto; }

/* Código de un solo uso: dígitos grandes y espaciados */
.cm-form .cm-otp {
    text-align: center; letter-spacing: 0.5em; text-indent: 0.5em;
    font-size: 1.35rem;
}

/* Botón verde (registro / verificación) reutilizando el chasis dorado */
.cm-primary.is-live { background: var(--cm-live-fill); border-color: var(--cm-live-fill); }
.cm-primary.is-live:hover { background: var(--cm-live-fill-hi); }

/* Mensaje de estado del formulario (error rojo / éxito verde, lo pinta el JS) */
.cm-form-msg {
    margin: 2px 0 0; min-height: 1.1em;
    font-size: 0.86rem; font-weight: 600; text-align: center;
    color: var(--cm-red);
}
.cm-form-msg:empty { min-height: 0; }

/* Enlace centrado (¿olvidaste tu contraseña?) */
.cm-form-link { margin: 0; text-align: center; }
.cm-form-link a {
    color: var(--cm-gold-hi); font-size: 0.82rem;
    text-decoration: underline; cursor: pointer;
}

/* Separador "o" entre el envío y Google */
.cm-form-sep {
    display: flex; align-items: center; gap: 10px;
    color: var(--cm-dim-2);
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.cm-form-sep::before, .cm-form-sep::after {
    content: ""; flex: 1; height: 1px; background: var(--cm-hair-2);
}

/* Nota fina (aviso de privacidad) */
.cm-note-fine {
    margin: 0;
    font-size: 0.76rem; color: var(--cm-dim);
    line-height: 1.45; text-align: center;
}

/* Botón "Continuar con Google" */
.cm-btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 11px;
    background: #fff; color: #3c4043;
    border: 0; border-radius: 2px;
    font-family: inherit; font-weight: 600; font-size: 0.95rem;
    cursor: pointer; transition: background .2s;
}
.cm-btn-google:hover { background: #f1f1f1; }

/* --- Pasos --- */
.cm-step { margin-top: 24px; }
.cm-step-title {
    display: flex; align-items: center; gap: 11px;
    margin: 0 0 13px;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--cm-dim);
}
.cm-step-title::after {
    content: ""; flex: 1; height: 1px; background: var(--cm-hair);
}
.cm-num {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 21px; height: 21px;
    border: 1px solid var(--cm-hair-2); border-radius: 50%;
    color: var(--cm-gold);
    font-style: normal; font-size: 0.68rem; letter-spacing: 0;
}
.cm-step-plain { color: var(--cm-bone); }

/* --- Nombre del jugador --- */
.cm-field { padding-top: 18px; }
.cm-label {
    display: block; margin-bottom: 7px;
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cm-dim);
}
.cm-input {
    display: block; width: 100%; margin: 0;
    padding: 11px 12px;
    background: var(--cm-ink-3);
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    color: var(--cm-bone); font-size: 0.95rem;
    box-sizing: border-box;
}
.cm-input:focus { outline: none; border-color: var(--cm-gold); }
.cm-input::placeholder { color: rgba(var(--cm-fg-rgb), 0.3); }
.cm-como {
    margin: 16px 0 0;
    font-size: 0.78rem; color: var(--cm-dim);
}
.cm-como b { color: var(--cm-gold); font-weight: 600; }

/* --- Paso 1: la mesa --- */
.cm-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-mode {
    display: flex; flex-direction: column; align-items: center;
    padding: 15px 10px 13px;
    background: var(--cm-ink-3);
    border: 1px solid var(--cm-hair); border-radius: 2px;
    cursor: pointer; transition: border-color .2s, background .2s;
}
.cm-mode b {
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.98rem; letter-spacing: 0.1em;
    color: var(--cm-bone);
}
.cm-mode small {
    margin-top: 4px;
    font-size: 0.68rem; line-height: 1.35; text-align: center;
    color: var(--cm-dim);
}
.cm-mode:hover { border-color: var(--cm-hair-2); }
.cm-mode.is-on {
    border-color: rgba(var(--cm-gold-rgb), 0.55);
    background: rgba(var(--cm-gold-rgb), 0.06);
}
.cm-mode.is-on b { color: var(--cm-gold-hi); }

.cm-diagram { width: 66px; height: 48px; margin-bottom: 8px; transition: opacity .2s; }
.cm-mode:not(.is-on) .cm-diagram { opacity: 0.5; }
.d-table { fill: none; stroke: var(--cm-hair-2); stroke-width: 1.2; }
.d-you { fill: var(--cm-gold); }
.d-mate { fill: none; stroke: var(--cm-gold); stroke-width: 1.4; }
.d-rival { fill: none; stroke: var(--cm-dim); stroke-width: 1.4; }
.d-link {
    fill: none; stroke: var(--cm-gold); stroke-width: 1;
    stroke-dasharray: 2 3; opacity: 0.55;
}

/* --- Paso 2: los rivales --- */
.cm-opts { display: flex; flex-direction: column; gap: 8px; }
.cm-opt {
    position: relative;
    display: block; padding: 13px 14px 13px 39px;
    background: var(--cm-ink-3);
    border: 1px solid var(--cm-hair); border-radius: 2px;
    text-align: left; cursor: pointer;
    transition: border-color .2s, background .2s;
}
.cm-opt::before {
    content: ""; position: absolute; left: 14px; top: 16px;
    width: 11px; height: 11px;
    border: 1px solid var(--cm-hair-2); border-radius: 50%;
    transition: .2s;
}
.cm-opt.is-on::before {
    border-color: var(--cm-gold);
    background: var(--cm-gold);
    box-shadow: inset 0 0 0 2px var(--cm-ink-3);
}
.cm-opt b {
    display: block;
    font-size: 0.88rem; font-weight: 600; letter-spacing: 0.03em;
    color: var(--cm-bone);
}
.cm-opt small {
    display: block; margin-top: 3px;
    font-size: 0.72rem; color: var(--cm-dim);
}
.cm-opt:hover { border-color: var(--cm-hair-2); }
.cm-opt.is-on {
    border-color: rgba(var(--cm-gold-rgb), 0.5);
    background: rgba(var(--cm-gold-rgb), 0.05);
}
.cm-opt.is-soon b { color: var(--cm-dim); }
.cm-opt.is-soon::before { opacity: 0.35; }
.cm-opt.is-soon:hover { border-color: var(--cm-hair); }
.cm-opt .cm-tag { position: absolute; top: 14px; right: 12px; margin: 0; }

/* --- Paso 3: los detalles --- */
.cm-set {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--cm-hair);
}
.cm-set-label { font-size: 0.85rem; color: var(--cm-bone); }
.cm-set-unit { font-size: 0.7rem; letter-spacing: 0.06em; color: var(--cm-dim); }
.cm-stepper {
    margin-left: auto;
    display: inline-flex; align-items: center;
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    overflow: hidden;
}
.cm-step-btn {
    width: 31px; height: 31px; padding: 0; border: 0;
    background: rgba(var(--cm-fg-rgb), 0.04);
    color: var(--cm-bone); font-size: 1rem; line-height: 1;
    cursor: pointer; transition: .15s;
}
.cm-step-btn:hover { background: rgba(var(--cm-gold-rgb), 0.16); color: var(--cm-gold-hi); }
.cm-stepper input {
    width: 46px; height: 31px; margin: 0; padding: 0;
    background: var(--cm-ink-3);
    border: 0;
    border-left: 1px solid var(--cm-hair);
    border-right: 1px solid var(--cm-hair);
    border-radius: 0;
    color: var(--cm-bone); text-align: center;
    font-family: var(--cm-serif); font-size: 1.05rem;
    -moz-appearance: textfield;
    appearance: textfield;
}
.cm-stepper input::-webkit-outer-spin-button,
.cm-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cm-switch {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--cm-hair);
    cursor: pointer;
}
.cm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cm-switch-box {
    flex: 0 0 auto; position: relative;
    width: 16px; height: 16px;
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    transition: .2s;
}
.cm-switch input:checked + .cm-switch-box {
    border-color: var(--cm-gold);
    background: rgba(var(--cm-gold-rgb), 0.14);
}
.cm-switch input:checked + .cm-switch-box::after {
    content: ""; position: absolute; left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: solid var(--cm-gold); border-width: 0 1.6px 1.6px 0;
    transform: rotate(40deg);
}
.cm-switch-txt b {
    display: block;
    font-size: 0.85rem; font-weight: 600; color: var(--cm-bone);
}
.cm-switch-txt small {
    display: block; margin-top: 2px;
    font-size: 0.72rem; color: var(--cm-dim);
}
.cm-switch.is-soon .cm-switch-txt b { color: var(--cm-dim); }
.cm-switch.is-soon .cm-switch-box { opacity: 0.4; }

/* Interruptor con un [?] al lado (las señas). El filete de abajo pasa a la
   fila: el interruptor ya no llega al borde. */
.cm-switch-fila {
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--cm-hair);
}
.cm-switch-fila .cm-switch { flex: 1 1 auto; border-bottom: 0; }
.cm-help-dot {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    padding: 0;
    background: none;
    border: 1px solid var(--cm-hair-2); border-radius: 50%;
    color: var(--cm-dim);
    font-family: var(--cm-serif); font-size: 0.76rem; line-height: 1;
    cursor: pointer;
    transition: .2s;
}
.cm-help-dot:hover { border-color: var(--cm-gold); color: var(--cm-gold-hi); }

/* ------------------------------------------------------------
   Ventana flotante de ayuda (la de las señas la monta menu.js)
   ------------------------------------------------------------ */
.cm-ayuda-velo {
    position: fixed; inset: 0; z-index: 3200;
    background: rgba(var(--cm-shade-rgb), 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
}
.cm-ayuda-velo.abierto { opacity: 1; pointer-events: auto; }

.cm-ayuda {
    position: fixed; left: 50%; top: 50%;
    transform: translate(-50%, -46%);
    z-index: 3300;
    box-sizing: border-box;
    width: min(430px, 92vw); max-height: 80vh; overflow-y: auto;
    padding: 18px 18px 16px;
    background: var(--cm-ink-3);
    border: 1px solid var(--cm-hair-2);
    /* El filete de oro arriba es lo que la despega del fondo, que es casi del
       mismo negro que la ventana. */
    border-top: 2px solid var(--cm-gold);
    border-radius: 3px;
    box-shadow: 0 20px 50px rgba(var(--cm-shade-rgb), 0.75);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.cm-ayuda.abierta { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }

.cm-ayuda h3 {
    margin: 0 0 3px;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cm-gold);
}
.cm-ayuda .cm-ayuda-sub { margin: 0 0 12px; font-size: 0.74rem; color: var(--cm-dim); }
.cm-ayuda-bloque { border-top: 1px solid var(--cm-hair); padding: 10px 0; }
.cm-ayuda-bloque b { display: block; margin-bottom: 4px; font-size: 0.79rem; color: var(--cm-bone); }
.cm-ayuda-bloque p { margin: 0; font-size: 0.76rem; line-height: 1.5; color: var(--cm-dim); }
.cm-ayuda-bloque p + p { margin-top: 5px; }
.cm-ayuda-bloque em { color: var(--cm-bone); font-style: normal; }

/* Las cuatro regiones de foco, dibujadas como se ven en la mesa. */
.cm-ayuda-mesa {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px; margin: 2px 0 10px;
}
.cm-ayuda-mesa .r-t { grid-column: 2; grid-row: 1; }
.cm-ayuda-mesa .r-l { grid-column: 1; grid-row: 2; }
.cm-ayuda-mesa .r-c { grid-column: 2; grid-row: 2; }
.cm-ayuda-mesa .r-r { grid-column: 3; grid-row: 2; }
.cm-ayuda-mesa .r-b { grid-column: 2; grid-row: 3; }
.cm-ayuda-reg {
    padding: 7px 4px;
    background: var(--cm-ink-2);
    border: 1px solid var(--cm-hair);
    border-radius: 2px;
    font-size: 0.68rem; color: var(--cm-bone); text-align: center;
}
.cm-ayuda-reg small { display: block; margin-top: 3px; color: var(--cm-dim); }
.cm-ayuda-reg.centro {
    background: none; border: 0;
    color: var(--cm-dim-2); font-size: 0.63rem; line-height: 1.35;
}
.cm-tecla {
    display: inline-block; min-width: 16px; padding: 1px 4px;
    background: var(--cm-ink-2);
    border: 1px solid var(--cm-hair-2); border-bottom-width: 2px;
    border-radius: 3px;
    font-family: monospace; font-size: 0.68rem; color: var(--cm-bone);
}

.cm-ayuda-pie { display: flex; gap: 8px; margin-top: 12px; }
.cm-ayuda-pie button {
    flex: 1 1 0;
    padding: 9px 8px;
    background: none;
    border: 1px solid var(--cm-hair);
    border-radius: 2px;
    color: var(--cm-dim);
    font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase;
    cursor: pointer;
    transition: .2s;
}
.cm-ayuda-pie button:hover { border-color: var(--cm-gold); color: var(--cm-gold-hi); }
.cm-ayuda-pie .cm-ayuda-mas { border-color: var(--cm-hair-2); color: var(--cm-bone); }

/* Asientos del 2v2 */
.cm-seats { padding: 16px 0 2px; }

/* ---- La mesa en rombo (mesa4.js) ----
   Cuatro círculos en los vértices de un rombo, como se sientan de verdad: las
   parejas enfrente (línea discontinua) y tú abajo. Tu bando en oro y los
   rivales en acero. Sin sombras ni degradados: filete de 1px y tinta. */
.mesa4 {
    position: relative;
    width: min(100%, 300px); aspect-ratio: 1 / 1;
    margin: 14px auto 0;
}
.mesa4-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mesa4-marco {
    fill: none; stroke: var(--cm-hair-2); stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.mesa4-par {
    stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7;
    vector-effect: non-scaling-stroke;
}
.mesa4-par.bando-propio { stroke: var(--equipo-a); }
.mesa4-par.bando-rival  { stroke: var(--equipo-b); }

.mesa4 .mesa4-slot {
    position: absolute; transform: translate(-50%, -50%);
    width: 27%; aspect-ratio: 1 / 1; min-width: 0;
    box-sizing: border-box; margin: 0; padding: 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; overflow: hidden;
    background: var(--cm-ink-3); color: var(--cm-bone);
    border: 1.5px solid var(--cm-hair-2); border-radius: 50%;
    font-family: var(--cm-serif); font-weight: 400; text-align: center;
    transition: border-color .2s, background .2s, color .2s;
}
.mesa4 .mesa4-slot[data-slot="bottom"] { left: 50%; top: 86%; }
.mesa4 .mesa4-slot[data-slot="left"]   { left: 14%; top: 50%; }
.mesa4 .mesa4-slot[data-slot="top"]    { left: 50%; top: 14%; }
.mesa4 .mesa4-slot[data-slot="right"]  { left: 86%; top: 50%; }

.mesa4 .mesa4-slot.bando-propio { border-color: var(--equipo-a); }
.mesa4 .mesa4-slot.bando-rival  { border-color: var(--equipo-b); }

.mesa4-tag {
    font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
    font-variant: small-caps; color: var(--cm-dim);
}
.mesa4-nombre {
    max-width: 100%;
    font-size: 0.74rem; letter-spacing: 0.04em; line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mesa4-robot { width: 22px; height: 22px; color: var(--cm-bone); }

/* Sin nadie: círculo vacío con el filete a trazos. */
.mesa4 .mesa4-slot.estado-libre,
.mesa4 .mesa4-slot.estado-persona { border-style: dashed; }
/* Los tintes van encima de la tinta (no en lugar de ella): el círculo tapa las
   líneas del rombo que pasan por detrás. */
.mesa4 .mesa4-slot.estado-bot {
    background-image: linear-gradient(rgba(var(--cm-fg-rgb), 0.07), rgba(var(--cm-fg-rgb), 0.07));
}
.mesa4 .mesa4-slot.estado-humano {
    background-image: linear-gradient(rgba(var(--cm-fg-rgb), 0.05), rgba(var(--cm-fg-rgb), 0.05));
}
.mesa4 .mesa4-slot.estado-yo {
    background-image: linear-gradient(rgba(var(--cm-gold-rgb), 0.10), rgba(var(--cm-gold-rgb), 0.10));
    color: var(--cm-gold-hi);
}
.mesa4 .mesa4-slot.estado-yo .mesa4-tag { color: var(--cm-gold); }

/* Lo que se puede tocar */
.mesa4 .mesa4-slot.es-clic { cursor: pointer; }
.mesa4 .mesa4-slot.es-clic:hover { border-color: var(--cm-gold-hi); }
.mesa4 .mesa4-slot.es-clic:focus-visible { outline: 1px solid var(--cm-gold); outline-offset: 2px; }
.mesa4 .mesa4-slot.elegido {
    background-image: linear-gradient(rgba(var(--cm-gold-rgb), 0.18), rgba(var(--cm-gold-rgb), 0.18));
    border-style: solid; border-color: var(--cm-gold-hi); color: var(--cm-gold-hi);
}

/* En la sala de espera el rombo va centrado y algo más bajo el código. */
.cm-wait #asientos-espera-4 { margin-top: 12px; }

/* Ventana de unirse (usa el chasis .overlay-partida de game.css) */
.overlay-partida .cm-unirse { max-width: 380px; }
.cm-unirse-codigo {
    margin: -4px 0 0 !important;
    font-family: var(--cm-serif); font-size: 1.1rem !important; letter-spacing: 0.3em;
    color: var(--cm-gold-hi) !important;
}
.cm-unirse .cm-msg { min-height: 1.2em; margin: 6px 0 0; }
.cm-unirse .acciones-overlay .btn-ok:disabled { opacity: 0.4; cursor: default; }

/* Presentación de la mesa al empezar (antes del sorteo de la Mano) */
.mesa4-telon {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 16px;
    background: var(--cm-ink); color: var(--cm-bone);
    opacity: 1; transition: opacity 380ms ease;
}
.mesa4-telon.telon { opacity: 0; }
.mesa4-telon-titulo {
    margin: 0;
    font-family: var(--cm-serif); font-variant: small-caps;
    font-size: 1.1rem; letter-spacing: 0.24em; color: var(--cm-dim);
}
.mesa4-telon-rombo { width: min(88vw, 44vh, 340px); }
.mesa4-telon-rombo.mesa4 { width: min(88vw, 44vh, 340px); margin-top: 6px; }
.mesa4-equipos { display: grid; gap: 8px; margin-top: 12px; text-align: left; }
.mesa4-equipo { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 0.8rem; }
.mesa4-equipo i {
    flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: var(--equipo-a); align-self: center;
}
.mesa4-equipo.bando-rival i { background: var(--equipo-b); }
.mesa4-equipo b {
    font-family: var(--cm-serif); font-weight: 400; font-variant: small-caps;
    letter-spacing: 0.12em; min-width: 6.5em;
}
.mesa4-equipo.bando-propio b { color: var(--equipo-a); }
.mesa4-equipo.bando-rival b { color: var(--equipo-b); }
.mesa4-equipo span { color: var(--cm-dim); }

/* Los círculos entran uno tras otro (la mano izquierda primero). */
.mesa4-telon .mesa4-slot { animation: mesa4-entra 420ms ease both; animation-delay: calc(var(--i) * 110ms); }
.mesa4-telon .mesa4-lineas { animation: mesa4-linea 600ms ease both; }
@keyframes mesa4-entra {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes mesa4-linea { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .mesa4-telon .mesa4-slot, .mesa4-telon .mesa4-lineas { animation: none; }
}

.cm-note {
    margin: 11px 0 0;
    font-size: 0.71rem; line-height: 1.55;
    color: var(--cm-dim);
}

/* --- Acción principal --- */
.cm-action { margin-top: 26px; }
.cm-summary {
    margin: 0 0 11px;
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cm-dim-2); text-align: center;
}
.cm-summary b { color: var(--cm-gold); font-weight: 600; }
.cm-primary {
    display: block; width: 100%; padding: 15px;
    background: var(--cm-gold-fill);
    border: 1px solid var(--cm-gold-fill); border-radius: 2px;
    color: var(--cm-on-gold);
    font-family: var(--cm-serif);
    font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase;
    cursor: pointer; transition: background .2s;
}
.cm-primary:hover { background: var(--cm-gold-fill-hi); }
.cm-primary:disabled { opacity: 0.4; cursor: default; }

/* --- Unirse --- */
.cm-join { display: flex; gap: 8px; margin-bottom: 15px; }
.cm-code {
    flex: 1; min-width: 0;
    text-align: center; text-transform: uppercase;
    font-family: var(--cm-serif);
    font-size: 1.1rem; letter-spacing: 0.3em; text-indent: 0.3em;
}
/* El hueco vacío pide un texto normal: con la letra espaciada del código
   ("A B C D") la pista se lee fatal y desborda. */
.cm-code::placeholder {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.82rem; letter-spacing: 0.06em; text-transform: none;
}
.cm-secondary {
    flex: 0 0 auto;
    padding: 11px 18px;
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    color: var(--cm-bone);
    font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; transition: .2s;
}
.cm-secondary:hover { border-color: var(--cm-gold); color: var(--cm-gold-hi); }
.cm-secondary:disabled { opacity: 0.4; cursor: default; }

.cm-live {
    border: 1px solid var(--cm-hair); border-radius: 2px;
    background: rgba(var(--cm-shade-rgb), 0.25);
}
.cm-live-head {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cm-hair);
    font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cm-dim);
}
.cm-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cm-live);
    box-shadow: 0 0 0 3px rgba(var(--cm-live-rgb), 0.15);
    animation: cm-latido 2.4s ease-in-out infinite;
}
@keyframes cm-latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.cm-live-list { max-height: 172px; overflow-y: auto; }
.cm-live-list table { width: 100%; border-collapse: collapse; }
.cm-live-list td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--cm-hair);
    font-size: 0.82rem; vertical-align: middle;
}
.cm-live-list tr:last-child td { border-bottom: 0; }
.cm-live-list .cm-live-empty {
    padding: 18px 12px; text-align: center;
    font-size: 0.76rem; color: var(--cm-dim-2);
}
.cm-live-name { color: var(--cm-bone); }
.cm-live-meta {
    display: block; margin-top: 3px;
    font-size: 0.68rem; letter-spacing: 0.04em; color: var(--cm-dim-2);
}
.cm-live-cell-act { text-align: right; width: 1%; }
.cm-live-join {
    padding: 6px 12px;
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    color: var(--cm-bone);
    font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer; transition: .2s;
}
.cm-live-join:hover { border-color: var(--cm-gold); color: var(--cm-gold-hi); }
.cm-live-join.es-mia { border-color: rgba(var(--cm-gold-rgb), 0.5); color: var(--cm-gold); }
#modal-play .fila-en-curso td { background: rgba(var(--cm-gold-rgb), 0.045); }
#modal-play .badge-en-curso,
.cm-live-list .badge-en-curso {
    display: inline-block; margin-left: 8px; padding: 2px 6px;
    background: none;
    border: 1px solid rgba(var(--cm-gold-rgb), 0.45); border-radius: 1px;
    color: var(--cm-gold);
    font-size: 0.58rem; font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase;
    vertical-align: middle;
}

/* --- Sala creada (espera) --- */
.cm-wait { padding: 22px 26px 26px; text-align: center; }
.cm-wait-label {
    margin: 0;
    font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cm-dim);
}
.cm-code-big {
    margin: 10px 0 18px;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 2.5rem; letter-spacing: 0.3em; text-indent: 0.3em;
    color: var(--cm-gold-hi);
}
.cm-share { display: flex; justify-content: center; gap: 10px; }
.cm-share .cm-icon-btn { width: 40px; height: 40px; font-size: 1.1rem; }
.cm-wait .cm-seat-grid { margin: 20px 0 0; text-align: left; }
.cm-wait-msg {
    margin: 18px 0 0;
    font-size: 0.8rem; color: var(--cm-dim);
}
/* .anim-parpadeo estaba en el HTML de la sala de espera desde el principio pero
   ninguna hoja la definía: aquí se le da por fin el latido que promete su
   nombre, reutilizando los fotogramas de style.css. */
.cm-wait .anim-parpadeo { animation: parpadeo 1.8s ease-in-out infinite; }
.cm-quiet {
    margin-top: 18px; padding: 9px 16px;
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    color: var(--cm-dim);
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; transition: .2s;
}
.cm-quiet:hover { color: var(--cm-red); border-color: rgba(var(--cm-red-rgb), 0.5); }

/* ============================================================
   5. Clasificación
   ============================================================ */

.cm-table-wrap { overflow: auto; max-height: 58vh; }
.cm-table { width: 100%; border-collapse: collapse; }
.cm-table thead th {
    position: sticky; top: 0; z-index: 1;
    padding: 12px 8px;
    background: var(--cm-ink-2);
    border-bottom: 1px solid var(--cm-hair-2);
    color: var(--cm-dim);
    font-weight: 400; font-size: 0.64rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    text-align: right; white-space: nowrap;
}
.cm-table thead th:first-child { padding-left: 26px; }
.cm-table thead th:last-child { padding-right: 26px; }
.cm-th-rank { width: 30px; }
.cm-table thead th.cm-th-name { text-align: left; }
.cm-th-sort { cursor: pointer; user-select: none; transition: color .2s; }
.cm-th-sort:hover { color: var(--cm-bone); }
.cm-th-sort.is-sorted { color: var(--cm-gold); }
.cm-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--cm-hair);
    font-size: 0.85rem; text-align: right;
}
.cm-table td:first-child { padding-left: 26px; }
.cm-table td:last-child { padding-right: 26px; }
.cm-table tbody tr:hover td { background: rgba(var(--cm-fg-rgb), 0.025); }
/* Con `.cm-table td { text-align: right }` delante hacen falta dos clases
   para ganar: por eso van cualificadas con el elemento. */
.cm-table td.cm-td-rank {
    text-align: center;
    font-family: var(--cm-serif); font-size: 0.9rem;
    color: var(--cm-dim-2);
}
.cm-table td.cm-td-rank.es-podio { color: var(--cm-gold); }
.cm-table td.cm-td-name { text-align: left; }
.cm-td-elo {
    font-family: var(--cm-serif); font-size: 1rem;
    color: var(--cm-gold);
}
.cm-td-num { color: var(--cm-dim); }
.lb-name {
    padding: 0; border: 0;
    border-bottom: 1px dotted var(--cm-hair-2);
    color: var(--cm-bone); font-size: 0.88rem;
    cursor: pointer; transition: color .2s;
}
.lb-name:hover { color: var(--cm-gold-hi); }
.lb-name.es-codigo {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.8rem; letter-spacing: 0.06em;
    color: var(--cm-gold); border-bottom-color: transparent;
}
#modal-leaderboard .cm-note { margin: 14px 26px 22px; }

/* ============================================================
   6. Acerca de
   ============================================================ */

.cm-prose {
    padding: 20px 26px 26px; overflow-y: auto;
    font-size: 0.9rem; line-height: 1.75;
    color: var(--cm-bone);
}
.cm-prose p, .cm-prose div { margin: 0 0 13px; }
.cm-prose a { color: var(--cm-gold); }
.cm-prose ul { margin: 0 0 13px; padding-left: 20px; }

/* ============================================================
   6bis. Puente con las ventanas que todavía no se han rediseñado
   ============================================================
   Ajustes, amigos, login, registro y el tutorial siguen con su
   estructura y sus acentos de siempre: aquí sólo se cambia la
   SUPERFICIE (fondo, filetes, sombra) para que abrirlas desde el
   menú nuevo no parezca saltar a otra aplicación. Nada de layout. */

#modal-settings, #modal-social, #modal-login, #modal-signup,
#modal-verify, #modal-forgot, #modal-reset, #modal-tutorial {
    background: var(--cm-ink-2) !important;
    border: 1px solid var(--cm-hair-2) !important;
    border-radius: 2px !important;
    box-shadow: 0 26px 70px rgba(var(--cm-shade-rgb), 0.75) !important;
}

#modal-settings .settings-fila,
#modal-settings .settings-seccion,
#modal-social #social-body .caja,
#modal-settings #settings-codigo {
    background: var(--cm-ink-3);
    border-color: var(--cm-hair);
}
#modal-settings .settings-seccion > summary:hover,
#modal-settings .settings-fila #btn-lang {
    background: rgba(var(--cm-fg-rgb), 0.05);
    border-color: var(--cm-hair-2);
}
#modal-settings .settings-panel { border-top-color: var(--cm-hair); }
#modal-settings .settings-panel input,
#modal-settings #settings-nombre-invitado {
    background: var(--cm-ink-3);
    border-color: var(--cm-hair-2);
}

/* Tema (en Ajustes): dos opciones en un filete, como los segmentos del perfil.
   Cada una lleva un naipe diminuto con su fondo y un punto de oro. Los :is()
   de style.css fuerzan el color de los <span> de esta ventana, de ahí el
   !important del texto. */
.cm-tema {
    display: inline-flex; flex: 0 0 auto;
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    overflow: hidden;
}
.cm-tema-op {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0; padding: 6px 12px;
    background: transparent; border: 0; border-radius: 0;
    color: var(--cm-dim);
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer; transition: color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.cm-tema-op + .cm-tema-op { border-left: 1px solid var(--cm-hair); }
.cm-tema-op:hover { background: rgba(var(--cm-fg-rgb), 0.05); color: var(--cm-bone); }
.cm-tema-op[aria-checked="true"],
.cm-tema-op[aria-checked="true"]:hover { background: var(--cm-gold-fill); color: var(--cm-on-gold); }
#modal-settings .cm-tema-op span { color: inherit !important; }
.cm-tema-op:focus-visible { outline: 1px solid var(--cm-gold); outline-offset: 2px; }

.cm-tema-muestra {
    position: relative; flex: 0 0 auto;
    width: 11px; height: 15px;
    border: 1px solid rgba(var(--cm-fg-rgb), 0.4); border-radius: 2px;
}
.cm-tema-op[data-tema="oscuro"] .cm-tema-muestra { background: #0B0C0E; }
.cm-tema-op[data-tema="claro"] .cm-tema-muestra { background: #F2EEE4; }
.cm-tema-op[aria-checked="true"] .cm-tema-muestra { border-color: rgba(11, 12, 14, 0.55); }
.cm-tema-muestra::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
    border-radius: 50%; background: #C9A227;
}

/* ============================================================
   7. Aviso flotante ("todavía no disponible")
   ============================================================ */

.cm-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 3000;
    max-width: min(360px, calc(100vw - 40px));
    padding: 13px 20px;
    background: var(--cm-ink-2);
    border: 1px solid var(--cm-hair-2);
    border-left: 3px solid var(--cm-gold);
    border-radius: 2px;
    box-shadow: 0 14px 34px rgba(var(--cm-shade-rgb), 0.6);
    color: var(--cm-bone);
    font-size: 0.84rem; line-height: 1.45; text-align: left;
    opacity: 0; transform: translate(-50%, 14px);
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}
.cm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   8. Ajustes finos y móvil
   ============================================================ */

/* Barras de scroll discretas dentro de las ventanas nuevas */
.cm-win-body, .cm-live-list, .cm-table-wrap, .cm-prose { scrollbar-width: thin; }
.cm-win-body::-webkit-scrollbar,
.cm-live-list::-webkit-scrollbar,
.cm-table-wrap::-webkit-scrollbar,
.cm-prose::-webkit-scrollbar { width: 8px; height: 8px; }
.cm-win-body::-webkit-scrollbar-thumb,
.cm-live-list::-webkit-scrollbar-thumb,
.cm-table-wrap::-webkit-scrollbar-thumb,
.cm-prose::-webkit-scrollbar-thumb {
    background: var(--cm-hair-2); border-radius: 4px;
}

:where(.cm-play, .cm-row, .cm-minor-item, .cm-mode, .cm-opt, .cm-primary,
       .cm-secondary, .cm-quiet, .cm-icon-btn, .cm-link, .lb-name,
       .cm-live-join, .cm-th-sort, .cm-close, .cm-btn-google,
       .cm-form-link a):focus-visible {
    outline: 1px solid var(--cm-gold);
    outline-offset: 2px;
}
.cm-form input:focus-visible { outline: none; }

/* Con un modal abierto se bloquea el scroll del fondo: en un móvil evita que la
   página de detrás se desplace mientras se rellena el formulario. */
body.cm-modal-abierto { overflow: hidden; }

@media (max-width: 560px) {
    .cm-logo { margin-top: 64px; width: 228px; }
    .cm-menu { max-width: 100%; }
    .cm-play { padding: 17px 16px 17px 20px; }
    .cm-play-label { font-size: 1.35rem; }
    .cm-win-head { padding: 20px 18px 14px; }
    .cm-win-body { padding: 4px 18px 20px; }
    .cm-wait { padding: 20px 18px 24px; }
    .cm-prose { padding: 18px 18px 22px; }
    .cm-code-big { font-size: 2rem; }
    .cm-table thead th:first-child, .cm-table td:first-child { padding-left: 16px; }
    .cm-table thead th:last-child, .cm-table td:last-child { padding-right: 16px; }
    #modal-leaderboard .cm-note { margin: 12px 18px 18px; }
    .cm-mode small { font-size: 0.64rem; }
    .cm-top { left: 12px; gap: 8px; }
    .cm-link, .cm-whoami { font-size: 0.66rem; letter-spacing: 0.08em; }
    .cm-minor { gap: 0 14px; }
    .cm-minor-item { font-size: 0.68rem; }
}

@media (max-width: 400px) {
    /* Tres botones a la derecha + identidad a la izquierda: sin versalitas
       tan anchas para que no se solapen. */
    .cm-auth { flex-direction: column; align-items: flex-start; gap: 0; }
    .cm-dot { display: none; }
    .cm-modes { gap: 7px; }
    .cm-mode { padding: 12px 6px 11px; }
    .cm-diagram { width: 56px; height: 41px; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-live-dot, .cm-wait .anim-parpadeo, .cm-orn-ciclo .pinta { animation: none; }
    .cm-play, .cm-play::before, .cm-play-arrow, .cm-row .pinta,
    .cm-toast, .cm-icon-btn, .cm-opt, .cm-mode { transition: none; }
    /* Sin micro-hundido al pulsar; el feedback de color/fondo se mantiene. */
    .cm-play:active, .cm-resume:active, .cm-icon-btn:active,
    .cm-primary:active, .cm-secondary:active, .cm-step-btn:active,
    .cm-close:active { transform: none; }
}

/* ============================================================
   9. Mis barajas (#modal-decks) — Roadmap #5
   ------------------------------------------------------------
   Dos zonas: arriba la baraja montada (un as por palo y el
   dorso, que hacen a la vez de pestañas) y abajo el catálogo
   de temas del hueco que se está editando. Las cartas se
   pintan a su proporción real (0.652) para que lo que se elige
   sea exactamente lo que luego se ve en la mesa.
   ============================================================ */

.deck-slots {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
    margin: 18px 0 4px;
}
.deck-slot {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 9px 4px 8px;
    background: var(--cm-ink-3);
    border: 1px solid var(--cm-hair); border-radius: 2px;
    color: var(--cm-dim); cursor: pointer;
    transition: border-color .18s, color .18s;
}
.deck-slot img {
    width: 100%; max-width: 62px; aspect-ratio: 208 / 319;
    object-fit: cover; border-radius: 3px;
    background: var(--cm-ink);
    box-shadow: 0 3px 10px rgba(var(--cm-shade-rgb), 0.5);
}
.deck-slot-et {
    font-family: var(--cm-serif);
    font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.deck-slot small {
    font-size: 0.62rem; color: var(--cm-dim-2);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deck-slot:hover { border-color: var(--cm-hair-2); color: var(--cm-bone); }
.deck-slot.is-on {
    border-color: var(--cm-gold); color: var(--cm-gold-hi);
    background: rgba(var(--cm-gold-rgb), 0.06);
}
/* El palo desplegado se corona con un filete de oro que lo enlaza con el panel
   que se abre justo debajo. */
.deck-slot.is-open {
    border-color: var(--cm-gold); color: var(--cm-gold-hi);
    background: rgba(var(--cm-gold-rgb), 0.09);
    box-shadow: inset 0 2px 0 var(--cm-gold);
}

/* ---- Panel desplegable con las cartas del palo elegido ------------------- */
/* Se abre con el truco grid-rows 0fr→1fr: anima la altura real sin fijar un
   máximo a ojo, y el contenido recortado por overflow no salta. */
.deck-despliegue {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .32s cubic-bezier(.22, .61, .36, 1);
}
.deck-despliegue.is-open { grid-template-rows: 1fr; }
.deck-despliegue-in { overflow: hidden; min-height: 0; }
.deck-despliegue.is-open .deck-despliegue-in {
    padding: 16px 2px 4px;
}
.deck-despliegue-tit {
    margin: 0 0 12px;
    font-family: var(--cm-serif); font-size: 0.76rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-dim);
    opacity: 0; transform: translateY(-4px);
    transition: opacity .3s ease .06s, transform .3s ease .06s;
}
.deck-despliegue-tit b { color: var(--cm-gold-hi); font-weight: 400; }
.deck-despliegue-tema { color: var(--cm-bone); font-style: italic; letter-spacing: 0.06em; }
.deck-despliegue.is-open .deck-despliegue-tit { opacity: 1; transform: none; }
/* Baraja que se mira sin tenerla: misma rejilla, menos luz. El filtro no
   pelea con la opacidad de la animación de entrada. */
.deck-despliegue.is-lock .deck-despliegue-tit b { color: var(--cm-dim); }
.deck-despliegue.is-lock .deck-carta img {
    filter: grayscale(0.35) brightness(0.52);
}
.deck-despliegue.is-lock .deck-carta figcaption { color: var(--cm-dim-2); }

.deck-cartas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 10px;
}
.deck-carta {
    margin: 0;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.deck-carta img {
    width: 100%; aspect-ratio: 208 / 319; object-fit: cover;
    border-radius: 3px; background: var(--cm-ink);
    box-shadow: 0 3px 12px rgba(var(--cm-shade-rgb), 0.55);
    /* Cada carta entra por su cuenta, escalonada según --i, como si se
       fueran repartiendo. */
    opacity: 0; transform: translateY(8px);
}
.deck-despliegue.is-open .deck-carta img {
    animation: deck-carta-in .42s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 34ms + 60ms);
}
.deck-carta figcaption {
    font-family: var(--cm-serif); font-size: 0.6rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--cm-dim-2);
}
@keyframes deck-carta-in {
    to { opacity: 1; transform: none; }
}

.deck-barra {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 18px 0 12px; padding-top: 14px;
    border-top: 1px solid var(--cm-hair);
}
/* El rótulo ocupa su propia línea para que los dos botones caigan juntos en la
   siguiente en vez de partirse uno a cada lado. */
.deck-elige {
    flex: 1 1 100%; margin: 0;
    font-family: var(--cm-serif); font-size: 0.8rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--cm-dim);
}
.deck-elige b { color: var(--cm-gold-hi); font-weight: 400; }

.cm-mini {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--cm-hair-2); border-radius: 1px;
    color: var(--cm-dim);
    font-family: inherit; font-size: 0.63rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; transition: border-color .18s, color .18s;
}
.cm-mini:hover { border-color: var(--cm-gold); color: var(--cm-gold-hi); }

.deck-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}
.deck-opt {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 8px 6px 9px;
    background: var(--cm-ink-3);
    border: 1px solid var(--cm-hair); border-radius: 2px;
    color: var(--cm-bone); cursor: pointer;
    transition: border-color .18s, transform .18s;
}
.deck-opt img {
    width: 100%; aspect-ratio: 208 / 319; object-fit: cover;
    border-radius: 3px; background: var(--cm-ink);
    box-shadow: 0 3px 12px rgba(var(--cm-shade-rgb), 0.55);
}
.deck-opt b {
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.72rem; letter-spacing: 0.1em; text-align: center;
    line-height: 1.25;
}
.deck-opt:hover { border-color: var(--cm-hair-2); transform: translateY(-2px); }
.deck-opt.is-on { border-color: var(--cm-gold); background: rgba(var(--cm-gold-rgb), 0.07); }
.deck-opt.is-on b { color: var(--cm-gold-hi); }

/* Bloqueado: se ve atenuado, pero se puede abrir para mirar las cartas. */
.deck-opt.is-lock img { filter: grayscale(1) brightness(0.5); }
.deck-opt.is-lock b { color: var(--cm-dim); }
.deck-opt.is-preview { border-color: var(--cm-gold); }
.deck-opt.is-lock.is-preview {
    border-color: var(--cm-dim);
    background: rgba(var(--cm-fg-rgb), 0.04);
}
.deck-lock, .deck-opt .deck-tag {
    font-style: normal; font-size: 0.55rem;
    letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
    line-height: 1.3;
}
.deck-lock { color: var(--cm-gold); }
.deck-opt .deck-tag { color: var(--cm-dim-2); }

/* El mensaje de esta ventana es casi siempre bueno ("guardada"), así que el
   rojo de .cm-msg se reserva para cuando algo falla de verdad. */
#decks-msg { color: var(--cm-dim); }
#decks-msg.is-mal { color: var(--cm-red); }

@media (max-width: 460px) {
    .deck-slots { gap: 5px; }
    .deck-slot { padding: 6px 2px 6px; }
    .deck-slot-et { font-size: 0.55rem; letter-spacing: 0.08em; }
    .deck-slot small { display: none; }
    .deck-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
    .deck-cartas { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .deck-opt, .deck-slot, .cm-mini { transition: none; }
    .deck-opt:hover { transform: none; }
    /* Sin animación de altura ni escalonado: el panel simplemente aparece. */
    .deck-despliegue { transition: none; }
    .deck-despliegue-tit { transition: none; opacity: 1; transform: none; }
    .deck-despliegue.is-open .deck-carta img { animation: none; }
    .deck-carta img { opacity: 1; transform: none; }
}

/* ============================================================
   10. Fin de partida — invitación a registrarse (#overlay-registro-invitado)
   ------------------------------------------------------------
   Pantalla que cubre la mesa al acabar el match cuando se juega
   como invitado. Mismo lenguaje que las ventanas del menú
   (tinta de medianoche): velo oscuro, tarjeta ink-2 con filete
   de oro arriba y serifa en versalitas. Va por DEBAJO de los
   modales de login/registro (z 1200) para que, al pulsar sus
   botones, la ventana correspondiente aparezca por encima y al
   cerrarla se siga viendo esta pantalla.
   ============================================================ */

.cm-fin {
    position: fixed; inset: 0; z-index: 1150;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; box-sizing: border-box;
    background: rgba(var(--cm-veil-rgb), 0.90);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    animation: cm-fin-velo .35s ease both;
}

.cm-fin-card {
    position: relative;
    width: 380px; max-width: 100%; max-height: 92vh; overflow-y: auto;
    box-sizing: border-box;
    padding: 34px 30px 26px;
    background: var(--cm-ink-2);
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    box-shadow: 0 26px 70px rgba(var(--cm-shade-rgb), 0.75);
    text-align: center;
    animation: cm-fin-sube .4s cubic-bezier(.2, .7, .3, 1) both;
}
/* Filete de oro que corona la tarjeta (igual que .cm-win). */
.cm-fin-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--cm-gold), transparent);
    opacity: 0.75;
}

.cm-fin-orn {
    display: flex; justify-content: center; gap: 14px; margin-bottom: 18px;
    color: var(--cm-dim-2);
}
.cm-fin-orn .pinta { width: 15px; height: 15px; }
/* El oro recorre una sola pinta, como manda la línea de marca. */
.cm-fin-orn .pinta:nth-child(1) { color: var(--cm-gold); }

.cm-fin-title {
    margin: 0 0 10px;
    font-family: var(--cm-serif); font-weight: 400;
    font-size: 1.5rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cm-bone);
}
.cm-fin-sub {
    margin: 0 auto 24px; max-width: 30ch;
    font-size: 0.86rem; line-height: 1.5; color: var(--cm-dim);
}

.cm-fin-actions { display: flex; flex-direction: column; gap: 10px; }

.cm-fin-primary {
    display: block; width: 100%; margin: 0; padding: 14px;
    background: var(--cm-gold-fill);
    border: 1px solid var(--cm-gold-fill); border-radius: 2px;
    color: var(--cm-on-gold);
    font-family: var(--cm-serif);
    font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase;
    cursor: pointer; transition: background .2s;
}
.cm-fin-primary:hover { background: var(--cm-gold-fill-hi); }

/* Botón de Google: blanco, como en los modales de login/registro, para que se
   reconozca al instante. Es la "opción de registrarte con Google justo debajo". */
.cm-fin-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; margin: 0; padding: 12px;
    background: #ffffff;
    border: 1px solid #ffffff; border-radius: 2px;
    color: #3c4043;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: filter .2s;
}
.cm-fin-google:hover { filter: brightness(0.94); }
.cm-fin-google img { width: 18px; height: 18px; }

.cm-fin-rule {
    height: 1px; margin: 22px 0 16px;
    background: var(--cm-hair);
}

.cm-fin-alt {
    margin: 0 0 6px;
    font-size: 0.82rem; color: var(--cm-dim);
}
.cm-fin-link {
    margin: 0; padding: 0 2px; border: 0; background: none;
    color: var(--cm-gold); font-family: inherit; font-size: 0.82rem;
    letter-spacing: 0.02em; text-decoration: underline; cursor: pointer;
    transition: color .2s;
}
.cm-fin-link:hover { color: var(--cm-gold-hi); }

.cm-fin-quiet {
    margin: 16px auto 0; padding: 9px 16px;
    background: var(--cm-ink-2);
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    color: var(--cm-dim);
    font-family: inherit; font-size: 0.68rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    cursor: pointer; transition: color .2s, border-color .2s;
    position: sticky; bottom: 0;
}
.cm-fin-quiet:hover { color: var(--cm-bone); border-color: var(--cm-hair); }

:where(.cm-fin-primary, .cm-fin-google, .cm-fin-link, .cm-fin-quiet):focus-visible {
    outline: 1px solid var(--cm-gold); outline-offset: 2px;
}

@keyframes cm-fin-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-fin-sube {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 400px) {
    .cm-fin-card { padding: 28px 20px 22px; }
    .cm-fin-title { font-size: 1.3rem; }
}

/* Teléfono en horizontal: la tarjeta tiene que dejar a la vista el «Volver
   al menú principal» sin hacer scroll. Se recorta adorno, no acciones. */
@media (orientation: landscape) and (max-height: 500px) {
    .cm-fin { padding: 8px; align-items: stretch; }
    .cm-fin-card {
        width: min(560px, 100%);
        max-height: 100%;
        padding: 14px 20px 12px;
        display: flex;
        flex-direction: column;
    }
    .cm-fin-orn { display: none; }
    .cm-fin-title { font-size: 1.15rem; margin-bottom: 4px; }
    .cm-fin-sub { margin-bottom: 10px; font-size: 0.8rem; }
    .cm-fin-actions { gap: 6px; }
    .cm-fin-primary, .cm-fin-google { padding: 10px; }
    .cm-fin-rule { margin: 10px 0 8px; }
    .cm-fin-quiet { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-fin, .cm-fin-card { animation: none; }
    .cm-fin-primary, .cm-fin-google, .cm-fin-link, .cm-fin-quiet { transition: none; }
}

/* ==========================================================================
   PERFIL DE JUGADOR — ESTADÍSTICAS (Roadmap #19)
   Misma línea «tinta de medianoche»: ink de fondo, hueso, un único oro de
   acento, filetes de 1px, serifa en versalitas. Sin degradados de color.
   ========================================================================== */
#modal-perfil .cm-win-body { padding: 6px 26px 24px; }

.perfil-toggles { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; }
.perfil-seg {
    display: inline-flex;
    border: 1px solid var(--cm-hair-2); border-radius: 2px; overflow: hidden;
}
.perfil-seg-btn {
    padding: 6px 15px; background: transparent; border: 0;
    color: var(--cm-dim); cursor: pointer; transition: color .15s, background .15s;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
}
.perfil-seg-btn + .perfil-seg-btn { border-left: 1px solid var(--cm-hair); }
.perfil-seg-btn:hover { color: var(--cm-bone); }
.perfil-seg-btn.is-active { background: var(--cm-gold-fill); color: var(--cm-on-gold); }

/* Rejilla de marcadores (ELO, victorias, partidas…) */
.perfil-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 1px; margin: 14px 0 4px;
    background: var(--cm-hair); border: 1px solid var(--cm-hair);
}
.perfil-tile { background: var(--cm-ink-3); padding: 12px 8px 10px; text-align: center; }
.pt-num {
    display: block; font-family: var(--cm-serif); font-size: 1.32rem;
    line-height: 1.05; color: var(--cm-bone);
}
.pt-lbl {
    display: block; margin-top: 6px;
    font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--cm-dim-2);
}

/* Filas de métrica */
.perfil-metricas { margin-top: 20px; }
.perfil-metrica { padding: 12px 0; border-top: 1px solid var(--cm-hair); }
.perfil-metrica:first-child { border-top: 0; }
.pm-head {
    width: 100%; display: flex; align-items: baseline; gap: 10px;
    padding: 0; background: transparent; border: 0; text-align: left;
    color: var(--cm-bone); cursor: default;
}
.perfil-metrica.es-desplegable .pm-head { cursor: pointer; }
.pm-label { flex: 1; font-family: var(--cm-serif); font-size: 0.94rem; letter-spacing: 0.02em; }
.pm-val { font-family: var(--cm-serif); font-size: 1rem; color: var(--cm-gold); }
.pm-caret {
    width: 11px; color: var(--cm-dim-2); font-size: 0.68rem;
    transition: transform .15s;
}
.perfil-metrica.es-abierto .pm-caret { transform: rotate(90deg); }

.pm-bar {
    position: relative; height: 6px; margin: 9px 0 5px;
    background: var(--cm-ink-3); border: 1px solid var(--cm-hair); border-radius: 2px;
}
.pm-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--cm-gold); opacity: 0.85; }
.pm-avg { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--cm-bone); opacity: 0.6; }
.pm-avgtxt {
    font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cm-dim-2);
}

/* Desglose por lance */
.pm-desglose { margin-top: 11px; padding-left: 2px; }
.pm-lance { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.pml-name { width: 66px; font-family: var(--cm-serif); font-size: 0.78rem; color: var(--cm-dim); }
.pm-lance .pm-bar { flex: 1; margin: 0; }
.pml-val { width: 46px; text-align: right; font-size: 0.76rem; color: var(--cm-bone); }

.pm-nota {
    margin: 18px 0 0; font-size: 0.66rem; line-height: 1.5;
    letter-spacing: 0.02em; color: var(--cm-dim-2);
}

/* --- Barajas de colección en el perfil (logros) ---------------------------
   Bajo el código del jugador. Cada baraja es su carta de portada en miniatura,
   con filete fino; las raras (≤10 % de los jugadores) llevan marco de oro y
   un brillo que pasa una vez al abrir el perfil. Entran escalonadas. */
.pb { margin-top: 16px; }
.pb-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.pb-tit {
    font-family: var(--cm-serif); font-size: 0.74rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--cm-dim);
}
.pb-n { font-family: var(--cm-serif); font-size: 1.05rem; color: var(--cm-gold); line-height: 1; }
.pb-cmp {
    margin-left: auto; font-size: 0.66rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--cm-dim-2);
}
.pb-cmp.is-menos { color: var(--cm-dim); }
.pb-vacio { margin: 0; font-size: 0.74rem; color: var(--cm-dim-2); }
.pb-strip { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.pb-deck {
    margin: 0; width: 62px; text-align: center; outline: none;
    opacity: 0; transform: translateY(8px);
    animation: pb-entra .5s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(var(--i) * 55ms + 60ms);
}
@keyframes pb-entra { to { opacity: 1; transform: none; } }
.pb-card {
    position: relative; width: 58px; height: 89px; margin: 0 auto; overflow: hidden;
    border: 1px solid var(--cm-hair-2); border-radius: 3px;
    background: var(--cm-ink-3);
    box-shadow: 0 6px 14px rgba(var(--cm-shade-rgb), 0.45);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
}
.pb-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pb-deck:hover .pb-card, .pb-deck:focus-visible .pb-card {
    transform: translateY(-4px) rotate(-2.5deg);
    border-color: rgba(var(--cm-gold-rgb), 0.6);
    box-shadow: 0 12px 22px rgba(var(--cm-shade-rgb), 0.55);
}
.pb-deck.is-rara .pb-card {
    border-color: var(--cm-gold);
    box-shadow: 0 0 0 1px rgba(var(--cm-gold-rgb), 0.25), 0 6px 16px rgba(var(--cm-shade-rgb), 0.5);
}
/* El brillo: una franja clara que cruza la carta en diagonal una sola vez. */
.pb-deck.is-rara .pb-card::after {
    content: ""; position: absolute; inset: -40% -120%;
    background: linear-gradient(115deg, transparent 42%,
                rgba(var(--cm-gold-hi-rgb), 0.55) 50%, transparent 58%);
    transform: translateX(-60%);
    animation: pb-brillo 1.3s ease-out forwards;
    animation-delay: calc(var(--i) * 55ms + 520ms);
    pointer-events: none;
}
@keyframes pb-brillo { to { transform: translateX(60%); } }
.pb-deck figcaption { margin-top: 6px; line-height: 1.2; }
.pb-nom {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; font-size: 0.6rem; letter-spacing: 0.03em; color: var(--cm-bone);
}
.pb-pct { display: block; margin-top: 2px; font-size: 0.56rem; letter-spacing: 0.06em; color: var(--cm-dim-2); }
.pb-deck.is-rara .pb-pct { color: var(--cm-gold); }
@media (prefers-reduced-motion: reduce) {
    .pb-deck { animation: none; opacity: 1; transform: none; }
    .pb-deck.is-rara .pb-card::after { display: none; }
}

/* Nombre de jugador clicable → abre su perfil (Roadmap #19). Sutil: el nombre
   ya vive dentro de otros componentes, así que sólo cambia el cursor y un
   subrayado de oro al pasar por encima. */
.nombre-perfil { cursor: pointer; transition: color .15s; }
.nombre-perfil:hover { color: var(--cm-gold-hi); text-decoration: underline;
    text-decoration-color: var(--cm-gold); text-underline-offset: 3px; }

/* ==========================================================================
   MENÚ SOCIAL — amigos, grupos, chat (rediseño «tinta de medianoche»)
   Sustituye la paleta Nord y los emojis del módulo antiguo. Todo hueso/oro
   sobre ink, filetes de 1px, serifa en las cabeceras.
   ========================================================================== */
.sc-win { width: 460px; height: 82vh; max-height: 660px; }
.sc-win .cm-win-head { padding: 22px 24px 0; border-bottom: 0; }

.sc-tabs { display: flex; gap: 0; margin: 16px 0 0;
    border: 1px solid var(--cm-hair-2); border-radius: 2px; overflow: hidden; }
.sc-tab { flex: 1; padding: 9px 8px; background: transparent; border: 0;
    color: var(--cm-dim); cursor: pointer; transition: color .15s, background .15s;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; }
.sc-tab + .sc-tab { border-left: 1px solid var(--cm-hair); }
.sc-tab:hover { color: var(--cm-bone); }
.sc-tab.is-active { background: var(--cm-gold-fill); color: var(--cm-on-gold); }

.sc-body { flex: 1; overflow-y: auto; text-align: left; padding: 16px 24px 22px; min-height: 0; }

/* Barra de "añadir amigo / crear grupo / invitar" */
.sc-addbar { display: flex; gap: 8px; margin-bottom: 16px; }
.sc-input {
    flex: 1; min-width: 0; padding: 9px 11px;
    background: var(--cm-ink-3); color: var(--cm-bone);
    border: 1px solid var(--cm-hair-2); border-radius: 2px;
    font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 0.88rem;
}
.sc-input::placeholder { color: rgba(var(--cm-fg-rgb), 0.35); }
.sc-input:focus { outline: none; border-color: var(--cm-gold); }

/* Botones */
.sc-btn {
    padding: 8px 14px; border-radius: 2px; cursor: pointer;
    background: var(--cm-ink-3); color: var(--cm-bone);
    border: 1px solid var(--cm-hair-2);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.76rem; letter-spacing: 0.04em; transition: .15s; white-space: nowrap;
}
.sc-btn:hover { border-color: var(--cm-gold); color: var(--cm-bone); }
.sc-btn.primary { background: var(--cm-gold-fill); color: var(--cm-on-gold); border-color: var(--cm-gold-fill); font-weight: 600; }
.sc-btn.primary:hover { background: var(--cm-gold-fill-hi); }
.sc-btn.danger { color: var(--cm-red); border-color: rgba(var(--cm-red-rgb), 0.5); background: transparent; }
.sc-btn.danger:hover { border-color: var(--cm-red); }
.sc-btn.mini { padding: 5px 9px; font-size: 0.7rem; }

/* Filas de lista (amigos, grupos, miembros) */
.sc-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px 10px;
    flex-wrap: wrap;                       /* en móvil, las acciones bajan de línea */
    padding: 10px 12px; margin-bottom: 6px;
    background: var(--cm-ink-3); border: 1px solid var(--cm-hair); border-radius: 2px;
}
.sc-row.clickable { cursor: pointer; }
.sc-row.clickable:hover { border-color: var(--cm-hair-2); }
.sc-row-main { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 150px; }
.sc-name {
    font-family: var(--cm-serif); font-size: 0.98rem; color: var(--cm-bone);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.sc-meta { color: var(--cm-dim-2); font-size: 0.78rem; letter-spacing: 0.03em; flex: none; }
.sc-actions { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }

/* Punto de presencia */
.sc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cm-dim-2); }
.sc-dot.on { background: var(--cm-live); box-shadow: 0 0 6px rgba(var(--cm-live-rgb), 0.6); }

/* Insignia de no leídos (oro, discreta) */
.sc-badge {
    margin-left: 7px; padding: 1px 7px; border-radius: 9px;
    background: var(--cm-gold-fill); color: var(--cm-on-gold);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
}

.sc-section {
    margin: 6px 0 10px; font-family: var(--cm-serif); font-weight: 400;
    font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--cm-gold);
}
.sc-sep { border: 0; border-top: 1px solid var(--cm-hair); margin: 16px 0; }
.sc-empty { color: var(--cm-dim); text-align: center; margin-top: 26px; font-size: 0.86rem; }
.sc-loading { color: var(--cm-dim-2); text-align: center; margin-top: 20px; font-size: 0.82rem;
    letter-spacing: 0.08em; text-transform: uppercase; }

/* Segmento de dos botones (chat / clasificación dentro de un grupo) */
.sc-seg { display: flex; gap: 0; margin-bottom: 14px;
    border: 1px solid var(--cm-hair-2); border-radius: 2px; overflow: hidden; }
.sc-seg-btn { flex: 1; padding: 9px; background: transparent; border: 0;
    color: var(--cm-dim); cursor: pointer; transition: .15s;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sc-seg-btn + .sc-seg-btn { border-left: 1px solid var(--cm-hair); }
.sc-seg-btn:hover { color: var(--cm-bone); }
.sc-seg-btn.is-active { background: var(--cm-gold-fill); color: var(--cm-on-gold); }

/* Cabecera de una subvista (volver + título) */
.sc-subhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sc-subhead-title { font-family: var(--cm-serif); font-size: 1.1rem; letter-spacing: 0.04em; color: var(--cm-bone); }

/* Selector de política de invitación */
.sc-policy { display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
    padding: 9px 11px; background: var(--cm-ink-3); border: 1px solid var(--cm-hair); border-radius: 2px; }
.sc-policy label { font-size: 0.78rem; color: var(--cm-dim); }
.sc-select { flex: 1; padding: 6px 8px; background: var(--cm-ink-2); color: var(--cm-bone);
    border: 1px solid var(--cm-hair-2); border-radius: 2px; font-size: 0.82rem; }

/* Chat */
.sc-chat { display: flex; flex-direction: column; height: 100%; }
.sc-chat-msgs { flex: 1; overflow-y: auto; min-height: 0; padding: 10px 4px;
    display: flex; flex-direction: column; }
.sc-chat-input-row { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.sc-bubble {
    max-width: 78%; margin: 4px 0; padding: 8px 11px; border-radius: 2px;
    word-wrap: break-word; font-size: 0.9rem; line-height: 1.4;
    background: var(--cm-ink-3); color: var(--cm-bone);
    border: 1px solid var(--cm-hair); border-left: 2px solid var(--cm-hair-2);
}
.sc-bubble.mine { margin-left: auto; border-left: 1px solid var(--cm-hair);
    border-right: 2px solid var(--cm-gold); background: rgba(var(--cm-gold-rgb), 0.08); }
.sc-bubble-author { font-size: 0.72rem; font-weight: 700; color: var(--cm-gold);
    margin-bottom: 3px; letter-spacing: 0.03em; }

/* Aviso (p. ej. límite de mensajes del chat) */
.sc-warn { margin: 0 0 10px; padding: 7px 10px; font-size: 0.72rem; line-height: 1.45;
    color: var(--cm-dim); background: var(--cm-ink-3);
    border: 1px solid var(--cm-hair); border-left: 2px solid var(--cm-gold); border-radius: 2px; }
.sc-counter { font-size: 0.68rem; color: var(--cm-dim-2); align-self: center; min-width: 42px; text-align: right; }
.sc-counter.over { color: var(--cm-red); }

/* Tabla de clasificación del grupo */
.sc-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.sc-table th { padding: 7px 6px; text-align: center; color: var(--cm-dim);
    font-family: 'Segoe UI', sans-serif; font-weight: 400;
    font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
    border-bottom: 1px solid var(--cm-hair-2); }
.sc-table th.l, .sc-table td.l { text-align: left; }
.sc-table td { padding: 7px 6px; text-align: center; color: var(--cm-bone);
    border-bottom: 1px solid var(--cm-hair); }
.sc-table td.name { color: var(--cm-bone); font-family: var(--cm-serif); }
.sc-table td.elo { color: var(--cm-gold); }
.sc-rank { color: var(--cm-dim-2); }

/* Botón de información (ⓘ → 'i' en serifa) y su tooltip */
.sc-info-wrap { position: relative; }
.sc-info-btn { width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid var(--cm-hair-2); color: var(--cm-dim);
    font-family: var(--cm-serif); font-style: italic; font-size: 0.8rem; line-height: 1; }
.sc-info-btn:hover { color: var(--cm-gold); border-color: var(--cm-gold); }
.sc-info-tip { position: absolute; right: 0; top: 26px; width: 232px; z-index: 10;
    background: var(--cm-ink-2); color: var(--cm-dim); border: 1px solid var(--cm-hair-2);
    border-radius: 2px; padding: 10px 12px; font-size: 0.74rem; line-height: 1.5;
    text-align: left; box-shadow: 0 10px 26px rgba(var(--cm-shade-rgb), 0.7); }

/* Toast e invitación flotantes */
.sc-toast { position: fixed; bottom: 20px; right: 20px; z-index: 2000; max-width: 300px;
    background: var(--cm-ink-2); color: var(--cm-bone);
    border: 1px solid var(--cm-hair-2); border-left: 2px solid var(--cm-gold);
    border-radius: 2px; padding: 12px 15px; font-size: 0.86rem;
    box-shadow: 0 12px 30px rgba(var(--cm-shade-rgb), 0.7); }
.sc-invite { position: fixed; bottom: 20px; right: 20px; z-index: 2001; max-width: 320px;
    text-align: center; background: var(--cm-ink-2); color: var(--cm-bone);
    border: 1px solid var(--cm-hair-2); border-radius: 2px; padding: 18px;
    box-shadow: 0 14px 34px rgba(var(--cm-shade-rgb), 0.75); }
.sc-invite::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--cm-gold), transparent); opacity: .75; }
.sc-invite p { margin: 4px 0 14px; font-size: 0.94rem; }
.sc-invite-acts { display: flex; gap: 10px; justify-content: center; }

@media (max-width: 560px) {
    .sc-win { width: 100%; height: 88vh; }
    .sc-body { padding: 14px 16px 18px; }
    .sc-win .cm-win-head { padding: 18px 16px 0; }
}

/* ==========================================================================
   RECOMPENSAS DIARIAS / RACHA (#26) — mini-menú sutil, misma estética
   ========================================================================== */
.rec-punto{
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cm-gold); box-shadow: 0 0 6px var(--cm-gold-hi);
    margin-left: auto; align-self: center;
}
.rec-racha{ margin-bottom: 14px; }
.rec-racha-num{
    font-family: var(--cm-serif); font-size: 22px; letter-spacing: .04em;
    color: var(--cm-bone);
}
.rec-racha-num b{ color: var(--cm-gold); }
.rec-racha-hoy{ font-size: 12px; margin-top: 2px; }
.rec-racha-hoy.is-si{ color: var(--cm-live); }
.rec-racha-hoy.is-no{ color: var(--cm-dim); }

.rec-escalera{ display: flex; flex-direction: column; gap: 8px; }
.rec-item{
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border: 1px solid var(--cm-hair);
    border-radius: 4px; background: var(--cm-ink-3);
}
.rec-item.is-on{ border-color: rgba(var(--cm-gold-rgb), .45); }
.rec-thumb{
    width: 40px; height: 61px; border-radius: 3px; object-fit: cover;
    flex: 0 0 auto; border: 1px solid var(--cm-hair);
}
.rec-item:not(.is-on) .rec-thumb{ filter: grayscale(.8) brightness(.7); opacity: .8; }
.rec-info{ display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rec-info b{ color: var(--cm-bone); font-size: 14px; }
.rec-info small{ color: var(--cm-dim-2); font-size: 11px;
    overflow: hidden; text-overflow: ellipsis; }
.rec-req{
    color: var(--cm-dim); font-size: 10px; text-transform: uppercase;
    letter-spacing: .08em;
}
.rec-estado{ flex: 0 0 auto; font-size: 16px; width: 22px; text-align: center; }
.rec-estado.is-on{ color: var(--cm-live); }
.rec-estado.is-off{ filter: grayscale(1); opacity: .6; }
.rec-copiar{ margin-top: 6px; align-self: flex-start; }