*, *::before, *::after { box-sizing: border-box; }

/* Al saltar a un ancla, que no quede debajo de la cabecera pegajosa. */
html {
    scroll-padding-top: calc(var(--header-h) + var(--space-3));
    /* Mata el zoom por doble toque, que en un móvil se dispara solo al jugar rápido.
       El pellizco no lo para: eso lo lleva `core/no-zoom.js`. */
    touch-action: manipulation;
}

/*
 * 16 px en los campos, o Safari hace zoom al enfocarlos.
 *
 * Es automático y no hay evento que interceptar: si la fuente de un `input` baja de 16 px,
 * iOS acerca la pantalla al tocarlo y la deja acercada. La única forma de evitarlo es que
 * no baje. Vale para todos los formularios de la plataforma.
 */
input,
select,
textarea { font-size: max(1rem, 16px); }

/*
 * El atributo hidden tiene que ganar SIEMPRE.
 *
 * El navegador lo implementa con `[hidden] { display: none }` en su hoja de estilos,
 * que es la de menor prioridad: en cuanto un componente declara su propio display
 * (flex, grid…), ese display gana y el elemento se sigue viendo aunque el JavaScript
 * lo haya marcado como oculto. Es exactamente lo que pasaba con el panel del chat,
 * que decía estar cerrado y seguía en pantalla.
 */
[hidden] { display: none !important; }

/*
 * El color de base va en `html`, no en `body`.
 *
 * Las luces del fondo son un pseudoelemento del `body` con `z-index: -1`, y con el `body`
 * pintado de un color opaco quedaban prácticamente detrás: se intuía un tinte en las
 * esquinas y poco más. Con el color en `html`, la capa de luces cae entre el fondo y el
 * contenido, que es donde tiene que estar.
 */
html { background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-ui);
    color: var(--text);
    background: transparent;
    line-height: 1.55;
}

/*
 * El fondo de color vive en `fx.css`, junto al resto de lo que se mueve.
 *
 * Aquí había una cuadrícula de papel milimetrado, de cuando esto era un tablero de hundir
 * la flota. Se quitó y se sustituyó por las luces de colores; se fueron allí porque allí
 * estaba ya la capa de fondo animada, y tener dos peleándose por el mismo pseudoelemento
 * era exactamente lo que pasaba mientras esto estuvo en los dos sitios.
 */

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); }
h2 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
p { margin: 0 0 var(--space-3); }

a { color: var(--accent); }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: var(--accent-ink); padding: var(--space-2) var(--space-4);
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

:where(button, input, select, textarea):focus-visible {
    outline: 3px solid var(--accent-2);
    outline-offset: 2px;
}

/* ─── Cabecera ─────────────────────────────────────────────────────────────── */
.site-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-height: var(--header-h);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--line);
    background: var(--bg-deep);
    background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 30;
}

/*
 * Esta era la causa de que el avatar y el botón del tema salieran uno debajo del
 * otro: sin display flex, dos elementos de bloque se apilan y punto.
 */
.site-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}
.brand {
    display: flex; align-items: center; gap: var(--space-3);
    text-decoration: none; color: var(--text); min-width: 0;
}
.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; }
.brand-text small {
    color: var(--text-dim); font-size: .75rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logo { width: 38px; height: 38px; color: var(--accent); flex: none; }

/* En pantallas estrechas la cabecera tiene que caber en una línea: el subtítulo es
   lo primero que sobra, y después el nombre del jugador. */
@media (max-width: 46rem) {
    .brand-text small { display: none; }
    .site-header { padding-inline: var(--space-3); }
}

/* Volver a la partida: presente en la cabecera de cualquier página mientras haya
   una sala en marcha. Con punto latiendo, que es lo que hace que se mire. */
.resume-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--accent); color: var(--accent-ink); text-decoration: none;
    border-radius: 999px; padding: var(--space-2) var(--space-4);
    font-size: .85rem; font-weight: 700; white-space: nowrap;
}
.resume-link:hover { filter: brightness(1.08); }
.resume-dot {
    width: .55rem; height: .55rem; border-radius: 50%; flex: none;
    background: var(--accent-ink);
    animation: resume-pulse 1.8s ease-in-out infinite;
}
@keyframes resume-pulse { 50% { opacity: .25; } }
.resume-code { display: none; font-family: var(--font-mono); letter-spacing: .1em; }
@media (max-width: 46rem) {
    .resume-label { display: none; }
    .resume-code { display: inline; }
    .resume-link { padding: var(--space-2) var(--space-3); }
}

/* ─── Contenido ────────────────────────────────────────────────────────────── */
main { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); }


.name-form { margin: var(--space-5) auto 0; max-width: 22rem; text-align: left; }
.name-form label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: var(--space-1); }

input, select, textarea {
    width: 100%; font: inherit; color: var(--text);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-1); padding: var(--space-3);
}
input: var(--text-dim);
input: :placeholder { color: color-mix(in srgb, var(--text-dim) 70%, transparent); }

/*
 * Un botón es un botón, sea `<button>` o un enlace que hace de botón.
 *
 * Esto solo apuntaba a `button`, así que cada `<a class="ghost" role="button">` salía sin
 * marco, sin relleno y subrayado: se leía como texto suelto y no como algo que se pulsa.
 * Pasaba en la portada, en «descargar mis datos» y en «vincular Google» — en todos los
 * sitios donde la acción es navegar y por eso tiene que ser un enlace de verdad.
 */
button,
[role="button"] {
    display: inline-block;
    font: inherit; font-weight: 600; cursor: pointer;
    border-radius: var(--radius-1); border: 1px solid transparent;
    padding: var(--space-3) var(--space-4);
    text-align: center;
    text-decoration: none;
    transition: transform var(--transition), background var(--transition), border-color var(--transition);
}

