/* Portada (iso.html). Colores, tipos y componentes de la guía de estilo (dev-docs/ui-kit.html): fondo Noche,
   paneles en cristal ahumado sobre el hero, títulos en Instrument Serif con el remate en itálica ámbar,
   texto en Geist y etiquetas en JetBrains Mono. Los tokens los usan también muestra.css, trofeos.css y mesa.css. */
:root {
  --noche: #14110E; --superficie: #1E1A15; --muro: #2A241D; --muro-claro: #3A3128;
  --pergamino: #F5EEDC; --piedra: #D6D6CE; --ceniza: #B4B4AB; --humo: #8E8E85; --apagado: #6C6C64;
  --ambar: #F0A93C; --oxido: #B0492A; --oxido-claro: #E07A55;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: Geist, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --foco: 0 0 0 3px rgba(240, 169, 60, .35);
  /* alias viejos: los usa iso-demo.html */
  --gold: var(--ambar); --ink: var(--pergamino);
}
/* Tema claro «Pergamino» (botones junto al idioma; asedio-theme, como la web): se invierte la paleta y el óxido toma
   el lugar del ámbar. Los nombres quedan por su papel en el tema oscuro: --noche es el fondo, --pergamino el texto.
   Lo que es un objeto con su propio color (la repetición destacada, la ficha de facción, las piezas del botín y la
   edición física) vuelve a la paleta oscura más abajo. */
:root[data-theme="light"] {
  --noche: #F5EEDC; --superficie: #FBF7EC; --muro: #E7DCC0; --muro-claro: #DDD0B0;
  --pergamino: #1A1A18; --piedra: #4A4A45; --ceniza: #4A4A45; --humo: #6C6C64; --apagado: #9A9488;
  --ambar: #B0492A; --oxido-claro: #B0492A;
  --foco: 0 0 0 3px rgba(176, 73, 42, .35);
  color-scheme: light;
}
:root[data-theme="light"] :is(.gp-feat, .fac-info, .tr-track img, #mesa) {
  --noche: #14110E; --superficie: #1E1A15; --muro: #2A241D; --muro-claro: #3A3128;
  --pergamino: #F5EEDC; --piedra: #D6D6CE; --ceniza: #B4B4AB; --humo: #8E8E85; --apagado: #6C6C64;
  --ambar: #F0A93C; --oxido-claro: #E07A55;
}
:root[data-theme="light"] .gp-feat { color: var(--pergamino); }
/* Botones en tema claro (20 · Pergamino de la guía): todos en píldora; el principal, tinta con texto pergamino
   (en este tema --pergamino es la tinta y --noche el pergamino). El idioma, el tema y «Entrar» son badges: quedan como están. */
:root[data-theme="light"] .btn:not(.intro-btn, .lang-btn) { border-radius: 999px; }
:root[data-theme="light"] .cta, :root[data-theme="light"] .cta:hover { background: var(--pergamino); color: var(--noche); }
:root[data-theme="light"] .cta.md, :root[data-theme="light"] .cta.lg { box-shadow: 0 10px 30px -10px rgba(26, 26, 24, .45); }
:root[data-theme="light"] .cta.md:hover, :root[data-theme="light"] .cta.lg:hover { box-shadow: 0 14px 36px -10px rgba(26, 26, 24, .55); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scroll-behavior: smooth; }
body { background: var(--noche); color: var(--pergamino); font: 400 15px/1.55 var(--sans); }
a { color: var(--pergamino); }
a:hover { color: var(--ambar); }

