/* La edición de la interfaz. Sus variables son independientes de las cartas:
   no sustituir --paper, --surface, --ink ni las tintas de los mazos. */
:root {
  --edition-paper: #f3eee4;
  --edition-surface: #fcfaf5;
  --edition-ink: #302d27;
  --edition-muted: #70695d;
  --edition-line: #d7cbb6;
  /* Un punto más oscuro que el latón de origen (#92703c): con aquel, el lema, los
     capítulos y el resto de rótulos pequeños se quedaban en 3,9:1 sobre el papel. */
  --edition-brass: #866430;
  --edition-shade: 0 18px 45px #352a1710;
  --scene-color: #745039;
  --scene-wash: #bda27a;
  --ui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-scene="history"] { --scene-color: #834931; --scene-wash: #c29269; }
:root[data-scene="entertainment"] { --scene-color: #654256; --scene-wash: #b895a2; }
:root[data-scene="science"] { --scene-color: #285963; --scene-wash: #85afb2; }
:root[data-scene="nature"] { --scene-color: #3e5c43; --scene-wash: #9eaf85; }
:root[data-scene="globe"] { --scene-color: #365b73; --scene-wash: #90afc2; }
:root[data-scene="mixed"] { --scene-color: #6c5130; --scene-wash: #c2a466; }

/* Cuero, marfil y latón: la misma gramática del atlas con profundidad suficiente para
   separar fondo, navegación y salidas flotantes sin convertir la noche en negro plano. */
:root[data-theme="dark"] {
  --edition-paper: #18110b; --edition-surface: #2a1d11;
  --edition-ink: #f3e7cf; --edition-muted: #c8b995;
  --edition-line: #6d5435; --edition-brass: #d4bb8b;
  --edition-shade: 0 20px 48px #0008;
}
html { background: var(--edition-paper); }
html body {
  background: radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--scene-wash) 18%, transparent), transparent 55%), var(--edition-paper);
  background-size: auto;
}
/* Las circunferencias evocan un instrumento de medida. Son estáticas: no distraen
   mientras se comparan valores ni mantienen un bucle de animación en el móvil. */
html body::before {
  inset: 0; opacity: .45; box-shadow: none;
  background: radial-gradient(circle at 96% 10%, transparent 0 179px, var(--edition-line) 180px, transparent 181px 215px, var(--edition-line) 216px, transparent 217px 320px, var(--edition-line) 321px, transparent 322px);
}
:root[data-theme="dark"] body { background: radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--scene-wash) 12%, transparent), transparent 55%), var(--edition-paper); }
.shell { position: relative; }
.home-shell { max-width: 1160px; padding-inline: clamp(18px, 4vw, 48px); padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.topbar { color: var(--edition-ink); border-color: var(--edition-line); }
.brand { color: var(--edition-ink); font-size: .8rem; letter-spacing: .24em; }
.icon-btn { font-family: var(--ui-font); font-size: .875rem; border: 1px solid var(--edition-line); border-radius: 6px; background: var(--edition-surface); box-shadow: none; }
/* El atajo al inicio es un dibujo, no una palabra, así que necesita su propia caja. El
   selector lleva `.topbar-actions` delante para ganarle a la barra agrupada del móvil,
   que aprieta todos sus botones y les quita el ancho mínimo; sin eso, el atajo se queda
   estrecho justo donde más falta hace el ancho de un dedo. */
.home-shell .brand { visibility: visible; }
.home-shell .topbar { margin: 0 0 10px; border-bottom: 1px solid var(--edition-line); }
.home-masthead { color: var(--edition-ink); margin: 6px auto 24px; }
.home-crest { width: clamp(180px, 46vw, 248px); }
.home-wordmark { font-size: clamp(2.55rem, 9vw, 4rem); font-weight: 400; letter-spacing: -.045em; }
.home-tagline { color: var(--edition-brass); font-family: var(--ui-font); font-size: .75rem; letter-spacing: .2em; line-height: 1.7; }
.home-ornament { margin: 18px 0 0; }
.home-ornament span { background: var(--edition-line); }
.home-ornament i { border-color: var(--edition-brass); }
.system-notice {
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--edition-line);
  border-radius: 8px;
  background: var(--edition-surface);
  color: var(--edition-ink);
  box-shadow: var(--edition-shade);
}
.home-masthead p { color: var(--edition-muted); font-size: 1rem; }
.quick-actions { margin: 18px auto 36px; }
.quick-actions .btn-primary { min-width: min(100%, 290px); padding-block: 16px; }
.btn { font-family: var(--ui-font); font-size: .9375rem; border-radius: 6px; }
.btn-primary { color: #fff9ed; background: var(--scene-color); box-shadow: 0 5px 14px color-mix(in srgb, var(--scene-color) 18%, transparent); }
.btn-secondary, .btn-ghost { color: var(--edition-ink); }
.btn-secondary { border-color: var(--edition-line); background: var(--edition-surface); }
.btn:focus-visible, .icon-btn:focus-visible, .home-nav button:focus-visible { outline-color: var(--edition-brass); }
.home-shell .hero-copy { gap: 38px; }
.home-shell .gallery { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.home-shell .gallery-panel { height: 250px; border-radius: 8px; border: 1px solid #78634366; box-shadow: var(--edition-shade); }
.home-shell .gallery-panel::after { background: linear-gradient(180deg, #17150f40, transparent 30%, #17150f30 45%, #17150feb); }
.home-shell .gallery-panel::before { content: ""; position: absolute; z-index: 3; inset: 9px; border: 1px solid #eee0bd55; border-radius: 3px; pointer-events: none; }
.home-shell .gallery-panel .panel-label,
.home-shell .gallery-panel:not(.active) .panel-label,
.home-shell .gallery-panel.active .panel-label { top: auto; bottom: 25px; left: 25px; right: 25px; transform: none; display: block; }
.home-shell .panel-label i { display: none; }
.home-shell .panel-label strong { display: block; font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 400; line-height: 1.15; color: #fff5df; }
.home-shell .panel-label small { display: block; color: #e9dbc2; font: .8125rem/1.5 var(--ui-font); margin-top: 7px; }
.collection-index { position: absolute; z-index: 2; top: 23px; left: 25px; color: #fff5df; font: 500 .75rem/1.5 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 5px #000; }
.collection-open { position: absolute; top: 19px; right: 22px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #eee0bd88; border-radius: 50%; color: #fff5df; background: #17150f44; font: 1.1rem var(--ui-font); }
.home-shell .gallery-panel.active { height: 290px; border: 1px solid var(--edition-brass); }
.collection-decks { margin-top: 0; padding: 24px; background: var(--edition-surface); border: 1px solid var(--edition-line); border-top: 0; border-radius: 0 0 8px 8px; color: var(--edition-ink); }
.collection-decks h2 { font-weight: 400; }
.collection-decks .lead { color: var(--edition-muted); }
.collection-decks .games { border: 0; background: transparent; gap: 8px; margin-bottom: 0; }
.collection-decks .game-row { position: relative; padding: 16px 42px 16px 18px; border: 1px solid var(--edition-line); border-left: 3px solid transparent; border-radius: 4px; background: var(--edition-paper); color: var(--edition-ink); }
.collection-decks .game-row::after { content: "→"; position: absolute; right: 17px; top: 18px; color: var(--edition-brass); }
.collection-decks .game-row.active { border-left-color: var(--edition-brass); }
.collection-decks .game-name { font-size: 1.1rem; }
.collection-decks .game-meta { color: var(--edition-muted); font: .875rem/1.5 var(--ui-font); }
/* Anclada al borde inferior y a todo el ancho, no flotante: separada del borde dejaba
   ver el contenido de la página por debajo, que es justo lo que una barra fija no debe
   hacer. El relleno inferior absorbe la franja de gestos del teléfono. */
html .home-nav { bottom: 0; min-height: 66px; padding: 5px 5px calc(5px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--edition-line); border-radius: 0; background: var(--edition-surface); box-shadow: 0 -8px 32px #0002; }
html:root .home-shell .home-nav { background: color-mix(in srgb, var(--edition-surface) 94%, transparent); border-color: var(--edition-line); }
.home-nav button { gap: 4px; padding: 7px 4px; border-radius: 7px; color: var(--edition-muted); }
.home-nav small { font: .75rem/1.3 var(--ui-font); }
.home-nav button[aria-current] { color: var(--edition-ink); background: color-mix(in srgb, var(--edition-brass) 13%, transparent); }
.home-nav button[aria-current] span { color: var(--edition-brass); }
.panel, .modal, .room-code-card { background: var(--edition-surface); border-color: var(--edition-line); box-shadow: var(--edition-shade); }
.panel > h1, .panel > h2, .panel > p, .modal > h2, .modal > p, .settings-modal, .setup-section, .pass-screen { color: var(--edition-ink); }
.field input, .field select, .modal textarea, .player-row input { background-color: var(--edition-surface); border-color: var(--edition-line); color: var(--edition-ink); }
.overlay { background: #111a17a6; backdrop-filter: blur(8px); }
.modal { border-radius: 12px; }
.player-medallion { border: 1px solid var(--edition-brass); background: var(--edition-paper); color: var(--edition-brass); box-shadow: 0 0 0 7px var(--edition-surface), 0 0 0 8px var(--edition-line); }
.pass-card { padding-top: 38px; }
.pass-card .eyebrow { margin-top: 26px; }
.game-head { border-bottom-color: var(--edition-line); }
.app-version { color: var(--edition-muted); font: .75rem var(--ui-font); }
.comp-splash { position: relative; isolation: isolate; overflow: hidden; padding: 200px 28px 28px; border-color: var(--edition-line); }
.chapter-art { position: absolute; inset: 0 0 auto; height: 185px; z-index: -1; background: var(--scene-color); }
.chapter-art img { width: 100%; height: 100%; object-fit: cover; }
.chapter-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, var(--edition-surface)); }
.chapter-number { margin-bottom: 18px; color: var(--edition-brass); font: .75rem/1.5 var(--ui-font); letter-spacing: .18em; text-transform: uppercase; }
.comp-splash-lead { color: var(--edition-muted); font: .75rem/1.5 var(--ui-font); }
.comp-splash h2 { color: var(--edition-ink); font-weight: 400; }
.comp-splash-start, .comp-topic { background: var(--scene-color); color: #fff9ed; box-shadow: none; }
.comp-topic { border-radius: 6px; font-weight: 400; }

/* Un halo único confirma un acierto; el fallo mantiene su señal original. */
.success .result-mark { position: relative; isolation: isolate; }
.success .result-mark::after { content: ""; position: absolute; inset: -9px; border: 1px solid currentColor; border-radius: 50%; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .dialog-enter .success .result-mark::after { animation: edition-seal 650ms 120ms ease-out both; }
  [data-screen="winner"] .screen-enter .big-icon { animation: edition-arrive 550ms 80ms var(--ease-out) backwards; }
  .collection-entry.active .collection-decks { animation: edition-arrive 260ms var(--ease-out) both; }
}
@keyframes edition-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes edition-seal { 0% { opacity: 0; transform: scale(.8); } 35% { opacity: .5; } 100% { opacity: 0; transform: scale(1.55); } }
@media (hover: hover) and (pointer: fine) {
  .home-shell .gallery-panel:not(.active):hover { transform: translateY(-4px); box-shadow: 0 18px 30px #30261926; }
  .collection-decks .game-row:hover, .home-nav button:hover { background: color-mix(in srgb, var(--edition-brass) 12%, var(--edition-surface)); }
}
@media (min-width: 960px) {
.home-shell .gallery { grid-template-columns: minmax(0, 1fr); }
  .home-masthead { display: grid; grid-template-columns: 195px 1fr; align-items: center; column-gap: 26px; max-width: 650px; text-align: left; padding-block: 12px; }
  .home-crest { grid-row: 1 / 5; width: 195px; }
  .home-wordmark { align-self: end; font-size: 3.6rem; }
  .home-tagline { margin-top: 8px; }
  .home-ornament { justify-content: start; margin: 12px 0; }
  .home-masthead p { margin: 0; font-size: 1rem; }
  .collection-entry.active { display: grid; grid-template-columns: 1fr 1fr; }
  .home-shell .gallery-panel.active { height: 100%; min-height: 300px; border-radius: 8px 0 0 8px; }
  .collection-decks { border: 1px solid var(--edition-line); border-left: 0; border-radius: 0 8px 8px 0; }
}
@media (max-width: 620px) {
  .home-shell .topbar { align-items: center; margin: 0; border: 0; }
  .home-shell .topbar-actions { width: auto; background: transparent; border: 1px solid var(--edition-line); box-shadow: none; border-radius: 6px; }
  .topbar-actions { background: var(--edition-surface); border-color: var(--edition-line); box-shadow: none; }
  .home-shell .home-masthead { margin-top: 24px; }
  .home-shell .topbar-actions::after { background: var(--edition-line); }
  .home-shell .gallery { gap: 12px; }
  .home-shell .gallery-panel { height: 225px; }
  .home-shell .gallery-panel .panel-label, .home-shell .gallery-panel:not(.active) .panel-label { left: 16px; right: 16px; bottom: 18px; }
  .home-shell .panel-label strong { font-size: 1.2rem; }
  .home-shell .panel-entertainment .panel-label strong { font-size: 1rem; letter-spacing: -.025em; }
  .home-shell .panel-label small { font-size: .75rem; line-height: 1.4; }
  .collection-index { top: 19px; left: 16px; font-size: .6875rem; letter-spacing: .02em; }
  .collection-open { top: 41px; right: 16px; width: 25px; height: 25px; }
  .collection-decks { padding: 18px; }
  .quick-actions { margin-bottom: 28px; }
}
@media (max-width: 359px) { .home-shell .gallery { grid-template-columns: minmax(0, 1fr); } }
/* Presentación de menús para la prueba móvil de septiembre. */
#app .home-gallery-shell .topbar { justify-content: center; align-items: center; }
#app .home-gallery-shell .topbar-actions { display: flex; justify-content: center; width: auto; padding: 0; border: 0; background: transparent; }
#app .home-gallery-shell .topbar-actions::after { content: none; }
#app .home-gallery-shell .topbar-actions .icon-btn { width: auto; min-width: 100px; border: 1px solid var(--edition-line); border-radius: 9px; background: var(--edition-surface); }
#app .home-gallery-shell .home-masthead { margin-top: 24px; }
.home-shell .gallery-panel, .collection-decks .game-row {
  box-shadow: none;
}
/* Un archivo de libros: estampación metálica, capítulos y apertura escalonada.
   Sin sombras ni animación permanente; la luz responde al descubrimiento. */
.home-shell .gallery-panel { border-radius: 2px 16px 16px 2px; }
.home-shell .gallery-panel::before { border-inline-start: 3px double #eee0bd88; }
.collection-foil { position: absolute; z-index: 3; inset: 0; pointer-events: none; overflow: hidden; }
.collection-foil::after { content: ""; position: absolute; inset: -35% -65%; background: linear-gradient(115deg, transparent 40%, #fff0bc08 45%, #fff0bc60 50%, #fff0bc08 55%, transparent 60%); transform: translateX(-65%); opacity: 0; }
.home-shell .collection-open { border-radius: 0; transform: rotate(45deg); font-size: 0; background: transparent; }
.home-shell .collection-open::after { content: "+"; font-size: 1.25rem; transform: rotate(-45deg); }
.home-shell .gallery-panel.active .collection-open::after { content: "−"; }
.collection-decks .games { counter-reset: chapter; }
.collection-decks .game-row { overflow: hidden; border-radius: 0 12px 12px 0; margin-block: 10px; padding: 17px 20px 19px; border-left: 3px double var(--edition-brass); background: linear-gradient(100deg, color-mix(in srgb, var(--edition-brass) 10%, var(--edition-paper)), var(--edition-paper) 35%); }
.collection-decks .game-row::after { content: ""; position: absolute; left: 8px; right: 5px; top: auto; bottom: 2px; height: 5px; border-radius: 0 0 8px 0; background: repeating-linear-gradient(to bottom, var(--edition-surface) 0 1px, var(--edition-line) 1px 2px); opacity: .8; pointer-events: none; }
.collection-decks .game-row::before { content: ""; position: absolute; inset: 0 auto 7px 0; width: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--edition-brass) 18%, transparent), #fff2 50%, transparent); pointer-events: none; }
.collection-decks .games .game-row { border-bottom: 1px solid var(--edition-brass); background: linear-gradient(125deg, var(--edition-surface), var(--edition-paper) 65%, color-mix(in srgb, var(--edition-brass) 10%, var(--edition-paper))); box-shadow: inset 0 1px 0 #fff3, inset -1px 0 0 #fff2, inset 0 -7px 0 color-mix(in srgb, var(--edition-brass) 8%, var(--edition-paper)); transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .collection-decks .games .game-row { transition: transform 240ms cubic-bezier(.2,.7,.2,1), border-color 240ms ease; }
  .collection-decks .games .game-row:active { transform: perspective(900px) translateY(1px) rotateX(-1.5deg); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .collection-decks .games .game-row:hover:not(:active) { transform: perspective(900px) translateY(-2px) rotateX(2deg) rotateY(-1deg); border-color: var(--edition-brass); }
}
.deck-chapter { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--edition-brass); font: 500 .65rem/1.4 var(--ui-font); letter-spacing: .17em; text-transform: uppercase; }
.deck-chapter i { font-style: normal; font-size: 1.2rem; line-height: 1; }
.collection-decks .game-row .game-name { display: block; padding-top: 11px; border-top: 1px solid var(--edition-line); }
.collection-decks .game-row .game-meta { display: block; margin-top: 7px; }
@keyframes foil-reveal { 0% { opacity: 0; transform: translateX(-65%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(65%); } }
@keyframes chapter-reveal { from { opacity: 0; transform: perspective(800px) rotateY(-28deg) translateX(-12px); } to { opacity: 1; transform: perspective(800px) rotateY(0) translateX(0); } }
@media (prefers-reduced-motion: no-preference) {
  .gallery-panel.active .collection-foil::after { animation: foil-reveal 1100ms ease-out both; }
  .collection-decks .game-row { transform-origin: left center; animation: chapter-reveal 520ms cubic-bezier(.2,.7,.2,1) both; }
  .collection-decks .game-row:nth-child(2) { animation-delay: 80ms; }
  .collection-decks .game-row:nth-child(3) { animation-delay: 160ms; }
  .collection-open, .deck-chapter i { transition: transform 250ms ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery-panel:hover .collection-foil::after { animation: foil-reveal 1100ms ease-out both; }
  .collection-decks .game-row:hover .deck-chapter i { transform: translate(3px, -3px); }
}
html .home-nav button[aria-current="page"] { background: color-mix(in srgb, var(--edition-brass) 24%, var(--edition-surface)); box-shadow: inset 0 1px 3px #0002; }
#app[data-screen="perfil"] > .shell { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
.solo-home .solo-intro { margin-bottom: 14px; }
.solo-home .solo-intro .lead { font-size: .9rem; line-height: 1.45; margin-block: 8px 14px; }
.solo-home .solo-fold { padding: 0; margin-block: 12px; }
.solo-fold summary { cursor: pointer; padding: 17px 16px; min-height: 54px; }
.solo-fold summary h3 { display: inline; margin: 0 8px; font-size: 1.05rem; }
.solo-fold summary time { font-size: .7rem; color: var(--edition-muted); }
.solo-fold-body { padding: 0 16px 18px; }
#app .hand-solo { grid-template-columns: minmax(0, 300px); justify-content: center; }
/* La carta única del solitario y del duelo conserva la proporción de una carta de
   verdad, que es lo que pide un reverso: antes solo la tenían los mazos con lámina. */
#app .hand-solo .hand-card { aspect-ratio: 2 / 3; min-height: 0; width: 100%; }
/* Aquí la carta va sola y no tiene que parecerse a ninguna otra al lado, así que el
   emblema puede ocupar lo que le corresponde en una carta de este tamaño. */
#app .hand-solo .reverso-emblema { width: min(78%, 176px); }
/* El título se apoya en el pie, dejando libre el centro del reverso.
   Flujo flexible en vez de coordenadas fijas: admite títulos largos y texto grande. */
#app[data-platform][data-screen] .hand .hand-card { display: flex; flex-direction: column; align-items: stretch; }
#app[data-platform][data-screen] .hand .hand-card > strong { margin-top: auto; margin-bottom: 0; flex-shrink: 0; }
#app[data-platform][data-screen] .hand .hand-card > .hidden-date { margin-bottom: 12px; }
#app[data-platform][data-screen] .hand .hand-card > .card-arrow { left: auto; right: 12px; top: 10px; bottom: auto; }
@media (max-width: 600px) {
  #app .hand-solo { grid-template-columns: minmax(0, 230px); }
  #app[data-screen="online-game"] .hand .hand-card { height: 145px; min-height: 145px; }
  #app[data-device="ios"]:is([data-screen="online-game"], [data-screen="game"], [data-screen="quick-game"]) .hand .hand-card { height: auto; min-height: 215px; }
}
.perfil-section > h1 { font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1.12; margin: 10px 0 18px; }
.perfil-section > .lead { font-size: 1rem; line-height: 1.65; margin-bottom: 26px; max-width: 62ch; }
.perfil-section > .section-label { margin: 36px 0 18px; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--edition-ink); gap: 12px; flex-wrap: wrap; }
.perfil-section > .section-label small { font: .85rem/1.5 var(--ui-font); color: var(--edition-muted); }
.perfil-section h3 { margin: 24px 0 14px; font-size: 1.1rem; line-height: 1.4; }
.perfil-section .logro-grid, .perfil-section .weak-list { gap: 12px; }
.perfil-section .logro { padding: 17px 16px; gap: 14px; }
.perfil-section .logro b, .perfil-section .weak-row b { font-size: 1rem; line-height: 1.4; color: var(--edition-ink); }
.perfil-section .logro small, .perfil-section .weak-row small { font-size: .85rem; line-height: 1.55; margin-top: 6px; }
.perfil-section .weak-list + h3 { margin-top: 30px; }
.perfil-section .perfil-stats { gap: 12px; }
.perfil-section .perfil-stats b { font-size: 1.7rem; line-height: 1.25; }
.perfil-section .perfil-stats small { font-size: .8rem; line-height: 1.45; margin-top: 7px; }
.perfil-section .game-row { padding-block: 17px; }
.perfil-section .game-name { font-size: 1.05rem; line-height: 1.4; }
.perfil-section .game-meta { font-size: .85rem; line-height: 1.55; margin-top: 6px; }
.guide-tools { position: sticky; top: 0; z-index: 3; display: flex; justify-content: flex-end; margin-bottom: 10px; pointer-events: none; }
.enc-card-illustrated .card-visual { height: auto; aspect-ratio: 2 / 3; padding: 0; background: var(--edition-paper); }
.enc-card-illustrated .card-visual .animal-card-art { display: block; width: 100%; height: 100%; object-fit: contain; filter: none; }
/* El sello de la lámina por descubrir: un papel tramado, la tinta del aspecto en curso y
   el hueco del candado del color del papel. Se derivan de las variables de la edición, así
   que Claro y Oscuro traen el suyo sin declarar nada más. */
:root {
  --enc-sello: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--edition-brass) 14%, var(--edition-paper)) 0 9px,
    color-mix(in srgb, var(--edition-brass) 6%, var(--edition-paper)) 9px 18px);
  --enc-sello-tinta: color-mix(in srgb, var(--edition-ink) 82%, var(--edition-brass));
  --enc-sello-hueco: var(--edition-paper);
}
/* Con `.enc-card-illustrated` delante, que es quien pinta ahí el papel liso justo encima. */
.enc-card-velada.enc-card-illustrated .card-visual { background: var(--enc-sello); }
.guide-tools .guide-close { pointer-events: auto; width: 44px; height: 44px; padding: 0; font-size: 1.35rem; font-weight: 400; line-height: 1; border: 0; background: transparent; color: var(--edition-muted); box-shadow: none; }
/* La ampliación vuelve a una columna; ningún título queda encerrado en una lámina. */
/* Android estrecho: menos escala visual sin alterar coordenadas de arrastre,
   el zoom del navegador ni las preferencias de texto ampliado del usuario. */
@media (max-width: 420px) {
  :root[data-platform="android"] { --normal-text-size: 90%; }
  :root[data-platform="android"][data-text-size="100"] .home-crest { width: clamp(160px, 43vw, 180px); }
  :root[data-platform="android"][data-text-size="100"] .home-wordmark { font-size: clamp(2.3rem, 8.4vw, 3.2rem); }
  :root[data-platform="android"][data-text-size="100"] #app .home-gallery-shell .home-masthead { margin-top: 16px; margin-bottom: 18px; }
  :root[data-platform="android"][data-text-size="100"] .home-shell .gallery-panel { height: 205px; }
  :root[data-platform="android"][data-text-size="100"] .collection-decks { padding: 15px; }
  :root[data-platform="android"][data-text-size="100"] .collection-decks .game-row { padding: 13px 16px 15px; margin-block: 8px; }
  :root[data-platform="android"][data-text-size="100"] .solo-fold summary { padding-block: 14px; }
}
:root:is([data-text-size="150"], [data-text-size="200"]) .home-shell .gallery { grid-template-columns: minmax(0, 1fr); }
:root:is([data-text-size="150"], [data-text-size="200"]) .collection-entry.active { display: block; }
:root:is([data-text-size="150"], [data-text-size="200"]) .home-shell .gallery-panel { min-height: 310px; height: auto; }
:root:is([data-text-size="150"], [data-text-size="200"]) .home-masthead { display: block; text-align: center; }
  :root:is([data-text-size="150"], [data-text-size="200"]) .home-masthead p { margin-inline: auto; }
:root:is([data-text-size="150"], [data-text-size="200"]) .home-ornament { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-shell .gallery-panel, .collection-decks, .result-mark::after { animation: none !important; transition: none !important; }
}

/* La apertura dibuja una línea de cinco hitos antes de descubrir la colección. */
/* La portada trae su propia lámina en splash.css. Aquí solo se ajusta el papel que queda
   detrás de ella; usar el atajo `background` borraría la imagen al cargarse esta hoja. */
html.splash-active #app-splash { color: var(--edition-ink); background-color: var(--edition-paper); }
.splash-hitos { position: relative; display: flex; justify-content: space-between; width: 180px; margin: 22px auto 0; }
.splash-hitos::before { content: ""; position: absolute; height: 1px; top: 3px; inset-inline: 0; background: var(--edition-brass); transform-origin: left; }
.splash-hitos i { z-index: 1; width: 7px; height: 7px; border: 1px solid var(--edition-brass); border-radius: 50%; background: var(--edition-paper); }
@media (prefers-reduced-motion: no-preference) {
  .splash-ready .splash-hitos::before { animation: edition-line 700ms 120ms both; }
  .splash-ready .splash-hitos i { animation: edition-arrive 260ms both; }
  .splash-ready .splash-hitos i:nth-child(2) { animation-delay: 180ms; }
  .splash-ready .splash-hitos i:nth-child(3) { animation-delay: 320ms; }
  .splash-ready .splash-hitos i:nth-child(4) { animation-delay: 460ms; }
  .splash-ready .splash-hitos i:nth-child(5) { animation-delay: 600ms; }
}
@keyframes edition-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 960px) { .splash-hitos { grid-column: 2; margin: 10px 0 0; } }

/* Atlas: navegación común, arte integrado y mesa compacta. */
:root { --atlas-selection: #9b452b; }
:root[data-theme="dark"] { --atlas-selection: #f2aa83; }
#app .atlas-topbar { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 4px 0; margin: 0 0 12px; min-height: 48px; border: 0; }
#app .atlas-topbar .brand { min-height: 0; text-align: center; font-size: .72rem; letter-spacing: .16em; }
#app .atlas-topbar .icon-btn { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; background: transparent; }
/* Tercera columna: fila propia con el sonido y, si la pantalla lo pide, el menú de la
   partida (⋮). Crece con su contenido —una o dos monedas de 44 px— en vez de forzar un
   ancho fijo que solo cabría una. */
#app .atlas-topbar-actions { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
#app .atlas-topbar-actions .ambience-toggle { width: 36px; height: 36px; }
#app.atlas-has-nav > .shell { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
#app .atlas-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; max-width: none; left: 0; transform: none; background: var(--edition-surface); min-height: 64px; z-index: 30; }
#app .atlas-nav button { min-height: 50px; min-width: 0; }
#app .atlas-nav small { font: .67rem/1.3 var(--ui-font); }
#app .atlas-nav svg { display: block; width: 22px; height: 22px; }
#app .enc-modal { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
#app .enc-modal .atlas-nav { position: fixed; }
#app .atlas-landscape { position: absolute; inset: 0; z-index: -1; max-width: none; overflow: hidden; }
/* La profundidad de las portadas la escribe immersion.js en cada aviso del giroscopio, y
   eso llega a ser sesenta veces por segundo. Declarar aquí que estas variables no se
   heredan es lo que impide que cada escritura obligue a recalcular el estilo de la
   portada entera —fondo, dibujo, rótulo, índice, lámina— en lugar del de la capa que de
   verdad cambia. A cambio, quien las escribe tiene que ponerlas en cada capa y no en la
   portada que las contiene: esa lista vive en immersion.js, junto a esta explicación.
   En un navegador sin @property el efecto se ve exactamente igual; solo se pierde el
   ahorro, que es lo que había antes de todo esto. */
@property --depth-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --depth-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --scene-scroll { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --cover-rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --cover-ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#app .atlas-landscape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: sepia(1) saturate(.55); transform: translate(var(--depth-x,0px), var(--depth-y,0px)) scale(1.06); transition: transform 350ms ease-out; }
#app .atlas-landscape::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--edition-paper) 0%, color-mix(in srgb,var(--edition-paper) 88%,transparent) 18%, transparent 47%, color-mix(in srgb,var(--edition-paper) 35%,transparent) 70%,var(--edition-paper) 100%); }
#app .atlas-specimens { display: flex; justify-content: center; gap: 10px; align-items: end; max-width: 510px; width: 100%; justify-self: center; transform: translate(calc(var(--depth-x,0px) * -0.6), calc(var(--depth-y,0px) * -0.6)); transition: transform 350ms ease-out; }
.atlas-specimens figure { width: 30%; margin: 0; padding: 4px; border: 1px solid var(--edition-line); background: var(--edition-surface); box-shadow: 0 8px 14px #382a2233; border-radius: 6px; overflow: hidden; }
.atlas-specimens figure:first-child { transform: rotate(-8deg) translateY(4px); }
.atlas-specimens figure:last-child { transform: rotate(8deg) translateY(4px); }
#app .atlas-specimens img { position: static; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: sepia(1) saturate(.55); }
.atlas-specimens figcaption { padding: 5px 2px; color: var(--edition-ink); text-align: center; font-size: .8rem; line-height: 1.2; overflow-wrap: anywhere; }
#app .gallery-panel img { transform: translate(var(--depth-x,0px),var(--depth-y,0px)) scale(1.035); transition: transform 500ms ease-out; }
#app.atlas-board .shell { max-width: 940px; padding: max(4px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
#app.atlas-board .atlas-topbar { margin-bottom: 4px; }
#app.atlas-board .game-head { margin: 0 0 6px; padding-bottom: 6px; gap: 8px; align-items: center; }
#app.atlas-board .turn-name { font-size: 1.18rem; line-height: 1.15; }
#app.atlas-board .turn-label { font-size: .66rem; line-height: 1.2; letter-spacing: .02em; }
#app.atlas-board :is(.turn-timer,.deck-count) { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; min-width: 46px; height: 46px; aspect-ratio: 1; padding: 2px; border-radius: 50%; }
#app.atlas-board :is(.turn-timer,.deck-count) strong { font-size: 1rem; line-height: 1.05; }
#app.atlas-board :is(.turn-timer,.deck-count) span { font-size: .55rem; }
#app.atlas-board .scoreboard { margin: 0 0 6px; padding: 0 0 4px; gap: 5px; }
#app.atlas-board .score { font-size: .75rem; padding: 4px 7px; gap: 5px; grid-template-columns: 24px auto 22px; }
#app.atlas-board .score i { width: 24px; height: 24px; font-size: .64rem; }
#app.atlas-board .score em { width: 22px; height: 22px; }
#app.atlas-board .hand-title { margin: 3px 0 5px; gap: 8px; }
#app.atlas-board .hand-title h3 { font-size: 1rem; line-height: 1.3; }
#app.atlas-board .hand-title small { font-size: .72rem; }
#app.atlas-board .timeline-wrap { margin: 0 -4px; padding: 3px 4px 8px; }
#app.atlas-board .timeline { padding-block: 0; }
#app.atlas-board .timeline-card { width: 124px; min-height: 164px; border-radius: 7px; }
#app.atlas-board .timeline-card .card-visual { height: 98px; }
#app.atlas-board .timeline-card .card-content { padding: 7px 8px; }
#app.atlas-board .timeline-card .card-content p { display: none; }
#app.atlas-board .timeline-card h3 { font-size: .76rem; line-height: 1.15; margin: 0 0 6px; }
#app.atlas-board .timeline-card .year { font-size: 1rem; }
#app.atlas-board :is(.slot,.slot-confirm) { min-height: 164px; }
#app.atlas-board .slot { width: 46px; }
#app.atlas-board .slot span { width: 36px; min-height: 0; }
#app.atlas-board .slot-confirm { width: 108px; padding: 9px; background: var(--edition-surface); border-color: var(--atlas-selection); }
#app.atlas-board .slot-confirm strong { font-size: .85rem; }
#app.atlas-board .slot-confirm small { color: var(--atlas-selection); }
#app.atlas-board .slot-confirm.provisional-placement { border-style: dashed; background: color-mix(in srgb, var(--edition-surface) 78%, #b7aa92); }
#app.atlas-board .slot-confirm-card { display: flex; flex: 1 1 auto; min-height: 52px; flex-direction: column; justify-content: center; gap: 4px; padding: 6px; border: 1px dashed color-mix(in srgb, var(--atlas-selection) 55%, transparent); border-radius: 5px; opacity: .62; filter: saturate(.45); }
#app.atlas-board .slot-confirm-card small { font: 700 .48rem/1.15 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; }
#app.atlas-board .slot-confirm-card strong { overflow-wrap: anywhere; font-size: .74rem; }
#app.atlas-board .slot-confirm-card span { font: .55rem var(--ui-font); color: var(--edition-muted); }
#app.atlas-board .slot-confirm .btn { padding: 7px 4px; font-size: .7rem; }
#app.atlas-board .provisional-hand-note { padding: 10px; border: 1px dashed var(--edition-brass); border-radius: 7px; background: #f3eee4; color: var(--edition-muted); }
#app .timeline-zoom { display: flex; justify-content: center; gap: 10px; margin: 0 0 6px; }
#app .timeline-zoom button { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; border-color: var(--edition-brass); background: transparent; color: var(--edition-ink); font-size: 1.25rem; }
.timeline-zoom input[type="range"] { width: 130px; min-height: 44px; margin: 0; accent-color: var(--edition-brass); cursor: pointer; }
#app.atlas-board .hand { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 6px 2px 2px; }
#app.atlas-board[data-platform][data-device][data-screen] .hand .hand-card { min-width: 0; min-height: 108px; height: auto; aspect-ratio: auto; padding: 9px; border-radius: 8px; }
#app.atlas-board[data-platform][data-screen] .hand .hand-card > .hidden-date { font-size: .56rem; margin-bottom: 4px; }
#app.atlas-board[data-platform][data-screen] .hand .hand-card > strong { font-size: .88rem; line-height: 1.15; margin-top: auto; }
#app.atlas-board .hand .carta-reverso { height: 26px; min-height: 26px; padding: 0; flex: 1; }
#app.atlas-board .hand .reverso-emblema { width: 35px; height: 35px; }
#app.atlas-board .hand .card-arrow { display: none; }
#app.atlas-board .hand .hand-card.selected { border: 2px solid var(--atlas-selection); box-shadow: 0 5px 12px #3d221b33, inset 0 0 0 2px var(--edition-surface); transform: translateY(-4px); }
#app.atlas-board .hand .hand-card.selected::before { display: none; }
#app.atlas-board .hand .hand-card.selected::after { content: '✓'; position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--atlas-selection); color: var(--edition-surface); font: bold 15px var(--ui-font); }
#app.atlas-board .hand-solo { grid-template-columns: minmax(0,280px); }
#app.atlas-board .hand-solo .hand-card { min-height: 156px !important; }
#app.atlas-board .hand-solo .carta-reverso { height: 62px; }
#app.atlas-board .hand-solo .reverso-emblema { width: 62px; height: 62px; }
#app.atlas-board .atlas-hand-many { max-height: 260px; overflow-y: auto; padding: 7px 5px; }
#app.atlas-board .atlas-hand-section > .hint { font: .72rem/1.3 var(--ui-font); margin: 5px 0; }
#app.atlas-board .placement-dock { position: sticky; bottom: 0; z-index: 5; background: var(--edition-paper); padding: 7px 0 max(6px,env(safe-area-inset-bottom)); display: grid; gap: 7px; }
#app.atlas-board .placement-dock-status { display: flex; align-items: center; gap: 6px; color: var(--edition-ink); font: 700 .68rem/1.1 var(--ui-font); letter-spacing: .025em; }
#app.atlas-board .placement-dock-status span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--atlas-selection); color: var(--edition-surface); font: 800 .76rem/1 var(--ui-font); box-shadow: inset 0 0 0 1px #fff8e744; }
#app.atlas-board .placement-dock-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
#app.atlas-board .placement-dock .btn-primary { min-height: 44px; padding: 9px 14px; background: var(--atlas-selection); color: var(--edition-surface); }
#app.atlas-board .placement-dock .btn-ghost { min-height: 44px; padding: 9px 12px; font-size: .72rem; }
#app.atlas-board .solo-lives { font-size: 1.1rem; margin: 0 0 5px; }
#app.atlas-board .ghost-banner, #app.atlas-board .pulse-banner { margin: 4px 0; padding: 6px 9px; font-size: .78rem; }
@media (min-width: 720px) {
  #app .atlas-specimens { max-width: 460px; justify-self: end; }
  #app.atlas-board .hand:not(.hand-solo) { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #app.atlas-board .timeline-card { width: 150px; }
  #app.atlas-board .timeline-card .card-visual { height: 125px; }
}
@media (max-width: 380px), (max-height: 740px) {
  #app.atlas-board[data-platform][data-device][data-screen] .hand .hand-card { min-height: 90px; padding: 7px; }
  #app.atlas-board .timeline-card { width: 112px; min-height: 142px; }
  #app.atlas-board .timeline-card .card-visual { height: 80px; }
  #app.atlas-board :is(.slot,.slot-confirm) { min-height: 142px; }
}
/* Texto ampliado puede desplazar la página: jamás se recorta para forzarlo a caber. */
:root:is([data-text-size="125"],[data-text-size="150"],[data-text-size="200"]) #app.atlas-board .hand { max-height: none; overflow: visible; }
:root:is([data-text-size="150"],[data-text-size="200"]) #app.atlas-board .hand { grid-template-columns: 1fr; }
:root:is([data-text-size="150"],[data-text-size="200"]) #app .atlas-nav { position: static; grid-template-columns: repeat(4,minmax(0,1fr)); }
:root:is([data-text-size="150"],[data-text-size="200"]) #app .placement-dock { position: static; }
@media (prefers-reduced-motion: no-preference) {
  #app .gallery-panel img { animation: atlas-cover-breathe 12s ease-in-out 2 alternate; }
  #app .atlas-landscape img { animation: atlas-landscape-arrive 1.2s ease-out both; }
  #app .atlas-specimens figure { animation: atlas-specimen-rise 600ms 100ms ease-out backwards; }
  #app .atlas-specimens figure:nth-child(2) { animation-delay: 170ms; }
  #app .atlas-specimens figure:nth-child(3) { animation-delay: 240ms; }
  .atlas-reveal { animation: atlas-card-reveal 480ms ease-out both; transform-origin: center; backface-visibility: hidden; }
  #app.atlas-board .hand-card.selection-enter { animation: atlas-select 220ms ease-out both; }
}
@keyframes atlas-cover-breathe { from { scale: 1; } to { scale: 1.035; } }
@keyframes atlas-landscape-arrive { from { opacity: .25; scale: 1.08; } to { opacity: 1; scale: 1; } }
@keyframes atlas-specimen-rise { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes atlas-card-reveal { from { transform: perspective(900px) rotateY(-88deg); opacity: 0; } 45% { opacity: 1; } to { transform: perspective(900px) rotateY(0); opacity: 1; } }
@keyframes atlas-select { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  #app .gallery-panel img, #app .atlas-landscape img, #app .atlas-specimens, #app .atlas-specimens figure, #app .hand-card, .atlas-reveal { animation: none !important; transition: none !important; }
}
#app .rules:has(.atlas-nav), #app .settings-modal:has(.atlas-nav) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
#app .modal .atlas-nav { position: fixed; bottom: 0; }
#app .guide-tools { justify-content: flex-start; }
#app .settings-head { flex-direction: row-reverse; }
#app .atlas-dialog-back { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
#app.atlas-board .timeline-card.is-flipped .card-content p { display: block; }
/* El emblema del reverso es una marca de agua: no empuja los títulos largos. */
#app.atlas-board .atlas-topbar { height: 44px; min-height: 44px; padding: 0; }
#app.atlas-board .hand:not(.hand-solo) .carta-reverso { position: absolute; inset: 18px 8px auto; height: 34px; min-height: 0; margin: 0; opacity: .2; }
#app.atlas-board .hand:not(.hand-solo) .reverso-emblema { width: 34px; height: 34px; }
#app.atlas-board .hand .hand-card.selected { outline: 2px solid var(--atlas-selection); outline-offset: 1px; }
/* La decisión forma parte del tablero: va entre la línea y «Tu carta». Así nunca cubre
   la carta ni la pantalla, y sigue apareciendo junto al hueco que se acaba de elegir. */
#app.atlas-board .placement-dock:has(.btn) {
  position: static; z-index: auto;
  width: auto; margin: 9px 6px 10px;
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb,var(--atlas-selection) 22%,var(--edition-line));
  border-left: 3px solid var(--atlas-selection);
  border-radius: 12px;
  background: color-mix(in srgb,var(--edition-surface) 62%,transparent);
  box-shadow: none;
}
#app.atlas-board .placement-dock:has(.btn) .placement-dock-status {
  position: static; min-width: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  white-space: normal; pointer-events: none;
}
#app.atlas-board:has(.placement-dock .btn) > .shell { padding-bottom: max(12px,env(safe-area-inset-bottom)); }
#app.atlas-board .placement-dock:not(:has(.btn)) { position: static; }
@media (max-width: 360px) {
  #app.atlas-board .placement-dock:has(.btn) { grid-template-columns: 1fr; }
}
:root:is([data-text-size="150"],[data-text-size="200"]) #app.atlas-board .placement-dock:has(.btn) { grid-template-columns: 1fr; }
#app.atlas-board[data-platform][data-screen] .timeline .card-visual { aspect-ratio: auto; }
@media (max-width: 380px), (max-height: 740px) {
  #app.atlas-board[data-platform][data-screen] .timeline .card-visual { height: 76px; }
  #app.atlas-board .timeline-card .year { padding-top: 4px; }
}
/* La mesa se mide con la altura visible y no con la mínima: la barra inferior del
   navegador se repliega en cuanto se juega, y con `svh` quedaba una franja de papel
   muerta bajo el botón de confirmar. El hueco que sobra se lo queda la línea temporal
   —con sus cartas centradas— en lugar de acumularse al final de la pantalla. */
@media (max-width: 699px) {
  #app.atlas-board > .shell { display: flex; flex-direction: column; min-height: 100dvh; }
  #app.atlas-board > .shell > section:has(.timeline-wrap) { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  #app.atlas-board > .shell > section:has(.timeline-wrap) .timeline-wrap { flex: 0 0 auto; display: flex; align-items: flex-start; }
}
/* Y ese hueco no se queda en blanco: las cartas ya colocadas crecen con él, así el
   grabado y la fecha se leen sin tocar el zoom.

   La medida sale de `dvh` y nunca de una media query de alto: Safari en el iPhone las
   resuelve con la ventana pequeña —barras desplegadas—, y por eso una pantalla con
   sitio de sobra se quedaba con la mesa de un móvil corto.

   Y sale de una resta, no de un porcentaje: lo que rodea a la línea (barra, cabecera,
   vidas, rótulo, zoom, mano y botón de confirmar) ocupa lo mismo en un móvil largo que
   en uno bajito, así que el hueco disponible es la altura menos esa cantidad fija. Un
   porcentaje de la pantalla se pasaría de largo justo en los móviles donde no cabe. El
   suelo de cada `clamp` es la mesa compacta de siempre, que es lo que se queda en una
   pantalla corta; el techo evita una carta desproporcionada en una tableta estrecha. */
@media (min-width: 381px) and (max-width: 699px) {
  /* La mano repartida entre varias personas ocupa el doble de alto que la de una sola
     carta, así que a la mesa compartida le quedan unos cien píxeles menos. En solitario
     el hueco libre —lo que queda tras la barra, la cabecera, el zoom y el botón de
     confirmar— permite que la línea conserve su prioridad, mientras la mano crece un
     poco más y la página puede desplazarse si una pantalla corta lo necesita. */
  #app.atlas-board { --atlas-card: clamp(142px, calc(100dvh - 610px), 218px); }
  #app.atlas-board:has(.hand-solo) {
    --atlas-card: clamp(142px, calc((100dvh - 366px) * .62), 306px);
    --atlas-hand: clamp(148px, calc((100dvh - 366px) * .44), 244px);
  }
  #app.atlas-board .timeline-card { width: max(112px, calc(var(--atlas-card) * .73)); min-height: var(--atlas-card); }
  #app.atlas-board[data-platform][data-screen] .timeline .card-visual { height: max(76px, calc(var(--atlas-card) * .66 - 18px)); }
  #app.atlas-board :is(.slot, .slot-confirm) { min-height: var(--atlas-card); }
  #app.atlas-board .slot { width: max(46px, calc(var(--atlas-card) * .2)); }
  /* La lámina toma la proporción de las propias láminas —todas son 512×768—, así se ve
     la escena entera en vez de una franja recortada por el centro, y la carta deja de
     ser un rectángulo ancho para parecer lo que es. El ancho sale de esa misma cuenta al
     revés: lo que quepa de alto menos el título y la fecha. En una pantalla corta el
     `max-height` vuelve a recortarla antes que dejar la mesa sin caber. */
  #app.atlas-board:has(.hand-solo) .timeline-card { width: max(112px, calc((var(--atlas-card) - 92px) / 1.5 + 16px)); }
  #app.atlas-board:has(.hand-solo)[data-platform][data-screen] .timeline .card-visual {
    aspect-ratio: 2 / 3; height: auto; max-height: calc(var(--atlas-card) - 92px);
  }
  #app.atlas-board:has(.hand-solo) .timeline-card h3 { font-size: clamp(.76rem, 1.12dvh, .92rem); }
  #app.atlas-board:has(.hand-solo) .timeline-card .year { font-size: clamp(1rem, 1.5dvh, 1.22rem); }
}

/* Portadas impresas en el papel: el alfa deja ver el fondo real en los cuatro bordes. */
#app .atlas-landscape {
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 28%, #0009 58%, transparent 76%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 28%, #0009 58%, transparent 76%);
}
/* La altura disponible incluye las barras del navegador móvil. No se fija el alto
   del contenido: con texto ampliado o formatos desplegados se puede seguir bajando. */
@media (max-width: 699px) {
  #app .atlas-specimens { max-width: 245px; gap: 8px; }
  #app .atlas-specimens img { aspect-ratio: 1.45; }
  #app .atlas-specimens figcaption { font-size: .65rem; line-height: 1.15; padding: 4px 1px; }
  /* El resto de la cabecera se retira para dejar sitio a la colección, pero el
     interruptor de sonido se queda: es la única manera de llegar a él en esta
     pantalla sin pasar por Ajustes. Y la flecha de volver, que toda pantalla
     salvo el inicio tiene que conservar. */
  #app .home-gallery-shell .atlas-topbar { min-height: 0; margin-bottom: 4px; padding: 4px 0 0; border: 0; }
  #app .home-gallery-shell .atlas-topbar > :not(.atlas-topbar-actions, .atlas-back) { display: none; }
  #app .home-gallery-shell .atlas-topbar > .atlas-topbar-actions { grid-column: 3; }
  #app .home-gallery-shell .quick-actions { margin: 6px auto; }
  #app .home-gallery-shell .home-masthead { margin: 8px auto 14px; }
  #app .home-gallery-shell .home-crest { width: clamp(80px, 15svh, 100px); }
  #app .home-gallery-shell .home-wordmark { font-size: 2.25rem; }
  #app .home-gallery-shell .home-tagline { margin-top: 6px; font-size: .65rem; }
  #app .home-gallery-shell .home-ornament { margin-top: 10px; }
  #app .home-gallery-shell .gallery { gap: 12px; }
  #app .home-gallery-shell .gallery-panel { height: clamp(110px, calc((100svh - 400px) / 2), 215px); }
  #app .home-gallery-shell .gallery-panel.active { height: 215px; }
  #app .home-gallery-shell .gallery-panel .panel-label { bottom: 14px; }
  #app .home-gallery-shell .panel-label small { margin-top: 3px; }
}
@media (max-width: 699px) {
  :root:is([data-text-size="150"],[data-text-size="200"]) #app .home-gallery-shell .gallery-panel { min-height: 310px; height: auto; }
}

@media (max-width: 699px) and (max-height: 650px) {
  #app .atlas-specimens figcaption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}

/* Las modalidades se presentan como pequeños viajes sobre el mismo papel. */

#app .modal .atlas-nav { position: fixed; inset: auto 0 0; }

/* Las consultas se abren sin barra inferior y conservan sus controles de volver. */
#app :is(.enc-modal, .settings-modal, .rules) .atlas-nav { display: none; }
#app :is(.enc-modal, .settings-modal, .rules):has(.atlas-nav) { padding-bottom: 26px; }

/* Ritmo de lectura móvil: pequeñas láminas y espacios proporcionales. */
.deck-preview { float: right; width: 64px; height: 78px; margin: 0 0 6px 12px; object-fit: cover; border-radius: 3px; filter: sepia(1); mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(#000 72%,transparent); mask-image: linear-gradient(#000 72%,transparent); }
/* Un mazo cerrado lleva el candado estampado en medio de su propia lámina, grande y sin
   nada que lo disimule: es la señal, y tiene que verse antes que ninguna letra. La lámina
   se apaga debajo —es justo lo que todavía no se puede mirar—, así que aquí se le quitan
   a la estampa el papel sepia y la fusión con el fondo, que apagarían también el sello. */
.deck-preview-cerrado {
  position: relative; display: grid; place-items: center;
  filter: none; mix-blend-mode: normal;
  -webkit-mask-image: none; mask-image: none;
  background: color-mix(in srgb, var(--edition-ink, #3d271c) 12%, transparent);
}
.deck-preview-cerrado img { filter: sepia(1) grayscale(.6); opacity: .3; }
.deck-candado { position: absolute; font-size: 2rem; line-height: 1; filter: drop-shadow(0 1px 3px #0005); }
/* En la puerta cerrada el candado es el titular, no una viñeta: `big-icon` solo tiene
   tamaño dentro de los diálogos, así que aquí se le da el suyo. */
#app[data-screen="mazo-cerrado"] .big-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
#app .solo-intro { position: relative; isolation: isolate; padding: 16px 0 18px; }
#app .solo-intro::before { content: ''; position: absolute; z-index: -1; inset: -8px -8px 0 35%; background: url('assets/mode-walk-solo.webp') right center / cover no-repeat; opacity: .3; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse,#000 25%,transparent 72%); mask-image: radial-gradient(ellipse,#000 25%,transparent 72%); }
#app .solo-intro .lead { margin: 10px 0; font: .95rem/1.4 var(--ui-font); }
#app .solo-intro-rule { max-width: 37ch; margin: 0; color: var(--edition-muted); font: .77rem/1.45 var(--ui-font); }
#app .solo-fold summary { display: flex; align-items: center; gap: 12px; list-style: none; }
#app .solo-fold summary::-webkit-details-marker { display: none; }
#app .solo-fold summary::after { content: '+'; margin-left: auto; color: var(--edition-brass); font: 1.3rem var(--ui-font); }
#app .solo-fold[open] summary::after { content: '−'; }
#app .solo-option-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--edition-line); border-radius: 50%; color: var(--edition-brass); background: color-mix(in srgb,var(--edition-brass) 7%,transparent); }
#app .solo-option-mark svg { width: 25px; height: 25px; }
#app .solo-option-copy h3 { margin: 0; }
#app .solo-option-copy small { display: block; margin-top: 5px; color: var(--edition-muted); font: .72rem/1.3 var(--ui-font); }
#app .solo-option-copy time { display: block; margin-top: 3px; }
#app .solo-fold[open] { border-color: var(--edition-brass); box-shadow: 0 5px 18px #352a1710; }
#app .solo-fold[open] summary { border-bottom: 1px solid var(--edition-line); }
#app .solo-fold-body { padding-top: 12px; }
#app .solo-fold-body .btn + .btn { margin-top: 8px; }
#app .solo-fold-body > p { font: .84rem/1.45 var(--ui-font); margin: 8px 0 14px; }
#app .solo-fold-body .hint { font-size: .76rem; margin: 10px 0; }
#app .solo-fold-body .field { margin-bottom: 12px; }
/* ——— Jugar en solitario: reto diario y duelo por enlace ———
   Todo se apoya en el latón del tema y en superficies con filete fino, como las fichas
   de la enciclopedia: nada de placas macizas, que eran lo que hacía pesada la pantalla. */
#app .solo-fold[data-solo-kind="daily"] { border-color: color-mix(in srgb, var(--edition-brass) 40%, var(--edition-line)); background: radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--edition-brass) 12%, transparent), transparent 62%), var(--edition-surface); }
#app .solo-fold[data-solo-kind="daily"] .solo-option-mark { color: var(--edition-surface); border-color: transparent; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--edition-brass) 62%, #fff), var(--edition-brass) 72%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--edition-brass) 13%, transparent), 0 6px 14px -4px color-mix(in srgb, var(--edition-brass) 55%, transparent); }

#app .solo-fold-body .daily-stats { gap: 0; margin: 18px 0 0; border: 1px solid var(--edition-line); border-radius: 14px; background: color-mix(in srgb, var(--edition-surface) 72%, transparent); overflow: hidden; }
#app .solo-fold-body .daily-stats > span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 6px; padding: 14px 15px 13px; border: 0; border-radius: 0; background: none; text-align: left; }
#app .solo-fold-body .daily-stats > span + span { border-left: 1px solid var(--edition-line); }
#app .daily-stats .solo-glyph { width: 30px; height: 30px; padding: 6px; border-radius: 50%; color: var(--edition-brass); background: color-mix(in srgb, var(--edition-brass) 12%, transparent); }
#app .daily-stats b { color: var(--edition-ink); font: 600 1.75rem/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
#app .daily-stats small { grid-column: 1 / -1; margin: 0; color: var(--edition-muted); font: 600 .58rem/1.3 var(--ui-font); letter-spacing: .07em; text-transform: uppercase; }

#app .cal-card { margin-top: 12px; padding: 14px 14px 12px; border: 1px solid var(--edition-line); border-radius: 14px; background: color-mix(in srgb, var(--edition-surface) 72%, transparent); }
#app .cal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#app .cal-title { color: var(--edition-brass); font: 700 .6rem/1 var(--ui-font); letter-spacing: .15em; text-transform: uppercase; }
#app .cal-count { color: var(--edition-muted); font: .7rem/1 var(--ui-font); font-variant-numeric: tabular-nums; }
#app .cal-weekdays, #app .cal-card .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
#app .cal-weekdays span { color: var(--edition-muted); font: 600 .56rem/1 var(--ui-font); letter-spacing: .06em; text-align: center; opacity: .75; }
#app .cal-card .cal-grid { margin-top: 7px; }
#app .cal-card .cal-day, #app .cal-swatch { border: 0; border-radius: 7px; background: color-mix(in srgb, var(--edition-line) 42%, transparent); }
#app .cal-card :is(.cal-day, .cal-swatch).cal-bajo { background: color-mix(in srgb, var(--accent) 30%, transparent); }
#app .cal-card :is(.cal-day, .cal-swatch).cal-medio { background: color-mix(in srgb, var(--accent) 55%, transparent); }
#app .cal-card :is(.cal-day, .cal-swatch).cal-alto { background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent) 70%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22); }
#app .cal-card .cal-day.cal-hoy { box-shadow: 0 0 0 2px var(--edition-surface), 0 0 0 3.5px var(--edition-brass); }
#app .cal-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 12px; color: var(--edition-muted); font: .6rem/1 var(--ui-font); }
#app .cal-legend span:first-child { margin-right: 4px; }
#app .cal-legend span:last-child { margin-left: 4px; }
#app .cal-swatch { display: block; width: 11px; height: 11px; border-radius: 3px; }

#app .solo-fold-body .duel-kind-field { margin: 20px 0 0; gap: 9px; }
#app .solo-fold-body :is(.duel-kind-field .field-label, .duel-identity-field > label) { margin: 0; color: var(--edition-brass); font: 700 .6rem/1 var(--ui-font); letter-spacing: .15em; text-transform: uppercase; }
#app .solo-fold-body .segmented { gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
#app .solo-fold-body .segmented-option { display: grid; justify-items: start; align-content: start; gap: 10px; min-height: 0; padding: 13px 12px 12px; border: 1px solid var(--edition-line); border-radius: 14px; color: var(--edition-ink); background: var(--edition-surface); text-align: left; box-shadow: none; transition: border-color var(--motion-base) ease, background var(--motion-base) ease, box-shadow var(--motion-base) ease; }
#app .solo-fold-body .segmented-option b { color: var(--edition-ink); font: 600 .95rem/1.2 var(--font-display); }
#app .solo-fold-body .segmented-option small { margin-top: 4px; color: var(--edition-muted); font: .7rem/1.3 var(--ui-font); opacity: 1; }
#app .solo-fold-body .segmented-option::after { content: ''; position: absolute; top: 12px; right: 12px; width: 15px; height: 15px; border: 1.5px solid var(--edition-line); border-radius: 50%; pointer-events: none; transition: border-color var(--motion-base) ease, background var(--motion-base) ease; }
#app .duel-option-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--edition-line); border-radius: 50%; color: var(--edition-brass); background: color-mix(in srgb, var(--edition-brass) 6%, transparent); font-style: normal; transition: color var(--motion-base) ease, background var(--motion-base) ease, border-color var(--motion-base) ease; }
#app .duel-option-mark .solo-glyph { width: 18px; height: 18px; }
#app .solo-fold-body .segmented-option.is-on { border-color: var(--edition-brass); background: linear-gradient(160deg, color-mix(in srgb, var(--edition-brass) 14%, var(--edition-surface)), var(--edition-surface) 70%); box-shadow: 0 0 0 1px var(--edition-brass), 0 10px 20px -12px color-mix(in srgb, var(--edition-brass) 80%, transparent); }
#app .solo-fold-body .segmented-option.is-on .duel-option-mark { color: var(--edition-surface); border-color: var(--edition-brass); background: var(--edition-brass); }
#app .solo-fold-body .segmented-option.is-on::after { border-color: var(--edition-brass); background: radial-gradient(circle, var(--edition-brass) 0 3.5px, transparent 4px); }
@media (hover: hover) and (pointer: fine) { #app .solo-fold-body .segmented-option:not(.is-on):hover { border-color: color-mix(in srgb, var(--edition-brass) 55%, var(--edition-line)); background: var(--edition-surface); color: var(--edition-ink); } }
#app .solo-fold-body .segmented-option:has(input:focus-visible) { outline: 2px solid var(--edition-brass); outline-offset: 3px; }

#app .solo-fold-body [data-duel-block] { margin-top: 16px; }
#app .duel-brief { padding: 14px 15px; border-radius: 12px; background: color-mix(in srgb, var(--edition-brass) 8%, transparent); }
#app .duel-brief > p { margin: 0; color: var(--edition-ink); font: .84rem/1.5 var(--ui-font); }
#app .duel-brief > .duel-rule { display: flex; align-items: flex-start; gap: 9px; max-width: none; margin-top: 11px; padding-top: 11px; border-top: 1px solid color-mix(in srgb, var(--edition-brass) 22%, transparent); color: var(--edition-muted); font: .74rem/1.45 var(--ui-font); }
#app .duel-rule .solo-glyph { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--edition-brass); }

#app .solo-fold-body .duel-identity-field { gap: 9px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--edition-line); }
#app .duel-identity { display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border: 1px solid var(--edition-line); border-radius: 999px; background: var(--edition-surface); }
#app .duel-avatar { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; color: var(--edition-surface); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--edition-brass) 62%, #fff), var(--edition-brass) 72%); font: 600 .9rem/1 var(--font-display); letter-spacing: .03em; }
#app .duel-identity input[readonly] { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--edition-ink); background: transparent; font: 600 1.02rem/1.2 var(--font-display); box-shadow: none; }
#app .duel-identity-field .field-help { color: var(--edition-muted); font: .72rem/1.45 var(--ui-font); }

@media (prefers-reduced-motion: no-preference) {
  #app .solo-fold[data-solo-kind="daily"] .solo-option-mark svg { animation: daily-sun 60s linear infinite; }
  #app .solo-fold[open] .cal-card .cal-day { animation: cal-in 380ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 14ms + 140ms); }
  #app .solo-fold[open] .cal-card .cal-day.cal-hoy { animation: cal-in 380ms var(--ease-out) backwards calc(var(--i, 0) * 14ms + 140ms), cal-today 2.4s ease-in-out 1.2s 3; }
}
@keyframes daily-sun { to { transform: rotate(1turn); } }
@keyframes cal-in { from { opacity: 0; transform: scale(.55); } }
@keyframes cal-today { 50% { box-shadow: 0 0 0 2px var(--edition-surface), 0 0 0 6px color-mix(in srgb, var(--edition-brass) 35%, transparent); } }
#app.atlas-board .deck-count { width: auto; min-width: 72px; height: 46px; padding: 4px 10px; border-radius: 12px; }
#app.atlas-board .deck-count span { font-size: .52rem; white-space: nowrap; letter-spacing: .03em; }
#app.atlas-board .placement-dock .btn-primary:disabled { background: color-mix(in srgb,var(--atlas-selection) 12%,var(--edition-paper)); color: var(--edition-muted); border: 1px solid var(--edition-line); box-shadow: none; }
@media (max-width: 699px) {
  #app .home-gallery-shell .collection-decks { padding: 14px; }
  #app .home-gallery-shell .collection-decks > h2 { display: none; }
  #app .home-gallery-shell .collection-decks > .lead { text-align: left; font: .82rem/1.4 var(--ui-font); margin: 0 0 12px; }
  #app .collection-decks .games { gap: 10px; }
  #app .collection-decks .games .game-row { padding: 12px 14px 16px; margin: 0; }
  #app .collection-decks .game-row .deck-chapter { font-size: .55rem; margin-bottom: 5px; }
  #app .collection-decks .game-row .game-name { padding-top: 6px; font-size: 1.12rem; }
  #app .collection-decks .game-row .game-meta { font: .75rem/1.4 var(--ui-font); margin-top: 5px; }
  #app .atlas-specimens figure { padding-bottom: 5px; }
  #app .atlas-specimens figcaption { height: 2.3em; padding: 0 2px; margin-top: 4px; }
  #app[data-screen="solo-home"] .solo-title { font-size: clamp(1.7rem,7vw,2.1rem); margin: 8px 0; }
  #app[data-screen="solo-home"] .setup-section { margin-top: 4px; }
  #app[data-screen="solo-home"] .solo-fold { margin-block: 10px; }
  #app .solo-fold summary { padding: 13px 12px; min-height: 80px; }
  #app.atlas-board .hand-solo { grid-template-columns: minmax(0,320px); }
  #app.atlas-board .hand-solo .hand-card { min-height: 144px !important; }
}
/* La carta que tienes en la mano también es una carta, no una pancarta: toma la
   proporción de una carta de baraja y crece con la pantalla, que es lo que cierra la
   franja de papel que quedaba hasta el botón de confirmar. */
@media (min-width: 381px) and (max-width: 699px) {
  #app.atlas-board .hand-solo { grid-template-columns: minmax(0, calc(var(--atlas-hand) * .78)); }
  /* Los mismos atributos que la regla compacta de la mesa, o esa gana y la deja plana. */
  #app.atlas-board[data-platform][data-device][data-screen] .hand-solo .hand-card {
    aspect-ratio: 3 / 4; height: var(--atlas-hand); min-height: 0 !important;
  }
  /* En una carta estrecha el rótulo llegaba hasta debajo del sello de elegida, y el
     título partía las palabras por donde caía: se separa con guion, como en el papel. */
  #app.atlas-board[data-platform][data-screen] .hand-solo .hand-card > .hidden-date {
    padding-right: 26px; font-size: .5rem; letter-spacing: .1em;
  }
  #app.atlas-board[data-platform][data-screen] .hand-solo .hand-card > strong {
    font-size: .8rem; line-height: 1.2; padding-right: 0;
    overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
  }
}
#app .collection-decks .game-row { grid-template-columns: minmax(0,1fr) 64px; column-gap: 12px; }
#app .collection-decks .game-row > :not(.deck-preview) { grid-column: 1; }
#app .collection-decks .deck-preview { grid-column: 2; grid-row: 1 / 4; align-self: center; margin: 0; float: none; }
#app .deck-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
#app.atlas-board .timeline { justify-content: center; }
@media (max-width: 699px) {
  #app .solo-home:has(.solo-fold[open]) .solo-fold:not([open]) summary { min-height: 52px; padding-block: 8px; }
  #app .solo-home:has(.solo-fold[open]) .solo-fold:not([open]) .solo-option-copy :is(small,time) { display: none; }
  #app .solo-home:has(.solo-fold[open]) .solo-fold:not([open]) .solo-option-mark { width: 32px; height: 32px; flex-basis: 32px; }
}
#app .solo-fold { scroll-margin-top: 12px; scroll-margin-bottom: calc(90px + env(safe-area-inset-bottom)); }
#app .deck-preview img { position: static; opacity: 1; }

/* La lámina del resultado: la escena entera, estampada en el papel como en la carta,
   y pulsable para verla a pantalla completa. Toma la proporción de las propias láminas
   —512×768— y se queda con lo que el aviso puede darle de alto sin empujar el botón de
   continuar fuera de la pantalla. */
#app .art-thumb {
  display: block; width: fit-content; margin: 12px auto 2px; padding: 0;
  border: 1px solid var(--edition-line); border-radius: 4px; background: var(--edition-surface);
  box-shadow: 0 6px 16px #3a2a1c26; cursor: pointer; overflow: hidden; min-height: 0;
}
/* Se mide por el alto —no por el ancho del aviso— para que el botón de continuar siga
   cabiendo en la pantalla junto con el texto más largo. */
#app .art-thumb img {
  display: block; height: clamp(88px, 18dvh, 190px); width: auto; aspect-ratio: 2 / 3;
  object-fit: cover; filter: sepia(.42) saturate(.8) contrast(1.02); mix-blend-mode: multiply;
}
#app .art-thumb span {
  display: block; padding: 4px 2px 5px; color: var(--edition-muted);
  font: .6rem/1.2 var(--ui-font); letter-spacing: .08em; text-transform: uppercase;
}
/* En el móvil va al lado del texto, como el grabado de una página: apilada debajo, el
   aviso crecía tanto que el botón de continuar se iba debajo del pliegue. */
@media (max-width: 699px) {
  #app .reveal .art-thumb { float: left; margin: 2px 14px 6px 0; }
  #app .reveal .year { margin-top: 0; }
}
:root[data-theme="dark"] #app .art-thumb img { mix-blend-mode: normal; }

/* Reverso neutro: sin ilustración ni pistas visuales sobre la respuesta. */
#app .hand-card { isolation: isolate; background: #f3eee4; color: #302d27; }
#app.atlas-board[data-screen] .hand .hand-card .carta-reverso {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  padding: 0; margin: 0; opacity: 1; z-index: -1; overflow: hidden; background: #f3eee4;
}
#app .carta-reverso::after { content: none; }
#app .hand-card > .hidden-date { color: #66451f; position: relative; }
#app .hand-card > strong { color: #302d27; position: relative; text-shadow: none; }

/* La carta levantada conserva proporción 2:3 aunque la mano sea horizontal. */
.drag-card-preview { display: flex; flex-direction: column; align-items: stretch; isolation: isolate; padding: 12px; border: 2px solid var(--atlas-selection); border-radius: 10px; background: #f3eee4; color: #302d27; }
.drag-card-preview .carta-reverso { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: -1; overflow: hidden; }
.drag-card-preview .carta-reverso { background: #f3eee4; }
.drag-card-preview .carta-reverso::after { content: none; }
.drag-card-preview > .hidden-date { position: relative; color: #66451f; font-size: .65rem; }
.drag-card-preview > strong { position: relative; margin-top: auto; margin-bottom: 0; font-size: 1rem; line-height: 1.2; color: #302d27; text-shadow: none; }
#app.atlas-board .slot.drop-target { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 12px; }

/* Competición: una lámina de atlas al final de las colecciones. */
@media (max-width: 699px) {
  #app[data-screen="competition-menu"] .setup-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; margin-bottom: 14px; }
  #app[data-screen="competition-menu"] .setup-grid label { min-height: 2.6em; font: 600 .76rem/1.3 var(--ui-font); }
  #app[data-screen="competition-menu"] .setup-grid select { padding-inline: 8px; font-size: .82rem; }
}

/* Colecciones: pigmentos originales y relieve ligero sobre el papel. */
#app .home-gallery-shell .gallery-panel {
  border-color: #a58b60;
  box-shadow: 0 3px 0 #aa916b, 0 5px 0 #d3c1a0, 0 10px 18px #49361f22;
  background: #756044;
}
/* hover-neutro: el estado con puntero encima recibe exactamente lo mismo que el estado
   normal, que es justo el modo de anular el filtro que aplica la hoja base. No hay nada
   que se pueda quedar pegado tras un toque, así que no necesita la puerta de (hover: hover). */
#app .home-gallery-shell .gallery-panel .panel-art,
#app .home-gallery-shell .gallery-panel:not(.active):hover .panel-art {
  filter: saturate(1.12) brightness(1.05) contrast(1.025);
  transition: none;
}
#app .home-gallery-shell .gallery-panel::after {
  background: linear-gradient(180deg, #211b162b, transparent 28%, #211b160d 40%, #211b16d9 100%);
}
#app .home-gallery-shell .gallery-panel::before {
  border-color: #fff0c57a;
  box-shadow: inset 0 1px 0 #fff9, inset 1px 0 0 #fff4;
}
#app .home-gallery-shell .gallery-panel .panel-label {
  text-shadow: 0 2px 5px #160f09a8;
}
#app .home-gallery-shell .gallery-panel .panel-label small { color: #fff2d9; }
#app .home-gallery-shell .gallery-panel .collection-index { text-shadow: 0 1px 4px #16120a; }
#app .home-gallery-shell .gallery-panel .collection-foil {
  background: radial-gradient(ellipse at 12% 0%, #fff4cd24, transparent 65%);
}
/* El encuadre es estable: no se vuelve a ampliar al abrir un menú. */
#app .home-gallery-shell .gallery-panel img { animation: none; scale: none; }
@media (prefers-reduced-motion: no-preference) {
  #app .home-gallery-shell .gallery-panel {
    transform: perspective(1100px) rotateX(var(--cover-rx, 0deg)) rotateY(var(--cover-ry, 0deg));
    transition: transform 350ms ease-out, box-shadow 250ms ease;
  }
  #app .home-gallery-shell .gallery-panel:active {
    transform: perspective(1100px) rotateX(1.5deg) translateY(2px);
    box-shadow: 0 1px 0 #aa916b, 0 3px 0 #d3c1a0, 0 5px 10px #49361f26;
  }
}
@media (prefers-reduced-motion: reduce) {
  #app .home-gallery-shell .gallery-panel { transform: none !important; transition: none; }
}

/* Dioramas: fondo atmosférico, ilustración enfocada y suelo en primer plano.
   Las capas reutilizan el mismo recurso: sin nuevas descargas ni WebGL. */
#app .home-gallery-shell .gallery-panel {
  --scene-glow: #edb85c;
  --scene-shade: #392719;
  --scene-focus: 72%;
  overflow: hidden;
  background: var(--scene-shade);
  box-shadow: 0 3px 0 #a68b64, 0 6px 0 #d2bf9c, 0 13px 20px #3c2b2333;
}
#app .home-gallery-shell .panel-entertainment { --scene-glow: #dda452; --scene-shade: #302118; --scene-focus: 65%; }
#app .home-gallery-shell .panel-science { --scene-glow: #73c4cd; --scene-shade: #123b42; --scene-focus: 60%; }
#app .home-gallery-shell .panel-nature { --scene-glow: #a6bb68; --scene-shade: #233c26; --scene-focus: 62%; }
#app .home-gallery-shell .panel-globe { --scene-glow: #91c7ca; --scene-shade: #233b41; --scene-focus: 62%; }
#app .home-gallery-shell .panel-mixed { --scene-glow: #c0acdb; --scene-shade: #3b3043; --scene-focus: 65%; }
#app .home-gallery-shell .panel-backdrop {
  position: absolute; inset: -12px; pointer-events: none;
  filter: blur(7px) saturate(.9) brightness(.72);
}
#app .home-gallery-shell .panel-backdrop img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 43%;
  transform: translate(calc(var(--depth-x, 0px) * -.45), calc(var(--depth-y, 0px) * -.45 - var(--scene-scroll, 0px) * .6)) scale(1.12);
}
#app .home-gallery-shell .panel-depth-light {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 22% 18%, color-mix(in srgb, var(--scene-glow) 65%, transparent), transparent 70%);
  opacity: .8;
}
#app .home-gallery-shell .gallery-panel .panel-art {
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 76% 110% at var(--scene-focus) 48%, #000 30%, #000e 53%, transparent 90%);
  mask-image: radial-gradient(ellipse 76% 110% at var(--scene-focus) 48%, #000 30%, #000e 53%, transparent 90%);
}
#app .home-gallery-shell .gallery-panel .panel-art img {
  transform: translate(var(--depth-x, 0px), calc(var(--depth-y, 0px) + var(--scene-scroll, 0px))) scale(1.055);
}
#app .home-gallery-shell .panel-depth-ground {
  position: absolute; z-index: 1; inset: auto 0 0; height: 28%; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--scene-shade) 75%, transparent));
  box-shadow: inset 0 -7px 8px #130e0a55;
}
#app .home-gallery-shell .gallery-panel::before {
  inset: 0; border: 1px solid #fff0ce77; border-radius: inherit;
  box-shadow: inset 5px 5px 9px #140f084d, inset -2px -2px 1px #ffe3aa66, inset 0 0 0 7px #d2b78221;
}
#app .home-gallery-shell .gallery-panel::after {
  background: linear-gradient(180deg, #16120d24, transparent 30%, transparent 44%, #17110bd9);
}
#app .home-gallery-shell .gallery-panel .collection-foil { inset: 7px; border: 1px solid #ffedbf38; border-radius: 1px 10px 10px 1px; }
#app .home-gallery-shell .gallery-panel .panel-label { z-index: 4; }
@media (prefers-reduced-motion: no-preference) {
  #app .home-gallery-shell .panel-backdrop img { transition: transform 600ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  #app .home-gallery-shell .gallery-panel .panel-art img { transform: scale(1.055); }
  #app .home-gallery-shell .panel-backdrop img { transform: scale(1.12); }
}

/* Mesa de explorador: relieve físico, cronología continua y controles contenidos. */
#app.atlas-board { --board-brass: #ac843f; background: radial-gradient(ellipse at 50% 35%, #fff9e84d, #7954310c 90%); }
#app.atlas-board .topbar { min-height: 44px; margin-bottom: 4px; }
#app.atlas-board .game-head { padding: 6px 0 9px; margin-bottom: 8px; align-items: center; }
#app.atlas-board .turn-label { font-size: .68rem; letter-spacing: .07em; }
#app.atlas-board .turn-name { font-size: 1.35rem; }
#app.atlas-board .deck-count { border: 0; background: transparent; padding: 3px 5px; min-width: 0; box-shadow: none; }
#app.atlas-board .deck-count strong { font-size: 1.15rem; }
#app.atlas-board .deck-count span { font-size: .6rem; }
#app.atlas-board .solo-lives { margin: 7px 0; font-size: 1rem; }
#app.atlas-board .hand-title { margin-bottom: 10px; }
#app.atlas-board .hand-title h3 { font-size: 1.1rem; }
#app.atlas-board .timeline { background: linear-gradient(#b8996555,#b8996555) center / 100% 1px no-repeat; padding-block: 9px 14px; }
#app.atlas-board .timeline-card { background-color: #f2e7ce; box-shadow: 0 2px 0 #b89b6e, 0 4px 0 #ddcba8, 0 8px 14px #4a341a25, inset 0 1px 0 #fff8df; transition: translate 180ms ease-out; }
#app.atlas-board .slot { border-color: #b7985b77; background: #fff9e51a; }
#app.atlas-board .slot.drop-target { background: #d8b86d24; border: 2px dashed #b58a3d; box-shadow: inset 0 0 0 3px #fff6d780, 0 0 16px #dfbb6233; }
#app.atlas-board .timeline-card:has(+ .slot.drop-target) { translate: -7px 0; }
#app.atlas-board .slot.drop-target + .timeline-card { translate: 7px 0; }
#app.atlas-board .slot.drop-target::after { content: ''; position: absolute; inset: 6px; border: 1px solid #bea15f88; border-radius: 7px; pointer-events: none; }
#app .timeline-zoom { gap: 0; width: max-content; max-width: 100%; margin: 5px auto 14px; padding: 3px; border: 1px solid #bba16b55; border-radius: 12px; background: #fffaf066; }
#app .timeline-zoom [hidden] { display: none !important; }
#app .timeline-zoom [data-zoom-level] { min-width: 62px; width: auto; height: 40px; border: 0; border-radius: 9px; font: 600 .78rem system-ui; color: #766447; }
#app .timeline-zoom [aria-pressed="true"] { color: #fff8e7; background: #79613b; box-shadow: 0 2px 6px #4a341a22; }
@keyframes board-hito { 40% { background: #e6c67566; box-shadow: 0 0 16px #d2ad4b33; } }
/* El resultado ocupa su lugar en la página y permite seguir viendo y moviendo la línea. */
#app .overlay.board-result-layer { position: relative; inset: auto; display: block; padding: 0 12px max(16px,env(safe-area-inset-bottom)); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 6; animation: none; }
#app:has(.board-result-layer) .atlas-hand-section, #app:has(.board-result-layer) .placement-dock { display: none; }
#app .board-result-layer .modal.board-result { width: 100%; max-width: 660px; max-height: none; margin: 0 auto; padding: 16px; border: 1px solid #b79d6955; border-radius: 16px; text-align: left; box-shadow: 0 6px 22px #4a341a15; background: #fff9ec; }
#app .board-result > .result-mark, #app .board-result > .eyebrow { display: none; }
#app .board-result h2 { font-size: 1.02rem; line-height: 1.3; margin: 8px 0 10px; }
.result-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.result-summary b { color: #4d7054; font: 600 .86rem system-ui; }.failure .result-summary b { color: #93492c; }
#app .result-summary .year { font-size: 1.5rem; margin: 0; }
.result-history { margin: 8px 0 14px; }.result-history > summary { cursor: pointer; font: .8rem system-ui; color: #79613b; padding: 6px 0; }.result-history .reveal { margin-top: 12px; }.result-history p { font-size: .9rem; line-height: 1.45; }
#app .board-result .btn-block { min-height: 44px; padding: 10px 16px; }
@media (prefers-reduced-motion: reduce) { #app.atlas-board .timeline-card { transition: none; } }
#app.atlas-board .slot { position: relative; }
#app.atlas-board:has(.board-result-layer) > .shell { min-height: 0; }
#app.atlas-board .game-head > div:first-child { flex: 1; }
#app.atlas-board .game-head .solo-lives { flex: none; margin: 0 8px; white-space: nowrap; font-size: .9rem; }
#app.atlas-board .atlas-hand-section { margin-top: 4px; }
.drag-card-preview > strong { font-size: .78rem; padding-right: 0; line-height: 1.16; hyphens: none; overflow-wrap: normal; }
#app.atlas-board[data-platform][data-screen] .hand-solo .hand-card > strong {
  font-size: clamp(.66rem,2.65vw,.78rem); padding-right: 0; line-height: 1.12;
  -webkit-hyphens: none; hyphens: none; overflow-wrap: normal; word-break: normal;
}

/* El zoom comparte cabecera con la línea: el espacio recuperado es para el grabado. */
#app.atlas-board .hand-title.timeline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 6px; }
#app .timeline-toolbar .timeline-zoom { flex: none; margin: 0; padding: 2px; border-radius: 10px; }
#app .timeline-toolbar .timeline-zoom [data-zoom-level] { min-width: 44px; width: 44px; height: 40px; min-height: 40px; font-size: .7rem; border-radius: 8px; }
@media (max-width: 699px) {
  #app.atlas-board { --atlas-card: clamp(172px, calc(100dvh - 550px), 268px); }
  #app.atlas-board .timeline-card { width: max(128px, calc(var(--atlas-card) * .73)); min-height: var(--atlas-card); }
  #app.atlas-board[data-platform][data-screen] .timeline .card-visual { height: max(108px, calc(var(--atlas-card) * .66 + 12px)); }
  #app.atlas-board:has(.hand-solo) { --atlas-card: clamp(224px, calc((100dvh - 366px) * .62 + 56px), 360px); }
  #app.atlas-board:has(.hand-solo) .timeline-card { width: max(128px, calc((var(--atlas-card) - 92px) / 1.5 + 16px)); }
  #app.atlas-board:has(.hand-solo)[data-platform][data-screen] .timeline .card-visual { aspect-ratio: 2 / 3; height: auto; max-height: none; flex: none; }
  #app.atlas-board :is(.slot, .slot-confirm) { min-height: var(--atlas-card); }
}
@media (min-width: 700px) {
  #app.atlas-board .timeline-toolbar .timeline-zoom [data-zoom-level] { min-width: 50px; }
}

/* Botones como piezas de papel prensado: un canto fino, contacto con la mesa y una
   respuesta corta al dedo. Conservan la tinta propia de cada acción. */
#app :is(.btn, .game-row, .solo-fold > summary) {
  border-color: color-mix(in srgb, var(--edition-brass) 42%, var(--edition-line));
  box-shadow: inset 0 1px 0 #fff8, 0 1px 0 #9a74484a, 0 4px 10px #49331d12;
}
#app .btn-primary { border: 1px solid color-mix(in srgb, var(--scene-color) 72%, #f2d89d); }
@media (prefers-reduced-motion: no-preference) {
  #app :is(.btn, .game-row, .solo-fold > summary) {
    transition: transform 120ms ease-out, box-shadow 120ms ease-out, border-color 180ms ease;
  }
  #app :is(.btn, .game-row, .solo-fold > summary):active {
    transform: translateY(2px) scale(.995);
    box-shadow: inset 0 2px 4px #5a3c1717, 0 1px 1px #49331d18;
  }
}

/* La mesa tiene fibra, luz cálida y una incisión doble bajo la cronología. */
#app.atlas-board {
  background:
    radial-gradient(ellipse at 48% 28%, #fff4cf70 0 16%, transparent 58%),
    repeating-linear-gradient(4deg, transparent 0 7px, #74502c08 7px 8px),
    repeating-linear-gradient(94deg, transparent 0 29px, #fff8e414 29px 30px),
    var(--edition-paper);
}
#app.atlas-board > .shell > section:has(.timeline-wrap) {
  position: relative; padding: 8px 6px 5px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--board-brass) 18%, transparent);
  background: radial-gradient(ellipse at 50% 0%, #fff8df5c, transparent 74%);
  box-shadow: inset 0 1px 0 #fff8, inset 0 -10px 24px #6e4d2910;
}
#app.atlas-board .timeline-wrap {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11px, #000 calc(100% - 11px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11px, #000 calc(100% - 11px), transparent);
}
#app.atlas-board .timeline {
  position: relative;
  background:
    linear-gradient(#fff8e799,#fff8e799) center calc(50% - 1px) / 100% 1px no-repeat,
    linear-gradient(#8a673e78,#8a673e78) center calc(50% + 1px) / 100% 1px no-repeat;
}

/* Al elegirla, el papel se separa de la mesa con una señal limpia. La carta única de
   abajo no lleva el antiguo pliegue ni los filetes dorados: el sello rojo ya explica
   por sí solo que es la carta activa. */
#app.atlas-board .hand .hand-card.selected {
  transform: translateY(-4px);
  box-shadow: 0 2px 0 #b78f5f, 0 13px 22px #3d271c2d, inset 0 1px 0 #fff9e7;
}
/* Este `::before` ya lo usa la hoja base para la chapa del ✓, redonda y arriba a la
   derecha. Reutilizarlo sin deshacer aquello dejaba un arco dorado encima del rótulo de
   la carta: `top` mandaba sobre `bottom` y el `border-radius` lo redondeaba. */
#app.atlas-board .hand .hand-card.selected::before {
  content: ''; display: block; position: absolute; z-index: 4;
  top: auto; right: auto; left: 0; bottom: 0;
  width: 29px; height: 29px; border-radius: 0; pointer-events: none;
  background: linear-gradient(35deg, #9c744244 0 46%, #fff8e9 49% 70%, #c5a36c 73%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  filter: drop-shadow(3px -3px 3px #5037192a);
}
#app.atlas-board .hand-solo .hand-card {
  border-color: color-mix(in srgb,var(--atlas-selection) 72%,var(--edition-ink));
  box-shadow: 0 7px 17px #3d271c26;
}
#app.atlas-board .hand-solo .hand-card.selected {
  transform: translateY(-4px);
  outline: 2px solid var(--atlas-selection); outline-offset: 2px;
  box-shadow: 0 9px 19px #3d271c2b;
}
#app.atlas-board .hand-solo .hand-card.selected::before {
  content: none; display: none; background: none; filter: none; clip-path: none;
}

/* Al acercar una carta, el hueco enseña solo su volumen: no revela el resultado. */
#app.atlas-board .slot.drop-target::before {
  content: ''; position: absolute; z-index: 0; inset: 8px 5px; border-radius: 9px;
  border: 1px solid #a9823c88;
  background: repeating-linear-gradient(135deg,#c5a25d18 0 5px,transparent 5px 10px),#fff8e52b;
  box-shadow: 0 7px 14px #4b321825; transform: translateY(-5px) rotate(-1deg);
  pointer-events: none;
}
#app.atlas-board .slot.drop-target > * { position: relative; z-index: 1; }

/* Una onda recorre la incisión cuando la carta encaja; el error usa terracota. */
.timeline-ink-wave {
  position: absolute; z-index: 5; top: 50%; width: 76px; height: 7px; margin: -3px 0 0 -38px;
  border-radius: 50%; pointer-events: none; transform-origin: center;
  background: radial-gradient(ellipse, #9c783bc4 0 9%, #c69c4f80 25%, transparent 66%);
  animation: timeline-ink-spread 980ms cubic-bezier(.12,.65,.2,1) both;
}
.timeline-ink-wave.ink-error { background: radial-gradient(ellipse, #9a4c32c9 0 9%, #b66d4d75 25%, transparent 66%); }
@keyframes timeline-ink-spread {
  0% { opacity: 0; transform: scaleX(.12) scaleY(.5); filter: blur(1px); }
  22% { opacity: .9; }
  100% { opacity: 0; transform: scaleX(6.5) scaleY(1.5); filter: blur(3px); }
}
.slot-correct.correction-target { animation: correction-slot-pulse 900ms ease-out both; }
@keyframes correction-slot-pulse { 35% { background: #ad6a4933; box-shadow: inset 0 0 0 3px #fff7dc, 0 0 22px #9b4f3640; } }
.placement-correction-card {
  position: fixed; z-index: 80; left: 0; top: 0; width: 126px; min-height: 78px; box-sizing: border-box;
  display: grid; align-content: center; gap: 3px; padding: 9px 10px; border: 1px solid #b88d4d;
  border-radius: 9px; color: var(--edition-ink); background: #f6ead0;
  box-shadow: 0 16px 30px #36210d35, inset 0 0 0 3px #fff8e9; pointer-events: none;
}
.placement-correction-card small { color: #944e35; font: 600 .52rem/1.2 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; }
.placement-correction-card b { font: 600 .72rem/1.15 var(--font-display,Georgia); }
.placement-correction-card span { color: #93482e; font: 700 .78rem/1 var(--font-display,Georgia); }

@media (prefers-reduced-motion: reduce) {
  .timeline-ink-wave { animation: none; display: none; }
  .slot-correct.correction-target { animation: none; }
}

/* Enciclopedia como álbum: primero las láminas, después la herramienta de consulta. */
#app .enc-modal { background: var(--edition-paper); }
#app .enc-modal > .atlas-dialog-back {
  position: sticky;
  top: 8px;
  z-index: 24;
}
#app .enc-modal > .atlas-dialog-back,
#app .rules .guide-tools > .atlas-dialog-back,
#app .settings-modal .settings-head > .atlas-dialog-back,
#app[data-screen="perfil"] .atlas-topbar > .atlas-back {
  width: 46px;
  height: 46px;
  padding: 0;
  /* Safari de algunas versiones descarta la declaración completa si no entiende
     `color-mix()`. Estas dos bases conservan el botón circular en esos móviles. */
  border: 1px solid var(--edition-line);
  border: 1px solid color-mix(in srgb,var(--edition-brass) 55%,var(--edition-line));
  border-radius: 50%;
  background: var(--edition-surface);
  background: color-mix(in srgb,var(--edition-surface) 94%,transparent);
  color: var(--edition-ink);
  box-shadow: 0 5px 16px #3425162e;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#app .rules .guide-tools { top: 8px; z-index: 24; }
#app .settings-modal .settings-head {
  position: sticky;
  top: 8px;
  z-index: 24;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom: 10px;
  pointer-events: none;
}
#app .settings-modal .settings-head > .settings-close { margin: 0; pointer-events: auto; }
#app[data-screen="perfil"] .atlas-topbar {
  position: sticky;
  top: 8px;
  z-index: 24;
  grid-template-columns: 46px;
  width: 46px;
  min-height: 46px;
  padding: 0;
  pointer-events: none;
}
#app[data-screen="perfil"] .atlas-topbar > :not(.atlas-back) { display: none; }
#app[data-screen="perfil"] .atlas-topbar > .atlas-back { pointer-events: auto; }
.atlas-scroll-veil {
  position: sticky;
  top: 0;
  z-index: 23;
  display: block;
  height: 88px;
  margin-bottom: -88px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom,var(--atlas-veil-paper,var(--edition-surface)) 0 18%,transparent 100%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom,#000 0 32%,transparent 100%);
  mask-image: linear-gradient(to bottom,#000 0 32%,transparent 100%);
  transition: opacity 180ms ease-out;
}
#app :is(.enc-modal,.rules,.settings-modal) > .atlas-scroll-veil {
  top: -26px;
  box-sizing: border-box;
  width: calc(100% + 52px);
  height: 114px;
  margin-bottom: -114px;
  margin-inline: -26px;
  border-radius: 11px 11px 0 0;
  --atlas-veil-paper: var(--edition-surface);
  background: linear-gradient(to bottom,var(--atlas-veil-paper) 0 35%,transparent 100%);
}
#app .enc-modal > .atlas-scroll-veil { --atlas-veil-paper: var(--edition-paper); }
#app[data-screen="perfil"] .atlas-profile-veil {
  position: fixed;
  inset: 0 0 auto;
  z-index: 23;
  margin: 0;
  --atlas-veil-paper: var(--edition-paper);
}
.atlas-scroll-veil.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .atlas-scroll-veil { transition: none; }
}
@media (max-width: 480px) {
  #app .settings-modal > .atlas-scroll-veil {
    top: -16px;
    width: calc(100% + 32px);
    height: 104px;
    margin-bottom: -104px;
    margin-inline: -16px;
  }
}
#app .enc-toolbar-compact { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(260px,1.2fr); align-items: end; gap: 12px; padding: 10px 12px; margin: 12px 0 18px; border-radius: 14px; }
#app .enc-toolbar-compact .field { margin: 0; gap: 4px; }
#app .enc-toolbar-compact label, #app .enc-toolbar-compact .enc-lock-label { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
#app .enc-toolbar-compact :is(select,input) { min-height: 42px; padding-block: 8px; }
#app .enc-toolbar-compact .enc-bands { flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: none; }
#app .enc-toolbar-compact .enc-bands::-webkit-scrollbar { display: none; }
#app .enc-toolbar-compact :is(.band-chip,.enc-lock-chip) { min-height: 36px; padding: 6px 11px; flex: none; font-size: .68rem; }
#app .enc-toolbar-compact .enc-lock-field { gap: 4px; }
.enc-topic-select { min-width: 0; }
.enc-advanced-filters { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb,var(--edition-line) 70%,transparent); padding-top: 8px; }
.enc-advanced-filters summary { color: var(--edition-muted); cursor: pointer; font: 700 .64rem/1.3 var(--ui-font); letter-spacing: .07em; text-transform: uppercase; }
.enc-advanced-body { display: grid; gap: 8px; margin-top: 9px; }
.enc-advanced-body .field { min-width: 0; }
.enc-advanced-body .enc-bands { overflow-x: auto; }
.enc-card[data-action="enc-card"], .enc-recent-card[data-action="enc-card"] { cursor: pointer; }
.enc-card[data-action="enc-card"]:focus-visible, .enc-recent-card[data-action="enc-card"]:focus-visible { outline: 2px solid var(--edition-rust); outline-offset: 3px; }
.enc-card-overlay { z-index: 60; }
.enc-card-modal { position: relative; width: min(100%, 620px); max-height: min(92dvh, 900px); overflow: auto; padding: 26px clamp(16px, 4vw, 34px) 24px; background: var(--edition-paper); }
.enc-card-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--edition-line); border-radius: 50%; color: var(--edition-ink); background: var(--edition-surface); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.enc-card-modal h2 { max-width: calc(100% - 50px); margin: 4px 0 16px; font: 600 clamp(1.6rem, 5vw, 2.35rem)/1.05 var(--font-display); }
.enc-card-large { margin: 0 auto 20px; }
.enc-card-large .enc-card { display: grid; grid-template-columns: minmax(190px, 42%) minmax(0, 1fr); width: 100%; overflow: hidden; }
.enc-card-large .enc-card .card-visual { min-height: 310px; }
.enc-card-large .enc-card .card-content { padding: 18px; }
.enc-card-large .enc-card .card-content h3 { font-size: 1.25rem; }
.enc-image-overlay { z-index: 65; }
.enc-image-modal { position: relative; width: min(100%, 760px); max-height: min(94dvh, 980px); overflow: auto; padding: 26px clamp(16px, 4vw, 34px) 24px; background: var(--edition-paper); }
.enc-image-modal h2 { max-width: calc(100% - 50px); margin: 4px 0 16px; font: 600 clamp(1.5rem, 5vw, 2.2rem)/1.05 var(--font-display); }
.enc-image-full { display: grid; place-items: center; min-height: 260px; margin: 0 auto 20px; padding: 10px; border: 1px solid var(--edition-line); background: var(--edition-surface); }
.enc-image-full .animal-card-art { display: block; width: min(100%, 620px); max-height: min(68dvh, 720px); object-fit: contain; }
@media (max-width: 560px) {
  #app .enc-toolbar-compact { grid-template-columns: 1fr; gap: 8px; }
  .enc-card-large .enc-card { grid-template-columns: 1fr; }
  .enc-card-large .enc-card .card-visual { min-height: 330px; }
}
.enc-album-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.enc-album-heading span { display: block; margin-bottom: 3px; color: var(--edition-brass); font: 700 .58rem/1.3 var(--ui-font); letter-spacing: .13em; text-transform: uppercase; }
.enc-album-heading h2 { margin: 0; font-size: clamp(1.35rem,5vw,1.8rem); }
.enc-album-heading > small { flex: none; color: var(--edition-muted); font: .68rem/1.4 var(--ui-font); }
.enc-recent { margin: 4px 0 24px; padding: 16px 0 18px; border-block: 1px solid color-mix(in srgb,var(--edition-brass) 28%,transparent); }
.enc-recent-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(142px,38%); gap: 10px; overflow-x: auto; padding: 4px 3px 15px; scroll-snap-type: x proximity; }
.enc-recent-card { scroll-snap-align: start; overflow: hidden; border: 1px solid color-mix(in srgb,var(--edition-brass) 45%,var(--edition-line)); border-radius: 9px; background: var(--edition-surface); box-shadow: 0 5px 12px #3e2a1618; }
.enc-recent-art { aspect-ratio: 4/3; overflow: hidden; background: var(--edition-paper); }
.enc-recent-art .animal-card-art { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.enc-recent-card > div:last-child { display: grid; gap: 3px; padding: 9px; }
.enc-recent-card small { color: var(--edition-brass); font: 700 .52rem/1.25 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; }
.enc-recent-card b { font: 600 .78rem/1.2 var(--font-display); }
.enc-recent-card span { color: var(--edition-muted); font: .65rem/1.2 var(--ui-font); }
.enc-recent-empty { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--edition-line); border-radius: 12px; color: var(--edition-muted); }
.enc-recent-empty > span { color: var(--edition-brass); font-size: 1.8rem; }
.enc-recent-empty p { margin: 0; font: .78rem/1.45 var(--ui-font); }
#app .enc-topic { margin: 34px 0; }
.enc-topic-divider { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.enc-topic-divider::after { content: ''; grid-column: 2; height: 1px; background: linear-gradient(90deg,var(--edition-brass),transparent); }
.enc-topic-divider > span { grid-row: 1 / 3; color: var(--edition-brass); font: 700 .56rem/1.4 var(--ui-font); letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
#app .enc-topic-divider h2 { grid-column: 2; margin: 0; font-size: 1.45rem; }
.enc-topic-divider h2 i { font-style: normal; margin-right: 5px; }
#app .enc-deck { overflow: hidden; border-color: color-mix(in srgb,var(--edition-brass) 32%,var(--edition-line)); box-shadow: 0 3px 10px #48321a0d; }
#app .enc-deck summary { display: grid; grid-template-columns: 78px minmax(0,1fr) 26px; align-items: center; gap: 12px; min-height: 86px; padding: 0 13px 0 0; }
.enc-deck-cover { position: relative; align-self: stretch; min-height: 86px; overflow: hidden; background: var(--edition-paper); }
.enc-deck-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-position) center; filter: sepia(.18) saturate(.9); }
.enc-deck-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 65%,var(--edition-surface)); }
.enc-deck-cover i { position: absolute; z-index: 1; left: 8px; bottom: 7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f8eededb; color: var(--edition-ink); font-style: normal; }
#app .enc-deck summary .enc-deck-copy { display: block; min-width: 0; }
.enc-deck-copy b, .enc-deck-copy small { display: block; }
.enc-deck-copy b { font: 600 .98rem/1.2 var(--font-display); }
#app .enc-deck-copy small { margin: 5px 0 0; white-space: normal; font-size: .68rem; line-height: 1.35; }
.enc-deck-chevron { color: var(--edition-brass); font-size: 1.25rem; font-style: normal; transition: transform 180ms ease; }
.enc-deck[open] .enc-deck-chevron { transform: rotate(180deg); }
#app .enc-deck-cards:not(:empty) { padding: 10px; background: color-mix(in srgb,var(--edition-brass) 5%,var(--edition-paper)); }
#app .enc-grid .enc-card-illustrated { display: grid; grid-template-columns: minmax(118px,34%) minmax(0,1fr); align-items: start; overflow: hidden; }
#app .enc-grid .enc-card-illustrated .card-visual { width: 100%; align-self: stretch; min-height: 190px; }
#app .enc-grid .enc-card-illustrated .animal-card-art { object-fit: cover; }
@media (max-width: 520px) {
  .enc-recent-strip { grid-auto-columns: minmax(136px,45%); }
  #app .enc-grid .enc-card-illustrated { grid-template-columns: minmax(108px,36%) minmax(0,1fr); }
  #app .enc-grid .enc-card-illustrated .card-content { padding: 10px; }
  #app .enc-grid .enc-card-illustrated .card-content > p:not(.enc-source) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Una colocación real dentro de la guía, pequeña pero con la misma lógica material. */
.guide-practice { margin: 16px 0 10px; padding: 14px 10px 12px; border: 1px solid var(--edition-line); border-radius: 14px; background: radial-gradient(ellipse at 50% 0,#fff8e8,var(--edition-paper) 76%); text-align: center; }
.guide-handbook { --guide-accent: var(--edition-rust); }
.guide-handbook .guide-context { margin: 8px 0; color: var(--edition-brass); font: 600 .7rem/1.4 var(--ui-font); }
.guide-handbook .guide-steps { margin-top: 14px; }
.guide-handbook .gp-card { width: 122px; min-height: 164px; overflow: hidden; isolation: isolate; }
.guide-handbook .gp-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; z-index: -1; }
.guide-handbook .gp-reference > img { width: 100%; height: 60px; object-fit: cover; border-radius: 3px; margin-bottom: 6px; }
.guide-handbook .gp-reference { align-content: start; }
.guide-handbook .gp-reference small { display: block; font-size: .6rem; }
.guide-handbook .gp-card small { font-size: .7rem; }
.guide-handbook .gp-card em { top: 57px; font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.guide-handbook .gp-feedback { font-size: .76rem; min-height: 44px; }
.guide-handbook .gp-line button { min-width: 32px; touch-action: manipulation; }
.guide-handbook .gp-reset { min-height: 44px; }
.guide-index-hint { margin: 22px 0 10px; color: var(--edition-muted); font: .76rem/1.5 var(--ui-font); }
.guide-chapter { border: 1px solid var(--edition-line); border-radius: 13px; margin: 9px 0; background: var(--edition-surface); overflow: hidden; }
.guide-chapter > summary { display: grid; grid-template-columns: 32px minmax(0,1fr) 20px; align-items: center; gap: 10px; padding: 15px 12px; cursor: pointer; list-style: none; min-height: 56px; }
.guide-chapter > summary::-webkit-details-marker { display: none; }
.guide-chapter > summary:focus-visible { outline: 2px solid var(--edition-rust); outline-offset: -4px; border-radius: 12px; }
.guide-chapter-number { color: var(--edition-brass); font: 600 .85rem var(--font-display); }
.guide-chapter summary b { display: block; color: var(--edition-ink); font: 600 1rem/1.15 var(--font-display); }
.guide-chapter summary small { display: block; margin-top: 4px; color: var(--edition-muted); font: .68rem/1.4 var(--ui-font); }
.guide-chapter summary i { color: var(--edition-rust); font: normal 1.3rem var(--ui-font); transition: transform 180ms ease; }
.guide-chapter[open] summary i { transform: rotate(45deg); }
.guide-chapter[open] { border-color: var(--edition-brass); }
.guide-chapter-body { padding: 0 14px 16px; }
.guide-chapter-body h4 { margin: 18px 0 6px; color: var(--edition-ink); font: 600 1rem var(--font-display); }
.guide-chapter-body p { margin: 10px 0; color: var(--edition-muted); font-size: .8rem; }
.guide-drawing { display: block; width: min(100%,220px); height: 105px; margin: 4px auto 14px; padding: 8px; color: var(--edition-brass); background: radial-gradient(ellipse,#b78a3820,transparent 72%); }
.guide-handbook .guide-card { background: var(--edition-paper); }
.guide-handbook .guide-card small { font-size: .78rem; }
.guide-handbook .guide-levels > div { grid-template-columns: minmax(65px,.6fr) minmax(0,1.4fr); background: var(--edition-paper); }
.guide-pulse-table { width: 100%; border-collapse: collapse; font: .75rem/1.45 var(--ui-font); }
.guide-pulse-table caption { text-align: left; padding: 16px 0 8px; font-weight: 700; color: var(--edition-ink); }
.guide-pulse-table th, .guide-pulse-table td { padding: 10px 7px; border-bottom: 1px solid var(--edition-line); text-align: left; }
@media (prefers-reduced-motion: no-preference) {
  .guide-chapter[open] .guide-chapter-body { animation: guide-chapter-enter 260ms ease-out; }
  .guide-chapter[open] .guide-drawing { animation: guide-ink-enter 450ms ease-out; }
  .guide-handbook .guide-practice.is-correct .gp-reference { animation: guide-ink-enter 350ms ease-out; }
  .guide-handbook [data-guide-value]:not([hidden]) { animation: guide-value-stamp 280ms ease-out; }
}
@keyframes guide-value-stamp { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes guide-chapter-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes guide-ink-enter { from { opacity: .15; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .guide-chapter summary i { transition: none; } }
.guide-practice-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 4px 12px; text-align: left; }
.guide-practice-head span { color: var(--edition-rust); font: 700 .62rem/1.3 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; }
.guide-practice-head small { color: var(--edition-muted); font: .58rem/1.3 var(--ui-font); }
.gp-card { position: relative; display: grid; align-content: space-between; width: 92px; min-height: 116px; margin: 0 auto 9px; padding: 10px 9px; border: 2px solid #8f4a30; border-radius: 9px; background: linear-gradient(145deg,#f8eed8,#e3c68f); color: #34271d; box-shadow: 0 8px 15px #3d29182c; transition: transform 260ms ease,box-shadow 260ms ease; }
.gp-card i { font: normal 700 .48rem/1.2 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; }
.gp-card b { font: 600 1.7rem/1 var(--font-display); }
.gp-card small { font: .58rem/1.15 var(--font-display); }
.gp-card em { position: absolute; inset: 39px 8px auto; color: var(--edition-rust); font: normal 700 1.1rem/1 var(--font-display); }
.guide-practice > p { margin: 7px 0; color: var(--edition-muted); font: .72rem/1.3 var(--ui-font); }
.gp-line { display: grid; grid-template-columns: 34px minmax(64px,1fr) 34px minmax(64px,1fr) 34px; align-items: stretch; gap: 4px; }
.gp-reference { display: grid; align-content: center; min-height: 72px; padding: 7px 5px; border: 1px solid #a98555; border-radius: 7px; background: #f3e2bf; color: #34271d; }
.gp-reference b { font: 700 .72rem/1 var(--font-display); }
.gp-reference small { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: .48rem/1.15 var(--ui-font); }
.gp-line button { min-width: 0; min-height: 72px; padding: 0; border: 1px dashed #b98b4d; border-radius: 7px; background: transparent; color: #94662f; font-size: 1.15rem; }
.gp-line button[aria-pressed="true"] { border-style: solid; background: #e5c98f; transform: scale(1.04); }
.gp-feedback { min-height: 34px; margin-top: 9px; color: var(--edition-muted); font: .67rem/1.35 var(--ui-font); }
.guide-practice.is-correct .gp-card { transform: translateY(4px); box-shadow: 0 2px 5px #3d291820,0 0 0 3px #b9975223; }
.guide-practice.is-correct .gp-feedback { color: #47704e; font-weight: 700; }
.guide-practice.is-wrong .gp-feedback { color: var(--edition-rust); }
.gp-reset { min-height: 34px; padding: 6px 12px; border: 0; background: transparent; color: var(--edition-brass); font: 700 .65rem var(--ui-font); text-decoration: underline; }

/* Ajustes muestra una mini página aislada: elegir no cambia toda la app hasta confirmar. */
.settings-look-preview { --preview-paper:#f3eee4; --preview-surface:#fbf8f2; --preview-ink:#302d27; --preview-muted:#756d62; --preview-accent:#9e4a2a; margin: 10px 0 14px; padding: 12px; border-radius: 13px; background: #7c746b; box-shadow: inset 0 0 0 1px #ffffff24; }
.settings-look-preview[data-preview-theme="dark"] { --preview-paper:#18110b;--preview-surface:#2a1d11;--preview-ink:#f3e7cf;--preview-muted:#c8b995;--preview-accent:#e39a68; }
.look-preview-page { min-height: 142px; padding: 15px; border: 1px solid color-mix(in srgb,var(--preview-muted) 42%,transparent); border-radius: 8px; background: var(--preview-paper); color: var(--preview-ink); box-shadow: 0 7px 15px #17110b38; overflow: hidden; }
.look-preview-page > span { color: var(--preview-accent); font: 700 calc(.5rem * var(--preview-text))/1.2 var(--ui-font); letter-spacing: .15em; }
.look-preview-page h3 { margin: 5px 0 2px; color: var(--preview-ink); font: 500 calc(1.05rem * var(--preview-text))/1.1 var(--font-display); }
.look-preview-page p { margin: 0; color: var(--preview-muted); font: calc(.62rem * var(--preview-text))/1.35 var(--ui-font); }
.look-preview-page > div { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 8px; border-radius: 6px; background: var(--preview-surface); }
.look-preview-page i { width: 36px; height: 27px; border-radius: 4px; background: linear-gradient(135deg,var(--preview-accent),color-mix(in srgb,var(--preview-accent) 25%,var(--preview-paper))); }
.look-preview-page b { color: var(--preview-accent); font: 600 calc(.9rem * var(--preview-text))/1 var(--font-display); }
.settings-apply-look:disabled { opacity: .65; }

/* Resultado de una sola mirada: cifra, marca, colección y logros antes de las acciones. */
#app .final-composition { padding: 24px 22px 20px; text-align: center; }
#app .final-composition .final-title { max-width: 24ch; margin: 5px auto 6px; font-size: clamp(1.65rem,6.5vw,2.45rem) !important; line-height: 1.08; }
.final-lead { max-width: 38ch; margin: 0 auto 14px; color: var(--edition-muted); font: .78rem/1.45 var(--ui-font); }
.final-metrics { display: grid; grid-template-columns: 1.25fr repeat(3,1fr); gap: 7px; margin: 12px 0 14px; }
.final-score,.final-stat { min-width: 0; min-height: 76px; display: grid; place-items: center; align-content: center; padding: 8px 5px; border: 1px solid var(--edition-line); border-radius: 9px; background: color-mix(in srgb,var(--edition-brass) 7%,var(--edition-surface)); }
.final-score { border-color: color-mix(in srgb,var(--edition-brass) 60%,var(--edition-line)); background: linear-gradient(145deg,#f8edcf,#e9d09c); }
.final-score strong { color: #744c25; font: 600 clamp(2.2rem,10vw,3.5rem)/.86 var(--font-display); }
.final-score span,.final-stat small { margin-top: 6px; color: var(--edition-muted); font: 700 .5rem/1.15 var(--ui-font); letter-spacing: .06em; text-transform: uppercase; }
.final-stat b { max-width: 100%; color: var(--edition-ink); font: 600 .88rem/1.05 var(--font-display); overflow-wrap: anywhere; }
#app .final-composition .logros-nuevos { margin: 8px auto 12px; }
#app .final-composition .logro-chip { padding: 7px 10px; }
#app .final-composition .logro-chip small { display: none; }
#app .final-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
#app .final-actions .btn { min-height: 43px; margin: 0; padding: 8px 10px; font-size: .75rem; }
#app .final-composition + .tournament-board { margin-top: 0; }
#app .atlas-final-page .atlas-final-fan { height: 138px; margin: 0 auto 10px; }
#app .atlas-final-page .atlas-final-fan > .timeline-card { left: calc(50% - 40px); top: 6px; width: 80px; min-width: 80px; height: 118px; transform-origin: center 150%; }
#app .atlas-final-page .atlas-final-fan .card-visual { height: 70px; min-height: 70px; }
#app .atlas-final-page .atlas-final-fan .card-content { padding: 3px; }
#app .atlas-final-page .atlas-final-fan h3,#app .atlas-final-page .atlas-final-fan .year { font-size: 7px; }
@media (max-width: 420px) {
  #app .final-composition { padding: 20px 15px 16px; }
  .final-metrics { grid-template-columns: 1.15fr repeat(3,1fr); gap: 5px; }
  .final-score,.final-stat { min-height: 68px; padding-inline: 3px; }
  .final-stat b { font-size: .72rem; }
  .final-score span,.final-stat small { font-size: .43rem; letter-spacing: .03em; }
  #app .final-actions { grid-template-columns: 1fr 1fr; }
}

/* Competición como cuaderno de viaje: cada ronda deja un capítulo sellado. */
.chapter-journey { width: 100%; margin: 8px 0 18px; overflow-x: auto; scrollbar-width: none; }
.chapter-journey::-webkit-scrollbar { display: none; }
.chapter-journey ol { position: relative; display: flex; width: max-content; min-width: 100%; gap: 0; margin: 0; padding: 8px 4px 4px; list-style: none; }
.chapter-journey ol::before { content: ''; position: absolute; top: 25px; left: 28px; right: 28px; height: 1px; background: var(--edition-line); }
.chapter-stop { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; width: 104px; color: var(--edition-muted); text-align: center; }
.chapter-stop > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--edition-line); border-radius: 50%; background: var(--edition-paper); color: var(--edition-muted); font: 700 .72rem var(--ui-font); }
.chapter-stop > small { margin-top: 7px; font: 700 .52rem/1.2 var(--ui-font); letter-spacing: .09em; text-transform: uppercase; }
.chapter-stop > b { width: 92px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .65rem/1.2 var(--font-display); }
.chapter-stop > i { margin-top: 3px; font: normal .5rem/1.2 var(--ui-font); }
.chapter-stop.complete > span { border-color: #8b6c32; background: #8b6c32; color: #fff8e8; box-shadow: 0 0 0 3px #8b6c3217; }
.chapter-stop.current > span { border-color: var(--edition-rust); background: #fff8e9; color: var(--edition-rust); box-shadow: 0 0 0 4px color-mix(in srgb,var(--edition-rust) 15%,transparent); transform: scale(1.08); }
.chapter-stop.current > :is(b,small) { color: var(--edition-rust); }
.tournament-score-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 8px 0 12px; }
.tournament-score-head span { color: var(--edition-brass); font: 700 .58rem/1.3 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; }
.tournament-score-head h2 { margin: 2px 0 0; }
.tournament-score-head > small { color: var(--edition-muted); font: .65rem/1.3 var(--ui-font); text-align: right; }
#app .tournament-score { margin: 0; }
#app .tournament-score li { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.tournament-score li > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #b9975217; color: var(--edition-brass); font: normal 700 .62rem var(--ui-font); }
.tournament-verdict { margin: 14px 0 0; padding: 12px; border: 1px solid var(--edition-line); background: #b9975214; text-align: center; }

/* La sala deja de ser una lista administrativa y se lee como una mesa real. */
.lobby-table-panel { min-width: 0; }
.lobby-table { position: relative; height: 430px; max-width: 520px; margin: 4px auto 8px; }
.lobby-table::before { content: ''; position: absolute; inset: 88px 76px; border: 2px solid #9a7243; border-radius: 48%; background: radial-gradient(ellipse at 50% 38%,#e9d5aa,#b98a50 72%,#8c6037); box-shadow: inset 0 0 0 8px #f4e4bf30, inset 0 -14px 22px #5b371d35, 0 12px 22px #49311b2b; }
.lobby-table-core { position: absolute; z-index: 1; inset: 151px 36%; display: grid; place-items: center; align-content: center; color: #fff5df; text-shadow: 0 1px 3px #39220f; }
.lobby-table-core span { font: 700 .52rem/1 var(--ui-font); letter-spacing: .18em; }
.lobby-table-core strong { font: 500 2rem/1 var(--font-display); }
.lobby-table-core small { font: .55rem/1.2 var(--ui-font); }
.table-seat { position: absolute; z-index: 2; display: grid; justify-items: center; width: 92px; min-height: 78px; padding: 6px 4px; text-align: center; transform: translate(-50%,-50%); }
.table-seat > span { display: grid; place-items: center; width: 43px; height: 43px; border: 2px solid #b99752; border-radius: 50%; background: var(--edition-surface); color: var(--edition-ink); font: 700 .72rem var(--ui-font); box-shadow: 0 4px 9px #35220f25; }
.table-seat > strong { width: 88px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .62rem/1.15 var(--ui-font); }
.table-seat > small { color: var(--edition-muted); font: .5rem/1.2 var(--ui-font); }
.table-seat.empty { opacity: .48; }
.table-seat.empty > span { border-style: dashed; font-size: 1rem; }
.table-seat.is-you > span { outline: 3px solid color-mix(in srgb,var(--edition-rust) 25%,transparent); }
.ready-seal { position: absolute; top: 0; right: 2px; padding: 3px 5px; border: 1px solid #47704e; border-radius: 2px; color: #47704e; background: #f8f0dc; font: normal 700 .43rem/1 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; transform: rotate(7deg); }
.table-seat .kick-btn { position: absolute; top: 34px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; font-size: .75rem; }
.table-seat:nth-child(2) { left: 50%; top: 8%; }.table-seat:nth-child(3) { left: 76%; top: 17%; }.table-seat:nth-child(4) { left: 90%; top: 45%; }.table-seat:nth-child(5) { left: 82%; top: 76%; }.table-seat:nth-child(6) { left: 62%; top: 92%; }.table-seat:nth-child(7) { left: 38%; top: 92%; }.table-seat:nth-child(8) { left: 18%; top: 76%; }.table-seat:nth-child(9) { left: 10%; top: 45%; }.table-seat:nth-child(10) { left: 24%; top: 17%; }
.lobby-ready-note { margin: 4px 0 0; color: var(--edition-muted); font: .68rem/1.4 var(--ui-font); text-align: center; }
.lobby-ready-note i { display: inline-block; margin-right: 5px; padding: 3px 5px; border: 1px solid #47704e; color: #47704e; font: normal 700 .48rem/1 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); }
@media (max-width: 520px) {
  .chapter-stop { width: 88px; }
  .chapter-stop > b { width: 78px; }
  .lobby-table { height: 390px; margin-inline: -6px; }
  .lobby-table::before { inset: 82px 64px; }
  .lobby-table-core { inset: 143px 34%; }
  .table-seat { width: 76px; }
  .table-seat > strong { width: 74px; }
  .table-seat > span { width: 38px; height: 38px; }
}

/* Colecciones como lámina editorial: pergamino claro, marcos de latón y navegación
   tallada. Esta capa final conserva la estructura y las imágenes reales del juego. */
#app[data-screen="home"] {
  background:
    radial-gradient(circle at 13% 7%, #fffdf4c9 0 4%, transparent 19%),
    linear-gradient(180deg, #eadbc0, #f5ead4 30%, #ecddc1);
}
#app[data-screen="home"] .home-gallery-shell {
  --edition-paper: #f1e3c8;
  --edition-surface: #f8edd8;
  --edition-ink: #2e1d14;
  --edition-muted: #765f49;
  --edition-line: #b89460;
  --edition-brass: #8b5e2d;
  isolation: isolate;
  max-width: 760px;
  padding-inline: clamp(18px, 5vw, 38px);
  padding-bottom: calc(122px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 92% 7%, transparent 0 82px, #9a754323 83px 84px, transparent 85px 105px, #9a75431a 106px 107px, transparent 108px),
    radial-gradient(circle at 8% 13%, transparent 0 118px, #9a75431c 119px 120px, transparent 121px),
    linear-gradient(90deg, #a9804b12 1px, transparent 1px) 0 0 / 47px 47px,
    radial-gradient(ellipse at 50% -4%, #fffef8 0, #f7ecd9 39%, #ecdbbd 100%);
  box-shadow: 0 0 48px #4d311a2b;
}
#app[data-screen="home"] .home-gallery-shell::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .48;
  background:
    linear-gradient(115deg, transparent 0 14%, #fff9e380 23%, transparent 37%),
    repeating-radial-gradient(circle at 50% 15%, transparent 0 54px, #926b3720 55px 56px, transparent 57px 82px);
  -webkit-mask-image: linear-gradient(#000 0 32%, transparent 66%);
  mask-image: linear-gradient(#000 0 32%, transparent 66%);
}
#app[data-screen="home"] .home-masthead {
  display: block;
  max-width: 620px;
  margin: 4px auto 32px;
  padding: 8px 0 0;
  text-align: center;
}
#app[data-screen="home"] .home-crest {
  width: clamp(118px, 29vw, 170px);
  margin: 0 auto -8px;
  filter: sepia(.12) saturate(.92) drop-shadow(0 5px 7px #58371921);
}
#app[data-screen="home"] .home-wordmark {
  color: #2f1c12;
  font-size: clamp(2.65rem, 9.5vw, 4.2rem);
  letter-spacing: -.035em;
  text-shadow: 0 1px #fff8e7;
}
#app[data-screen="home"] .home-tagline {
  margin-top: 5px;
  color: #6f4529;
  font-size: clamp(.61rem, 2vw, .78rem);
  font-weight: 650;
  letter-spacing: .28em;
  text-transform: uppercase;
}
#app[data-screen="home"] .home-ornament { margin-top: 16px; }
#app[data-screen="home"] .home-ornament span { width: 78px; background: #9a7448; }
#app[data-screen="home"] .home-ornament i { width: 11px; height: 11px; border-color: #9b682f; }
#app[data-screen="home"] .deck-collection { padding-top: 0; }
#app[data-screen="home"] .gallery { gap: 19px; }
#app[data-screen="home"] .home-gallery-shell .gallery-panel,
#app[data-screen="home"] .home-gallery-shell .gallery-panel.active {
  height: clamp(190px, 50vw, 300px);
  min-height: 190px;
  border: 0;
  border-radius: 15px;
  box-shadow: 0 10px 22px #2e251f40, 0 2px 5px #2e251f38;
}
#app[data-screen="home"] .gallery-panel .panel-art {
  -webkit-mask-image: none;
  mask-image: none;
}
#app[data-screen="home"] .gallery-panel .panel-art img {
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.9) contrast(1.08) brightness(.96);
}
#app[data-screen="home"] .gallery-panel::before {
  inset: 0;
  border: 0;
  border-radius: inherit;
  box-shadow: inset 0 -20px 28px #100d0b3d;
}
#app[data-screen="home"] .gallery-panel::after {
  background: linear-gradient(180deg, #1c130e1f 0, transparent 37%, #140d0961 68%, #130c09e8 100%);
}
#app[data-screen="home"] .gallery-panel .collection-foil {
  inset: 8px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(118deg, #fff8e817, transparent 31% 72%, #b98c5912);
}
#app[data-screen="home"] .gallery-panel .panel-depth-light {
  opacity: .38;
  background: radial-gradient(ellipse at 22% 18%, color-mix(in srgb, var(--scene-glow) 38%, #eef0e8), transparent 68%);
}
#app[data-screen="home"] .panel-history { --scene-glow: #d8c9ad; --scene-shade: #33271f; }
#app[data-screen="home"] .panel-entertainment { --scene-glow: #bd9278; --scene-shade: #2e2420; }
#app[data-screen="home"] .panel-science { --scene-glow: #82aeb0; --scene-shade: #18363a; }
#app[data-screen="home"] .panel-nature { --scene-glow: #9daa82; --scene-shade: #263629; }
#app[data-screen="home"] .panel-globe { --scene-glow: #91adb5; --scene-shade: #28383e; }
#app[data-screen="home"] .panel-mixed { --scene-glow: #a79bb2; --scene-shade: #372f39; }
#app[data-screen="home"] .gallery-panel .collection-index {
  top: 17px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 13px;
  border: 1px solid #cbc5b5a3;
  border-radius: 999px;
  color: #fff5df;
  background: #37322ec2;
  box-shadow: inset 0 1px #fff6, 0 3px 9px #160d0752;
  backdrop-filter: blur(5px) sepia(.25);
  font-size: .67rem;
  letter-spacing: .13em;
}
#app[data-screen="home"] .gallery-panel .collection-index::before {
  content: "▤";
  color: #d8d3c5;
  font-size: .9rem;
  line-height: 1;
}
#app[data-screen="home"] .gallery-panel .collection-open {
  top: 50%;
  right: 19px;
  width: 39px;
  height: 39px;
  border: 1px solid #ddd8ca;
  color: #fff6e2;
  background: #302d2aa8;
  box-shadow: 0 0 0 2px #76766f, inset 0 0 0 1px #fff5;
  transform: translateY(-50%) rotate(45deg);
}
#app[data-screen="home"] .gallery-panel .collection-open::after {
  font-size: 1.45rem;
  font-weight: 300;
  transform: rotate(-45deg);
}
#app[data-screen="home"] .gallery-panel .panel-label,
#app[data-screen="home"] .gallery-panel:not(.active) .panel-label,
#app[data-screen="home"] .gallery-panel.active .panel-label {
  z-index: 4;
  top: auto;
  right: 70px;
  bottom: 18px;
  left: 20px;
  transform: none;
}
#app[data-screen="home"] .gallery-panel .panel-label strong {
  color: #fff8e8;
  font-size: clamp(1.65rem, 6vw, 2.35rem);
  line-height: .98;
  text-shadow: 0 2px 5px #0f0907;
}
#app[data-screen="home"] .gallery-panel .panel-label small {
  margin-top: 5px;
  color: #f7e6c9;
  font-size: clamp(.72rem, 2.5vw, .93rem);
  line-height: 1.25;
  text-shadow: 0 2px 4px #0f0907;
}

/* La navegación no vive dentro de una caja: una base baja y arqueada une los cinco
   botones, dejando que la silueta superior acompañe sus curvas. */
html #app .home-nav.atlas-nav {
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  min-height: calc(68px + env(safe-area-inset-bottom));
  padding: 4px 12px calc(4px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  color: #3e3028;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  overflow: visible;
  isolation: isolate;
}
html #app .home-nav.atlas-nav::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7px 5px 0;
  border: 1px solid #fff8e0b8;
  border-bottom: 0;
  border-radius: 48% 48% 0 0 / 22px 22px 0 0;
  background:
    radial-gradient(ellipse at 18% 0%, #fffdf3bd 0 8%, transparent 31%),
    radial-gradient(ellipse at 82% 8%, #fff9e47a 0 6%, transparent 28%),
    linear-gradient(180deg, #fff9ed9e, #e9d7becf);
  -webkit-backdrop-filter: blur(9px) saturate(1.16);
  backdrop-filter: blur(9px) saturate(1.16);
  box-shadow:
    inset 0 1px 0 #fffef7,
    inset 0 -1px 0 #a98e6961,
    inset 12px 0 18px #fff8df26,
    0 -5px 14px #4c392318;
  pointer-events: none;
}
html #app .home-nav.atlas-nav::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 23px;
  right: 9%;
  left: 9%;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, #a9957b 9% 91%, transparent);
  box-shadow: 0 1px #fff8;
  pointer-events: none;
}
#app .home-nav.atlas-nav button {
  position: relative;
  z-index: 2;
  min-height: 59px;
  padding: 1px 2px 0;
  border-radius: 0;
  color: #49372d;
  background: transparent;
  box-shadow: none;
}
#app .home-nav.atlas-nav button + button::before {
  content: none;
}
#app .home-nav.atlas-nav button span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #aa9985c9;
  border-radius: 12px;
  color: #514035;
  background:
    radial-gradient(circle at 28% 18%, #fff 0 7%, transparent 31%),
    linear-gradient(145deg, #fffdf6d9, #ddd3c4bd);
  -webkit-backdrop-filter: blur(5px) saturate(1.12);
  backdrop-filter: blur(5px) saturate(1.12);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #aa9985a1, 0 3px 6px #46372a33, 0 0 0 2px #f8eddb9c;
  filter: none;
}
#app .home-nav.atlas-nav button:nth-child(2) span { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #a8b5a6, 0 3px 6px #41544238, 0 0 0 2px #e9eee5c4; }
#app .home-nav.atlas-nav button:nth-child(3) span { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b7a56f, 0 3px 6px #69572c35, 0 0 0 2px #f1ead6c4; }
#app .home-nav.atlas-nav button:nth-child(4) span { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #b69b98, 0 3px 6px #64454035, 0 0 0 2px #f1e6e2c4; }
#app .home-nav.atlas-nav button:nth-child(5) span { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9ca5b4, 0 3px 6px #38465d35, 0 0 0 2px #e7eaf0c4; }
#app .home-nav.atlas-nav svg { width: 20px; height: 20px; stroke-width: 1.7; }
#app .home-nav.atlas-nav small {
  color: inherit;
  margin-top: 4px;
  font: 600 clamp(.53rem, 1.9vw, .64rem)/1.05 var(--font-display);
}
#app .home-nav.atlas-nav button[aria-current] {
  color: #fff1cf;
  background: transparent;
}
#app .home-nav.atlas-nav button[aria-current] span {
  border-color: #9b4f3a;
  color: #fff8eb;
  background:
    radial-gradient(circle at 28% 18%, #ffe8d5bf 0 7%, transparent 31%),
    linear-gradient(145deg, #cf8061e8, #914632ed 62%, #6f3025f2);
  box-shadow: inset 1px 1px 0 #ffe8dcdb, inset -2px -2px 3px #59241d94, 0 4px 7px #7435224f, 0 0 0 3px #f0c7b38c, 0 0 12px #c86d4d3d;
}

/* Enciclopedia, Guía y Ajustes son también destinos de esta navegación. Conservan la
   barra visible y marcan su botón igual que Inicio y Perfil. */
#app > .overlay:has(> :is(.enc-modal, .settings-modal, .rules)) {
  place-items: stretch;
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#app > .overlay > :is(.enc-modal, .settings-modal, .rules) {
  width: 100%;
  max-width: none;
  max-height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: var(--edition-paper);
  box-shadow: none;
}
#app[data-screen="perfil"] > .shell { width: 100%; max-width: none; }
#app :is(.enc-modal, .settings-modal, .rules) .home-nav.atlas-nav { display: grid; }
#app :is(.enc-modal, .settings-modal, .rules):has(.home-nav.atlas-nav) { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
#app .home-nav.atlas-nav button[aria-current] small {
  color: #8a3f2f;
  text-decoration: underline;
  text-decoration-color: #ad6048;
  text-underline-offset: 5px;
}

@media (max-width: 520px) {
  #app[data-screen="home"] .home-gallery-shell { padding-inline: 22px; }
  #app[data-screen="home"] .home-masthead { margin: 0 auto 17px; padding-top: 0; }
  #app[data-screen="home"] .home-crest { width: 94px; margin-bottom: -7px; }
  #app[data-screen="home"] .home-wordmark { font-size: clamp(2.25rem, 10.8vw, 2.85rem); }
  #app[data-screen="home"] .home-tagline { margin-top: 2px; font-size: .53rem; letter-spacing: .2em; }
  #app[data-screen="home"] .home-ornament { margin-top: 9px; }
  #app[data-screen="home"] .home-ornament span { width: 62px; }
  #app[data-screen="home"] .gallery { gap: 13px; }
  #app[data-screen="home"] .home-gallery-shell .gallery-panel,
  #app[data-screen="home"] .home-gallery-shell .gallery-panel.active {
    height: clamp(154px, 41vw, 170px);
    min-height: 154px;
  }
  #app[data-screen="home"] .gallery-panel .collection-index { top: 12px; left: 14px; min-height: 27px; padding: 3px 11px; }
  #app[data-screen="home"] .gallery-panel .collection-open { right: 15px; width: 34px; height: 34px; }
  #app[data-screen="home"] .gallery-panel .panel-label,
  #app[data-screen="home"] .gallery-panel:not(.active) .panel-label,
  #app[data-screen="home"] .gallery-panel.active .panel-label { right: 60px; bottom: 13px; left: 16px; }
  #app[data-screen="home"] .gallery-panel .panel-label strong { font-size: clamp(1.45rem, 6vw, 1.75rem); }
  #app[data-screen="home"] .gallery-panel .panel-label small { font-size: .7rem; }
  html #app .home-nav.atlas-nav { width: 100%; bottom: 0; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app[data-screen="home"] .gallery-panel:hover { box-shadow: 0 14px 27px #2e251f52, 0 3px 7px #2e251f38; }
}

/* Lenguaje de movimiento común: la tinta aparece sobre el papel en un solo gesto.
   La marca persiste tras terminar JS: nunca reactivar una entrada CSS al limpiarlo. */
@keyframes continuum-ink-enter { from { opacity: 0; } to { opacity: 1; } }
#app > .overlay > :is(.enc-modal, .rules, .settings-modal) > .atlas-scroll-veil {
  top: calc(-1 * max(18px, env(safe-area-inset-top)));
  width: calc(100% + max(20px, env(safe-area-inset-left)) + max(20px, env(safe-area-inset-right)));
  margin-left: calc(-1 * max(20px, env(safe-area-inset-left)));
  margin-right: calc(-1 * max(20px, env(safe-area-inset-right)));
  border-radius: 0;
}
#app .motion-managed,
#app .motion-managed > :not(.spinner):not(.waiting-orbit),
#app .motion-managed :is(.atlas-landscape img, .atlas-specimens figure, .guide-step, .guide-card, .reveal, .result-mark, .result-mark::after, .comp-splash, .atlas-final-page > *, .game-row) {
  animation: none !important;
}
#app .dialog-enter:has(.motion-managed) { animation: none; }
#app .dialog-exit .modal { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  #app :is(.guide-chapter[open] .guide-chapter-body, .solo-fold[open] > :not(summary), .enc-deck[open] > :not(summary)) {
    animation: continuum-ink-enter 420ms var(--ease-out) backwards;
  }
  #app .guide-chapter[open] .guide-drawing { animation: none; }
}
/* Sellos y marcadores llegan una vez a su tamaño final, sin sobrepasarlo. */
@keyframes starter-crown-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes cuenta-late { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes date-ink-stamp { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #app .motion-managed, #app .motion-managed * { animation: none !important; transition: none !important; }
}

/* Pestañas del atlas: una anchura de lectura compartida y secciones jerarquizadas. */
#app > .overlay > :is(.enc-modal, .settings-modal, .rules) {
  padding-inline: max(20px, calc((100% - 1040px) / 2));
  scrollbar-gutter: stable;
}
#app[data-screen="perfil"] > .shell {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}
#app .atlas-page-heading { padding: 22px 0 28px; margin: 0 0 26px; border-bottom: 1px solid var(--edition-line); text-align: left; }
#app .atlas-page-heading .eyebrow { font: 600 .68rem/1.5 var(--ui-font); letter-spacing: .18em; color: var(--edition-brass); }
#app .atlas-page-heading h1 { margin: 8px 0 10px; font: 400 clamp(2.25rem, 5vw, 3.3rem)/1.1 var(--font-display); letter-spacing: -.035em; color: var(--edition-ink); }
#app .atlas-page-heading p { margin: 0; max-width: 58ch; color: var(--edition-muted); font: .95rem/1.6 var(--ui-font); }
#app :is(.settings-head, .guide-tools) { margin: 0; }
#app .enc-section { padding-top: 0; }
#app .enc-selection-heading { margin: 0 0 20px; }
#app .enc-selection-heading h2 { margin: 0 0 7px; font: 500 1.35rem/1.25 var(--font-display); }
#app #enc-count { margin: 0; font: .8rem/1.7 var(--ui-font); color: var(--edition-muted); }
#app .enc-toolbar { padding: 20px; border: 1px solid var(--edition-line); border-radius: 14px; background: var(--edition-surface); box-shadow: none; }
#app .enc-toolbar .field { margin-bottom: 0; }
#app .enc-toolbar label, #app .enc-lock-label { font: 600 .78rem/1.5 var(--ui-font); }
#app .enc-toolbar .enc-bands { gap: 7px; }
#app .enc-toolbar > .enc-bands, #app .enc-lock-field { margin-top: 16px; }
#app .enc-lock-field { border-top: 1px solid var(--edition-line); padding-top: 16px; }
#app .band-chip { min-height: 40px; padding: 8px 13px; border-radius: 8px; font: .78rem/1.35 var(--ui-font); }
#app .enc-topic { margin: 30px 0; }
#app .enc-topic-divider { margin-bottom: 14px; }
#app .enc-deck { margin: 10px 0; border-radius: 12px; box-shadow: none; }
#app .enc-deck > summary { padding: 14px 18px; gap: 18px; }
#app .enc-deck-copy b { font-size: 1.1rem; line-height: 1.35; }
#app .enc-deck-copy small { font: .76rem/1.5 var(--ui-font); margin-top: 5px; }
#app .enc-deck[open] { border-color: var(--edition-brass); }
#app .enc-deck-cards { padding: 0 16px 16px; }
#app .enc-empty { border: 1px dashed var(--edition-line); border-radius: 12px; padding: 32px 20px; color: var(--edition-muted); }
#app .guide-content { max-width: 820px; margin-inline: auto; }
#app .guide-start { padding: clamp(18px,3vw,30px); background: var(--edition-surface); border: 1px solid var(--edition-line); border-radius: 16px; }
#app .guide-start > h2 { margin: 0 0 8px; font: 500 1.5rem/1.25 var(--font-display); }
#app .guide-context { font-size: .78rem; line-height: 1.5; }
#app .guide-lead { font-size: .95rem; line-height: 1.7; }
#app .guide-steps { gap: 12px; margin-block: 22px; }
#app .guide-step { padding: 16px 12px; background: var(--edition-paper); border: 0; border-radius: 10px; }
#app .guide-step small, #app .guide-note { font-size: .82rem; line-height: 1.6; }
#app .guide-practice { max-width: 480px; margin: 22px auto 14px; background: var(--edition-paper); }
#app .atlas-section-heading { margin: 32px 0 16px; }
#app .atlas-section-heading h2 { font: 500 1.4rem/1.3 var(--font-display); margin: 0 0 6px; }
#app .guide-index-hint { margin: 0; font-size: .85rem; }
#app .guide-chapter { border-radius: 12px; margin: 10px 0; }
#app .guide-chapter > summary { padding: 19px 18px; grid-template-columns: 32px minmax(0,1fr) 20px; gap: 14px; }
#app .guide-chapter summary small { font-size: .78rem; }
#app .guide-chapter-body { padding: 0 24px 22px; }
#app .guide-chapter-body p { font-size: .9rem; line-height: 1.65; }
#app .rules > .btn-block { display: block; max-width: 820px; margin: 24px auto 0; }
#app .perfil-section { padding-top: 0; }
#app .perfil-section > .lead { margin: 0 0 16px; font: .9rem/1.6 var(--ui-font); color: var(--edition-muted); }
#app .perfil-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 0; }
#app .perfil-stats > span { padding: 20px 12px; border: 0; border-radius: 0; background: transparent; text-align: center; }
#app .perfil-stats > span:nth-child(n+4) { border-top: 1px solid var(--edition-line); }
#app .perfil-stats b { color: var(--edition-brass); font: 400 2rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
#app .perfil-stats small { display: block; font: .76rem/1.5 var(--ui-font); }
#app .perfil-section > .panel { padding: 4px 12px; border-radius: 14px; box-shadow: none; }
#app .perfil-collection { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-top: 14px; padding: 16px 20px; border: 1px solid var(--edition-line); border-radius: 14px; background: var(--edition-surface); box-shadow: none; }
#app .perfil-collection b { display: block; color: var(--edition-brass); font: 400 1.7rem/1.2 var(--font-display); }
#app .perfil-collection span { display: block; margin-top: 3px; font: .8rem/1.4 var(--ui-font); }
#app .perfil-collection small { color: var(--edition-muted); font: .78rem/1.5 var(--ui-font); text-align: right; }
#app .profile-next-goal { margin: 12px 0; padding: 12px 15px; border-left: 3px solid var(--edition-brass); color: var(--edition-muted); font: .85rem/1.6 var(--ui-font); background: color-mix(in srgb, var(--edition-brass) 7%, transparent); }
#app .perfil-account { margin: 24px 0 4px; }
#app .perfil-main { margin-top: 28px; min-width: 0; }
#app .perfil-main > .section-label { margin: 30px 0 14px; font: 500 1.35rem/1.4 var(--font-display); text-transform: none; letter-spacing: 0; flex-wrap: wrap; }
#app .perfil-main > .section-label small { font: .8rem/1.5 var(--ui-font); color: var(--edition-muted); }
#app .turn-duel-profile { margin-top: 0; border-radius: 14px; padding: 22px; box-shadow: none; }
#app .turn-duel-profile h2 { margin: 0 0 14px; font: 500 1.4rem/1.3 var(--font-display); }
#app .turn-duel-profile p { font: .85rem/1.6 var(--ui-font); color: var(--edition-muted); }
#app .perfil-account .account-card { margin: 0; border-radius: 14px; overflow: hidden; }
#app .perfil-account .account-hero { padding: 22px; }
#app .perfil-account .account-actions { flex-wrap: wrap; }
#app .perfil-account .account-actions .btn { flex: 1 1 140px; }
#app .perfil-achievement-group { border: 1px solid var(--edition-line); background: var(--edition-surface); border-radius: 12px; margin: 10px 0; }
#app :is(.perfil-achievement-group, .settings-support) > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; padding: 18px 20px; }
#app :is(.perfil-achievement-group, .settings-support) > summary::-webkit-details-marker { display: none; }
#app :is(.perfil-achievement-group, .settings-support) > summary b { display: block; font: 500 1.05rem/1.4 var(--font-display); }
#app :is(.perfil-achievement-group, .settings-support) > summary small { display: block; margin-top: 4px; color: var(--edition-muted); font: .78rem/1.5 var(--ui-font); }
#app :is(.perfil-achievement-group, .settings-support) > summary i { font: normal 1.4rem var(--ui-font); color: var(--edition-brass); }
#app :is(.perfil-achievement-group, .settings-support)[open] > summary i { transform: rotate(45deg); }
#app .perfil-achievement-group .logro-grid { padding: 0 16px 16px; grid-template-columns: 1fr; }
#app .perfil-achievement-group .logro { background: var(--edition-paper); box-shadow: none; }
#app .settings-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; margin-bottom: 24px; }
#app .settings-layout .settings-section { margin: 0; padding: 24px; border: 1px solid var(--edition-line); border-radius: 14px; background: var(--edition-surface); }
#app .settings-section-heading { display: flex; gap: 12px; align-items: baseline; margin-bottom: 22px; }
#app .settings-section-heading > span { color: var(--edition-brass); font: .85rem var(--font-display); }
#app .settings-section-heading h2 { margin: 0 0 6px; font: 500 1.3rem/1.3 var(--font-display); }
#app .settings-section-heading p { margin: 0; color: var(--edition-muted); font: .8rem/1.55 var(--ui-font); }
#app .settings-look-preview { padding: 10px; background: var(--edition-line); border-radius: 10px; margin-bottom: 22px; box-shadow: none; }
#app .settings-layout :is(label, .opt-row) { font: 500 .85rem/1.5 var(--ui-font); }
#app .settings-volume { margin-top: 8px; }
#app .settings-volume output { float: right; color: var(--edition-brass); font-variant-numeric: tabular-nums; }
#app .settings-volume input[type="range"] { width: 100%; min-height: 28px; accent-color: var(--edition-brass); }
#app .settings-reset { max-width: 340px; margin: 22px auto 0; }
#app .settings-reset-help { text-align: center; margin: 8px auto 0; max-width: 48ch; }
#app .settings-layout .opt-row { padding-block: 16px; gap: 16px; }
#app .settings-layout .hint { text-align: left; font-size: .78rem; line-height: 1.6; }
#app .settings-support { margin: 12px 0; padding: 0; background: var(--edition-surface); border: 1px solid var(--edition-line); border-radius: 12px; }
#app .settings-support-body { padding: 0 22px 22px; }
#app .settings-support-body .hint { text-align: left; line-height: 1.7; }
#app .settings-done { max-width: 340px; margin: 28px auto 12px; display: block; }
#app :is(.settings-section, .enc-toolbar) :is(select, input[type="search"], textarea) { border-radius: 8px; min-height: 46px; font: .9rem/1.5 var(--ui-font); }
#app :is(.perfil-achievement-group, .settings-support) > summary:focus-visible { outline: 2px solid var(--edition-brass); outline-offset: 3px; border-radius: 10px; }
@media (max-width: 740px) {
  #app .settings-layout { grid-template-columns: 1fr; gap: 20px; }
  #app .atlas-page-heading { padding-block: 16px 22px; margin-bottom: 22px; }
  #app .settings-layout .settings-section { padding: 20px; }
}
@media (max-width: 420px) {
  #app > .overlay > :is(.enc-modal,.settings-modal,.rules) { padding-inline: 16px; }
  /* La veladura sale justo hasta el borde: el mismo margen que el relleno de 16 px. */
  #app > .overlay > :is(.enc-modal, .rules, .settings-modal) > .atlas-scroll-veil {
    width: calc(100% + max(16px, env(safe-area-inset-left)) + max(16px, env(safe-area-inset-right)));
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right)));
  }
  #app .perfil-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .perfil-stats > span:nth-child(n+3) { border-top: 1px solid var(--edition-line); }
  #app .enc-toolbar { padding: 16px; }
  #app .enc-deck > summary { padding: 12px; gap: 12px; }
  #app .guide-steps { grid-template-columns: 1fr; }
  #app .guide-start { padding: 16px; }
  #app .guide-chapter-body { padding-inline: 16px; }
}
/* Una sola zona de desplazamiento cuando una pestaña ocupa toda la pantalla. */
html:has(#app > .overlay > :is(.enc-modal,.settings-modal,.rules)),
body:has(#app > .overlay > :is(.enc-modal,.settings-modal,.rules)) { overflow: hidden; }
#app .atlas-page-heading h1, #app .settings-section-heading h2 { overflow-wrap: anywhere; }
#app .enc-album-heading { flex-wrap: wrap; gap: 8px; }
@media (max-width: 740px) {
  #app .enc-album-heading { display: block; }
}

#app .enc-toolbar-compact .band-chip { min-height: 44px; font-size: .75rem; }
#app .enc-toolbar-compact .enc-locks { flex-wrap: wrap; }

/* La portada: tres puertas —el reto del día, jugar y el atlas— con la misma lámina en
   sepia que la competición. El aviso de duelos solo aparece cuando hay algo pendiente. */
#app .home-doors { display: grid; gap: 12px; max-width: 720px; margin: 0 auto; }
#app .home-door { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; text-align: left; color: var(--edition-ink); border: 1px solid var(--edition-line); border-radius: 8px; background: var(--edition-surface); box-shadow: 0 4px 14px #352a170d; cursor: pointer; }
#app article.home-door { cursor: default; }
#app .home-door-art { width: 76px; height: 76px; overflow: hidden; border-radius: 6px; border: 1px solid var(--edition-line); }
#app .home-door-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: sepia(.55) saturate(.8); }
#app .home-door-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
#app .home-door-copy b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; line-height: 1.1; }
#app .home-door-copy small { font: .78rem/1.45 var(--ui-font); color: var(--edition-muted); }
#app .home-door-cta { display: inline-flex; margin-top: 4px; color: var(--edition-brass); font: 600 .75rem/1.3 var(--ui-font); }
#app .home-door-daily { grid-template-columns: 92px 1fr; border-color: color-mix(in srgb, var(--edition-brass) 55%, var(--edition-line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--edition-brass) 30%, transparent), 0 6px 18px #352a1714; }
#app .home-door-daily .home-door-art { width: 92px; height: 92px; }
#app .home-door-daily .home-door-copy b { font-size: 1.45rem; }
#app .home-daily-streak { display: inline-flex; align-items: center; gap: 6px; font: 600 .75rem/1.3 var(--ui-font); color: var(--edition-brass); }
#app .home-daily-streak .solo-glyph { width: 18px; height: 18px; }
#app .home-daily-share { margin-top: 10px; min-height: 44px; }
#app .home-door:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#app .home-duels { max-width: 720px; margin: 0 auto; }
#app .home-duels:not(:empty) { margin-bottom: 16px; }
#app .home-duels-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 16px; text-align: left; color: var(--edition-ink); border: 1px solid color-mix(in srgb, var(--edition-brass) 55%, var(--edition-line)); border-radius: 8px; background: var(--edition-surface); box-shadow: 0 4px 14px #352a170d; cursor: pointer; }
#app .home-duels-banner b { display: block; font: 700 .95rem/1.3 var(--ui-font); }
#app .home-duels-banner small { display: block; margin-top: 2px; font: .78rem/1.4 var(--ui-font); color: var(--edition-muted); }
#app .home-duels-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--edition-line); color: var(--edition-brass); font-size: 1rem; }
#app .home-duels-banner i { font-style: normal; font-size: 1.1rem; color: var(--edition-brass); }
#app .home-duels-banner:focus-visible { outline: 3px solid var(--edition-ink); outline-offset: 3px; }

/* Atlas: la colección arriba, con su puerta a la enciclopedia; debajo, el recorrido. */
#app .atlas-collection, #app .atlas-duels { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
#app .atlas-collection h2, #app .atlas-duels h2, #app .atlas-daily h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; }
#app .atlas-collection > div, #app .atlas-duels > div { flex: 1 1 240px; }
#app .atlas-duels p { margin: 0; color: var(--edition-muted); font: .84rem/1.5 var(--ui-font); }
#app .atlas-daily { margin-bottom: 16px; }
#app .atlas-daily .cal-card { margin-top: 14px; }

@media (max-width: 520px) {
  #app .atlas-collection .btn, #app .atlas-duels .btn { width: 100%; }
}
:root[data-theme="dark"] #app .home-door-art img { filter: sepia(.35) saturate(.8) brightness(.9); }
:root[data-theme="dark"] #app .home-duels-banner { box-shadow: 0 6px 18px #0005; }

/* Portada sin desplazamiento: la barra superior no tiene ni «volver» ni marca en
   Inicio, así que se retira y el logo sube; sus medidas siguen la altura de la pantalla
   para que las tres puertas quepan a la vista junto a la barra inferior. El interruptor
   de sonido se queda, pero sale del flujo del documento (posición absoluta, sin alto
   propio): aquí no hay ningún otro botón con el que pueda solaparse, así que flotar en
   esta esquina no cuesta el hueco que exige la portada sin desplazamiento. */
#app .home-doors-shell .atlas-topbar {
  position: absolute; inset: max(6px, env(safe-area-inset-top)) 0 auto 0;
  margin: 0; padding: 0; border: 0; min-height: 0; z-index: 5; pointer-events: none;
}
#app .home-doors-shell .atlas-topbar > :not(.atlas-topbar-actions) { display: none; }
#app .home-doors-shell .atlas-topbar-actions { pointer-events: auto; padding-right: max(4px, env(safe-area-inset-right)); }
#app[data-screen="home"] .home-doors-shell .home-masthead { margin: calc(env(safe-area-inset-top) + 10px) auto clamp(12px, 2.4svh, 22px); padding: 0; }
#app[data-screen="home"] .home-doors-shell .home-crest { width: clamp(78px, 13svh, 128px); margin-bottom: -6px; }
#app[data-screen="home"] .home-doors-shell .home-wordmark { font-size: clamp(2.2rem, 6.2svh, 3.4rem); }
#app[data-screen="home"] .home-doors-shell .home-ornament { margin-top: clamp(6px, 1.4svh, 12px); }
#app .home-doors-shell .home-door { padding-block: clamp(8px, 1.4svh, 12px); }
@media (max-height: 700px) {
  #app[data-screen="home"] .home-doors-shell .home-ornament { display: none; }
  #app .home-doors-shell .home-door-art { width: 64px; height: 64px; }
  #app .home-doors-shell .home-door { grid-template-columns: 64px 1fr; }
  #app .home-doors-shell .home-door-daily .home-door-art { width: 76px; height: 76px; }
  #app .home-doors-shell .home-door-daily { grid-template-columns: 76px 1fr; }
}
#app .home-daily-art { display: grid; place-items: center; background: color-mix(in srgb, var(--edition-brass) 10%, var(--edition-paper)); }
#app .home-daily-art svg { width: 100%; height: 100%; }
#app .home-daily-art .cal-sheet { fill: var(--edition-surface); stroke: var(--edition-brass); stroke-width: 1.4; }
#app .home-daily-art .cal-band { fill: var(--edition-brass); }
#app .home-daily-art .cal-ring { stroke: var(--edition-ink); stroke-width: 3; stroke-linecap: round; fill: none; opacity: .75; }
#app .home-daily-art .cal-month { fill: var(--edition-surface); font: 700 9px/1 var(--ui-font); letter-spacing: .12em; }
#app .home-daily-art .cal-day { fill: var(--edition-ink); font: 400 32px/1 var(--font-display); }
#app .home-daily-art .cal-week { fill: var(--edition-muted); font: 7px/1 var(--ui-font); letter-spacing: .04em; }

/* Presentación del reto diario: el calendario del día hasta que se desvela el mazo. */
#app .daily-splash-art { display: grid; place-items: center; background: color-mix(in srgb, var(--edition-brass) 12%, var(--edition-paper)); }
#app .daily-splash-art svg { width: 150px; height: 150px; }
#app .daily-splash-art::after { background: linear-gradient(transparent 70%, var(--edition-surface)); }
#app .daily-splash-art.is-revealed { animation: daily-art-in 520ms var(--ease-out) both; }
#app .daily-splash-art .cal-sheet { fill: var(--edition-surface); stroke: var(--edition-brass); stroke-width: 1.4; }
#app .daily-splash-art .cal-band { fill: var(--edition-brass); }
#app .daily-splash-art .cal-ring { stroke: var(--edition-ink); stroke-width: 3; stroke-linecap: round; fill: none; opacity: .75; }
#app .daily-splash-art .cal-month { fill: var(--edition-surface); font: 700 9px/1 var(--ui-font); letter-spacing: .12em; }
#app .daily-splash-art .cal-day { fill: var(--edition-ink); font: 400 32px/1 var(--font-display); }
#app .daily-splash-art .cal-week { fill: var(--edition-muted); font: 7px/1 var(--ui-font); letter-spacing: .04em; }
#app .daily-reel { display: block; min-height: 1.1em; color: var(--edition-muted); transition: color .3s; }
#app .daily-reel.is-revealed { color: var(--edition-ink); animation: daily-reel-land 420ms var(--ease-out) both; }
#app .daily-splash-rule { margin: -12px 0 22px; color: var(--edition-muted); font: .85rem/1.5 var(--ui-font); }
#app .daily-splash .comp-splash-start { background: var(--edition-ink); color: var(--edition-surface); }
@keyframes daily-art-in { from { opacity: 0; } }
@keyframes daily-reel-land { from { opacity: .3; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { #app .daily-splash-art.is-revealed, #app .daily-reel.is-revealed { animation: none; } }
#app .daily-splash-art.is-revealed { display: block; }
#app .daily-splash-art.is-revealed img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Identidad: bienvenida, selector de avatares, Atlas y avatares en la mesa. */
#app .bienvenida-shell { max-width: 460px; min-height: 100svh; display: grid; align-content: center; padding-block: calc(env(safe-area-inset-top) + 24px) calc(env(safe-area-inset-bottom) + 24px); }
#app .bienvenida { display: grid; justify-items: center; gap: 14px; text-align: center; }
#app .bienvenida h1 { margin: 0; color: var(--edition-ink); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.1; }
#app .bienvenida .lead { margin: 0; color: var(--edition-muted); }
#app .bienvenida-form { display: grid; gap: 10px; width: 100%; }
#app .bienvenida-form input, #app .identidad-modal input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--edition-line); border-radius: 8px; background: var(--edition-surface); color: var(--edition-ink); font: 1.1rem var(--ui-font); text-align: center; }
#app .bienvenida-form input:focus-visible, #app .identidad-modal input:focus-visible { outline: 3px solid var(--edition-brass); outline-offset: 1px; }
#app .bienvenida-error { min-height: 1.2em; margin: 0; color: #9a3b2a; font: .85rem/1.4 var(--ui-font); }
#app .bienvenida-error:empty { min-height: 0; }
#app .bienvenida .hint { margin: 0; color: var(--edition-muted); font: .8rem/1.4 var(--ui-font); }
#app .bienvenida-avatar { animation: comp-splash-pop 380ms var(--ease-out) both; }
#app .atlas-identidad { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
#app .atlas-identidad h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; overflow-wrap: anywhere; }
#app .atlas-identidad-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
#app .atlas-identidad-acciones .btn { min-height: 40px; padding: 8px 12px; font-size: .85rem; }
#app .identidad-modal form { display: grid; gap: 10px; }
#app .player-medallion-avatar { padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }
#app .player-medallion-avatar svg { width: 100%; height: 100%; }
#app .score i.score-avatar { background: transparent; overflow: hidden; }
#app .score i.score-avatar svg { width: 100%; height: 100%; }
#app .atlas-identidad-avatar { flex: none; display: grid; }
#app .atlas-identidad .hint { margin: 8px 0 0; color: var(--edition-muted); font: .78rem/1.4 var(--ui-font); }
#app .identidad-avatar-vivo { display: grid; place-items: center; margin: 4px 0 10px; }
#app .table-seat > span.seat-avatar, #app .manage-player > span.seat-avatar { padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; color: inherit; }
#app .seat-avatar svg { width: 100%; height: 100%; }

/* Portada Continuum: cada acceso es una lámina completa con el foco de lectura a la izquierda. */
#app .home-doors { gap: 12px; }
#app .home-door,
#app .home-door-daily {
  position: relative;
  display: block;
  box-sizing: border-box;
  height: clamp(104px, 14svh, 136px);
  min-height: 104px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px;
  text-align: left;
  background: var(--edition-surface);
  box-shadow: 0 5px 16px #352a1718;
  transform-style: preserve-3d;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
#app .home-door-art,
#app .home-door-daily .home-door-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: var(--edition-paper);
}
#app .home-door-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: sepia(.62) saturate(.76) contrast(.96);
}
#app .home-door::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--edition-surface) 97%, transparent) 0%,
    color-mix(in srgb, var(--edition-surface) 90%, transparent) 38%,
    color-mix(in srgb, var(--edition-surface) 40%, transparent) 67%,
    transparent 100%);
}
#app .home-door-copy {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: min(82%, 30rem);
  height: 100%;
  padding: 14px 20px;
  justify-content: center;
  gap: 5px;
  color: var(--edition-ink);
}
#app .home-door-copy b,
#app .home-door-daily .home-door-copy b { font-size: 1.3rem; line-height: 1.1; }
#app .home-door-copy small { max-width: 34ch; color: var(--edition-muted); }
#app .home-door-cta { margin-top: 2px; }
#app .home-door-daily { border-color: color-mix(in srgb, var(--edition-brass) 55%, var(--edition-line)); }
#app .home-daily-art img { object-position: 30% 42%; }
@media (hover: hover) { #app button.home-door:hover { transform: translateY(-2px); box-shadow: 0 9px 22px #352a1726; } }
#app button.home-door:active { transform: perspective(900px) rotateY(-3deg) scale(.985); }
#app .home-door-leaving { animation: continuum-door-turn 240ms cubic-bezier(.2,.7,.25,1) both; pointer-events: none; }
#app.home-transition-enter .shell { animation: continuum-page-enter 360ms cubic-bezier(.2,.7,.25,1) both; }
@keyframes continuum-door-turn {
  0% { transform: perspective(900px) rotateY(0) translateX(0) scale(1); opacity: 1; }
  100% { transform: perspective(900px) rotateY(-8deg) translateX(14px) scale(.97); opacity: .18; }
}
@keyframes continuum-page-enter {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-height: 700px) {
  #app .home-door,
  #app .home-door-daily { height: clamp(96px, 14svh, 120px); min-height: 96px; }
  #app .home-door-copy { padding: 10px 18px; }
}
@media (max-width: 480px) {
  #app .home-door-copy { width: 88%; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .home-door, #app .home-door-leaving, #app.home-transition-enter .shell { animation: none !important; transition: none !important; }
}


/* En pantallas bajas, los ajustes compactos antiguos no deben encoger la lámina de portada. */
#app .home-doors-shell .home-door-art,
#app .home-doors-shell .home-door-daily .home-door-art {
  display: block;
  width: 100%;
  height: 100%;
}

/* Capas explícitas para que las imágenes de portada queden visibles en Safari móvil. */
#app .home-doors-shell .home-door-art,
#app .home-doors-shell .home-door-daily .home-door-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}
#app .home-doors-shell .home-door::after { z-index: 1; }
#app .home-doors-shell .home-door-copy { position: relative; z-index: 2; }


/* Portada refinada: el interés vive en el fondo y el contenido respira dentro
   de las láminas. No se añaden rótulos ni sellos que compitan con la lectura. */
#app[data-screen="home"] {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 18% 4%, color-mix(in srgb, #fffdf6 82%, transparent) 0 5%, transparent 31%),
    radial-gradient(ellipse at 92% 36%, color-mix(in srgb, var(--edition-brass) 13%, transparent), transparent 34%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--edition-paper) 88%, #e9d5ae) 0%,
      var(--edition-paper) 46%,
      color-mix(in srgb, var(--edition-paper) 84%, #d7bc87) 100%);
}
#app[data-screen="home"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .7;
  background:
    radial-gradient(circle at 95% 9%, transparent 0 92px,
      color-mix(in srgb, var(--edition-brass) 20%, transparent) 93px 94px,
      transparent 95px 122px,
      color-mix(in srgb, var(--edition-brass) 13%, transparent) 123px 124px,
      transparent 125px 176px,
      color-mix(in srgb, var(--edition-brass) 10%, transparent) 177px 178px,
      transparent 179px),
    radial-gradient(circle at 3% 63%, transparent 0 118px,
      color-mix(in srgb, var(--edition-brass) 12%, transparent) 119px 120px,
      transparent 121px 166px,
      color-mix(in srgb, var(--edition-brass) 8%, transparent) 167px 168px,
      transparent 169px),
    linear-gradient(104deg, transparent 0 21%, color-mix(in srgb, #fff 24%, transparent) 34%, transparent 46%);
}
#app[data-screen="home"]::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(color-mix(in srgb, var(--edition-brass) 17%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--edition-brass) 17%, transparent) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 28%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 2%, #000 28%, #000 76%, transparent 100%);
}
#app[data-screen="home"] .home-doors-shell { position: relative; z-index: 1; }
#app[data-screen="home"] .home-doors-shell .home-masthead {
  position: relative;
  isolation: isolate;
}
#app[data-screen="home"] .home-doors-shell .home-masthead::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9% 9% 16%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--edition-brass) 13%, transparent), transparent 70%);
  filter: blur(7px);
}
#app[data-screen="home"] .home-doors-shell .home-crest img {
  filter: sepia(.1) saturate(.84) contrast(.99) drop-shadow(0 4px 8px color-mix(in srgb, var(--edition-brass) 18%, transparent));
}
#app[data-screen="home"] .home-doors-shell .home-wordmark {
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--edition-surface) 90%, transparent),
    0 3px 10px color-mix(in srgb, var(--edition-ink) 12%, transparent);
}
#app[data-screen="home"] .home-doors-shell .home-tagline { color: color-mix(in srgb, var(--edition-ink) 64%, var(--edition-brass)); }
#app[data-screen="home"] .home-doors-shell .home-ornament { opacity: .74; }

#app .home-doors-shell .home-doors { gap: 13px; }
#app .home-doors-shell .home-door,
#app .home-doors-shell .home-door-daily {
  height: auto;
  min-height: 124px;
  overflow: hidden;
  border-radius: 11px;
  border-color: color-mix(in srgb, var(--edition-brass) 38%, var(--edition-line));
  box-shadow: 0 7px 21px #352a1718, inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent);
}
#app .home-doors-shell .home-door::after {
  z-index: 1;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--edition-surface) 98%, transparent) 0%,
      color-mix(in srgb, var(--edition-surface) 93%, transparent) 39%,
      color-mix(in srgb, var(--edition-surface) 61%, transparent) 69%,
      color-mix(in srgb, var(--edition-surface) 15%, transparent) 100%);
}
#app .home-doors-shell .home-door-art img {
  transition: transform 600ms cubic-bezier(.2,.7,.25,1), filter 300ms ease;
}
#app .home-doors-shell .home-door-copy,
#app .home-doors-shell .home-door-daily .home-door-copy {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(80%, 31rem);
  min-height: 124px;
  height: auto;
  padding: 15px 19px;
  justify-content: center;
  gap: 5px;
  overflow: visible;
}
#app .home-doors-shell .home-door-copy > * {
  max-width: 100%;
  overflow-wrap: anywhere;
}
#app .home-doors-shell .home-door-copy b,
#app .home-doors-shell .home-door-daily .home-door-copy b {
  font-size: clamp(1.27rem, 3.6vw, 1.5rem);
  line-height: 1.08;
}
#app .home-doors-shell .home-door-copy small {
  display: block;
  font-size: clamp(.75rem, 2.15vw, .82rem);
  line-height: 1.4;
  color: color-mix(in srgb, var(--edition-ink) 72%, var(--edition-muted));
}
#app .home-doors-shell .home-door-cta {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 2px;
  padding: 0;
  color: var(--edition-brass);
  background: transparent;
  border: 0;
  box-shadow: none;
}
#app .home-doors-shell .home-door-daily {
  border-color: color-mix(in srgb, var(--edition-brass) 67%, var(--edition-line));
  box-shadow: 0 8px 23px color-mix(in srgb, var(--edition-brass) 14%, transparent), inset 3px 0 0 color-mix(in srgb, var(--edition-brass) 72%, transparent);
}
#app .home-doors-shell .home-door-daily::after {
  background:
    radial-gradient(ellipse at 90% 50%, color-mix(in srgb, var(--edition-brass) 15%, transparent), transparent 35%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--edition-surface) 99%, transparent) 0%,
      color-mix(in srgb, var(--edition-surface) 94%, transparent) 40%,
      color-mix(in srgb, var(--edition-surface) 60%, transparent) 70%,
      color-mix(in srgb, var(--edition-surface) 12%, transparent) 100%);
}
#app .home-doors-shell .home-door-daily .home-door-copy b { color: color-mix(in srgb, var(--edition-ink) 84%, var(--edition-brass)); }
#app .home-doors-shell .home-daily-streak {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}
#app .home-doors-shell .home-door-daily.is-done,
#app .home-doors-shell .home-door-daily.is-done .home-door-copy { min-height: 144px; }
#app .home-doors-shell .home-daily-share {
  position: relative;
  z-index: 3;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
}
@media (hover: hover) {
  #app .home-doors-shell button.home-door:hover .home-door-art img {
    transform: scale(1.035);
    filter: sepia(.5) saturate(.86) contrast(1);
  }
}
@media (max-width: 480px) {
  #app .home-doors-shell .home-door,
  #app .home-doors-shell .home-door-daily { min-height: 126px; }
  #app .home-doors-shell .home-door-copy,
  #app .home-doors-shell .home-door-daily .home-door-copy {
    width: 82%;
    min-height: 126px;
    padding: 14px 15px;
  }
  #app .home-doors-shell .home-door-copy b,
  #app .home-doors-shell .home-door-daily .home-door-copy b { font-size: 1.28rem; }
}
:root[data-text-size="150"] #app[data-screen="home"] .home-door,
:root[data-text-size="150"] #app[data-screen="home"] .home-door-copy { min-height: 160px; }
:root[data-text-size="200"] #app[data-screen="home"] .home-door,
:root[data-text-size="200"] #app[data-screen="home"] .home-door-copy { min-height: 200px; }
:root[data-text-size="150"] #app[data-screen="home"] .home-door-copy,
:root[data-text-size="200"] #app[data-screen="home"] .home-door-copy { width: 88%; }
:root[data-theme="dark"] #app[data-screen="home"] {
  background:
    radial-gradient(ellipse at 16% 4%, color-mix(in srgb, var(--edition-brass) 12%, transparent), transparent 32%),
    radial-gradient(ellipse at 94% 40%, color-mix(in srgb, var(--scene-wash) 10%, transparent), transparent 36%),
    linear-gradient(155deg, #21170f, var(--edition-paper) 48%, #130e09);
}
@media (prefers-reduced-motion: reduce) {
  #app .home-doors-shell .home-door-art img { transition: none; }
}

/* Lista de duelos: cada fila dice contra quién, de qué mazo, a quién le toca, por qué
   carta vais y el marcador. Toda la fila entra en el duelo. */
#app .turn-duel-profile-row { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 12px; }
#app .turn-duel-profile h3 { margin: 18px 0 8px; color: var(--edition-brass); font: 700 .7rem/1.4 var(--ui-font); letter-spacing: .12em; text-transform: uppercase; }
#app .turn-duel-entry { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 10px 14px; text-align: left; color: var(--edition-ink); border: 1px solid var(--edition-line); border-radius: 10px; background: var(--edition-surface); cursor: pointer; }
#app .turn-duel-entry.is-pending { border-color: color-mix(in srgb, var(--edition-brass) 60%, var(--edition-line)); box-shadow: inset 3px 0 0 var(--edition-brass); }
#app .turn-duel-entry:focus-visible { outline: 3px solid var(--edition-brass); outline-offset: 2px; }
#app .turn-duel-entry-avatar { display: grid; place-items: center; }
#app .turn-duel-entry-copy { display: grid; gap: 2px; min-width: 0; }
#app .turn-duel-entry-copy b { font: 400 1.1rem/1.2 var(--font-display); overflow-wrap: anywhere; }
#app .turn-duel-entry-copy small { color: var(--edition-muted); font: .75rem/1.3 var(--ui-font); }
#app .turn-duel-entry-state { font: 600 .82rem/1.35 var(--ui-font); }
#app .turn-duel-entry.is-pending .turn-duel-entry-state { color: var(--edition-brass); }
#app .turn-duel-entry-state em { color: var(--edition-muted); font-style: normal; font-weight: 400; }
#app .turn-duel-entry-score { color: var(--edition-muted); font: .78rem/1.3 var(--ui-font); }
#app .turn-duel-entry > i { color: var(--edition-brass); font-style: normal; font-size: 1.1rem; }
#app .turn-duel-profile-row .turn-duel-row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
#app .turn-duel-profile-row .turn-duel-row-actions .btn { min-height: 36px; padding: 6px 10px; font-size: .78rem; }

/* Ruleta del reto diario: una ventana mecánica sobria que desacelera y revela el mazo. */
#app[data-screen="daily-intro"] {
  background:
    radial-gradient(ellipse at 50% 22%, color-mix(in srgb, var(--scene-wash) 18%, transparent), transparent 43%),
    radial-gradient(circle at 94% 10%, transparent 0 150px, color-mix(in srgb, var(--edition-brass) 12%, transparent) 151px 152px, transparent 153px),
    var(--edition-paper);
}
#app .pass-screen .daily-splash {
  width: min(100%, 560px);
  padding: 222px 34px 32px;
  border: 1px solid color-mix(in srgb, var(--edition-brass) 48%, var(--edition-line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--edition-surface) 97%, transparent);
  box-shadow:
    0 24px 60px color-mix(in srgb, var(--edition-ink) 14%, transparent),
    0 0 0 6px color-mix(in srgb, var(--edition-surface) 48%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
}
#app .daily-splash .daily-splash-art {
  height: 210px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 47%, color-mix(in srgb, var(--edition-brass) 14%, transparent), transparent 38%),
    linear-gradient(155deg, color-mix(in srgb, var(--edition-paper) 88%, #ead4a7), var(--edition-paper));
}
#app .daily-splash-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 176px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--edition-brass) 38%, transparent);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg,
      color-mix(in srgb, var(--edition-brass) 38%, transparent) 0 1deg,
      transparent 1deg 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 68%, #000 69% 71%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 0 68%, #000 69% 71%, transparent 72%);
  opacity: .72;
  transform: translate(-50%, -50%);
  animation: daily-dial-turn 11s linear infinite;
}
#app .daily-splash-art svg {
  position: relative;
  z-index: 2;
  width: 136px;
  height: 136px;
  filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--edition-ink) 13%, transparent));
}
#app .daily-splash-art::after {
  z-index: 3;
  background: linear-gradient(transparent 54%, color-mix(in srgb, var(--edition-surface) 96%, transparent) 96%);
}
#app .daily-splash .chapter-number {
  margin-bottom: 16px;
  font-size: .7rem;
  letter-spacing: .2em;
}
#app .daily-splash h2 {
  margin: 0;
  font-size: inherit;
  line-height: 1;
}
#app .daily-splash .comp-splash-lead {
  display: block;
  margin-bottom: 9px;
  color: var(--edition-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
}
#app .daily-reel-stage {
  display: block;
  width: min(100%, 470px);
  margin: 0 auto 22px;
}
#app .daily-reel-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--edition-brass);
  font: 700 .58rem/1.2 var(--ui-font);
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: color 260ms ease;
}
#app .daily-reel-window {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 86px;
  padding: 11px 38px;
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--edition-brass) 48%, var(--edition-line));
  background:
    linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--edition-brass) 7%, transparent) 18% 82%,
      transparent),
    linear-gradient(180deg,
      color-mix(in srgb, var(--edition-paper) 45%, transparent),
      color-mix(in srgb, var(--edition-surface) 88%, transparent) 50%,
      color-mix(in srgb, var(--edition-paper) 45%, transparent));
  box-shadow:
    inset 0 12px 18px -18px color-mix(in srgb, var(--edition-ink) 38%, transparent),
    inset 0 -12px 18px -18px color-mix(in srgb, var(--edition-ink) 38%, transparent);
}
#app .daily-reel-window::before,
#app .daily-reel-window::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  transform: translateY(-50%);
}
#app .daily-reel-window::before {
  left: 12px;
  border-left: 0;
  border-right: 8px solid var(--edition-brass);
}
#app .daily-reel-window::after {
  right: 12px;
  border-right: 0;
  border-left: 8px solid var(--edition-brass);
}
#app .daily-reel {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 2.15em;
  color: color-mix(in srgb, var(--edition-ink) 72%, var(--edition-muted));
  font: 400 clamp(1.5rem, 5.3vw, 2.55rem)/1.06 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
  transition: color 260ms ease;
}
#app .daily-reel.is-ticking {
  animation: daily-reel-tick 190ms cubic-bezier(.2,.7,.25,1) both;
}
#app .daily-reel.is-revealed {
  color: var(--edition-ink);
  animation: daily-reel-land 620ms cubic-bezier(.16,.84,.24,1) both;
}
#app .daily-splash.is-revealed .daily-reel-kicker { color: var(--scene-color); }
#app .daily-splash.is-revealed .daily-reel-window {
  border-color: color-mix(in srgb, var(--scene-color) 62%, var(--edition-line));
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--scene-wash) 15%, transparent), transparent 68%),
    color-mix(in srgb, var(--edition-surface) 90%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--scene-color) 12%, transparent),
    inset 0 12px 18px -20px var(--edition-ink),
    inset 0 -12px 18px -20px var(--edition-ink);
}
#app .daily-splash.is-revealed .daily-reel-window::before { border-right-color: var(--scene-color); }
#app .daily-splash.is-revealed .daily-reel-window::after { border-left-color: var(--scene-color); }
#app .daily-splash-art.is-revealed {
  display: block;
  animation: daily-art-reveal 760ms cubic-bezier(.16,.84,.24,1) both;
}
#app .daily-splash-art.is-revealed::before { opacity: 0; animation: none; }
#app .daily-splash-art.is-revealed img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 54%;
}
#app .daily-splash-rule {
  margin: -5px 0 20px;
  color: var(--edition-muted);
  font-size: .8rem;
  animation: daily-control-in 420ms 120ms var(--ease-out) both;
}
#app .daily-splash .comp-splash-start {
  min-height: 56px;
  border-radius: 8px;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--scene-color) 88%, var(--edition-ink)),
    var(--scene-color));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--scene-color) 24%, transparent);
  animation: daily-control-in 480ms 170ms var(--ease-out) both;
}
@keyframes daily-dial-turn {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes daily-reel-tick {
  from { opacity: .08; filter: blur(5px); transform: translateY(-32%) scale(.97); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes daily-reel-land {
  0% { opacity: .25; filter: blur(4px); transform: translateY(-16px) scale(.98); }
  62% { opacity: 1; filter: blur(0); transform: translateY(3px) scale(1.018); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes daily-art-reveal {
  from { opacity: .25; clip-path: inset(0 0 76% 0); transform: scale(1.035); }
  to { opacity: 1; clip-path: inset(0); transform: scale(1); }
}
@keyframes daily-control-in {
  from { opacity: 0; transform: translateY(8px); }
}
@media (max-width: 520px) {
  #app .pass-screen .daily-splash {
    padding: 200px 18px 22px;
    border-radius: 13px;
  }
  #app .daily-splash .daily-splash-art { height: 188px; }
  #app .daily-reel-stage { margin-bottom: 18px; }
  #app .daily-reel-window { min-height: 78px; padding-inline: 27px; }
  #app .daily-reel { font-size: clamp(1.38rem, 7vw, 2rem); }
  #app .daily-splash .chapter-number { font-size: .61rem; letter-spacing: .14em; }
  #app .daily-splash-rule { font-size: .75rem; }
}
:root[data-theme="dark"] #app .pass-screen .daily-splash {
  background: color-mix(in srgb, var(--edition-surface) 97%, #000);
  box-shadow: 0 24px 60px #0008, 0 0 0 6px #0002;
}
@media (prefers-reduced-motion: reduce) {
  #app .daily-splash-art::before,
  #app .daily-reel.is-ticking,
  #app .daily-reel.is-revealed,
  #app .daily-splash-art.is-revealed,
  #app .daily-splash-rule,
  #app .daily-splash .comp-splash-start {
    animation: none;
  }
}


/* Ilustración neutral de la ruleta: cartas, continuidad y línea temporal. */
#app .daily-splash-art .daily-mystery-art {
  position: relative;
  z-index: 2;
  width: min(88%, 270px);
  height: 180px;
  overflow: visible;
  filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--edition-ink) 12%, transparent));
}
#app .daily-mystery-orbits {
  fill: none;
  stroke: color-mix(in srgb, var(--edition-brass) 30%, transparent);
  stroke-width: 1;
}
#app .daily-mystery-orbits ellipse:last-of-type { stroke-dasharray: 3 7; }
#app .daily-mystery-cards {
  transform-origin: 130px 92px;
  animation: daily-mystery-breathe 4.2s ease-in-out infinite;
}
#app .daily-mystery-card {
  fill: color-mix(in srgb, var(--edition-surface) 90%, var(--edition-paper));
  stroke: color-mix(in srgb, var(--edition-brass) 64%, var(--edition-line));
  stroke-width: 1.5;
}
#app .daily-mystery-card-main {
  fill: color-mix(in srgb, var(--edition-surface) 96%, #fff);
  stroke-width: 2;
}
#app .daily-mystery-card-line {
  fill: none;
  stroke: color-mix(in srgb, var(--edition-brass) 42%, transparent);
  stroke-width: 1;
}
#app .daily-mystery-card-seal {
  fill: none;
  stroke: color-mix(in srgb, var(--edition-brass) 32%, transparent);
  stroke-width: 1;
}
#app .daily-mystery-diamond {
  fill: color-mix(in srgb, var(--edition-brass) 20%, var(--edition-surface));
  stroke: var(--edition-brass);
  stroke-width: 1.2;
}
#app .daily-mystery-thread-shadow {
  fill: none;
  stroke: color-mix(in srgb, var(--edition-surface) 86%, transparent);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#app .daily-mystery-thread {
  fill: none;
  stroke: var(--edition-brass);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#app .daily-mystery-timeline {
  fill: var(--edition-surface);
  stroke: color-mix(in srgb, var(--edition-brass) 72%, var(--edition-line));
  stroke-width: 1.5;
}
#app .daily-mystery-timeline circle:nth-of-type(3) {
  fill: var(--edition-brass);
  stroke: color-mix(in srgb, var(--edition-surface) 80%, transparent);
  stroke-width: 2;
}
@keyframes daily-mystery-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.012); }
}
@media (max-width: 520px) {
  #app .daily-splash-art .daily-mystery-art { width: min(92%, 242px); height: 166px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .daily-mystery-cards { animation: none; }
}
#app .turn-duel-avatar:has(svg.avatar) { border: 0; background: transparent; overflow: visible; }
#app .turn-duel-avatar svg.avatar { width: 100%; height: 100%; }

/* v344 · La carta por jugar ocupa el centro y la línea queda como destino inferior. */
#app.atlas-board .board-question { width: min(100%, 430px); margin: 3px auto 5px; text-align: center; }
#app.atlas-board .board-question h2 { margin: 0 0 3px; color: var(--edition-ink); font: 700 clamp(1.2rem, 5.3vw, 1.65rem)/1.05 var(--font-display); letter-spacing: -.025em; }
#app.atlas-board .board-axis { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--edition-brass) 42%, transparent); border-radius: 999px; color: var(--edition-muted); background: color-mix(in srgb, var(--edition-surface) 58%, transparent); font: 650 .62rem/1 var(--ui-font); letter-spacing: .09em; text-transform: uppercase; }
#app.atlas-board .board-axis strong { color: var(--atlas-selection); }
#app.atlas-board .board-question p { margin: 4px 0 0; color: var(--edition-muted); font: .7rem/1.25 var(--ui-font); }

#app.atlas-board .board-focus-card { margin-top: 0; }
#app.atlas-board .board-focus-card > .hand-title { justify-content: center; margin-bottom: 3px; }
#app.atlas-board .board-focus-card > .hand-title h3 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
#app.atlas-board .board-focus-card .hand-solo { grid-template-columns: minmax(0, min(54vw, 220px)); justify-content: center; padding: 2px; }
#app.atlas-board[data-platform][data-device][data-screen] .board-focus-card .hand-solo .hand-card { width: 100%; height: auto !important; min-height: 0 !important; aspect-ratio: 2 / 3; padding: 11px; border-radius: 10px; }
#app.atlas-board .board-focus-card .hand-solo .carta-reverso { min-height: 0; height: auto; flex: 1 1 auto; }
#app.atlas-board[data-platform][data-screen] .board-focus-card .hand-solo .hand-card > strong,
#app.atlas-board[data-platform][data-screen] .atlas-hand-section .hand-card > strong { display: block; max-height: none; overflow: visible; white-space: normal; overflow-wrap: break-word; hyphens: auto; text-overflow: clip; }
#app.atlas-board[data-platform][data-screen] .board-focus-card .hand-solo .hand-card > strong { margin-top: 8px; font-size: clamp(.84rem, 3.6vw, 1rem); line-height: 1.15; }

/* En manos de varias cartas, la elegida adquiere la misma jerarquía sin ocultar las demás. */
#app.atlas-board .atlas-hand-section .hand:not(.hand-solo) .hand-card.selected { grid-column: 1 / -1; justify-self: center; width: min(62vw, 240px); min-height: 220px !important; aspect-ratio: 3 / 4 !important; }
#app.atlas-board .atlas-hand-section .hand:not(.hand-solo) .hand-card.selected .carta-reverso { min-height: 112px; }

/* El selector de escala tiene una fila propia, centrada antes del título de la línea. */
#app.atlas-board .board-timeline-section > .timeline-zoom { margin: 4px auto 5px; padding: 2px; justify-content: center; }
#app.atlas-board .board-timeline-section > .timeline-zoom [data-zoom-level] { width: auto; min-width: 52px; height: 36px; min-height: 36px; font-size: .72rem; }
#app.atlas-board .board-timeline-section > .timeline-toolbar { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; margin: 0 0 3px; }

/* La incisión de la línea es tenue; los huecos pasan a ser nodos circulares. */
#app.atlas-board .board-timeline-section { padding-top: 4px; }
#app.atlas-board .board-timeline-section .timeline { position: relative; align-items: stretch; padding: 2px 0 5px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--atlas-selection) 27%, transparent) 8%, color-mix(in srgb, var(--atlas-selection) 27%, transparent) 92%, transparent) center / 100% 1px no-repeat; }
#app.atlas-board .board-timeline-section .slot { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#app.atlas-board .board-timeline-section .slot > span { width: 46px; height: 46px; min-height: 46px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--atlas-selection) 52%, var(--edition-line)); color: color-mix(in srgb, var(--atlas-selection) 72%, var(--edition-muted)); background: color-mix(in srgb, var(--edition-surface) 68%, transparent); }
#app.atlas-board .board-timeline-section .timeline-card { box-shadow: 0 2px 0 #b89b6e, 0 6px 12px #4a341a1b; }

/* Marcador multijugador: avatar actual, nombre, avance y cartas restantes. */
#app.atlas-board .scoreboard-panel { margin: 0 0 5px; padding: 7px 8px 8px; border: 1px solid color-mix(in srgb, var(--edition-brass) 26%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--edition-surface) 43%, transparent); box-shadow: inset 0 1px 0 #fff8; }
#app.atlas-board .scoreboard-title { margin: 0 0 4px 3px; color: var(--edition-muted); font: 700 .56rem/1 var(--ui-font); letter-spacing: .2em; text-transform: uppercase; }
#app.atlas-board .scoreboard-panel .scoreboard { display: grid; gap: 4px; max-height: 108px; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y proximity; }
#app.atlas-board .scoreboard-panel .score { width: 100%; min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; align-items: center; padding: 4px 7px; border-radius: 10px; color: var(--edition-ink); background: color-mix(in srgb, var(--edition-surface) 64%, transparent); border: 1px solid color-mix(in srgb, var(--edition-line) 72%, transparent); box-shadow: none; }
#app.atlas-board .scoreboard-panel .score.active { color: var(--edition-ink); background: color-mix(in srgb, var(--atlas-selection) 6%, var(--edition-surface)); border-color: color-mix(in srgb, var(--atlas-selection) 44%, var(--edition-line)); box-shadow: inset 3px 0 0 var(--atlas-selection); }
#app.atlas-board .scoreboard-panel .score > .score-avatar { width: 40px; height: 40px; overflow: visible; border-radius: 50%; background: transparent; }
#app.atlas-board .scoreboard-panel .score > .score-avatar .avatar { width: 40px !important; height: 40px !important; }
#app.atlas-board .score-copy { min-width: 0; display: grid; gap: 4px; }
#app.atlas-board .score-copy > b { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
#app.atlas-board .score-progress { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--edition-line) 72%, transparent); }
#app.atlas-board .score-progress > i { display: block; width: var(--player-progress); height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--atlas-selection) 74%, var(--edition-brass)); }
#app.atlas-board .scoreboard-panel .score > em { width: auto; height: auto; display: grid; gap: 0; place-items: center; border-radius: 0; color: var(--edition-ink); background: transparent; }
#app.atlas-board .scoreboard-panel .score > em strong { font: 700 1.15rem/1 var(--font-display); }
#app.atlas-board .scoreboard-panel .score > em small { color: var(--edition-muted); font: .48rem/1 var(--ui-font); text-transform: uppercase; }

#app.atlas-board .placement-dock { gap: 4px; padding-top: 5px; }
#app.atlas-board .placement-dock > .btn-primary { min-height: 42px; border-radius: 12px; }

@media (max-width: 699px) {
  #app.atlas-board .game-head { margin-bottom: 3px; padding-block: 2px 4px; }
  #app.atlas-board .board-question { margin-block: 1px 4px; }
  #app.atlas-board .atlas-hand-section { margin-top: 0; }
  #app.atlas-board .atlas-hand-section > .hint { margin: 2px 0; }
  #app.atlas-board .board-timeline-section .timeline-wrap { flex: 0 1 auto; margin-bottom: 0; }
  #app.atlas-board .board-timeline-section .timeline-card { width: 112px; min-height: 148px; }
  #app.atlas-board[data-platform][data-screen] .board-timeline-section .timeline .card-visual { height: 86px; }
  #app.atlas-board .board-timeline-section :is(.slot, .slot-confirm) { min-height: 148px; }
}

@media (max-height: 760px) and (max-width: 699px) {
  #app.atlas-board .board-question p { display: none; }
  #app.atlas-board .board-focus-card .hand-solo { grid-template-columns: minmax(0, min(48vw, 190px)); }
  #app.atlas-board .scoreboard-panel .scoreboard { max-height: 82px; }
  #app.atlas-board .scoreboard-panel .score { grid-template-columns: 34px minmax(0,1fr) 38px; padding-block: 2px; }
  #app.atlas-board .scoreboard-panel .score > .score-avatar,
  #app.atlas-board .scoreboard-panel .score > .score-avatar .avatar { width: 32px !important; height: 32px !important; }
  #app.atlas-board .board-timeline-section .timeline-card { min-height: 132px; }
  #app.atlas-board .board-timeline-section :is(.slot, .slot-confirm) { min-height: 132px; }
}

/* Partida compacta: mano más pequeña y línea protagonista. */
@media (max-width: 699px) {
  #app.atlas-board .board-focus-card {
    margin-top: 0;
  }
  #app.atlas-board .board-focus-card > .hand-title {
    margin: 0 0 10px;
  }
  #app.atlas-board .board-focus-card .hand-solo {
    grid-template-columns: minmax(0, min(33.6vw, 131px));
    padding-block: 0;
  }
  #app.atlas-board[data-platform][data-device][data-screen] .board-focus-card .hand-solo .hand-card {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4;
    padding: 8px;
  }
  #app.atlas-board .board-focus-card .hand-solo .carta-reverso {
    margin-block: 4px;
  }
  #app.atlas-board[data-platform][data-screen] .board-focus-card .hand-solo .hand-card > strong {
    margin-top: auto;
    font-size: clamp(.72rem, 3vw, .86rem);
    line-height: 1.12;
  }
  #app.atlas-board .board-focus-card > .hint {
    max-width: 32rem;
    margin: 2px auto 3px;
    font-size: .62rem;
    line-height: 1.2;
  }
  #app.atlas-board .board-timeline-section {
    padding-top: 2px;
  }
  #app.atlas-board .board-timeline-section > .timeline-toolbar {
    margin-bottom: 1px;
  }
  #app.atlas-board .board-timeline-section .timeline-wrap {
    padding-block: 1px 3px;
  }
  #app.atlas-board .board-timeline-section .timeline-card {
    width: 132px;
    min-height: 184px;
  }
  #app.atlas-board[data-platform][data-screen] .board-timeline-section .timeline .card-visual,
  #app.atlas-board:has(.hand-solo)[data-platform][data-screen] .board-timeline-section .timeline .card-visual {
    width: auto;
    height: 114px;
    max-height: 114px;
    aspect-ratio: auto;
  }
  #app.atlas-board .board-timeline-section .animal-timeline-card .animal-card-art {
    object-position: center 44%;
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  }
  #app.atlas-board .board-timeline-section :is(.slot, .slot-confirm) {
    min-height: 184px;
  }
}

@media (max-width: 380px), (max-height: 740px) {
  #app.atlas-board .board-focus-card .hand-solo {
    grid-template-columns: minmax(0, min(30.4vw, 117px));
  }
  #app.atlas-board .board-timeline-section .timeline-card,
  #app.atlas-board .board-timeline-section :is(.slot, .slot-confirm) {
    min-height: 168px;
  }
  #app.atlas-board[data-platform][data-screen] .board-timeline-section .timeline .card-visual,
  #app.atlas-board:has(.hand-solo)[data-platform][data-screen] .board-timeline-section .timeline .card-visual {
    height: 102px;
    max-height: 102px;
  }
}

/* v349 · Espacios propios para la mano, los controles y las láminas. */
#app.atlas-board .atlas-hand-section {
  padding-block: 6px 12px;
}
#app.atlas-board .atlas-hand-section > .hand-title {
  position: relative;
  margin-bottom: 10px;
}
#app.atlas-board .atlas-hand-section .hand-card.selected {
  transform: none;
  outline: 1px solid color-mix(in srgb, var(--atlas-selection) 45%, transparent);
  outline-offset: 2px;
  border-width: 1px;
  box-shadow: 0 3px 9px #3d271c20;
}
#app.atlas-board .atlas-hand-section .hand-card.selected::before {
  display: none;
}
#app.atlas-board .atlas-hand-section .hand-solo .hand-card.selected::after {
  display: none;
}
#app.atlas-board[data-platform][data-screen] .hand-solo .hand-card > .hidden-date {
  padding-right: 0;
  font-size: .48rem;
  letter-spacing: .04em;
  line-height: 1.25;
}
#app.atlas-board .board-focus-card .hand-solo .carta-reverso {
  margin: 0;
}
#app.atlas-board[data-platform][data-screen] .board-focus-card .hand-solo .hand-card > strong {
  margin-top: auto;
  line-height: 1.18;
}
#app.atlas-board .board-timeline-section > .timeline-zoom {
  margin: 0 auto 7px;
  box-shadow: none;
  background: color-mix(in srgb, var(--edition-surface) 40%, transparent);
  border-color: color-mix(in srgb, var(--edition-brass) 24%, transparent);
}
#app.atlas-board .board-timeline-section > .timeline-zoom [data-zoom-level] {
  min-height: 36px;
  height: 36px;
  min-width: 48px;
  font-size: .65rem;
}
@media (max-width: 699px) {
  #app.atlas-board > .shell {
    box-sizing: border-box;
    min-height: 100svh;
    padding-inline: 12px;
  }
  #app.atlas-board .game-head {
    padding-bottom: 7px;
    margin-bottom: 5px;
  }
  #app.atlas-board .game-head > div:first-child {
    min-width: 0;
  }
  #app.atlas-board .game-head .turn-label {
    font-size: .58rem;
    letter-spacing: .035em;
  }
  #app.atlas-board .game-head .turn-name {
    font-size: 1.08rem;
  }
  #app.atlas-board .game-head .deck-count {
    min-width: 62px;
    padding-inline: 3px;
  }
  #app.atlas-board > .shell > .board-timeline-section {
    padding: 9px 7px 10px;
    margin-top: 3px;
    flex: 1 0 auto;
    border-radius: 12px;
    border-color: color-mix(in srgb, var(--edition-brass) 15%, transparent);
    background: color-mix(in srgb, var(--edition-surface) 24%, transparent);
    box-shadow: inset 0 1px 0 #fff8;
  }
  #app.atlas-board > .shell > .board-timeline-section .timeline-wrap {
    flex: 1 0 auto;
    padding-block: 8px 6px;
    align-items: center;
  }
  #app.atlas-board .board-timeline-section .timeline-card {
    width: 138px;
    min-height: 212px;
  }
  #app.atlas-board[data-platform][data-screen] .board-timeline-section .timeline .card-visual,
  #app.atlas-board:has(.hand-solo)[data-platform][data-screen] .board-timeline-section .timeline .card-visual {
    height: clamp(126px, 23svh, 168px);
    max-height: none;
    margin: 5px 5px 0;
  }
  #app.atlas-board .board-timeline-section .timeline .animal-card-art {
    object-fit: contain;
    object-position: center;
    filter: sepia(.25) saturate(.88) contrast(1.04);
    -webkit-mask-image: none;
    mask-image: none;
  }
  #app.atlas-board .board-timeline-section .timeline-card .card-content {
    padding: 7px 8px;
  }
  #app.atlas-board .board-timeline-section .timeline-card h3 {
    margin-bottom: 4px;
    font-size: .75rem;
    line-height: 1.18;
  }
  #app.atlas-board .board-timeline-section :is(.slot, .slot-confirm) {
    min-height: 212px;
  }
  #app.atlas-board .board-timeline-section .slot > span {
    width: 42px;
    height: 42px;
    min-height: 42px;
    border-color: color-mix(in srgb, var(--atlas-selection) 32%, var(--edition-line));
  }
}

/* Portada como una serie de láminas encuadernadas: papel, tinta y latón. */
:root:not([data-theme="dark"]) #app[data-screen="home"] {
  background: radial-gradient(ellipse at 12% 8%, #fff8e7, transparent 42%), radial-gradient(ellipse at 95% 72%, #c9ad7652, transparent 47%), #f3ede1;
}
#app[data-screen="home"] .home-door { --door-paper: #f5eddb; --door-ink: #3e3329; --door-edge: #a98b59; }
#app[data-screen="home"] .home-door[data-action="jugar"] { --door-paper: #f1eadc; --door-ink: #3e382d; --door-edge: #8e8060; }
#app[data-screen="home"] .home-door[data-action="perfil"] { --door-paper: #eee8da; --door-ink: #3e372e; --door-edge: #97856b; }
#app[data-screen="home"] .home-doors-shell .home-door {
  background: var(--door-paper); border: 1px solid color-mix(in srgb, var(--door-edge) 67%, #fff8e8);
  border-radius: 12px; box-shadow: 0 3px 0 color-mix(in srgb, var(--door-edge) 25%, #ddd0b6), 0 10px 21px #4939201d, inset 0 1px 0 #fff9ec;
}
#app[data-screen="home"] .home-doors-shell .home-door::before {
  content: ""; position: absolute; z-index: 3; inset: 5px; border: 1px solid #fff9e7a8; border-radius: 7px; box-shadow: inset 0 0 0 1px #6d563016; pointer-events: none;
}
#app[data-screen="home"] .home-doors-shell .home-door::after {
  background: linear-gradient(90deg, var(--door-paper) 0%, color-mix(in srgb, var(--door-paper) 97%, transparent) 29%, color-mix(in srgb, var(--door-paper) 79%, transparent) 51%, color-mix(in srgb, var(--door-paper) 12%, transparent) 100%);
}
#app[data-screen="home"] .home-doors-shell .home-door-art img { filter: sepia(.32) saturate(.91) contrast(1.13); opacity: 1; }
#app[data-screen="home"] .home-doors-shell .home-door-copy { min-height: 140px; width: 83%; padding: 17px 20px; gap: 6px; }
#app[data-screen="home"] .home-doors-shell .home-door-copy b { color: var(--door-ink); font-size: clamp(1.45rem, 5vw, 1.9rem); }
#app[data-screen="home"] .home-doors-shell .home-door-copy small { max-width: 29ch; color: #514b40; }
#app[data-screen="home"] .home-doors-shell .home-door-cta {
  margin-top: 5px; padding: 0 0 2px; border-radius: 0; border-bottom: 1px solid var(--door-edge); background: transparent; color: #745a35; font-weight: 700; box-shadow: none;
}
#app[data-screen="home"] .home-doors-shell .home-crest,
#app[data-screen="home"] .home-doors-shell .home-crest img { filter: sepia(.12) saturate(.9) drop-shadow(0 5px 8px #6d563024); }
#app[data-screen="home"] .home-doors-shell .home-wordmark { color: #3e3028; }
#app[data-screen="home"] .home-duels-banner { background: #f8eed7; border-color: #ac9163; }

/* Jugar: tres entradas y un único panel abierto; las alturas se animan en el DOM. */
#app .collection-drawer { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 440ms cubic-bezier(.2,.7,.25,1), visibility 440ms; }
#app .collection-drawer-inner { min-height: 0; overflow: hidden; }
#app .collection-entry.active > .collection-drawer { grid-template-rows: 1fr; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  #app .collection-drawer { transition: none; }
}
:root[data-theme="dark"] #app[data-screen="home"] .home-door { --door-paper: #332a20; --door-ink: #f1e1bf; --door-edge: #997d50; }
:root[data-theme="dark"] #app[data-screen="home"] .home-door[data-action="jugar"] { --door-paper: #302d24; --door-ink: #ece2c7; --door-edge: #888363; }
:root[data-theme="dark"] #app[data-screen="home"] .home-door[data-action="perfil"] { --door-paper: #312b23; --door-ink: #e8dcc6; --door-edge: #90816a; }
:root[data-theme="dark"] #app[data-screen="home"] .home-doors-shell .home-door-copy small { color: #f4ecd9; }
:root[data-theme="dark"] #app[data-screen="home"] .home-doors-shell .home-door-cta { color: #e6c58e; }
:root[data-theme="dark"] #app[data-screen="home"] .home-doors-shell .home-wordmark { color: #f5d4b2; }
:root[data-theme="dark"] #app[data-screen="home"] .home-duels-banner { background: #49371f; border-color: #c58d47; }

/* Ilustraciones impresas sobre el papel: sin marco fotográfico ni corte recto. */
#app .timeline-card:has(.animal-card-art) { isolation: isolate; }
#app .timeline-card .card-visual:has(> .animal-card-art),
#app.atlas-board[data-platform][data-screen] .board-timeline-section .timeline .card-visual:has(> .animal-card-art),
#app.atlas-board:has(.hand-solo)[data-platform][data-screen] .board-timeline-section .timeline .card-visual:has(> .animal-card-art) {
  position: relative; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; margin-inline: 0; width: 100%; filter: none;
}
#app .timeline-card .animal-card-art,
#app.atlas-board .board-timeline-section .timeline .animal-card-art {
  position: absolute; inset: 0 auto 0 50%; width: auto; height: 100%; max-width: 100%;
  transform: translateX(-50%);
  object-fit: contain; mix-blend-mode: multiply; border: 0; border-radius: 0;
  box-shadow: none; filter: sepia(.18) saturate(.95) contrast(1.03);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 76%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* Reverso común a todos los mazos: trama geométrica y relieve, sin figuras temáticas. */
#app .hand-card, .drag-card-preview {
  --cardback-fill: radial-gradient(ellipse at 50% 38%, #fff9eedd, #fff9ee00 60%), repeating-linear-gradient(45deg, #486d6610 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, #486d6610 0 1px, transparent 1px 12px), linear-gradient(145deg, #f9f2e2, #e6e6d5);
}
#app.atlas-board[data-screen] .hand .hand-card .carta-reverso,
#app .hand-card .carta-reverso,
.drag-card-preview .carta-reverso {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0;
  background: var(--cardback-fill); opacity: 1; pointer-events: none;
}
#app .hand-card .carta-reverso::before,
.drag-card-preview .carta-reverso::before {
  content: ""; position: absolute; inset: 6px; border: 3px double #7b92816b;
  border-radius: 6px; box-shadow: inset 0 0 0 1px #fff9, 0 0 0 1px #fff5;
}
#app .hand-card .carta-reverso::after,
.drag-card-preview .carta-reverso::after {
  content: ""; position: absolute; inset: auto; left: 50%; top: 42%;
  width: 29%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(45deg);
  border: 3px double #718f7859; border-radius: 6px; background: #fff8e933;
  box-shadow: 3px 3px 0 #fff8, -2px -2px 0 #72877916, inset 0 0 0 6px #faf5e759;
}
#app .hand-card > .hidden-date, .drag-card-preview > .hidden-date { color: #47675f; }
#app .hand-card > strong, .drag-card-preview > strong {
  color: #253f39; background: #f9f3e7ed; padding: 7px 5px 4px;
  border-top: 1px solid #9aab9370; border-radius: 4px; text-shadow: none;
}

/* Portada ilustrada: la lámina de referencia del juego. El papel se enmarca con una
   columna y un olivo a la izquierda, un astrolabio con la ciudad a la derecha y una
   franja de cartas marinas sobre la barra. Las piezas son recortes con transparencia:
   dejan libre el centro, donde la marca, las láminas y el texto siguen siendo HTML. */
/* Color liso de fondo: Safari en iPhone no respeta `fixed` en el lienzo y, al cambiar
   de tamaño la barra del navegador, lo que quede sin cubrir debe seguir siendo papel. */
html:root { background: #ecdfc4; }
html:root[data-theme="dark"] { background: #171009; }
html body, html:root[data-theme="dark"] body { background: transparent; }
/* Toda la pantalla, en cualquier vista del juego, es la misma lámina que la entrada:
   luz arriba, nubes a los lados y el globo abajo, en una sola ilustración continua que
   une la parte de arriba con la de abajo. En la portada, la columna y el astrolabio se
   posan encima. Todo va detrás del contenido (z-index -1) y fijo mientras se desplaza. */
html::before,
html body::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  /* Viewport grande: cubre también la franja que deja libre la barra de Safari al plegarse. */
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  opacity: 1;
  box-shadow: none;
}
html::before {
  background: #e9dcc3 url("assets/continuum-splash-clean-v3.webp") center bottom / cover no-repeat;
}
:root[data-theme="dark"]::before {
  background: linear-gradient(#140d08d6, #140d08e6), #140d08 url("assets/continuum-splash-clean-v3.webp") center bottom / cover no-repeat;
}
/* Fuera de la portada hay textos sobre el fondo: un velo de papel deja la ilustración
   como ambiente sin que las órbitas pasen por detrás de las letras. */
html:not(:has(#app[data-screen="home"]))::before {
  background: linear-gradient(#f1e7d2b8, #f1e7d299 60%, #f1e7d24d), #e9dcc3 url("assets/continuum-splash-clean-v3.webp") center bottom / cover no-repeat;
}
:root[data-theme="dark"]:not(:has(#app[data-screen="home"]))::before {
  background: linear-gradient(#140d08e6, #140d08f0), #140d08 url("assets/continuum-splash-clean-v3.webp") center bottom / cover no-repeat;
}
html body::before {
  background:
    url("assets/home-deco-left.webp") left top / min(165px, 39vw) auto no-repeat,
    url("assets/home-deco-right.webp") right top / min(165px, 39vw) auto no-repeat;
}
/* Fuera de la portada los títulos van a la izquierda y la ilustración de fondo basta. */
html body:not(:has(#app[data-screen="home"]))::before { content: none; }
:root[data-theme="dark"] body::before { opacity: .18; }
/* La portada ya no pinta su propio papel: deja ver la lámina común. */
:root #app[data-screen="home"], :root:not([data-theme="dark"]) #app[data-screen="home"], :root[data-theme="dark"] #app[data-screen="home"] { background: transparent; }
#app[data-screen="home"]::before, #app[data-screen="home"]::after { content: none; }

#app[data-screen="home"] .home-doors-shell .home-masthead { margin-top: calc(env(safe-area-inset-top) + clamp(16px, 4svh, 44px)); }
#app[data-screen="home"] .home-doors-shell .home-masthead::before { display: none; }
#app[data-screen="home"] .home-doors-shell .home-crest { width: clamp(96px, 24vw, 132px); margin-bottom: 2px; }
#app[data-screen="home"] .home-doors-shell .home-wordmark {
  color: #2a1a10;
  font-size: clamp(2.2rem, 10.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: .005em;
  text-shadow: 0 1px 0 #fff8e8, 0 4px 10px #4a2c1624;
}
#app[data-screen="home"] .home-doors-shell .home-wordmark::after { opacity: .9; }
#app[data-screen="home"] .home-doors-shell .home-tagline { margin-top: 9px; color: #3d2c20; font-weight: 500; letter-spacing: .3em; }
#app[data-screen="home"] .home-doors-shell .home-ornament { display: none; }

/* Láminas: papel marfil con filete dorado; la ilustración ocupa la parte derecha y se
   funde en el papel, y todo el texto va en la misma serif que el título. */
#app[data-screen="home"] .home-doors-shell .home-door {
  --door-paper: #f8f0df; --door-ink: #2a1c12; --door-edge: #c4a46c;
  min-height: 150px;
  border: 1.5px solid #d2b683;
  border-radius: 14px;
  box-shadow: 0 2px 0 #e2cfa6, 0 12px 26px #4a321a26, inset 0 1px 0 #fffaf0;
}
#app[data-screen="home"] .home-doors-shell .home-door::before { inset: 6px; border-color: #fffaf0cc; border-radius: 9px; box-shadow: inset 0 0 0 1px #b8955a33; }
#app[data-screen="home"] .home-doors-shell .home-door-art {
  left: auto !important;
  right: 0;
  width: 64% !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%);
  mask-image: linear-gradient(90deg, transparent, #000 38%);
}
#app[data-screen="home"] .home-doors-shell .home-door-art img { filter: sepia(.18) saturate(.95) contrast(1.05); }
#app[data-screen="home"] .home-doors-shell .home-door::after {
  background: linear-gradient(90deg, var(--door-paper) 0 30%, color-mix(in srgb, var(--door-paper) 72%, transparent) 46%, transparent 72%);
}
#app[data-screen="home"] .home-doors-shell .home-door[data-action="jugar"] .home-door-art img { object-position: 70% 50%; }
#app[data-screen="home"] .home-doors-shell .home-door-copy { min-height: 150px; width: 70%; padding: 18px 22px; gap: 7px; }
#app[data-screen="home"] .home-doors-shell .home-door-copy b { color: var(--door-ink); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 6.6vw, 2.05rem); letter-spacing: -.01em; }
#app[data-screen="home"] .home-doors-shell .home-door-copy small { max-width: 26ch; color: #4a3d31; font: 1rem/1.35 var(--font-display); }
#app[data-screen="home"] .home-doors-shell .home-door-cta {
  margin-top: 8px; padding-bottom: 4px; border-bottom: 1.5px solid #9c7641; color: #6e4a1f;
  font: 700 1.05rem/1.3 var(--font-display);
}
#app[data-screen="home"] .home-doors-shell .home-daily-streak { font-family: var(--font-display); }

/* Aviso de duelos: tarjeta de papel con sello circular, como las láminas. */
#app[data-screen="home"] .home-duels-banner {
  min-height: 70px; padding: 12px 18px; gap: 16px;
  border: 1.5px solid #d2b683; border-radius: 14px;
  background: linear-gradient(180deg, #fbf5e8, #f4ead5);
  box-shadow: 0 2px 0 #e2cfa6, 0 10px 22px #4a321a1f, inset 0 0 0 4px #fffaf0, inset 0 0 0 5px #c4a46c40;
}
#app[data-screen="home"] .home-duels-banner b { color: #2a1c12; font: 700 1.12rem/1.25 var(--font-display); }
#app[data-screen="home"] .home-duels-banner small { color: #5f5142; font: .95rem/1.35 var(--font-display); }
#app[data-screen="home"] .home-duels-mark { width: 44px; height: 44px; border: 1px solid #c9ad7a; background: radial-gradient(circle, #fffaf0, #efe2c6); color: #3d3024; font-size: 1.25rem; box-shadow: inset 0 0 0 3px #fffaf0; }
#app[data-screen="home"] .home-duels-banner i { color: #6e4a1f; font-size: 1.4rem; }

:root[data-theme="dark"] #app[data-screen="home"] .home-doors-shell .home-door { --door-paper: #332a20; --door-ink: #f1e1bf; border-color: #8c6f45; box-shadow: 0 12px 26px #0006; }
:root[data-theme="dark"] #app[data-screen="home"] .home-doors-shell .home-door-copy small { color: #e9dcc3; }
:root[data-theme="dark"] #app[data-screen="home"] .home-doors-shell .home-door-cta { color: #e6c58e; border-color: #c8a26a; }
:root[data-theme="dark"] #app[data-screen="home"] .home-doors-shell .home-wordmark { color: #f5dfc0; text-shadow: 0 4px 12px #0008; }
:root[data-theme="dark"] #app[data-screen="home"] .home-doors-shell .home-tagline { color: #d9c29b; }
:root[data-theme="dark"] #app[data-screen="home"] .home-duels-banner { background: #3a2d1f; border-color: #8c6f45; box-shadow: 0 10px 22px #0006; }
:root[data-theme="dark"] #app[data-screen="home"] .home-duels-banner b { color: #f1e1bf; }
:root[data-theme="dark"] #app[data-screen="home"] .home-duels-banner small { color: #d9c9aa; }
:root[data-theme="dark"] #app[data-screen="home"] .home-duels-mark { background: #2a2118; color: #e6c58e; box-shadow: none; }
@media (max-width: 380px) {
  #app[data-screen="home"] .home-doors-shell .home-door-copy { width: 76%; padding-inline: 16px; }
  #app[data-screen="home"] .home-doors-shell .home-door-copy small { font-size: .92rem; }
  #app[data-screen="home"] .home-duels-banner b { font-size: 1.02rem; }
}
#app[data-screen="home"] .home-doors-shell { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
:root #app[data-screen="daily-intro"] { background: radial-gradient(ellipse at 50% 22%, color-mix(in srgb, var(--scene-wash) 18%, transparent), transparent 43%); }
/* La mesa de juego conserva su fibra y su luz, pero ahora sobre la carta náutica común. */
#app.atlas-board {
  background:
    radial-gradient(ellipse at 48% 28%, #fff4cf70 0 16%, transparent 58%),
    repeating-linear-gradient(4deg, transparent 0 7px, #74502c08 7px 8px),
    repeating-linear-gradient(94deg, transparent 0 29px, #fff8e414 29px 30px),
    color-mix(in srgb, var(--edition-paper) 48%, transparent);
}

/* Portada compacta: caben al menos dos láminas enteras en un móvil con la barra del
   navegador visible. */
#app[data-screen="home"] .home-doors-shell .home-masthead { margin: calc(env(safe-area-inset-top) + clamp(4px, 1.6svh, 18px)) auto clamp(10px, 1.8svh, 18px); }
#app[data-screen="home"] .home-doors-shell .home-crest { width: clamp(70px, 17vw, 110px); margin-bottom: -2px; }
#app[data-screen="home"] .home-doors-shell .home-wordmark { font-size: clamp(2rem, 9.4vw, 3.2rem); }
#app[data-screen="home"] .home-doors-shell .home-doors { gap: 10px; }
#app[data-screen="home"] .home-doors-shell .home-door,
#app[data-screen="home"] .home-doors-shell .home-door-daily,
#app[data-screen="home"] .home-doors-shell .home-door-copy,
#app[data-screen="home"] .home-doors-shell .home-door-daily .home-door-copy { min-height: 112px; }
#app[data-screen="home"] .home-doors-shell .home-door-copy { padding: 12px 18px; gap: 3px; }
#app[data-screen="home"] .home-doors-shell .home-door-copy b { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
#app[data-screen="home"] .home-doors-shell .home-door-copy small { font-size: .92rem; line-height: 1.3; }
#app[data-screen="home"] .home-doors-shell .home-door-cta { margin-top: 4px; padding-bottom: 2px; font-size: .98rem; }
#app[data-screen="home"] .home-doors-shell .home-door-daily.is-done,
#app[data-screen="home"] .home-doors-shell .home-door-daily.is-done .home-door-copy { min-height: 124px; }
#app[data-screen="home"] .home-duels:not(:empty) { margin-bottom: 10px; }
#app[data-screen="home"] .home-duels-banner { min-height: 58px; padding: 8px 16px; }
#app[data-screen="home"] .home-duels-mark { width: 38px; height: 38px; font-size: 1.05rem; }
#app[data-screen="home"] .home-duels-banner b { font-size: 1.02rem; }
#app[data-screen="home"] .home-duels-banner small { font-size: .88rem; }

/* El lema va sin fondo: un halo de papel, invisible como tal, aparta de las letras las
   líneas y planetas de la ilustración para que se lean con buen contraste. */
#app[data-screen="home"] .home-doors-shell .home-tagline {
  display: inline-block;
  margin-top: 9px;
  padding: 0;
  background: none;
  box-shadow: none;
  color: #24170e;
  font-size: clamp(.66rem, 2.3vw, .82rem);
  letter-spacing: .24em;
  font-weight: 700;
  text-shadow: 0 0 4px #fbf4e4, 0 0 10px #fbf4e4, 0 0 18px #f6ecd6;
}
:root[data-theme="dark"] #app[data-screen="home"] .home-doors-shell .home-tagline { color: #f1dfbf; text-shadow: 0 0 6px #140d08, 0 0 14px #140d08; }

/* Marca un punto más presente: halo cálido de luz alrededor del emblema y del nombre,
   sin engrosar las letras. */
#app[data-screen="home"] .home-doors-shell .home-crest { width: clamp(78px, 19vw, 120px); }
#app[data-screen="home"] .home-doors-shell .home-crest img { filter: sepia(.08) saturate(.95) drop-shadow(0 0 10px #fff4d6) drop-shadow(0 5px 9px #5a341a40); }
#app[data-screen="home"] .home-doors-shell .home-wordmark {
  color: #24150c;
  text-shadow: 0 1px 0 #fffaf0, 0 0 12px #fbf2dc, 0 0 26px #f7e8c8, 0 6px 14px #4a2c1633;
}
#app[data-screen="home"] .home-doors-shell .home-wordmark::after { opacity: 1; }
:root[data-theme="dark"] #app[data-screen="home"] .home-doors-shell .home-wordmark { text-shadow: 0 0 14px #140d08, 0 4px 12px #000a; }

/* Barniz: la ilustración pierde un punto de saturación y gana un tono terracota; las
   columnas y el olivo, algo más. */
html::before { filter: saturate(.9) sepia(.08); }
html body::before { filter: saturate(.76) sepia(.2) hue-rotate(-6deg); }

/* Rayos de luz también desde la esquina derecha, como los que entran por la izquierda. */
html body:has(#app[data-screen="home"])::before {
  background:
    url("assets/home-deco-left.webp") left top / min(165px, 39vw) auto no-repeat,
    url("assets/home-deco-right.webp") right top / min(165px, 39vw) auto no-repeat,
    repeating-conic-gradient(from 200deg at 100% 0%, #fff8e400 0deg 5deg, #fff8e466 7deg, #fff8e400 10deg 15deg) right top / min(420px, 90vw) min(520px, 60vh) no-repeat;
}

/* Jugar con un punto más de color: el color lo ponen las láminas, que recuperan su
   tono; los tres recuadros comparten el mismo papel terracota suave. */
html:not(:has(#app[data-screen="home"]))::before {
  background: linear-gradient(#f3e3c8b3, #f2e1c494 60%, #f0dcbc4d), #e9dcc3 url("assets/continuum-splash-clean-v3.webp") center bottom / cover no-repeat;
}

/* Retratos ilustrados: el círculo, la moldura y la sombra pertenecen al juego.
   El recorte evita que se vea una miniatura cuadrada sobre el papel de la pantalla. */
#app .avatar-art,
.avatar-art {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--avatar-size);
  height: var(--avatar-size);
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--edition-brass, #a6814d) 54%, #f7edda);
  border-radius: 50%;
  background: #ead8b9;
  box-shadow: 0 2px 6px #34261332, inset 0 0 0 2px #fff6e980;
  vertical-align: middle;
  isolation: isolate;
}
#app .avatar-art img,
.avatar-art img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transform: scale(1.06);
}
#app .bienvenida-avatar .avatar-art,
#app .identidad-avatar-vivo .avatar-art,
#app .atlas-identidad-avatar .avatar-art,
#app .player-medallion-avatar .avatar-art {
  box-shadow: 0 5px 15px #34261335, 0 0 0 3px #fbf1df8c, inset 0 0 0 2px #fff9ea;
}
#app .score i.score-avatar,
#app .table-seat > span.seat-avatar,
#app .manage-player > span.seat-avatar,
#app .turn-duel-avatar,
#app .turn-duel-entry-avatar {
  display: inline-grid;
  place-items: center;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#app.atlas-board .scoreboard-panel .score > .score-avatar .avatar-art {
  width: 100% !important;
  height: 100% !important;
}
#app .duel-identity .duel-avatar { border: 0; background: transparent; box-shadow: none; }

/* Selector de retratos: la bienvenida conserva su composición y la colección
   se presenta como una página del Atlas, accesible también desde el perfil. */
#app .avatar-picker-trigger { display: inline-grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--edition-ink); cursor: pointer; font: inherit; }
#app .avatar-picker-trigger:focus-visible { outline: 3px solid var(--edition-brass); outline-offset: 5px; border-radius: 50%; }
#app .bienvenida-avatar { justify-self: center; }
#app .avatar-picker-cue { color: var(--edition-muted); font: 600 .76rem/1.2 var(--ui-font); letter-spacing: .04em; }
#app .avatar-picker-cue span { color: var(--edition-brass); }
#app .avatar-picker { width: min(94vw, 480px); max-height: min(82svh, 720px); padding: 20px 18px 12px; display: flex; flex-direction: column; overflow: hidden; background: #f8f0df; color: var(--edition-ink); }
#app .avatar-picker-header { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
#app .avatar-picker-header h2 { margin: 4px 0 0; font: 400 1.75rem/1.1 var(--font-display); }
#app .avatar-picker-close { width: 38px; height: 38px; flex: none; border: 1px solid var(--edition-line); border-radius: 50%; background: #fff9ed; color: var(--edition-ink); font-size: 1.6rem; cursor: pointer; }
#app .avatar-picker-intro { margin: 10px 0 16px; color: var(--edition-muted); font: .86rem/1.4 var(--ui-font); }
#app .avatar-picker-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 3px 14px; }
#app .avatar-picker-group + .avatar-picker-group { margin-top: 18px; }
#app .avatar-picker-group h3 { margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--edition-line); color: var(--edition-muted); font: 600 .76rem var(--ui-font); letter-spacing: .08em; text-transform: uppercase; }
#app .avatar-picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 4px; }
#app .avatar-picker-option { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 8px 2px 7px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--edition-ink); cursor: pointer; min-width: 0; }
#app .avatar-picker-option .avatar-art { max-width: 100%; }
#app .avatar-picker-option > span:last-child { max-width: 100%; font: .67rem/1.15 var(--ui-font); text-align: center; overflow-wrap: anywhere; }
#app .avatar-picker-option.is-selected { border-color: var(--edition-brass); background: #e8d9bb80; box-shadow: inset 0 0 0 1px #fff8e6; }
@media (hover: hover) { #app .avatar-picker-option:hover { background: #e8d9bb80; } }
#app .avatar-picker-option:focus-visible, #app .avatar-picker-close:focus-visible { outline: 3px solid var(--edition-brass); outline-offset: 2px; }
@media (max-width: 360px) { #app .avatar-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Paneles de Jugar solo y Retar a un amigo con la estética del resto: cristal terracota,
   rótulos en versalitas de latón y opciones como láminas de papel. La elegida se marca
   con filete y tinte terracota y un sello; todo el texto va en tinta oscura legible. */
#app .solo-home .solo-panel {
  position: relative;
  padding: 22px 18px 18px;
  border-radius: 18px;
  border: 1px solid #ffffff8c;
  background:
    radial-gradient(120% 50% at 15% 0%, #fffaf2a6, transparent 55%),
    linear-gradient(165deg, #faf1e4d9, #f0dcc6c7 60%, #e8c9abb8);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 #ffffffb3, inset 0 -1px 0 #b8653d2e, 0 12px 32px #7a3f1d24, 0 2px 6px #7a3f1d14;
}
#app .solo-home .solo-panel-head h3 { margin: 0; color: #2a1a10; font: 500 1.55rem/1.15 var(--font-display); letter-spacing: -.01em; }
#app .solo-home .solo-panel > p { margin: 6px 0 4px; color: #4a3a2c; font: .9rem/1.5 var(--ui-font); }
#app .solo-home .solo-panel .field { margin-top: 18px; }
#app .solo-home .solo-panel .field-label {
  display: flex; align-items: center; gap: 10px; margin-bottom: 9px;
  color: #8a5a2e; font: 700 .68rem/1.2 var(--ui-font); letter-spacing: .2em; text-transform: uppercase;
}
#app .solo-home .solo-panel .field-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #b8935a80, transparent); }

#app .solo-home .solo-panel .segmented { gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
#app .solo-home .solo-panel .segmented-option {
  display: grid; justify-items: start; align-content: start; gap: 10px;
  min-height: 0; padding: 14px 13px 13px;
  border: 1px solid #d6bf98; border-radius: 14px;
  color: #2a1a10; text-align: left;
  background: linear-gradient(165deg, #fffaf1, #f6ead8);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #5a341a12;
  transition: border-color var(--motion-base) ease, background var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
#app .solo-home .solo-panel .segmented-option b { color: #2a1a10; font: 600 1rem/1.2 var(--font-display); }
#app .solo-home .solo-panel .segmented-option small { margin-top: 4px; color: #5c4a3a; font: .74rem/1.35 var(--ui-font); opacity: 1; }
#app .solo-home .solo-panel .duel-option-mark { width: 36px; height: 36px; border: 1px solid #c9a86e; color: #8a5a2e; background: radial-gradient(circle, #fffaf0, #f1e2c6); box-shadow: inset 0 0 0 3px #fffaf0; }
#app .solo-home .solo-panel .segmented-option::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px;
  border: 1.5px solid #d6bf98; border-radius: 50%; pointer-events: none;
  transition: border-color var(--motion-base) ease, background var(--motion-base) ease;
}
#app .solo-home .solo-panel .segmented-option.is-on {
  border-color: #b8653d;
  background: linear-gradient(165deg, #fdf3ea, #f4dccb);
  box-shadow: 0 0 0 1px #b8653d, 0 10px 22px -12px #b8653dcc, inset 0 1px 0 #fff;
}
#app .solo-home .solo-panel .segmented-option.is-on .duel-option-mark { color: #fff8ee; border-color: #9c4f2c; background: radial-gradient(circle at 35% 30%, #c8784e, #9c4f2c); box-shadow: inset 0 1px 0 #ffffff55; }
#app .solo-home .solo-panel .segmented-option.is-on::after {
  border-color: #9c4f2c;
  background: radial-gradient(circle, #fff8ee 0 3px, #9c4f2c 3.6px);
  box-shadow: 0 1px 3px #7a3f1d40;
}
@media (hover: hover) and (pointer: fine) { #app .solo-home .solo-panel .segmented-option:not(.is-on):hover { border-color: #c9a06f; background: linear-gradient(165deg, #fffaf1, #f3e3cc); color: #2a1a10; } }
#app .solo-home .solo-panel .segmented-option:has(input:focus-visible) { outline: 2px solid #b8653d; outline-offset: 3px; }

#app .solo-home .solo-panel .duel-brief {
  margin-top: 16px; padding: 14px 15px 13px 17px;
  border-radius: 12px; border-left: 3px solid #b8653d;
  background: linear-gradient(165deg, #fffaf1e6, #f7ecdce0);
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px #5a341a10;
}
#app .solo-home .solo-panel .duel-brief > p { color: #2f2118; font: .88rem/1.5 var(--ui-font); }
#app .solo-home .solo-panel .duel-brief > .duel-rule { color: #5c4a3a; border-top-color: #b8935a40; }
#app .solo-home .solo-panel .duel-brief .solo-glyph { color: #9c4f2c; }
#app .solo-home .solo-panel .btn-primary { margin-top: 14px !important; border-radius: 12px; }

:root[data-theme="dark"] #app .solo-home .solo-panel { background: linear-gradient(165deg, #33261bdd, #22180fdd); border-color: #ffffff1f; box-shadow: inset 0 1px 0 #ffffff1f, 0 12px 32px #0008; }
:root[data-theme="dark"] #app .solo-home .solo-panel-head h3 { color: #f5e6cc; }
:root[data-theme="dark"] #app .solo-home .solo-panel > p { color: #dccbb0; }
:root[data-theme="dark"] #app .solo-home .solo-panel .field-label { color: #e0b77e; }
:root[data-theme="dark"] #app .solo-home .solo-panel .segmented-option { background: #2c2118; border-color: #6d5435; box-shadow: none; }
:root[data-theme="dark"] #app .solo-home .solo-panel .segmented-option b { color: #f5e6cc; }
:root[data-theme="dark"] #app .solo-home .solo-panel .segmented-option small { color: #cdb99a; }
:root[data-theme="dark"] #app .solo-home .solo-panel .segmented-option.is-on { background: #3d2a1d; border-color: #d08a5e; box-shadow: 0 0 0 1px #d08a5e; }
:root[data-theme="dark"] #app .solo-home .solo-panel .duel-option-mark { background: #2a2018; color: #e0b77e; border-color: #6d5435; box-shadow: none; }
:root[data-theme="dark"] #app .solo-home .solo-panel .duel-brief { background: #2a2018; box-shadow: none; }
:root[data-theme="dark"] #app .solo-home .solo-panel .duel-brief > p { color: #eadbc2; }
:root[data-theme="dark"] #app .solo-home .solo-panel .duel-brief > .duel-rule { color: #cdb99a; }

/* El reverso común lleva el emblema real de Continuum. La mano se lee por encima
   de la línea: una carta activa grande, las demás en un abanico limpio y compacto. */
#app .hand-card, .drag-card-preview {
  --cardback-fill: radial-gradient(ellipse at 50% 38%, #fff8e9, #f5ead4 58%, #e7d3b1 100%);
  border-color: #bd9670;
  box-shadow: inset 0 0 0 1px #fff8e7, 0 5px 13px #51351d26;
}
#app .hand-card .carta-reverso::before,
.drag-card-preview .carta-reverso::before {
  inset: 6px; border: 1px solid #bd8a657e; border-radius: 6px;
  box-shadow: inset 0 0 0 3px #f8ecd9, inset 0 0 0 4px #bd8a6545;
}
#app .hand-card .carta-reverso::after,
.drag-card-preview .carta-reverso::after { content: none; }
#app.atlas-board .hand .hand-card .carta-reverso > .reverso-emblema,
#app .hand-card .carta-reverso > .reverso-emblema,
.drag-card-preview .carta-reverso > .reverso-emblema {
  position: absolute; left: 50%; top: 42%;
  width: 76%; max-width: 180px; height: auto; max-height: 50%;
  object-fit: contain; transform: translate(-50%, -50%);
  opacity: .94; filter: drop-shadow(0 4px 5px #6340214d);
}
#app .hand-card > .hidden-date, .drag-card-preview > .hidden-date { color: #775234; }
#app .hand-card > strong, .drag-card-preview > strong {
  color: #30271e; background: #fbf4e9e8; border-top-color: #b994686b;
}
#app.atlas-board .atlas-hand-section .hand:not(.hand-solo) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px; max-width: 460px; margin-inline: auto;
}
#app.atlas-board .atlas-hand-section .hand:not(.hand-solo):has(> :nth-child(2):last-child),
#app.atlas-board .atlas-hand-section .hand:not(.hand-solo):has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#app.atlas-board .atlas-hand-section .hand:not(.hand-solo) .hand-card { min-height: 118px; }
#app.atlas-board .atlas-hand-section .hand:not(.hand-solo) .hand-card:not(.selected) .reverso-emblema {
  width: 68%; max-width: 92px; max-height: 35%; opacity: .7;
}
#app.atlas-board .atlas-hand-section .hand:not(.hand-solo) .hand-card.selected {
  order: -1; grid-column: 1 / -1; justify-self: center;
  width: min(52vw, 210px); min-height: 210px !important; aspect-ratio: 3 / 4 !important;
  z-index: 2; border: 2px solid #a75438; outline: 1px solid #a75438;
  outline-offset: 2px; transform: translateY(-5px);
  box-shadow: 0 2px 0 #6d3927, 0 14px 28px #663b2d66, 0 0 0 7px #c78b5c2e;
}
#app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand:not(.hand-solo) .hand-card.selected {
  aspect-ratio: 3 / 4;
}
#app.atlas-board .atlas-hand-section .hand:not(.hand-solo) .hand-card.selected .reverso-emblema {
  width: 78%; max-width: 162px; max-height: 48%; opacity: 1;
}
#app.atlas-board .atlas-hand-section .hand-solo .hand-card.selected {
  border-color: #a75438; outline: 2px solid #a75438; outline-offset: 2px;
  box-shadow: 0 2px 0 #6d3927, 0 13px 25px #663b2d50, 0 0 0 6px #c78b5c21;
}
#app.atlas-board .atlas-hand-many { max-height: 340px; padding: 10px 9px 13px; }
@media (max-width: 420px) {
  #app.atlas-board .atlas-hand-section .hand:not(.hand-solo) .hand-card { min-height: 105px; }
  #app.atlas-board .atlas-hand-section .hand:not(.hand-solo) .hand-card.selected { width: min(49vw, 185px); min-height: 188px !important; }
}
@media (prefers-reduced-motion: no-preference) {
  #app.atlas-board .atlas-hand-section .hand-card.selected .reverso-emblema { animation: continuum-mark-reveal .42s ease-out both; }
}
@keyframes continuum-mark-reveal {
  from { opacity: .45; filter: drop-shadow(0 0 1px #dcb78e); }
  to { opacity: 1; filter: drop-shadow(0 4px 5px #6340214d); }
}
:root[data-theme="dark"] #app .hand-card,
:root[data-theme="dark"] .drag-card-preview {
  --cardback-fill: radial-gradient(ellipse at 50% 35%, #49352a, #2c211c 78%);
  border-color: #9b6948;
}
:root[data-theme="dark"] #app .hand-card > .hidden-date { color: #edd3a9; }
:root[data-theme="dark"] #app .hand-card > strong { color: #f4e8d3; background: #342820e8; border-top-color: #aa77545c; }
/* Con texto ampliado se ve la mano completa, en una sola columna. */
:root:is([data-text-size="150"],[data-text-size="200"]) #app.atlas-board .atlas-hand-section .hand:not(.hand-solo) {
  grid-template-columns: 1fr;
}

/* Mano en abanico: una única fila de cartas superpuestas alrededor de la elegida. */
#app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan {
  --fan-step: min(14.7vw, 54.6px);
  display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr;
  justify-items: center; align-items: center;
  width: 100%; max-width: 460px; height: clamp(160px, 45vw, 176px);
  min-height: 0; max-height: none; margin: 0 auto; padding: 8px 0 18px;
  overflow: clip; isolation: isolate; touch-action: pan-y;
}
#app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan .hand-card {
  grid-area: 1 / 1; order: 0; position: relative;
  width: min(26.6vw, 105px); min-height: 0 !important; height: auto !important;
  aspect-ratio: 3 / 4 !important; margin: 0; padding: 6px;
  transform: translateX(calc(var(--fan-offset) * var(--fan-step))) translateY(calc(var(--fan-depth) * 11.2px)) rotate(calc(var(--fan-offset) * 6deg)) scale(calc(1 - var(--fan-depth) * .14));
  transform-origin: center 85%; touch-action: pan-y;
  border: 1px solid #b99570; outline: 0;
  box-shadow: 0 7px 12px #51351d33;
  opacity: .8; animation: none;
}
#app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan:not(.hand-placement-pending) .hand-card.fan-center {
  opacity: 1; border: 2px solid #a75438; outline: 1px solid #a7543880; outline-offset: 2px;
  box-shadow: 0 3px 0 #734632, 0 12px 22px #663b2d59;
}
#app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan .hand-card.fan-away {
  visibility: hidden; pointer-events: none;
}
#app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan .hand-card .reverso-emblema {
  width: 76%; max-width: 162px; height: auto; max-height: 48%; opacity: .94;
}
#app.atlas-board .hand-fan-controls {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin: -6px auto 4px; color: var(--edition-muted);
}
#app.atlas-board .hand-fan-controls button {
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 1px solid #b9957066; border-radius: 50%; background: #f9f0dfaa;
  color: #825039; font: 1.6rem/1 var(--ui-font); box-shadow: 0 2px 4px #51351d14;
}
#app.atlas-board .hand-fan-controls span { min-width: 52px; text-align: center; font: .75rem var(--ui-font); font-variant-numeric: tabular-nums; }
#app.atlas-board .hand-fan-controls button:disabled { opacity: .35; }
:root[data-theme="dark"] #app.atlas-board .hand-fan-controls button { background: #392a20; color: #edd3a9; }
:root:is([data-text-size="150"],[data-text-size="200"]) #app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan { height: auto; min-height: 300px; }
:root:is([data-text-size="150"],[data-text-size="200"]) #app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan .hand-card { width: min(66vw, 250px); min-height: 290px !important; }

/* Lámina completa a proporción 2:3 y placa de datos fuera del dibujo. */
#app.atlas-board[data-platform][data-screen] .timeline .timeline-card:has(> .card-visual > .animal-card-art) {
  display: flex; flex-direction: column;
  padding: 0; background: #f8efdd;
}
#app.atlas-board[data-platform][data-screen] .timeline .timeline-card:has(> .card-visual > .animal-card-art) > .card-visual {
  position: relative; inset: auto; z-index: auto; flex: 0 0 auto;
  box-sizing: border-box; width: 100%; height: auto; min-height: 0; max-height: none;
  aspect-ratio: 2 / 3; margin: 0; padding: 0; border-radius: 0;
}
#app.atlas-board[data-platform][data-screen] .timeline .timeline-card .card-visual > .animal-card-art {
  inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: center; transform: none;
  -webkit-mask-image: none; mask-image: none; mix-blend-mode: normal;
  filter: sepia(.12) saturate(.95);
}
#app.atlas-board[data-platform][data-screen] .timeline .timeline-card:has(> .card-visual > .animal-card-art) > .card-content {
  position: relative; z-index: 1; flex: 0 0 auto; min-height: 68px;
  margin: 0; padding: 7px 8px 8px; background: #f8efdd;
  color: #302116; text-shadow: none;
}
#app.atlas-board[data-platform][data-screen] .timeline .timeline-card:has(.animal-card-art) .card-content h3 {
  display: block; max-height: none; overflow: visible; overflow-wrap: break-word;
  margin: 0 0 5px;
  font-size: .76rem; line-height: 1.2;
}
#app.atlas-board[data-platform][data-screen] .timeline .timeline-card:has(.animal-card-art) .card-content :is(h3, p) { color: #302116; }
#app.atlas-board[data-platform][data-screen] .timeline .timeline-card:has(.animal-card-art) .card-content .year {
  margin-top: auto; padding-top: 5px; color: #824023;
  border-top: 1px solid #6b4b3040; font-size: clamp(.86rem, 2vw, 1.08rem);
}
#app.atlas-board[data-platform][data-screen] .timeline .timeline-card:has(.animal-card-art) .card-content .card-category {
  margin-bottom: 4px; padding: 2px 4px; background: #e9dac0; color: #60422e;
  font-size: .5rem; line-height: 1.1;
}
:root[data-theme="dark"] #app.atlas-board[data-platform][data-screen] .timeline .timeline-card:has(.animal-card-art) > .card-content {
  background: #f8efdd;
  color: #302116;
}
:root[data-theme="dark"] #app.atlas-board[data-platform][data-screen] .timeline .timeline-card:has(.animal-card-art) .card-content :is(h3, p) { color: #302116; }
:root[data-theme="dark"] #app.atlas-board[data-platform][data-screen] .timeline .timeline-card:has(.animal-card-art) .card-content .year { color: #824023; }

/* El duelo por turnos comparte la misma ficha aunque viva fuera del tablero atlas. */
#app .turn-duel-board .timeline .animal-timeline-card { display: flex; flex-direction: column; padding: 0; background: #f8efdd; }
#app .turn-duel-board .timeline .animal-timeline-card > .card-visual {
  position: relative; inset: auto; box-sizing: border-box; width: 100%; height: auto;
  aspect-ratio: 2 / 3; margin: 0; padding: 0; border-radius: 0;
}
#app .turn-duel-board .timeline .animal-timeline-card .animal-card-art {
  inset: 0; width: 100%; height: 100%; max-width: none; transform: none;
  object-fit: contain; object-position: center; mask-image: none; -webkit-mask-image: none;
  mix-blend-mode: normal; filter: sepia(.12) saturate(.95);
}
#app .turn-duel-board .timeline .animal-timeline-card > .card-content {
  flex: 0 0 auto; min-height: 68px; margin: 0; padding: 7px 8px 8px;
  background: #f8efdd; color: #302116;
}
#app .turn-duel-board .timeline .animal-timeline-card .card-content h3 {
  display: block; max-height: none; overflow: visible; overflow-wrap: break-word;
  margin: 0 0 5px; font-size: .76rem; line-height: 1.2;
}
#app .turn-duel-board .timeline .animal-timeline-card .card-content .year {
  margin-top: auto; padding-top: 5px; color: #824023;
  border-top: 1px solid #6b4b3040; font-size: .95rem;
}

@media (max-width: 699px) {
  #app.atlas-board[data-platform][data-screen] .board-timeline-section .timeline .animal-timeline-card {
    width: 108px; min-height: 0;
  }
  #app.atlas-board[data-platform][data-screen] .board-timeline-section .timeline .animal-timeline-card > .card-content,
  #app .turn-duel-board .timeline .animal-timeline-card > .card-content {
    min-height: 52px; padding: 5px 7px 6px;
  }
  #app.atlas-board[data-platform][data-screen] .board-timeline-section .timeline .animal-timeline-card .card-content h3,
  #app .turn-duel-board .timeline .animal-timeline-card .card-content h3 {
    margin-bottom: 4px; font-size: .7rem; line-height: 1.15;
  }
  #app.atlas-board[data-platform][data-screen] .board-timeline-section .timeline .animal-timeline-card .card-content .year,
  #app .turn-duel-board .timeline .animal-timeline-card .card-content .year {
    padding-top: 4px; font-size: .85rem;
  }
  #app .turn-duel-board .timeline .animal-timeline-card { width: 116px; min-height: 0; }
}

/* La vista ampliada deja el título y la explicación debajo de la lámina, sin recortarla. */
.timeline-detail-overlay { z-index: 80; }
.timeline-detail-modal { width: min(100%, 500px); max-height: min(94dvh, 900px); padding: 14px; overflow-y: auto; background: #f8efdd; color: #302116; text-align: left; }
.timeline-detail-modal .timeline-detail-image { display: grid; place-items: center; margin: 0 0 12px; background: #ede0c9; border-radius: 7px; overflow: hidden; }
.timeline-detail-modal .timeline-detail-image img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(57dvh, 570px); object-fit: contain; filter: sepia(.12) saturate(.95); }
.timeline-detail-modal h2 { margin: 0 44px 7px 0; font: 700 clamp(1.25rem, 5vw, 1.75rem)/1.12 var(--font-display); }
.timeline-detail-modal .timeline-detail-value { display: block; margin-bottom: 8px; color: #824023; font: 700 1.35rem/1.1 var(--font-display); }
.timeline-detail-modal p { margin: 0 0 8px; color: #5a412e; }
.timeline-detail-modal .timeline-detail-close { margin-top: 12px; }

/* Tamaño compacto sin reducir los controles táctiles ni el texto accesible. */
#app.atlas-board[data-platform][data-device][data-screen] .hand.hand-fan .hand-card > strong {
  font-size: .72rem; line-height: 1.12; padding: 4px 3px;
}
#app.atlas-board[data-platform][data-device][data-screen] .hand.hand-fan .hand-card > .hidden-date {
  font-size: .42rem; letter-spacing: .03em;
}
:root:is([data-text-size="150"],[data-text-size="200"]) #app.atlas-board[data-platform][data-device][data-screen] .hand.hand-fan .hand-card > strong { font-size: 1rem; }

/* Atlas personal: carta de navegación, estaciones y cuadernos del recorrido. */
#app[data-screen="perfil"] .perfil-section { max-width: 900px; margin-inline: auto; }
#app[data-screen="perfil"] .atlas-page-heading { margin-bottom: 8px; text-align: center; }
#app[data-screen="perfil"] .atlas-page-heading h1 { font-size: clamp(2.8rem, 11vw, 4.8rem); letter-spacing: -.035em; }
#app[data-screen="perfil"] .atlas-page-heading p { max-width: 42ch; margin-inline: auto; }
#app[data-screen="perfil"] .atlas-identidad {
  max-width: 490px; margin: 10px auto -22px; padding: 12px 18px; position: relative; z-index: 2;
  border: 1px solid color-mix(in srgb, var(--edition-brass) 42%, var(--edition-line));
  border-radius: 16px; background: var(--edition-surface);
  box-shadow: 0 7px 20px #553d2121, inset 0 1px #fff8;
}
#app[data-screen="perfil"] .atlas-identidad .hint { display: none; }
#app[data-screen="perfil"] .atlas-identidad h2 { font-size: 1.28rem; }
#app[data-screen="perfil"] .atlas-identidad-acciones .btn { min-height: 35px; padding: 6px 10px; font-size: .75rem; }

#app[data-screen="perfil"] .atlas-chart {
  position: relative; isolation: isolate; display: block; width: 100%; height: 510px;
  overflow: hidden; margin: 0 0 28px; border: 1px solid #a6865580; border-radius: 24px;
  background:
    radial-gradient(ellipse at 72% 55%, #83947b34, transparent 32%),
    radial-gradient(ellipse at 18% 72%, #b58c5a3b, transparent 34%),
    repeating-radial-gradient(ellipse at 60% 48%, transparent 0 18px, #936f4421 19px 20px, transparent 21px 38px),
    repeating-linear-gradient(102deg, transparent 0 16px, #6a4c2610 17px, transparent 18px 34px),
    #e9dbc0;
  box-shadow: 0 16px 36px #45301d25, inset 0 0 0 7px #f8eddaaa, inset 0 0 0 8px #a78d6259;
  color: #392a1d;
}
#app[data-screen="perfil"] .atlas-chart::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at center, transparent 36%, #8c6a4030 100%);
}
#app[data-screen="perfil"] .atlas-chart-heading { position: absolute; left: 28px; top: 40px; z-index: 2; display: grid; gap: 4px; }
#app[data-screen="perfil"] .atlas-chart-heading span { font: 700 .73rem/1.2 var(--ui-font); letter-spacing: .2em; color: #704a29; }
#app[data-screen="perfil"] .atlas-chart-heading small { font: italic 1.1rem/1.3 var(--font-display); color: #664b36; }
#app[data-screen="perfil"] .atlas-chart-route { position: absolute; inset: 50px 20px 20px; width: calc(100% - 40px); height: calc(100% - 70px); fill: none; overflow: visible; }
#app[data-screen="perfil"] .atlas-chart-route path { stroke: #9a674a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 9; opacity: .64; }
#app[data-screen="perfil"] .atlas-chart-compass { position: absolute; right: 36px; top: 30px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #9b7953; border-radius: 50%; font: 2rem/1 var(--font-display); color: #875039; opacity: .8; }
#app[data-screen="perfil"] .atlas-chart-compass small { position: absolute; top: -14px; font: 700 .58rem var(--ui-font); }
#app[data-screen="perfil"] .atlas-chart-stop {
  position: absolute; z-index: 1; display: grid; align-content: center; width: clamp(134px, 21%, 190px); min-height: 85px;
  padding: 12px 14px 12px 19px; border: 1px solid #9b795488; border-left: 4px solid #9c5036;
  border-radius: 5px 16px 16px 5px; background: #f8efddf2;
  box-shadow: 0 5px 0 #8b673d33, 0 12px 22px #442c162e, inset 0 1px #fff;
  color: #34281f; text-decoration: none; transform: rotate(var(--atlas-tilt, 0deg));
  transition: transform 180ms ease, box-shadow 180ms ease;
}
#app[data-screen="perfil"] .atlas-chart-stop::before { content: ''; position: absolute; left: -14px; top: 50%; width: 15px; height: 15px; border: 3px solid #f6e9d2; border-radius: 50%; background: #995039; box-shadow: 0 0 0 2px #99503955; transform: translateY(-50%); }
#app[data-screen="perfil"] .atlas-chart-stop i { font: 700 .61rem/1.2 var(--ui-font); letter-spacing: .16em; color: #a15338; }
#app[data-screen="perfil"] .atlas-chart-stop b { margin-top: 3px; font: 600 clamp(1rem, 2.4vw, 1.27rem)/1.1 var(--font-display); }
#app[data-screen="perfil"] .atlas-chart-stop small { margin-top: 4px; font: .69rem/1.3 var(--ui-font); color: #69533e; }
#app[data-screen="perfil"] .atlas-chart-stop:focus-visible { outline: 3px solid #753d28; outline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app[data-screen="perfil"] .atlas-chart-stop:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 8px 0 #8b673d33, 0 19px 26px #442c163a; }
}
#app[data-screen="perfil"] .atlas-stop-collection { left: 7%; top: 25%; --atlas-tilt: -2deg; }
#app[data-screen="perfil"] .atlas-stop-daily { left: 38%; top: 33%; --atlas-tilt: 2deg; }
#app[data-screen="perfil"] .atlas-stop-duels { right: 6%; top: 26%; --atlas-tilt: -2deg; }
#app[data-screen="perfil"] .atlas-stop-journey { left: 19%; top: 69%; --atlas-tilt: 2deg; }
#app[data-screen="perfil"] .atlas-stop-achievements { right: 15%; top: 68%; --atlas-tilt: -2deg; }
#app[data-screen="perfil"] .atlas-chart-seal { position: absolute; right: 24px; bottom: 18px; display: grid; place-content: center; width: 64px; height: 64px; border: 3px double #965444; border-radius: 50%; text-align: center; color: #965444; font: 2rem/.75 var(--font-display); opacity: .68; transform: rotate(-13deg); }
#app[data-screen="perfil"] .atlas-chart-seal small { padding-top: 8px; font: 600 .33rem var(--ui-font); letter-spacing: .1em; }

#app[data-screen="perfil"] .atlas-territories { position: relative; display: grid; gap: 18px; padding-left: 30px; }
#app[data-screen="perfil"] .atlas-territories::before { content: ''; position: absolute; left: 13px; top: 20px; bottom: 70px; width: 2px; background: repeating-linear-gradient(to bottom, #a76e50 0 5px, transparent 5px 13px); opacity: .6; }
#app[data-screen="perfil"] .atlas-territory { position: relative; min-width: 0; scroll-margin-top: 18px; padding: 19px clamp(15px, 4vw, 28px) 24px; border: 1px solid color-mix(in srgb, var(--edition-brass) 26%, var(--edition-line)); border-radius: 16px; background: radial-gradient(ellipse at 94% 8%, color-mix(in srgb, var(--edition-brass) 10%, transparent), transparent 40%), var(--edition-surface); box-shadow: 0 8px 20px #50371d12, inset 0 1px #fff5; }
#app[data-screen="perfil"] .atlas-territory::before { content: ''; position: absolute; left: -27px; top: 30px; width: 18px; height: 18px; border: 4px solid var(--edition-paper); border-radius: 50%; background: var(--atlas-selection); box-shadow: 0 0 0 1px var(--edition-brass); }
#app[data-screen="perfil"] .atlas-territory-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 16px; padding-bottom: 11px; margin-bottom: 14px; border-bottom: 1px solid var(--edition-line); }
#app[data-screen="perfil"] .atlas-territory-caption span { color: var(--edition-brass); font: 700 .66rem/1.3 var(--ui-font); letter-spacing: .15em; }
#app[data-screen="perfil"] .atlas-territory-caption h2 { margin: 0; color: var(--edition-ink); font: 500 1.55rem/1.2 var(--font-display); }
#app[data-screen="perfil"] .atlas-territory > .panel { padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
#app[data-screen="perfil"] .atlas-territory > .perfil-main { margin: 0; }
#app[data-screen="perfil"] .atlas-territory .perfil-main > .section-label:first-child { margin-top: 0; }
#app[data-screen="perfil"] .atlas-territory .perfil-account { margin: 0; }
#app[data-screen="perfil"] .atlas-territory .atlas-collection { margin-top: 0; }
#app[data-screen="perfil"] .atlas-territory .atlas-daily { margin-bottom: 0; }
#app[data-screen="perfil"] .atlas-territory .perfil-stats { border: 1px solid var(--edition-line); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--edition-paper) 65%, transparent); }
#app[data-screen="perfil"] .atlas-territory .perfil-stats > span { padding: 18px 8px; }
#app[data-screen="perfil"] .atlas-territory .lead { margin: 0 0 12px; }

@media (max-width: 600px) {
  #app[data-screen="perfil"] .atlas-chart { height: 525px; border-radius: 18px; }
  #app[data-screen="perfil"] .atlas-chart-heading { left: 22px; top: 42px; }
  #app[data-screen="perfil"] .atlas-chart-heading small { font-size: .95rem; }
  #app[data-screen="perfil"] .atlas-chart-compass { right: 22px; top: 28px; width: 38px; height: 38px; font-size: 1.5rem; }
  #app[data-screen="perfil"] .atlas-chart-route { inset: 75px 0 25px; width: 100%; height: calc(100% - 100px); opacity: .5; }
  #app[data-screen="perfil"] .atlas-chart-stop { width: min(43%, 175px); min-height: 75px; padding: 9px 7px 9px 12px; }
  #app[data-screen="perfil"] .atlas-chart-stop b { font-size: 1rem; }
  #app[data-screen="perfil"] .atlas-chart-stop small { font-size: .63rem; }
  #app[data-screen="perfil"] .atlas-stop-collection { left: 7%; top: 24%; }
  #app[data-screen="perfil"] .atlas-stop-daily { left: auto; right: 6%; top: 35%; }
  #app[data-screen="perfil"] .atlas-stop-duels { left: 8%; right: auto; top: 47%; }
  #app[data-screen="perfil"] .atlas-stop-journey { left: auto; right: 7%; top: 59%; }
  #app[data-screen="perfil"] .atlas-stop-achievements { left: 9%; right: auto; top: 72%; }
  #app[data-screen="perfil"] .atlas-chart-seal { right: 19px; bottom: 18px; width: 52px; height: 52px; font-size: 1.5rem; }
  #app[data-screen="perfil"] .atlas-identidad { margin-bottom: -16px; padding: 10px 12px; }
  #app[data-screen="perfil"] .atlas-identidad-avatar svg { width: 58px; height: 58px; }
  #app[data-screen="perfil"] .atlas-territory-caption { display: block; }
  #app[data-screen="perfil"] .atlas-territory-caption h2 { margin-top: 3px; }
}
@media (max-width: 350px) {
  #app[data-screen="perfil"] .atlas-chart-stop { width: 45%; }
  #app[data-screen="perfil"] .atlas-chart-stop b { font-size: .9rem; }
  #app[data-screen="perfil"] .atlas-chart-heading small { font-size: .84rem; }
}

/* La mesa se adapta al alto útil al 100 %, sin ocultar cartas ni recortar sus datos. */
@media (max-width: 699px) {
  #app.atlas-board > .shell > .board-timeline-section .timeline-wrap {
    flex: 0 0 auto; align-items: flex-start; padding-top: 7px;
  }
  #app.atlas-board[data-platform][data-screen] .board-focus-card .hand-solo .hand-card .carta-reverso > .reverso-emblema {
    top: 30%; max-height: 28%;
  }
  #app.atlas-board[data-board-fit="compact"] {
    --fit-hand-height: 132px; --fit-hand-width: min(24vw, 88px);
    --fit-focus-width: min(27vw, 105px); --fit-timeline-width: 101px;
    --fit-score-height: 62px; --fit-section-pad: 6px;
  }
  #app.atlas-board[data-board-fit="tight"] {
    --fit-hand-height: 110px; --fit-hand-width: min(21vw, 74px);
    --fit-focus-width: min(24vw, 88px); --fit-timeline-width: 87px;
    --fit-score-height: 52px; --fit-section-pad: 4px;
  }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) > .shell {
    padding-top: max(2px, env(safe-area-inset-top)); padding-bottom: max(3px, env(safe-area-inset-bottom));
  }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .atlas-topbar {
    min-height: 40px; height: 40px; margin-bottom: 0; padding-block: 0;
  }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .atlas-topbar .icon-btn { width: 40px; height: 40px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .game-head { margin-bottom: 2px; padding-block: 1px 3px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .game-head .turn-name { font-size: 1rem; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .atlas-hand-section,
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-focus-card { padding-block: 2px; margin-block: 0; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .atlas-hand-section > .hand-title,
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-focus-card > .hand-title { margin: 0 0 2px; }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit]:not([data-board-fit="normal"]) .atlas-hand-section .hand.hand-fan {
    height: var(--fit-hand-height); padding: 3px 0 10px;
  }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit]:not([data-board-fit="normal"]) .atlas-hand-section .hand.hand-fan .hand-card {
    width: var(--fit-hand-width); min-height: 0 !important; padding: 4px;
  }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .hand-fan-controls { margin: -3px auto 0; gap: 20px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .hand-fan-controls button { width: 38px; height: 38px; min-height: 38px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-focus-card .hand-solo { grid-template-columns: minmax(0, var(--fit-focus-width)); }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-focus-card .hand-solo .hand-card { min-height: 0 !important; }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit]:not([data-board-fit="normal"]) .board-focus-card .hand-solo .hand-card > strong {
    font-size: .65rem; line-height: 1.06; padding: 2px; margin-top: auto;
  }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-focus-card .hand-solo .carta-reverso { min-height: 22px; margin: 0; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-focus-card .hand-solo .reverso-emblema { width: 48px; height: 48px; }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit="tight"] .board-focus-card .hand-solo .hand-card > strong { font-size: .58rem; }
  #app.atlas-board[data-board-fit="tight"] .board-focus-card .hand-solo .carta-reverso { min-height: 18px; }
  #app.atlas-board[data-board-fit="tight"] .board-focus-card .hand-solo .reverso-emblema { width: 36px; height: 36px; }
  /* El pie puede crecer en vertical sin convertir el reverso en una ficha. */
  #app.atlas-board[data-board-fit] .board-focus-card .hand-solo .hand-card { aspect-ratio: 3 / 4; }
  #app.atlas-board[data-board-fit] .board-focus-card .hand-solo .hidden-date { margin-bottom: 0; }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit] .board-focus-card .hand-solo .hand-card > strong {
    margin-top: auto; margin-bottom: 0; position: relative; z-index: 1;
  }
  #app.atlas-board[data-platform][data-screen][data-board-fit] .board-focus-card .hand-solo .hand-card .carta-reverso > .reverso-emblema {
    top: 30%; width: 48px; height: 48px; max-height: 28%; transform: translate(-50%, -50%);
  }
  #app.atlas-board[data-platform][data-screen][data-board-fit="tight"] .board-focus-card .hand-solo .hand-card .carta-reverso > .reverso-emblema {
    top: 20%; width: 30px; height: 30px; max-height: 20%;
  }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .scoreboard-panel { padding: 3px 5px; margin-bottom: 2px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .scoreboard-panel .scoreboard { max-height: var(--fit-score-height); }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .scoreboard-title { margin-bottom: 2px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section { padding: var(--fit-section-pad); margin-top: 1px; flex: 1 1 auto; min-height: 0; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section .timeline-wrap {
    flex: 0 0 auto; align-items: flex-start; min-height: 0; padding-block: 6px 3px;
  }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section > .timeline-zoom { margin: 0 auto 3px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section > .timeline-zoom [data-zoom-level] { min-height: 32px; height: 32px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section .timeline .timeline-card { width: var(--fit-timeline-width); min-height: 0; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section .timeline :is(.slot, .slot-confirm) { min-height: 0; align-self: stretch; }
  #app.atlas-board[data-platform][data-screen][data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section .timeline .timeline-card:has(> .card-visual > .animal-card-art) > .card-visual {
    box-sizing: border-box; width: 100%; height: auto; max-height: none; margin: 0; aspect-ratio: 2 / 3;
  }
  #app.atlas-board.board-image-condensed[data-platform][data-screen][data-board-fit="tight"] .board-timeline-section .timeline .timeline-card:has(> .card-visual > .animal-card-art) > .card-visual {
    height: var(--board-image-height); aspect-ratio: auto;
  }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section .timeline-card:not(:has(.animal-card-art)) .card-visual { height: calc(var(--fit-timeline-width) * .95); }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section .timeline-card .card-content { padding: 5px 6px 6px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section .timeline-card h3 { font-size: .7rem; line-height: 1.13; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .board-timeline-section .timeline-card .year { font-size: .87rem; padding-top: 3px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .quick-rule { margin: 2px 0 4px; font-size: .76rem; line-height: 1.2; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .quick-bank { margin: 4px 0 2px; }
  #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) .quick-bank p { margin: 0 0 3px; font-size: .74rem; }
  #app.atlas-board[data-board-fit] .quick-content { padding-bottom: 0; }
  #app.atlas-board[data-board-fit="tight"] .scoreboard-title { display: none; }
  #app.atlas-board[data-board-fit="tight"] .hand-fan-controls { margin-bottom: 0; }
  #app.atlas-board[data-board-fit="tight"] .atlas-topbar { height: 38px; min-height: 38px; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section > .timeline-zoom [data-zoom-level] { height: 27px; min-height: 27px; }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit="tight"] .atlas-hand-section .hand.hand-fan { height: 102px; }
  #app.atlas-board[data-board-fit="tight"] .hand-fan-controls button { width: 32px; height: 32px; min-height: 32px; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section .timeline .timeline-card { width: 96px; }
  #app.atlas-board[data-platform][data-screen][data-board-fit="tight"] .board-timeline-section .timeline .timeline-card { width: 80px; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section .timeline-card:not(:has(.animal-card-art)) .card-visual { height: 82px; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section .timeline .timeline-card:has(.animal-card-art) h3 {
    font-size: .67rem; line-height: 1.1;
  }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .timeline .timeline-card .year { font-size: .76rem; line-height: 1.1; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .timeline .timeline-card > .card-category { display: none; }
  #app.atlas-board[data-platform][data-screen][data-board-fit="tight"] .quick-shell .board-timeline-section .timeline .timeline-card { width: 80px; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .timeline .timeline-card .card-content { min-height: 50px; }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit="tight"] .quick-shell .atlas-hand-section .hand.hand-fan {
    height: 90px; padding-bottom: 4px;
  }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit="tight"] .quick-shell .atlas-hand-section .hand.hand-fan .hand-card {
    width: min(18vw, 64px);
  }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .hand-fan-controls { margin-top: -5px; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .scoreboard-panel .score > .score-avatar,
  #app.atlas-board[data-board-fit="tight"] .quick-shell .scoreboard-panel .score > .score-avatar .avatar {
    width: 26px !important; height: 26px !important;
  }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .scoreboard-panel .score { padding: 1px 4px; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .quick-rule { font-size: .7rem; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .atlas-topbar { height: 36px; min-height: 36px; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .quick-bank { margin-bottom: 0; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section .timeline :is(.slot, .slot-confirm) { min-height: 120px; }
  #app.atlas-board[data-board-fit="tight"] .quick-rule { margin: 0 0 2px; line-height: 1.1; }
  #app.atlas-board[data-board-fit="tight"] .quick-bank {
    display: flex; align-items: center; gap: 5px; min-height: 36px; margin: 0; padding: 0;
  }
  #app.atlas-board[data-board-fit="tight"] .quick-bank p {
    flex: 1; min-width: 0; margin: 0; text-align: left; font-size: .64rem; line-height: 1.12;
  }
  #app.atlas-board[data-board-fit="tight"] .quick-bank .btn {
    flex: 0 0 59%; width: 59%; min-height: 36px; padding: 4px; font-size: .67rem; line-height: 1.1;
  }
}

@media (max-width: 699px) and (max-height: 600px) {
  #app.atlas-board[data-board-fit="tight"] .quick-shell .atlas-topbar { height: 34px; min-height: 34px; }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit="tight"] .quick-shell .atlas-hand-section .hand.hand-fan {
    height: 76px; padding-bottom: 3px;
  }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit="tight"] .quick-shell .atlas-hand-section .hand.hand-fan .hand-card {
    width: min(16vw, 55px);
  }
  #app.atlas-board[data-platform][data-screen][data-board-fit="tight"] .quick-shell .board-timeline-section .timeline .timeline-card { width: 72px; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .timeline .timeline-card .card-content { padding: 3px 4px; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .timeline .timeline-card h3 { font-size: .62rem; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .hand-fan-controls button { width: 28px; height: 28px; min-height: 28px; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .game-head .turn-label { font-size: .58rem; line-height: 1; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .game-head .turn-name { font-size: .86rem; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .board-timeline-section > .timeline-zoom [data-zoom-level] { min-height: 27px; height: 27px; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .quick-bank { min-height: 32px; }
  #app.atlas-board[data-board-fit="tight"] .quick-shell .quick-bank .btn { min-height: 32px; }
}

@media (max-width: 350px) and (max-height: 600px) {
  #app.atlas-board[data-board-fit="tight"] .atlas-topbar { height: 34px; min-height: 34px; }
  #app.atlas-board[data-board-fit="tight"] .game-head { margin-bottom: 0; padding-block: 0; }
  #app.atlas-board[data-board-fit="tight"] .scoreboard-panel .scoreboard {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; overflow: visible;
  }
  #app.atlas-board[data-board-fit="tight"] .scoreboard-panel .score {
    grid-template-columns: 24px minmax(0,1fr) 20px; gap: 3px; padding: 2px;
  }
  #app.atlas-board[data-board-fit="tight"] .scoreboard-panel .score > .score-avatar,
  #app.atlas-board[data-board-fit="tight"] .scoreboard-panel .score > .score-avatar .avatar { width: 24px !important; height: 24px !important; }
  #app.atlas-board[data-board-fit="tight"] .scoreboard-panel .score > em strong { font-size: .87rem; }
  #app.atlas-board[data-board-fit="tight"] .scoreboard-panel .score > em small { display: none; }
  #app.atlas-board[data-board-fit="tight"] .atlas-hand-section { position: relative; }
  #app.atlas-board[data-board-fit="tight"] .atlas-hand-section > .hand-title small { display: none; }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit="tight"] .atlas-hand-section .hand.hand-fan {
    height: 92px; padding-bottom: 5px;
  }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit="tight"] .atlas-hand-section .hand.hand-fan .hand-card {
    width: min(21vw,67px);
  }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit="tight"] .quick-shell .atlas-hand-section .hand.hand-fan { height: 76px; }
  #app.atlas-board[data-platform][data-device][data-screen][data-board-fit="tight"] .quick-shell .atlas-hand-section .hand.hand-fan .hand-card { width: min(16vw,55px); }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section > .timeline-zoom [data-zoom-level] { min-height: 28px; height: 28px; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section > .timeline-zoom {
    position: absolute; z-index: 2; top: 3px; right: 4px; margin: 0; padding: 0;
  }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section > .timeline-zoom [data-zoom-level] {
    width: 38px; min-width: 38px; height: 30px; min-height: 30px; font-size: .63rem;
  }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section > .timeline-toolbar { padding-right: 116px; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section > .timeline-toolbar h3 { font-size: 1.03rem; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section > .timeline-toolbar small { display: none; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section .timeline-wrap { padding-top: 3px; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section .timeline-card .card-content { padding: 3px 4px; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section .timeline-card h3 { font-size: .59rem; line-height: 1.05; }
  #app.atlas-board[data-board-fit="tight"] .board-timeline-section .timeline-card .year { font-size: .72rem; }
}

/* En el duelo por turnos, la carta activa precede a la línea y ambas caben en la mesa corta. */
@media (max-width: 699px) and (max-height: 740px) {
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) > .turn-duel-shell {
    display: flex; flex-direction: column; min-height: 100dvh;
    padding: max(2px,env(safe-area-inset-top)) 10px max(2px,env(safe-area-inset-bottom));
  }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-nav {
    min-height: 40px; margin-bottom: 3px; padding: 0;
  }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-nav .icon-btn { width: 40px; height: 40px; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-screen { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-heading { margin-bottom: 3px; gap: 5px; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-heading h1 { margin: 2px 0; font-size: 1.06rem; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-heading p { margin: 2px 0; font-size: .64rem; line-height: 1.15; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-scores { gap: 4px; margin-bottom: 4px; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-player {
    grid-template-columns: 27px minmax(0,1fr) auto; gap: 3px; min-height: 45px;
    padding: 4px; border-radius: 10px;
  }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-avatar,
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-avatar .avatar { width: 27px; height: 27px; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-score b { font-size: .9rem; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-score small { font-size: .5rem; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-last { max-height: 36px; overflow-y: auto; padding: 3px 7px; font-size: .65rem; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-last p { margin: 1px 0; font-size: .65rem; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-hand { padding: 0; border: 0; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-hand .hand-title { margin: 1px 0; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-hand .hand { grid-template-columns: 90px; justify-content: center; margin: 0; padding: 0; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-hand .hand-card {
    width: 90px; min-height: 0; height: auto; aspect-ratio: 3 / 4; padding: 5px;
  }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-hand .hand-card > strong { padding: 3px; font-size: .63rem; line-height: 1.07; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-hand .hand-card.selected::before,
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-hand .hand-card.selected::after { display: none; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-hand .hint { margin: 2px 0; font-size: .62rem; line-height: 1.12; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board .hand-title { margin: 1px 0; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board .timeline-wrap {
    display: flex; flex: 1; align-items: center; min-height: 0; margin: 0; padding: 2px;
  }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board .timeline { align-items: stretch; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board .timeline .animal-timeline-card {
    display: grid; grid-template-columns: 62px minmax(0,1fr); width: 156px; min-height: 0;
  }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board .timeline .animal-timeline-card > .card-visual { grid-column: 1; grid-row: 1; width: 62px; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board .timeline .animal-timeline-card > .card-content {
    grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 0; padding: 4px;
  }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board .timeline .animal-timeline-card h3 { font-size: .65rem; line-height: 1.1; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board .timeline .animal-timeline-card .year { font-size: .72rem; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board .timeline :is(.slot,.slot-confirm) { min-height: 110px; }
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-board .hint,
  #app[data-screen="turn-duel"]:has(.turn-duel-hand) .turn-duel-screen > .hint:last-child { display: none; }
}

/* La anchura adicional se mide a partir del hueco libre de esta partida. */
@media (max-width: 699px) {
  #app.atlas-board.board-card-expanded[data-platform][data-screen] .board-timeline-section .timeline .timeline-card,
  #app.atlas-board.board-card-expanded[data-platform][data-screen] .quick-shell .board-timeline-section .timeline .timeline-card {
    width: var(--optimal-timeline-width);
  }
}

/* En solitario, «Tu carta» queda alineado a la izquierda de la carta. */
@media (max-width: 699px) {
  #app.atlas-board[data-screen="solo"] .board-focus-card > .hand-title {
    justify-content: flex-start;
    padding-left: max(12px, calc(50% - 135px));
  }
}

/* El marcador local compacto conserva su altura y enseña dos jugadores completos. */
@media (max-width: 699px) {
  #app.atlas-board[data-screen="game"]:is([data-board-fit="compact"], [data-board-fit="tight"]) .scoreboard-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
  }
  #app.atlas-board[data-screen="game"][data-board-fit="compact"] .scoreboard-panel { height: 81px; }
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel { height: 60px; }
  #app.atlas-board[data-screen="game"]:is([data-board-fit="compact"], [data-board-fit="tight"]) .scoreboard-panel .scoreboard {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(50% - 2.5px);
    align-items: center;
    gap: 5px;
    min-height: 42px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #app.atlas-board[data-screen="game"] .scoreboard-panel .scoreboard::-webkit-scrollbar { display: none; }
  #app.atlas-board[data-screen="game"]:is([data-board-fit="compact"], [data-board-fit="tight"]) .scoreboard-panel .score {
    grid-template-columns: 28px minmax(0, 1fr) 26px;
    gap: 4px;
    min-height: 40px;
    padding: 3px 4px;
    scroll-snap-align: start;
  }
  #app.atlas-board[data-screen="game"]:is([data-board-fit="compact"], [data-board-fit="tight"]) .scoreboard-panel .score > .score-avatar,
  #app.atlas-board[data-screen="game"]:is([data-board-fit="compact"], [data-board-fit="tight"]) .scoreboard-panel .score > .score-avatar .avatar { width: 28px !important; height: 28px !important; }
  #app.atlas-board[data-screen="game"]:is([data-board-fit="compact"], [data-board-fit="tight"]) .scoreboard-panel .score-copy { gap: 3px; }
  #app.atlas-board[data-screen="game"]:is([data-board-fit="compact"], [data-board-fit="tight"]) .scoreboard-panel .score-copy > b { font-size: .67rem; }
  #app.atlas-board[data-screen="game"]:is([data-board-fit="compact"], [data-board-fit="tight"]) .scoreboard-panel .score > em strong { font-size: 1rem; }
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel:has(.score:nth-child(3)) .scoreboard-title {
    display: block;
    margin: 0 0 1px;
    font-size: .5rem;
  }
}

@media (max-width: 350px) and (max-height: 600px) {
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel { height: 38px; }
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel .scoreboard { min-height: 28px; }
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel .score {
    grid-template-columns: 24px minmax(0, 1fr) 17px;
    gap: 2px;
    min-height: 28px;
    padding: 1px 2px;
  }
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel .score > .score-avatar,
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel .score > .score-avatar .avatar { width: 24px !important; height: 24px !important; }
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel .score-copy { gap: 1px; }
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel .score-copy > b { font-size: .59rem; }
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel .score-progress { height: 3px; }
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel .score > em strong { font-size: .85rem; }
  #app.atlas-board[data-screen="game"][data-board-fit="tight"] .scoreboard-panel:has(.score:nth-child(3)) .scoreboard-title { display: none; }
}

/* Retos rápidos: mesa que cabe entera sin desplazarse. Título del mazo en rojizo y más grande,
   regla y marcador en una sola fila (el jugador a la derecha), mano grande y sin recortar,
   y láminas de la línea enteras con su etiqueta debajo, como en las colecciones. */
#app.atlas-board .quick-shell .game-head { align-items: start; }
#app.atlas-board .quick-shell .game-head .turn-label { color: #8a3f2f; font: 700 .8rem/1.2 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }
#app.atlas-board[data-board-fit="tight"] .quick-shell .game-head .turn-label { font-size: .78rem; line-height: 1.15; }
#app.atlas-board .quick-shell .quick-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin: 4px 0 2px; }
#app.atlas-board .quick-shell .quick-meta .quick-rule { flex: 1 1 0; min-width: 9ch; margin: 0; }
#app.atlas-board .quick-shell .quick-meta .scoreboard { margin: 0 0 0 auto; justify-content: flex-end; }
#app.atlas-board .quick-shell .quick-meta .scoreboard:only-child { flex: 1 1 100%; }
#app.atlas-board .quick-shell .timeline .timeline-card > .card-category { display: none; }
#app.atlas-board .quick-shell .timeline .timeline-card:has(.animal-card-art) .card-content h3 { font: 400 .82rem/1.15 var(--font-display); }
#app.atlas-board .quick-shell .timeline .timeline-card:has(.animal-card-art) .card-content .year { font: 700 .92rem/1.15 var(--font-display); color: #8a3f2f; }

/* Retos rápidos: título del mazo pegado a la línea divisoria y extremos de la línea de cartas. */
#app.atlas-board .quick-shell .game-head { align-items: end; margin-top: 6px; padding-bottom: 6px; }
#app.atlas-board .quick-shell .game-head .turn-label { margin: 0; }
#app.atlas-board .quick-shell .timeline-ends { display: flex; justify-content: space-between; gap: 8px; margin: 0 2px 2px; color: #8a3f2f; font: 700 .68rem/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }


/* Navegación como cuatro fichas de atlas: pergamino mate, inclinación leve y una
   elevación contenida para indicar el destino actual sin añadir otra caja brillante. */
html #app .home-nav.atlas-nav {
  left: 50%;
  bottom: 0;
  width: min(calc(100% - 24px), 460px);
  max-width: 460px;
  min-height: calc(88px + env(safe-area-inset-bottom));
  padding: 5px 5px calc(7px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translateX(-50%);
  overflow: visible;
}
html #app .home-nav.atlas-nav::before,
html #app .home-nav.atlas-nav::after { content: none; }
html #app .home-nav.atlas-nav button {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 70px;
  padding: 5px 2px 4px;
  border: 1px solid #b9a98e;
  border-radius: 9px 9px 7px 7px;
  color: #5b4936;
  background: linear-gradient(155deg, rgba(250,246,235,.97), rgba(232,221,201,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 4px rgba(54,41,26,.12);
  transform: rotate(var(--atlas-card-tilt, 0deg));
  transform-origin: 50% 100%;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
html #app .home-nav.atlas-nav button:nth-child(1) { --atlas-card-tilt: -2deg; }
html #app .home-nav.atlas-nav button:nth-child(2) { --atlas-card-tilt: -.7deg; }
html #app .home-nav.atlas-nav button:nth-child(3) { --atlas-card-tilt: .7deg; }
html #app .home-nav.atlas-nav button:nth-child(4) { --atlas-card-tilt: 2deg; }
html #app .home-nav.atlas-nav button span {
  width: 31px;
  height: 31px;
  border: 1px solid #c8b89d;
  border-radius: 5px;
  color: #66513a;
  background: rgba(244,237,222,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(55,42,27,.08);
}
html #app .home-nav.atlas-nav button:nth-child(n) span { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(55,42,27,.08); }
html #app .home-nav.atlas-nav button svg { width: 19px; height: 19px; stroke-width: 1.65; }
html #app .home-nav.atlas-nav button small {
  margin-top: 1px;
  color: inherit;
  font: 600 clamp(.57rem, 2vw, .67rem)/1.05 var(--font-display);
}
html #app .home-nav.atlas-nav button[aria-current="page"] {
  z-index: 3;
  min-height: 76px;
  border-color: #aa7157;
  color: #704a37;
  background: linear-gradient(155deg, #f8efdf, #eadbc4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 5px 9px rgba(61,43,29,.17);
  transform: translateY(-5px) rotate(0deg);
}
html #app .home-nav.atlas-nav button[aria-current="page"] span {
  border-color: #bd9278;
  color: #8d4e38;
  background: #ead8c3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(61,43,29,.1);
}
html #app .home-nav.atlas-nav button[aria-current="page"] small {
  color: #854b37;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  html #app .home-nav.atlas-nav button { transition: none; }
}

/* Con texto muy ampliado, conserva la navegación en el flujo y en dos columnas,
   igual que el ajuste de accesibilidad que ya tenía la pantalla. */
@media (max-width: 480px) {
  html:is([data-text-size="150"], [data-text-size="200"]) #app .home-nav.atlas-nav {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin-top: 24px;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Base opaca a ras del borde: las fichas siguen siendo el foco, pero el contenido
   de la página queda cubierto entre ellas y bajo la zona de navegación. */
html #app .home-nav.atlas-nav {
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  min-height: calc(88px + env(safe-area-inset-bottom));
  padding: 5px 12px calc(7px + env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid #c9b99e;
  border-radius: 13px 13px 0 0;
  background: #eee5d5;
  box-shadow: 0 -4px 13px rgba(54,41,26,.12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  overflow: visible;
}
html #app .home-nav.atlas-nav::before,
html #app .home-nav.atlas-nav::after { content: none; }
/* Retos rápidos: el zoom de la línea va en la fila del título, sin robar una fila entera. */
#app.atlas-board .quick-shell .board-timeline-section { position: relative; }
#app.atlas-board .quick-shell .board-timeline-section > .timeline-zoom { position: absolute; z-index: 2; top: 4px; right: 8px; margin: 0; padding: 0; }
#app.atlas-board .quick-shell .board-timeline-section > .timeline-zoom [data-zoom-level] { min-height: 28px; height: 28px; padding-block: 0; }
#app.atlas-board .quick-shell .board-timeline-section > .timeline-toolbar { margin-top: 6px; }
#app.atlas-board .quick-shell .timeline-ends { margin-top: 8px; }
#app.atlas-board[data-platform][data-device][data-screen] .quick-shell .hand.hand-fan .hand-card > strong { font-size: .68rem; overflow-wrap: normal; word-break: normal; hyphens: auto; }
#app.atlas-board .quick-shell .game-head { margin-top: 2px; padding-bottom: 4px; }
#app.atlas-board[data-board-fit="tight"] .quick-shell .quick-meta { margin: 2px 0 0; }


/* El panel termina en el borde inferior de las fichas normales. El vidrio deja
   pasar apenas el papel y difumina el contenido para conservar una base serena. */
html #app .home-nav.atlas-nav {
  bottom: env(safe-area-inset-bottom);
  min-height: 70px;
  padding: 0 12px;
  border: 1px solid #c9b99e;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: color-mix(in srgb, #eee5d5 91%, transparent);
  box-shadow: 0 -4px 14px rgba(54,41,26,.10);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
  backdrop-filter: blur(8px) saturate(1.08);
}
html #app .home-nav.atlas-nav button { min-height: 63px; }
html #app .home-nav.atlas-nav button[aria-current="page"] {
  min-height: 69px;
  transform: translateY(-13px) rotate(0deg);
}

/* Mazos de una colección como un camino: una línea con un punto por mazo, y cada mazo en una
   tarjeta cuya ilustración forma parte del propio fondo (se difumina hacia el texto). */
#app #deck-collection .collection-decks { padding: 4px 0 12px; background: transparent; border: 0; box-shadow: none; }
#app #deck-collection .collection-decks .lead { margin: 2px 0 10px; text-align: center; font: 600 .7rem/1.3 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: #8a3f2f; }
#app #deck-collection .collection-decks .games { position: relative; display: grid; gap: 14px; padding: 4px 0 4px 34px; }
#app #deck-collection .collection-decks .games::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: repeating-linear-gradient(180deg, #b08a52 0 7px, transparent 7px 13px); opacity: .8; }
#app #deck-collection .collection-decks .game-row { position: relative; display: block; overflow: visible; margin: 0; min-height: 92px; padding: 15px 44% 15px 16px; border: 1px solid #c9b48f; border-left: 1px solid #c9b48f; border-radius: 14px; background: linear-gradient(120deg, #fbf3e2, #f3e6cc); box-shadow: 0 3px 10px #5a3f1f22; text-align: left; }
#app #deck-collection .collection-decks .game-row::before { content: ""; position: absolute; inset: 50% auto auto -27px; width: 15px; height: 15px; margin-top: -8px; border-radius: 50%; background: #f7ecd6; border: 3px solid #b08a52; box-shadow: 0 0 0 3px #f7ecd6; }
#app #deck-collection .collection-decks .game-row::after { content: none; }
#app #deck-collection .collection-decks .game-row .deck-preview { position: absolute; inset: 0 0 0 auto; z-index: 0; float: none; width: 46%; height: auto; margin: 0; border-radius: 0 14px 14px 0; overflow: hidden; filter: sepia(.25) saturate(.9); mix-blend-mode: normal; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70%); mask-image: linear-gradient(90deg, transparent 0, #000 70%); pointer-events: none; }
#app #deck-collection .collection-decks .game-row .deck-preview img,
#app #deck-collection .collection-decks .game-row .deck-preview svg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
#app #deck-collection .collection-decks .game-row > :not(.deck-preview) { position: relative; z-index: 1; grid-column: auto; }
#app #deck-collection .collection-decks .game-row .deck-chapter { margin: 0 0 4px; justify-content: flex-start; font-size: .58rem; letter-spacing: .16em; color: #8a3f2f; }
#app #deck-collection .collection-decks .game-row .deck-chapter i { display: none; }
#app #deck-collection .collection-decks .game-row .game-name { padding: 0; border: 0; font-size: 1.12rem; line-height: 1.15; }
#app #deck-collection .collection-decks .game-row .game-meta { margin-top: 5px; font: .72rem/1.35 var(--ui-font); }

/* El camino de los mazos, como el mapa de niveles de un videojuego: una senda de tierra
   que serpentea, un medallón numerado por mazo, bandera de salida y estrella de meta. */
#app #deck-collection .collection-decks .games { counter-reset: nivel; padding: 34px 0 44px 52px; gap: 16px; }
#app #deck-collection .collection-decks .games::before {
  left: 3px; top: 14px; bottom: 16px; width: 44px; border-radius: 0; opacity: 1;
  background: url("assets/camino-senda.svg") center top / 44px 120px repeat-y;
}
#app #deck-collection .collection-decks .games::after {
  content: "★"; position: absolute; left: 6px; bottom: 0; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%; color: #fff4d6; font-size: 1.15rem;
  background: radial-gradient(circle at 35% 30%, #f3d48a, #b8862f 60%, #7c5418);
  border: 2px solid #fff3d2; box-shadow: 0 0 0 2px #8a6326, 0 4px 10px #5a3a1466, 0 0 14px #e6b85a88;
}
#app #deck-collection .collection-decks .game-row { counter-increment: nivel; }
#app #deck-collection .collection-decks .game-row::before {
  content: counter(nivel); inset: 50% auto auto -47px; width: 34px; height: 34px; margin-top: -17px;
  display: grid; place-items: center; color: #fff6e0; font: 800 .95rem/1 var(--font-display);
  text-shadow: 0 1px 0 #5a2a1c;
  background: radial-gradient(circle at 35% 28%, #d98a68, #9b4430 58%, #6c2a1d);
  border: 2px solid #fff1d6; box-shadow: 0 0 0 2px #7a3526, 0 5px 0 #4f1e14, 0 7px 10px #3a1a0f55;
}
#app #deck-collection .collection-decks .game-row-cerrado::before {
  content: "🔒"; font-size: .8rem; background: radial-gradient(circle at 35% 28%, #cfc3ad, #8d8170 60%, #5f564a);
  box-shadow: 0 0 0 2px #5f564a, 0 5px 0 #3e382f, 0 7px 10px #2a262055;
}
#app #deck-collection .collection-decks .lead { position: relative; }
#app #deck-collection .collection-decks .lead + .games > .game-row:first-child::after {
  content: "⚑ SALIDA"; position: absolute; left: -58px; top: -30px; z-index: 2; padding: 2px 6px;
  border-radius: 4px; background: #8a3f2f; color: #fff4e0; font: 700 .52rem/1.4 var(--ui-font); letter-spacing: .1em;
  box-shadow: 0 2px 4px #0003; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  #app #deck-collection .collection-decks .game-row::before { animation: nivel-pop 520ms cubic-bezier(.2,1.4,.4,1) both; }
  #app #deck-collection .collection-decks .game-row:nth-child(2)::before { animation-delay: 120ms; }
  #app #deck-collection .collection-decks .game-row:nth-child(3)::before { animation-delay: 240ms; }
  #app #deck-collection .collection-decks .game-row:nth-child(4)::before { animation-delay: 360ms; }
  #app #deck-collection .collection-decks .games::after { animation: meta-brillo 2.4s ease-in-out infinite; }
}
@keyframes nivel-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes meta-brillo { 50% { box-shadow: 0 0 0 2px #8a6326, 0 4px 10px #5a3a1466, 0 0 22px #f0c86acc; } }
#app #deck-collection .collection-decks .game-row .deck-preview { top: 0; bottom: 0; height: 100% !important; max-height: 100%; }
#app #deck-collection .collection-decks .game-row .deck-preview > :is(img, svg) { position: absolute; inset: 0; height: 100%; }
#app #deck-collection .collection-decks .lead + .games > .game-row:first-child::after { right: auto; bottom: auto; width: auto; height: auto; left: -50px; top: -28px; background: #8a3f2f; border-radius: 4px; }
#app #deck-collection .collection-decks .games { overflow: visible; }

/* Camino fino y elegante (sustituye a la senda gruesa): un hilo dorado punteado que
   serpentea, pequeños hitos de latón con el número del mazo y una estrella discreta al final.
   Cada mazo es una lámina a sangre con su ilustración de fondo y el texto sobre un velo. */
#app #deck-collection .collection-decks .games { padding: 8px 0 30px 40px; gap: 12px; }
#app #deck-collection .collection-decks .games::before { left: 4px; top: 6px; bottom: 22px; width: 24px; filter: none; background: url("assets/camino-senda.svg") center top / 24px 120px repeat-y; }
#app #deck-collection .collection-decks .games::after { content: "✦"; left: 7px; bottom: 2px; width: 18px; height: 18px; font-size: .7rem; color: #a8824a; background: #f8efdd; border: 1px solid #c9a86a; box-shadow: none; animation: none; }
#app #deck-collection .collection-decks .game-row::before { inset: 50% auto auto -38px; width: 22px; height: 22px; margin-top: -11px; color: #7a5a2c; font: 600 .66rem/1 var(--font-display); text-shadow: none; background: #fbf4e4; border: 1px solid #b08a52; box-shadow: 0 0 0 3px #f5ead3, 0 1px 3px #5a3f1f33; animation: none; }
#app #deck-collection .collection-decks .game-row-cerrado::before { content: "🔒"; font-size: .55rem; background: #eee7da; border-color: #a39a8a; box-shadow: 0 0 0 3px #f5ead3; }
#app #deck-collection .collection-decks .lead + .games > .game-row:first-child::after { content: none; }
#app #deck-collection .collection-decks .game-row { min-height: 96px; padding: 14px 16px; border: 1px solid #6b5230; border-radius: 12px; background: #2b2118; box-shadow: 0 4px 12px #2a1c0f44; overflow: visible; }
#app #deck-collection .collection-decks .game-row .deck-preview { inset: 0; width: auto; height: 100% !important; border-radius: 11px; filter: sepia(.35) saturate(.85) brightness(.9); -webkit-mask-image: none; mask-image: none; }
#app #deck-collection .collection-decks .game-row .deck-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #1d150ee6 0%, #1d150eb3 45%, #1d150e33 100%); }
#app #deck-collection .collection-decks .game-row .deck-preview > :is(img, svg) { object-position: center 35%; }
#app #deck-collection .collection-decks .game-row .deck-chapter { color: #e2c48c; }
#app #deck-collection .collection-decks .game-row .game-name { color: #fbf1dc; max-width: 70%; }
#app #deck-collection .collection-decks .game-row .game-meta { color: #eadcc0; max-width: 72%; }
#app #deck-collection .collection-decks .game-row.game-row-cerrado .game-meta { color: #d9cdb6; }

/* Mesa de juego: la lupa del zoom bajo el contador de pendientes, a la derecha del todo;
   «Tu carta» pegada a la izquierda; y los extremos de la línea según el mazo. */
#app.atlas-board .game-head-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; margin-left: auto; }
#app.atlas-board .game-head-side > .timeline-zoom { position: relative; display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#app.atlas-board .timeline-zoom .zoom-toggle { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 10px; border: 1px solid var(--edition-line, #cdb994); border-radius: 999px; background: #fbf4e4; color: #5a4330; font: 600 .74rem/1 var(--ui-font); cursor: pointer; box-shadow: 0 1px 3px #5a3f1f22; }
#app.atlas-board .timeline-zoom .zoom-toggle[aria-expanded="true"] { background: #8a3f2f; border-color: #8a3f2f; color: #fff6e8; }
#app.atlas-board .timeline-zoom .zoom-toggle output { font: inherit; }
#app.atlas-board .timeline-zoom .zoom-menu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; display: grid; gap: 2px; min-width: 84px; padding: 4px; border: 1px solid #cdb994; border-radius: 12px; background: #fbf4e4; box-shadow: 0 8px 20px #3a26134d; }
#app.atlas-board .timeline-zoom .zoom-menu[hidden] { display: none; }
#app.atlas-board .timeline-zoom .zoom-menu [data-zoom-level] { min-height: 34px; height: auto; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: #4a3626; font: 600 .82rem/1 var(--ui-font); text-align: right; }
#app.atlas-board .timeline-zoom .zoom-menu [data-zoom-level][aria-pressed="true"] { background: #8a3f2f; color: #fff6e8; }
#app.atlas-board .board-focus-card > .hand-title { justify-content: flex-start; }
#app.atlas-board .timeline-ends { display: flex; justify-content: space-between; gap: 8px; margin: 4px 2px 2px; color: #8a3f2f; font: 700 .66rem/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
#app.atlas-board[data-platform][data-screen] .timeline-zoom button.zoom-toggle { width: auto !important; height: 30px !important; min-width: 0 !important; min-height: 30px !important; padding: 0 11px !important; border-radius: 999px !important; aspect-ratio: auto !important; font-size: .74rem !important; }
#app.atlas-board[data-platform][data-screen] .timeline-zoom button.zoom-toggle svg { display: block; flex: none; width: 15px; height: 15px; }
#app.atlas-board[data-platform][data-screen] .timeline-zoom .zoom-menu button[data-zoom-level] { width: 100% !important; height: auto !important; min-height: 34px !important; aspect-ratio: auto !important; border-radius: 8px !important; }
#app.atlas-board .board-focus-card > .hand-title,
#app.atlas-board .board-focus-card > .hand-title h3 { justify-content: flex-start; text-align: left; margin-left: 0; margin-right: auto; }
#app.atlas-board[data-platform][data-screen] .board-focus-card > .hand-title { padding-left: 4px; padding-right: 0; }

/* La navegación inferior va pegada al borde, sin flotar: fondo totalmente opaco, cubre también la
   zona segura del iPhone (nada asoma por debajo). */
html #app .home-nav.atlas-nav {
  bottom: 0;
  min-height: 0;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  border-radius: 14px 14px 0 0;
  background: #eee5d5;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 -3px 10px rgba(54,41,26,.12);
}
html #app .home-nav.atlas-nav button { min-height: 62px; }
/* La pestaña activa sobresale de la barra: un cuarto de su recuadro queda por encima del borde
   superior y el resto dentro (el relleno de 6px de la barra se suma al desplazamiento). */
html #app .home-nav.atlas-nav button[aria-current="page"] { min-height: 62px; transform: translateY(calc(-25% - 6px)); box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 3px 8px rgba(61,43,29,.22); }

/* ===== Mesa de juego unificada (todas las modalidades) =====
   Misma estética que «Jugar solo»: la mano en abanico sin recortar, los jugadores
   como píldoras a la derecha y la lámina de la línea siempre entera. */
#app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan { height: clamp(112px, 22dvh, 176px) !important; padding: 2px 0 12px !important; overflow: visible !important; }
#app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan .hand-card { width: min(30vw, 112px, calc((22dvh - 16px) * .68)) !important; aspect-ratio: 2 / 3 !important; --fan-step: calc(min(30vw, 112px, (22dvh - 16px) * .68) * .55); transform: translateX(calc(var(--fan-offset) * var(--fan-step))) translateY(calc(var(--fan-depth) * 11.2px)) rotate(calc(var(--fan-offset) * 4deg)) scale(calc(1 - var(--fan-depth) * .14)); }
#app.atlas-board[data-platform][data-device][data-screen] .hand.hand-fan .hand-card > strong { font-size: .7rem; line-height: 1.12; overflow-wrap: normal; word-break: normal; hyphens: auto; }
#app.atlas-board .scoreboard-panel { display: flex !important; justify-content: flex-end; height: auto !important; margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
#app.atlas-board .scoreboard-panel .scoreboard-title { display: none !important; }
#app.atlas-board .scoreboard-panel .scoreboard { display: flex !important; flex-direction: row; justify-content: flex-start; gap: 6px !important; width: auto; max-width: 100%; max-height: none !important; height: auto !important; min-height: 0 !important; margin: 0 0 0 auto !important; padding: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; }
#app.atlas-board .scoreboard-panel .scoreboard::-webkit-scrollbar { display: none; }
#app.atlas-board .scoreboard-panel .score { display: inline-flex !important; flex: 0 0 auto; align-items: center; width: auto !important; min-height: 0 !important; height: auto !important; gap: 6px !important; padding: 3px 11px 3px 4px !important; border-radius: 999px !important; grid-template-columns: none !important; border: 1px solid #c9b48f; background: #fbf4e4; color: #4a3626; box-shadow: 0 1px 3px #5a3f1f22; }
/* Con dos jugadores, las dos píldoras caben siempre en su fila: encogen y el nombre se corta
   con «…» (en Safari la letra ocupa algo más y la segunda se salía). Con más, la fila se desliza. */
#app.atlas-board .scoreboard-panel .scoreboard:not(:has(> .score:nth-child(3))) > .score { flex: 0 1 auto; min-width: 0; }
#app.atlas-board .scoreboard-panel .score > .score-avatar,
#app.atlas-board .scoreboard-panel .score > em { flex: 0 0 auto; }
#app.atlas-board .scoreboard-panel .score.active { background: linear-gradient(135deg, #a84a37, #7d3223) !important; border-color: #7d3223; color: #fff6e8; }
#app.atlas-board .scoreboard-panel .score > .score-avatar,
#app.atlas-board .scoreboard-panel .score > .score-avatar .avatar { width: 28px !important; height: 28px !important; }
#app.atlas-board .scoreboard-panel .score-copy { display: block; min-width: 0; }
#app.atlas-board .scoreboard-panel .score-copy > b { display: block; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .78rem/1 var(--font-display); color: inherit; }
#app.atlas-board .scoreboard-panel .score-progress { display: none !important; }
#app.atlas-board .scoreboard-panel .score > em { display: inline-flex !important; align-items: center; width: auto !important; height: auto !important; min-width: 20px; padding: 2px 7px; border-radius: 999px; background: #fff; color: #7d3223; }
#app.atlas-board .scoreboard-panel .score > em strong { font: 800 .82rem/1 var(--font-display); }
#app.atlas-board .scoreboard-panel .score > em small { display: none !important; }

/* Retos rápidos: «Pasar reto» es un botón pequeño y discreto arriba a la izquierda, sobre el título. */
#app.atlas-board .quick-shell .quick-pass { min-height: 24px; padding: 0 10px; border: 1px solid #c9a55a99; border-radius: 999px; background: #efe0bd80; color: #7a5a2c; font: 600 .64rem/1 var(--ui-font); letter-spacing: .03em; cursor: pointer; box-shadow: none; }
#app.atlas-board .quick-shell .quick-pass:active { background: #e4cf9e; }
#app.atlas-board .quick-shell .quick-pass:focus-visible { outline: 2px solid #8a3f2f; outline-offset: 2px; }

/* Las flechas de la mano van a los lados del abanico (ya no ocupan una fila debajo): más sitio
   para la carta de la línea. El contador queda solo para lectores de pantalla. */
#app.atlas-board .atlas-hand-section > .hand-fan-controls { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; height: 0; margin: 0 !important; padding: 0 2px; gap: 0; pointer-events: none; transform: translateY(calc(-0.5 * clamp(112px, 22dvh, 176px) - 18px)); }
#app.atlas-board .atlas-hand-section > .hand-fan-controls button { width: 38px !important; height: 38px !important; min-height: 38px !important; pointer-events: auto; font-size: 1.4rem; background: #fbf4e4cc; }
#app.atlas-board .atlas-hand-section > .hand-fan-controls span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* El contador de cartas y la lupa van en la misma fila (ahorran una fila entera): ese alto
   se da a la mano para que los títulos se lean completos. */
#app.atlas-board .game-head-side { flex-direction: row !important; align-items: center !important; gap: 10px !important; }

/* Aire entre el abanico de la mano y el bloque de la línea de cartas: la base de las cartas
   giradas ya no toca el borde superior del bloque. */
#app.atlas-board .atlas-hand-section + .board-timeline-section, #app.atlas-board .atlas-hand-section ~ .board-timeline-section { margin-top: 22px !important; }

/* «Pasar reto» junto al título de la línea de cartas, a la derecha, en el hueco que quedó libre. */
#app.atlas-board .quick-shell .board-timeline-section > .hand-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#app.atlas-board .quick-shell .board-timeline-section > .hand-title .quick-pass { flex: none; margin-right: 2px; }

/* ===== Cabecera limpia de la mesa =====
   Barra superior: ← · título del mazo · sonido y menú. Debajo, una sola franja: cartas
   pendientes a la izquierda; «Pasar reto» y jugadores a la derecha. La lupa del zoom vive en
   la cabecera de la línea, que es lo que amplía. */
#app .atlas-topbar .topbar-title { min-width: 0; text-align: center; color: #8a3f2f; font: 700 .78rem/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#app.atlas-board .quick-shell .quick-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 6px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--edition-line, #cdb994) 70%, transparent); }
#app.atlas-board .quick-shell .quick-left { color: var(--edition-muted, #7a6a58); font: .74rem/1.2 var(--ui-font); letter-spacing: .02em; white-space: nowrap; }
#app.atlas-board .quick-shell .quick-left b { color: #4a3626; font: 700 1rem/1 var(--font-display); margin-right: 2px; }
#app.atlas-board .quick-shell .quick-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
#app.atlas-board .quick-shell .quick-right .scoreboard { margin: 0; flex-wrap: nowrap; }
#app.atlas-board .quick-shell .quick-pass { min-height: 28px; padding: 0 11px; }
#app.atlas-board .board-timeline-section > .timeline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#app.atlas-board .board-timeline-section > .timeline-toolbar > .timeline-zoom { position: relative; flex: none; margin: 0 !important; padding: 0; border: 0; background: none; box-shadow: none; }
#app.atlas-board .board-timeline-section > .timeline-toolbar > .timeline-zoom .zoom-menu { top: calc(100% + 6px); right: 0; }
#app.atlas-board .quick-shell .quick-right .scoreboard, #app.atlas-board .quick-shell .quick-right .score { box-shadow: none; } #app.atlas-board .quick-shell .quick-right .scoreboard { padding: 0; background: none; border: 0; }

/* Lupa del zoom en la barra superior: misma altura que los botones redondos de al lado. */
#app .atlas-topbar-actions { display: flex; align-items: center; gap: 6px; }
#app .atlas-topbar-actions > .timeline-zoom { position: relative; display: block; margin: 0 !important; padding: 0; border: 0; background: none; box-shadow: none; }
#app.atlas-board[data-platform][data-screen] .atlas-topbar-actions .timeline-zoom button.zoom-toggle { height: 36px !important; min-height: 36px !important; padding: 0 10px !important; gap: 4px; font-size: .72rem !important; }
#app .atlas-topbar-actions .timeline-zoom .zoom-menu { top: calc(100% + 6px); right: 0; z-index: 60; }

/* Barra superior despejada en partida: el zoom y la música pasan al menú ⋯. */
#app.atlas-menu-tools .timeline-zoom { display: none !important; }
#app.atlas-menu-tools :is(.atlas-topbar-actions, .topbar-actions) > #ambience-toggle { display: none !important; }
.menu-view-tools { display: grid; gap: 10px; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid #d8c6a4; border-radius: 12px; background: #fbf4e4; }
.menu-view-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.menu-view-row > span { color: #5a4330; font: 600 .82rem/1.2 var(--ui-font); }
.menu-view-zoom { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #cdb994; border-radius: 999px; background: #fff9ee; }
.menu-view-zoom button, .menu-view-sound { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #4a3626; font: 600 .78rem/1 var(--ui-font); cursor: pointer; }
.menu-view-zoom button[aria-pressed="true"], .menu-view-sound[aria-pressed="true"] { background: #8a3f2f; color: #fff6e8; }
.menu-view-sound { border: 1px solid #cdb994; background: #fff9ee; }
.menu-view-row > span { text-align: left; }
.menu-view-zoom { flex: none; }
#app .modal .menu-view-zoom button, #app .modal .menu-view-sound { width: auto !important; min-width: 0; white-space: nowrap; padding: 0 11px; }

/* Gran mezcla: la carta de la mano se ve igual que en Grandes colecciones. La temática ya no es
   una pastilla que tapa el «valor oculto» y el reverso: queda como un pequeño sello con su icono
   en la esquina superior derecha (el nombre sigue disponible para lectores de pantalla). */
#app.atlas-board .hand-card { position: relative; }
#app.atlas-board .hand-card > .card-category { position: absolute; z-index: 3; top: 5px; right: 5px; left: auto; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; justify-content: center; gap: 0; overflow: hidden; border-radius: 50%; font-size: 0; line-height: 0; color: transparent; background: #f3e6c8; border: 1px solid #c9b48f; box-shadow: 0 1px 2px #5a3f1f33; }
#app.atlas-board .hand-card > .card-category > span[aria-hidden="true"] { font-size: .7rem; line-height: 1; color: initial; }
/* La carta de la línea usa el mismo sello de temática en la esquina, así no crece en Gran mezcla. */
#app.atlas-board .timeline .timeline-card { position: relative; }
#app.atlas-board .timeline .timeline-card .card-category { position: absolute; z-index: 3; top: 6px; right: 6px; left: auto; width: 22px; height: 22px; min-height: 0; margin: 0 !important; padding: 0; justify-content: center; gap: 0; overflow: hidden; border-radius: 50%; font-size: 0; line-height: 0; color: transparent; background: #f3e6c8; border: 1px solid #c9b48f; box-shadow: 0 1px 2px #5a3f1f33; }
#app.atlas-board .timeline .timeline-card .card-category > span[aria-hidden="true"] { font-size: .75rem; line-height: 1; color: initial; }
#app.atlas-board .timeline .timeline-card:has(.animal-card-art) > .card-content { position: static !important; }
#app.atlas-board .timeline .timeline-card .card-category { font-size: 0 !important; line-height: 0 !important; color: transparent !important; letter-spacing: 0 !important; text-transform: none !important; max-width: none; }
#app.atlas-board .timeline .timeline-card .card-category > span[aria-hidden="true"] { font-size: .75rem !important; line-height: 1 !important; }
#app.atlas-board .hand-card > .card-category { font-size: 0 !important; color: transparent !important; }
#app.atlas-board .hand-card > .card-category > span[aria-hidden="true"] { font-size: .7rem !important; }

/* Franja única bajo la barra en todas las mesas. */
#app.atlas-board .game-head.game-head-slim { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 0; margin: 0 0 6px; padding: 0 0 6px; }
#app.atlas-board .game-head.game-head-slim > div:first-child { flex: 0 1 auto; }
#app.atlas-board .game-head.game-head-slim .turn-name { font: 700 1rem/1.1 var(--font-display); }
#app.atlas-board .game-head.game-head-slim .solo-lives { margin: 0 auto 0 4px; }
#app.atlas-board .game-head.game-head-slim .deck-count { flex-direction: row; align-items: baseline; gap: 5px; width: auto; min-width: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
#app.atlas-board .game-head.game-head-slim .deck-count strong { font: 700 1rem/1 var(--font-display); }
#app.atlas-board .game-head.game-head-slim .deck-count span { font: .72rem/1.2 var(--ui-font); letter-spacing: .02em; text-transform: none; }
#app.atlas-board .game-head.game-head-slim:has(> div:first-child > .solo-lectores + .solo-lectores) > div:first-child { display: none; }

/* Modo oscuro: los rojizos de títulos, extremos y botones pasan a un cobre claro legible. */
:root[data-theme="dark"] #app .atlas-topbar .topbar-title,
:root[data-theme="dark"] #app.atlas-board .timeline-ends,
:root[data-theme="dark"] #app.atlas-board .quick-shell .quick-left b { color: #e9b48f; }
:root[data-theme="dark"] #app.atlas-board .quick-shell .quick-left { color: #d8c6aa; }
:root[data-theme="dark"] #app.atlas-board .quick-shell .quick-pass { background: #3a2a1d; border-color: #9a7648; color: #f0d9b0; }
:root[data-theme="dark"] .menu-view-tools { background: #2b2118; border-color: #6b5230; }
:root[data-theme="dark"] .menu-view-row > span { color: #eadcc0; }
:root[data-theme="dark"] .menu-view-zoom, :root[data-theme="dark"] .menu-view-sound { background: #3a2a1d; border-color: #7a5d38; }
:root[data-theme="dark"] .menu-view-zoom button, :root[data-theme="dark"] .menu-view-sound { color: #f0e2c6; }
#app.atlas-board .game-head.game-head-slim .deck-count { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; display: inline-flex; }
#app.atlas-board .game-head.game-head-slim > * { align-self: center; }
#app.atlas-board .game-head.game-head-slim > .scoreboard-panel { flex: 0 1 auto; min-width: 0; margin: 0 0 0 auto !important; }
#app.atlas-board .game-head.game-head-slim > .deck-count { flex: none; }
:root[data-theme="dark"] #app.atlas-board .hand-card > .hidden-date { color: #e2c48c !important; }
:root[data-theme="dark"] #app.atlas-board .scoreboard-panel .score:not(.active) { background: #3a2a1d; border-color: #7a5d38; color: #f0e2c6; }
:root[data-theme="dark"] #app.atlas-board .scoreboard-panel .score:not(.active) > em { background: #f0e2c6; color: #5a2a1c; }
/* Modo oscuro: «Fecha oculta» queda sobre el filo claro del marco; se le da un fondo propio. */
:root[data-theme="dark"] #app.atlas-board .hand-card > .hidden-date { position: relative; z-index: 3; width: fit-content; padding: 1px 5px; border-radius: 4px; background: #2b2118; }

/* Mesas de juego (todas las modalidades): todo el contenido baja un poco desde el borde superior. */
html #app.atlas-board > .shell { padding-top: calc(env(safe-area-inset-top) + 30px); }
html #app.atlas-board[data-board-fit]:not([data-board-fit="normal"]) > .shell { padding-top: calc(env(safe-area-inset-top) + 22px); }

/* Popup de salir de la partida: pergamino con marco de latón, en la línea del resto del juego. */
#app [data-exit-dialog] .modal {
  position: relative; isolation: isolate; text-align: center;
  padding: 30px 22px 22px; border: 1px solid #aa7157; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, #f6e4cf, transparent 70%), linear-gradient(160deg, #f8efdf, #eadbc4);
  color: #3a2a1d; box-shadow: 0 18px 40px rgba(43,28,16,.38), inset 0 1px 0 rgba(255,255,255,.7);
}
#app [data-exit-dialog] .modal::before { content: ""; position: absolute; inset: 6px; z-index: -1; border: 1px solid rgba(138,63,47,.25); border-radius: 11px; pointer-events: none; }
#app [data-exit-dialog] .modal h2 { margin: 0 0 8px; color: #3a2a1d; font: 500 1.45rem/1.2 var(--font-display); text-wrap: balance; }
#app [data-exit-dialog] .modal h2::after { content: "◆"; display: block; margin: 10px auto 0; color: #8a3f2f; font-size: .6rem; }
#app [data-exit-dialog] .modal p { margin: 10px auto 18px; max-width: 32ch; color: #5b4936; line-height: 1.5; }
#app [data-exit-dialog] .exit-actions { display: grid; gap: 10px; }
#app [data-exit-dialog] .exit-actions .btn { margin: 0; }
#app [data-exit-dialog] .exit-actions .btn-primary { background: #8a3f2f; border-color: #7a3a2c; color: #fff6e8; }
#app [data-exit-dialog] .exit-actions .btn-secondary { background: linear-gradient(155deg, rgba(250,246,235,.97), rgba(232,221,201,.96)); border: 1px solid #b9a98e; color: #5b4936; box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 4px rgba(54,41,26,.12); }
#app [data-exit-dialog] .exit-actions .exit-discard { background: transparent; border-color: transparent; box-shadow: none; color: #8a3f2f; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Recuadros de selección y configuración: pergamino en vez de blanco =====
   Los paneles donde se eligen jugadores, opciones, salas y ajustes toman la estética de
   «Jugar en solitario»: papel cálido con filete de latón y campos de papel claro. */
:root:not([data-theme="dark"]) #app :is(.panel, .settings-modal .settings-section):not(.pass-card, .quick-ready-card, .final-composition, .solo-panel, .atlas-identidad, .comp-splash) {
  border: 1px solid #d8bf9c;
  border-radius: 16px;
  background:
    radial-gradient(120% 45% at 15% 0%, #fffaf2a6, transparent 60%),
    linear-gradient(165deg, #faf1e4, #f1ddc7 65%, #ead0b2);
  box-shadow: inset 0 1px 0 #ffffffb3, inset 0 -1px 0 #b8653d26, 0 10px 26px #7a3f1d1f, 0 2px 5px #7a3f1d12;
  color: #2a1a10;
}
:root:not([data-theme="dark"]) #app :is(.panel, .settings-modal .settings-section):not(.pass-card, .quick-ready-card, .final-composition, .solo-panel, .atlas-identidad, .comp-splash) :is(h1, h2, h3) { color: #2a1a10; }
:root:not([data-theme="dark"]) #app :is(.panel, .settings-modal .settings-section) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
  border: 1px solid #cdb48d;
  border-radius: 10px;
  background: #fffaf1;
  color: #2a1a10;
  box-shadow: inset 0 1px 2px #7a3f1d14;
}
:root:not([data-theme="dark"]) #app :is(.panel, .settings-modal .settings-section) :is(input, select, textarea):focus-visible { outline: 2px solid #b8653d; outline-offset: 2px; }
:root:not([data-theme="dark"]) #app :is(.panel, .settings-modal .settings-section) .btn-secondary {
  border: 1px solid #b9a98e;
  background: linear-gradient(155deg, rgba(250,246,235,.97), rgba(232,221,201,.96));
  color: #5b4936;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 4px rgba(54,41,26,.12);
}
:root:not([data-theme="dark"]) #app :is(.panel, .settings-modal .settings-section) .btn-ghost { background: transparent; border-color: #cdb48d; color: #5b4936; }
:root:not([data-theme="dark"]) #app .overlay .modal:not(.board-result, .quick-result, .enc-modal, .settings-modal, .rules) {
  border: 1px solid #d8bf9c;
  border-radius: 16px;
  background: radial-gradient(120% 45% at 15% 0%, #fffaf2a6, transparent 60%), linear-gradient(165deg, #faf1e4, #f1ddc7 65%, #ead0b2);
  box-shadow: inset 0 1px 0 #ffffffb3, 0 18px 40px rgba(43,28,16,.34);
  color: #2a1a10;
}
:root:not([data-theme="dark"]) #app .overlay .modal:not(.board-result, .quick-result, .enc-modal, .settings-modal, .rules) :is(h2, h3) { color: #2a1a10; }
:root:not([data-theme="dark"]) #app .overlay .modal:not(.board-result, .quick-result, .enc-modal, .settings-modal, .rules) .btn-secondary {
  border: 1px solid #b9a98e;
  background: linear-gradient(155deg, rgba(250,246,235,.97), rgba(232,221,201,.96));
  color: #5b4936;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 4px rgba(54,41,26,.12);
}

/* Atlas y Ajustes con el mismo pergamino: los bloques grandes como panel de papel y las piezas
   que llevan dentro (colecciones, logros) como láminas más claras. */
:root:not([data-theme="dark"]) #app :is(.atlas-identidad, .atlas-territory, .settings-modal .settings-section) {
  border: 1px solid #d8bf9c;
  border-radius: 16px;
  background:
    radial-gradient(120% 45% at 15% 0%, #fffaf2a6, transparent 60%),
    linear-gradient(165deg, #faf1e4, #f1ddc7 65%, #ead0b2);
  box-shadow: inset 0 1px 0 #ffffffb3, inset 0 -1px 0 #b8653d26, 0 10px 26px #7a3f1d1f, 0 2px 5px #7a3f1d12;
  color: #2a1a10;
}
:root:not([data-theme="dark"]) #app :is(.perfil-collection, .perfil-achievement-group, .logro) {
  border: 1px solid #dcc7a3;
  border-radius: 12px;
  background: linear-gradient(160deg, #fdf6e9, #f5e6d0);
  box-shadow: inset 0 1px 0 #ffffffb3, 0 1px 3px #7a3f1d14;
  color: #2a1a10;
}
:root:not([data-theme="dark"]) #app :is(.atlas-identidad, .atlas-territory, .settings-modal .settings-section) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
  border: 1px solid #cdb48d;
  border-radius: 10px;
  background: #fffaf1;
  color: #2a1a10;
  box-shadow: inset 0 1px 2px #7a3f1d14;
}
:root:not([data-theme="dark"]) #app :is(.atlas-identidad, .atlas-territory, .settings-modal .settings-section) .btn-secondary {
  border: 1px solid #b9a98e;
  background: linear-gradient(155deg, rgba(250,246,235,.97), rgba(232,221,201,.96));
  color: #5b4936;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 4px rgba(54,41,26,.12);
}

/* Modo competición: mismo acento terracota y pergamino que el resto del juego, en vez del color
   de cada bloque (verde, azul…) y del recuadro blanco. */
#app:is([data-screen="comp-intro"], [data-screen="comp-end"], :has(.comp-topic)) { --scene-color: #8a3f2f; }
:root:not([data-theme="dark"]) #app .comp-splash {
  border: 1px solid #d8bf9c;
  border-radius: 16px;
  background: linear-gradient(165deg, #faf1e4, #f1ddc7 70%, #ead0b2);
  box-shadow: inset 0 1px 0 #ffffffb3, 0 12px 30px #7a3f1d26;
  color: #2a1a10;
}
:root:not([data-theme="dark"]) #app .comp-splash .chapter-art::after { background: linear-gradient(transparent 55%, #faf1e4); }
#app .comp-splash .chapter-number { color: #8a3f2f; font-family: var(--font-display); letter-spacing: .22em; }
#app .comp-splash-lead { color: #7a6a58; }
#app .comp-splash h2 { color: #2a1a10; }
#app .comp-splash-start { border: 1px solid #7a3a2c; background: #8a3f2f; color: #fff6e8; box-shadow: 0 5px 14px #8a3f2f2e; }
#app .comp-topic {
  margin: 0 0 8px; padding: 9px 14px; text-align: center;
  border: 1px solid #c9b48f; border-radius: 12px;
  background: linear-gradient(155deg, #faf3e3, #efdfc4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 5px rgba(54,41,26,.12);
  color: #8a3f2f; font: 600 1.05rem/1.2 var(--font-display); letter-spacing: .02em; text-wrap: balance;
}

/* Sala privada online: «Crear una sala» agrupa las modalidades bajo una sola tarjeta. */
html #app .mode-create-room{display:grid;gap:12px}
html #app .mode-create-list{display:grid;gap:12px;padding-left:14px;border-left:2px solid #d8bf9c}
html #app .mode-create-list[hidden]{display:none}

/* Las palabras de las cartas se mantienen enteras. El ajuste compartido reduce
   la letra solo si hace falta para que una palabra larga quepa en su recuadro. */
:is(.hand-card, .timeline-card, .slot-confirm-card, .drag-card-preview) :is(strong, h3, p, small),
.card-category {
  overflow-wrap: normal !important;
  word-break: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* Los desplegables llevan su flecha: varias reglas de arriba usan `background` abreviado y la borraban, con lo que parecían campos de texto. */
#app select:not([multiple]), .modal select:not([multiple]) {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--edition-muted, var(--muted)) 50%), linear-gradient(135deg, var(--edition-muted, var(--muted)) 50%, transparent 50%) !important;
  background-position: calc(100% - 22px) calc(50% - 3px), calc(100% - 16px) calc(50% - 3px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 38px;
}

/* Fantasma en solitario: la lámina se ve igual; solo el valor va tapado. */
.ghost-card.ghost-art .card-visual { background: none; color: inherit; }
.ghost-card.ghost-art { cursor: default; }

/* Reverso acabado: marca completa, papel tramado y filetes con relieve.
   Solo cambia la decoración interior, nunca las dimensiones de la mano. */
#app .hand-card, .drag-card-preview {
  --cardback-fill: radial-gradient(ellipse at 50% 40%, #fffaf0 0%, #fffaf000 65%), repeating-linear-gradient(45deg, #a77b3810 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, #a77b3810 0 1px, transparent 1px 9px), linear-gradient(145deg, #f8edda, #e9d3ab);
}
#app .hand-card .carta-reverso { border: 0; }
#app .hand-card .carta-reverso::before, .drag-card-preview .carta-reverso::before {
  content: ""; position: absolute; inset: 6px; width: auto; height: auto;
  aspect-ratio: auto; transform: none; border: 1px solid #ab804d;
  border-radius: 7px; background: transparent;
  box-shadow: inset 0 0 0 2px #fff5e1, inset 0 0 0 3px #bc93575c, inset 0 0 18px #96632914;
}
#app .hand-card .carta-reverso::after, .drag-card-preview .carta-reverso::after { content: none; }
html #app .hand-card .carta-reverso > .reverso-emblema,
html #app.atlas-board[data-platform][data-device][data-screen][data-board-fit] .hand .hand-card .carta-reverso > .reverso-emblema,
.drag-card-preview .carta-reverso > .reverso-emblema {
  position: absolute; left: 50%; top: 40%; width: 88% !important;
  height: 48% !important; max-width: none !important; max-height: none !important;
  object-fit: contain; object-position: center; transform: translate(-50%, -50%);
  opacity: 1; filter: drop-shadow(0 3px 3px #734f2938);
}

/* Minijuego de «quién empieza»: sin el teclado abierto de entrada hay sitio para una lámina y una carta grandes. */
.starter-card { padding: 24px 20px; }
.starter-card strong { font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.2; }
.starter-card > span { font-size: 1.05rem; }
.starter-card .starter-card-art { margin: -24px -20px 16px; }
.starter-card .starter-card-art .animal-card-art { height: min(62vw, 280px); }

/* ===== Pantalla de «pasa el móvil» y demás tarjetas de turno de las partidas multijugador =====
   Dejan el recuadro blanco liso y toman el pergamino del resto del juego: papel cálido, filete de latón
   y un segundo marco interior, como las tarjetas del inicio. */
:root:not([data-theme="dark"]) #app .pass-screen .pass-card:not(.comp-splash, .final-composition) {
  padding: 42px 28px 30px;
  border: 1px solid #d3b98f;
  border-radius: 20px;
  background:
    radial-gradient(120% 50% at 15% 0%, #fffaf2cc, transparent 55%),
    linear-gradient(165deg, #faf1e4f2, #f0dcc6ea 60%, #e8c9abe0);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 0 #ffffffb3, inset 0 -1px 0 #b8653d2e, 0 18px 44px #7a3f1d29, 0 0 0 5px #fffaf259;
  color: #2a1a10;
}
#app .pass-screen .pass-card:not(.comp-splash, .final-composition)::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #b8935a66;
  border-radius: 14px;
  pointer-events: none;
}
:root:not([data-theme="dark"]) #app .pass-screen .pass-card:not(.comp-splash, .final-composition) :is(h1, h2, h3) { color: #2a1a10; }
:root:not([data-theme="dark"]) #app .pass-screen .pass-card:not(.comp-splash, .final-composition) .eyebrow { color: #8a3f2f; }
:root:not([data-theme="dark"]) #app .pass-screen .pass-card:not(.comp-splash, .final-composition) p { color: #4a3a2c; }
:root[data-theme="dark"] #app .pass-screen .pass-card:not(.comp-splash, .final-composition) {
  padding: 42px 28px 30px;
  border: 1px solid #6d5435;
  border-radius: 20px;
  background: linear-gradient(165deg, #33241750, #2a1d11ee 60%, #231810f2);
  box-shadow: inset 0 1px 0 #ffffff14, 0 18px 44px #0008, 0 0 0 5px #0002;
}
:root[data-theme="dark"] #app .pass-screen .pass-card:not(.comp-splash, .final-composition)::before { border-color: #d4bb8b40; }

.table-seat.is-unused { visibility: hidden; }

/* Atlas: dentro de cada territorio, los bloques no son una segunda tarjeta (quedaban sin
   margen interior y pegados al borde); el territorio ya hace de marco. */
:root #app[data-screen="perfil"] .atlas-territory > .panel,
:root #app[data-screen="perfil"] .atlas-territory .perfil-account > .panel {
  padding: 0 !important; margin: 0; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
#app[data-screen="perfil"] .atlas-territory .atlas-duels h3 { margin: 0 0 6px; font: 500 1.15rem/1.25 var(--font-display); }
#app[data-screen="perfil"] .atlas-territory .atlas-duels { gap: 16px; }
#app[data-screen="perfil"] .atlas-territory .perfil-collection { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 0; }
#app[data-screen="perfil"] .atlas-territory .perfil-collection small { text-align: left; }
#app[data-screen="perfil"] .atlas-territory .daily-stats { margin-bottom: 4px; }
#app[data-screen="perfil"] .atlas-territory .atlas-ranking { margin-top: 18px; }
#app[data-screen="perfil"] .atlas-territory .atlas-ranking h3 { margin: 0 0 4px; font: 500 1.15rem/1.25 var(--font-display); }
#app[data-screen="perfil"] .atlas-territory .atlas-ranking .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
#app[data-screen="perfil"] .atlas-count { margin: 0 0 12px; color: var(--edition-muted); font: .82rem/1.4 var(--ui-font); }
#app[data-screen="perfil"] .perfil-achievement-group + .perfil-achievement-group { margin-top: 10px; }
#app[data-screen="perfil"] .atlas-territory .perfil-account .actions { display: grid; gap: 10px; justify-content: stretch !important; }
#app[data-screen="perfil"] .atlas-territory .perfil-account .actions .btn { width: 100%; }
#app[data-screen="perfil"] .atlas-territories { gap: 22px; }

/* Guía: el texto de las fichas con la letra de interfaz, como el resto de la guía, y la
   etiqueta en su propia línea en vez de partirse junto al título. */
.guide-handbook .gc-body b { display: block; font-size: .95rem; line-height: 1.25; }
.guide-handbook .gc-body em { display: table; margin: 6px 0 0; border-radius: 10px; font-family: var(--ui-font); white-space: normal; }
.guide-handbook .gc-body small { margin-top: 7px; font-family: var(--ui-font); font-size: .82rem; line-height: 1.5; }
.guide-handbook .guide-cards { gap: 10px; }
.guide-handbook .guide-card { padding: 14px 15px; }
.guide-handbook .guide-chapter-body > p, .guide-handbook .guide-chapter-body > h4 { font-family: var(--ui-font); }
.guide-handbook .guide-chapter-body > h4 { margin: 20px 0 6px; }

/* Con el texto grande, las paradas del mapa del Atlas ya no caben en sus posiciones fijas y se
   pisaban: pasan a una columna en zigzag, sin posiciones absolutas. */
:root:is([data-text-size="125"], [data-text-size="150"], [data-text-size="200"]) #app[data-screen="perfil"] .atlas-chart { height: auto; display: grid; gap: 12px; padding: 28px 18px 84px; }
:root:is([data-text-size="125"], [data-text-size="150"], [data-text-size="200"]) #app[data-screen="perfil"] .atlas-chart-heading { position: static; margin: 0 56px 6px 0; }
:root:is([data-text-size="125"], [data-text-size="150"], [data-text-size="200"]) #app[data-screen="perfil"] .atlas-chart-route { display: none; }
:root:is([data-text-size="125"], [data-text-size="150"], [data-text-size="200"]) #app[data-screen="perfil"] .atlas-chart-stop { position: relative; inset: auto; width: 78%; min-height: 0; }
:root:is([data-text-size="125"], [data-text-size="150"], [data-text-size="200"]) #app[data-screen="perfil"] .atlas-chart-stop:nth-of-type(even) { justify-self: end; }

/* Resumen del reto en Inicio: una tarjeta de papel como las demás, con «Ver ranking» como el
   enlace subrayado de latón de «Jugar el reto de hoy», en vez de un botón blanco. */
#app[data-screen="home"] .mode-ranking-summary {
  gap: 4px; margin-top: 14px; padding: 16px 18px 18px;
  border: 1.5px solid #d2b683; border-radius: 14px;
  background: linear-gradient(180deg, #fbf5e8, #f4ead5);
  box-shadow: 0 2px 0 #e2cfa6, 0 10px 22px #4a321a1f, inset 0 0 0 4px #fffaf0, inset 0 0 0 5px #c4a46c40;
  color: #2a1c12;
}
#app[data-screen="home"] .mode-ranking-summary .mode-ranking-stats b { color: #2a1c12; font: 500 1.7rem/1.1 var(--font-display); }
#app[data-screen="home"] .mode-ranking-summary .mode-ranking-stats small { margin-top: 3px; color: #5f5142; }
#app[data-screen="home"] .mode-ranking-summary .mode-ranking-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 0;
  margin: 14px auto 0; padding: 0 0 4px; border: 0; border-bottom: 1.5px solid #9c7641; border-radius: 0;
  background: none; box-shadow: none; color: #6e4a1f; font: 700 1.05rem/1.3 var(--font-display);
}
#app[data-screen="home"] .mode-ranking-summary .mode-ranking-link:active { opacity: .7; transform: none; }
:root[data-theme="dark"] #app[data-screen="home"] .mode-ranking-summary { border-color: #8c6f45; background: linear-gradient(180deg, #3a3024, #30271c); box-shadow: 0 12px 26px #0006; color: #f1e1bf; }
:root[data-theme="dark"] #app[data-screen="home"] .mode-ranking-summary .mode-ranking-stats b { color: #f1e1bf; }
:root[data-theme="dark"] #app[data-screen="home"] .mode-ranking-summary .mode-ranking-stats small { color: #e9dcc3; }
:root[data-theme="dark"] #app[data-screen="home"] .mode-ranking-summary .mode-ranking-link { color: #e6c58e; border-color: #c8a26a; }

.app-version { display: none; }

/* Una sola columna que nunca se ensancha más que la pantalla. Sin esto, la pista «auto» de .pass-screen crece hasta el
   ancho natural de su contenido más ancho (el recorrido de una competición, con sus capítulos en fila) y, al centrarlo,
   deja todo el resultado fuera de la pantalla: al final de una competición se veía solo el fondo. */
.pass-screen { grid-template-columns: minmax(0, 1fr); }

/* Los capítulos del recorrido son una columna (círculo, número, nombre, estado). Las reglas genéricas de listas
   (.tournament-board li, .comp-summary li) los convertían en una fila y apretaban los círculos. */
.chapter-journey ol > li.chapter-stop { display: grid; justify-content: normal; gap: 0; padding: 0; border-bottom: 0; background: none; border-radius: 0; }

/* ---- Colecciones ligeras (móviles con poca memoria gráfica) ----
   Cada tarjeta de colección apilaba un giro 3D, una copia desenfocada de su imagen, una máscara y un filtro, y además
   se recalculaba en cada fotograma de scroll. Con seis tarjetas seguidas, WebKit en algunos iPhone dejaba de pintar
   unas cuantas (huecos en blanco entre tarjetas, sobre todo al desplazarse deprisa). Se quita lo que más pesa y
   apenas se nota: sin giro 3D, sin copia desenfocada y sin máscara; la lámina y el degradado se mantienen. */
#app .gallery-panel { transform: none !important; }
#app .gallery-panel .panel-backdrop,
#app .gallery-panel .panel-depth-light,
#app .gallery-panel .panel-depth-ground { display: none; }
#app .gallery-panel .panel-art { -webkit-mask-image: none; mask-image: none; filter: none; }
#app .gallery-panel .panel-art img { transform: none !important; transition: none; filter: none; }
#app .gallery-panel:not(.active) .panel-art img { filter: none; }
#app .gallery-panel:active { transform: none !important; }

/* Un cajón cerrado no ocupa nada: no depende de que el motor colapse una fila «0fr». */
#app .collection-drawer[inert] { display: none; }

/* ---- Pantallas estrechas y letra grande: nada se sale del móvil ---- */
.player-row { grid-template-columns: minmax(0, 1fr) auto; }
.player-row input { min-width: 0; width: 100%; box-sizing: border-box; }
#app .shell, #app .shell > * { min-width: 0; max-width: 100%; }
#app .mode-daily-family, #app .mode-ranking-summary small, #app .daily-stats small { overflow-wrap: anywhere; hyphens: auto; }
#app .mode-ranking-stats, #app .daily-stats { min-width: 0; }
#app .mode-ranking-stats > span, #app .daily-stats > span { min-width: 0; }
.quick-shell .quick-length { min-width: 0; }
.quick-shell .quick-length-chip { min-width: 0; overflow-wrap: anywhere; }
:root:is([data-text-size="150"], [data-text-size="200"]) #app .home-wordmark { font-size: min(3.2rem, 12.5vw); max-width: 100%; }
:root:is([data-text-size="150"], [data-text-size="200"]) #app .home-door-copy { min-width: 0; }
:root:is([data-text-size="150"], [data-text-size="200"]) #app .home-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root:is([data-text-size="150"], [data-text-size="200"]) #app .home-nav button { min-width: 0; }
:root:is([data-text-size="150"], [data-text-size="200"]) #app .home-nav small { font-size: .62rem; overflow-wrap: anywhere; }

/* El artista se lee también antes de revelar las ventas, sin modificar el tamaño de la carta. */
#app .quick-shell .quick-card-artist { display: block; margin-top: 2px; font-family: var(--font-body); font-size: .78em; line-height: 1.12; font-weight: 500; color: #675842; }
#app .quick-shell .hand-card > strong:has(.quick-card-artist) { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* ── Materia y vida ──────────────────────────────────────────────────────────────
   Lo que hace que una mesa de juego digital parezca de verdad: el papel tiene textura,
   las ilustraciones respiran, la luz de la mesa está viva y colocar una carta es un
   gesto con peso. Nada de esto toca el estado de la partida, y todo lo que se mueve
   se apaga con «reducir movimiento». Las animaciones solo usan transform y opacity:
   el móvil las resuelve sin repintar. */

/* Cartulina con acabado de lino, como la de los naipes de buena calidad: una trama
   fina de hilos y un grano irregular de papel, impresos encima de la ilustración y del
   texto. Se multiplica con lo que hay debajo, así que oscurece apenas y no cambia
   ningún color. */
:root {
  --carta-lino: url("assets/texturas/lino.svg");
  --carta-grano: url("assets/texturas/grano.svg");
}
/* Va por encima del texto (que ya es una capa con z-index 1) y por debajo del sello de
   temática y del pespunte, que son z-index 3. */
#app .timeline-card::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: var(--carta-lino), var(--carta-grano);
  background-size: 9px 9px, 160px 160px;
  mix-blend-mode: multiply;
  /* Un canto con algo de grosor: luz arriba y una sombra muy leve abajo. */
  box-shadow: inset 0 1px 0 #fffaea80, inset 0 -2px 3px #5a3c1a12;
}
#app .hand-card, #app .drag-ghost, #app .drag-settle,
.drag-ghost, .drag-settle {
  background-image: var(--carta-lino), var(--carta-grano);
  background-size: 9px 9px, 160px 160px;
}

/* El golpe al colocar (a11y.js · impact): polvo que sale por debajo de la carta. */
.card-impact-dust {
  position: absolute; z-index: 4; width: 78px; height: 34px; margin-left: -39px; pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 60%, #b8925bdd 0 9%, transparent 22%),
    radial-gradient(circle at 70% 45%, #c09a62cc 0 7%, transparent 19%),
    radial-gradient(ellipse at center, #b99359e6 0 22%, #cfb07ca6 46%, transparent 72%);
  filter: blur(1.2px); opacity: 0;
  animation: polvo-golpe 700ms cubic-bezier(.2,.7,.3,1) both;
}
.card-impact-dust.dust-left { --polvo-x: -38px; }
.card-impact-dust.dust-right { --polvo-x: 38px; }
@keyframes polvo-golpe {
  0% { opacity: 1; transform: translateX(0) scale(.3, .45); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translateX(var(--polvo-x)) translateY(-12px) scale(1.6, 1.3); }
}

/* La vista previa del hueco elegido (immersion.js · previewCard): la carta boca abajo,
   entera y con color, posada en la línea, y debajo el tramo de fechas que ocupa. */
#app.atlas-board .slot-confirm.has-preview-card {
  display: grid; align-content: center; justify-items: center; padding: 6px 4px;
  border: 1.5px dashed color-mix(in srgb, var(--atlas-selection) 70%, transparent);
  background: radial-gradient(ellipse at 50% 85%, #c7a2622e, transparent 70%), #fbf4e46b;
  box-shadow: inset 0 0 0 4px #fff8e866;
}
#app.atlas-board .slot-confirm-card.preview-card {
  position: relative; width: 100%; min-height: 0; padding: 6px 6px 8px; gap: 6px;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  border: 1px solid #b88d4d; border-radius: 8px; opacity: 1; filter: none;
  background-color: #f7eedb;
  background-image: var(--carta-lino), var(--carta-grano);
  background-size: 9px 9px, 160px 160px;
  box-shadow: 0 2px 0 #b89b6e, 0 10px 18px #4a341a33, inset 0 0 0 3px #fff8e9;
  transform-origin: 50% 100%;
}
#app.atlas-board .preview-card-face {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 5px;
  border: 1px solid #d7c29a;
  background: radial-gradient(circle at 50% 45%, #fffaf0, #efe2c6 75%);
}
#app.atlas-board .preview-card-face img { width: 82%; height: auto; }
#app.atlas-board .slot-confirm-card.preview-card strong { font: 700 .74rem/1.15 var(--font-display, Georgia); color: var(--edition-ink); }
#app.atlas-board .preview-range {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 5px;
  margin: 2px 0 0; padding: 5px 4px 3px; border-top: 1px solid #d8c39b;
  color: #8b3f2c; font: 700 .78rem/1.1 var(--font-display, Georgia); text-align: center;
}
#app.atlas-board .preview-range small {
  flex-basis: 100%; color: var(--edition-muted); font: 700 .5rem/1 var(--ui-font);
  letter-spacing: .12em; text-transform: uppercase;
}
#app.atlas-board .preview-range i { width: 10px; height: 1px; align-self: center; background: currentColor; opacity: .6; }

@media (prefers-reduced-motion: no-preference) {
  /* La carta cae en el hueco: llega desde arriba, golpea aplastándose, rebota y queda
     flotando apenas, a la espera de confirmar. El polvo sale del golpe. */
  #app.atlas-board .slot-confirm.placement-enter { animation: none; }
  #app.atlas-board .slot-confirm.placement-enter .preview-card { animation: vista-cae 560ms both, vista-flota 3.2s 900ms ease-in-out infinite; }
  #app.atlas-board .slot-confirm.has-preview-card:not(.placement-enter) .preview-card { animation: vista-flota 3.2s ease-in-out infinite; }
  #app.atlas-board .slot-confirm.placement-enter::after {
    content: ''; position: absolute; left: 50%; bottom: 4px; width: 120%; height: 26px; margin-left: -60%;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse at center, #c9a46aa6 0 20%, #d9bd8a5c 45%, transparent 70%);
    filter: blur(2px); animation: vista-polvo 620ms 230ms ease-out both;
  }
  #app.atlas-board .slot-confirm.has-preview-card { position: relative; }

  /* Las láminas de las puertas respiran: un acercamiento lento que va y vuelve, cada una
     a su ritmo, y un reflejo de luz que las cruza de vez en cuando. */
  #app .home-door-art img,
  #app .mode-entry-art img,
  #app .mode-hub-head > img {
    animation: lamina-viva 13s ease-in-out infinite alternate both;
  }
  #app .mode-entry:nth-child(2n) .mode-entry-art img { animation-duration: 15s; animation-delay: -6s; }
  #app .mode-entry:nth-child(3n) .mode-entry-art img { animation-duration: 11s; animation-delay: -3s; animation-direction: alternate-reverse; }
  #app .home-door-daily .home-door-art img { animation-duration: 14s; animation-delay: -7s; }
  #app :is(.home-door-art, .mode-entry-art)::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, #fff3d455 45%, #fffaeccc 50%, #fff3d455 55%, transparent 62%) no-repeat;
    background-size: 250% 100%;
    animation: lamina-reflejo 9s ease-in-out infinite;
    mix-blend-mode: screen;
  }
  #app .mode-entry:nth-child(2n) .mode-entry-art::after { animation-delay: -3s; }
  #app .home-door-daily .home-door-art::after { animation-delay: -5s; }

  /* La lámpara de la mesa: un haz de rayos cálidos desde la esquina superior que oscila
     despacio y una luz que respira con un pulso irregular. Detrás de todo. */
  html::after {
    content: ''; position: fixed; z-index: -1; top: -10vh; left: -30vw; width: 160vw; height: 110vh; pointer-events: none;
    background:
      repeating-conic-gradient(from 90deg at 50% 12%, #fffaf000 0deg 4deg, #fffaf0b3 7deg, #fffaf000 10deg 15deg),
      radial-gradient(ellipse 30% 26% at 50% 14%, #fff8e6cc, transparent 70%);
    mix-blend-mode: screen;
    -webkit-mask: radial-gradient(ellipse 48% 62% at 50% 12%, #000 25%, transparent 78%);
    mask: radial-gradient(ellipse 48% 62% at 50% 12%, #000 25%, transparent 78%);
    transform-origin: 50% 12%;
    animation: lampara-haz 11s ease-in-out infinite alternate, lampara 6s ease-in-out infinite;
  }
  :root[data-theme="dark"]::after { opacity: .5; }
  html:has(#app.atlas-board)::after { animation-play-state: paused; opacity: .45; }
}

/* Las motas de polvo en la luz son elementos sueltos (effects.js · motas), cada una con
   su ritmo; aquí solo su aspecto. */
.motas { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.motas i {
  position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #fffdf3 0 30%, #e8b14f 58%, #c98a2a00 72%);
  box-shadow: 0 0 7px 2px #f0b9529e;
  opacity: 0;
  animation: mota-sube var(--d) linear var(--delay) infinite;
}
.motas i:nth-child(3n) { animation-name: mota-sube-b; }
:root[data-theme="dark"] .motas { opacity: .55; }
html:has(#app.atlas-board) .motas { display: none; }
@media (prefers-reduced-motion: reduce) { .motas { display: none; } }

@keyframes vista-cae {
  0% { opacity: 0; transform: translateY(-42px) rotate(-4deg) scale(1.08); }
  40% { opacity: 1; transform: translateY(-14px) rotate(-1.5deg) scale(1.06); }
  58% { transform: translateY(3px) rotate(0) scale(1.07, .88); }
  74% { transform: translateY(-6px) scale(.97, 1.04); }
  88% { transform: translateY(1px) scale(1.01, .99); }
  100% { opacity: 1; transform: none; }
}
@keyframes vista-flota {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes vista-polvo {
  0% { opacity: .9; transform: scale(.4, .5); }
  100% { opacity: 0; transform: scale(1.35, 1.1) translateY(-6px); }
}
@keyframes lamina-viva {
  from { scale: 1; translate: 0 0; }
  to { scale: 1.12; translate: -3.5% -2.5%; }
}
@keyframes lamina-reflejo {
  0%, 55% { background-position: 120% 0; }
  85%, 100% { background-position: -20% 0; }
}
@keyframes lampara-haz {
  from { transform: rotate(-6deg); }
  to { transform: rotate(7deg); }
}
@keyframes lampara {
  0%, 100% { opacity: .55; }
  21% { opacity: 1; }
  38% { opacity: .72; }
  55% { opacity: .95; }
  74% { opacity: .45; }
}
@keyframes mota-sube {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: var(--o); }
  50% { transform: translate3d(var(--sway), -45vh, 0); }
  85% { opacity: var(--o); }
  100% { opacity: 0; transform: translate3d(0, -90vh, 0); }
}
@keyframes mota-sube-b {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15% { opacity: var(--o); }
  35% { transform: translate3d(calc(var(--sway) * -1), -30vh, 0); }
  70% { transform: translate3d(var(--sway), -62vh, 0); }
  80% { opacity: var(--o); }
  100% { opacity: 0; transform: translate3d(0, -88vh, 0); }
}

/* ── Escenario según el mazo ──────────────────────────────────────────────────────
   La lámina se trata como un grabado tenue sobre papel, limitado a la parte alta.
   Una máscara amplia disuelve sus contornos sin una mancha opaca en el centro.
   Solo cambia el fondo fijo de la mesa (#app.atlas-board). */
:root[data-scene="history"] { --scene-art: url("assets/hero-history-700.webp"); --scene-art-pos: center 30%; }
:root[data-scene="entertainment"] { --scene-art: url("assets/hero-entertainment-700.webp"); --scene-art-pos: center 20%; }
:root[data-scene="science"] { --scene-art: url("assets/hero-science-700.webp"); --scene-art-pos: center 20%; }
:root[data-scene="nature"] { --scene-art: url("assets/hero-nature-700.webp"); --scene-art-pos: center 25%; }
:root[data-scene="globe"] { --scene-art: url("assets/hero-geography-700.webp"); --scene-art-pos: center 15%; }
:root[data-scene="mixed"] { --scene-art: url("assets/hero-mixed-700.webp"); --scene-art-pos: center 25%; }
:root:is([data-scene="history"], [data-scene="entertainment"], [data-scene="science"], [data-scene="nature"], [data-scene="globe"], [data-scene="mixed"]):has(#app.atlas-board) {
  background: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--scene-wash) 9%, transparent), transparent 65%), var(--edition-paper);
}
:root:is([data-scene="history"], [data-scene="entertainment"], [data-scene="science"], [data-scene="nature"], [data-scene="globe"], [data-scene="mixed"]):has(#app.atlas-board)::before {
  height: clamp(380px, 58lvh, 680px);
  background: var(--scene-art) var(--scene-art-pos) / cover no-repeat;
  opacity: .28;
  filter: grayscale(.35) saturate(.55) sepia(.18);
  -webkit-mask-image: radial-gradient(ellipse 130% 100% at 78% 0%, #000 8%, #0009 44%, transparent 100%);
  mask-image: radial-gradient(ellipse 130% 100% at 78% 0%, #000 8%, #0009 44%, transparent 100%);
}
:root[data-theme="dark"]:is([data-scene="history"], [data-scene="entertainment"], [data-scene="science"], [data-scene="nature"], [data-scene="globe"], [data-scene="mixed"]):has(#app.atlas-board)::before {
  opacity: .18;
  filter: grayscale(.35) saturate(.55) sepia(.18);
}
/* La mesa deja ver la escena: el panel de la línea pierde algo de su papel opaco. */
:root:is([data-scene="history"], [data-scene="entertainment"], [data-scene="science"], [data-scene="nature"], [data-scene="globe"], [data-scene="mixed"]) #app.atlas-board .board-timeline-section {
  border-color: color-mix(in srgb, var(--scene-color) 30%, #d9c7a4);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--scene-color) 14%, transparent), inset 0 0 0 1px #fff8e855;
}

/* La ficha de una carta crece desde la carta (a11y.js · zoomFromCard): sin la entrada
   genérica de los diálogos, que la haría deslizarse desde abajo. */
.zoom-detail.dialog-enter .modal { animation: none; }

/* Mano en abanico con física (immersion.js · mountHandFan): al apoyar el dedo, la carta
   del centro se levanta un poco, como al cogerla de la mesa. `translate` y no
   `transform`, que es donde vive la postura del abanico. */
@media (prefers-reduced-motion: no-preference) {
  #app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan .hand-card { transition: translate 160ms ease-out; }
  #app.atlas-board[data-platform][data-device][data-screen] .atlas-hand-section .hand.hand-fan.fan-touch .hand-card.fan-center { translate: 0 -7px; }
}

/* Cambio de turno (immersion.js · handOff): la tarjeta del siguiente sube mientras la
   mano anterior cae, y su medallón aparece con un pequeño salto. */
@media (prefers-reduced-motion: no-preference) {
  #app .pass-card.turn-arrive { animation: turno-sube 620ms 180ms cubic-bezier(.3,1.3,.5,1) both; }
  #app .pass-card.turn-arrive .player-medallion { animation: turno-medallon 520ms 560ms cubic-bezier(.3,1.6,.5,1) both; }
}
@keyframes turno-sube { from { opacity: 0; transform: translateY(70px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes turno-medallon { from { transform: scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Fallo con más presencia (a11y.js): la carta fallada entera viaja a su sitio. */
.placement-correction-card.is-card {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  border-radius: 8px; border: 2px solid #a5543a;
  box-shadow: 0 18px 30px #36210d45, 0 0 0 4px #a5543a26;
  background-color: #f6ead0;
  background-image: var(--carta-lino), var(--carta-grano);
  background-size: 9px 9px, 160px 160px;
}
.placement-correction-card.is-card .correction-art { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.placement-correction-card.is-card .correction-art img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.15); }
.placement-correction-card.is-card .correction-body { display: grid; gap: 2px; padding: 6px 8px 8px; }
.placement-correction-card.is-card .correction-body small { color: #944e35; font: 700 .5rem/1.2 var(--ui-font); letter-spacing: .08em; text-transform: uppercase; }
.placement-correction-card.is-card .correction-body b { font: 700 .74rem/1.15 var(--font-display, Georgia); color: var(--edition-ink); }
.placement-correction-card.is-card .correction-body span { color: #93482e; font: 700 .95rem/1 var(--font-display, Georgia); }
.correction-trail { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 79; pointer-events: none; overflow: visible; }
.correction-trail-ink { stroke: #a5543a; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1.4 2.4; opacity: .8; }

/* Puntuación que se ilumina por partes (immersion.js · lightScore). */
@media (prefers-reduced-motion: no-preference) {
  #app .atlas-final-page .atlas-final-fan > .timeline-card { transition: translate 260ms cubic-bezier(.3,1.5,.5,1), box-shadow 260ms ease-out; }
  #app .atlas-final-page .atlas-final-fan > .timeline-card.final-lit {
    translate: 0 -10px;
    box-shadow: 0 0 0 2px #d6a542, 0 0 18px #e8bd5e99, 0 10px 18px #33210e40;
  }
  #app .atlas-final-page .atlas-final-fan > .timeline-card.final-lit::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, #fff3c8b3 48%, #fffbe9e6 50%, #fff3c8b3 52%, transparent 70%) no-repeat;
    background-size: 260% 100%; mix-blend-mode: screen;
    animation: final-brillo 620ms ease-out both;
  }
  #app .final-score.final-score-sealed { animation: final-sello 520ms cubic-bezier(.3,1.6,.5,1); }
}
@keyframes final-brillo { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes final-sello { 0% { transform: scale(1); } 40% { transform: scale(1.08) rotate(-1.5deg); box-shadow: 0 0 0 3px #d6a54266, 0 0 26px #e8bd5e80; } 100% { transform: none; } }

/* Carta del turno en el móvil: el emblema ocupa el hueco que dejan el rótulo de arriba y el
   título de abajo, en vez de ir fijo en medio. Con un título de tres o cuatro líneas o un
   rótulo en dos («VELOCIDAD OCULTA») ya no se pisan; el papel del reverso cubre toda la carta. */
@media (max-width: 699px) {
  html #app.atlas-board .board-focus-card .hand-solo .hand-card { background: var(--cardback-fill); }
  html #app.atlas-board .board-focus-card .hand-solo .hand-card > .carta-reverso {
    position: static; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 2px 0; background: none;
  }
  html #app.atlas-board[data-platform][data-device][data-screen][data-board-fit] .board-focus-card .hand-solo .hand-card .carta-reverso > .reverso-emblema {
    position: relative; inset: auto; top: auto; left: auto; transform: none;
    width: 88% !important; height: 100% !important; max-height: 100% !important;
  }
}

/* Pastillas de elegir (Juego, Jugadores, Si alguien falla, Ritmo, Conexión…): tarjetas de
   papel con la elegida marcada en terracota, como «Duración de la partida» y el tiempo por
   carta. Sustituye a la barra amarilla con la opción rellena de rojo. Los paneles que ya
   tienen sus propias tarjetas (Solitario, Amigos) mantienen las suyas. */
#app .segmented { gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
#app .segmented-option {
  display: grid; place-content: center; justify-items: center; gap: 3px; min-width: 0; min-height: 50px; padding: 8px 8px;
  border: 1px solid #d6bf98; border-radius: 12px; color: #2a1a10; text-align: center;
  background: linear-gradient(165deg, #fffaf1, #f6ead8);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #5a341a12;
  transition: border-color var(--motion-base) ease, background var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
#app .segmented-option b { color: inherit; font: 600 clamp(.84rem, 3.7vw, .98rem)/1.15 var(--font-display); overflow-wrap: normal; text-wrap: balance; }
#app .segmented-option small { margin-top: 1px; color: #5c4a3a; font: .72rem/1.3 var(--ui-font); opacity: 1; text-wrap: pretty; }
#app .segmented-option.is-on {
  border-color: #b8653d; color: #8e3d1e;
  background: linear-gradient(165deg, #fdf3ea, #f4dccb);
  box-shadow: 0 0 0 1px #b8653d, 0 8px 18px -12px #b8653dcc, inset 0 1px 0 #fff;
}
@media (hover: hover) and (pointer: fine) { #app .segmented-option:not(.is-on):hover { border-color: #c9a06f; background: linear-gradient(165deg, #fffaf1, #f3e3cc); color: #2a1a10; } }
#app .segmented-option:has(input:focus-visible) { outline: 2px solid #b8653d; outline-offset: 3px; box-shadow: none; }
:root[data-theme="dark"] #app .segmented-option { color: #f5e6cc; background: #2c2118; border-color: #6d5435; box-shadow: none; }
:root[data-theme="dark"] #app .segmented-option small { color: #cdb99a; }
:root[data-theme="dark"] #app .segmented-option.is-on { color: #ffd9bf; background: #3d2a1d; border-color: #d08a5e; box-shadow: 0 0 0 1px #d08a5e; }
:root[data-theme="dark"] #app .quick-shell .quick-length-chip { color: #f5e6cc; background: #2c2118; border-color: #6d5435; box-shadow: none; }
:root[data-theme="dark"] #app .quick-shell .quick-length-chip small { color: #cdb99a; }
:root[data-theme="dark"] #app .quick-shell .quick-length-chip.is-selected { color: #ffd9bf; background: #3d2a1d; border-color: #d08a5e; box-shadow: 0 0 0 1px #d08a5e; }
@media (hover: hover) and (pointer: fine) { :root[data-theme="dark"] #app .segmented-option:not(.is-on):hover { color: #f5e6cc; background: #33271c; border-color: #8c6f45; } }

/* Tres opciones con icono (el «Ritmo» de las partidas con amigos): una columna a todo el ancho, con el
   icono a la izquierda y el círculo de marcado a la derecha, centrado. Con dos columnas la tercera
   quedaba sola con un hueco al lado. */
#app .solo-home .solo-panel .segmented:has(.duel-option-mark):has(> .segmented-option:nth-child(3)) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
#app .solo-home .solo-panel .segmented:has(.duel-option-mark):has(> .segmented-option:nth-child(3)) > .segmented-option {
  grid-template-columns: 36px minmax(0, 1fr); align-items: center; align-content: center; justify-items: start; column-gap: 12px; row-gap: 0;
  min-height: 64px; padding: 10px 46px 10px 13px;
}
#app .solo-home .solo-panel .segmented:has(.duel-option-mark):has(> .segmented-option:nth-child(3)) > .segmented-option > span { display: grid; gap: 1px; min-width: 0; }
#app .solo-home .solo-panel .segmented:has(.duel-option-mark):has(> .segmented-option:nth-child(3)) > .segmented-option::after { top: 50%; margin-top: -9px; }

/* Tiempo por carta: el mismo selector en todas las pantallas (solitario, un solo móvil,
   amigos, competición, Retos rápidos, salas de espera y mesas públicas), sea cual sea el
   estilo de los demás campos de la pantalla. Cuatro pastillas de papel en una fila; la de
   «Sin tiempo», algo más ancha, parte el texto en dos líneas si no cabe: nunca se sale. */
html #app .tiempo-field .tiempo-segmented {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
html #app .tiempo-field .tiempo-segmented .segmented-option {
  position: relative; display: grid; place-items: center; place-content: center; gap: 0; min-width: 0; min-height: 50px; margin: 0; padding: 6px 6px;
  border: 1px solid #d6bf98; border-radius: 12px; color: #2a1a10; text-align: center;
  background: linear-gradient(165deg, #fffaf1, #f6ead8);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #5a341a12; transform: none;
  transition: border-color var(--motion-base) ease, background var(--motion-base) ease, box-shadow var(--motion-base) ease;
}
html #app .tiempo-field .tiempo-segmented .segmented-option b {
  display: block; min-width: 0; max-width: 100%; margin: 0; color: inherit;
  font: 600 clamp(.82rem, 3.7vw, .96rem)/1.12 var(--font-display);
  white-space: normal; overflow-wrap: normal; text-wrap: balance;
}
html #app .tiempo-field .tiempo-segmented .segmented-option.is-on {
  border-color: #b8653d; color: #8e3d1e;
  background: linear-gradient(165deg, #fdf3ea, #f4dccb);
  box-shadow: 0 0 0 1px #b8653d, 0 8px 18px -12px #b8653dcc, inset 0 1px 0 #fff;
}
@media (hover: hover) and (pointer: fine) { html #app .tiempo-field .tiempo-segmented .segmented-option:not(.is-on):hover { border-color: #c9a06f; background: linear-gradient(165deg, #fffaf1, #f3e3cc); color: #2a1a10; } }
html #app .tiempo-field .tiempo-segmented .segmented-option:has(input:focus-visible) { outline: 2px solid #b8653d; outline-offset: 3px; }
/* El título, también igual en todas: versalitas doradas con una línea fina, como en Solitario. */
html #app :is(.tiempo-field, .poderes-field) > .field-label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 9px; padding: 0;
  color: #8a5a2e; font: 700 .68rem/1.2 var(--ui-font); letter-spacing: .2em; text-transform: uppercase;
}
html #app :is(.tiempo-field, .poderes-field) > .field-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #b8935a80, transparent); }
:root[data-theme="dark"] #app :is(.tiempo-field, .poderes-field) > .field-label { color: #e0b77e; }
#app .poderes-field { margin-top: 18px; }
#app .poderes-field .hint { margin: 0 0 4px; }
/* Sin el circulito de marcado: en pastillas tan cortas tapaba el texto; lo elegido ya se ve por el color. */
html #app .tiempo-segmented .segmented-option::after { content: none !important; }
:root[data-theme="dark"] #app .tiempo-field .tiempo-segmented .segmented-option { color: #f5e6cc; background: #2c2118; border-color: #6d5435; box-shadow: none; }
:root[data-theme="dark"] #app .tiempo-field .tiempo-segmented .segmented-option.is-on { color: #ffd9bf; background: #3d2a1d; border-color: #d08a5e; box-shadow: 0 0 0 1px #d08a5e; }
@media (hover: hover) and (pointer: fine) { :root[data-theme="dark"] #app .tiempo-field .tiempo-segmented .segmented-option:not(.is-on):hover { color: #f5e6cc; background: #33271c; border-color: #8c6f45; } }

/* «Fecha oculta» / «Valor oculto» de las cartas de la mano: centrada y dentro del marco, sin
   rozar la línea del borde. Vale para todas las modalidades y para la carta levantada al arrastrar. */
#app .hand .hand-card > .hidden-date,
.drag-card-preview > .hidden-date {
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 7px;
  text-align: center;
  padding-inline: 4px !important;
}

/* Bienvenida: qué se guarda y que el ranking es opcional, en letra pequeña bajo el campo del nombre. */
#app .bienvenida .bienvenida-datos { margin-top: 10px; font-size: .74rem; line-height: 1.45; }
#app .bienvenida .bienvenida-datos a { color: inherit; text-decoration: underline; }

/* Enlaces que abren algo dentro del juego (créditos de la música): se ven como enlace, son botones. */
#app .link-button { padding: 0; border: 0; background: none; color: var(--accent, #8a3f2f); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#app .link-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
#app .credits-modal { max-width: 26rem; text-align: left; }
#app .credits-modal h2 { margin-top: 0; }
#app .credits-modal .btn { margin-top: 12px; }
#app .credits-modal .hint { text-align: left; }