button:disabled, [role="button"][aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
button:not(:disabled):hover, [role="button"]:hover { transform: translateY(-1px); }
button:not(:disabled):active, [role="button"]:active { transform: translateY(0); }

.primary { background: var(--accent); color: var(--accent-ink); }
.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.ghost:hover { border-color: var(--accent); }
.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.small { padding: var(--space-2) var(--space-3); font-size: .85rem; }
.big { padding: var(--space-4) var(--space-6); font-size: 1.05rem; }

/* ─── Tarjetas de la portada ───────────────────────────────────────────────── */
.cards { display: block; }
.card {
    display: flex; flex-direction: column; gap: var(--space-2); text-align: left;
    height: 100%;
    background: var(--surface); border: 1px solid var(--line); color: var(--text);
    padding: var(--space-5); border-radius: var(--radius-2);
}
.card-primary { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.card-title { font-size: 1.15rem; font-weight: 700; }
.card-hint { color: var(--text-dim); font-size: .9rem; font-weight: 400; }

.code-input {
    font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: .35em;
    text-transform: uppercase; text-align: center;
}

.public-rooms { margin-top: var(--space-6); }
.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.room-list li {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-1); padding: var(--space-3) var(--space-4);
}
.room-list .code { font-family: var(--font-mono); letter-spacing: .2em; color: var(--accent); }
.empty { color: var(--text-dim); }

/* ─── Avisos ───────────────────────────────────────────────────────────────── */
/*
 * Los avisos van por encima de TODO.
 *
 * Estaban en 50 y quedaban por debajo de la hoja de mesas (60), del editor de cara (80) y
 * del diálogo de confirmar (200): justo de las tres pantallas que más avisos producen. Un
 * aviso que no se ve es peor que no darlo, porque quien actúa cree que no ha pasado nada.
 *
 * 1000 es a propósito muy por encima de lo que hay, para que el próximo modal no vuelva a
 * taparlos sin que nadie se dé cuenta.
 */
.toasts { position: fixed; inset-inline: 0; bottom: var(--space-4); display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; z-index: 1000; }
.toast {
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-3); box-shadow: var(--shadow-2);
    max-width: min(90vw, 32rem); animation: toast-in 200ms ease-out;
}
.toast[data-kind="error"] { border-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ─── Movimiento reducido ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ─── Elección de modo y reglas ─────────────────────────────────────────────── */
.section-title { text-align: center; margin-bottom: var(--space-4); }
.cards-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.card-players { font-size: .78rem; color: var(--accent); font-weight: 600; margin-top: auto; }

.setup {
    margin-top: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius-2);
    padding: var(--space-5);
}
.setup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.setup-head h2 { text-transform: none; letter-spacing: 0; font-size: 1.4rem; color: var(--text); margin-bottom: var(--space-1); }
.setup-tagline { color: var(--accent); margin: 0; font-weight: 600; }
.setup-help { color: var(--text-dim); margin: var(--space-3) 0 var(--space-5); max-width: 60ch; }
.setup-actions { margin-top: var(--space-5); display: grid; gap: var(--space-2); justify-items: center; text-align: center; }

/* Cada regla con su explicación debajo: si hay que explicarla de viva voz, falta texto. */
.options { display: grid; gap: var(--space-4); }
@media (min-width: 45rem) { .options { grid-template-columns: 1fr 1fr; } }

.option {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-1) var(--space-3);
    align-items: center;
    padding-bottom: var(--space-3);
    border-bottom: var(--line);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.option-label { font-weight: 600; font-size: .95rem; }
.option-help { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--text-dim); line-height: 1.45; }
.option select { width: auto; min-width: 9rem; }
.option-toggle input { width: 1.15rem; height: 1.15rem; }
.option-mode {
    grid-column: 1 / -1; margin: 0 0 var(--space-2);
    font-size: .85rem; color: var(--text-dim);
    background: var(--surface-2); border-radius: var(--radius-1); padding: var(--space-2) var(--space-3);
}

/* Cómo se juega */
.how-list { margin: var(--space-3) 0; padding-left: 1.4rem; display: grid; gap: var(--space-2); color: var(--text-dim); }
.how-list strong { color: var(--text); }

/* Enlace suelto de la cabecera. Se esconde en móvil: ahí la cabecera es para la
   cuenta y el sonido, y lo demás se llega desde la portada. */
.header-link {
    font-size: .82rem;
    color: var(--text-dim);
    text-decoration: none;
    white-space: nowrap;
}
.header-link:hover, .header-link:focus-visible { color: var(--accent); }
@media (max-width: 34rem) { .header-link { display: none; } }

/* ─── Portada ──────────────────────────────────────────────────────────────────
 *
 * Es una lista de juegos y poco más. Se diseña para el móvil de frente —una columna,
 * objetivos grandes, nada que se salga— y en pantalla ancha las tarjetas se reparten
 * solas. No hay una versión de escritorio y otra de móvil: hay una que cabe en las dos.
 */

.portada {
    display: grid;
    gap: var(--space-5);
    max-width: 46rem;
    margin-inline: auto;
    padding-block: var(--space-4);
}

.portada-saludo {
    margin: 0;
    color: var(--text-dim);
    font-size: .95rem;
}

