*, *::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: 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::placeholder { color: color-mix(in srgb, var(--text-dim) 70%, transparent); }

button {
    font: inherit; font-weight: 600; cursor: pointer;
    border-radius: var(--radius-1); border: 1px solid transparent;
    padding: var(--space-3) var(--space-4);
    transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
button:disabled { opacity: .45; cursor: not-allowed; }
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):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 ───────────────────────────────────────────────────────────────── */
.toasts { position: fixed; inset-inline: 0; bottom: var(--space-4); display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; z-index: 50; }
.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: 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:
        linear-gradient(135deg, color-mix(in srgb, var(--color) 14%, transparent), transparent 55%),
        var(--surface);
    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: 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(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 `×`, 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;
}

/* El botón secundario de la portada necesita marco propio: sobre el fondo de color, un
   `ghost` sin borde se lee como texto suelto y no como algo que se pulsa. */
.presenta-acciones .ghost {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
}

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