/* ---------- botones (06 · Botones) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--pergamino);
  border: 1px solid var(--muro-claro); border-radius: 10px; padding: 11px 20px; font: 500 14px var(--sans); text-decoration: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s; }
.btn:hover { border-color: var(--humo); color: var(--pergamino); }
.btn:focus-visible { outline: none; box-shadow: var(--foco); }
.btn:disabled { background: var(--muro); color: var(--apagado); border-color: transparent; cursor: not-allowed; }
.btn.on { background: var(--pergamino); color: var(--noche); border-color: var(--pergamino); }
/* principal ámbar, en tres tamaños: chico (dentro de los paneles), mediano y grande (el resplandor, solo en el CTA principal) */
.cta { border: 0; background: var(--ambar); color: var(--noche); font: 600 15px var(--sans); padding: 12px 24px; border-radius: 10px; }
.cta:hover { color: var(--noche); transform: translateY(-1px); }
.cta:active { transform: translateY(1px); }
.cta.md { font-size: 18px; padding: 18px 44px; border-radius: 12px; box-shadow: 0 10px 40px rgba(240, 169, 60, .3); }
.cta.lg { font-size: 22px; padding: 22px 72px; border-radius: 14px; box-shadow: 0 10px 40px rgba(240, 169, 60, .3); }
.cta.md:hover, .cta.lg:hover { box-shadow: 0 14px 48px rgba(240, 169, 60, .45); }
.cta:focus-visible { box-shadow: var(--foco); }
/* secundario mediano: mismo tamaño que .cta.md, sin relleno ni resplandor */
.btn.md:not(.cta) { font-size: 18px; padding: 17px 43px; border-radius: 12px; }
/* icono de trazo delante del texto */
.btn-ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* etiqueta de sección (07 · Labels): mono en ámbar */
.eyebrow { display: block; font: 500 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ambar); }

/* ---------- logo e idioma ---------- */
#intro { position: relative; display: flex; align-items: center; justify-content: center; padding: max(8px, calc((100vh - 232px) * .075)) 24px; /* 15% del aire original (el logo mide ~232 px) */ background: var(--noche); }
#intro .logo { width: min(338px, 90%); height: auto; mix-blend-mode: lighten; /* el PNG trae fondo casi negro: sobre la Noche no se nota */ }
/* margen lateral del hero: los recuadros (cuenta regresiva y facciones) y los botones junto al logo comparten esa línea */
:root { --hero-x: clamp(32px, 8vw, 112px); }
/* a los lados del logo, a la altura de su centro: «Entrar» alineado con el borde izquierdo de la cuenta regresiva
   e idioma + tema con el derecho del recuadro de facciones */
#btn-jugar, #intro-tools { position: absolute; top: 50%; z-index: 6; transform: translateY(-50%); }
/* «Jugar»: el mismo botón que el del header de la web (.nav a.btn.primary de apps/web): 14px / 600, 8px 16px, radio 10px;
   en tema claro, el principal de arriba (tinta y píldora) */
#btn-jugar { left: var(--hero-x); padding: 8px 16px; font: 600 14px var(--sans); border-radius: 10px; }
:root[data-theme="light"] #btn-jugar { border-radius: 999px; }
#btn-entrar span { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* con sesión, el nombre de usuario */
#intro-tools { right: var(--hero-x); display: flex; gap: 8px; align-items: center; }
/* idioma: el badge de idioma de la guía (bandera + código) */
.lang-btn, .intro-btn { gap: 6px; padding: 7px 10px; border-radius: 6px; background: transparent; color: var(--piedra); font: 500 12px var(--mono); }
.lang-btn { min-width: 64px; /* ancho fijo: ES y EN miden lo mismo */ }
.lang-btn .flag { width: 16px; height: 11px; display: block; border-radius: 2px; }
.intro-btn .btn-ico { width: 16px; height: 16px; }
/* tema: dos botones pegados, el elegido relleno */
.tema { display: flex; }
.tema .intro-btn { padding: 7px 8px; }
.tema .intro-btn:first-child { border-radius: 6px 0 0 6px; }
.tema .intro-btn:last-child { margin-left: -1px; border-radius: 0 6px 6px 0; }
.tema .intro-btn.on { background: var(--muro); color: var(--pergamino); border-color: var(--muro-claro); }
/* logo: el PNG oscuro se funde con la Noche; en el tema claro va el de fondo transparente */
.logo-claro, :root[data-theme="light"] .logo-oscuro { display: none; }
:root[data-theme="light"] #intro .logo-claro { display: block; mix-blend-mode: normal; }
/* tema claro: el logo se pierde contra el fondo; sombra de relieve oscura + resplandor ámbar que late (como la carta en grande de /inventario) */
:root[data-theme="light"] #intro .logo-claro { filter: drop-shadow(0 3px 5px rgba(30, 26, 21, .28)) drop-shadow(0 0 7px rgba(240, 169, 60, .28)); animation: logo-glow 2.8s ease-in-out infinite; }
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 3px 5px rgba(30, 26, 21, .28)) drop-shadow(0 0 5px rgba(240, 169, 60, .18)); }
  50% { filter: drop-shadow(0 4px 7px rgba(30, 26, 21, .33)) drop-shadow(0 0 12px rgba(240, 169, 60, .4)); } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="light"] #intro .logo-claro { animation: none; } }