.portada-titulo {
    margin: 0;
    font-size: clamp(1.75rem, 7vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.portada-entrar { justify-self: start; }

/* Las tarjetas de juego. Una columna en el móvil; a partir de ahí, las que quepan. */
.juegos {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
    .juegos { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/*
 * Cada juego, de un color de la baraja.
 *
 * Se reparten por posición y no por nombre: así el tercer juego que se instale ya viene
 * con el suyo sin tocar nada. Cuatro colores y vuelta a empezar, como los palos.
 */
.juego:nth-child(4n + 1) { --color: var(--oros); }
.juego:nth-child(4n + 2) { --color: var(--copas); }
.juego:nth-child(4n + 3) { --color: var(--espadas); }
.juego:nth-child(4n)     { --color: var(--bastos); }

.juego {
    position: relative;
    display: grid;
    gap: var(--space-1);
    align-content: start;
    /* Alto cómodo para un pulgar: una tarjeta de juego no es un enlace de texto. */
    min-height: 8.5rem;
    padding: var(--space-5);
    /* Sitio a la derecha para el disco de color, que si no se come el texto largo. */
    padding-inline-end: 5.5rem;
    text-align: start;
    /* Una pizca del color del juego sobre la superficie: se distingue de un vistazo sin
       tener que leerlo, que es de lo que va tener cuatro colores. */
    background: var(--color);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color) 14%, transparent), transparent 55%),
        var(--surface);
    border: var(--color);
    border: 2px solid color-mix(in srgb, var(--color) 35%, var(--line));
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-1);
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: transform 160ms cubic-bezier(.2, .9, .3, 1), box-shadow 160ms, border-color 160ms;
}

/*
 * El disco con el dibujo del juego: un barco, unas cartas.
 *
 * Es un elemento y no un `::after` porque ahora lleva algo dentro. Va marcado como
 * decorativo: el nombre del juego está escrito al lado en letra, y para un lector de
 * pantalla esto sería el mismo dato dos veces.
 */
.juego-disco {
    position: absolute;
    inset-block-start: -1.25rem;
    inset-inline-end: -1.25rem;
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: var(--color);
    /* El dibujo, en el color del texto sobre el acento: es lo que garantiza que se lea
       encima de los cuatro colores sin ir uno por uno. */
    color: var(--accent-ink);
}

.juego-dibujo {
    width: 2.6rem;
    height: 2.6rem;
    /* Descentrado hacia dentro de la tarjeta: el disco se sale por la esquina y con el
       dibujo en su centro geométrico quedaba medio cortado. */
    margin-block-start: .9rem;
    margin-inline-end: .7rem;
    opacity: .92;
}

.juego:hover {
    transform: translateY(-3px);
    border-color: var(--color);
    box-shadow: var(--shadow-2);
}

.juego:active { transform: scale(.985) translateY(0); }
.juego:disabled { opacity: .6; cursor: progress; }

.juego-nombre { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.juego-gancho { color: var(--text-dim); font-size: .9rem; }

.juego-mesas {
    margin-block-start: var(--space-2);
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-dim);
    /* Reserva su renglón desde el principio: las cuentas llegan por detrás y sin esto las
       tarjetas de abajo pegaban un salto al aparecer. */
    min-height: 1.2em;
}

.juego-mesas.hay { color: color-mix(in srgb, var(--color) 70%, var(--text)); }

/* ─── Hoja de mesas ────────────────────────────────────────────────────────────
 *
 * Sube desde abajo en el móvil, que es de donde vienen las cosas y donde llega el pulgar;
 * en pantalla ancha se centra como un diálogo de toda la vida.
 */

body.con-hoja { overflow: hidden; }

.mesas { position: fixed; inset: 0; z-index: 60; }
.mesas-fondo { position: absolute; inset: 0; background: rgb(0 0 0 / .5); backdrop-filter: blur(2px); }

.mesas-hoja {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: grid;
    /* Tres filas: cabecera y pie a su alto, y el cuerpo se queda con lo que sobre. Así lo
       único que se desplaza es la lista. */
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: var(--space-3);
    /* Nunca más de tres cuartos de pantalla: por debajo tiene que verse que hay algo
       detrás, que es lo que dice que esto se cierra tocando fuera. */
    max-height: 80vh;
    max-height: 80dvh;
    padding: var(--space-4);
    padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
    background: var(--surface);
    border-start-start-radius: var(--radius-3);
    border-start-end-radius: var(--radius-3);
    border-block-start: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    animation: mesas-sube 240ms cubic-bezier(.2, .9, .3, 1);
}

/*
 * Centrada en pantalla ancha.
 *
 * Con `inset: auto 50% 50% 50%` —que es lo que había— se le fijan tres lados a la mitad de
 * la pantalla y el ancho se queda en cero: la hoja salía como una columna de una palabra
 * por línea. Se ancla por una esquina y se mueve media hoja hacia atrás, que es la forma
 * que no depende de lo que mida el contenido.
 */
@media (min-width: 40rem) {
    .mesas-hoja {
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        width: min(32rem, calc(100vw - 2rem));
        max-height: min(80vh, 40rem);
        max-height: min(80dvh, 40rem);
        border-radius: var(--radius-3);
        border: 1px solid var(--line);
        animation-name: mesas-aparece;
    }
}

@keyframes mesas-sube { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes mesas-aparece {
    from { translate: -50% -46%; opacity: 0; }
    to   { translate: -50% -50%; opacity: 1; }
}

.mesas-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.mesas-cabecera h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    text-transform: none;
    letter-spacing: -.01em;
}

.mesas-cerrar {
    flex: none;
    display: grid; place-items: center;
    width: 2.5rem; height: 2.5rem;
    padding: 0;
    border: 0; border-radius: 999px;
    background: var(--surface-2); color: var(--text-dim);
    cursor: pointer;
}

/* Lo único que se desplaza es la lista, y dentro de la hoja: la página no se mueve. */
.mesas-cuerpo {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mesas-vacio { margin: 0; color: var(--text-dim); font-size: .9rem; }

.mesas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.mesa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
}

.mesa-quien { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-estado { grid-column: 1; color: var(--text-dim); font-size: .82rem; }
.mesa .primary { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }
.mesa.empezada { border-style: dashed; }

/* Entrar por código: la tercera forma de sentarse, separada de las otras dos. */
.mesas-codigo {
    display: grid;
    gap: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--line);
}

