/* Sistema editorial: papel cálido, tinta carbón y terracota para las decisiones.
   Los colores tienen una función: la tinta manda la navegación, el terracota invita a
   actuar, el verde confirma aciertos y el petróleo se reserva para Ciencia y online.
   `--*-solid` se reserva para fondos con texto claro y conserva el contraste en ambos
   temas. */
:root {
  color-scheme: light;
  --ink: #2b2927;
  --muted: #6e6963;
  --line: #dedbd3;
  --paper: #f6f1e8;
  --surface: #fffdfa;
  --accent: #ae5537;
  --accent-dark: #843b28;
  --accent-soft: #f2d8ce;
  --teal: #245b66;
  --green: #356b50;
  --accent-solid: #a94f32;
  --green-solid: #356b50;
  --ink-solid: #2b2927;
  --ink-solid-contrast: #fff;
  --font-display: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: var(--ease-out);
  --motion-fast: 160ms;
  --motion-base: 260ms;
  --motion-slow: 460ms;
  --shadow: 0 14px 34px rgba(43, 35, 29, .10);
  --shadow-soft: 0 5px 16px rgba(43, 35, 29, .07);
}

* { box-sizing: border-box; }
html {
  min-height: 100%;
  background: var(--paper);
  /* El navegador pinta un recuadro gris sobre cualquier elemento con clic. Es el
     aviso más ruidoso de «esto es una web»: los botones ya lo quitaban, pero las
     filas de partida y los enlaces no son botones y seguían destellando. */
  -webkit-tap-highlight-color: transparent;
  /* Safari agranda el texto por su cuenta al girar el móvil y descuadra la mano. */
  -webkit-text-size-adjust: 100%;
}
button, label, .modal, .field { min-inline-size: 0; }
.modal, .btn, .icon-btn, .hand-card h3 { overflow-wrap: anywhere; }
.settings-modal select { max-width: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
button, input, select { font: inherit; }
/* Para lectores de pantalla: fuera de la vista pero dentro del árbol de accesibilidad.
   Aquí viven los titulares de la partida y los avisos de lo que acaba de pasar. */
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Ningún elemento enfocado se queda sin marca visible, ni siquiera los que solo reciben
   el foco desde el programa. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Los títulos se enfocan al abrir una pantalla para que el lector la anuncie. No son
   controles y el anillo de foco sobre ellos parece un aviso de error, sobre todo en Safari. */
[data-focus]:focus { outline: none; }
/* Safari aplica azul de enlace a algunos botones si no se declara el color de forma
   explícita. Los nombres de los mazos deben usar siempre la tinta de la interfaz. */
button { touch-action: manipulation; color: inherit; }

#app { min-height: 100dvh; overflow-x: clip; }
/* Las entradas de pantalla tienen un único propietario en a11y.js. */
.screen-enter { animation: none; }
@keyframes section-in { from { opacity: .25; transform: translateY(6px); } }
.shell { width: min(100%, 1080px); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); position: relative; z-index: 1; }
/* `align-items: center` importa más de lo que parece: en móvil esta barra pasa a columna
   (ver el bloque de 620 px) y entonces `align-items` es lo que decide la alineación
   horizontal. Con `flex-start` los botones se van al borde izquierdo en vez de quedar
   centrados debajo del nombre. */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
/* La separación entre el nombre y las acciones la hace el `space-between` del contenedor,
   no un margen automático aquí: un `margin-left: auto` sobrevive al cambio a columna y
   allí empuja los botones a la derecha, descolocándolos. `flex-wrap` es solo una red de
   seguridad para tamaños de letra enormes del sistema. */
.topbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; row-gap: 6px; min-width: 0; }
.brand { display: flex; align-items: center; min-height: 44px; gap: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .82rem; }
/* 44 px es lo que necesita un dedo. Los botones pequeños llegaban a 36 y a 29, y son
   justo los que más se usan: el de la esquina en cada pantalla de partida. */
.icon-btn { min-height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 9px 16px; font-size: .85rem; font-weight: 650; cursor: pointer; }
/* La rosa gira al pulsarla: es el único adorno del atajo y dura lo que el toque. */
.hero-copy { position: relative; z-index: 2; }
/* Galería persistente: el bloque anterior se contrae a la vez que se abre el nuevo.
   Cambiar de mazo dentro del mismo bloque no reinicia ni descarga la carátula. */
/* En móvil la galería va primero: se elige el juego y luego se lee de qué va. */
.gallery { order: -1; display: flex; gap: 8px; height: clamp(310px, 44vh, 430px); margin: 2px 0; }
/* Con seis bloques, dejar 66 px a cada lomo agotaba el ancho de un móvil antes de
   repartir ninguno al panel abierto. Los lomos tienen una anchura fija y el elegido
   recibe el resto: así siempre se despliega, incluso en pantallas estrechas. */
.gallery-panel { position: relative; flex: 0 0 42px; min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: #241b14; cursor: pointer; isolation: isolate; box-shadow: 0 18px 42px rgba(52,34,17,.22); transition: flex var(--motion-slow) var(--ease-out), transform var(--motion-fast) ease, box-shadow var(--motion-base) ease; }
.gallery-panel.active { flex: 1 1 0; cursor: default; }
.gallery-panel:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 62%, transparent); outline-offset: 3px; }
.gallery-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,15,9,0) 38%, rgba(20,15,9,.5) 62%, rgba(20,15,9,.92)); pointer-events: none; }
.panel-art { position: absolute; inset: 0; display: block; transition: filter var(--motion-slow) ease; }
.panel-art img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; transition: filter var(--motion-slow) ease, transform 700ms var(--ease-out); }
.panel-entertainment .panel-art img, .panel-nature .panel-art img, .panel-globe .panel-art img, .panel-mixed .panel-art img { object-position: center; }
/* La ilustración de ciencia concentra el motivo en el tercio superior: con el encuadre
   centrado quedaba oculto al abrir la carátula, justo detrás del degradado del título. */