/* ---------- hero: imagen, cuenta regresiva y facciones ---------- */
/* la imagen (1024×676) mide 66 % del ancho de alto: la capa de 100% × 66vw la funde a noche en su propio borde de abajo,
   aunque #top sea más alto que ella */
#top { position: relative; isolation: isolate; }
#top::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--noche) 0, transparent 22%, transparent 78%, var(--noche) 100%),
    linear-gradient(transparent 55%, var(--noche) 100%) top center / 100% 66vw no-repeat,
    linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
    url(../img/hero.jpeg) top center / 100% auto no-repeat; }
header { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-start; justify-content: flex-end; padding: 12px 16px; min-height: 61px; /* el alto que tenía con el botón de idioma, que ahora va junto al logo */ }
main { padding: 75px 0 24px; }
#stage { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
/* franja de escudos: PNG transparente sobre el fondo de la página, de fondo y en segundo plano: desenfocada, desaturada
   y semitransparente; la sombra la da drop-shadow, que sigue la silueta de cada escudo (una de contacto, corta, y otra
   difusa hacia abajo), más oscura en el tema oscuro y cálida y suave en el claro;
   en el oscuro, detrás, un resplandor cálido tenue para que la sombra se lea sobre el fondo casi negro */
#escudos { position: relative; width: 100%; aspect-ratio: 1523 / 164;
  background: radial-gradient(ellipse 50% 46% at 50% 52%, rgba(150, 110, 60, .12), transparent); }
:root[data-theme="light"] #escudos { background: none; }
#escudos::before { content: ""; position: absolute; inset: 0; background: url(../img/escudos-transparent.png) center / 100% 100% no-repeat;
  opacity: .45; filter: blur(2px) saturate(.55) brightness(.8) drop-shadow(0 1px 1px rgba(0, 0, 0, .5)) drop-shadow(0 6px 9px rgba(0, 0, 0, .45)); }