.mesas-codigo label { color: var(--text-dim); font-size: .85rem; }
.mesas-codigo-fila { display: flex; gap: var(--space-2); }
.mesas-codigo-fila .code-input { flex: 1 1 auto; min-width: 0; }

/* El botón del tema enseña un rótulo u otro según en cuál estés: nunca los dos. */
.tema-boton[data-theme="claro"] .tema-a-claro,
.tema-boton[data-theme="oscuro"] .tema-a-oscuro { display: none; }

/* ─── Confirmar ────────────────────────────────────────────────────────────────
 *
 * El sustituto de `window.confirm`, que aquí no se usa. Se monta al vuelo sobre cualquier
 * pantalla, así que no puede dar por hecho nada de lo que hay debajo: se pone por encima de
 * todo y se centra él solo.
 */

.confirmar { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--space-4); }
.confirmar-fondo { position: absolute; inset: 0; background: rgb(0 0 0 / .55); backdrop-filter: blur(2px); }

.confirmar-caja {
    position: relative;
    display: grid;
    gap: var(--space-3);
    width: min(26rem, 100%);
    padding: var(--space-5);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-2);
    animation: confirmar-entra 200ms cubic-bezier(.2, .9, .3, 1);
}

@keyframes confirmar-entra {
    from { opacity: 0; scale: .96; }
    to   { opacity: 1; scale: 1; }
}

.confirmar-caja h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--text); text-transform: none; letter-spacing: -.01em; }
.confirmar-caja p { margin: 0; color: var(--text-dim); }

/* Los botones en fila y a la derecha; en el móvil, uno encima de otro y a lo ancho, que es
   donde llega el pulgar sin recolocar la mano. */
.confirmar-botones { display: grid; gap: var(--space-2); }
.confirmar-botones button { width: 100%; }

@media (min-width: 26rem) {
    .confirmar-botones { display: flex; justify-content: flex-end; }
    .confirmar-botones button { width: auto; }
}

/*
 * El aspa de cerrar, dibujada y no escrita.
 *
 * Era el carácter `&times;`, y por eso salía descuadrada en todas partes: un glifo se
 * centra por su caja de texto, no por su tinta, y la de ese está alta y pequeña. Se puede
 * pelear con `line-height` y márgenes negativos hasta que cuadre en un botón concreto, y
 * volver a pelear con el siguiente. Dos trazos en un SVG se centran solos y valen para
 * todos los tamaños.
 */
.aspa {
    width: 45%;
    height: 45%;
    /* Suelo, para que en un botón grande no salga una cruz gigante. */
    max-width: 1.15rem;
    max-height: 1.15rem;
}

/* ─── Páginas legales ──────────────────────────────────────────────────────────
 *
 * Privacidad y condiciones. Son documentos largos y lo único que importa es que se lean:
 * una columna estrecha, mucho aire entre apartados y nada de adornos. Se ven sin sesión, así
 * que no pueden dar por hecho ni la cabecera del sitio.
 */

.legal {
    max-width: 44rem;
    margin-inline: auto;
    padding: var(--space-5) var(--space-4) var(--space-7);
}

.legal-head { margin-block-end: var(--space-6); }
.legal-head h1 { margin-block-end: var(--space-2); }
.legal-fecha { margin: 0; color: var(--text-dim); font-size: .88rem; }

.legal section { margin-block-end: var(--space-6); }

.legal h2 {
    margin-block-end: var(--space-3);
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: -.01em;
}

.legal h3 {
    margin-block: var(--space-4) var(--space-2);
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-dim);
}

.legal p, .legal li { line-height: 1.7; }
.legal ul { padding-inline-start: 1.2rem; }
.legal li { margin-block-end: var(--space-2); }

.legal code {
    padding: .1em .35em;
    border-radius: var(--radius-1);
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: .88em;
}

/* La tabla de finalidades y bases jurídicas. En el móvil no cabe en dos columnas, así que
   se desplaza dentro de su propia caja: la página nunca se mueve a lo ancho. */
.legal-tabla {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.legal-tabla th, .legal-tabla td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    text-align: start;
    vertical-align: top;
}

.legal-tabla th { background: var(--surface-2); font-weight: 700; }

.legal-pie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--line);
    font-size: .9rem;
}

/* ─── Portada sin cuenta ───────────────────────────────────────────────────────
 *
 * La presentación: qué es Playteca, a qué se juega y qué hace falta para entrar. La ve
 * quien llega sin cuenta —y también la revisión de Google—, así que tiene que explicarse
 * sola y no dar por hecha la cabecera del sitio, que sin sesión no se envía.
 */

.presenta {
    max-width: 42rem;
    margin-inline: auto;
    padding: var(--space-6) var(--space-4) var(--space-7);
}

.presenta-cabecera {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
}

.presenta-cabecera .logo { width: 44px; height: 44px; }

.presenta-marca {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.presenta-titulo {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.9rem, 8vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.presenta-entrada {
    margin: 0 0 var(--space-5);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-dim);
}

/* Los dos botones a lo ancho en el móvil: son lo que se viene a pulsar. */
.presenta-acciones {
    display: grid;
    gap: var(--space-3);
    margin-block-end: var(--space-7);
}

.presenta-acciones [role="button"] { text-align: center; text-decoration: none; }

@media (min-width: 30rem) {
    .presenta-acciones { grid-auto-flow: column; justify-content: start; }
}

.presenta-bloque { margin-block-end: var(--space-6); }

.presenta-bloque h2 {
    margin-block-end: var(--space-3);
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: -.01em;
}

.presenta-bloque p { line-height: 1.7; color: var(--text-dim); margin: 0; }

.presenta-juegos, .presenta-pasos {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.presenta-juegos { list-style: none; padding: 0; }

.presenta-juegos li {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
}

.presenta-juegos strong { font-size: 1.05rem; }
.presenta-juegos span { color: var(--text-dim); font-size: .92rem; }

.presenta-pasos { padding-inline-start: 1.2rem; }
.presenta-pasos li { line-height: 1.7; color: var(--text-dim); }

.presenta-pie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--line);
    font-size: .9rem;
}