.panel-science .panel-art img { object-position: 50% 20%; }
.panel-science::after { background: linear-gradient(180deg, rgba(10,29,34,.04) 30%, rgba(10,29,34,.38) 60%, rgba(10,29,34,.82)); }
/* Los lomos se apagan para que la carátula elegida sea la única en color. */
.gallery-panel:not(.active) .panel-art { filter: grayscale(.9) brightness(.44) contrast(1.05); }
.gallery-panel.active .panel-art img { animation: cover-in 720ms var(--ease-out) both; }
@keyframes cover-in { from { transform: scale(1.035); } }
@media (hover: hover) and (pointer: fine) {
  .gallery-panel:not(.active):hover { transform: translateY(-2px); box-shadow: 0 21px 46px rgba(52,34,17,.26); }
  .gallery-panel:not(.active):hover .panel-art { filter: grayscale(.5) brightness(.62); }
}
.panel-spine { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 15px 0 17px; color: #f7ecd8; transition: opacity var(--motion-fast) ease; }
.panel-spine i { font-size: 1.25rem; font-style: normal; }
.panel-spine b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.gallery-panel.active .panel-spine { opacity: 0; }
.panel-label { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; display: grid; grid-template-columns: 3px minmax(0, 1fr); column-gap: 14px; align-items: center; text-align: left; color: #fff8ea; }
.gallery-panel:not(.active) .panel-label { visibility: hidden; }
.panel-label i { grid-row: 1 / span 2; width: 3px; height: 100%; min-height: 36px; border-radius: 2px; background: var(--accent); }
.panel-label strong { font-family: var(--font-display); font-size: clamp(1.35rem, 3.6vw, 2rem); line-height: 1.02; letter-spacing: -.03em; overflow-wrap: anywhere; }
.panel-entertainment .panel-label strong { font-size: clamp(1rem, 2.2vw, 1.25rem); }
.panel-label small { min-width: 0; overflow-wrap: anywhere; margin-top: 5px; color: rgba(255,246,232,.76); font-size: .73rem; }
.gallery-panel.active .panel-label { animation: label-in 420ms 110ms backwards var(--ease-out); }
@keyframes label-in { from { opacity: 0; transform: translateY(12px); } }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--accent); font-size: .73rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.eyebrow-line { width: 28px; height: 1px; background: var(--accent); }
/* Los juegos del bloque: filas sobrias, la elegida marcada con una línea de acento. */
.games { display: grid; gap: 1px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.game-row { display: grid; gap: 3px; padding: 15px 17px; border: 0; border-left: 3px solid transparent; background: var(--surface); text-align: left; cursor: pointer; transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.game-row.active { border-left-color: var(--accent); cursor: default; animation: row-select 280ms var(--ease-out) both; }
@keyframes row-select { from { background: var(--accent-soft); } }
.game-name { font-weight: 700; font-size: .96rem; }
.game-meta { color: var(--muted); font-size: .8rem; }
.game-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* La enciclopedia repite la anatomía de un formato —icono, texto, flecha— pero no su
   peso: es una consulta del mazo, no una manera de jugar, así que va sin relleno y con
   el borde punteado, para que se lea como lo que es sin competir con los tres de arriba. */

h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 640px; margin-bottom: 20px; font-family: var(--font-display); font-weight: 650; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.05; letter-spacing: -.035em; }
h1 em { color: var(--accent); font-weight: 400; }
h2 { font-family: var(--font-display); font-weight: 650; font-size: clamp(1.65rem, 5vw, 2.2rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 10px; }
.lead { color: var(--muted); font-size: .96rem; line-height: 1.55; max-width: 560px; }
.panel-history { background: #704537; }
.panel-entertainment { background: #4d304d; }
.panel-science { background: #1f5361; }
.panel-nature { background: #355f47; }
.panel-globe { background: #285d66; }
.panel-mixed { background: #80602d; }
.era-pioneros { background: #4a4438; }
.era-clasico { background: #7d6642; }
.era-nuevocine { background: #6b5350; }
.era-blockbuster { background: #4c6068; }
.era-milenio { background: #5b6650; }
.era-actual { background: #6a5a67; }

.btn { min-height: 50px; border: 0; border-radius: 10px; padding: 13px 20px; font-weight: 650; cursor: pointer; transition: background var(--motion-fast) ease, color var(--motion-fast) ease, transform 110ms ease, box-shadow var(--motion-fast) ease; }
.btn span { display: inline-block; margin-left: 8px; }
.btn:active { transform: scale(.975); }
.btn-primary { color: var(--ink-solid-contrast); background: var(--ink-solid); }
.btn-secondary { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.btn:disabled { cursor: default; }
.btn:disabled:active { transform: none; }
/* En una pantalla táctil :hover puede quedarse pegado después de pulsar. */
@media (hover: hover) and (pointer: fine) {
  .game-row:hover { background: var(--paper); }
  .weak-row:hover { background: var(--accent-soft); }
  .weak-row:hover > i { transform: translateX(3px); }
  .btn-primary:not(:disabled):hover, .comp-splash-start:not(:disabled):hover { filter: brightness(.92); }
  .btn-secondary:not(:disabled):hover { background: var(--paper); }
}
.btn-ghost { color: var(--accent); background: transparent; }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Apiladas de mayor a menor prioridad: seguir jugando (lo más probable), guardar y
   salir, y, aparte, la salida sin guardar. Un margen y una línea propios la distinguen
   del resto en vez de dejarla flotando como un tercer botón cualquiera. */
.exit-actions { flex-direction: column; }
.exit-discard { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-weight: 600; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-soft); }
.setup-section { max-width: 760px; margin: 28px auto 0; }
/* Agrupa el formulario en tramos con su propio rótulo (Jugadores, Cómo empezar, Modo de
   juego) en vez de una única lista plana: se lee de un vistazo qué pertenece a qué,
   sin añadir líneas divisorias que compitan con las que ya separan cada extra. */
.setup-block + .setup-block { margin-top: 26px; }
.setup-block-head { margin-bottom: 12px; }
.setup-grid { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field[hidden] { display: none; }
.field label, .field .field-label { font-size: .85rem; font-weight: 700; color: var(--muted); }
.field-help { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.field input[readonly] { color: var(--muted); background: var(--paper); }

/* La invitación a jugar el minijuego tiene su propio peso: un botón con icono, texto y
   una llamada a la acción, no un botón secundario cualquiera perdido entre selects. */
.starter-draw-cta { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; text-align: left; border: 1px dashed var(--accent); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); color: var(--ink); }
/* `.btn span` (más específico por combinar clase y etiqueta) pondría cada uno de estos
   tres tramos en línea con un margen fijo; aquí se anula para que el icono, el texto y
   la flecha sigan el `flex`/`gap` del propio botón, no el de un botón genérico. */
.starter-draw-cta .starter-draw-icon, .starter-draw-cta .starter-draw-copy, .starter-draw-cta .starter-draw-arrow { margin-left: 0; }
.starter-draw-icon { font-size: 1.5rem; line-height: 1; }
.starter-draw-copy { display: flex; flex-direction: column; gap: 2px; }
.starter-draw-copy b { font-size: .96rem; }
.starter-draw-copy small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; line-height: 1.3; }
.starter-draw-cta .starter-draw-arrow { margin-left: auto; flex: none; color: var(--accent); font-size: 1.15rem; }
@media (hover: hover) and (pointer: fine) { .starter-draw-cta:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); } }

.starter-result { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.starter-result-crown { flex: none; color: var(--accent); }
/* El resultado del minijuego es el momento con más chispa de toda la preparación: quien
   gana, empieza. Merece un cartel propio con corona y un brillo que lo recorra una vez,
   no otra línea de texto igual que las demás. */
.starter-winner-banner { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 2px 0 16px; padding: 18px 16px 16px; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--paper); position: relative; overflow: hidden; }
.starter-winner-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--accent) 40%, transparent) 50%, transparent 60%); background-size: 250% 100%; background-position: 120% 0; animation: starter-shine 1100ms ease-out 200ms both; }
.starter-winner-crown { color: var(--accent); animation: starter-crown-pop 640ms cubic-bezier(.34,1.56,.64,1) both; }
.starter-winner-banner b { font-family: var(--font-display); font-size: 1.25rem; margin-top: 2px; animation: starter-name-in 520ms ease-out 120ms both; }
.starter-winner-banner span { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
@keyframes starter-crown-pop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } 65% { transform: scale(1.12) rotate(4deg); opacity: 1; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes starter-name-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes starter-shine { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.starter-draw-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.starter-draw-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: .9rem; }
.starter-draw-list li.starter-draw-winner { background: var(--accent-soft); font-weight: 700; animation: starter-row-pop 420ms ease-out both; }
@keyframes starter-row-pop { from { transform: scale(.94); } to { transform: scale(1); } }

/* Elegir entre dos maneras de jugar lo mismo. Un `<select>` escondía que había una
   elección que hacer: se veía la opción puesta y no la otra. Con las dos a la vista y la
   elegida marcada, se lee de un golpe que son dos y cuál está activa. Son radios de
   verdad debajo, así que el grupo se recorre con las flechas y un lector de pantalla lo
   anuncia como lo que es. */
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.segmented-option { position: relative; display: grid; align-items: center; min-height: 54px; padding: 8px 10px; border-radius: 9px; text-align: center; cursor: pointer; color: var(--muted); transition: background var(--motion-fast) ease, color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.segmented-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented-option b { display: block; font-size: .92rem; line-height: 1.2; }
.segmented-option small { display: block; margin-top: 3px; font-size: .74rem; line-height: 1.25; opacity: .85; }
.segmented-option.is-on { color: var(--ink-solid-contrast); background: var(--ink-solid); box-shadow: var(--shadow-soft); }
@media (hover: hover) and (pointer: fine) { .segmented-option:not(.is-on):hover { background: var(--surface); color: var(--ink); } }
.segmented-option:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); }
@media (prefers-reduced-motion: reduce) { .segmented-option { transition: none; } }
.field input, .field select { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; min-height: 49px; padding: 11px 13px; color: var(--ink); }
/* Los `<select>` nativos ignoran buena parte de lo anterior en iOS/Android salvo que se
   quite su apariencia de sistema: si no, aparecen en blanco encima del pergamino. La
   flecha se redibuja con dos gradientes en vez de un icono, así toma `--muted` y cambia
   con el tema en vez de quedar fija. */
.field select {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% - 3px), calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.player-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-bottom: 9px; }
.remove { width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.05rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease; }
@media (hover: hover) and (pointer: fine) { .remove:hover { background: var(--paper); color: var(--accent); border-color: var(--accent); } }
.recent-players { margin: 16px 0 18px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.recent-players-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.recent-players-head strong { font-size: .82rem; }
.recent-players-head button { border: 0; padding: 5px; color: var(--muted); background: transparent; font-size: .72rem; text-decoration: underline; cursor: pointer; }
.recent-player-list { display: flex; flex-wrap: wrap; gap: 8px; }
.recent-player { display: inline-grid; grid-template-columns: auto 34px; min-height: 42px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.recent-player button { border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.recent-player [data-action="add-recent-player"] { padding: 8px 7px 8px 14px; font-weight: 700; }
.recent-player [data-action="remove-recent-player"] { padding: 0 10px 0 5px; color: var(--accent); font-weight: 800; }
.section-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 22px 0 10px; font-weight: 700; }
.section-label small { color: var(--muted); font-weight: 650; }

.game-head { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: start; margin-bottom: 16px; }
.turn-label { color: var(--accent); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.turn-name { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; letter-spacing: -.025em; }
.deck-count { text-align: center; min-width: 62px; padding: 9px 10px; border-radius: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.deck-count strong { display: block; font-size: 1.2rem; }
.deck-count span { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; }
/* La cuenta atrás del turno, en la sala compartida: 20 segundos para jugar la carta
   antes de que el anfitrión pase el turno solo. */
.turn-timer { text-align: center; min-width: 62px; padding: 9px 10px; border-radius: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); transition: border-color .2s ease, color .2s ease; }
.turn-timer strong { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.turn-timer span { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; }
.turn-timer-low { border-color: #d33; color: #d33; animation: turn-timer-pulse 1s ease-in-out infinite; }
.turn-timer-low span { color: #d33; }
@keyframes turn-timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.scoreboard { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; scroll-snap-type: x proximity; }
.score { flex: 0 0 auto; display: grid; grid-template-columns: 28px auto 22px; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: .76rem; scroll-snap-align: start; }
.score i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--line); color: var(--accent-dark); font-size: .62rem; font-style: normal; font-weight: 700; }
.score b { max-width: 80px; overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.score em { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); font-style: normal; font-weight: 700; }
.score.active { color: white; background: var(--accent-solid); border-color: var(--accent-solid); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-solid) 32%, transparent); }
.score.active i { background: #fff; }
/* Color fijo y no `--accent-dark`: esta insignia lleva un fondo blanco literal en
   cualquier tema, así que necesita una tinta oscura fija para seguir leyéndose. */
.score.active em { color: var(--accent-dark); background: #fff; }

/* El mapa de la línea. Cada parada se sitúa donde le toca a escala real (el ancho
   exacto lo fija JS en línea, según el tamaño del racimo más apretado), nunca por
   debajo de lo que necesita un dedo, así que a partir de una docena de cartas la tira
   se desplaza. */
/* Sangra hasta el borde igual que la línea: así se ve que la tira sigue y se puede
   desplazar, en vez de parecer que se corta. */
.timeline-map { position: relative; height: 48px; margin: 12px -18px 0; padding: 0 18px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.timeline-map::-webkit-scrollbar { display: none; }
.timeline-wrap { margin: 10px -18px 22px; padding: 8px 18px 18px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.timeline { display: flex; align-items: stretch; min-width: max-content; padding: 8px 0; }
.timeline-card { width: 174px; min-height: 244px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); position: relative; overflow: hidden; }
.card-visual { height: 74px; padding: 12px 13px; display: flex; align-items: flex-end; justify-content: space-between; color: rgba(255,255,255,.92); position: relative; overflow: hidden; }
.card-visual span { font: 700 1.6rem var(--font-display); position: relative; z-index: 1; }
.card-visual small { max-width: 90px; text-align: right; font-size: .56rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .08em; position: relative; z-index: 1; }
.card-content { padding: 13px; }
/* El sello de tema de «Gran mezcla temporal»: de qué mazo viene la carta, para
   ubicarse entre los ocho que se mezclan. No aparece en el resto de modalidades,
   donde el tema ya se sabe de sobra.

   Nunca se sale de su carta: `max-width` lo ata al ancho disponible y
   `overflow-wrap: anywhere` deja que el texto baje de línea en lugar de asomar por el
   borde —una carta de la línea mide 130 px en un móvil estrecho—. El icono no encoge.
   Y va en su propia línea (`flex` con `width: fit-content`, no `inline-flex`) para que
   «Fecha oculta» no se le meta al lado en la carta de la mano. */
/* Un mazo que todavía no es del jugador: se ve, se lee y se entiende por qué no se
   puede abrir. Esconderlo sería peor: nadie compra lo que no sabe que existe. */
.game-row-cerrado .game-name { color: var(--muted); }
/* Cada manera de conseguir el mazo es un botón de dos líneas: lo que cuesta arriba y lo
   que abre debajo, para poder comparar las dos de un vistazo. */
.compra-via { display: grid; gap: 2px; line-height: 1.25; }
.compra-via small { font-size: .78rem; font-weight: 500; opacity: .82; }

.card-category { display: flex; width: fit-content; align-items: center; gap: 4px; max-width: 100%; margin-bottom: 6px; padding: 3px 8px; border-radius: 999px; background: var(--paper); color: var(--muted); font-size: .62rem; font-weight: 700; text-align: left; text-transform: uppercase; letter-spacing: .06em; line-height: 1.3; overflow-wrap: anywhere; }
.card-category > span { flex: none; }
.hand-card .card-category { position: relative; z-index: 1; }
.reveal .card-category { margin: 14px 0 12px; }
.timeline-card .year { font-family: var(--font-display); color: var(--accent); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.timeline-card h3 { margin: 9px 0 8px; font-family: var(--font-display); font-size: .98rem; line-height: 1.16; letter-spacing: -.01em; }
.timeline-card p { color: var(--muted); font-size: .75rem; line-height: 1.42; margin: 0; }
/* Una carta colocada se da la vuelta al tocarla: el título se cambia por la
   explicación con un giro rápido, y otro toque la devuelve. No es un flip 3D con dos
   caras —la ilustración de fondo no se puede duplicar sin pesar el doble—, así que el
   giro se hace sobre el propio contenido, que se sustituye a medio camino, cuando el
   canto de la carta lo tapa. */
.card-flippable { cursor: pointer; }
.card-flippable .card-content { perspective: 700px; }
.card-flippable.flip-anim .card-content { animation: card-flip-turn .4s ease; }
@keyframes card-flip-turn { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(90deg); } }
.card-flippable .card-content p { display: none; margin-top: 9px; }
.card-flippable.is-flipped .card-content h3 { display: none; }
.card-flippable.is-flipped .card-content p { display: block; }
.card-flippable.is-flipped .card-content { max-height: 100%; overflow-y: auto; }
.card-flippable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot { width: 54px; min-height: 244px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.slot span { display: grid; place-items: center; width: 38px; height: 100%; min-height: 116px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 1.4rem; transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--ease-spring), box-shadow var(--motion-fast) ease; }
/* En táctil el hueco tocado conservaba el resalte de destino aunque el dedo se
   hubiera ido: parecía que la carta seguía a punto de caer ahí. */
.slot:focus-visible span { border-color: var(--accent); color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .slot:hover span { border-color: var(--accent); color: var(--accent); }
}
.slot:disabled { cursor: default; }
.slot:disabled span { opacity: .25; }
/* El hueco donde iba de verdad la carta que se acaba de fallar: se resalta detrás del
   aviso de fallo, así que tiene que verse aunque el hueco esté deshabilitado. */
.slot-correct { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.slot-correct span { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.slot-correct:disabled span { opacity: 1; }
.slot-correct small { color: var(--accent); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.slot-confirm { width: 150px; min-height: 244px; margin: 0 6px; padding: 14px 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; text-align: center; border: 2px dashed var(--accent); border-radius: 12px; background: var(--surface); }
.slot-confirm small { color: var(--accent); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.slot-confirm strong { font-family: var(--font-display); font-size: 1rem; line-height: 1.15; margin-bottom: 4px; }
.slot-confirm .btn { padding: 10px 12px; font-size: .78rem; }
.placement-enter { animation: placement-in 240ms var(--ease-spring) both; transform-origin: center; }
@keyframes placement-in { from { opacity: 0; transform: scale(.94); } }

.hand-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.hand-title h3 { margin: 0; }
.hand-title small { color: var(--muted); }
.hand { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.hand-card, .hand-card img, .timeline-card img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.hand-card { min-height: 164px; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 14px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-soft); cursor: grab; position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) ease, box-shadow var(--motion-base) ease, opacity var(--motion-fast) ease; }
.hand-card:active { transform: translateY(2px); }
.hand-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-2px); }
.hand-card.selection-enter { animation: card-select 260ms var(--ease-spring) both; }
@keyframes card-select { 0% { transform: translateY(1px) scale(.985); } 100% { transform: translateY(-2px); } }

/* Arrastrar cartas. La carta original se queda apagada en su sitio, como hueco de
   donde salió, y lo que sigue al dedo es una copia flotante. */
.hand-card.armed { transform: scale(.97); box-shadow: inset 0 0 0 2px var(--accent); }
/* La carta se encoge mientras se mantiene pulsada y termina de encogerse justo cuando se
   levanta: esa es toda la explicación que necesita el gesto la primera vez que se usa. */
.hand-card.holding { transform: scale(.96); box-shadow: inset 0 0 0 2px var(--accent); transition: transform 300ms linear, box-shadow var(--motion-fast) ease; }
.hand-card.dragging { opacity: .3; filter: grayscale(1); cursor: grabbing; }
.drag-ghost, .drag-settle { position: fixed; left: 0; top: 0; z-index: 60; margin: 0; min-height: 0; padding: 11px 13px; pointer-events: none; transition: none; border-color: var(--accent); box-shadow: 0 16px 34px rgba(40,28,18,.3); }
.drag-ghost { animation: ghost-lift 180ms var(--ease-spring) both; }
@keyframes ghost-lift { from { opacity: .65; } }
/* Al soltar, la copia deja de ser «lo que sigue al dedo» y pasa a ser «lo que va
   hacia algún sitio»: el recorrido lo dibuja drag.js, aquí solo cambia el nombre
   para que la copia de un gesto ya terminado no se confunda con la de uno vivo. */
.drag-settle { animation: none; }
.drag-ghost .card-arrow,
.drag-settle .card-arrow { display: none; }
.drag-ghost strong, .drag-settle strong { margin-top: 7px; font-size: .9rem; }
.slot.drop-target span { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
body.dragging-card { touch-action: none; user-select: none; -webkit-user-select: none; }
body.dragging-card .hand-card:not(.dragging):not(.drag-ghost) { opacity: .5; }
.hand-card .hidden-date { color: var(--accent); font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }
.hand-card strong { display: block; margin-top: 11px; padding-right: 12px; font-family: var(--font-display); font-size: 1.06rem; line-height: 1.16; letter-spacing: -.01em; position: relative; z-index: 1; }
.card-arrow { position: absolute; left: 14px; bottom: 11px; color: var(--accent); font-weight: 700; }
.era-antigua { background: #6f6353; }
.era-cientifica { background: #5f6b6a; }
.era-edadmoderna { background: #7a6440; }
.era-revoluciones { background: #77504a; }
.era-guerras { background: #4b4f45; }
.era-friaguerra { background: #4a5a6b; }
.era-global { background: #63596b; }
.era-industrial { background: #6b5b4a; }
.era-electrica { background: #7d6838; }
.era-atomica { background: #55605f; }
.era-digital { background: #5a5f6b; }
.era-medieval { background: #7a5f49; }
.era-imperio { background: #856539; }
.era-ilustracion { background: #7f663c; }
.era-moderna { background: #5d6b6d; }
.era-sigloxx { background: #4f4f4c; }
.era-democracia { background: #4a6b5d; }
.era-gigante { background: #4a5a63; }
.era-enorme { background: #4f6b5d; }
.era-grande { background: #6f6a4a; }
.era-mediano { background: #856539; }
.era-pequeno { background: #8a5f4c; }
.era-diminuto { background: #7a6a72; }
.era-minusculo { background: #7a6a72; }
.era-muypequeno { background: #8a5f4c; }
.era-medio { background: #6f6a4a; }
.era-barroco { background: #74543d; }
.era-clasica { background: #65564a; }
.era-romantica { background: #6f4650; }
.era-popular { background: #704d3f; }
.era-videoclip { background: #5a4f70; }
.era-streaming { background: #3f6268; }
.era-laboratorio { background: #4c5963; }
.era-arcade { background: #65503f; }
.era-ochobits { background: #634661; }
.era-tresd { background: #3f5f66; }
.era-online { background: #4b644c; }
.era-revolucion { background: #6d593f; }
.era-telescopio { background: #4d5d6d; }
.era-cosmologia { background: #4e4b68; }
.era-carreraespacial { background: #6b4d40; }
.era-sondas { background: #3f5e68; }
.era-observatorios { background: #53516c; }
.era-espacioactual { background: #3d6162; }
.era-medicinaantigua { background: #675747; }
.era-anatomia { background: #704b45; }
.era-microbios { background: #49655b; }
.era-terapias { background: #5a5369; }
.era-tecnologia { background: #445f6b; }
.era-molecular { background: #5c4d68; }
.era-genomica { background: #3f6256; }
.era-microscopico { background: #555c68; }
.era-pequenisimo { background: #69554a; }
.era-ligero { background: #566a54; }
.era-medianoanimal { background: #6b5843; }
.era-grananimal { background: #4d6470; }
.era-giganteanimal { background: #5e4c66; }
.era-colosal { background: #3e5e59; }
.era-cercana { background: #5d586c; }
.era-regional { background: #665248; }
.era-nacional { background: #556a59; }
.era-continental { background: #4a5f70; }
.era-oceanica { background: #5f506a; }
.era-antipoda { background: #3f625e; }
.era-fugaz { background: #5d586c; }
.era-breve { background: #665248; }
.era-duradero { background: #556a59; }
.era-veterano { background: #4a5f70; }
.era-centenario { background: #5f506a; }
.era-milenario { background: #3f625e; }
.era-pausado { background: #5d586c; }
.era-tranquilo { background: #665248; }
.era-veloz { background: #556a59; }
.era-rapido { background: #4a5f70; }
.era-fulgurante { background: #5f506a; }
.era-vertiginoso { background: #3f625e; }
.hint { margin: 12px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }

/* El Pulso comparte el terracota de las decisiones: es una jugada excepcional, no un
   modo aparte. El rayo le aporta la segunda pista visual. */
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 12px 0 2px; border-top: 1px solid var(--line); font-size: .9rem; font-weight: 700; }
.opt-row span { display: flex; flex-direction: column; gap: 3px; }
.opt-row small { font-size: .74rem; font-weight: 500; line-height: 1.35; color: var(--muted); }
.opt-row input[type="checkbox"] { width: 42px; height: 26px; flex: none; -webkit-appearance: none; appearance: none; margin: 0; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .15s ease; }
.opt-row input[type="checkbox"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-soft); transition: transform .15s ease; }
.opt-row input[type="checkbox"]:checked { background: var(--accent); }
.opt-row input[type="checkbox"]:checked::before { transform: translateX(16px); }
.pulse-btn { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-color: var(--accent); color: var(--accent); }
.pulse-btn small { font-size: .68rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pulse-banner { margin: 0 0 14px; padding: 11px 14px; border-radius: 10px; background: var(--accent-solid); color: #fff; font-size: .84rem; font-weight: 650; text-align: center; }
.pulse-target { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pulse-target small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.pulse-gift { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); font-size: .84rem; line-height: 1.4; }
.pulse-outcome { margin-top: 10px; }

/* El desenlace de un duelo: las dos jugadas, una debajo de otra, con su marca. No lleva
   la marca grande de acierto de una jugada normal porque aquí no hay un solo veredicto. */
/* `duel-*`, a secas, ya es del cara a cara del duelo por enlace: estas son las del
   Pulso y llevan su propio prefijo para no pisarse. */
.modal.pulse-duel-modal { text-align: left; }
.pulse-duel-modal h2 { margin: 6px 0 0; }
.pulse-duel-modal .eyebrow { justify-content: flex-start; }
.pulse-duel-rows { display: grid; gap: 8px; margin: 16px 0 0; }
.pulse-duel-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.pulse-duel-row b { font-size: .92rem; }
.pulse-duel-row small { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.pulse-duel-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: .95rem; font-weight: 700; }
.pulse-duel-hit { border-color: color-mix(in srgb, var(--green-solid) 45%, var(--line)); }
.pulse-duel-hit .pulse-duel-mark { background: var(--green-solid); }
.pulse-duel-miss .pulse-duel-mark { background: var(--accent-solid); }
.pulse-duel-modal .pulse-outcome { margin-top: 14px; line-height: 1.5; }

.overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; background: rgba(35,27,19,.73); backdrop-filter: blur(8px); }
/* El diálogo del sorteo lleva un teclado numérico debajo: anclarlo arriba (en vez de
   centrarlo) evita que se recoloque de golpe al abrirse el teclado y deje la mitad de
   la carta cortada, y que haga falta desplazar para encontrar el campo. */
.overlay[data-starter-dialog] { align-items: flex-start; padding-top: max(18px, env(safe-area-inset-top)); }
.modal { width: min(100%, 460px); max-height: calc(100dvh - 36px); overflow-y: auto; overscroll-behavior-y: contain; border-radius: 12px; padding: 26px; background: var(--surface); box-shadow: 0 20px 50px rgba(0,0,0,.22); text-align: center; border: 1px solid var(--line); }
.dialog-enter { animation: veil-in 180ms ease-out both; }
.dialog-enter .modal { animation: dialog-in 260ms var(--ease-out) both; }
.dialog-exit { pointer-events: none; animation: veil-out var(--motion-fast) ease-in both; }
.dialog-exit .modal { animation: dialog-out var(--motion-fast) ease-in both; }
@keyframes veil-in { from { opacity: 0; } }
@keyframes veil-out { to { opacity: 0; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal .big-icon { font-size: 3rem; margin-bottom: 10px; }
.modal p { color: var(--muted); line-height: 1.55; }
.reveal { margin: 18px 0; padding: 0 18px 18px; border-radius: 12px; background: var(--paper); overflow: hidden; }
.dialog-enter .reveal { animation: reveal-in 360ms 90ms var(--ease-out) backwards; }
.dialog-enter .result-mark { animation: result-in 380ms 80ms var(--ease-spring) backwards; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(7px); } }
@keyframes result-in { from { opacity: 0; transform: scale(.88); } }
.reveal-era { margin: 0 -18px 15px; padding: 10px 14px; color: rgba(255,255,255,.94); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.reveal-era span { margin-right: 8px; font: 1.1rem var(--font-display); }
.reveal .year { color: var(--accent); font: 850 2.25rem var(--font-display); }
.result-mark { width: 48px; height: 48px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green-solid); font-size: 1.4rem; font-weight: 700; }
.failure .result-mark { background: var(--accent-solid); }
.success .big-icon { color: var(--green); }
.failure .big-icon { color: var(--accent); }
.pass-screen { min-height: calc(100dvh - 110px); display: grid; place-items: center; text-align: center; }
.pass-screen .panel { width: min(100%, 480px); }
.pass-card { position: relative; overflow: hidden; }
.player-medallion { width: 74px; height: 74px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent-solid); border: 2px solid var(--accent-solid); font: 700 1.2rem var(--font-display); }
.pass-card .eyebrow { justify-content: center; }

/* El cartel de tema de Competición: una pantalla entera para decir a qué se juega y nada
   más, con el nombre a tamaño de titular y un botón rojo debajo. */
.comp-splash { padding-block: 34px; animation: comp-splash-pop 380ms var(--ease-out) both; }
@keyframes comp-splash-pop { from { opacity: 0; transform: scale(.94); } }
.comp-splash h2 { margin: 0 0 26px; font-size: clamp(1.9rem, 8.5vw, 3rem); line-height: 1.06; }
.comp-splash-lead { display: block; margin-bottom: 12px; color: var(--muted); font-size: .82rem; font-weight: 700; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
.comp-splash-start { min-height: 56px; color: #fff; font-size: 1.05rem; background: linear-gradient(110deg, #c33a2c, #9c1f15); box-shadow: 0 6px 16px rgba(140,26,18,.3); }

/* Y dentro de la partida, el mismo tema como rótulo sombreado encima del marcador: el
   cartel del principio ya no está y la ronda dura varios minutos. */
.comp-topic { margin: 0 0 14px; padding: 11px 16px; border-radius: 12px; background: var(--accent-solid); color: #fff; box-shadow: 0 5px 14px rgba(73,42,14,.26); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; text-align: center; }

.rules { text-align: left; }

/* La guía. Enseñar una jugada cuesta menos que contarla, así que abre con una: una carta
   de este mazo sube a su hueco, se da la vuelta y descubre su valor, en bucle. Debajo,
   los tres pasos del turno y una ficha por cada cosa que hay que decidir. */
.guide-content h2 { margin: 3px 0 0; }
.guide-content h3 {
  margin: 24px 0 9px;
  font: 700 .76rem/1 var(--font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.guide-lead { margin: 8px 0 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.guide-note {
  margin: 15px 0 0;
  padding: 10px 13px;
  border-left: 2px solid var(--accent);
  border-radius: 0 9px 9px 0;
  background: var(--vitela);
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.45;
}
/* La carta colocada es papel, como en la mesa; la que está por jugar, cuero. Son los dos
   mismos materiales de la partida, para que la demostración no invente un tercero. */
@keyframes gd-fly {
  0%, 4% { opacity: 0; transform: translateY(92px) scale(.94); }
  10% { opacity: 1; transform: translateY(92px) scale(1); }
  30%, 78% { opacity: 1; transform: translateY(0) scale(1); }
  86%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}
@keyframes gd-turn {
  0%, 34% { transform: rotateY(0deg); }
  46%, 87% { transform: rotateY(180deg); }
  88%, 100% { transform: rotateY(0deg); }
}
@keyframes gd-gap {
  0%, 8% { opacity: 1; border-color: var(--borde-suave); transform: scale(1); }
  18% { opacity: 1; border-color: var(--accent); transform: scale(1.05); }
  28%, 84% { opacity: 0; transform: scale(1); }
  93%, 100% { opacity: 1; border-color: var(--borde-suave); }
}
@keyframes gd-tick {
  0%, 46% { opacity: 0; transform: translateX(-50%) scale(.6); }
  56%, 78% { opacity: 1; transform: translateX(-50%) scale(1); }
  84%, 100% { opacity: 0; transform: translateX(-50%) scale(1); }
}

.guide-steps { list-style: none; margin: 17px 0 0; padding: 0; display: grid; gap: 8px; }
.guide-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--vitela-borde);
  border-radius: 9px;
  background: var(--vitela);
}
.gs-num {
  grid-row: span 2;
  align-self: center;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff3d7;
  background: var(--accent-solid);
  font: 700 .85rem var(--font-display);
}
.guide-step b { font-size: .93rem; }
.guide-step small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
/* Los tres pasos entran uno detrás de otro: se leen en ese orden, así que se presentan
   en ese orden. Solo al abrir la guía, no en cada repintado. */
.dialog-enter .guide-step, .dialog-enter .guide-card { animation: guide-in 360ms var(--ease-spring) backwards; }
.dialog-enter .guide-step:nth-child(2) { animation-delay: 80ms; }
.dialog-enter .guide-step:nth-child(3) { animation-delay: 160ms; }
@keyframes guide-in { from { opacity: 0; transform: translateY(9px); } }

.guide-cards { display: grid; gap: 8px; }
.guide-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid var(--vitela-borde);
  border-radius: 9px;
  background: var(--vitela);
}
.guide-card > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  font-size: 1.25rem;
  color: var(--accent-dark);
  background: var(--boton-icono);
}
.gc-body b { font-size: .92rem; }
.gc-body em {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .58rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent-dark);
  background: var(--accent-soft);
}
.gc-body small { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; line-height: 1.42; }

.guide-levels {
  display: grid;
  gap: 1px;
  border: 1px solid var(--vitela-borde);
  border-radius: 9px;
  overflow: hidden;
  background: var(--vitela-borde);
}
.guide-levels > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; padding: 9px 13px; background: var(--vitela); font-size: .82rem; }
.guide-levels b { font-family: var(--font-display); }
.guide-levels span { color: var(--muted); line-height: 1.4; }
.rules .btn-block { margin-top: 22px; }

.settings-modal { text-align: left; }
.enc-modal { width: min(100%, 980px); }
.enc-modal .enc-section { padding-top: 16px; }
.settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.settings-close { flex: none; width: 32px; height: 32px; margin: -6px -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.settings-close:focus-visible { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .settings-close:hover { background: var(--paper); color: var(--ink); }
}
/* Cada tema (Tema, Efectos, Copias de seguridad…) es su propio bloque, separado del
   siguiente por una línea y aire de sobra. Sin esto los títulos quedaban pegados al
   control de arriba y el panel entero se leía como una sola lista sin orden. */
.settings-section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.settings-section:first-of-type { margin-top: 20px; padding-top: 0; border-top: 0; }
.settings-modal h2 { margin: 0 0 16px; font-size: 1.3rem; }
.settings-modal .field { margin-bottom: 16px; }
.settings-modal .field:last-child { margin-bottom: 0; }
.settings-modal .hint + .field { margin-top: 12px; }
.settings-modal .opt-row:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.settings-modal .btn-block { margin-top: 18px; }
.settings-modal .settings-done { margin-top: 30px; }
/* El aviso se esconde bajando su propia altura MÁS lo que está separado del borde. Con
   un porcentaje a secas no basta: vacío mide lo que su relleno, 24 px, y un 150% son 36,
   que no alcanzan a tapar los 18 px de separación; asomaban seis píxeles de barrita
   oscura en el borde inferior de todas las pantallas. Y como nunca se pulsa, tampoco
   recibe toques: en esa franja se los estaba tragando. */
.toast { position: fixed; z-index: 50; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); opacity: 0; transform: translate(-50%, calc(100% + max(18px, env(safe-area-inset-bottom)) + 4px)) scale(.98); width: max-content; max-width: calc(100% - 36px); padding: 12px 16px; border-radius: 10px; background: #29241e; color: white; font-weight: 650; box-shadow: var(--shadow); pointer-events: none; transition: transform var(--motion-base) var(--ease-spring), opacity var(--motion-fast) ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.online-shell { padding-bottom: 45px; }
.online-intro { max-width: 680px; margin: 34px 0 26px; }
.online-intro h2 { font-size: clamp(2.7rem, 10vw, 5rem); line-height: .92; }
.online-entry-grid { display: grid; gap: 14px; }
.online-form { position: relative; overflow: hidden; }
.online-form h3 { margin: 5px 0 8px; font: 800 1.55rem var(--font-display); letter-spacing: -.02em; }
.online-form p { color: var(--muted); line-height: 1.45; }
.form-number { display: block; color: var(--accent); font: italic 1rem var(--font-display); }
/* El código de conexión del modo sin conexión, para copiarlo a mano cuando la hoja de
   compartir del sistema no ofrece ningún destino común entre Android e iPhone. */
.signal-box { width: 100%; box-sizing: border-box; margin: 12px 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper); color: var(--muted); font: .72rem/1.4 ui-monospace, monospace; resize: none; word-break: break-all; }
.room-code-input { text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.online-note { margin-top: 16px; text-align: center; color: var(--muted); font-size: .8rem; }
.spinner { width: 48px; height: 48px; margin: 0 auto 18px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.lobby-head { display: grid; gap: 18px; margin: 24px 0 20px; }
.lobby-head h2 { margin: 7px 0 0; }
.room-code-card { padding: 15px 17px; border-radius: 12px; color: var(--ink-solid-contrast); background: var(--ink-solid); box-shadow: var(--shadow-soft); }
.room-code-card small { display: block; color: color-mix(in srgb, var(--ink-solid-contrast) 60%, transparent); text-transform: uppercase; letter-spacing: .1em; font-size: .59rem; }
.room-code-card strong { display: block; margin: 3px 0 7px; font: 800 1.55rem ui-monospace, monospace; letter-spacing: .14em; }
.room-code-card button { padding: 0; border: 0; background: transparent; color: var(--accent); font-size: .73rem; font-weight: 700; cursor: pointer; }
.room-invite-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.room-invite-actions button + button { padding-left: 13px; border-left: 1px solid rgba(255,255,255,.2); }
.qr-modal .eyebrow { justify-content: center; }
.qr-modal h2 { margin-top: 8px; }
.qr-frame { width: min(100%, 340px); aspect-ratio: 1; margin: 17px auto 12px; display: grid; place-items: center; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 0 0 7px #fff, var(--shadow-soft); }
/* Una invitación completa da un QR bastante más denso (100+ cuadraditos) que el código
   corto de sala de online.js: encogerlo a un cuadrado pequeño deja cada cuadradito por
   debajo de lo que una cámara de móvil puede resolver a la distancia normal a la que se
   enseña una pantalla a otra. Que ocupe todo el hueco disponible del marco, no un tamaño
   fijo pensado para un código mucho más simple. */
.qr-frame canvas { width: 96%; height: auto; display: block; image-rendering: pixelated; }
.qr-panel { text-align: center; }
.qr-panel .qr-frame video { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; }
.qr-panel #local-qr-progress, .qr-panel #local-qr-scan-status { margin: 0; }
.qr-fallback summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: 4px 0; }
.qr-fallback[open] summary { margin-bottom: 10px; }
.qr-fallback .btn, .qr-fallback .signal-box, .qr-fallback .field { margin-top: 10px; }
.qr-fallback .btn:first-of-type { margin-top: 0; }
.qr-room-code { display: inline-block; margin-bottom: 13px; padding: 7px 12px; border-radius: 999px; color: var(--accent-dark); background: var(--paper); font: 850 .82rem ui-monospace, monospace; letter-spacing: .13em; }
.qr-modal > p { color: var(--muted); line-height: 1.5; }
.online-lobby-grid { display: grid; gap: 14px; }
.solo-panel { margin-bottom: 16px; }
.solo-home { margin-top: 24px; }
.solo-intro { margin-bottom: 24px; }
.solo-title { margin: 7px 0 10px; }
.solo-intro .lead { max-width: 43ch; margin-bottom: 0; }
.solo-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.solo-panel-head h3 { margin: 0; font-size: 1.08rem; letter-spacing: -.015em; }
.solo-panel-head time { flex: 0 0 auto; color: var(--muted); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.solo-panel p { color: var(--muted); font-size: .82rem; margin: 0 0 14px; }
.solo-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.solo-stats span { padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); text-align: center; }
.solo-stats b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); }
.solo-stats small { display: block; margin-top: 2px; color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; }
.cal-day { aspect-ratio: 1; border-radius: 5px; background: var(--paper); border: 1px solid var(--line); }
.cal-day.cal-bajo { background: color-mix(in srgb, var(--accent) 30%, var(--paper)); border-color: transparent; }
.cal-day.cal-medio { background: color-mix(in srgb, var(--accent) 65%, var(--paper)); border-color: transparent; }
.cal-day.cal-alto { background: var(--accent); border-color: transparent; }
/* La pantalla de repaso reutiliza la carta de la línea temporal, pero en vertical y a
   todo el ancho: aquí no hay que desplazarse a los lados, hay que leer. */
.review-grid { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 22px; }
.review-grid .timeline-card { width: 100%; min-height: 0; }
.review-grid .card-visual { height: 56px; }
/* En móvil la carta de la línea esconde su descripción para que quepan más a la vez
   (ver el bloque `@media (max-width: 420px)`), pero aquí es justo lo que hay que leer. */
.review-grid .timeline-card p { display: block; }
.review-count { margin-top: 6px; color: var(--accent); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
/* El enlace de cada carta fallada hacia la enciclopedia: una acción de verdad, pero
   secundaria dentro de la carta, así que va sin fondo ni borde propio y con el mismo
   tamaño que el resto de anotaciones de la carta. */
.enc-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 700; font-size: .78rem; cursor: pointer; }
.enc-toolbar { display: grid; gap: 16px; margin: 16px 0 22px; }
.enc-bands { display: flex; flex-wrap: wrap; gap: 8px; }
/* El filtro de láminas va rotulado como los campos de arriba: sin el rótulo, su «Todas»
   y el de las épocas son dos botones idénticos uno debajo del otro. */
.enc-lock-field { display: grid; gap: 7px; }
.enc-lock-label { font-size: .85rem; font-weight: 700; color: var(--muted); }
.band-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; font-size: .78rem; font-weight: 650; cursor: pointer; }
.band-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.enc-empty { margin: 16px 0 22px; padding: 22px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.final-card { text-align: center; margin: 18px 0; }
.final-card small { color: var(--muted); }
.tournament-board ol { list-style: none; padding: 0; }
.tournament-board li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.final-card .animal-card-art { display: block; width: min(100%, 180px); height: auto; max-height: 30dvh; object-fit: contain; margin: 14px auto; border-radius: 10px; }
.final-form { margin: 18px 0; }
.final-results { overflow-x: auto; margin: 18px 0; }
.final-results table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.final-results th, .final-results td { padding: 10px 6px; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.final-best { background: var(--accent-soft); font-weight: 700; }
.enc-topic { margin: 28px 0; }
.enc-topic h2 { font-size: 1.35rem; margin: 0 0 12px; }
.enc-deck { margin: 10px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.enc-deck summary { padding: 16px; min-height: 54px; cursor: pointer; font-weight: 700; }
.enc-deck summary span { overflow-wrap: anywhere; }
.enc-deck summary small { margin-left: 10px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.enc-deck[open] summary { border-bottom: 1px solid var(--line); }
.enc-deck-cards:not(:empty) { padding: 14px; }
.enc-deck .enc-grid { margin-top: 0; }
.enc-source { margin-top: 8px; }
.enc-source a { color: var(--accent); font-size: .74rem; font-weight: 700; }
/* La carta a la que se llega desde un repaso se ve entre las demás sin depender solo
   del color: el desplazamiento ya la deja centrada, esto confirma cuál es. */
.enc-card-highlight { outline: 2px solid var(--accent); outline-offset: 2px; }

/* La lámina que todavía no se ha descubierto: en su sitio va un sello cerrado, con su
   candado y dicho con todas las letras. Se vela la imagen y nada más: el valor, la época,
   la explicación y la fuente siguen legibles, porque consultar es para lo que está la
   enciclopedia. El dibujo no se pinta siquiera —lo decide `enciclopedia.js`—, así que
   esto es un papel sellado y no una imagen tapada: ni se descarga ni se compone. */
/* El fondo tramado del sello se declara en edition.css, que pinta `.card-visual` después
   y con más peso: aquí solo queda la caja. */
.enc-card-velada .card-visual { position: relative; overflow: hidden; }
/* Con `.card-visual` delante, porque el símbolo de época de las cartas sin ilustración
   («.card-visual span») ya declara su propia posición y ganaría a un selector más corto. */
/* Solo el candado, centrado: el rótulo se partía en dos líneas en una tarjeta estrecha y
   el sello acababa pareciendo un aviso de error. Lo que decía sigue estando para quien
   usa lector de pantalla, en el texto que no se ve. */
.card-visual .enc-sello { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 10px; color: var(--enc-sello-tinta); }
.enc-sello .enc-candado { display: block; filter: drop-shadow(0 2px 4px rgba(40,26,10,.22)); }

/* El perfil. Reutiliza la rejilla de cifras del solitario y las filas de la colección:
   son los mismos datos leídos de otra manera, no una interfaz aparte. Lo único propio
   son los puntos débiles y los logros. */
.perfil-section { padding-bottom: 40px; }
.perfil-stats { grid-template-columns: repeat(3, 1fr); }
.perfil-stats b { font-size: 1.35rem; }
.perfil-section textarea { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 11px 13px; color: var(--ink); font-family: inherit; font-size: .85rem; resize: vertical; }
.perfil-section .hint { text-align: left; }
.perfil-section h3 { margin: 0 0 10px; font-size: .95rem; }

.weak-panel h3 + .weak-list { margin-bottom: 18px; }
.weak-panel .weak-list:last-child { margin-bottom: 0; }
.weak-list { display: grid; gap: 6px; }
/* Cada punto débil es un enlace a la enciclopedia, así que se comporta como una fila
   pulsable: alto de dedo, la flecha del resto del juego y sin fondo que compita con el
   panel que la contiene. */
.weak-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; transition: background var(--motion-fast) ease; }
.weak-row b, .weak-row small { display: block; }
.weak-row b { font-size: .88rem; }
.weak-row small { margin-top: 2px; color: var(--muted); font-size: .73rem; }
.weak-mark { display: grid; place-items: center; width: 40px; height: 34px; border-radius: 8px; background: var(--surface); color: var(--accent-dark); font-size: .8rem; font-weight: 700; }
.weak-row > i { font-style: normal; color: var(--accent); transition: transform .18s ease; }
.logro-grid { display: grid; gap: 8px; }
.logro { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
/* Un logro bloqueado se distingue por el contorno y por su estrella vacía, no solo por
   ser más pálido: el color no puede ser la única señal. */
.logro:not(.unlocked) { border-style: dashed; }
.logro:not(.unlocked) b { color: var(--muted); }
.logro-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); color: var(--muted); font-size: 1rem; }
.logro.unlocked .logro-mark { background: var(--accent-soft); color: var(--accent-dark); }
.logro b { display: block; font-size: .9rem; }
.logro small { display: block; margin-top: 3px; color: var(--muted); font-size: .75rem; line-height: 1.3; }
.logro-bar { height: 5px; margin-top: 8px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.logro-bar i { display: block; height: 100%; background: var(--accent); }
.logro-progress { margin-top: 4px; font-variant-numeric: tabular-nums; }

/* El cara a cara de un duelo: las dos tiradas una encima de otra, carta a carta. Un
   número dice quién ganó; esto dice dónde os separasteis, que es lo que se comenta luego.
   El acierto y el fallo no se distinguen solo por el color: el fallo va hueco. */
.duel-grid { display: grid; gap: 12px; max-width: 380px; margin: 18px auto 6px; text-align: left; }
.duel-grid b { display: block; margin-bottom: 5px; font-size: .82rem; }
.duel-row { display: flex; flex-wrap: wrap; gap: 4px; }
.duel-row i { width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--accent); }
.duel-row i.ok { background: var(--accent); }
.duel-row i.ko { background: transparent; opacity: .45; }
/* El duelo de cifras puntúa por tramos, así que su cuadrícula tiene un estado más: la
   carta que se acercó sin clavarla. Y uno aparte para la que se cerró al salir de la
   aplicación, que no es lo mismo que fallarla. */
.duel-row i.mid { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.duel-row i.out { background: var(--ink); border-color: var(--ink); opacity: .55; }

/* La pantalla de antes de jugar: cómo funciona la modalidad, y el botón que arranca.
   La demostración se escribe en su estado final —la carta ya colocada, la cifra ya
   escrita— y las animaciones la llevan hasta ahí desde el principio. Así, con movimiento
   reducido y sin animaciones, lo que queda es una imagen que se entiende igual. */
.duelo-listo-titulo { margin: 4px 0 14px; font-size: clamp(1.6rem, 6vw, 2.2rem); }
.duelo-reglas { display: grid; gap: 8px; max-width: 420px; margin: 16px auto 4px; padding: 0; list-style: none; text-align: left; }
.duelo-reglas li { position: relative; padding-left: 26px; font-size: .94rem; line-height: 1.45; }
.duelo-reglas li::before { content: ""; position: absolute; left: 8px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.duelo-jugar { margin-top: 16px; font-size: 1.05rem; letter-spacing: .06em; }

.demo { position: relative; display: grid; gap: 10px; place-items: center; min-height: 148px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; }
.demo-linea { display: flex; align-items: center; gap: 7px; }
.demo-eje { color: var(--muted); font-size: .74rem; }
.demo-hito, .demo-mano { display: grid; place-items: center; width: 54px; height: 66px; padding: 4px; text-align: center; line-height: 1.15; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .68rem; font-variant-numeric: tabular-nums; }
.demo-hueco { width: 54px; height: 66px; border: 1px dashed var(--accent); border-radius: 8px; }
.demo-mano { border-color: var(--accent); color: var(--accent-dark); animation: demo-cae 3.6s var(--ease-out) infinite; }
@keyframes demo-cae {
  0%, 8% { transform: translate(0, 46px) scale(.9); opacity: 0; }
  30% { transform: translate(0, 46px) scale(1); opacity: 1; }
  55%, 88% { transform: translate(0, -38px) scale(1); opacity: 1; }
  96%, 100% { transform: translate(0, -38px) scale(1); opacity: 0; }
}
.demo-carta { width: 100%; max-width: 260px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: center; }
.demo-carta b { display: block; font-size: 1rem; }
.demo-carta small { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; }
.demo-reloj { width: 100%; max-width: 260px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.demo-reloj i { display: block; width: 32%; height: 100%; border-radius: 999px; background: var(--accent); animation: demo-baja 3.6s linear infinite; }
@keyframes demo-baja { 0%, 10% { width: 100%; } 70%, 100% { width: 18%; } }
.demo-campo { display: grid; place-items: center; width: 100%; max-width: 260px; min-height: 40px; border: 1px solid var(--accent); border-radius: 10px; background: var(--surface); font-variant-numeric: tabular-nums; }
.demo-campo span { animation: demo-teclea 3.6s steps(1) infinite; }
@keyframes demo-teclea { 0%, 25% { opacity: 0; } 35%, 100% { opacity: 1; } }
.demo-premio { position: absolute; right: 14px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .88rem; animation: demo-suma 3.6s var(--ease-out) infinite; }
@keyframes demo-suma { 0%, 62% { opacity: 0; transform: translateY(8px) scale(.85); } 74%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .demo-mano, .demo-reloj i, .demo-campo span, .demo-premio { animation: none; }
  .demo-mano { transform: translate(0, -38px); }
  .demo-reloj i { width: 42%; }
}

/* La carta a contrarreloj: el tiempo arriba, la pregunta en medio y la cifra abajo, sin
   nada más alrededor que distraiga durante diez segundos. */
.cifra-panel { display: grid; gap: 14px; max-width: 460px; margin: 6px auto 0; }
.cifra-rival { grid-template-columns: 1fr; margin-bottom: 2px; }
.reloj { display: flex; align-items: center; gap: 10px; }
.reloj-bar { flex: 1; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: var(--line); appearance: none; }
.reloj-bar::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
.reloj-bar::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width .1s linear; }
.reloj-bar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.reloj-bar.reloj-apura::-webkit-progress-value { background: var(--accent-solid); }
.reloj-bar.reloj-apura::-moz-progress-bar { background: var(--accent-solid); }
.reloj-left { min-width: 3ch; font-variant-numeric: tabular-nums; font-size: .95rem; text-align: right; }
.cifra-card { padding: 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-align: center; }
.cifra-card strong { display: block; margin: 8px 0 6px; font-size: clamp(1.25rem, 5vw, 1.7rem); line-height: 1.25; }
.cifra-card span { display: block; color: var(--muted); font-size: .9rem; }
.starter-card-art { margin: -20px -18px 14px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface); }
/* Más baja que una lámina normal: en el paso de adivinar hay que dejar sitio de sobra
   para el campo y el teclado numérico debajo, así que la ilustración cede altura. */
.starter-card-art .animal-card-art { display: block; width: 100%; height: min(30vw, 160px); object-fit: contain; }
.cifra-field input { font-size: 1.3rem; font-variant-numeric: tabular-nums; text-align: center; }
.cifra-unidad { font-weight: 400; text-transform: none; }
.cifra-unidades { display: block; margin-top: 4px; font-size: .72rem; color: var(--muted); }
.cifra-aviso { text-align: center; }
.cifra-puntos { margin-top: 10px; font-size: 1.05rem; }
.cifra-puntos b { font-size: 1.5rem; color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) { .reloj-bar::-webkit-progress-value { transition: none; } }

/* Los logros recién desbloqueados, en la pantalla de fin de partida: se enseñan una vez
   y en el sitio donde ya se está mirando el resultado. */
.logros-nuevos { display: grid; gap: 8px; justify-items: center; max-width: 380px; margin: 0 auto 18px; }
.logro-chip { width: 100%; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); text-align: left; }
.logro-chip b { display: block; color: var(--accent-dark); font-size: .9rem; }
.logro-chip small { display: block; margin-top: 2px; color: var(--muted); font-size: .74rem; }

@media (max-width: 420px) {
  .perfil-stats { grid-template-columns: repeat(2, 1fr); }
}
/* La promo de la competición vive junto a los botones de inicio, no dentro del
   acordeón de bloques: no es un mazo más, es una forma distinta de jugar con todos. */
.comp-summary { list-style: none; margin: 18px auto; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; max-width: 360px; }
.comp-summary li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: .85rem; }
.comp-summary li span { color: var(--accent); font-weight: 700; }
.solo-lives { margin: -6px 0 14px; font-size: 1.25rem; letter-spacing: .18em; color: var(--accent); }
.hand-solo { grid-template-columns: minmax(0, 260px); }
.hand-solo .hand-card { cursor: grab; }
.app-version { margin: 24px 0 4px; text-align: center; color: var(--muted); font-size: .6rem; letter-spacing: .08em; opacity: .55; }
.kick-btn { min-height: 44px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--accent); font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.kick-btn:active { background: rgba(143,47,42,.1); }
.manage-players { margin-top: 18px; text-align: left; }
.manage-player { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; }
.manage-player > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent-solid); font-size: .62rem; font-weight: 700; }
.lobby-settings { align-self: start; }
.lobby-settings .field + .field { margin-top: 12px; }
.lobby-settings .btn-primary { margin-top: 18px; }
.waiting-orbit { width: 78px; height: 78px; margin: 20px auto 23px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; animation: spin 3s linear infinite; }
.waiting-orbit::before { content: ""; width: 50px; height: 50px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; }
.waiting-orbit span { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transform: translateY(-39px); box-shadow: 0 5px 12px rgba(104,29,27,.3); }
.lobby-settings:not(:has(.field)) { text-align: center; }
.lobby-settings:not(:has(.field)) p { color: var(--muted); line-height: 1.5; }
.hand-card:disabled { cursor: default; }
.hand-card:disabled:not(.selected) { opacity: .72; filter: saturate(.72); }
.waiting-inline { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; color: var(--muted); font-size: .8rem; font-weight: 650; }
.waiting-inline i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.75); } }
.winner-online { width: min(100%, 560px) !important; }

@media (min-width: 700px) {
  .shell { padding-left: 28px; padding-right: 28px; }
  .setup-grid { grid-template-columns: 1fr 1fr; }
  .timeline-wrap { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .gallery { order: 0; height: min(66vh, 600px); gap: 8px; }
  .gallery-panel { flex-basis: 34px; border-radius: 22px; }
  .panel-label { left: 26px; right: 26px; bottom: 24px; }
  .hand { grid-template-columns: repeat(4, 1fr); }
  .online-entry-grid { grid-template-columns: 1fr 1fr; }
  .online-entry-grid.online-entry-single { grid-template-columns: minmax(0, 34rem); justify-content: center; }
  .online-form { padding: 28px; }
  .lobby-head { grid-template-columns: 1fr auto; align-items: end; }
  .room-code-card { min-width: 250px; }
  .online-lobby-grid { grid-template-columns: 1.15fr .85fr; }
}

/* Dos columnas solo cuando la galería puede abrir de verdad una de seis carátulas.
   Los lomos de 62 px dejaban apenas 104 px para el panel abierto en escritorio. */

@media (max-width: 420px) {
  .gallery { height: 290px; gap: 4px; }
  .gallery-panel { flex-basis: 34px; border-radius: 12px; }
  .panel-label { left: 16px; right: 16px; bottom: 16px; column-gap: 11px; }
  .hand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* En una pantalla estrecha, una carta a tamaño normal ocupa casi todo el ancho: apenas
     se ve la siguiente y hojear la línea es ir a ciegas. Se encoge y se recorta a lo
     imprescindible para decidir dónde encaja la próxima —época, año, título—, dejando la
     descripción larga fuera; el hueco de colocar no se toca, porque ahí sí hace falta el
     tamaño de un dedo. */
  .timeline-card, .slot, .slot-confirm { min-height: 172px; }
  .timeline-card { width: 130px; }
  .card-visual { height: 48px; padding: 8px 10px; }
  .card-visual span { font-size: 1.15rem; }
  .card-visual small { max-width: 66px; font-size: .52rem; }
  .card-content { padding: 10px; }
  .timeline-card .year { font-size: 1.2rem; }
  .timeline-card h3 { font-size: .82rem; margin: 6px 0 0; }
  .timeline-card p { display: none; }
  .card-flippable.is-flipped .card-content p { display: block; }
  .slot span { min-height: 90px; }
  .slot-confirm { width: 118px; padding: 12px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  /* Los estados siguen siendo visibles por su texto y color, sin desplazamientos,
     zooms, rebotes ni giros; también se respeta la preferencia al recorrer el mapa. */
  .gallery-panel.active, .gallery-panel.active .panel-label, .gallery-panel.active .panel-art img,
  .screen-enter, .screen-enter .topbar, .screen-enter > :not(.topbar), .selection-enter, .placement-enter,
  .dialog-enter, .dialog-enter .modal, .dialog-enter .reveal, .dialog-enter .result-mark,
  .dialog-exit, .dialog-exit .modal, .drag-ghost, .game-row.active,
  .dialog-enter .guide-step, .dialog-enter .guide-card,
  .spinner, .waiting-orbit, .waiting-inline i, .turn-timer-low,
  .comp-splash, .starter-winner-banner::after, .starter-winner-crown, .starter-winner-banner b,
  .starter-draw-list li.starter-draw-winner { animation: none !important; }
}

/* Fantasma: se mantiene el tamaño y la legibilidad; solo se retiran las pistas. */
.ghost-card .card-visual { background: var(--surface, #ede9e2); color: var(--muted, #766e63); }
.ghost-value { letter-spacing: .14em; color: var(--muted, #766e63); }
.ghost-card .card-content p { font-style: italic; }
.ghost-banner { display: flex; gap: 12px; align-items: center; margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line, #d8d2c8); border-radius: 16px; background: var(--surface, #eeeae3); }
.ghost-banner > span { font-size: 1.8rem; }
.ghost-banner small, .ghost-power small { display: block; margin-top: 4px; font-size: .78rem; line-height: 1.45; color: var(--muted, #766e63); }
.ghost-power { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; margin: 16px 0; text-align: left; font: inherit; color: inherit; background: transparent; border: 1px solid var(--line, #d8d2c8); border-radius: 16px; cursor: pointer; min-height: 64px; }
.pulse-power { border-color: rgba(184,117,34,.38); background: linear-gradient(135deg,rgba(255,248,226,.96),rgba(251,236,195,.84)); }
.ghost-power > span:first-child { font-size: 2rem; }
.ghost-power:disabled { cursor: default; opacity: .6; }
.ghost-power:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.auto-cards { font-size: .82rem; line-height: 1.6; color: var(--muted, #766e63); margin: 12px 0 18px; overflow-wrap: anywhere; }
.difficulty-field { margin: 18px 0; }
.difficulty-field select { width: 100%; min-height: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .ghost-card .ghost-value { animation: ghost-appear 220ms ease-out both; }
  @keyframes ghost-appear { from { opacity: 0; } to { opacity: 1; } }
}

/* Dirección visual inspirada en el gabinete de un cronista: pergamino, tinta sepia,
   grabados y marcos finos. Se apoya en las ilustraciones que ya forman parte de la PWA,
   de modo que el nuevo aspecto también funciona sin conexión. */
:root {
  --ink: #3b2816;
  --muted: #765d3d;
  --line: #b88b50;
  --paper: #ead09a;
  --surface: rgba(248, 225, 177, .88);
  --accent: #9b411d;
  --accent-dark: #6f2c13;
  --accent-soft: #d6ad69;
  --teal: #526c65;
  --green: #5e6f3a;
  --accent-solid: #98401d;
  --green-solid: #667642;
  --ink-solid: #8e3d1e;
  --ink-solid-contrast: #fff3d7;
  --shadow: 0 16px 32px rgba(75, 43, 15, .19);
  --shadow-soft: 0 5px 13px rgba(75, 43, 15, .16);

  /* Las superficies del pergamino, una por variable en vez de a pelo dentro de cada
     regla. No es orden por gusto: el tema oscuro solo puede cambiar variables, así que
     un color escrito directamente en la regla se queda claro también de noche —y con la
     tinta clara encima, que en ese momento ya es la del tema oscuro, no hay manera de
     leerlo—. Cada una tiene su versión oscura al final del archivo. */
  --vitela: rgba(246,222,174,.88);
  --vitela-luz: rgba(255,243,211,.36);
  --vitela-borde: rgba(135,87,39,.48);
  --borde-suave: rgba(132,84,35,.48);
  --boton-suave: rgba(245,221,174,.78);
  --boton-icono: rgba(246,221,170,.62);
  --boton-icono-luz: rgba(255,246,213,.28);
  --campo: rgba(250,232,194,.74);
  --ficha: rgba(244,220,173,.75);
  --contador: rgba(233,199,134,.75);
  --hueco: rgba(235,204,146,.64);
  --modal-fondo: #edd29b;
  --fila: rgba(249,228,184,.66);
  --fila-activa: rgba(216,174,104,.62);
  --reja: rgba(130,81,35,.3);
  --estante: rgba(242,216,164,.64);
  --formato: linear-gradient(100deg, rgba(208,163,93,.7), rgba(235,204,145,.72));
  --formato-luz: rgba(255,241,205,.38);
  --formato-detalle: #76583a;
  --promo: rgba(230,196,133,.72);
  /* La carta de la línea temporal es papel en los dos temas: es un objeto de la mesa,
     no una superficie de la interfaz, igual que la carta de la mano es cuero oscuro de
     día y de noche. Por eso su tinta tampoco cambia. */
  --carta-tinta: #3b2816;
  /* La segunda tinta de esa misma carta: el dato (año, peso, distancia...) impreso en
     rojo para separarlo del título de un vistazo. Fijo por el mismo motivo que
     `--carta-tinta`; usar `--accent` lo volvería naranja claro de noche sobre un papel
     que no cambia. */
  --carta-dato: #9b411d;
}

html { background: #d7b778; scroll-behavior: smooth; }
body {
  font-family: Georgia, "Times New Roman", var(--font-display);
  background:
    radial-gradient(circle at 12% 16%, rgba(255,247,211,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 8%, rgba(99,53,18,.08) 0 1px, transparent 2px),
    repeating-linear-gradient(96deg, rgba(106,65,27,.025) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #f0d8a7 0%, #e7c98e 48%, #efd7a4 100%);
  background-size: 31px 31px, 43px 43px, auto, auto;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .36;
  box-shadow: inset 0 0 90px rgba(93, 55, 18, .18);
  background: radial-gradient(ellipse at center, transparent 45%, rgba(107,64,22,.08));
}

.shell { width: min(100%, 1120px); padding-bottom: max(34px, env(safe-area-inset-bottom)); }
.topbar {
  min-height: 52px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(132,87,38,.26);
}
.brand { font-family: var(--font-display); font-size: .92rem; letter-spacing: .19em; color: var(--ink); }
.icon-btn {
  border-color: rgba(128,81,34,.42);
  border-radius: 7px;
  color: var(--ink);
  background: var(--boton-icono);
  box-shadow: inset 0 0 0 1px var(--boton-icono-luz);
}

.home-shell { max-width: 980px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.home-shell .topbar { border-bottom: 0; margin-bottom: 0; }
.home-shell .brand { visibility: hidden; }
.home-masthead { max-width: 540px; margin: -12px auto 32px; text-align: center; }
.home-crest {
  position: relative;
  width: clamp(250px, 78vw, 390px);
  aspect-ratio: 800 / 533;
  margin: 0 auto -4px;
}
.home-crest::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 20% 9% 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(199,151,79,.16), transparent 70%);
  filter: blur(10px);
}
.home-crest img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .95;
  mix-blend-mode: multiply;
  filter: sepia(.1) saturate(.78) contrast(.94);
}
.home-wordmark { font: 500 clamp(2.55rem, 9vw, 4.3rem)/.9 var(--font-display); letter-spacing: -.055em; text-transform: uppercase; }
/* En Inicio el nombre funciona como el título grabado de un atlas: gana escala y una
   sombra corta de impresión, sin convertir el telón de carga en un segundo rótulo. El
   ancho y la escala tipográfica conservan el encaje en móviles estrechos. */
.home-masthead:not(.splash-masthead) .home-wordmark {
  position: relative;
  isolation: isolate;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: .04em .18em .12em;
  color: var(--ink);
  font-size: clamp(2.45rem, 11.5vw, 4.85rem);
  font-weight: 600;
  line-height: .88;
  letter-spacing: .045em;
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--paper) 88%, transparent),
    0 2px 0 color-mix(in srgb, var(--accent-dark) 30%, transparent),
    0 7px 18px color-mix(in srgb, var(--ink) 18%, transparent);
}
.home-masthead:not(.splash-masthead) .home-wordmark::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 10%;
  bottom: 0;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-dark) 28% 72%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 72%, transparent);
  opacity: .72;
}
.home-tagline { margin-top: 10px; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; }
.home-ornament { display: grid; grid-template-columns: 58px 10px 58px; align-items: center; justify-content: center; gap: 7px; margin: 27px 0 0; }
.home-ornament span { height: 1px; background: rgba(137,87,36,.58); }
.home-ornament i { width: 8px; height: 8px; border: 1px solid #a36d2d; transform: rotate(45deg); }
.home-shell .hero-copy { display: grid; gap: 24px; }

.deck-collection {
  scroll-margin-top: 15px;
  margin-top: 0;
  padding-top: 8px;
}
.home-shell .gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  height: auto;
  margin: 0;
}
.collection-entry, .collection-extra { min-width: 0; scroll-margin-top: 14px; }
.collection-entry.active { grid-column: 1 / -1; }
.home-shell .gallery-panel {
  width: 100%;
  height: 88px;
  min-height: 88px;
  flex: none;
  border: 1px solid rgba(130,81,35,.5);
  border-radius: 8px;
  box-shadow: 0 3px 9px rgba(70,39,10,.14);
  transition: height var(--motion-base) var(--ease-out), border-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.home-shell .gallery-panel.active { height: clamp(190px, 52vw, 280px); border: 2px solid var(--accent-dark); }
.home-shell .gallery-panel::after { background: linear-gradient(90deg, rgba(46,28,12,.08), rgba(36,21,8,.18) 35%, rgba(34,20,8,.77)); }
.home-shell .gallery-panel:not(.active) .panel-art { filter: sepia(.65) saturate(.65) brightness(.9); }
.home-shell .gallery-panel .panel-art img { object-position: center 43%; }
.home-shell .panel-spine { display: none; }
.home-shell .gallery-panel .panel-label,
.home-shell .gallery-panel:not(.active) .panel-label {
  left: 42%;
  right: 15px;
  bottom: auto;
  top: 50%;
  visibility: visible;
  transform: translateY(-50%);
  color: #fff0cd;
}
.home-shell .gallery-panel.active .panel-label { animation: none; }
.home-shell .gallery-panel.active .panel-label { left: 22px; right: 22px; top: auto; bottom: 22px; transform: none; }
.home-shell .panel-label strong { font-size: 1.22rem; letter-spacing: 0; }
.home-shell .panel-label small { color: #e8c990; }
.collection-decks { margin-top: 10px; padding: 18px; border: 1px solid rgba(130,81,35,.42); border-radius: 8px; background: var(--estante); }
.collection-decks h2 { max-width: none; margin-bottom: 8px; text-align: center; font-size: clamp(1.55rem, 5vw, 2rem); }
.collection-decks .lead { margin: 0 auto 14px; text-align: center; }
.games { border-color: rgba(130,81,35,.4); border-radius: 7px; background: var(--reja); }
.game-row { border-left-width: 4px; background: var(--fila); }
.game-row.active { border-left-color: var(--accent); background: var(--fila-activa); }
.game-name { font-family: var(--font-display); }

.home-nav {
  position: fixed;
  z-index: 15;
  left: 50%;
  bottom: 0;
  width: min(100%, 980px);
  min-height: 66px;
  padding: 7px 12px max(7px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  transform: translateX(-50%);
  border-top: 1px solid #a97b41;
  background: rgba(232,204,149,.94);
  box-shadow: 0 -7px 19px rgba(72,42,15,.13);
  backdrop-filter: blur(12px);
}
.home-nav button { min-height: 48px; display: grid; place-items: center; gap: 1px; border: 0; color: var(--ink); background: transparent; cursor: pointer; }
.home-nav span { font-size: 1.25rem; line-height: 1; }
.home-nav small { font-family: var(--font-display); font-size: .7rem; }
/* En móvil la marca y las acciones dejan de disputarse una sola línea. Los botones
   forman una barra compacta debajo: conservan el texto y el área táctil de 44 px,
   pero ninguna acción queda cortada ni obliga a desplazar la página. */
@media (max-width: 620px) {
  .topbar {
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding-bottom: 12px;
  }
  .topbar .brand {
    justify-content: center;
    font-size: .78rem;
    letter-spacing: .2em;
  }
  .topbar-actions {
    max-width: 100%;
    justify-content: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(128,81,34,.38);
    border-radius: 12px;
    background: rgba(238,207,148,.58);
    box-shadow: inset 0 1px rgba(255,246,213,.45), 0 4px 12px rgba(75,43,15,.1);
  }
  .topbar-actions .icon-btn {
    min-width: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    white-space: nowrap;
    background: transparent;
    box-shadow: none;
    font-size: .78rem;
  }
  .topbar-actions .icon-btn:active { background: rgba(126,75,30,.12); }
  .topbar-actions .icon-btn:focus-visible {
    background: rgba(255,239,201,.5);
    outline-offset: -2px;
  }
  .home-shell .brand { display: none; }
  .home-shell .topbar {
    width: 100%;
    margin: 4px 0 26px;
    padding-bottom: 0;
  }
  .home-shell .topbar-actions {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 280px);
    gap: 0;
    padding: 4px;
  }
  .home-shell .topbar-actions::after {
    content: "";
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 50%;
    width: 1px;
    background: rgba(128,81,34,.3);
  }
  .home-shell .topbar-actions .icon-btn {
    width: 100%;
    padding-inline: 14px;
  }
  .home-shell .home-masthead { margin-top: 0; }
}

/* El mismo vocabulario llega a las partidas, los formularios y los resultados. */
.panel, .modal, .reveal, .room-code-card {
  border-color: var(--vitela-borde);
  border-radius: 9px;
  background: var(--vitela);
  box-shadow: inset 0 0 0 1px var(--vitela-luz), var(--shadow-soft);
}
.room-code-card { color: var(--ink); }
.room-code-card small { color: var(--muted); }
.btn { border-radius: 7px; font-family: var(--font-display); font-size: .96rem; }
.btn-primary { background: linear-gradient(110deg, #9e451f, #813112); }
.btn-secondary { border-color: var(--borde-suave); background: var(--boton-suave); }
.field input, .field select { border-color: var(--borde-suave); border-radius: 6px; background-color: var(--campo); }
.eyebrow { color: var(--accent-dark); font-family: var(--font-display); }
.game-head { padding-bottom: 12px; border-bottom: 1px solid rgba(132,84,35,.36); }
.turn-label { color: var(--accent-dark); font-family: var(--font-display); }
.deck-count { border-color: var(--borde-suave); border-radius: 50%; background: var(--contador); }
.turn-timer { border-color: var(--borde-suave); border-radius: 50%; background: var(--contador); }
.turn-timer-low { border-color: #d33; }
.score { border-color: var(--borde-suave); background: var(--ficha); }
.timeline-card {
  border-color: #b89563;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(246,236,212,.96), rgba(236,220,188,.9));
  box-shadow: 0 5px 11px rgba(73,42,14,.18);
}
.card-visual { filter: sepia(.25) saturate(.72); }
.timeline-card { color: var(--carta-tinta); }
.timeline-card .year { color: var(--carta-tinta); font-family: var(--font-display); }
.reveal .year { color: var(--ink); font-family: var(--font-display); }
/* La carta en la mano es siempre un reverso: el cuero repujado con su doble filete de
   oro, y en el centro el emblema de la colección. Antes había aquí un aro dorado suelto
   en el centro de la carta; ahora el aro viene dentro del propio emblema, que es quien
   ocupa ese sitio, y así los dos círculos no compiten. */
.hand-card {
  min-height: 210px;
  border-color: #9b6d35;
  border-radius: 8px;
  color: #f4dca8;
  background:
    radial-gradient(circle at 50% 42%, rgba(221,178,104,.14) 0 19%, transparent 20%),
    linear-gradient(135deg, #4d3320, #24180e 58%, #5b3b20);
  box-shadow:
    inset 0 0 0 3px #2b1b0f,
    inset 0 0 0 5px rgba(190,134,57,.38),
    inset 0 0 28px rgba(9,5,2,.28),
    0 6px 13px rgba(55,31,12,.25);
}
.hand-card .hidden-date, .hand-card .card-arrow { color: #d3a960; }
.hand-card strong { max-width: none; font-size: 1.28rem; overflow-wrap: anywhere; }
/* El emblema ocupa la franja libre que queda entre el rótulo del dato oculto y el
   título, y crece o mengua con ella: vale igual para la carta grande del solitario y
   para la mano apretada de una sala en un móvil estrecho, sin medidas por pantalla. */
.carta-reverso {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 10px;
  padding-block: 10px;
  border-block: 1px solid rgba(211,169,96,.25);
  pointer-events: none;
  /* La tinta de la colección en curso, siempre tirando al oro de la carta: cada mazo
     tiene su reverso sin salirse de la paleta de la edición. */
  color: color-mix(in srgb, var(--scene-wash, #bda27a) 70%, #d3a960);
  opacity: .72;
}
.reverso-emblema { display: block; width: min(92%, 155px); height: auto; max-height: 100%; filter: drop-shadow(0 3px 4px rgba(17,8,2,.42)); }
.hand-card.selected {
  border-color: #ffe1a0;
  outline: 3px solid #a66123;
  outline-offset: 2px;
  box-shadow: inset 0 0 0 3px #ffe1a0, 0 5px 16px rgba(55,31,12,.4);
}
.hand-card.selected::before {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid #ffe1a0;
  font: 800 19px/1 system-ui, sans-serif;
  box-shadow: 0 1px 5px #24180e80;
}
.timeline-zoom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.timeline-zoom > span { margin-right: auto; font-size: .75rem; color: var(--muted); }
.timeline-zoom button { min-width: 44px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 1rem; }
.timeline-zoom button[data-timeline-zoom="reset"] { font-size: .72rem; }
.timeline-zoom button:disabled { opacity: .4; }
.timeline-zoom output { min-width: 3ch; font-size: .75rem; text-align: center; }
.timeline-wrap { overflow-anchor: none; }
/* Reserva el tamaño pintado, sin dejar una cola de scroll al alejar. La tira
   mantiene una maquetación al 100%; imagen, texto y borde se escalan juntos. */
.timeline-scale-frame { position: relative; flex: none; margin-inline: auto; overflow: hidden; overflow: clip; overflow-clip-margin: 8px; }
.timeline-scale-frame > .timeline { position: absolute; top: 0; left: 0; width: max-content; transform-origin: top left; }

.timeline .slot { min-width: calc(44px / var(--timeline-scale, 1)); }
@media (pointer: coarse) { .hand-card { cursor: pointer; } }

/* Las láminas: la carta colocada las enseña —ahí el valor ya está a la vista y no hay
   nada que adivinar— y la enciclopedia las guarda. En la mano no aparece ninguna. */
.animal-card-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: sepia(.25) saturate(.82) contrast(1.04);
}
.animal-timeline-card .card-visual {
  height: 150px;
  padding: 0;
  overflow: hidden;
  background: #c9a66b;
}
.animal-timeline-card .animal-card-art {
  object-fit: cover;
  object-position: center 48%;
}
/* La ilustración ya no lleva el texto encima: la temática va en una franja
   propia arriba, la imagen queda limpia en medio y el resultado se ancla al
   fondo del todo, así un título largo nunca tapa el dibujo. */
/* Sin `border: 0` ni fondo propio: al no cubrir la imagen toda la carta, esta vuelve
   a ser la misma ficha de papel enmarcada que el resto de la línea. `isolation` deja
   dentro de la carta la mezcla de la lámina (ver `mix-blend-mode` más abajo). */
.timeline .animal-timeline-card {
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
/* El sello de temática también es parte del papel: colores fijos, no los del tema,
   porque el fondo de la carta es el mismo de día y de noche. */
/* En la carta de la línea el sello dispone de 130 px en un móvil estrecho, y el rótulo
   más largo del juego es «Videojuegos»: se aprieta un punto la letra y se prohíbe partir
   palabras, que es lo que dejaba un «VIDEOJUEG / OS» a media carta. */
.timeline .animal-timeline-card .card-category {
  flex: none;
  margin: 8px 8px 0;
  padding: 2px 7px;
  border: 1px solid rgba(59,40,22,.22);
  background: #f4ddb0;
  color: rgba(59,40,22,.78);
  font-size: .54rem;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow-wrap: normal;
}
/* La lámina no va enmarcada ni pegada encima: va estampada en el papel. Sin filete ni
   sombra —un borde alrededor la delataba como fotografía—, y sin fondo propio, para que
   la tinta se mezcle directamente con la ficha.

   El panel toma la proporción de las propias láminas —todas son 512x768—, así `cover`
   las encaja enteras: ni se recorta la escena ni quedan franjas a los lados. Se expresa
   como `aspect-ratio` y no como alto fijo para que acompañe al ancho de la carta, que
   cambia entre móvil y escritorio. */
.timeline .animal-timeline-card .card-visual {
  flex: none;
  position: static;
  width: auto;
  height: auto;
  aspect-ratio: 2 / 3;
  margin: 6px 8px 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
}
/* Los tres gestos que la vuelven estampada y no pegada:
   - `multiply` funde el blanco del grabado con el papel, así comparten fondo;
   - el sepia iguala la tinta fría del original con el tostado de la ficha;
   - la máscara disuelve el pie de la lámina en el papel, para que la escena no termine
     en un canto recto justo encima del título. */
.timeline .animal-timeline-card .animal-card-art {
  mix-blend-mode: multiply;
  filter: sepia(.42) saturate(.8) contrast(1.02);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.timeline .animal-timeline-card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: static;
  padding: 10px 12px 12px;
  background: none;
}
/* El resultado no va en una etiqueta pegada encima: va impreso en el propio papel,
   en tinta roja para que destaque del título, cerrando la carta por abajo. El
   `margin-top: auto` lo empuja al fondo aunque el título ocupe una o cuatro líneas. */
.timeline .animal-timeline-card .year {
  display: block;
  margin: auto 0 0;
  padding: 7px 0 0;
  border: 0;
  border-top: 1px solid rgba(59,40,22,.16);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--carta-dato);
}
.timeline .animal-timeline-card h3 { margin: 0; }
.timeline .animal-timeline-card p { display: none; margin: 6px 0 0; }
.timeline .animal-timeline-card.card-flippable.is-flipped .card-content h3 { display: none; }
.timeline .animal-timeline-card.card-flippable.is-flipped .card-content p { display: block; }
.review-grid .animal-timeline-card .card-visual { height: 110px; }
@media (max-width: 620px) {
  .hand-card { min-height: 190px; }
  .timeline .animal-timeline-card { min-height: 172px; }
}
/* El hueco se dibuja solo con el contorno discontinuo de su interior: rellenarlo ponía
   una lámina dorada entre carta y carta que competía con las propias cartas. */
.slot { border-color: #9c6c35; border-radius: 8px; }
.slot-confirm { border-color: #9c6c35; border-radius: 8px; background: var(--hueco); }
.overlay { background: rgba(47,29,14,.68); backdrop-filter: blur(6px) sepia(.2); }
.modal { background: var(--modal-fondo); }
.toast { border: 1px solid #c08a47; border-radius: 7px; background: #3d2815; color: #f7dfaa; }

@media (min-width: 700px) {
  .home-masthead { margin-top: 4px; }
  .home-shell .gallery { grid-template-columns: 1fr; }
  .home-shell .gallery-panel.active { height: 300px; }
}

/* Oscuro conserva el lenguaje del atlas y el pergamino, convertido en cuero entintado:
   marfil cálido para lectura, latón para jerarquía y capas de nogal que distinguen la
   mesa, los campos, los modales y la navegación sin depender de negro puro. */
:root[data-theme="dark"] {
  color-scheme: dark;
  background: #100b07;
  --ink: #f3e4c5;
  --muted: #cbb68d;
  --line: #80613a;
  --paper: #18110b;
  --surface: rgba(43,30,18,.96);
  --accent: #dc8250;
  --accent-dark: #f2b078;
  --accent-soft: #5b351b;
  --teal: #80c4c2;
  --green: #8bc195;
  --ink-solid: #c36032;
  --ink-solid-contrast: #fff5df;
  --shadow: 0 16px 38px rgba(0,0,0,.48);
  --shadow-soft: 0 5px 16px rgba(0,0,0,.34);
  /* Las cartas de la línea y de la mano son objetos físicos y conservan su papel. */
  --vitela: rgba(46,31,18,.97);
  --vitela-luz: rgba(255,226,170,.08);
  --vitela-borde: rgba(194,148,84,.48);
  --borde-suave: rgba(173,128,70,.5);
  --boton-suave: rgba(61,42,24,.94);
  --boton-icono: rgba(55,37,21,.94);
  --boton-icono-luz: rgba(255,228,172,.08);
  --campo: rgba(27,18,11,.96);
  --ficha: rgba(55,37,22,.94);
  --contador: rgba(58,39,22,.96);
  --hueco: rgba(39,26,15,.88);
  --modal-fondo: #25180e;
  --fila: rgba(48,32,19,.96);
  --fila-activa: rgba(82,55,29,.96);
  --reja: rgba(151,109,57,.42);
  --estante: rgba(35,23,14,.9);
  --formato: linear-gradient(100deg, rgba(67,46,27,.96), rgba(42,28,17,.98));
  --formato-luz: rgba(255,228,172,.09);
  --formato-detalle: #cbb68d;
  --promo: rgba(54,36,21,.96);
}
:root[data-theme="dark"] body { background: radial-gradient(circle at 50% -10%, #3b2817, #18110b 58%, #100b07 100%); }
:root[data-theme="dark"] .home-nav { background: rgba(35,23,14,.98); border-color: #80613a; }

.system-notice { position:relative; z-index:10000; display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; border:2px solid var(--accent); background:var(--modal-fondo); color:var(--ink); }
.system-notice span { flex:1 1 240px; }
#system-notices { position:fixed; inset:auto 0 0; z-index:10000; max-height:42dvh; overflow:auto; padding-bottom:env(safe-area-inset-bottom); }

.quick-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:20px auto; }
.room-connection { padding:10px; border:1px solid currentColor; border-radius:12px; margin-block:10px; font-family:system-ui,sans-serif; }

/* Tablero compacto; las explicaciones siguen disponibles a tamaño de lectura. */
#app:is([data-screen="game"], [data-screen="solo"], [data-screen="online-game"], [data-screen="quick-game"]) .topbar { padding-block:8px; margin-bottom:10px; }
#app:is([data-screen="game"], [data-screen="solo"], [data-screen="online-game"], [data-screen="quick-game"]) .turn-name { font-size:clamp(1.25rem,5vw,1.8rem); }
.rules p, .rules li, .reveal p, .hint, .art-modal { font-family:system-ui,sans-serif; line-height:1.5; }
.art-modal img { display:block; width:100%; max-height:65dvh; object-fit:contain; margin-block:12px; }
.modal { overflow-wrap:anywhere; }
.modal a, .rules a { color:var(--accent-dark); }
.modal input[type="file"], .modal textarea { width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
.modal textarea { color:var(--ink); background:var(--campo); border:1px solid var(--line); padding:10px; border-radius:8px; font:inherit; }
@media (max-width:600px) {
  #app:is([data-screen="game"], [data-screen="solo"], [data-screen="online-game"], [data-screen="quick-game"]) .shell { padding-inline:12px; }
  .timeline .animal-timeline-card { width:146px; min-height:210px; }
  .timeline .animal-timeline-card .card-visual { height:128px; }
  .hand-card { min-width:136px; min-height:170px; }
  .hand-card strong { font-size:1rem; }
  .game-head { gap:8px; margin-bottom:10px; }
  .icon-btn, .btn, .remove { min-height:44px; }
  input, select, textarea { font-size:max(1rem,16px); }
  .modal { max-height:calc(100dvh - 32px); overflow-y:auto; }
}
@media (prefers-reduced-motion:reduce) { html.splash-active #app-splash { animation:none; display:none; } }

/* Reflujo del texto ampliado: las acciones conservan su tamaño y siguen accesibles. */
:root[data-text-size="200"] .home-wordmark { font-size: min(4.85rem, 13vw); }
:root[data-text-size="150"] .home-wordmark { font-size: min(4.85rem, 13vw); }
@media (max-width: 480px) {
  .settings-modal { padding: 16px; }
  .settings-modal .opt-row { gap: 8px; }
  :root[data-text-size="200"] .hand { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  :root[data-text-size="150"] .home-nav,
  :root[data-text-size="200"] .home-nav {
    position: static; transform: none; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 24px; width: 100%; border-radius: 12px;
  }
}
.home-shell .hero-copy { grid-template-columns: minmax(0, 1fr); }


.turn-change-splash { z-index: 80; background: rgba(35, 23, 12, .78); backdrop-filter: blur(7px) sepia(.16); animation: turn-splash-in 180ms ease-out both; }
.turn-change-card { width: min(420px, calc(100% - 32px)); padding: 30px 24px; text-align: center; }
.turn-change-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 1.7rem; }
.turn-change-card h2 { margin: 8px 0 10px; font-size: clamp(1.8rem, 8vw, 2.6rem); }
.turn-change-card p { margin: 0; font-size: 1.05rem; }
.turn-change-card strong { color: var(--accent-dark); }
@keyframes turn-splash-in { from { opacity: 0; } to { opacity: 1; } }


/* Mesa móvil: controles en una fila, nombres sin alturas artificiales.
   Se adapta al ancho disponible, no a la marca del teléfono. */
@media (max-width: 600px) {
  #app[data-screen="online-game"] { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  #app[data-screen="online-game"] .shell { padding: max(4px, env(safe-area-inset-top)) 10px max(16px, env(safe-area-inset-bottom)); }
  #app[data-screen="online-game"] .topbar { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; padding: 0 0 4px; margin: 0 0 6px; min-height: 0; }
  #app[data-screen="online-game"] .brand { min-height: 0; font-size: .68rem; letter-spacing: .08em; }
  #app[data-screen="online-game"] .topbar-actions { flex-wrap: nowrap; gap: 0; padding: 0; margin-left: auto; }
  #app[data-screen="online-game"] .topbar-actions .icon-btn { min-height: 44px; padding: 6px 9px; font-size: .78rem; }
  #app[data-screen="online-game"] .game-head { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; margin: 0 0 6px; padding-bottom: 6px; }
  #app[data-screen="online-game"] .game-head > div:first-child { min-width: 0; }
  #app[data-screen="online-game"] .turn-name { display: block; max-width: none; max-height: none; -webkit-line-clamp: unset; font-size: 1.12rem; line-height: 1.15; overflow-wrap: anywhere; }
  #app[data-screen="online-game"] .turn-label { font-size: .6rem; line-height: 1.3; letter-spacing: .025em; white-space: normal; }
  #app[data-screen="online-game"] :is(.turn-timer, .deck-count) { min-width: 44px; width: auto; height: auto; padding: 6px; }
  #app[data-screen="online-game"] :is(.turn-timer, .deck-count) strong { font-size: 1rem; }
  #app[data-screen="online-game"] :is(.turn-timer, .deck-count) span { font-size: .55rem; }
  #app[data-screen="online-game"] .scoreboard { gap: 6px; padding: 2px 0 6px; margin-bottom: 4px; }
  #app[data-screen="online-game"] .score { padding: 5px 8px; font-size: .75rem; }
  #app[data-screen="online-game"] .score b { max-width: 14ch; white-space: normal; overflow-wrap: anywhere; }
  #app[data-screen="online-game"] .hand-title { gap: 8px; margin-bottom: 4px; }
  #app[data-screen="online-game"] .hand-title h3 { font-size: 1.12rem; line-height: 1.2; }
  #app[data-screen="online-game"] .hand-title small { flex-shrink: 0; font-size: .72rem; }
  #app[data-screen="online-game"] .timeline-wrap { margin: 4px 0 8px; padding: 2px 0 6px; }
  #app[data-screen="online-game"] .timeline { padding-block: 3px; }
}

@media (max-width: 600px) {
  /* Samsung: mostrar las cuatro cartas de la mano dentro de la primera pantalla. */
  #app[data-screen="online-game"] .hand {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  #app[data-screen="online-game"] .hand-card {
    min-width: 0;
    min-height: 104px;
    height: 104px;
    padding: 7px;
    border-radius: 10px;
  }
  #app[data-screen="online-game"] .hand-card strong {
    font-size: .72rem;
    line-height: 1.05;
  }
  #app[data-screen="online-game"] .hand-card .hidden-date {
    font-size: .55rem;
    letter-spacing: .04em;
  }
  #app[data-screen="online-game"] .hand-card .card-arrow {
    font-size: .8rem;
  }
  #app[data-screen="online-game"] :is(.turn-timer, .deck-count) {
    width: 48px;
    min-width: 48px;
    height: 48px;
    aspect-ratio: 1;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3px;
    border-radius: 50%;
  }
  #app[data-screen="online-game"] :is(.turn-timer, .deck-count) strong {
    font-size: .86rem;
    line-height: 1;
  }
  #app[data-screen="online-game"] :is(.turn-timer, .deck-count) span {
    font-size: .48rem;
    line-height: 1.1;
  }
}

/* Reducción adicional exclusiva para Android; las zonas táctiles del menú
   conservan 44 px y los indicadores mantienen ancho y alto iguales. */
@media (max-width: 600px) {
  #app[data-platform="android"][data-screen="online-game"] .turn-name { font-size: 1rem; line-height: 1.12; }
  #app[data-platform="android"][data-screen="online-game"] .hand-title h3 { font-size: 1rem; }
  #app[data-platform="android"][data-screen="online-game"] .hand-title small { font-size: .66rem; }
  #app[data-platform="android"][data-screen="online-game"] .score { font-size: .68rem; gap: 5px; padding: 4px 6px; grid-template-columns: 24px auto 20px; }
  #app[data-platform="android"][data-screen="online-game"] .score i { width: 24px; height: 24px; font-size: .56rem; }
  #app[data-platform="android"][data-screen="online-game"] .score em { width: 20px; height: 20px; }
  #app[data-platform="android"][data-screen="online-game"] :is(.turn-timer, .deck-count) { width: 44px; min-width: 44px; height: 44px; padding: 2px; }
  #app[data-platform="android"][data-screen="online-game"] :is(.turn-timer, .deck-count) strong { font-size: .8rem; }
  #app[data-platform="android"][data-screen="online-game"] .timeline .timeline-card { width: 130px; min-height: 188px; }
  #app[data-platform="android"][data-screen="online-game"] .timeline .animal-timeline-card .card-visual { height: 114px; }
  #app[data-platform="android"][data-screen="online-game"] .timeline .animal-timeline-card .card-content { padding: 8px 10px 10px; }
  #app[data-platform="android"][data-screen="online-game"] .timeline .timeline-card h3 { font-size: .76rem; line-height: 1.14; }
  #app[data-platform="android"][data-screen="online-game"] .timeline .timeline-card .year { font-size: 1.06rem; }
  #app[data-platform="android"][data-screen="online-game"] .timeline :is(.slot, .slot-confirm) { min-height: 188px; }
  #app[data-platform="android"][data-screen="online-game"] .hand { gap: 5px; }
  #app[data-platform="android"][data-screen="online-game"] .hand-card { height: 96px; min-height: 96px; padding: 6px; }
  #app[data-platform="android"][data-screen="online-game"] .hand-card strong { font-size: .7rem; line-height: 1.12; }
  #app[data-platform="android"][data-screen="online-game"] .hand-card .hidden-date { font-size: .52rem; }
  #app[data-platform="android"][data-screen="online-game"] .hint { font-size: .7rem; margin-block: 5px; }
}

/* iPhone y otros móviles: recuperar la escala visual anterior.
   Las reducciones compactas quedan reservadas al Android detectado. */
@media (max-width: 600px) {
  #app[data-platform="other"][data-screen="online-game"] .topbar {
    flex-direction: column;
    gap: 9px;
    padding-bottom: 12px;
    margin-bottom: 10px;
  }
  #app[data-platform="other"][data-screen="online-game"] .brand {
    min-height: 44px;
    font-size: .78rem;
    letter-spacing: .2em;
  }
  #app[data-platform="other"][data-screen="online-game"] .topbar-actions {
    width: auto;
    padding: 3px;
    gap: 2px;
    margin-left: 0;
  }
  #app[data-platform="other"][data-screen="online-game"] .topbar-actions .icon-btn {
    min-height: 44px;
    padding: 9px 12px;
    font-size: .78rem;
  }
  #app[data-platform="other"][data-screen="online-game"] .game-head {
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 12px;
  }
  #app[data-platform="other"][data-screen="online-game"] .turn-name {
    max-width: none;
    max-height: none;
    font-size: clamp(1.25rem, 5vw, 1.8rem);
    line-height: 1.15;
  }
  #app[data-platform="other"][data-screen="online-game"] .turn-label {
    font-size: inherit;
    white-space: normal;
  }
  #app[data-platform="other"][data-screen="online-game"] :is(.turn-timer, .deck-count) {
    width: auto;
    min-width: 62px;
    height: auto;
    aspect-ratio: auto;
    padding: 9px 10px;
    border-radius: 50%;
  }
  #app[data-platform="other"][data-screen="online-game"] :is(.turn-timer, .deck-count) strong {
    font-size: 1.2rem;
  }
  #app[data-platform="other"][data-screen="online-game"] :is(.turn-timer, .deck-count) span {
    font-size: .62rem;
  }
  #app[data-platform="other"][data-screen="online-game"] .hand-card {
    min-height: 170px;
    height: auto;
    padding: 14px;
  }
  #app[data-platform="other"][data-screen="online-game"] .hand-card strong {
    font-size: 1rem;
  }
  #app[data-platform="other"][data-screen="online-game"] .hand-card .hidden-date {
    font-size: inherit;
  }
  #app[data-platform="other"][data-screen="online-game"] .hand-title h3 {
    font-size: inherit;
  }
  #app[data-platform="other"][data-screen="online-game"] .timeline-wrap {
    margin: 10px 0 22px;
    padding: 8px 0 18px;
  }
}

/* La imagen ocupa el panel completo también cuando su altura sale de aspect-ratio. */
.timeline .animal-timeline-card .card-visual { position: relative; width: calc(100% - 16px); }
.timeline .animal-timeline-card .card-visual > .animal-card-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; }

/* El acierto se ve en el tablero antes del resultado; no cambia el layout. */
.overlay.result-preview { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.overlay.result-preview > .modal { visibility: hidden; pointer-events: none; }

/* Una carta encuentra su lugar y deja una estela de pan de oro en el borde. */
.card-fitting { position: relative; z-index: 2; }
.card-fitting::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 3px; pointer-events: none; background: conic-gradient(from var(--fit-angle), transparent 55%, #dca643 77%, #fff0ad 85%, transparent 96%); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; animation: fitting-gold 480ms 400ms ease-out both; }
@property --fit-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes fitting-gold { 0% { --fit-angle: -90deg; opacity: 0; } 35% { opacity: 1; } 85% { opacity: 1; } 100% { --fit-angle: 270deg; opacity: 0; } }
.date-ink { transform-origin: center; animation: date-ink-stamp 650ms 160ms both; }
@keyframes date-ink-stamp { 0% { opacity: 0; filter: blur(5px); clip-path: inset(0 100% 0 0); transform: scale(1.12); } 65% { opacity: .8; filter: blur(.5px); clip-path: inset(0); transform: scale(1.06); } 82% { opacity: 1; filter: blur(0); transform: scale(.97); } 100% { clip-path: inset(0); transform: scale(1); } }
.atlas-final-page { position: relative; overflow: hidden; border: 1px solid #c9ae77; background: radial-gradient(ellipse at 50% 0, #fff9e9, transparent 70%), repeating-linear-gradient(0deg, #98764605 0 1px, transparent 1px 5px), #f4ecdc; box-shadow: 0 18px 60px #48311724, inset 0 0 0 7px #fcf7eb, inset 0 0 0 8px #c9ae7755; }
.atlas-final-fan { position: relative; height: 210px; margin: 10px auto 22px; width: min(100%, 380px); }
.atlas-final-fan > .timeline-card { position: absolute; left: calc(50% - 55px); top: 18px; width: 110px; min-width: 110px; height: 166px; min-height: 0; overflow: hidden; font-size: 8px; transform-origin: center 145%; transform: translateX(var(--fan-x)) rotate(var(--fan-angle)); box-shadow: 0 7px 15px #33210e33; animation: atlas-gather 950ms cubic-bezier(.2,.7,.2,1) both; }
.atlas-final-fan .card-visual { height: 100px; min-height: 100px; }
.atlas-final-fan .card-visual img { width: 100%; height: 100%; object-fit: cover; }
.atlas-final-fan .card-content { padding: 5px; }
.atlas-final-fan h3, .atlas-final-fan .year { font-size: 10px; line-height: 1.1; }
.atlas-final-page > :not(.atlas-final-fan) { animation: atlas-result-ink 650ms 650ms both; }
.atlas-final-page .logro-chip { border: 1px solid #b88c42; background: #e4c87626; }
@keyframes atlas-gather { from { opacity: 0; transform: translate(var(--fan-start), -120px) rotate(0deg) scale(.8); } to { opacity: 1; transform: translateX(var(--fan-x)) rotate(var(--fan-angle)); } }
@keyframes atlas-result-ink { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .card-fitting::after, .date-ink, .atlas-final-fan > .timeline-card, .atlas-final-page > :not(.atlas-final-fan) { animation: none !important; } }
/* La página final mantiene una jerarquía compacta incluso con resultados largos. */
#app .panel.atlas-final-page { background: radial-gradient(ellipse at 50% 0, #fff9e9, transparent 70%), repeating-linear-gradient(0deg, #98764605 0 1px, transparent 1px 5px), #f4ecdc; border-color: #c9ae77; box-shadow: 0 18px 60px #48311724, inset 0 0 0 7px #fcf7eb, inset 0 0 0 8px #c9ae7755; }
#app .atlas-final-page h1 { font-size: clamp(1.65rem, 7vw, 2.4rem) !important; line-height: 1.18; max-width: 21ch; margin: 12px auto 22px; }
#app .atlas-final-fan > .timeline-card { background: #efe1c1; }
#app .atlas-final-fan h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* El sello aparece al posar la carta, después del vuelo. */
.card-fitting .date-ink { animation-duration: 380ms; animation-delay: 520ms; }
/* Duelo por turnos */
.turn-duel-profile { margin-block: 1.25rem; }
.turn-duel-profile h2 { margin-top: 0; }
.turn-duel-screen { width: 100%; min-width: 0; max-width: 64rem; margin-inline: auto; text-align: left; }
.turn-duel-profile-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.turn-duel-profile-row small { color: var(--muted); font-size: .72rem; font-weight: 400; }
.turn-duel-profile summary { padding: 14px 0; cursor: pointer; }
.turn-duel-share { display: grid; gap: .65rem; margin: 1.4rem 0; padding: 1.2rem; border: 1px solid var(--edition-brass, #9b6b2f); border-radius: 14px; text-align: left; }
.turn-duel-share-icon { font-size: 2rem; }
.turn-duel-share code { display: block; overflow-wrap: anywhere; padding: .65rem; background: rgba(0,0,0,.05); font-size: .75rem; }

/* The board owns its horizontal scroll; no intrinsic card width reaches the page. */
.turn-duel-shell { min-width: 0; overflow-anchor: none; }
.turn-duel-screen > * { min-width: 0; max-width: 100%; }
.turn-duel-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.turn-duel-nav > span { flex: 1; min-width: 0; font: 700 .9rem var(--font-display); letter-spacing: .1em; }
.turn-duel-nav .turn-duel-back { flex: none; }
.turn-duel-nav small { display: block; font: 400 .7rem/1.5 system-ui; letter-spacing: 0; color: var(--muted); }
.turn-duel-nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.turn-duel-nav .btn { flex: none; min-height: 44px; padding: 8px 14px; }
.turn-duel-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 14px; }
.turn-duel-heading h1 { font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.12; margin: 5px 0; overflow-wrap: anywhere; }
.turn-duel-heading p { margin: 6px 0 0; font-size: .78rem; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.turn-duel-heading .eyebrow { font-size: .65rem; }
.turn-duel-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.turn-duel-player { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; min-height: 72px; padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent)); border-radius: 17px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, white), var(--surface)); box-shadow: 0 5px 14px rgb(74 45 24 / 7%); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.turn-duel-player::after { content: ''; position: absolute; inset: auto 12px 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.turn-duel-player.is-active { border-color: color-mix(in srgb, var(--accent) 72%, var(--line)); box-shadow: 0 7px 18px rgb(74 45 24 / 12%), 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-1px); }
.turn-duel-player.is-active::after { background: var(--accent); }
.turn-duel-player.is-you { background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 88%, var(--accent)), var(--surface)); }
.turn-duel-avatar { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 50%; color: var(--accent-dark, var(--accent)); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); font: 600 1rem/1 var(--font-display); }
.turn-duel-player-info { display: grid; gap: 3px; min-width: 0; }
.turn-duel-player-info strong { min-width: 0; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.2; }
.turn-duel-player-info small, .turn-duel-score small { display: block; color: var(--muted); font-size: .62rem; font-weight: 400; }
.turn-duel-score { min-width: 36px; text-align: right; }
.turn-duel-score b { display: block; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.turn-duel-turn-badge { position: absolute; top: 7px; right: 9px; padding: 2px 6px; border-radius: 99px; color: var(--accent-dark, var(--accent)); background: color-mix(in srgb, var(--accent) 15%, transparent); font-size: .55rem; letter-spacing: .04em; text-transform: uppercase; }
.turn-duel-board { width: 100%; min-width: 0; }
.turn-duel-board .timeline-wrap { width: 100%; max-width: 100%; min-width: 0; margin: 4px 0 0; padding: 8px 2px 12px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.turn-duel-board .timeline { gap: 6px; }
.turn-duel-board .timeline > * { flex-shrink: 0; }
.turn-duel-board .timeline-card { width: 146px; min-height: 210px; }
.turn-duel-board .animal-timeline-card .card-visual { height: 124px; }
.turn-duel-board .timeline :is(.slot, .slot-confirm) { min-height: 210px; }
.turn-duel-board .slot-confirm { width: 132px; margin-inline: 0; }
.turn-duel-board .hand-title, .turn-duel-hand .hand-title { margin-block: 10px 4px; }
.turn-duel-board .hand-title h3 { font-size: .95rem; }
.turn-duel-board .timeline-zoom { margin: 0; justify-content: flex-end; }
.turn-duel-board .hint { margin: 4px 0 12px; font-size: .7rem; }
.turn-duel-hand { border-top: 1px solid var(--line); padding-top: 4px; }
.turn-duel-hand .hand { margin-block: 8px; }
.turn-duel-status { padding: 10px 14px; border-left: 2px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; font-size: .8rem; line-height: 1.5; }
.turn-duel-answer { display: grid; gap: 12px; max-width: 32rem; margin: 20px auto; }
.turn-duel-answer label { font-size: .8rem; }
.turn-duel-answer input { width: 100%; min-width: 0; min-height: 48px; font-size: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); }
.turn-duel-share { max-width: 30rem; margin: 24px auto; }
.turn-duel-share h2, .turn-duel-share p { margin: 0; }
.turn-duel-share p { color: var(--muted); font-size: .85rem; line-height: 1.6; }
.turn-duel-share details { min-width: 0; font-size: .75rem; }
.turn-duel-share summary { cursor: pointer; padding-block: 12px; min-height: 44px; }
@media (max-width: 620px) {
  .turn-duel-shell { padding-inline: max(12px, env(safe-area-inset-left)); }
  .turn-duel-hand .hand-card { max-width: 190px; }
}
@media (max-width: 380px) {
  .turn-duel-player { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 7px; padding-inline: 9px; }
  .turn-duel-avatar { width: 32px; height: 32px; font-size: .85rem; }
  .turn-duel-player-info strong { font-size: .74rem; }
}
/* Asynchronous duels: compact, wrapping summaries and rival controls. */
.turn-duel-last{padding:12px 16px;border:1px solid var(--line,#d5c5a7);border-radius:16px;background:rgba(255,255,255,.28);overflow-wrap:anywhere}
.turn-duel-last p{margin:5px 0;font-size:.9rem}
.turn-duel-last small{opacity:.75}
.turn-duel-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.turn-duel-actions .btn{min-width:0;white-space:normal}
.turn-duel-rival{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line,#d5c5a7);min-width:0}
.turn-duel-rival>span{flex:1;min-width:0;overflow-wrap:anywhere}
.turn-duel-rival small{display:block;font-size:.75rem;opacity:.7}
.turn-duel-rival>.btn{flex-shrink:0;padding:8px 10px}
.turn-duel-solution{margin:12px 0;min-width:0;overflow-wrap:anywhere}
.turn-duel-solution summary{cursor:pointer;min-height:44px;padding:12px;font-size:.85rem}
.turn-duel-result{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px;text-align:center;max-width:36rem;margin:auto}
.turn-duel-result .result-mark{font-size:1.5rem;margin:0}
.turn-duel-result h2{font-size:1.2rem}
.turn-duel-result .reveal .year{font-size:clamp(1.35rem,5vw,2rem);overflow-wrap:anywhere}
.turn-duel-row-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:13rem}
.turn-duel-row-actions .btn{white-space:normal;font-size:.75rem;padding:8px}
.turn-duel-profile-row{min-width:0}
.turn-duel-profile-row>button{display:grid;gap:5px;text-align:left;min-width:0;overflow-wrap:anywhere}
@media(max-width:420px){.turn-duel-profile-row{grid-template-columns:minmax(0,1fr)}.turn-duel-rival{flex-wrap:wrap}.turn-duel-row-actions{max-width:none;width:100%}}

/* Interruptor de música: un solo nodo (vive fuera de #app para conservar sus escuchas
   entre repintados) que cada cabecera aloja en su propio hueco [data-sound-slot]. No
   flota ni se posiciona a mano: es un elemento más del reparto flex/grid de esa
   cabecera, así que nunca puede quedar encima de otro botón. */
.ambience-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface);
  opacity: .38;
  cursor: pointer;
  transition: opacity 160ms ease, color 160ms ease, transform 120ms ease;
}
.ambience-toggle svg { width: 16px; height: 16px; overflow: visible; }
.ambience-toggle path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ambience-toggle .sound-speaker { fill: currentColor; stroke: none; }
.ambience-toggle .sound-muted { display: none; }
.ambience-toggle[data-enabled="false"] .sound-waves { display: none; }
.ambience-toggle[data-enabled="false"] .sound-muted { display: block; }
.ambience-toggle:focus-visible, .ambience-toggle:active { opacity: 1; }
.ambience-toggle:active { transform: scale(.92); }
@media (hover: hover) { .ambience-toggle:hover { opacity: 1; } }
.ambience-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Mientras dura el telón, el interruptor todavía no tiene hueco donde vivir (#app sigue
   vacío): se queda oculto en vez de aparecer suelto al final de la página. */
html.splash-active .ambience-toggle { display: none; }
/* La cabecera común de cada pantalla (#app .atlas-topbar-actions), la de las salas de
   varios móviles (#app .topbar-actions) y la del duelo por turnos
   (#app .turn-duel-nav-actions) son las que reparten este hueco; ver edition.css. */

/* Mesa pública: estado arriba, jugadores y minijuego debajo (ver renderPublicLobby). */
.public-lobby { display: grid; gap: 14px; }
.public-lobby-head h2 { margin: 6px 0 2px; font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.05; }
.public-lobby-head .hint { margin: 0; }
.public-status { text-align: center; padding: 18px 16px; }
.public-status-title { font-family: var(--font-display, inherit); font-size: 1.25rem; font-weight: 700; }
.public-status p { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }
.public-clock { display: inline-block; min-width: 3.2ch; font-variant-numeric: tabular-nums; color: var(--accent); }
.public-clock.is-low { animation: turn-timer-pulse 1s ease-in-out infinite; }
.public-dots::after { content: "…"; display: inline-block; width: 1.2em; text-align: left; animation: public-dots 1.4s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes public-dots { from { width: 0; } to { width: 1.2em; } }
.public-seats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.public-seat { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.public-seat.is-you { border-color: var(--accent); }
.public-seat.is-empty { border-style: dashed; background: transparent; color: var(--muted); }
.public-seat-avatar { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 1.2rem; }
.public-seat.is-empty .public-seat-avatar { border: 1px dashed var(--line); }
.public-seat-copy { display: grid; min-width: 0; }
.public-seat-copy b { overflow-wrap: anywhere; line-height: 1.2; }
.public-seat-copy small { color: var(--muted); font-size: .78rem; }
.public-seat.is-done small { color: #2f7d4f; }
.public-seat.is-silent small { color: #b3402f; }
.public-you { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-left: 4px; }
.public-answered { margin: 10px 0 0; text-align: center; }
.public-leave { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .public-dots::after, .public-clock.is-low { animation: none; } }

/* Los campos que se esconden según el ritmo (la prueba y los mazos en directo): su
   `display` propio no debe ganar al atributo `hidden`. */
.duel-kind-field[hidden] { display: none; }