/* los dos recuadros flotan sobre la imagen: cristal ahumado con el filo y la sombra de la superficie elevada */
#countdown, #facciones { color: var(--pergamino); background: rgba(42, 36, 29, .85); border: 1px solid var(--muro-claro); border-radius: 20px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(245, 238, 220, .05), 0 30px 60px -20px rgba(0, 0, 0, .6); }
/* tema claro: cristal de papel y la imagen sin oscurecer, fundida con el pergamino */
:root[data-theme="light"] #countdown, :root[data-theme="light"] #facciones { background: rgba(251, 247, 236, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 24px 48px -24px rgba(60, 40, 10, .35); }
/* en escritorio, sobre el mapa, el cristal deja ver un poco más la imagen */
@media (min-width: 1025px) {
  #countdown, #facciones { background: rgba(42, 36, 29, .75); }
  :root[data-theme="light"] #countdown, :root[data-theme="light"] #facciones { background: rgba(251, 247, 236, .78); }
}
:root[data-theme="light"] #top::before { background: linear-gradient(var(--noche) 0, transparent 22%, transparent 78%, var(--noche) 100%), linear-gradient(transparent 55%, var(--noche) 100%) top center / 100% 66vw no-repeat, url(../img/hero.jpeg) top center / 100% auto no-repeat; }
:root[data-theme="light"] #escudos::before { opacity: .7; filter: blur(1px) saturate(.75) drop-shadow(0 1px 6px rgba(60, 40, 10, .55)) drop-shadow(0 5px 7px rgba(60, 40, 10, .32)); }
/* flotando, los dos recuadros se achican con el ancho de la ventana: tamaño completo desde ~1440 px */
#countdown, #facciones { padding: clamp(14px, 1.7vw, 24px); }
#countdown { position: absolute; z-index: 5; top: clamp(16px, 2.5vw, 36px); left: var(--hero-x); text-align: center; }
.cd-label { margin-bottom: clamp(10px, 1.1vw, 16px); font: 500 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ambar); }
#countdown.live .cd-label { display: none; }
.cd-timer { display: flex; justify-content: center; gap: 8px; }
.cd-cell { min-width: clamp(46px, 4.4vw, 64px); padding: clamp(7px, .7vw, 10px) 6px; background: var(--superficie); border: 1px solid var(--muro-claro); border-radius: 10px; }
.cd-cell b { display: block; font: 400 clamp(28px, 2.8vw, 40px)/1 var(--serif); color: var(--pergamino); font-variant-numeric: tabular-nums; }
.cd-cell span { display: block; margin-top: 6px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.cd-live { display: none; }
.cd-live strong { display: block; font: italic 400 clamp(28px, 2.8vw, 40px)/1.05 var(--serif); color: var(--ambar); }
.cd-live small { display: block; margin-top: 8px; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--humo); }
#countdown.live .cd-timer { display: none; }
#countdown.live .cd-live { display: block; }
.cd-text { max-width: clamp(300px, 30.5vw, 440px); margin: clamp(10px, 1.1vw, 16px) 0 0; font-size: clamp(13px, 1vw, 14px); line-height: 1.55; text-align: left; color: var(--ceniza); text-wrap: pretty; }
.cd-text + .cd-text { margin-top: 8px; }
#countdown .cta { margin-top: clamp(12px, 1.4vw, 20px); }
#countdown .cta, #facciones .cta { font-size: clamp(13px, 1.05vw, 15px); padding: clamp(9px, .85vw, 12px) clamp(16px, 1.7vw, 24px); }
.gold-icon { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; }