/* ─── Entrar con Google ────────────────────────────────────────────────────────
 *
 * El botón sigue las condiciones de marca de Google: fondo claro, su «G» a cuatro colores
 * sin retocar y el texto legible. Por eso no usa las variables del tema —es su marca, no la
 * nuestra— y se ve igual en claro y en oscuro.
 */

.entrar-google { display: grid; gap: var(--space-3); }

.boton-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    /* Alto de objetivo táctil cómodo: es el camino más corto para entrar y conviene que
       se acierte a la primera. */
    min-height: 3rem;
    padding: var(--space-3) var(--space-4);
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    border-radius: var(--radius-2);
    font-weight: 600;
    text-decoration: none;
}

.boton-google:hover { background: #f8f9fa; }
.boton-google:active { transform: scale(.99); }
.g-google { width: 1.25rem; height: 1.25rem; flex: none; }

/* «o», con una línea a cada lado. */
.entrar-separador {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    color: var(--text-dim);
    font-size: .85rem;
}

.entrar-separador::before,
.entrar-separador::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--line);
}

.entrar-legales {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-block-start: var(--space-5);
    font-size: .85rem;
}

/* ─── Menú de tu nombre ────────────────────────────────────────────────────────
 *
 * Perfil, editar perfil y cerrar sesión, colgando de tu propio nombre. Antes el nombre era
 * un enlace a la cuenta y cerrar sesión estaba enterrado al final de esa página.
 */

.menu-cuenta { position: relative; }

.menu-cuenta .header-account {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.menu-cuenta .header-account:hover { background: var(--surface-2); }
.menu-flecha { width: .9rem; height: .9rem; color: var(--text-dim); flex: none; }
.menu-cuenta [aria-expanded="true"] .menu-flecha { rotate: 180deg; }

.menu-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + var(--space-2));
    z-index: 50;
    display: grid;
    min-width: 12rem;
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
}

.menu-opcion {
    display: block;
    width: 100%;
    padding: var(--space-3);
    border: 0;
    border-radius: var(--radius-1);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.menu-opcion:hover { background: var(--surface-2); }

/* Cerrar sesión, separado y en rojo: es la única de las tres que te saca de aquí. */
.menu-salir {
    margin-block-start: var(--space-1);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--line);
    border-radius: 0;
    color: var(--danger);
}

/* Un bloque de estadísticas por juego. Van seguidos y separados, nunca sumados entre sí. */
.por-juego { display: grid; gap: var(--space-4); }
.juego-stats h2 { margin-block-end: var(--space-3); color: var(--text); text-transform: none; letter-spacing: -.01em; font-weight: 800; }

/* ─── Rangos ───────────────────────────────────────────────────────────────────
 *
 * Cinco tramos de cinco rangos, con los colores de la baraja, y el 25 aparte. El servidor
 * manda el tramo —`piedra`, `bastos`, `espadas`, `copas`, `oros`, `inmortal`— y el color se
 * decide aquí: qué tono tiene un rango es cosa de la pantalla, no de la base de datos.
 */

[data-tier="piedra"]   { --rango: #7c8896; }
[data-tier="bastos"]   { --rango: var(--bastos); }
[data-tier="espadas"]  { --rango: var(--espadas); }
[data-tier="copas"]    { --rango: var(--copas); }
[data-tier="oros"]     { --rango: var(--oros); }
[data-tier="inmortal"] { --rango: #b06bff; }

/* La chapa del rango: número y nombre, del color de su tramo. */
.rango {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: var(--rango);
    background: color-mix(in srgb, var(--rango) 16%, transparent);
    border: var(--rango);
    border: 1px solid color-mix(in srgb, var(--rango) 45%, transparent);
    color: var(--rango);
    color: color-mix(in srgb, var(--rango) 70%, var(--text));
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.rango-numero {
    display: grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: .25rem;
    border-radius: 999px;
    background: var(--rango);
    color: #fff;
    font-size: .78rem;
}

/*
 * El 25 no es un color más: es el único que se sale de la escalera, y quien llegue ahí ha
 * jugado unas catorce mil partidas. Se le nota.
 */
[data-tier="inmortal"].rango {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--copas) 22%, transparent),
        color-mix(in srgb, #b06bff 26%, transparent),
        color-mix(in srgb, var(--espadas) 22%, transparent));
    border-color: #b06bff 55%;
    border-color: color-mix(in srgb, #b06bff 55%, transparent);
}

/* La barra de progreso hacia el siguiente rango. */
.rango-barra {
    height: .5rem;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.rango-barra > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--rango);
    transition: width 600ms cubic-bezier(.2, .8, .3, 1);
}

/* El saludo de la portada, con el rango debajo. */
.portada-saludo { display: grid; gap: var(--space-3); justify-items: start; }
.portada-hola { margin: 0; color: var(--text-dim); font-size: .95rem; }

.portada-rango { display: grid; gap: var(--space-2); justify-items: start; width: min(100%, 22rem); }
.portada-rango .rango { text-decoration: none; }
.portada-rango .rango-barra { width: 100%; }
.portada-rango .hint { margin: 0; font-size: .8rem; }

/* ─── El rango, alrededor del jugador ─────────────────────────────────────────
 *
 * No es una chapa al lado del nombre: es un aro que rodea la cara, con el número dentro. La
 * diferencia importa — así el rango es parte de la persona y no una etiqueta pegada, y se ve
 * en una mesa de un vistazo sin leer nada.
 *
 * **Y sube de espectáculo con el nivel.** Cada tramo añade algo sobre el anterior:
 *
 *   piedra (1-5)     un aro gris y nada más
 *   bastos (6-10)    aro de color
 *   espadas (11-15)  aro de color y un halo suave
 *   copas (16-20)    el aro gira, en degradado
 *   oros (21-24)     gira más vivo y con destello
 *   inmortal (25)    todo lo anterior y partículas orbitando
 *
 * Es a propósito que los primeros tramos no tengan nada: si el rango 3 ya brillara, llegar
 * al 20 no significaría nada. Y lo caro —el giro, las partículas— solo se pinta arriba, que
 * es donde casi nadie llega: un móvil no paga por un efecto que no le toca.
 */

.con-rango {
    position: relative;
    display: inline-grid;
    place-items: center;
    /* El hueco del aro y del número: sin esto, los dos se comen la cara. */
    padding: 4px;
}

.con-rango-aro {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--rango, #7c8896);
    pointer-events: none;
}

/*
 * El nombre del rango, debajo de la cara.
 *
 * Aquí colgaba una burbuja con el número. Se quitó: un «22» no le dice nada a quien lo ve, y
 * encima se solapaba con lo que hubiera al lado. «Marqués de Oros» se entiende solo, y es lo
 * que hace que llegar ahí valga la pena. El número sigue en la cuenta, que es donde uno mira
 * cuánto le falta.
 */
.rango-bloque { display: inline-grid; justify-items: center; gap: var(--space-1); }

.con-rango-nombre {
    max-width: 8rem;
    color: var(--rango, #7c8896);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}

/* ── espadas: un halo, todavía discreto ─────────────────────────────────── */
[data-tier="espadas"] .con-rango-aro {
    box-shadow: var(--rango);
    box-shadow: 0 0 10px color-mix(in srgb, var(--rango) 55%, transparent);
}

/* ── copas y oros: el aro deja de ser un borde y pasa a girar ────────────── */
[data-tier="copas"] .con-rango-aro,
[data-tier="oros"] .con-rango-aro,
[data-tier="inmortal"] .con-rango-aro {
    border: 0;
    background: conic-gradient(
        var(--rango) 0deg,
        color-mix(in srgb, var(--rango) 20%, transparent) 120deg,
        var(--rango) 240deg,
        color-mix(in srgb, var(--rango) 20%, transparent) 360deg);
    /* Se recorta el centro para que quede un anillo y no un disco. */
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: rango-gira 6s linear infinite;
}

[data-tier="oros"] .con-rango-aro {
    animation-duration: 4s;
    filter: var(--rango);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rango) 70%, transparent));
}

/* ── inmortal: el aro cambia de color y además hay partículas ────────────── */
[data-tier="inmortal"] .con-rango-aro {
    animation: rango-gira 3.5s linear infinite, rango-tornasol 8s ease-in-out infinite;
    filter: var(--rango);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--rango) 80%, transparent));
}

/*
 * Las partículas orbitan alrededor del aro.
 *
 * Son elementos y no un lienzo porque son seis y no se mueven con nada: dos animaciones de
 * `transform` las lleva la GPU y no cuestan un solo recálculo de maquetación. Un canvas para
 * seis puntos sería más código y más batería.
 */
.con-rango-chispas { position: absolute; inset: 0; pointer-events: none; }

.con-rango-chispas > i {
    position: absolute;
    inset: 0;
    display: block;
    animation: rango-orbita 4s linear infinite;
}

.con-rango-chispas > i::before {
    content: "";
    position: absolute;
    inset-block-start: -3px;
    inset-inline-start: 50%;
    width: 4px;
    height: 4px;
    margin-inline-start: -2px;
    border-radius: 50%;
    background: var(--rango);
    box-shadow: 0 0 6px var(--rango);
}

/*
 * Cada una nace en un punto distinto de la órbita.
 *
 * El reparto se hace con **retardo negativo**, no con una rotación inicial: mientras la
 * animación corre, es ella la que manda sobre `rotate`, así que un ángulo de salida escrito
 * en el elemento se pierde en el primer fotograma. Un retardo de un sexto de la vuelta
 * arranca la animación ya empezada, y ahí sí quedan repartidas.
 *
 * Las duraciones son distintas y sin múltiplos comunes para que no se vuelvan a alinear.
 */
.con-rango-chispas > i:nth-child(1) { animation-duration: 4s;   animation-delay: 0s;     }
.con-rango-chispas > i:nth-child(2) { animation-duration: 5.2s; animation-delay: -.87s;  }
.con-rango-chispas > i:nth-child(3) { animation-duration: 6.4s; animation-delay: -2.13s; }
.con-rango-chispas > i:nth-child(4) { animation-duration: 4.6s; animation-delay: -2.3s;  }
.con-rango-chispas > i:nth-child(5) { animation-duration: 5.8s; animation-delay: -3.87s; }
.con-rango-chispas > i:nth-child(6) { animation-duration: 7s;   animation-delay: -5.83s; }