/* recuadro de facciones (abajo a la derecha): escudos de las órdenes de cada bando y su CTA */
#facciones { position: absolute; z-index: 5; bottom: 16px; right: var(--hero-x); display: grid; gap: clamp(10px, 1.1vw, 16px); --sh: clamp(30px, 2.8vw, 40px); /* ancho de cada escudo */ }
.fac-row { display: grid; justify-items: center; gap: clamp(8px, .85vw, 12px); }
.fac-shields { display: flex; padding-left: calc(var(--sh) * .285 - 6px); /* el escudo ocupa ~71,5 % del ancho del svg: 6px de aire entre los trazos visibles */ }
.fac-shields svg { width: var(--sh); height: auto; display: block; margin-left: calc(var(--sh) * -.285 + 6px); filter: drop-shadow(0 1px 2px #000a); }
#facciones > .cta { width: 100%; }   /* entre los escudos de Blancas y los de Negras */
.fac-king { height: 1.6em; width: auto; flex: none; margin: -4px 0; filter: drop-shadow(0 1px 1px #0006); }
/* ficha de facción: sale arriba del recuadro al pasar el cursor por un escudo (la ficha flotante de la guía: superficie, borde, sombra caída) */
#facciones { --fi-w: 360px; }
.fac-info { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; text-align: left;
  background: var(--superficie); border: 1px solid var(--muro-claro); border-radius: 12px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .7); pointer-events: none; }
.fac-info[hidden] { display: none; }
#fac-info { position: absolute; bottom: calc(100% + 12px); right: 0; width: var(--fi-w); }
.fi-shield svg { width: 64px; height: auto; display: block; filter: drop-shadow(0 1px 3px #000a); }
.fi-body h3 { margin: 0 0 6px; font: 400 28px/1 var(--serif); color: var(--pergamino); }
.fi-desc { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--muro); font-size: 13px; line-height: 1.45; color: var(--ceniza); }
.fi-body h4 { margin: 0 0 8px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.fi-buffs { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--ceniza); }
.fi-buffs li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.fi-buffs strong { color: var(--pergamino); font-weight: 600; font-size: 14px; }
/* tipo de ventaja: badge con borde (07 · Labels) en los colores de las categorías de ordenes.html */
.fi-pill { padding: 3px 7px; border: 1px solid var(--c); border-radius: 4px; color: var(--c); font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.fi-eco { --c: #7fb276; } .fi-mil { --c: #e07a70; } .fi-def { --c: #7ea7dc; } .fi-ase { --c: #cf9a62; } .fi-eda { --c: #b98ac6; } .fi-mov { --c: #5fc0bd; }

/* ---------- botón del tutorial, bajo el tablero de la muestra ---------- */
.ms-tut { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px 40px; padding: 40px 16px 8px; }
.ms-tut-item { display: grid; justify-items: center; gap: 12px; }
.ms-tut-sub { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--humo); }

/* ---------- pie de página (el pie grande de la web: .foot.big de apps/web/src/global.css) ---------- */
.logo-link { display: block; width: min(338px, 90%); line-height: 0; } /* el logo de arriba: ya no es un enlace (2026-11-02) */
#intro .logo-link .logo { width: 100%; }
/* Logo de toda la app: la marca en serif con letras espaciadas (como .brand de la web y del juego), en grande. El anterior (imagen) quedó comentado en iso.html. */
.logo-marca { width: auto; max-width: 100%; font: 400 clamp(36px, 9vw, 64px)/1 var(--serif); letter-spacing: .3em; margin-right: -.3em; /* compensa el espacio tras la última letra */ color: var(--piedra); text-align: center; white-space: nowrap; user-select: none; }
#pie { padding: 64px 56px 0; background: color-mix(in srgb, var(--noche) 55%, var(--muro)); border-top: 1px solid var(--muro); }
.pie-in { max-width: 1168px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px 64px; }
.pie-logo { font: 400 24px/1 var(--serif); letter-spacing: .3em; color: var(--piedra); text-decoration: none; }
.pie-marca p { margin: 16px 0 24px; max-width: 360px; font-size: 14px; line-height: 1.55; color: var(--ceniza); text-wrap: pretty; }
.pie-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.pie-cols h2 { margin: 0 0 14px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--humo); }
.pie-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.pie-cols a { color: var(--ceniza); text-decoration: none; }
.pie-cols a:hover, .pie-logo:hover { color: var(--ambar); }
.pie-bar { max-width: 1168px; margin: 48px auto 0; padding: 20px 0 24px; border-top: 1px solid var(--muro); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font: 400 12px var(--mono); color: var(--humo); }

/* tablet: los dos recuadros dejan de flotar y van debajo del mapa, en dos columnas */
@media (max-width: 1024px) {
  #top { display: flex; flex-direction: column; }
  header { order: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 16px; padding: 8px var(--hero-x) 24px; min-height: 0; }
  #countdown, #facciones { position: static; padding: 20px; }
  #countdown { display: flex; flex-direction: column; align-items: center; }
  #countdown .cd-timer { align-self: stretch; }
  .cd-cell { min-width: 0; flex: 1; }
  .cd-text { max-width: none; align-self: stretch; }
  #countdown .cta, #facciones .cta { font-size: 15px; padding: 12px 24px; }
  #facciones { --sh: min(40px, 5vw); align-content: space-between; }
  main { padding: 32px 0 16px; }
}
/* tablet chica y teléfono: una sola columna, la cuenta regresiva arriba de las facciones */
@media (max-width: 720px) {
  header { grid-template-columns: minmax(0, 1fr); }
  #facciones { --sh: min(40px, 11vw); }
}
/* pantallas angostas */
@media (max-width: 760px) {
  #btn-jugar, #intro-tools { top: 8px; transform: none; }   /* angosto: el logo ocupa casi todo el ancho */
  :root { --hero-x: 16px; }                                 /* los recuadros se apilan con el margen del header */
  #intro .logo-marca { margin-top: 10px; }                  /* portada móvil: 10 px de aire arriba de la marca */
  #btn-entrar span { display: none; }                       /* solo el icono */
  #countdown, #facciones { padding: 20px 16px; }
  #fac-info { display: none; }
  .cta.lg { font-size: 20px; padding: 20px 56px; }
  .cta.md { font-size: 17px; padding: 16px 36px; }
  #pie { padding: 40px 16px 0; }
  .pie-in { grid-template-columns: minmax(0, 1fr); }
  .pie-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-bar { margin-top: 32px; }
}