@keyframes rango-gira   { to { rotate: 360deg; } }
@keyframes rango-orbita { to { rotate: 360deg; } }
@keyframes rango-tornasol {
    0%, 100% { --rango: #b06bff; }
    33%      { --rango: #6aa9ff; }
    66%      { --rango: #ffce4d; }
}

/* Quien pide menos movimiento se queda con el color y sin el giro. */
@media (prefers-reduced-motion: reduce) {
    .con-rango-aro, .con-rango-chispas > i { animation: none; }
    .con-rango-chispas { display: none; }
}

/* En bajo rendimiento tampoco: es un adorno, y lo primero que sobra. */
:root[data-low-perf="true"] .con-rango-aro { animation: none; }
:root[data-low-perf="true"] .con-rango-chispas { display: none; }

/* ── La moneda ──────────────────────────────────────────────────────────────────────────
 *
 * Sale en la portada, en la cabecera, en la mesa y en el resumen del final, así que su
 * estilo vive aquí y no en la hoja de ninguna pantalla. El tamaño lo hereda del texto:
 * puesta en un titular sale grande y en una lista sale pequeña, sin tener que decírselo.
 */
.moneda {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -.14em;
}

.con-moneda {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-variant-numeric: tabular-nums;
}

.con-moneda b { font-weight: 800; }

/* Cuando la cantidad es el asunto de la pantalla y no un dato al margen. */
.con-moneda.grande {
    font-size: 2.6rem;
    gap: .22em;
}

.con-moneda.grande b { letter-spacing: -.02em; }

/* ── El saldo en la cabecera ────────────────────────────────────────────────────────────
 *
 * Ocupa el sitio del enlace a competiciones. Es un botón y no una cifra porque hay que
 * entender que se pulsa: el `+` es lo único que lo dice, así que no se esconde ni en la
 * pantalla más estrecha.
 */
.header-monedas {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .5rem .35rem .7rem;
    border: 1px solid var(--border, rgb(0 0 0 / .12));
    border-radius: 999px;
    background: var(--surface-2, rgb(0 0 0 / .04));
    color: inherit;
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    line-height: 1;
}

.header-monedas:hover { border-color: #e8ae1e; }
.header-monedas:active { scale: .97; }

.header-monedas-cifra {
    display: inline-flex;
    align-items: center;
    gap: .3em;
}

.header-monedas-cifra .moneda { width: 1.15em; height: 1.15em; }

/* El `+` en su propia pastilla: separado del número, se lee como una acción y no como
 * parte de la cantidad —«500+» sería otra cosa—. */
.header-monedas-mas {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #ffd558;
    color: #4a3400;
    font-size: 1rem;
    font-weight: 800;
}

/* ── La tienda ──────────────────────────────────────────────────────────────────────────
 *
 * Por encima de todo lo demás: se abre desde la cabecera, que ya está por encima de la
 * página, y desde dentro de una partida.
 */
.tienda {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: var(--space-3);
}

.tienda-fondo {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / .55);
    backdrop-filter: blur(2px);
}

.tienda-caja {
    position: relative;
    width: min(100%, 30rem);
    max-height: min(90vh, 44rem);
    max-height: min(90dvh, 44rem);
    overflow-y: auto;
    padding: var(--space-4);
    border-radius: var(--radius-lg, 1rem);
    background: var(--surface, #fff);
    color: var(--text, inherit);
    box-shadow: 0 24px 60px rgb(0 0 0 / .35);
    text-align: center;
}

.tienda-caja h2 { margin: 0 0 .2rem; font-size: 1.3rem; }
.tienda-saldo { margin: 0 0 var(--space-3); font-size: .85rem; color: var(--text-soft, inherit); }
.tienda-saldo .con-moneda { font-weight: 800; }

.tienda-cerrar {
    position: absolute;
    top: .5rem;
    inset-inline-end: .5rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.tienda-lista {
    display: grid;
    gap: var(--space-2);
}

/* Una fila por paquete: monedas a la izquierda, precio a la derecha. En una rejilla de
 * tarjetas hay que comparar en dos ejes; en una lista, solo se baja la vista. */
.tienda-pack {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-2);
    /* Alto de dedo, y de sobra: aquí se pulsa con dinero de por medio. */
    min-height: 3.25rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border, rgb(0 0 0 / .12));
    border-radius: var(--radius, .75rem);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: start;
}

.tienda-pack:hover { border-color: #e8ae1e; }
.tienda-pack:active { scale: .99; }
.tienda-pack:disabled { opacity: .5; cursor: progress; }

.tienda-pack.popular {
    border-color: #e8ae1e;
    background: rgb(255 213 88 / .12);
}

.tienda-etiqueta {
    position: absolute;
    top: -.6rem;
    inset-inline-start: var(--space-3);
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #ffd558;
    color: #4a3400;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tienda-pack-monedas {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tienda-pack-monedas .moneda { width: 1.2em; height: 1.2em; }

.tienda-pack-extra {
    padding: .1rem .4rem;
    border-radius: 999px;
    background: rgb(46 160 110 / .18);
    color: #1c7a53;
    font-size: .7rem;
    font-weight: 800;
}

.tienda-pack-precio { font-weight: 700; font-variant-numeric: tabular-nums; }

.tienda-legal {
    margin: var(--space-3) 0 0;
    font-size: .68rem;
    line-height: 1.4;
    color: var(--text-soft, inherit);
    opacity: .8;
    text-wrap: balance;
}

.tienda-vacia, .tienda-cargando { margin: var(--space-3) 0; font-size: .85rem; color: var(--text-soft, inherit); }

:root[data-theme="oscuro"] .tienda-pack-extra { background: rgb(110 240 190 / .16); color: #8ef5d2; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tienda-pack-extra { background: rgb(110 240 190 / .16); color: #8ef5d2; }
}

/* ── La tienda, paso 2: cómo pagar ──────────────────────────────────────────────────────
 *
 * Los botones van apilados y a lo ancho, no en rejilla: son cuatro como mucho, se leen de
 * arriba abajo y cada uno es una diana grande. Aquí se pulsa con dinero de por medio.
 */
.tienda-elegido {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    margin: 0 0 var(--space-3);
    font-size: 1.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tienda-elegido .moneda { width: 1.1em; height: 1.1em; }
.tienda-elegido span { font-size: .8rem; font-weight: 600; opacity: .7; }

.tienda-comopagar { margin: 0 0 var(--space-2); font-size: .82rem; color: var(--text-soft, inherit); }

.tienda-formas { display: grid; gap: var(--space-2); }

.tienda-forma {
    min-height: 3rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border, rgb(0 0 0 / .14));
    border-radius: var(--radius, .75rem);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tienda-forma:hover { border-color: #e8ae1e; }
.tienda-forma:active { scale: .99; }
.tienda-forma:disabled { opacity: .5; cursor: progress; }

/* PayPal con su azul: es la marca que la gente busca, y un botón gris no se encuentra. */
.tienda-forma.forma-paypal { background: #0070ba; border-color: #0070ba; color: #fff; }
.tienda-forma.forma-applepay { background: #000; border-color: #000; color: #fff; }

.tienda-volver {
    margin-top: var(--space-3);
    padding: .4rem;
    border: 0;
    background: transparent;
    color: var(--text-soft, inherit);
    font: inherit;
    font-size: .8rem;
    text-decoration: underline;
    cursor: pointer;
}

/* Los botones que pinta PayPal traen su propio aspecto: aquí solo se les da el ancho y el
 * alto de dedo del resto, para que la fila no quede desigual. */
.tienda-forma-nativa {
    display: block;
    width: 100%;
    min-height: 3rem;
}

.tienda-forma-nativa > * { width: 100%; }

/* `disabled` no existe en un elemento de PayPal, así que se apaga por aquí. */
.tienda-forma.ocupado,
.tienda-forma-nativa.ocupado {
    opacity: .5;
    pointer-events: none;
}

/* ── La página de descarga de la app ────────────────────────────────────────────────────
 *
 * Una sola acción, así que todo empuja hacia ella: el icono grande arriba, el botón en el
 * centro y lo que hay que saber debajo, en el orden en que hace falta saberlo.
 */
.app-descarga {
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-7);
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    text-align: center;
}

.app-cabeza { display: grid; justify-items: center; gap: var(--space-2); }
.app-icono { border-radius: 22%; box-shadow: var(--shadow-2); }
.app-cabeza h1 { margin: 0; font-size: clamp(1.4rem, 6vw, 2rem); }
.app-lema { margin: 0; max-width: 26rem; color: var(--text-dim); text-wrap: balance; }

.app-boton {
    display: grid;
    justify-items: center;
    gap: .2rem;
    width: min(100%, 22rem);
    /* Alto de dedo y de sobra: es lo único que hay que pulsar en toda la página. */
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-5);
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--shadow-2);
}

.app-boton:active { scale: .98; }
.app-boton small { font-size: .74rem; font-weight: 600; opacity: .85; }

.app-pasos, .app-huella {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
    background: var(--surface);
    text-align: start;
}

.app-pasos h2, .app-huella h2 {
    margin: 0 0 var(--space-2);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-dim);
}

.app-pasos ol { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: var(--space-2); }
.app-pasos li { font-size: .9rem; line-height: 1.45; }
.app-huella p { margin: 0 0 var(--space-2); font-size: .85rem; }

/* La huella se parte donde haga falta: son 64 caracteres y en un móvil no caben de otra. */
.app-huella code {
    display: block;
    padding: var(--space-2);
    border-radius: var(--radius-1);
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: .7rem;
    line-height: 1.5;
    word-break: break-all;
    user-select: all;
}

.app-nota { margin: 0; font-size: .8rem; color: var(--text-dim); }
.app-nota code { font-family: var(--font-mono); font-size: .78rem; }
.app-aviso { padding: var(--space-3); border-radius: var(--radius-2); background: var(--surface-2); }

/*
 * La etiqueta de máquina.
 *
 * Los bots se llaman como cualquiera, así que esto es lo único que distingue a una
 * máquina de una persona. Tiene que verse, y por eso lleva color propio en una interfaz
 * que es verde de tapete: un degradado de azul a rosa con su resplandor, como una luz de
 * neón pequeña.
 *
 * El degradado y el brillo son **fijos**. Moverlos quedaría bien y sale caro: en una mesa
 * hay hasta tres a la vez, y un degradado animado es un repintado por fotograma en un
 * móvil que ya va justo.
 */
.tag-ia {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: .15em .5em .2em;
    border-radius: 999px;
    font-size: .62em;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .1em;
    color: #fff;
    /* Para quien no tenga degradados cónicos ni sombras de color: un azul y a correr. */
    background: #3b6dff;
    background: linear-gradient(105deg, #17237a 0%, #2f6bff 34%, #8b5cf6 66%, #ff4d8d 100%);
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / .22),
        0 1px 10px -2px rgb(47 107 255 / .75),
        0 1px 12px -3px rgb(255 77 141 / .6);
    text-shadow: 0 1px 2px rgb(0 0 0 / .4);
    white-space: nowrap;
    vertical-align: middle;
}

/* Sobre fondo claro el resplandor no se ve y el borde interior sobra. */
.player-name + .tag-ia,
.lobby-players .tag-ia {
    box-shadow: 0 1px 8px -3px rgb(47 107 255 / .55);
}

/*
 * Un nombre que se recorta, y una etiqueta que no.
 *
 * Los nombres largos se cortan con puntos suspensivos, y si la etiqueta viviera dentro de
 * ese mismo texto sería lo primero en desaparecer — justo lo que no puede pasar: es lo
 * único que distingue a una máquina de una persona. Así que el que se recorta es el
 * nombre, y la etiqueta va aparte y no encoge.
 */
.silla-nombre,
.tute-nombre,
.tute-final-nombre {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    min-width: 0;
}

.silla-nombre > .nombre-texto,
.tute-nombre > .nombre-texto,
.tute-final-nombre > .nombre-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}