/* Tipografías servidas desde el propio dominio.
   Antes venían de fonts.googleapis.com: una hoja de terceros que BLOQUEA el
   pintado y que, de paso, manda la IP de cada visitante a Google. Servirlas
   aquí quita la petición externa, quita el bloqueo de un tercero y permite
   cerrar la CSP, que ya no necesita autorizar dominios de fuera.
   Solo se incluyen los subconjuntos latin y latin-ext: el resto (cirílico,
   griego, vietnamita) no se usa en el sitio. `font-display:swap` viene de
   Google y se mantiene: el texto se lee desde el primer momento con la
   tipografía del sistema y cambia cuando llega la definitiva. */

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cinzel-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cinzel-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cinzel-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cinzel-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cinzel-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cinzel-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-500-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-500-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   AMANECER DEL OCASO — sistema visual v5
   Basado en el Manual de dirección visual v3:
   - Tokens --ado-* (cap. 3). Naranja = acción; oro = legado;
     cian = Fractura (escaso); verde/rojo funcionales.
   - Cinzel ceremonial · Inter interfaz · Cormorant editorial.
   - Botón primario naranja con TEXTO OSCURO (regla AA).
   - Gradación de inmersión: Home máxima, aplicación contenida.
   - "La luz naranja debe parecer emitida por un artefacto":
     brillo localizado, nunca en todo a la vez.
   ============================================================ */

:root{
  /* --- tokens de marca (cap. 3 del manual) --- */
  --ado-ember:#E75818;          /* primario: CTA, foco, energía   */
  --ado-ember-bright:#FF7A21;   /* emisión y hover                */
  --ado-ember-deep:#B83D13;
  --glow-ember-strong:0 0 26px rgba(255,122,33,.5);     /* pressed, sombras cálidas       */
  --ado-gold:#D7A84A;           /* legado, títulos, rareza        */
  --ado-void:#0B0A12;           /* fondo base                     */
  --ado-carbon:#0B0B0D;         /* fondo alternativo              */
  --ado-obsidian:#141417;       /* superficie 1                   */
  --ado-graphite:#1A1A20;       /* superficie 2                   */
  --ado-slate:#202028;          /* superficie 3                   */
  --ado-rift:#58C7D5;           /* Fractura / info dimensional    */
  --ado-ivory:#F2ECE1;          /* texto principal                */
  --ado-blood:#A61E2E;          /* peligro / eliminación          */
  --ado-emerald:#2E8B57;        /* éxito / abierto                */
  --ado-muted:#9c96a8;          /* texto secundario               */
  --ado-line:#26232e;           /* bordes de superficie           */
  --ado-line-soft:#1d1a24;

  /* --- alias heredados (mantienen vivo todo el sitio) --- */
  --bg:var(--ado-void); --panel:var(--ado-obsidian); --panel2:var(--ado-graphite);
  --border:var(--ado-line); --text:var(--ado-ivory); --muted:var(--ado-muted);
  --accent:var(--ado-gold); --accent2:var(--ado-ember);
  --ok:var(--ado-emerald); --err:#e0606f; --radius:14px;

  --font-brand:'Cinzel', Georgia, serif;
  --font-edit:'Cormorant Garamond', Georgia, serif;
  --font-ui:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --glow-ember:0 0 18px rgba(231,88,24,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
/* CRÍTICO: el atributo hidden SIEMPRE gana a cualquier display de estas hojas. */
[hidden]{display:none!important}

html{scroll-behavior:smooth}
body{
  background:var(--ado-void);
  background-image:
    radial-gradient(1100px 500px at 85% -10%, rgba(231,88,24,.05), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(88,199,213,.03), transparent 60%);
  color:var(--ado-ivory);
  font-family:var(--font-ui);font-size:16px;line-height:1.6;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--ado-ember-bright)}
a:hover{color:var(--ado-gold)}
main{flex:1}
.container{max-width:880px;margin:0 auto;padding:28px 18px 56px;width:100%}
.container.wide{max-width:1120px}
.container-full{width:100%;padding:0 0 56px}
.container-full .container.wide{padding-top:0}
.container-full > .msg{margin:12px 18px}

/* foco visible inspirado en el núcleo del símbolo */
:focus-visible{outline:2px solid var(--ado-ember);outline-offset:3px;border-radius:6px}

/* ---------- ESTADOS AL PULSAR ----------
   Había 30 estados `:hover` y solo 3 `:active`. En un móvil el hover NO
   EXISTE, así que `:active` era la única confirmación posible de haber
   acertado al botón, y faltaba: se pulsaba y no pasaba nada hasta que
   respondía el servidor. Son 90 ms y un milímetro; no es decoración, es
   acuse de recibo. */
/* Safari pinta un recuadro gris al tocar. Es un cambio que no controlamos y
   que se ve como suciedad sobre el naranja. */
.btn,button{-webkit-tap-highlight-color:transparent}
/* Un botón que ya está trabajando no debe parecer pulsable. */
.btn:disabled,button:disabled,.btn[aria-busy="true"]{opacity:.55;cursor:progress;transform:none}

/* La vista previa avisa en rojo cuando la Entrega saldría a pérdidas. No lo
   impide —es una decisión legítima, a veces conviene—: solo deja de ser una
   sorpresa. Solo aparece con la guía de aprendizaje activa. */
.duum-aviso-perdida{color:#ef8a7a}

/* ---------- AVISO DE GUARDADO ----------
   Abajo a la derecha, pequeño y fuera del camino. Aparece al guardar y se va
   solo. `role=status` con `aria-live=polite` para que un lector de pantalla lo
   anuncie sin interrumpir lo que se esté leyendo. */
.aviso-guardado{position:fixed;right:16px;bottom:16px;z-index:60;margin:0;
  padding:7px 14px;border-radius:999px;font-size:.78rem;letter-spacing:.02em;
  color:var(--ado-ivory);background:rgba(18,18,22,.92);border:1px solid rgba(212,175,55,.28);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.aviso-guardado.es-visible{opacity:1;transform:none}
.aviso-guardado.es-hecho{border-color:rgba(127,211,164,.4);color:#a9e3c3}
.aviso-guardado.es-hecho::before{content:"✓ ";color:#7fd3a4}

/* ---------- DIÁLOGO DE CONFIRMACIÓN ----------
   El de `<dialog>`, que sustituye al del navegador. `::backdrop` es el fondo
   que el propio navegador pinta detrás: se oscurece en lugar de desaparecer,
   para que se vea que lo de debajo sigue ahí y que esto es un alto, no otra
   pantalla. */
/* `margin:auto` explícito: el navegador centra los `<dialog>` modales con
   márgenes automáticos, pero el reset global del sitio pone `margin:0` a
   todo y lo anulaba, así que el diálogo salía pegado arriba a la izquierda. */
.ado-dialogo{margin:auto;max-width:min(30rem,calc(100vw - 32px));padding:0;color:var(--ado-ivory);
  background:linear-gradient(160deg,#191520,#0d0d11);border:1px solid rgba(212,175,55,.28);
  border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.ado-dialogo::backdrop{background:rgba(5,6,7,.72)}
/* El diálogo recibe el foco al abrirse —hace falta, o quien navega con teclado
   se queda fuera—, pero NO se le dibuja el anillo: un anillo señala dónde
   pulsarías, y un panel no se pulsa. Que está abierto ya lo dice el velo. Los
   botones de dentro sí lo conservan cuando se llega a ellos con el tabulador,
   que es cuando de verdad hace falta. */
.ado-dialogo:focus,.ado-dialogo:focus-visible{outline:none}
.ado-dialogo form{padding:24px 26px 20px}
.ado-dialogo h2{margin:0 0 10px;color:var(--ado-gold);font-family:var(--font-brand);font-size:1.15rem}
.ado-dialogo p{margin:0;color:#cdc6bb;font-size:.92rem;line-height:1.6;white-space:pre-line}
.ado-dialogo-pie{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.ado-dialogo.es-peligro{border-color:rgba(214,74,58,.45)}
.ado-dialogo.es-peligro h2{color:#ef8a7a}
/* Rojo solo para lo que borra o es irreversible. Mismo tratamiento que el
   primario —degradado, halo al pasar por encima y fondo profundo al pulsar—:
   lo único que cambia es el color, que es lo que tiene que avisar. */
.btn.peligro{background:linear-gradient(160deg,#d0523a,#a8331f 70%);color:#fff2ee}
@media (hover:hover) and (pointer:fine){
  .btn.peligro:hover{box-shadow:0 0 26px rgba(208,82,58,.5);filter:saturate(1.08)}
}
.btn.peligro:active{background:#8e2a19;color:#fff2ee;transform:translateY(1px)}

/* Aparece con un gesto muy corto. Si se pide menos movimiento, aparece y ya.
   El bloque global de `prefers-reduced-motion` ya lo cubre. */
.ado-dialogo[open]{animation:dialogoEntra .16s ease-out}
@keyframes dialogoEntra{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- ENLACE DE SALTO ----------
   Primer elemento enfocable de la página. Quien navega con teclado o lector
   no tiene que recorrer los ocho enlaces del menú en cada página. Fuera de
   pantalla hasta que recibe el foco: no estorba a quien no lo necesita. */
.saltar-al-contenido{position:absolute;top:-100px;left:12px;z-index:200;
  padding:10px 16px;background:var(--ado-ember);color:#fff;border-radius:0 0 8px 8px;
  font-weight:600;text-decoration:none;transition:top .16s ease}
.saltar-al-contenido:focus{top:0}

/* ---------- MÁS CONTRASTE SI EL SISTEMA LO PIDE ----------
   No es un tema claro —la identidad del juego es la oscuridad—, sino atender
   a quien ha dicho en su sistema que necesita más separación: se sube el
   texto atenuado y se marcan los bordes, que es donde se pierde. */
/* ---------- EL AMBIENTE SE PARA CUANDO NO SE MIRA ----------
   El hero tenía SIETE animaciones en bucle infinito —haz, núcleo, dos nieblas,
   brasas, flecha y fondo— sonando siempre, aunque estuvieras diez pantallas
   más abajo. En un móvil eso es compositor y batería a cambio de nada, porque
   nadie lo está viendo.
   `animation-timeline:view()` las ata a la visibilidad del hero: se paran
   solas al salir de pantalla y vuelven al entrar, sin observadores ni JS. En
   los navegadores que no lo soporten se comportan como hasta ahora, así que
   no hay nada que se rompa. */
.hero-cine.fuera-de-vista .hero-beam,
.hero-cine.fuera-de-vista .hero-core,
.hero-cine.fuera-de-vista .fog-a,
.hero-cine.fuera-de-vista .fog-b,
.hero-cine.fuera-de-vista .hero-ember,
.hero-cine.fuera-de-vista .scroll-cue,
.hero-cine.fuera-de-vista .scroll-cue b{animation-play-state:paused}

/* ---------- APARICIÓN AL ENTRAR EN PANTALLA ----------
   `.reveal-card` ya estaba en el marcado de la portada, pero NO existía en el
   CSS ni la tocaba ningún JS: prometía una aparición que nunca ocurría.
   Doce píxeles y un fundido, una sola vez, con la línea de tiempo del propio
   scroll: sin observadores, sin JS y sin coste cuando no se mira. */
@supports (animation-timeline: view()){
  .reveal-card,.civ-card,.experience-card,.senda-card{
    animation:aparecer .5s ease-out both;
    animation-timeline:view();
    animation-range:entry 8% cover 26%}
}
@keyframes aparecer{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- TRANSICIÓN ENTRE PÁGINAS ----------
   El sitio tiene 41 formularios POST clásicos: casi toda acción es una recarga
   completa con su parpadeo. Esto la convierte en un fundido corto donde el
   navegador lo soporta, y en nada donde no. Dos declaraciones, cero JS. */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.16s}
::view-transition-new(root){animation-duration:.22s}

@media (prefers-contrast:more){
  :root{--ado-muted:#c8c3d2}
  .card,.panel,.celda-ritmo,.senda-card,.ruta{border-color:rgba(242,236,225,.32)}
  .btn,button{border-width:2px}
  :focus-visible{outline-width:3px}
}

::selection{background:rgba(231,88,24,.35);color:var(--ado-ivory)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ado-carbon)}
::-webkit-scrollbar-thumb{background:var(--ado-slate);border-radius:8px;border:2px solid var(--ado-carbon)}
::-webkit-scrollbar-thumb:hover{background:var(--ado-ember-deep)}

/* ---------- tipografía ---------- */
h1,h2,h3,.ceremonial{font-family:var(--font-brand);font-weight:600;letter-spacing:.03em}
h1{color:var(--ado-gold);font-size:1.9rem;line-height:1.25;margin-bottom:6px;
  text-shadow:0 0 30px rgba(215,168,74,.15)}
h2{color:var(--ado-gold);font-size:1.25rem}
.editorial{font-family:var(--font-edit);font-size:1.18rem;line-height:1.75;color:#d9d2c4}
.rift-word{color:var(--ado-rift)}

/* ============================================================
   CABECERA — metal ennegrecido translúcido
   ============================================================ */
.site-header{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 26px;position:sticky;top:0;z-index:40;
  background:rgba(11,10,18,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ado-line-soft);
}
.page-home .site-header{background:rgba(11,10,18,.55);border-bottom-color:transparent}
.brand{
  font-family:var(--font-brand);font-weight:700;font-size:1.18rem;letter-spacing:.08em;
  color:var(--ado-gold);text-decoration:none;display:inline-flex;align-items:center;gap:10px;
}
/* marca geométrica provisional: umbral triangular + núcleo (no es el logo final) */
.brand-mark{
  width:26px;height:24px;position:relative;display:inline-block;flex-shrink:0;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg, #2b2733, #17131F 70%);
  border-bottom:2px solid var(--ado-ember-deep);
}
.brand-core{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--ado-ember-bright), var(--ado-ember) 60%, var(--ado-ember-deep));
  box-shadow:0 0 8px rgba(255,122,33,.9);
}
.site-header nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.site-header nav a{color:var(--ado-ivory);text-decoration:none;font-size:.95rem;font-weight:500;
  padding:4px 2px;border-bottom:2px solid transparent}
.site-header nav a:hover{color:var(--ado-ember-bright);border-bottom-color:var(--ado-ember)}
.site-header nav a.cta{background:linear-gradient(160deg,var(--ado-ember-bright),var(--ado-ember));
  color:var(--ado-void);padding:7px 16px;border-radius:18px;font-weight:600;border-bottom:none}
.site-header nav a.cta:hover{box-shadow:var(--glow-ember)}
.nav-user{display:inline-flex;align-items:center}
.nav-avatar{width:26px;height:26px;font-size:.8rem;margin-right:7px;vertical-align:middle}

.site-footer{padding:22px 16px;text-align:center;color:var(--ado-muted);font-size:.82rem;
  border-top:1px solid var(--ado-line-soft);background:var(--ado-carbon)}
.footer-principle{font-family:var(--font-edit);font-style:italic;font-size:1.05rem;
  color:var(--ado-gold);margin-bottom:4px}

/* ============================================================
   HERO CINEMATOGRÁFICO (Home)
   ============================================================ */
.hero-cine{
  position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;margin-top:-63px;   /* bajo el header translúcido */
  background:
    radial-gradient(900px 420px at 50% 108%, rgba(231,88,24,.28), transparent 65%),
    radial-gradient(1400px 700px at 50% 120%, rgba(184,61,19,.18), transparent 70%),
    linear-gradient(180deg, #0B0A12 0%, #100D16 55%, #171018 100%);
}
.hero-atmos{position:absolute;inset:0;pointer-events:none}
/* haz de luz dimensional */
.hero-beam{
  position:absolute;left:50%;top:-10%;width:3px;height:75%;transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(255,122,33,.55) 40%, rgba(255,180,90,.85));
  filter:blur(2px);box-shadow:0 0 34px 6px rgba(231,88,24,.35);
  animation:beamPulse 7s ease-in-out infinite;
}
@keyframes beamPulse{0%,100%{opacity:.55}50%{opacity:1}}
/* núcleo: el "amanecer" en la base del haz */
.hero-core{
  position:absolute;left:50%;top:63%;transform:translateX(-50%);
  width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,190,110,.55), rgba(231,88,24,.35) 45%, transparent 70%);
  filter:blur(6px);animation:corePulse 5.5s ease-in-out infinite;
}
@keyframes corePulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.14)}}
/* niebla lenta de baja frecuencia */
.hero-fog{
  position:absolute;left:-30%;width:160%;height:46%;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(160,150,170,.07), transparent 70%);
  filter:blur(28px);
}
.fog-a{bottom:-8%;animation:fogDrift 26s ease-in-out infinite alternate}
.fog-b{bottom:12%;animation:fogDrift 34s ease-in-out infinite alternate-reverse}
@keyframes fogDrift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
/* brasas ascendentes (partículas CSS) */
/* ---------- BRASAS DEL HERO ----------
   Antes eran DOS elementos con ocho `box-shadow` cada uno. Las ocho sombras
   de un mismo elemento comparten animación, así que subían en bloque, a la
   misma velocidad y desde el mismo punto; y como el segundo elemento repetía
   las mismas posiciones con otro retardo, cada brasa salía emparejada con
   otra en su misma vertical. El efecto se leía como una rejilla.

   Ahora cada brasa es su propio elemento y trae lo suyo: posición de salida
   repartida por todo el ancho, altura de partida distinta, tamaño, color,
   velocidad, retardo negativo —para que al cargar la página ya estén a media
   subida, en vez de arrancar todas juntas— y una deriva lateral propia.
   Los valores se sortearon UNA vez y quedaron escritos: así el efecto es
   irregular pero idéntico en cada carga, y no depende de JavaScript. */
/* El contenedor solo posiciona: las brasas se colocan respecto a él. */
.hero-embers{position:absolute;inset:0;pointer-events:none}
.hero-ember{
  position:absolute;border-radius:50%;pointer-events:none;
  background:var(--brillo,rgba(255,122,33,.8));
  box-shadow:0 0 6px var(--brillo,rgba(255,122,33,.8));
  animation-name:embersUp;animation-timing-function:linear;animation-iteration-count:infinite;
}
.hero-ember:nth-child(1){left:33.4%;bottom:10.8%;width:1.7px;height:1.7px;--sube:92vh;--deriva:-46px;--brillo:rgba(231,88,24,0.48);animation-duration:13.3s;animation-delay:-1.0s}
.hero-ember:nth-child(2){left:6.5%;bottom:21.8%;width:2.4px;height:2.4px;--sube:85vh;--deriva:-55px;--brillo:rgba(231,88,24,0.51);animation-duration:7.2s;animation-delay:-1.3s}
.hero-ember:nth-child(3){left:62.3%;bottom:3.1%;width:2.7px;height:2.7px;--sube:61vh;--deriva:-14px;--brillo:rgba(255,168,74,0.88);animation-duration:7.1s;animation-delay:-8.2s}
.hero-ember:nth-child(4){left:42.4%;bottom:16.0%;width:2.6px;height:2.6px;--sube:69vh;--deriva:-44px;--brillo:rgba(255,168,74,0.77);animation-duration:12.5s;animation-delay:-7.8s}
.hero-ember:nth-child(5){left:12.2%;bottom:12.3%;width:3.0px;height:3.0px;--sube:89vh;--deriva:66px;--brillo:rgba(255,196,120,0.61);animation-duration:12.4s;animation-delay:-8.7s}
.hero-ember:nth-child(6){left:37.0%;bottom:14.6%;width:1.9px;height:1.9px;--sube:63vh;--deriva:6px;--brillo:rgba(255,196,120,0.89);animation-duration:8.4s;animation-delay:-10.9s}
.hero-ember:nth-child(7){left:30.1%;bottom:24.4%;width:3.6px;height:3.6px;--sube:79vh;--deriva:-32px;--brillo:rgba(255,122,33,0.66);animation-duration:7.7s;animation-delay:-5.9s}
.hero-ember:nth-child(8){left:74.9%;bottom:15.9%;width:2.7px;height:2.7px;--sube:80vh;--deriva:57px;--brillo:rgba(255,122,33,0.68);animation-duration:15.7s;animation-delay:-4.4s}
.hero-ember:nth-child(9){left:91.8%;bottom:8.8%;width:2.4px;height:2.4px;--sube:77vh;--deriva:44px;--brillo:rgba(255,168,74,0.64);animation-duration:13.5s;animation-delay:-0.8s}
.hero-ember:nth-child(10){left:5.1%;bottom:20.4%;width:2.4px;height:2.4px;--sube:61vh;--deriva:-15px;--brillo:rgba(231,88,24,0.51);animation-duration:8.3s;animation-delay:-1.6s}
.hero-ember:nth-child(11){left:40.4%;bottom:8.7%;width:3.4px;height:3.4px;--sube:83vh;--deriva:70px;--brillo:rgba(255,196,120,0.52);animation-duration:11.7s;animation-delay:-2.3s}
.hero-ember:nth-child(12){left:84.2%;bottom:5.6%;width:2.0px;height:2.0px;--sube:82vh;--deriva:-11px;--brillo:rgba(231,88,24,0.54);animation-duration:10.9s;animation-delay:-5.0s}
.hero-ember:nth-child(13){left:64.9%;bottom:5.5%;width:1.4px;height:1.4px;--sube:76vh;--deriva:-69px;--brillo:rgba(255,168,74,0.72);animation-duration:15.2s;animation-delay:-2.6s}
.hero-ember:nth-child(14){left:92.6%;bottom:23.6%;width:2.9px;height:2.9px;--sube:61vh;--deriva:46px;--brillo:rgba(255,196,120,0.84);animation-duration:11.9s;animation-delay:-8.6s}
.hero-ember:nth-child(15){left:40.4%;bottom:25.6%;width:2.3px;height:2.3px;--sube:70vh;--deriva:-53px;--brillo:rgba(255,122,33,0.67);animation-duration:11.6s;animation-delay:-5.6s}
.hero-ember:nth-child(16){left:35.0%;bottom:16.7%;width:1.5px;height:1.5px;--sube:64vh;--deriva:23px;--brillo:rgba(231,88,24,0.49);animation-duration:6.5s;animation-delay:-2.1s}
.hero-ember:nth-child(17){left:60.7%;bottom:4.9%;width:1.7px;height:1.7px;--sube:81vh;--deriva:51px;--brillo:rgba(255,196,120,0.87);animation-duration:9.1s;animation-delay:-4.9s}
.hero-ember:nth-child(18){left:48.2%;bottom:21.9%;width:2.1px;height:2.1px;--sube:74vh;--deriva:52px;--brillo:rgba(255,122,33,0.53);animation-duration:8.0s;animation-delay:-10.5s}
.hero-ember:nth-child(19){left:22.3%;bottom:9.2%;width:3.5px;height:3.5px;--sube:59vh;--deriva:65px;--brillo:rgba(255,122,33,0.77);animation-duration:10.3s;animation-delay:-9.7s}
.hero-ember:nth-child(20){left:68.4%;bottom:15.0%;width:2.0px;height:2.0px;--sube:72vh;--deriva:66px;--brillo:rgba(231,88,24,0.7);animation-duration:10.4s;animation-delay:-2.3s}
.hero-ember:nth-child(21){left:60.6%;bottom:19.8%;width:3.1px;height:3.1px;--sube:73vh;--deriva:32px;--brillo:rgba(255,196,120,0.56);animation-duration:14.5s;animation-delay:-2.7s}
.hero-ember:nth-child(22){left:36.4%;bottom:18.6%;width:1.5px;height:1.5px;--sube:74vh;--deriva:-21px;--brillo:rgba(255,196,120,0.93);animation-duration:6.8s;animation-delay:-3.9s}

@keyframes embersUp{
  0%{transform:translate(0,0) scale(.7);opacity:0}
  12%{opacity:1}
  70%{opacity:.75}
  100%{transform:translate(var(--deriva,0),calc(var(--sube,80vh) * -1)) scale(1.15);opacity:0}
}



.hero-content{position:relative;z-index:2;padding:120px 18px 60px;max-width:760px}
.hero-kicker{
  font-family:var(--font-ui);letter-spacing:.42em;text-transform:uppercase;
  color:var(--ado-ember-bright);font-size:.82rem;font-weight:600;margin-bottom:14px;
}
.hero-title{
  font-family:var(--font-brand);font-weight:700;color:var(--ado-gold);
  font-size:clamp(2.3rem, 7vw, 4.4rem);line-height:1.08;margin-bottom:16px;
  text-shadow:0 2px 40px rgba(231,88,24,.35);
}
.hero-sub{
  font-family:var(--font-edit);font-size:clamp(1.1rem, 2.6vw, 1.5rem);
  color:#e4dccb;margin-bottom:30px;
}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.scroll-cue{
  display:inline-block;margin-top:44px;color:var(--ado-muted);text-decoration:none;
  font-size:1.4rem;animation:cueBob 2.2s ease-in-out infinite;
}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- secciones de la Home ---------- */
.home-block{margin:64px auto 20px;max-width:760px;text-align:center}
.home-block .ceremonial{font-size:1.7rem;margin-bottom:16px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:44px 0}
.feature{
  background:linear-gradient(180deg, var(--ado-graphite), var(--ado-obsidian));
  border:1px solid var(--ado-line);border-radius:var(--radius);padding:26px 22px;
  position:relative;overflow:hidden;
}
.feature::before{content:'';position:absolute;top:0;left:18%;right:18%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(215,168,74,.5), transparent)}
.feature-glyph{display:block;font-size:1.6rem;color:var(--ado-ember);margin-bottom:10px;
  text-shadow:0 0 12px rgba(231,88,24,.6)}
.feature h2{font-size:1.12rem;margin-bottom:8px}
.feature p{color:var(--ado-muted);font-size:.94rem}
.civs{margin:56px 0}
.civs .ceremonial{text-align:center;margin-bottom:20px;font-size:1.5rem}
.civ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.civ-card{
  background:var(--ado-graphite);border:1px solid var(--ado-line);border-radius:10px;
  padding:16px 14px;position:relative;transition:transform .2s, border-color .2s, box-shadow .2s;
}
.civ-card:hover{transform:translateY(-3px);border-color:var(--ado-ember-deep);box-shadow:var(--glow-ember)}
.civ-card h3{color:var(--ado-gold);font-size:1.02rem;margin-bottom:4px}
.civ-card p{color:var(--ado-muted);font-size:.8rem}
.home-cta{text-align:center;margin:56px 0 30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.lore p{margin:10px 0;color:var(--ado-muted)}   /* compatibilidad */
.hero{padding:40px 12px;text-align:center}       /* compatibilidad con vistas antiguas */
.hero h1{font-size:2.1rem}
.hero .lead{max-width:640px;margin:0 auto 22px;color:var(--ado-muted)}
.hero-sub+.lead{margin-top:0}

/* ============================================================
   BOTONES — primario brasa con texto oscuro (AA, cap. 3.2)
   ============================================================ */
/* `appearance:none` no es cosmético: sin él, un botón con fondo transparente
   —el secundario— deja ver el control NATIVO del sistema por debajo, que en
   Mac es blanco. Se notaba dentro del diálogo, donde el secundario salía
   como una pastilla blanca en vez de oscura con borde. */
.btn{
  appearance:none;-webkit-appearance:none;
  display:inline-block;border:none;border-radius:9px;padding:10px 20px;
  font-family:var(--font-ui);font-size:.98rem;font-weight:600;cursor:pointer;
  text-decoration:none;text-align:center;line-height:1.4;
  background:linear-gradient(160deg, var(--ado-ember-bright), var(--ado-ember) 70%);
  color:var(--ado-void);
  transition:box-shadow .18s, transform .12s, filter .18s;
}
/* El hover va dentro de una consulta de puntero. En escritorio se ve
   exactamente igual que siempre; lo que evita es que en una pantalla táctil
   el estado se quede pegado tras tocar, porque ahí no existe «pasar por
   encima» y el navegador lo mantiene hasta que tocas en otro sitio. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{box-shadow:var(--glow-ember-strong);filter:saturate(1.08)}
}
/* La etiqueta del primario NO cambia de color al pulsar. Antes saltaba de
   oscura a marfil, así que el mismo botón se leía de dos maneras según el
   estado, y dentro del diálogo —donde se pulsa con el foco puesto— la
   diferencia con el botón de la página cantaba. Al pulsar solo se oscurece
   el fondo y baja un píxel: eso es acuse de recibo; cambiar la tinta es
   otro botón. */
.btn:active{background:var(--ado-ember-deep);color:var(--ado-ivory);transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.disabled{opacity:.45;cursor:not-allowed;box-shadow:none;pointer-events:none}
.btn.secondary{
  background:transparent;color:var(--ado-ivory);border:1px solid #3a3444;
}
@media (hover:hover) and (pointer:fine){
  .btn.secondary:hover{border-color:var(--ado-ember);color:var(--ado-ember-bright);
    box-shadow:0 0 12px rgba(231,88,24,.2)}
}
.btn.danger{background:var(--ado-blood);color:var(--ado-ivory)}
.btn.danger:hover{box-shadow:0 0 14px rgba(166,30,46,.5)}
.btn.small{padding:5px 13px;font-size:.85rem;border-radius:7px}
.btn.big{padding:14px 30px;font-size:1.08rem;border-radius:11px}
.linklike{background:none;border:none;color:var(--ado-muted);font:inherit;font-size:.9rem;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linklike:hover{color:var(--ado-ember-bright)}
.danger-link{color:#e0606f}
.inline{display:inline}

/* ---------- formularios ---------- */
form.stacked label,.panel.narrow label{display:block;margin:14px 0;font-weight:500;font-size:.95rem}
/* `input[type=search]` FALTABA en esta lista, y no es un detalle: un campo con
   ese tipo se quedaba sin fondo, sin borde y sin relleno, es decir con el
   aspecto que le dé el navegador, distinto del resto del sitio. Le pasaba al
   buscador del panel de usuarios. */
/* ═══ LOS DESPLEGABLES, IGUALES EN TODO EL SITIO ═══
 *
 * `color-scheme: dark` es lo ÚNICO que puede tocar la lista de opciones de un
 * `<select>`: esa lista la dibuja el navegador, no la página, y ninguna regla
 * de CSS la alcanza. Declarando el esquema, el navegador la pinta oscura por
 * su cuenta —igual que las barras de desplazamiento y los selectores de
 * fecha—, en vez de un recuadro blanco encima de una web negra.
 *
 * Vale para los 47 desplegables del sitio de una vez, que es justo lo que hace
 * que no haya que acordarse de nada al añadir el siguiente.
 */
:root{color-scheme:dark}

/* La parte CERRADA del desplegable sí es nuestra, y ahí cada navegador dibuja
   una flecha distinta —Safari pone dos, Chrome una—. Se apaga la suya y se
   pone la misma para todos. */
select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d7a84a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px;
  padding-right:34px;
}
select:disabled{opacity:.55}

input[type=text],input[type=search],input[type=email],input[type=password],input[type=number],select,textarea{
  /* `background-color`, NO el atajo `background`: el atajo borra la flecha del
     desplegable, que es una imagen de fondo puesta unas líneas más arriba. Es
     el segundo sitio donde pasaba lo mismo. */
  background-color:var(--ado-carbon);color:var(--ado-ivory);
  border:1px solid #322d3d;border-radius:8px;padding:10px 12px;
  font-family:var(--font-ui);font-size:.95rem;width:100%;max-width:100%;margin-top:5px;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--ado-ember);
  box-shadow:0 0 0 3px rgba(231,88,24,.18);outline:none}
textarea{resize:vertical}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.inline-form input[type=text],.inline-form input[type=search],.inline-form select{width:auto;min-width:220px;margin-top:0}
.inline-label{display:inline-flex;gap:8px;align-items:center;color:var(--ado-muted);font-size:.9rem}
.inline-label input[type=number]{width:90px;margin-top:0}
.inline-label input[type=checkbox]{width:auto;margin:0;flex:0 0 auto}
.private-message{padding:14px 0;border-bottom:1px solid rgba(242,236,225,.1)}
.private-message.unread{border-left:3px solid var(--ado-ember);padding-left:14px}

/* ---- responder y reenviar en la bandeja ---- */
.mensaje-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:10px}
/* Los formularios nacen ocultos con el atributo `hidden`; esto solo los
   separa del mensaje cuando el JavaScript los abre. */
.mensaje-form{margin-top:12px;padding:12px 14px;border:1px solid var(--ado-line);
  border-radius:var(--radius);background:var(--ado-graphite)}
.mensaje-form textarea,.mensaje-form input[type="text"]{width:100%}

/* ============================================================
   CONVERSACIÓN
   Los mensajes propios se apartan a la derecha y cambian de borde. Es la
   única señal que hace falta para leer un intercambio de un vistazo: sin
   ella, doce mensajes seguidos son doce cajas iguales.
   ============================================================ */
.conversacion{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:14px}
.conversacion-mensaje{border:1px solid var(--ado-line);border-radius:var(--radius);
  padding:14px 16px;background:var(--ado-graphite);max-width:88%}
.conversacion-mensaje.es-mio{margin-left:auto;border-color:rgba(215,168,74,.4);
  background:rgba(215,168,74,.07)}
.conversacion-firma{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.conversacion-firma small{color:var(--muted);margin-left:auto;white-space:nowrap}
.conversacion-cuerpo{margin:0 0 8px;line-height:1.6}
.conversacion-cabecera{margin-bottom:8px}

/* ============================================================
   PERFIL PÚBLICO
   ============================================================ */
.perfil-cabecera{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.perfil-datos{flex:1 1 320px}
.perfil-datos h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.perfil-retrato{margin:0 0 10px}
.perfil-personaje{display:flex;flex-direction:column}
.perfil-gestas{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:.9rem}
.perfil-gestas li{margin-bottom:3px}
@media (max-width:640px){
  .conversacion-mensaje{max-width:100%}
  .perfil-cabecera{gap:14px}
}
.join-requests{width:100%;margin-top:18px}.join-requests .row-item{align-items:flex-start}

/* ============================================================
   PANELES Y SUPERFICIES
   ============================================================ */
.panel{
  background:var(--ado-obsidian);border:1px solid var(--ado-line);
  border-radius:var(--radius);padding:22px 24px;margin:18px 0;
}
.panel.narrow{max-width:470px;margin:48px auto}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.panel h1,.panel h2{margin-bottom:10px}
.help{color:var(--ado-muted);font-size:.9rem;margin:8px 0}
.breadcrumb{color:var(--ado-muted);font-size:.84rem;margin-bottom:8px;letter-spacing:.02em}
.breadcrumb a{color:var(--ado-muted)}
.breadcrumb a:hover{color:var(--ado-ember-bright)}
.two-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}

.msg{margin:12px 0;padding:11px 15px;border-radius:9px;font-size:.94rem;border:1px solid}
.msg.ok{background:rgba(46,139,87,.12);border-color:var(--ado-emerald);color:#7fd3a4}
.msg.err{background:rgba(166,30,46,.14);border-color:var(--ado-blood);color:#f0919c}
.msg.info{background:rgba(88,199,213,.09);border-color:rgba(88,199,213,.5);color:#a8e2ea}
.row-item{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--ado-line-soft);flex-wrap:wrap}

/* ---------- tablas ---------- */
table.list,table.sheet{width:100%;border-collapse:collapse;margin-top:10px;font-size:.92rem}
table.list th,table.sheet th{
  background:var(--ado-graphite);color:var(--ado-gold);font-family:var(--font-ui);
  font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  text-align:left;padding:9px 12px;border-bottom:2px solid var(--ado-ember-deep);
}
table.list td,table.sheet td{padding:9px 12px;border-bottom:1px solid var(--ado-line-soft);text-align:left}
table.list tr:hover td{background:rgba(231,88,24,.04)}
table.sheet td b,table.sheet td strong{color:var(--ado-gold)}

.tag{display:inline-block;background:transparent;border:1px solid rgba(215,168,74,.45);
  color:var(--ado-gold);border-radius:14px;padding:2px 11px;margin:3px 4px 0 0;font-size:.78rem;
  letter-spacing:.03em}
.unread-badge{display:inline-block;background:linear-gradient(160deg,var(--ado-ember-bright),var(--ado-ember));
  color:var(--ado-void);border-radius:12px;padding:1px 10px;font-size:.76rem;font-weight:700;
  margin-left:6px;animation:pulseBadge 2.2s ease-in-out infinite}
@keyframes pulseBadge{0%,100%{opacity:1}50%{opacity:.7}}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px 0;flex-wrap:wrap}
.pager .current-page{color:var(--ado-muted);font-size:.88rem}

/* ============================================================
   CREADOR DE PERSONAJES (ritual contenido)
   ============================================================ */
.stepper{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.stepper button{background:var(--ado-obsidian);border:1px solid var(--ado-line);color:var(--ado-muted);
  padding:8px 14px;border-radius:20px;cursor:pointer;font-family:var(--font-ui);font-size:.85rem}
.stepper button.current{background:linear-gradient(160deg,var(--ado-ember-bright),var(--ado-ember));
  color:var(--ado-void);border-color:var(--ado-ember);font-weight:600}
.stepper button.done{border-color:var(--ado-emerald);color:#7fd3a4}
.stepper button:disabled{opacity:.4;cursor:not-allowed}
.step-recap{background:var(--ado-graphite);border:1px solid var(--ado-line);border-left:3px solid var(--ado-emerald);
  border-radius:8px;padding:12px 16px;margin:10px 0;font-size:.9rem}
.step-recap h3{color:#7fd3a4;font-size:.92rem;margin-bottom:4px;font-family:var(--font-ui);font-weight:600}
.step-recap p{color:var(--ado-muted)}
/* El botón de rehacer va discreto y al final del resumen: es una salida de
   emergencia, no la acción principal del paso. Quien va bien no debe
   tropezarse con él; quien se equivocó tiene que encontrarlo. */
.step-recap-actions{margin-top:8px}
.step-recap-actions .btn{font-size:.74rem;opacity:.8}
@media (hover:hover) and (pointer:fine){.step-recap-actions .btn:hover{opacity:1}}

/* ---------- rutas de creación y sendas ----------
   Las tres rutas se presentan en igualdad: ninguna es «la buena». Quien
   quiere decidirlo todo y quien no quiere decidir nada tienen que ver su
   opción con el mismo peso visual, o la elección deja de ser libre. */
.rutas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:18px}
.ruta{display:flex;flex-direction:column;gap:8px;padding:16px;
  background:var(--ado-graphite);border:1px solid var(--ado-line)}
.ruta h3{font-size:1rem;color:var(--ado-gold, #d9b64f)}
.ruta .btn{margin-top:auto;align-self:flex-start}
.sendas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:12px}
.senda-card{display:flex;flex-direction:column;gap:6px;padding:14px;
  background:var(--ado-graphite);border:1px solid var(--ado-line);border-left:3px solid var(--ado-ember,#e75818)}
/* El nombre va en versales por estilo, no en el dato: en el HTML sigue
   escrito en minúsculas para que un lector de pantalla no lo deletree ni lo
   lea a gritos. */
.senda-card h3{font-size:.92rem;letter-spacing:.06em;text-transform:uppercase}
.senda-resumen{color:var(--ado-ivory);font-size:.86rem}
.senda-datos{font-size:.72rem;opacity:.75}
.senda-card .btn{margin-top:auto;align-self:flex-start}
/* La nota de la senda dentro de un paso: se lee como un consejo al margen,
   no como una instrucción. Quien se aparte de ella no debe sentir que
   incumple nada. */
.senda-nota{margin:10px 0 14px;padding:10px 12px;
  background:rgba(231,88,24,.07);border-left:3px solid rgba(231,88,24,.5)}
.senda-nota strong{display:block;margin-bottom:3px;font-size:.82rem;color:var(--ado-ember-bright,#ff8a4c)}
.senda-nota p{margin:0;color:var(--ado-muted);font-size:.82rem;line-height:1.5}
/* Las civilizaciones que sirven para la senda se resaltan TODAS, no solo la
   sugerida: la sugerida sale de un sorteo, y cambiarla tiene que costar una
   ojeada, no leerse la lista entera. */
.card.de-la-senda{border-color:rgba(231,88,24,.55);box-shadow:inset 3px 0 0 rgba(231,88,24,.75)}
.marca-senda{margin:2px 0 6px;color:var(--ado-ember-bright,#ff8a4c);font-size:.7rem;
  letter-spacing:.04em;text-transform:uppercase}
.rolls{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.die{background:var(--ado-graphite);border:1px solid var(--ado-line);border-radius:10px;
  padding:10px 14px;text-align:center;min-width:88px;position:relative}
.die::after{content:'';position:absolute;left:30%;right:30%;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ado-ember),transparent)}
.die b{display:block;font-size:1.55rem;color:var(--ado-gold);font-family:var(--font-mono)}
.die span{font-size:.76rem;color:var(--ado-muted)}
.attr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.attr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--ado-graphite);border:1px solid var(--ado-line);border-radius:9px;padding:10px 14px}
.attr-row select{width:auto;margin-top:0}
.creator-nav{margin-top:20px;display:flex;justify-content:flex-end}

/* tarjetas de civilización / oficio */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px;margin-top:10px}
.card{
  background:linear-gradient(180deg,var(--ado-graphite),var(--ado-obsidian));
  border:1px solid var(--ado-line);border-radius:12px;padding:16px;cursor:pointer;
  transition:transform .18s, border-color .18s, box-shadow .18s;position:relative;
}
.card:hover{transform:translateY(-2px);border-color:var(--ado-ember-deep)}
.card.selected{border-color:var(--ado-ember);box-shadow:var(--glow-ember)}
.card.selected::after{content:'';position:absolute;top:10px;right:10px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--ado-ember-bright), var(--ado-ember));
  box-shadow:0 0 8px rgba(255,122,33,.9)}
.card.locked{opacity:.55;cursor:not-allowed}
.card h3{color:var(--ado-gold);font-size:1.03rem;margin-bottom:4px}
.card .mods{font-size:.84rem;color:#7fd3a4;margin-bottom:6px;font-family:var(--font-mono)}
.card .small{font-size:.8rem;color:var(--ado-muted)}
fieldset{border:1px solid var(--ado-line);border-radius:10px;padding:16px;margin-top:16px}
legend{color:var(--ado-gold);padding:0 10px;font-family:var(--font-brand);font-size:.98rem}
label.opt{display:flex;gap:9px;align-items:flex-start;padding:8px;border-radius:8px;cursor:pointer}
label.opt:hover{background:rgba(231,88,24,.06)}
label.opt .desc{font-size:.82rem;color:var(--ado-muted);display:block}
label.opt input{margin-top:5px;flex-shrink:0;width:auto;accent-color:var(--ado-ember)}
input[type=checkbox],input[type=radio]{accent-color:var(--ado-ember)}
.runa-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}
.runa-row select{width:auto;margin-top:0}

/* ============================================================
   HOJA DE PERSONAJE — documento ceremonial
   ============================================================ */
.sheet-page{
  background:linear-gradient(180deg,#17141d,var(--ado-obsidian) 30%);
  border:1px solid var(--ado-line);border-top:2px solid var(--ado-gold);
  border-radius:var(--radius);padding:30px;position:relative;
}
.sheet-head h1{margin-bottom:2px}
.sheet-head.with-portrait{display:flex;gap:20px;align-items:center}
.provenance{color:var(--ado-muted);font-size:.88rem;border-bottom:1px solid var(--ado-line);padding-bottom:12px}
.provenance-footer{color:var(--ado-muted);font-size:.8rem;margin-top:18px;
  border-top:1px solid var(--ado-line);padding-top:10px;font-family:var(--font-edit);font-style:italic}
.block{margin-top:20px}
.block h2{font-size:1.08rem}
.block ul{margin:6px 0 0 22px}
.actions{margin-top:18px}
.renown-sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0}
.renown-sheet>div{padding:14px;text-align:center;border:1px solid rgba(215,168,74,.35);border-radius:10px;background:radial-gradient(circle at 50% 0,rgba(215,168,74,.12),transparent 72%)}
.renown-sheet span{display:block;color:var(--ado-muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.09em}
.renown-sheet strong{display:block;color:var(--ado-gold);font-family:var(--font-brand);font-size:1.28rem;margin-top:3px}
.deed-list li{margin:8px 0;color:var(--ado-ivory)}.deed-list span{display:block;color:var(--ado-muted);font-size:.78rem}

/* ---------- avatares y retratos ---------- */
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--ado-line);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--ado-slate)}
.avatar-fallback{background:linear-gradient(160deg,var(--ado-ember-deep),#3a2030);
  color:var(--ado-ivory);font-size:1.2rem;font-weight:700;font-family:var(--font-brand)}
.avatar.mini{width:26px;height:26px;font-size:.8rem}
.big-avatar{width:112px;height:112px;font-size:2.6rem;border-color:var(--ado-gold)}
.portrait{width:96px;height:96px;border-radius:12px;font-size:2.2rem;border-color:var(--ado-gold)}
.profile{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.profile-avatar{flex-shrink:0}
.cropper-modal{z-index:60}

/* ============================================================
   FOROS Y PARTIDAS
   ============================================================ */
.forum-card{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:linear-gradient(180deg,var(--ado-graphite),var(--ado-obsidian));
  border:1px solid var(--ado-line);border-radius:var(--radius);
  padding:18px 22px;margin:10px 0;text-decoration:none;color:var(--ado-ivory);
  transition:border-color .18s, transform .18s}
.forum-card:hover{border-color:var(--ado-ember-deep);transform:translateX(4px);color:var(--ado-ivory)}
.forum-card h2{font-size:1.1rem;margin-bottom:2px}

.player-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:12px;margin:10px 0}
.player-card{display:flex;gap:11px;align-items:center;background:var(--ado-graphite);
  border:1px solid var(--ado-line);border-radius:11px;padding:11px}
.player-card a{color:var(--ado-gold);text-decoration:none}
.player-card a:hover{text-decoration:underline;text-underline-offset:3px}

.chronicler-panel summary{cursor:pointer;color:var(--ado-gold);font-family:var(--font-brand);font-size:1.02rem}
.chronicler-panel h3{color:var(--ado-ember-bright);margin-top:14px;font-size:.98rem}
.chronicler-tools{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px}
.npc-list{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.npc-chip{display:inline-flex;gap:7px;align-items:center;background:var(--ado-graphite);
  border:1px solid var(--ado-line);border-radius:16px;padding:4px 13px 4px 4px;font-size:.85rem}
.renown-mini{color:var(--ado-gold);font-size:.84rem}.renown-admin{padding:9px 12px;border:1px dashed rgba(215,168,74,.3);border-radius:10px;background:rgba(215,168,74,.035)}
.renown-pending{border-color:rgba(215,168,74,.65);box-shadow:0 0 24px rgba(215,168,74,.08)}
.renown-celebration{text-align:center;position:relative;overflow:hidden;margin:18px 0;padding:34px;border:1px solid var(--ado-gold);border-radius:16px;background:radial-gradient(circle at 50% 25%,rgba(231,88,24,.22),rgba(215,168,74,.09) 42%,var(--ado-obsidian) 75%);box-shadow:0 0 35px rgba(231,88,24,.18);animation:renownArrival .65s ease-out both}
.renown-celebration h1{font-size:clamp(2rem,6vw,4rem);margin:2px 0;color:var(--ado-gold)}.renown-celebration p{max-width:680px;margin:8px auto}.renown-burst{font-size:3rem;color:var(--ado-gold);animation:renownStar 1.5s ease-in-out infinite}
@keyframes renownArrival{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes renownStar{50%{transform:scale(1.2) rotate(22deg);text-shadow:0 0 22px var(--ado-ember-bright)}}

/* ---------- foro de partida ---------- */
.forum-toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.view-toggle{display:flex;gap:6px}
.forum{margin:12px 0}
.post{
  display:flex;gap:13px;position:relative;
  background:var(--ado-graphite);border:1px solid var(--ado-line);border-radius:11px;
  padding:14px 16px;margin-bottom:11px;
}
.post.chronicler{border-left:3px solid var(--ado-gold)}
.post.hidden-post{border-style:dashed;border-color:rgba(88,199,213,.55)}
.post.highlight{border-color:var(--ado-ember);box-shadow:var(--glow-ember)}
.post .post-side{flex-shrink:0;padding-top:2px}
.post .post-main{flex:1;min-width:0}
.post-meta{display:flex;justify-content:space-between;gap:10px;color:var(--ado-muted);
  font-size:.82rem;margin-bottom:7px;flex-wrap:wrap}
.post-meta strong{color:var(--ado-ember-bright);font-weight:600}
.post.chronicler .post-meta strong{color:var(--ado-gold)}
.post-body{overflow-wrap:break-word}
.search-hit{background:#f4d45a;color:#17120a;padding:0 .12em;border-radius:3px;
  box-shadow:0 0 0 1px rgba(244,212,90,.32),0 0 8px rgba(244,212,90,.24);
  font:inherit}
.post-recipients{font-size:.8rem;color:var(--ado-rift);margin-bottom:6px}
.post-actions{margin-top:9px;display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem}
.actor-sub{color:var(--ado-muted);font-size:.78rem}
.chron-tag{border-color:rgba(215,168,74,.6);color:var(--ado-gold);font-size:.7rem}
.post-num{color:var(--ado-muted);text-decoration:none;font-weight:700;font-family:var(--font-mono)}
.post-num:hover{color:var(--ado-ember-bright)}
.reply-ref{color:var(--ado-rift);font-size:.8rem}
.edit-form,.move-form{margin-top:10px}
.reply-banner{background:rgba(231,88,24,.1);border:1px solid rgba(231,88,24,.45);
  border-radius:9px;padding:9px 13px;margin-bottom:10px;font-size:.9rem}
.recipients{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0}
.inline-opt{padding:2px 6px;font-size:.87rem}
.composer{margin-top:8px}
.thread-arrow{position:absolute;left:-4px;top:-9px;color:var(--ado-rift);font-size:.76rem}
.post.depth-1{margin-left:26px}.post.depth-2{margin-left:52px}.post.depth-3{margin-left:78px}
.post.depth-4{margin-left:104px}.post.depth-5{margin-left:130px}.post.depth-6{margin-left:156px}
.post.depth-7{margin-left:182px}.post.depth-8{margin-left:208px}
a.actor-link{color:inherit;text-decoration:none}
a.actor-link:hover strong{color:var(--ado-gold);text-decoration:underline;text-underline-offset:3px}
a.actor-avatar-link{display:inline-block;border-radius:50%}
a.actor-avatar-link:hover .avatar{border-color:var(--ado-ember)}

/* formato BBCode */
.c-rojo{color:#e0606f}.c-verde{color:#5fbf7f}.c-azul{color:var(--ado-rift)}
.c-dorado{color:var(--ado-gold)}.c-morado{color:#b39ddb}.c-gris{color:var(--ado-muted)}
.txt-center{display:block;text-align:center}
.post-img{max-width:100%;max-height:360px;border-radius:9px;display:block;margin:8px 0;
  border:1px solid var(--ado-line)}
blockquote{border-left:3px solid var(--ado-gold);margin:8px 0;padding:7px 14px;
  color:#cfc6b2;background:rgba(215,168,74,.05);border-radius:0 8px 8px 0;
  font-family:var(--font-edit);font-size:1.05rem}
.fmt-toolbar{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 4px}
.fmt-toolbar button{background:var(--ado-graphite);border:1px solid var(--ado-line);color:var(--ado-ivory);
  border-radius:7px;padding:4px 11px;font-size:.85rem;cursor:pointer;font-family:var(--font-ui)}
.fmt-toolbar button:hover{border-color:var(--ado-ember)}
.fmt-toolbar .sw{width:22px;height:22px;padding:0;border-radius:50%}
.sw.c-rojo{background:#e0606f}.sw.c-verde{background:#5fbf7f}.sw.c-azul{background:var(--ado-rift)}
.sw.c-dorado{background:var(--ado-gold)}.sw.c-morado{background:#b39ddb}.sw.c-gris{background:#9c96a8}

/* ============================================================
   TIRADAS DE DADOS — el núcleo energético del sistema
   ============================================================ */
.dice-roll{
  display:inline-flex;flex-wrap:wrap;gap:7px;align-items:center;
  background:linear-gradient(160deg, rgba(231,88,24,.13), rgba(11,10,18,.6) 70%);
  border:1px solid rgba(231,88,24,.55);border-radius:11px;
  padding:5px 12px;margin:3px 2px;font-size:.9rem;
  font-family:var(--font-mono);
}
.dice-seal{display:inline-block;font-size:1.05rem;filter:drop-shadow(0 0 5px rgba(255,122,33,.8))}
.dice-seal.spin{animation:diceSpin .8s cubic-bezier(.3,1.4,.5,1) both}
@keyframes diceSpin{
  0%{transform:rotate(0) scale(.3);opacity:0}
  60%{transform:rotate(540deg) scale(1.25);opacity:1}
  100%{transform:rotate(720deg) scale(1)}
}
.dice-formula{color:var(--ado-gold);font-weight:700}
.dice-heading{display:inline-flex;flex-direction:column;gap:1px;line-height:1.2}
.dice-title{color:var(--ado-ivory);font-family:var(--font-ui);font-weight:800}
.dice-reason{color:var(--ado-muted);font-family:var(--font-ui);font-size:.78rem}
.dice-set{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap}
.dice-detail{color:var(--ado-muted)}
.dice-detail.dropped{text-decoration:line-through;opacity:.5}
.dice-detail.kept{color:var(--ado-ivory)}
.dice-mod{color:var(--ado-muted)}
.dice-total{font-weight:700;color:var(--ado-ivory)}
.dice-total.rolling{color:var(--ado-ember-bright)}
.dice-total.landed{animation:diceLand .35s ease-out}
@keyframes diceLand{0%{transform:scale(1.6);color:var(--ado-ember-bright)}100%{transform:scale(1)}}
.dice-outcome{border-radius:8px;padding:1px 9px;font-size:.72rem;font-weight:700;
  font-family:var(--font-ui);letter-spacing:.04em}
.dice-outcome.exito{background:rgba(46,139,87,.18);color:#7fd3a4;border:1px solid var(--ado-emerald)}
.dice-outcome.fracaso{background:rgba(166,30,46,.16);color:#f0919c;border:1px solid var(--ado-blood)}
.dice-outcome.neutral{background:rgba(99,104,125,.15);color:#c9c5d2;border:1px solid var(--ado-slate)}
.dice-outcome.critico{background:rgba(215,168,74,.2);color:var(--ado-gold);border:1px solid var(--ado-gold);
  animation:critGlow 1.2s ease-in-out infinite alternate}
@keyframes critGlow{from{box-shadow:0 0 3px rgba(215,168,74,.6)}to{box-shadow:0 0 14px rgba(215,168,74,.9)}}
.dice-outcome.pifia{background:#2b0d14;color:#f0919c;border:1px solid var(--ado-blood)}
.dice-fake{color:var(--ado-muted);text-decoration:line-through}
.dice-cube{display:inline-block;font-size:1.6rem;color:var(--ado-ember-bright);
  filter:drop-shadow(0 0 8px rgba(255,122,33,.9));
  animation:cubeRoll 1.1s cubic-bezier(.2,1.2,.4,1) both}
@keyframes cubeRoll{
  0%{transform:translateY(-30px) rotate(0) scale(.4);opacity:0}
  35%{transform:translateY(6px) rotate(380deg) scale(1.3);opacity:1}
  60%{transform:translateY(-8px) rotate(560deg) scale(1.05)}
  80%{transform:translateY(2px) rotate(700deg)}
  100%{transform:translateY(0) rotate(720deg) scale(1)}
}
.dice-roll.showcase{animation:chipGlow 1.4s ease-out both}
@keyframes chipGlow{
  0%{box-shadow:0 0 0 rgba(231,88,24,0)}
  40%{box-shadow:0 0 26px rgba(255,122,33,.85)}
  100%{box-shadow:0 0 0 rgba(231,88,24,0)}
}
.dice-veil{filter:blur(5px);opacity:.4}

/* Pruebas de Destino, Consunción y Energía */
.dice-roll-ocaso{max-width:min(100%,760px);gap:9px 11px;border-color:rgba(215,168,74,.6);
  background:linear-gradient(145deg,rgba(215,168,74,.12),rgba(16,13,22,.88) 72%)}
/* ═══ LA MONEDA DEL DESTINO ═══
   Cada cara gira POR SU CUENTA, y la moneda no lleva `transform-style:
   preserve-3d`.
   La versión con 3D anidado —moneda en preserve-3d y dos caras dentro—
   funciona en estático (a 180° se ve la cruz), pero NO durante la animación:
   al animar el contenedor, el navegador lo rasteriza como una capa plana y
   las caras dejan de intercambiarse, así que se ve siempre la misma imagen
   dando vueltas. En Safari ni siquiera llegaba a girar.
   Girando cada cara por separado dentro de una `perspective` no hay 3D
   anidado que aplanar: `backface-visibility` decide sobre un elemento plano,
   que es el caso que todos los motores tratan igual. */
.destiny-coin{position:relative;display:inline-block;width:46px;height:46px;flex:0 0 46px;
  perspective:640px}
.coin-side{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:2px solid #e4b94c;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(circle at 35% 28%,#f7d97a 0,#c78820 48%,#70410e 100%);
  color:#291705;font:bold .55rem var(--font-ui);letter-spacing:.04em;
  box-shadow:inset 0 0 0 3px rgba(82,43,5,.35),0 0 9px rgba(215,168,74,.5)}
.coin-tails{background:radial-gradient(circle at 35% 28%,#eed17d 0,#a9711f 48%,#53330e 100%)}
.coin-heads{background-image:url("../images/moneda-destino.svg"),
  radial-gradient(circle at 35% 28%,#f7d97a 0,#c78820 48%,#70410e 100%)}
.coin-tails{background-image:url("../images/moneda-ocaso.svg"),
  radial-gradient(circle at 35% 28%,#eed17d 0,#a9711f 48%,#53330e 100%)}
.coin-heads,.coin-tails{background-size:62% 62%,cover;
  background-position:center center,center center;background-repeat:no-repeat}
/* La palabra deja de VERSE, pero sigue en el marcado para los lectores de
   pantalla: el resultado se escribe además en texto junto a la moneda. */
.coin-side{font-size:0}

/* En reposo: la cara elegida de frente, la otra de espaldas. */
.destiny-coin .coin-heads{transform:rotateY(0)}
.destiny-coin .coin-tails{transform:rotateY(180deg)}
.destiny-coin.landed-cruz .coin-heads{transform:rotateY(180deg)}
.destiny-coin.landed-cruz .coin-tails{transform:rotateY(360deg)}

/* TRES vueltas y para. El salto vertical va en la moneda para que las dos
   caras caigan juntas; el giro, en cada cara. Cruz añade media vuelta: es la
   que está detrás. */
.destiny-coin.spinning-cara,
.destiny-coin.spinning-cruz{animation:coinCaida 1.6s cubic-bezier(.12,.62,.24,1) both}
.destiny-coin.spinning-cara .coin-heads{animation:coinGiroA 1.6s cubic-bezier(.12,.62,.24,1) both}
.destiny-coin.spinning-cara .coin-tails{animation:coinGiroB 1.6s cubic-bezier(.12,.62,.24,1) both}
.destiny-coin.spinning-cruz .coin-heads{animation:coinGiroC 1.6s cubic-bezier(.12,.62,.24,1) both}
.destiny-coin.spinning-cruz .coin-tails{animation:coinGiroD 1.6s cubic-bezier(.12,.62,.24,1) both}
@keyframes coinCaida{
  0%{transform:translateY(-26px);opacity:0}
  12%{opacity:1}
  100%{transform:translateY(0)}
}
@keyframes coinGiroA{0%{transform:rotateY(0)}      100%{transform:rotateY(1080deg)}}
@keyframes coinGiroB{0%{transform:rotateY(180deg)} 100%{transform:rotateY(1260deg)}}
@keyframes coinGiroC{0%{transform:rotateY(0)}      100%{transform:rotateY(1260deg)}}
@keyframes coinGiroD{0%{transform:rotateY(180deg)} 100%{transform:rotateY(1440deg)}}
.coin-result{font-family:var(--font-ui);color:var(--ado-muted)}
.coin-result strong{color:var(--ado-gold)}
.ocaso-after-coin{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.ocaso-die{display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;
  color:var(--ado-ivory);font:bold .72rem var(--font-mono);background:#25152c;
  border:1px solid var(--ado-ember);clip-path:polygon(50% 0,95% 24%,88% 78%,50% 100%,12% 78%,5% 24%)}
.ocaso-effect{flex-basis:100%;font:italic .82rem/1.35 var(--font-edit);padding-left:9px}
.ocaso-effect.failure{color:#e2c7bd;border-left:2px solid var(--ado-blood)}
.ocaso-effect.success{color:#a9ddb9;border-left:2px solid var(--ado-emerald)}

/* ---------- modal ---------- */
/* EL DESENFOQUE VA EN UNA CAPA APARTE, NO SOBRE EL CUADRO.
 *
 * Estaba en `.modal`, así que el cuadro con todo su texto quedaba DENTRO del
 * elemento desenfocado. Safari compone eso mal: repinta el texto sobre una
 * versión anterior de sí mismo y el resultado es una cadena partida y con las
 * mitades cambiadas de sitio —«Ej.: Descifrar el umbral» salía como «rar el
 * umbral · Ej.: Descif»—. Se veía sobre todo en los textos de ejemplo de los
 * campos, que se repintan por su cuenta.
 *
 * Poniendo el desenfoque en un `::before` que cubre la pantalla, lo borroso es
 * el fondo y el cuadro deja de estar dentro de la capa filtrada. El efecto se
 * ve igual y el texto se pinta una sola vez.
 */
.modal{position:fixed;inset:0;background:rgba(6,5,10,.82);display:flex;
  align-items:center;justify-content:center;z-index:50;padding:16px}
.modal::before{content:"";position:absolute;inset:0;pointer-events:none;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* `position:relative` para que el cuadro se pinte por encima de esa capa. */
.modal-box{position:relative;background:var(--ado-obsidian);border:1px solid var(--ado-line);
  border-top:2px solid var(--ado-ember);border-radius:var(--radius);
  padding:24px;max-width:780px;max-height:88vh;overflow:auto}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}

/* Asistente de tiradas rápidas */
.quick-roll-box{width:min(720px,100%)}
.quick-roll-box .modal-head h2{margin:.1rem 0 .35rem}
.quick-roll-fields{padding:14px;border:1px solid rgba(215,168,74,.22);
  border-radius:10px;background:rgba(215,168,74,.035)}
.form-grid.two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(150px,.5fr);gap:12px}
.quick-roll-modes{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:12px 0 6px;
  padding:10px 12px;border:1px solid var(--ado-line);border-radius:8px}
.quick-roll-modes legend{padding:0 6px;color:var(--ado-gold);font-weight:700}
.quick-roll-modes label{display:flex;align-items:center;gap:6px;margin:0}
.quick-roll-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
  padding:12px;border-radius:8px;background:rgba(101,79,152,.13);color:var(--ado-muted)}
.quick-roll-flow strong{color:var(--ado-gold)}
.quick-roll-actions{display:flex;gap:10px;flex-wrap:wrap}
.form-error{margin:0;padding:9px 12px;border:1px solid var(--ado-blood);border-radius:8px;
  color:#ffb0b9;background:rgba(166,30,46,.12)}

/* ---------- recortador ---------- */
.cropper-box{text-align:center}
.cropper-canvas{border:2px solid var(--ado-ember);border-radius:12px;cursor:grab;
  touch-action:none;max-width:100%;margin:10px auto;display:block;
  box-shadow:var(--glow-ember)}
.cropper-canvas:active{cursor:grabbing}
.cropper-zoom{width:80%;margin:8px 0;accent-color:var(--ado-ember)}
.cropper-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* ---------- biblioteca ---------- */
.actions-cell{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.share-inline input[type=text]{min-width:150px;width:auto;padding:5px 9px;font-size:.85rem;margin-top:0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .container{padding:14px 10px 40px}
  .site-header{padding:10px 12px;gap:8px}
  .site-header nav{gap:10px;font-size:.9rem}
  .hero-cine{min-height:72vh;margin-top:-56px}
  .hero-content{padding:100px 14px 40px}
  h1{font-size:1.5rem}
  table.list{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  table.sheet{font-size:.85rem}
  .form-grid.two{grid-template-columns:1fr}
  .quick-roll-box{padding:18px}
  .quick-roll-actions .btn{flex:1 1 180px}
  .dice-roll-ocaso{display:flex;margin-inline:0}
  .ocaso-effect{font-size:.78rem}
  .panel{padding:15px}
  .two-cols{grid-template-columns:1fr}
  .forum-toolbar{flex-direction:column;align-items:stretch}
  .forum-toolbar .inline-form{width:100%}
  .view-toggle{justify-content:stretch}
  .view-toggle .btn{flex:1;text-align:center}
  .avatar{width:38px;height:38px}
  .big-avatar{width:84px;height:84px}
  .post{gap:9px;padding:11px 12px}
  .post-meta{flex-direction:column;gap:2px}
  .post.depth-1{margin-left:12px}.post.depth-2{margin-left:24px}.post.depth-3{margin-left:36px}
  .post.depth-4{margin-left:48px}.post.depth-5{margin-left:58px}.post.depth-6{margin-left:66px}
  .post.depth-7{margin-left:72px}.post.depth-8{margin-left:78px}
  .chronicler-tools{flex-direction:column;align-items:stretch}
  .inline-form{width:100%}
  /* EN PANTALLA ESTRECHA, EL CAMPO DE TEXTO OCUPA SU PROPIA LÍNEA.
     Antes todos los elementos del formulario compartían una fila con `flex:1`,
     y con un campo, un desplegable y dos botones el campo se quedaba en unos
     pocos píxeles: en el tablón de partidas solo cabía la «B» de «Buscar
     partida por título…», así que no se veía qué se podía escribir. Los
     desplegables y los botones sí pueden convivir en una fila, que son cortos.
     Vale para todos los formularios en línea del sitio, no solo para ese. */
  .inline-form input[type=text],.inline-form input[type=search]{min-width:0;flex:1 1 100%}
  .inline-form select,.inline-form input[type=number]{min-width:0;flex:1 1 auto}
  .player-cards{grid-template-columns:1fr}
  .modal{padding:8px}
  .modal-box{padding:14px;max-height:94vh}
  .sheet-head.with-portrait{flex-direction:column;text-align:center}
  .renown-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile{flex-direction:column;align-items:center;text-align:center}
  .actions-cell{flex-direction:column;align-items:stretch}
  .recipients{flex-direction:column;gap:2px}
  .pager .btn{padding:5px 9px;font-size:.8rem}
  .home-block{margin-top:44px}
  .editorial{font-size:1.05rem}
}
@media (max-width:420px){
  .stepper button{padding:6px 8px;font-size:.75rem}
  .cards{grid-template-columns:1fr}
  .dice-roll{font-size:.8rem;padding:3px 8px}
  .hero-ctas .btn.big{width:100%}
}

/* ============================================================
   ACCESIBILIDAD: sin movimiento si el usuario lo pide (doc. 04)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* Y la transición entre páginas, que no es una animación de elemento y por
     eso el asterisco de arriba no la alcanza. */
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ============================================================
   IMPRESIÓN — la hoja como documento diegético (pergamino)
   ============================================================ */
@media print{
  body{background:#fff;color:#000}
  /* `.msg` es el aviso flash de la sesión: se pinta dentro de <main>, antes
     del contenido, y no llevaba regla de impresión. En papel empujaba la
     hoja hacia abajo y cada página se desbordaba a la siguiente,
     multiplicando el número de hojas. Un aviso de interfaz no pinta nada
     en una hoja impresa. */
  .no-print,.site-header,.site-footer,.msg{display:none!important}
  .container{max-width:100%;padding:0}
  .sheet-page{border:none;background:#fff;padding:0}
  .sheet-page h1,.sheet-page h2{color:#000}
  table.sheet th{background:#eee;color:#000;border-bottom-color:#999}
  table.sheet th,table.sheet td{border:1px solid #999}
  .provenance,.provenance-footer,.block ul,.block p{color:#000}
  .provenance,.provenance-footer{border-color:#999}
  .avatar,.portrait{border-color:#999}
}

/* ============================================================
   V6 — REDISEÑO VISUAL INTEGRAL
   Implementación del Manual de Dirección Visual v3.
   Se añade al final para preservar la compatibilidad funcional.
   ============================================================ */
:root{
  --ado-carbon:#0B0D0D;--ado-obsidian:#141417;--ado-graphite:#1A1A20;--ado-slate:#202028;
  --ado-ember:#E75818;--ado-ember-bright:#FF7A21;--ado-ember-deep:#B83D13;
  --ado-rift:#4CC9F0;--ado-gold:#D4AF37;--ado-ivory:#F2ECE1;
  --ado-blood:#A61E2E;--ado-emerald:#2E8B57;
  --surface-glass:rgba(20,20,23,.82);--border-warm:rgba(212,175,55,.18);
  --shadow-deep:0 24px 70px rgba(0,0,0,.42);--shadow-card:0 12px 34px rgba(0,0,0,.22);
  --space-section:clamp(5rem,10vw,9rem);
}
html{scroll-padding-top:82px}
body{background-color:var(--ado-carbon);background-image:radial-gradient(circle at 12% 8%,rgba(231,88,24,.035),transparent 30%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.008) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{font-size:.72rem;line-height:1.3;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ado-ember-bright)}
.display-heading{font-family:var(--font-brand);font-size:clamp(2rem,5vw,4.25rem);line-height:1.08;letter-spacing:.015em;color:var(--ado-gold);text-wrap:balance}
.section-wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}

/* navegación: compacta en aplicación, transparente sobre el hero */
.site-header{min-height:70px;padding:10px clamp(18px,4vw,64px);flex-wrap:nowrap;background:rgba(11,13,13,.76);border-bottom:1px solid rgba(212,175,55,.12);transition:background .25s,border-color .25s,box-shadow .25s}
.site-header.is-scrolled{background:rgba(11,13,13,.96);border-bottom-color:rgba(231,88,24,.25);box-shadow:0 10px 40px rgba(0,0,0,.35)}
/* El borde inferior existe SIEMPRE, aunque sea transparente. Con `border:0`
   el ancho saltaba de 0 a 1 px al aparecer `.is-scrolled`, pero el color sí
   entra en la transición y arrancaba desde `currentColor` —el marfil del
   texto—, así que al bajar se veía un destello de línea blanca antes de
   volverse naranja. Declarándolo transparente solo cambia el color. */
.page-home .site-header{position:fixed;width:100%;background:linear-gradient(180deg,rgba(4,5,5,.86),rgba(4,5,5,.12));border:0;border-bottom:1px solid transparent}
.page-home .site-header.is-scrolled{background:rgba(11,13,13,.96);border-bottom-color:rgba(231,88,24,.25)}
.brand{gap:11px;min-width:max-content}.brand-mark{width:43px;height:43px;clip-path:none;background:none;border:0;filter:drop-shadow(0 0 10px rgba(231,88,24,.2))}.brand-word{display:flex;flex-direction:column;line-height:.92}.brand-word strong{font-size:.95rem;letter-spacing:.11em}.brand-word small{font-family:var(--font-edit);font-size:.8rem;font-weight:600;color:var(--ado-ember-bright);letter-spacing:.12em;margin-top:5px}
.site-header nav{gap:clamp(8px,1.5vw,20px)}/* 44 px es el mínimo cómodo para un dedo; estos enlaces medían unos 30.
   El alto se gana con `min-height`, no con relleno, para no separar el menú. */
.site-header nav a{font-size:.82rem;letter-spacing:.035em;color:#d9d4ca;padding:8px 6px;min-height:44px;display:inline-flex;align-items:center}.site-header nav a:hover{color:var(--ado-ivory)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid rgba(212,175,55,.3);border-radius:50%;background:rgba(20,20,23,.75);color:var(--ado-gold);font-size:1.1rem;cursor:pointer}

/* Home: imagen original generada para la dirección de arte */
.hero-cine{min-height:100svh;margin-top:0;justify-content:flex-start;text-align:left;background:#080909;isolation:isolate}
.hero-backdrop{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(6,7,7,.97) 0%,rgba(6,7,7,.82) 25%,rgba(6,7,7,.3) 59%,rgba(6,7,7,.12) 100%),linear-gradient(180deg,rgba(6,7,7,.24),rgba(6,7,7,.04) 58%,#0B0D0D 100%),image-set(url('../images/hero-gaia-v2-1440.webp') 1x, url('../images/hero-gaia-v2.webp') 2x);background-position:center;background-size:cover;transform:scale(1.015);animation:heroBreathe 18s ease-in-out infinite alternate;z-index:-3}
@keyframes heroBreathe{to{transform:scale(1.055)}}
.hero-cine::after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(transparent,var(--ado-carbon));z-index:-1}
.hero-content{width:min(1180px,calc(100% - 40px));max-width:none;margin-inline:auto;padding:clamp(150px,20vh,220px) 0 110px}
.hero-content>*{max-width:650px}.hero-content .eyebrow{margin-bottom:18px}.hero-title{text-transform:uppercase;font-size:clamp(3rem,8.2vw,7.1rem);line-height:.83;letter-spacing:-.015em;margin:0;color:var(--ado-gold);text-shadow:0 4px 45px rgba(0,0,0,.7),0 0 36px rgba(231,88,24,.12)}.hero-title span{font-size:.55em;color:var(--ado-ivory);letter-spacing:.24em}.hero-sub{font-family:var(--font-edit);font-size:clamp(1.2rem,2.2vw,1.65rem);line-height:1.48;color:#d8d0c2;margin:30px 0 35px;border-left:1px solid var(--ado-ember);padding-left:20px}.hero-ctas{justify-content:flex-start}.btn.ghost{background:rgba(11,13,13,.35);color:var(--ado-ivory);border:1px solid rgba(242,236,225,.36);backdrop-filter:blur(8px)}.btn.ghost:hover{border-color:var(--ado-gold);color:var(--ado-gold);box-shadow:none}.hero-trust{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:34px;color:#aaa298;font-size:.75rem;letter-spacing:.03em}.hero-trust span{display:flex;align-items:center;gap:6px}.hero-trust span::first-letter{color:var(--ado-gold)}
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;margin:0;color:#aaa298;font-size:.65rem;text-transform:uppercase;letter-spacing:.18em}.scroll-cue b{font-size:1.1rem;color:var(--ado-ember);animation:cueBob 2s infinite}

/* narrativa editorial */
.world-intro,.fellowship-section,.experience-section,.civilizations-section{padding-block:var(--space-section);position:relative}.world-intro{background:linear-gradient(180deg,var(--ado-carbon),#0f1010)}.story-quote{font-family:var(--font-edit);font-style:italic;font-size:1.2rem;color:var(--ado-gold);padding:18px 0 0;margin-top:22px;border-top:1px solid var(--border-warm)}


/* propuesta de valor */
.experience-section{background:#101012;overflow:hidden}.experience-section::before{content:"";position:absolute;width:700px;height:700px;right:-300px;top:-350px;border:1px solid rgba(231,88,24,.08);border-radius:50%;box-shadow:0 0 0 70px rgba(231,88,24,.018),0 0 0 140px rgba(231,88,24,.012)}.section-heading{text-align:center;max-width:740px;margin:0 auto clamp(42px,6vw,68px)}.section-heading .eyebrow{margin-bottom:14px}.section-heading .display-heading{margin-bottom:16px}.section-heading>p:last-child{color:#aaa298}.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.experience-card{position:relative;min-height:320px;padding:34px 30px 28px;background:linear-gradient(145deg,rgba(32,32,40,.74),rgba(20,20,23,.88));border:1px solid rgba(242,236,225,.1);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}.experience-card:hover{transform:translateY(-7px);border-color:rgba(231,88,24,.48);box-shadow:var(--shadow-card)}/* La tarjeta central llevaba `featured`, un borde superior naranja FIJO. Se
   quitó por dos motivos. Uno: el naranja ya significa «estás señalando
   esta» en `:hover`, así que la misma marca decía dos cosas distintas y, al
   pasar por otra tarjeta, parecía que había dos seleccionadas. Y dos:
   destacaba «Vive una crónica», que lleva a las partidas, cuando la acción
   principal de la página es crear un personaje —es lo que hace el botón
   grande del hero y la primera tarjeta—. Señalaba a otro sitio. */.card-index{position:absolute;right:18px;top:12px;font-family:var(--font-brand);font-size:3.6rem;line-height:1;color:rgba(212,175,55,.07)}.feature-icon{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(231,88,24,.4);border-radius:50%;color:var(--ado-ember-bright);font-size:1.35rem;margin-bottom:28px;box-shadow:inset 0 0 18px rgba(231,88,24,.08)}.experience-card h3{font-family:var(--font-brand);color:var(--ado-gold);font-size:1.15rem;margin-bottom:14px}.experience-card p{color:#a9a39a;font-size:.9rem;line-height:1.7;margin-bottom:25px}.experience-card a{position:absolute;bottom:28px;color:var(--ado-ivory);text-decoration:none;font-size:.82rem;font-weight:600}.experience-card a span{color:var(--ado-ember);display:inline-block;margin-left:7px;transition:transform .2s}.experience-card a:hover span{transform:translateX(5px)}

.fellowship-section{background:radial-gradient(700px 400px at 15% 60%,rgba(231,88,24,.05),transparent),var(--ado-carbon)}

/* ---------- ENTRA EN GAIA · la imagen ES la sección ----------
   Antes era una lámina enmarcada al lado del texto: un marco dorado y un pie
   dentro del recuadro, que es maquetación de papel. Ahora la escena ocupa la
   sección entera y el texto vive encima, sostenido por un velo. */
.escena{min-height:86svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
/* `top` en el eje vertical NO es un detalle: la Fractura nace en el borde
   superior de la imagen, así que cualquier recorte por arriba la decapita.
   En horizontal ya no hace falta desplazar nada: la imagen está compuesta con
   la Fractura en el eje, así que el centro es el encuadre correcto y además
   es el que sobrevive a cualquier proporción de pantalla, porque `cover`
   recorta siempre por los lados. */
.escena-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center top;z-index:-2;filter:saturate(.82) contrast(1.04)}
/* El velo va a la DERECHA, que es donde se apoya el texto, y abre pronto hacia
   la izquierda para dejar ver el ocaso y la ciudad encendida. Con el velo al
   otro lado la escena se leía apagada: lo que quedaba a la vista era la mitad
   en sombra, y lo iluminado desaparecía debajo de la letra. */
.escena::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(270deg,rgba(8,9,9,.94) 0%,rgba(8,9,9,.86) 26%,
    rgba(8,9,9,.5) 46%,rgba(8,9,9,.18) 70%,rgba(8,9,9,.06) 100%)}
.escena-texto{max-width:50ch;margin-left:auto}
.escena-texto .eyebrow{margin-bottom:15px}
.escena-texto .display-heading{margin-bottom:24px}
.escena-texto>p:not(.eyebrow):not(.story-quote){color:#dcd6cc;margin-bottom:18px;line-height:1.8}
.escena-texto .editorial{color:var(--ado-ivory);font-size:clamp(1.28rem,2vw,1.58rem);line-height:1.5}
/* El contenedor va en un elemento de BLOQUE. Con un `<span>`, `section-wrap`
   no puede aplicar ni ancho ni márgenes y el pie se pegaba al borde. */
.escena-pie{position:absolute;bottom:24px;left:0;right:0;z-index:1}
.escena-pie p{color:#bdb6ac;font-family:var(--font-edit);font-size:.95rem}
.escena-pie b{font-family:var(--font-mono);font-weight:500;font-size:.62rem;
  letter-spacing:.2em;color:var(--ado-ember-bright);margin-right:12px}

/* ---------- JUEGA A TU RITMO · mosaico con la imagen íntegra ---------- */
.bento-ritmo{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;align-items:stretch}
.celda-ritmo{background:linear-gradient(150deg,rgba(24,20,20,.9),rgba(10,11,11,.7));
  border:1px solid rgba(242,236,225,.07);padding:30px;display:flex;flex-direction:column;justify-content:center}
/* Columnas EXPLÍCITAS. Dejándolo al flujo automático, el cuadro de los pasos
   empezaba una columna antes que el del párrafo y los bordes no cuadraban. El
   título ocupa las dos filas para que no quede un hueco muerto debajo. */
.r-titulo{grid-column:1 / span 5;grid-row:1 / span 2}
.r-texto{grid-column:6 / span 7;grid-row:1}
.r-pasos{grid-column:6 / span 7;grid-row:2}
.r-titulo .eyebrow{margin-bottom:15px}
.r-titulo .display-heading{margin-bottom:0}
.r-texto .editorial{color:var(--ado-ivory);font-size:clamp(1.2rem,1.7vw,1.42rem);line-height:1.55;margin:0}
/* Los tres pasos en UN cuadro y en columnas alineadas: número, título y
   explicación forman tres líneas de rejilla en vez de tres tarjetas sueltas,
   y ocupan la mitad de alto. */
.pasos-tabla{list-style:none;display:grid;grid-template-columns:auto max-content 1fr;
  gap:14px 18px;align-items:baseline;margin:0}
.pasos-tabla li{display:contents}
.pasos-tabla b{font-family:var(--font-mono);font-weight:500;font-size:.66rem;
  letter-spacing:.16em;color:var(--ado-ember-bright)}
.pasos-tabla strong{color:var(--ado-ivory);font-size:.95rem;white-space:nowrap}
.pasos-tabla small{color:#918b83;line-height:1.5}
/* La imagen va ENTERA: nada de `cover`, que recortaría. Ocupa el ancho y su
   propia proporción decide el alto. */
.ritmo-foto{grid-column:1 / -1;margin:6px 0 0}
.ritmo-foto img{display:block;width:100%;height:auto}
.ritmo-foto figcaption{margin-top:12px;color:#8d867e;font-family:var(--font-edit);font-size:.95rem}
.ritmo-foto figcaption span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;
  color:var(--ado-ember-bright);margin-right:12px}

/* civilizaciones como archivo de legados */
.civilizations-section{background:#0f1011;border-top:1px solid rgba(212,175,55,.08)}.section-heading.compact{margin-bottom:42px}.civ-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:rgba(212,175,55,.11);border:1px solid rgba(212,175,55,.11)}.civ-card{min-height:150px;border:0;border-radius:0;background:var(--ado-obsidian);padding:24px 18px;display:flex;align-items:flex-start;gap:12px;isolation:isolate}.civ-card::before{display:none}.civ-card:hover{transform:none;background:linear-gradient(145deg,#1b191d,#171417);box-shadow:inset 0 -2px var(--ado-ember)}.civ-sigil{color:var(--ado-ember);font-size:1.3rem;line-height:1;text-shadow:0 0 12px rgba(231,88,24,.3)}.civ-card h3{font-size:.9rem;margin:0 0 7px}.civ-card p{line-height:1.55}.civ-number{position:absolute;right:10px;bottom:6px;color:rgba(212,175,55,.1);font:600 2rem var(--font-brand);z-index:-1}

.final-call{position:relative;text-align:center;padding:clamp(80px,12vw,140px) 20px;background:radial-gradient(circle at 50% 45%,rgba(231,88,24,.11),transparent 28%),linear-gradient(#0f1011,#090a0a);overflow:hidden}.final-call-core img{width:92px;height:92px;filter:drop-shadow(0 0 24px rgba(231,88,24,.35));margin-bottom:18px}.final-call h2{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.5vw,34px);font-size:clamp(2rem,4.5vw,3.5rem);margin:14px 0;color:var(--ado-gold)}.final-call h2::before,.final-call h2::after{content:"";height:1px;min-width:0;max-width:240px;flex:1 1 0;background:linear-gradient(90deg,transparent,rgba(212,175,55,.35))}.final-call h2::after{transform:scaleX(-1)}.final-call h2 span{min-width:0;max-width:100%;flex:0 1 auto}.final-call>p:not(.eyebrow){color:#aaa298;margin-bottom:28px}.final-call .hero-ctas{justify-content:center}

/* aplicación: misma identidad, menor inmersión y mayor precisión */
body:not(.page-home) main.container{max-width:1120px;padding-top:clamp(32px,5vw,62px)}
body:not(.page-home) main.container>h1:first-child{font-size:clamp(2rem,4vw,3.25rem);margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border-warm)}
.panel,.auth-box,.sheet-page{background:linear-gradient(145deg,rgba(26,26,32,.96),rgba(20,20,23,.96));border:1px solid rgba(242,236,225,.1);border-top-color:rgba(212,175,55,.28);box-shadow:var(--shadow-card)}
.panel h2,.panel h3{letter-spacing:.025em}.cards .card,.forum-card,.player-card,.post{background:linear-gradient(145deg,#1a1a20,#151518);border-color:rgba(242,236,225,.09)}
/* `background-color` y no el atajo `background`: el atajo borraría la flecha
   del desplegable, que es una imagen de fondo. */
input,textarea,select{background-color:#0e0e11;border-color:#35313d;color:var(--ado-ivory)}input:hover,textarea:hover,select:hover{border-color:#4a4351}input:focus,textarea:focus,select:focus{border-color:var(--ado-ember);box-shadow:0 0 0 3px rgba(231,88,24,.12)}
table.list{border-collapse:separate;border-spacing:0;background:rgba(20,20,23,.65);border:1px solid rgba(242,236,225,.08);border-radius:10px;overflow:hidden}table.list th{background:#111114;color:var(--ado-gold);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}table.list tr:hover td{background:rgba(231,88,24,.035)}
.msg{border-radius:8px;border-left-width:3px}.msg.ok{background:rgba(46,139,87,.1)}.msg.err{background:rgba(166,30,46,.1)}
.stepper{padding:8px;background:#101012;border:1px solid rgba(242,236,225,.08);border-radius:12px}.stepper button{border-radius:8px}.stepper button.current{background:var(--ado-ember);color:var(--ado-carbon)}
.post{border-radius:4px}.post.chronicler{border-left-color:var(--ado-gold)}.dice-roll{background:linear-gradient(160deg,rgba(231,88,24,.12),rgba(11,13,13,.8));border-radius:6px}
.site-footer{padding:50px 20px 32px}.footer-meta{margin-top:15px;color:#67625d;font-size:.67rem;letter-spacing:.16em;text-transform:uppercase}

@media (max-width:1000px){.site-header nav{gap:10px}.site-header nav a{font-size:.76rem}.experience-grid{grid-template-columns:repeat(2,1fr)}.experience-card:last-child{grid-column:1/-1}.civ-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  /* En vertical no hay sitio para texto A UN LADO de la imagen: el velo pasa a
     ser de arriba abajo y el texto se apoya en la mitad inferior, ya oscura. */
  /* `display:block` es imprescindible aquí, no cosmético: abajo el pie pasa a
     `position:static`, y en una sección flexible se convertiría en un segundo
     elemento de la fila que estruja el texto —medido: de 453 px a 347—. */
  /* `display:block` es imprescindible aquí, no cosmético: abajo el pie pasa a
     `position:static`, y en una sección flexible se convertiría en un segundo
     elemento de la fila que estruja el texto —medido: de 453 px a 347—. */
  .escena{display:block;min-height:auto;padding-block:clamp(60px,12vw,90px) clamp(40px,8vw,60px)}
  /* En vertical el velo vuelve a ser de arriba abajo: a lo ancho no hay sitio
     para poner el texto a un lado de la imagen. */
  .escena::before{background:linear-gradient(180deg,rgba(8,9,9,.08) 0%,rgba(8,9,9,.35) 30%,
    rgba(8,9,9,.86) 52%,rgba(8,9,9,.97) 72%)}
  /* Alineado a la izquierda a propósito: en una columna estrecha, un párrafo
     centrado obliga al ojo a buscar el principio de cada línea. */
  .escena-texto{max-width:none;margin-left:0;padding:30svh 0 0}
  .escena-pie{position:static;margin-top:26px}
  .bento-ritmo{grid-template-columns:1fr}
  .r-titulo,.r-texto,.r-pasos,.ritmo-foto{grid-column:1 / -1;grid-row:auto}
  /* Apilado, cada paso vuelve a ser un bloque: en una columna estrecha, tres
     columnas alineadas dejarían la explicación en un canal de dos palabras. */
  .pasos-tabla{grid-template-columns:auto 1fr;gap:6px 14px}
  .pasos-tabla strong{white-space:normal}
  .pasos-tabla small{grid-column:2}
  .site-header{min-height:64px;padding:9px 16px}.brand-mark{width:39px;height:39px}.nav-toggle{display:grid;place-items:center;margin-left:auto}.site-header nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px 18px 18px;background:rgba(11,13,13,.985);border-bottom:1px solid rgba(231,88,24,.25);box-shadow:0 24px 40px rgba(0,0,0,.45)}.site-header nav.is-open{display:flex}.site-header nav>a,.site-header nav form{width:100%}.site-header nav a{display:flex;padding:12px 4px;border-bottom:1px solid rgba(242,236,225,.07)}.site-header nav a.cta{justify-content:center;margin-top:8px}.site-header nav .inline{display:block}.site-header nav .linklike{width:100%;text-align:left;padding:12px 4px}
  /* En móvil basta la versión de 960 px: 64 KB en vez de 408. El fondo del
     hero va por CSS y no admite `srcset`, así que el tamaño se elige aquí. */
  .hero-backdrop{background-image:linear-gradient(90deg,rgba(6,7,7,.94),rgba(6,7,7,.6)),linear-gradient(180deg,rgba(6,7,7,.15),#0B0D0D 96%),url('../images/hero-gaia-v2-960.webp');background-position:62% center}.hero-content{padding-top:140px}.experience-grid{grid-template-columns:1fr}.experience-card:last-child{grid-column:auto}.civ-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .section-wrap,.hero-content{width:min(100% - 28px,1180px)}.hero-title{font-size:clamp(2.55rem,12.8vw,3.45rem)}.hero-title span{letter-spacing:.14em}.hero-sub br{display:none}.hero-trust{gap:8px 14px}.scroll-cue span{display:none}.world-intro,.fellowship-section,.experience-section,.civilizations-section{padding-block:70px}.display-heading{font-size:2.15rem}.civ-grid{grid-template-columns:1fr}.civ-card{min-height:115px}.experience-card{min-height:300px}.hero-ctas{width:100%}.hero-ctas .btn{width:100%}.site-footer{padding-bottom:88px}
  table.list{display:block;overflow:auto}.post{display:grid;grid-template-columns:auto 1fr}.post-side{grid-row:1/3}.post-main{grid-column:2}.post.depth-1,.post.depth-2,.post.depth-3,.post.depth-4,.post.depth-5,.post.depth-6,.post.depth-7,.post.depth-8{margin-left:8px}
}
@media (prefers-reduced-motion:reduce){
  /* El giro también son las caras, no solo la moneda. */
  .hero-backdrop,.destiny-coin.spinning-cara,.destiny-coin.spinning-cruz,
  .destiny-coin .coin-side{animation:none}
  .hero-backdrop,.destiny-coin.spinning-cara,.destiny-coin.spinning-cruz{transform:none}
}

/* ============================================================
   MESA VIRTUAL 3D — tablero táctico integrado en las partidas
   ============================================================ */
.forum-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.forum-heading h2{margin:2px 0 0}
.tabletop-launch{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none}
.tabletop-launch span{font-size:1.25rem}
.scene-picker{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:12px;margin-top:8px;background:rgba(88,199,213,.06);border:1px solid rgba(88,199,213,.23);border-radius:8px}
.scene-picker label{flex:1 1 280px}
.scene-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:12px 0;padding:14px 16px;color:var(--ado-ivory);text-decoration:none;background:linear-gradient(135deg,rgba(88,199,213,.08),rgba(20,20,23,.94));border:1px solid rgba(88,199,213,.24);border-left:3px solid var(--ado-rift);border-radius:8px;transition:border-color .2s,transform .2s,background .2s}
.scene-card:hover{color:var(--ado-ivory);border-color:rgba(88,199,213,.58);background:linear-gradient(135deg,rgba(88,199,213,.13),rgba(20,20,23,.96));transform:translateY(-1px)}
.scene-card-mark{display:grid;place-items:center;width:38px;height:38px;color:var(--ado-rift);font-size:1.35rem;border:1px solid rgba(88,199,213,.3);border-radius:50%}
.scene-card strong,.scene-card small{display:block}.scene-card strong{font-family:var(--font-brand);color:var(--ado-gold)}.scene-card small{margin-top:2px;color:var(--ado-muted)}
.scene-fake{color:var(--err);font-family:var(--font-mono);font-size:.86em}

.page-tabletop{overflow-x:hidden}
.page-tabletop .site-footer{display:none}
main.tabletop-page{max-width:none!important;padding:0 18px 96px!important}
.tabletop-app{width:min(1800px,100%);margin:0 auto}
.tabletop-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:24px 2px 18px}
.tabletop-header h1{margin:2px 0}.tabletop-header .breadcrumb{margin-bottom:8px}
.tabletop-status{display:flex;align-items:center;gap:9px;min-width:max-content;color:var(--ado-muted);font-size:.82rem}
.sync-dot{width:9px;height:9px;border-radius:50%;background:var(--ado-muted);box-shadow:0 0 0 4px rgba(156,150,168,.08)}
.sync-dot.is-ready{background:var(--ado-emerald);box-shadow:0 0 0 4px rgba(46,139,87,.11)}
.sync-dot.is-syncing{background:var(--ado-gold);box-shadow:0 0 0 4px rgba(212,175,55,.1);animation:tabletopPulse 1s infinite alternate}
.sync-dot.is-error{background:var(--err);box-shadow:0 0 0 4px rgba(166,30,46,.14)}
@keyframes tabletopPulse{to{opacity:.35}}

.tabletop-empty{text-align:center;max-width:620px;margin:8vh auto;padding:56px 30px}
.tabletop-empty-icon{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 20px;color:var(--ado-rift);font-size:2.5rem;border:1px solid rgba(88,199,213,.33);border-radius:50%;box-shadow:0 0 32px rgba(88,199,213,.1)}
.tabletop-empty h2{font-size:1.55rem;margin-bottom:12px}.tabletop-empty p{color:var(--ado-muted);margin-bottom:22px}
.tabletop-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:16px;align-items:start}
.tabletop-stage-panel{min-width:0;background:#08090b;border:1px solid rgba(242,236,225,.1);box-shadow:var(--shadow-deep)}
.tabletop-disabled{margin:0;border-radius:0;border-width:0 0 1px 3px}
.tabletop-toolbar{display:flex;align-items:end;gap:8px;flex-wrap:wrap;padding:10px;background:linear-gradient(180deg,#17171c,#111115);border-bottom:1px solid rgba(242,236,225,.09)}
.tabletop-toolbar>label:not(.tabletop-toggle){min-width:170px}
.tabletop-toolbar select{padding:7px 30px 7px 9px}
.tabletop-toggle{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:4px 7px;font-size:.82rem;color:#d7d0c5;cursor:pointer}
.tabletop-toggle input{accent-color:var(--ado-ember)}
.tabletop-stage{position:relative;width:100%;height:clamp(460px,62vh,760px);min-height:420px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#17171b,#07080a 70%);touch-action:none}
.tabletop-stage-panel.has-selection .tabletop-stage{height:clamp(320px,calc(100dvh - 300px),620px);min-height:320px}
.tabletop-canvas{display:block;width:100%;height:100%;outline:none;cursor:grab}.tabletop-canvas:active{cursor:grabbing}.tabletop-canvas.fog-cursor{cursor:crosshair}
.tabletop-loading{position:absolute;z-index:3;inset:0;display:grid;place-items:center;color:var(--ado-gold);font-family:var(--font-brand);letter-spacing:.08em;background:radial-gradient(circle,rgba(231,88,24,.08),rgba(8,9,11,.94) 48%)}
.tabletop-help-overlay{position:absolute;z-index:2;left:50%;bottom:12px;transform:translateX(-50%);max-width:calc(100% - 24px);padding:7px 12px;color:#bbb4aa;font-size:.72rem;white-space:nowrap;background:rgba(8,9,11,.78);border:1px solid rgba(242,236,225,.1);border-radius:18px;pointer-events:none;backdrop-filter:blur(8px)}
.tabletop-stage:fullscreen{width:100vw;height:100vh;background:#07080a}.tabletop-stage:fullscreen .tabletop-help-overlay{bottom:22px}
.tabletop-selection{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:12px;border-top:1px solid rgba(212,175,55,.2);background:#111115;scroll-margin:24px}
.tabletop-selection>div:first-child{min-width:170px;margin-right:auto}.tabletop-selection strong,.tabletop-selection small{display:block}.tabletop-selection small{color:var(--ado-muted)}
.tabletop-selection label:not(.tabletop-toggle){min-width:125px}.tabletop-selection select{padding:7px 30px 7px 9px}
.tabletop-orientation>span{display:block;margin-bottom:5px;color:#d7d0c5;font-size:.78rem}.tabletop-rotation-control{display:flex;align-items:stretch;gap:5px}.tabletop-rotation-control select{min-width:124px}.tabletop-rotation-control .btn{min-width:38px;padding-inline:9px;font-size:1.08rem}
.tabletop-toolbar .btn.is-active{color:#111;background:var(--ado-gold);border-color:var(--ado-gold);box-shadow:0 0 0 2px rgba(212,175,55,.13)}

.tabletop-sidebar{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px;position:sticky;top:88px}
.tabletop-sidebar .panel{margin:0;padding:0;box-shadow:none}
.tabletop-sidebar details>summary{padding:15px 16px;color:var(--ado-gold);font-family:var(--font-brand);font-size:.91rem;cursor:pointer;list-style-position:inside}
.tabletop-sidebar details[open]>summary{border-bottom:1px solid rgba(242,236,225,.08)}
.tabletop-sidebar details>*:not(summary){margin-left:16px;margin-right:16px}.tabletop-sidebar details>*:last-child{margin-bottom:16px}
.tabletop-legend{margin-top:13px}.tabletop-legend>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid rgba(242,236,225,.06);font-size:.75rem}.tabletop-legend dt{color:#d9d2c7}.tabletop-legend dd{color:var(--ado-muted)}
.compact-form{gap:10px;margin-top:14px}.compact-form label{font-size:.76rem}.compact-form input,.compact-form select{padding:8px 9px;font-size:.8rem}.compact-form small{display:block;margin-top:4px;color:var(--ado-muted);font-size:.68rem}
.compact-form input[type=color]{-webkit-appearance:none;appearance:none;width:100%;min-width:74px;height:40px;padding:4px;overflow:hidden;background:#0b0c0f;border:1px solid rgba(242,236,225,.22);border-radius:6px;cursor:pointer}
.compact-form input[type=color]::-webkit-color-swatch-wrapper{padding:0}.compact-form input[type=color]::-webkit-color-swatch{background:var(--picked-color,#050608)!important;border:1px solid rgba(242,236,225,.45);border-radius:3px}.compact-form input[type=color]::-moz-color-swatch{background:var(--picked-color,#050608)!important;border:1px solid rgba(242,236,225,.45);border-radius:3px}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tabletop-lighting{margin:4px 0 0;padding:11px;border-color:rgba(215,168,74,.24);display:grid;gap:9px}.tabletop-lighting legend{font-family:var(--font-ui);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.tabletop-lighting input[type=number]{font-family:var(--font-mono)}
.tabletop-light-sources{margin:2px 0;padding:8px;border-color:rgba(242,236,225,.12)}.tabletop-direction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.tabletop-direction-grid .opt{justify-content:center;align-items:center;padding:5px 3px;font-family:var(--font-mono);font-size:.68rem}.tabletop-direction-grid .opt input{margin:0}.tabletop-direction-grid .tabletop-zenith{color:var(--ado-gold);font-family:var(--font-ui)}
.tabletop-admin-list{margin-top:12px}
.tabletop-admin-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(242,236,225,.07);font-size:.76rem}
.tabletop-admin-row>span:first-child{min-width:0}.tabletop-admin-row strong,.tabletop-admin-row small{display:block}.tabletop-admin-row strong{overflow:hidden;text-overflow:ellipsis;color:var(--ado-ivory)}.tabletop-admin-row small{color:var(--ado-muted)}
.tabletop-admin-row>span:last-child{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.tabletop-admin-row .linklike{font-size:.7rem}
.asset-filters{display:flex;gap:10px;padding-top:10px}.asset-filters .is-active{color:var(--ado-gold);text-decoration:underline;text-underline-offset:4px}
.tabletop-movements p{padding:8px 0;border-bottom:1px solid rgba(242,236,225,.07);font-size:.74rem}.tabletop-movements small{display:block;color:var(--ado-muted)}.tabletop-movements .is-undone{opacity:.48;text-decoration:line-through}
.admin-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.admin-settings-grid>label{padding:14px;background:rgba(11,13,13,.4);border:1px solid rgba(242,236,225,.08);border-radius:8px}.admin-settings-grid small{display:block;margin-top:5px;color:var(--ado-muted);font-size:.72rem}.admin-setting-toggle{grid-column:1/-1;align-items:center}.admin-section-title{margin:34px 0 8px}

@media (max-width:1180px){
  .tabletop-workspace{grid-template-columns:minmax(0,1fr) 320px}
  .tabletop-stage{height:clamp(450px,64vh,700px)}
}
@media (max-width:900px){
  main.tabletop-page{padding-inline:12px!important}
  .tabletop-workspace{grid-template-columns:1fr}.tabletop-sidebar{position:static;max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.tabletop-sidebar>details:first-child{grid-column:1/-1}
  .tabletop-stage{height:min(68vh,650px)}
}
@media (max-width:640px){
  .forum-heading,.tabletop-header{align-items:stretch;flex-direction:column}.tabletop-launch{justify-content:center}
  .scene-card{grid-template-columns:auto minmax(0,1fr)}.scene-card>span:last-child{display:none}
  main.tabletop-page{padding-inline:8px!important}.tabletop-header{padding-top:16px;gap:8px}.tabletop-status{min-width:0}
  .tabletop-toolbar{align-items:stretch}.tabletop-toolbar>label:not(.tabletop-toggle){width:100%}.tabletop-toolbar .btn{flex:1 1 42%}
  .tabletop-stage{height:60vh;min-height:390px}.tabletop-help-overlay{white-space:normal;width:max-content;text-align:center}
  .tabletop-selection{align-items:stretch}.tabletop-selection>div:first-child{width:100%}.tabletop-selection label:not(.tabletop-toggle),.tabletop-orientation{flex:1 1 42%}.tabletop-rotation-control select{min-width:0;flex:1}
  .tabletop-sidebar{grid-template-columns:1fr}.tabletop-sidebar>details:first-child{grid-column:auto}
  .admin-settings-grid{grid-template-columns:1fr}.admin-setting-toggle{grid-column:auto}
}
@media (max-width:430px){
  .tabletop-stage{height:56vh;min-height:350px}.form-pair{grid-template-columns:1fr}
}

/* ============================================================
   HOJA DE PERSONAJE — EDICIÓN DE COLECCIONISTA
   Documento dinámico, legible en mesa y compuesto para A4.
   ============================================================ */
.character-dossier{
  --cs-gold:#d9b64f;--cs-gold-bright:#f1d57a;--cs-ink:#f5efe4;
  --cs-muted:#b9aec2;--cs-accent:#8758b8;--cs-accent-rgb:135,88,184;
  --cs-paper:#15121b;--cs-paper-deep:#0d0b12;
  margin:0 auto 34px;isolation:isolate;
}
.character-dossier--arcane{--cs-accent:#9a68d7;--cs-accent-rgb:154,104,215}
.character-dossier--occult{--cs-accent:#7642a7;--cs-accent-rgb:118,66,167}
.character-dossier--heroic{--cs-accent:#b34d27;--cs-accent-rgb:179,77,39}
.character-sheet-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px;padding:14px 18px;background:rgba(20,18,27,.86);border:1px solid rgba(217,182,79,.2);border-radius:10px}
.character-sheet-toolbar .eyebrow{margin-bottom:2px}.character-sheet-toolbar p:last-child{color:var(--ado-muted);font-size:.78rem}
.cs-page{position:relative;overflow:hidden;margin:0 0 28px;padding:34px 38px 28px;color:var(--cs-ink);background:
  radial-gradient(circle at 82% 18%,rgba(var(--cs-accent-rgb),.17),transparent 25%),
  radial-gradient(circle at 12% 92%,rgba(217,182,79,.08),transparent 24%),
  linear-gradient(145deg,rgba(31,25,40,.98),rgba(16,13,21,.99) 60%,rgba(11,10,15,.99));
  border:1px solid rgba(217,182,79,.62);box-shadow:0 26px 70px rgba(0,0,0,.38),inset 0 0 0 5px rgba(13,11,18,.82),inset 0 0 0 6px rgba(217,182,79,.14);
}
.cs-page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.17;background-image:
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),
  radial-gradient(circle at center,transparent 48%,rgba(0,0,0,.6) 100%);background-size:24px 24px,24px 24px,auto}
.cs-page::after{content:"";position:absolute;z-index:-1;right:-100px;bottom:-120px;width:370px;height:370px;border:1px solid rgba(217,182,79,.08);border-radius:50%;box-shadow:0 0 0 34px rgba(217,182,79,.025),0 0 0 72px rgba(var(--cs-accent-rgb),.018)}
.cs-corner{position:absolute;width:76px;height:76px;pointer-events:none;opacity:.74}
.cs-corner::before,.cs-corner::after{content:"";position:absolute;background:linear-gradient(90deg,var(--cs-gold),transparent)}
.cs-corner::before{width:64px;height:1px;top:13px;left:13px}.cs-corner::after{width:1px;height:64px;top:13px;left:13px;background:linear-gradient(var(--cs-gold),transparent)}
.cs-corner--tl{left:0;top:0}.cs-corner--tr{right:0;top:0;transform:rotate(90deg)}.cs-corner--br{right:0;bottom:0;transform:rotate(180deg)}.cs-corner--bl{left:0;bottom:0;transform:rotate(270deg)}
.cs-masthead,.cs-chapter-head{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:16px;margin-bottom:25px;border-bottom:1px solid rgba(217,182,79,.35)}
.cs-masthead::after,.cs-chapter-head::after{content:"◆";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);display:grid;place-items:center;width:20px;height:20px;color:var(--cs-gold);font-size:.55rem;background:var(--cs-paper)}
.cs-branding{display:flex;align-items:center;gap:13px}.cs-branding img,.cs-chapter-name img{filter:drop-shadow(0 0 15px rgba(231,88,24,.34))}.cs-branding span,.cs-branding small{display:block}.cs-branding span{color:var(--cs-gold-bright);font:600 1.02rem var(--font-brand);letter-spacing:.08em}.cs-branding small{color:var(--cs-muted);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase}
.cs-level-seal{min-width:145px;text-align:center;padding:9px 18px;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);background:linear-gradient(135deg,rgba(var(--cs-accent-rgb),.48),rgba(217,182,79,.16));border-block:1px solid rgba(217,182,79,.5)}
.cs-level-seal small,.cs-level-seal strong,.cs-level-seal span{display:block}.cs-level-seal small{font-size:.57rem;text-transform:uppercase;letter-spacing:.2em;color:var(--cs-muted)}.cs-level-seal strong{font:600 1.18rem var(--font-brand);color:var(--cs-gold-bright);line-height:1.2}.cs-level-seal span{font-size:.63rem;color:var(--cs-ink)}
.cs-identity-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(280px,.72fr);gap:34px;align-items:stretch}
.cs-identity-copy{padding-top:18px}.cs-kicker{color:var(--cs-gold);font-size:.67rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}.cs-identity-copy h1{max-width:650px;margin:8px 0 10px;color:var(--cs-ink);font-size:clamp(2.5rem,5vw,4.8rem);line-height:.92;letter-spacing:.01em;text-wrap:balance;text-shadow:0 3px 30px rgba(var(--cs-accent-rgb),.32)}.cs-subtitle{font:italic 1.08rem var(--font-edit);color:var(--cs-muted);letter-spacing:.04em}
.cs-alias-form{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;max-width:620px}.cs-alias-form label,.cs-alias-readonly span,.cs-alias-print span{color:var(--cs-gold);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.cs-alias-form input{min-width:0;padding:7px 9px;color:var(--cs-ink);font:italic .92rem var(--font-edit);border:0;border-bottom:1px solid rgba(217,182,79,.32);border-radius:0;background:rgba(7,6,10,.24)}.cs-alias-readonly,.cs-alias-print{margin:0;color:var(--cs-muted);font:italic 1rem var(--font-edit)}.cs-alias-readonly span,.cs-alias-print span{margin-right:9px;font-style:normal}.cs-alias-print{display:none}
.cs-vitals{display:grid;grid-template-columns:1fr .72fr 1.3fr;gap:9px;margin:24px 0}.cs-vital{position:relative;min-height:95px;padding:12px 13px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(217,182,79,.3);background:linear-gradient(145deg,rgba(var(--cs-accent-rgb),.13),rgba(8,7,11,.3))}.cs-vital::before{content:"";position:absolute;inset:4px;border:1px solid rgba(217,182,79,.08);pointer-events:none}.cs-vital span,.cs-vital small{display:block}.cs-vital span{color:var(--cs-muted);font-size:.59rem;letter-spacing:.13em;text-transform:uppercase}.cs-vital strong{color:var(--cs-gold-bright);font:600 2.15rem/1.05 var(--font-brand)}.cs-vital strong.cs-vital-word{font-size:clamp(.86rem,1.8vw,1.18rem);line-height:1.18;margin:8px 0}.cs-vital small{font-size:.61rem;color:var(--cs-muted)}
.cs-section-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--cs-gold)}.cs-section-title::before,.cs-section-title::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(217,182,79,.38))}.cs-section-title::after{transform:scaleX(-1)}.cs-section-title span{font-size:.48rem}.cs-section-title h2{flex:none;margin:0;color:var(--cs-gold-bright);font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;text-align:center}
.cs-attribute-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.cs-attribute{position:relative;min-height:122px;text-align:center;padding:13px 8px 10px;border:1px solid rgba(217,182,79,.33);clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);background:radial-gradient(circle at 50% 38%,rgba(var(--cs-accent-rgb),.28),rgba(10,8,13,.48) 66%)}
.cs-attribute.is-modified{border-color:rgba(231,88,24,.68)}.cs-attribute-code{display:block;color:var(--cs-gold);font:.68rem var(--font-mono);letter-spacing:.16em}.cs-attribute>strong{display:block;color:var(--cs-ink);font:600 2.3rem/1.05 var(--font-brand);text-shadow:0 0 18px rgba(var(--cs-accent-rgb),.42)}.cs-attribute-name{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--cs-gold-bright);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.055em}.cs-attribute small{display:block;color:var(--cs-muted);font-size:.53rem;line-height:1.35}.cs-attribute .cs-temporary{color:#f19b78}.cs-attribute .cs-modifier-note{margin-top:2px;color:#d9c5de;font-style:italic}
.cs-portrait-stage{position:relative;min-height:570px;overflow:hidden;border:1px solid rgba(217,182,79,.2);border-bottom-color:rgba(217,182,79,.65);background:radial-gradient(ellipse at 50% 43%,rgba(var(--cs-accent-rgb),.27),transparent 55%),linear-gradient(180deg,transparent 72%,rgba(217,182,79,.1))}
.cs-portrait-stage::before,.cs-portrait-stage::after{content:"";position:absolute;inset:26px 9% 34px;border:1px solid rgba(217,182,79,.16);clip-path:polygon(50% 0,100% 28%,100% 75%,50% 100%,0 75%,0 28%)}.cs-portrait-stage::after{inset:48px 15% 58px;border-color:rgba(var(--cs-accent-rgb),.25)}.cs-portrait-halo{position:absolute;left:50%;top:43%;width:min(72%,245px);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(217,182,79,.18);border-radius:50%;box-shadow:0 0 0 20px rgba(217,182,79,.025),0 0 80px rgba(var(--cs-accent-rgb),.22)}
.cs-portrait-frame{position:absolute;z-index:2;inset:20px 5% 52px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-inline:1px solid rgba(217,182,79,.12)}
.character-art{display:flex;align-items:center;justify-content:center;width:100%;height:100%;object-fit:contain;object-position:center center;border:0;border-radius:0;background:transparent;color:var(--cs-gold-bright);font:600 9rem var(--font-brand);filter:drop-shadow(0 16px 18px rgba(0,0,0,.55))}.character-art.avatar-fallback{width:68%;height:auto;max-height:92%;aspect-ratio:3/4;border:1px solid rgba(217,182,79,.2);clip-path:polygon(50% 0,96% 20%,96% 82%,50% 100%,4% 82%,4% 20%);background:radial-gradient(circle at 50% 35%,rgba(var(--cs-accent-rgb),.34),rgba(10,8,13,.55) 68%);font-size:6rem;text-shadow:0 0 35px rgba(var(--cs-accent-rgb),.65)}
.cs-portrait-plaque{position:absolute;z-index:3;left:12%;right:12%;bottom:10px;text-align:center;padding:8px 10px;background:rgba(11,9,14,.86);border:1px solid rgba(217,182,79,.42);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}.cs-portrait-plaque span,.cs-portrait-plaque strong{display:block}.cs-portrait-plaque span{color:var(--cs-muted);font-size:.56rem;letter-spacing:.17em;text-transform:uppercase}.cs-portrait-plaque strong{color:var(--cs-gold-bright);font:.8rem var(--font-brand)}
.cs-quick-grid{display:grid;grid-template-columns:1.05fr 1fr .86fr;gap:11px;margin-top:24px}.cs-panel{position:relative;padding:17px 18px;background:linear-gradient(145deg,rgba(24,20,31,.78),rgba(9,8,12,.44));border:1px solid rgba(217,182,79,.22);break-inside:avoid}.cs-panel--compact{min-height:168px;padding:14px}.cs-panel--compact .cs-section-title h2{font-size:.69rem}.cs-stat-list>div,.cs-equipment-list>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dotted rgba(217,182,79,.2)}.cs-stat-list dt,.cs-equipment-list dt{color:var(--cs-muted);font-size:.68rem}.cs-stat-list dd{color:var(--cs-gold-bright);font:600 .95rem var(--font-mono)}.cs-equipment-list dd{color:var(--cs-ink);font-size:.7rem;text-align:right}.cs-dice-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.cs-dice-row>div{text-align:center;padding:10px 2px;border:1px solid rgba(var(--cs-accent-rgb),.3);background:rgba(var(--cs-accent-rgb),.1);clip-path:polygon(50% 0,99% 18%,99% 82%,50% 100%,1% 82%,1% 18%)}.cs-dice-row span,.cs-dice-row strong{display:block}.cs-dice-row span{font-size:.5rem;color:var(--cs-muted);text-transform:uppercase}.cs-dice-row strong{font:600 .82rem var(--font-mono);color:var(--cs-gold-bright);white-space:nowrap;letter-spacing:-.02em}.cs-inline-note{margin-top:8px;color:var(--cs-muted);font-size:.64rem;line-height:1.45}.cs-inline-note strong{color:var(--cs-gold-bright)}.cs-clean-list,.cs-note-list,.cs-magic-list,.cs-feature-list{list-style:none;margin:0;padding:0}.cs-clean-list li{padding:4px 0;color:var(--cs-ink);font-size:.72rem;border-bottom:1px dotted rgba(217,182,79,.18)}.cs-empty{color:var(--cs-muted);font:italic .82rem var(--font-edit);text-align:center;padding:10px}
.cs-page-footer{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:10px;border-top:1px solid rgba(217,182,79,.26);color:var(--cs-muted);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase}.cs-page-footer span:last-child{color:var(--cs-gold);font-family:var(--font-brand)}
.cs-chapter-head h2{margin:3px 0 0;color:var(--cs-ink);font-size:2rem}.cs-chapter-name{display:flex;align-items:center;gap:10px;color:var(--cs-gold-bright);font:600 .98rem var(--font-brand)}
.cs-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.cs-content-column{display:grid;gap:14px}.cs-feature-list{display:grid;gap:7px}.cs-feature-list li,.cs-feature{padding:8px 0;border-bottom:1px solid rgba(217,182,79,.13)}.cs-feature-list strong,.cs-feature-list span,.cs-feature strong,.cs-feature p{display:block}.cs-feature-list strong,.cs-feature strong{color:var(--cs-gold-bright);font-size:.72rem}.cs-feature-list span,.cs-feature p{margin-top:2px;color:var(--cs-muted);font:500 .72rem/1.45 var(--font-edit)}.cs-panel h3{margin:13px 0 5px;color:var(--cs-accent);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.cs-note-list{margin-top:10px}.cs-note-list li{position:relative;padding:3px 0 3px 13px;color:var(--cs-muted);font-size:.68rem}.cs-note-list li::before{content:"◇";position:absolute;left:0;color:var(--cs-gold)}.cs-adjustments{margin-top:10px;padding:10px;border-left:2px solid var(--cs-accent);background:rgba(var(--cs-accent-rgb),.08);font-size:.66rem}.cs-adjustments>strong{color:var(--cs-gold-bright)}.cs-adjustments ul{margin:4px 0 0 16px;color:var(--cs-muted)}
.cs-panel--additional-occupation{border-color:rgba(var(--cs-accent-rgb),.42);background:radial-gradient(circle at 0 0,rgba(var(--cs-accent-rgb),.16),transparent 45%),rgba(11,9,15,.5)}
.cs-panel--magic{background:radial-gradient(circle at 100% 0,rgba(var(--cs-accent-rgb),.22),transparent 40%),rgba(11,9,15,.5);border-color:rgba(var(--cs-accent-rgb),.48)}.cs-magic-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.cs-magic-list li{display:flex;align-items:flex-start;gap:7px;padding:8px;color:var(--cs-ink);font-size:.68rem;border:1px solid rgba(var(--cs-accent-rgb),.21);background:rgba(var(--cs-accent-rgb),.07)}.cs-magic-list li>span{color:var(--cs-gold)}.cs-magic-list li strong{color:var(--cs-gold-bright)}.cs-panel--background p{min-height:54px;color:#ddd3df;font:500 .88rem/1.7 var(--font-edit);white-space:normal}.cs-panel--notes{min-height:390px;display:flex;flex-direction:column}.cs-notes-form{display:flex;flex:1;min-height:300px;flex-direction:column;align-items:stretch;gap:10px}.cs-notes-editor,.cs-notes-print{flex:1;min-height:300px;padding:4px 12px;color:#ddd3df;font:500 .82rem/30px var(--font-edit);background:repeating-linear-gradient(180deg,transparent 0,transparent 29px,rgba(217,182,79,.17) 30px,transparent 31px),linear-gradient(90deg,rgba(var(--cs-accent-rgb),.035),transparent 35%);border:1px solid rgba(217,182,79,.09);border-radius:0;resize:vertical}.cs-notes-editor::placeholder{color:rgba(193,182,200,.56)}.cs-notes-form .btn{align-self:flex-end}.cs-notes-print{display:none}.cs-notes-print.is-readable{display:block}.cs-notes-print p{margin:0;white-space:normal}.cs-notes-print.is-empty{background:repeating-linear-gradient(180deg,transparent 0,transparent 29px,rgba(217,182,79,.17) 30px,transparent 31px),linear-gradient(90deg,rgba(var(--cs-accent-rgb),.035),transparent 35%)}
.cs-panel--deeds{margin-top:14px}.cs-deed-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;counter-reset:deeds}.cs-deed-list li{display:flex;gap:9px;padding:8px;border:1px solid rgba(217,182,79,.13);background:rgba(217,182,79,.035)}.cs-deed-mark{color:var(--cs-gold)}.cs-deed-list strong,.cs-deed-list small{display:block}.cs-deed-list strong{color:var(--cs-ink);font-size:.72rem}.cs-deed-list small{color:var(--cs-muted);font-size:.58rem}.cs-renown-history{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid rgba(217,182,79,.16)}.cs-renown-history>strong{color:var(--cs-gold-bright);font-size:.68rem}.cs-renown-history span{padding:3px 8px;color:var(--cs-muted);font-size:.58rem;border:1px solid rgba(217,182,79,.18);border-radius:12px}.cs-authorship{display:flex;justify-content:space-between;gap:20px;margin-top:14px;color:var(--cs-muted);font-size:.58rem;font-style:italic}.cs-authorship strong{color:var(--cs-ink)}

@media (max-width:900px){
  .cs-page{padding:28px 24px}.cs-identity-grid{grid-template-columns:1fr minmax(230px,.62fr);gap:20px}.cs-portrait-stage{min-height:520px}.cs-quick-grid{grid-template-columns:1fr 1fr}.cs-quick-grid .cs-panel:last-child{grid-column:1/-1}.cs-content-grid{grid-template-columns:1fr}.cs-magic-list{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-panel--notes{min-height:310px}
}
@media (max-width:680px){
  .character-sheet-toolbar{align-items:stretch;flex-direction:column}.character-sheet-toolbar .btn{width:100%}.cs-page{padding:25px 17px}.cs-masthead{align-items:flex-start}.cs-branding span{font-size:.83rem}.cs-branding img{width:42px;height:42px}.cs-level-seal{min-width:116px;padding-inline:10px}.cs-identity-grid{display:flex;flex-direction:column}.cs-portrait-stage{order:-1;width:min(100%,420px);min-height:520px;margin-inline:auto}.cs-identity-copy{padding-top:0}.cs-identity-copy h1{text-align:center;font-size:2.7rem}.cs-kicker,.cs-subtitle,.cs-alias-readonly{text-align:center}.cs-alias-form{grid-template-columns:1fr}.cs-alias-form label{text-align:center}.cs-alias-form .btn{width:100%}.cs-attribute-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-vitals{grid-template-columns:1fr 1fr}.cs-vital:last-child{grid-column:1/-1}.cs-quick-grid{grid-template-columns:1fr}.cs-quick-grid .cs-panel:last-child{grid-column:auto}.cs-chapter-head{align-items:flex-start}.cs-chapter-head h2{font-size:1.45rem}.cs-chapter-name strong{display:none}.cs-magic-list,.cs-deed-list{grid-template-columns:1fr}.cs-authorship{flex-direction:column;gap:3px}
}
@media (max-width:390px){.cs-attribute-grid{grid-template-columns:1fr}.cs-masthead{flex-direction:column}.cs-level-seal{width:100%}}

/* ---------- zona de mesa de la hoja de personaje ----------
   Ocupa la mitad inferior de la primera hoja, que antes quedaba vacía. En una
   hoja pensada para imprimirse y jugar con ella, ese espacio es el más útil
   del documento: es donde se anota lo que ocurre en la partida. Va pautado
   porque se rellena a mano. */
.cs-panel--mesa{margin-top:14px}
.cs-mesa-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Misma tipografía y misma pauta que el bloque de Notas: son lo mismo —sitio
   para escribir— y verlos con dos letras distintas en la misma hoja canta. Se
   copian los valores de `.cs-notes-print`: fuente de edición, 0,82 rem y
   renglón de 30 px. */
.cs-lined{
  padding:4px 12px;
  color:#ddd3df;
  font:500 .82rem/30px var(--font-edit);
  border:1px solid rgba(217,182,79,.09);
  background:repeating-linear-gradient(180deg,transparent 0,transparent 29px,rgba(217,182,79,.17) 30px,transparent 31px),
             linear-gradient(90deg,rgba(var(--cs-accent-rgb),.035),transparent 35%);
}
.cs-lined--equipo,.cs-lined--estado{min-height:104px}
.cs-lined--sesion{min-height:130px}
/* Escrita desde la web: se conserva la pauta detrás, igual que en Notas, para
   que se pueda seguir añadiendo a mano debajo de lo ya escrito. */
.cs-lined p{margin:0;color:inherit;font:inherit;white-space:pre-wrap}
.cs-section-title--sub{margin-top:14px}
.cs-section-title--sub h3{color:var(--cs-gold);font:600 .69rem var(--font-brand);
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
/* La copia pautada NO se ve en pantalla si quien mira puede escribir: para eso
   tiene el recuadro de escribir justo encima, y verlo dos veces confunde. Es
   exactamente lo que hacen las Notas. Quien solo puede leer la hoja sí la ve,
   porque para esa persona es la única versión. En papel salen siempre. */
.cs-mesa-print,.cs-equipo-print{display:none}
.cs-mesa-print.is-readable,.cs-equipo-print.is-readable{display:block}
.cs-mesa-form{display:grid;gap:12px;margin-bottom:14px}
.cs-mesa-form label{display:grid;gap:5px}
.cs-mesa-form label>span{color:var(--cs-accent);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.cs-mesa-form textarea{width:100%;padding:9px 11px;border:1px solid rgba(217,182,79,.3);border-radius:7px;
  background:rgba(4,5,8,.6);color:var(--cs-ink);font:inherit;font-size:.8rem;resize:vertical}
.cs-mesa-form .btn{justify-self:start}

@media print{
  @page{size:A4 portrait;margin:0}
  /* SIN `min-height`. Con un suelo de 297 mm, cuando las dos hojas suman
     586 mm el navegador reserva sitio hasta 594 y puede materializar una
     tercera página vacía. Aquí la altura la fija el contenido: dos hojas
     de alto fijo, ni un milímetro más. */
  html,body{width:210mm;min-height:0;height:auto;background:#fff!important}
  /* `display:block` NO es cosmético aquí. En pantalla, `body` es un contenedor
     flexible en columna —así el pie se queda abajo— y `main` es su elemento
     flexible. Al imprimir, ese mismo documento tiene que PARTIRSE en folios, y
     WebKit no sabe fragmentar un contenedor flexible entre páginas: de ahí una
     hoja de más que en Chromium no aparece, porque Chromium sí lo fragmenta.
     En papel no hay pie que empujar, así que la columna flexible no aporta
     nada y estorba. Los `display:flex` de DENTRO de cada hoja se quedan: esas
     cajas no se fragmentan nunca, tienen alto fijo y `overflow:hidden`. */
  html,body{display:block!important}
  main{flex:none!important}
  /* Nada fuera del dosier entra en el papel, dependa o no de `.no-print`. */
  body>*:not(main),main>*:not(.character-dossier){display:none!important}
  body{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
  /* `font-size:0` no es un capricho: ocultar con `display:none` las secciones
     que siguen al dosier NO elimina los saltos de línea que hay entre ellas,
     porque un nodo de texto no se puede seleccionar en CSS. Chromium los
     colapsa; otros motores les dan una caja de línea con altura, y esa línea
     cae DESPUÉS de la segunda hoja: una tercera página en blanco. A tamaño
     cero no ocupan nada en ningún motor. El dosier recupera su tamaño con
     `rem`, que depende de la raíz y no del padre. */
  main.container,body:not(.page-home) main.container{width:210mm!important;max-width:210mm!important;margin:0!important;padding:0!important;font-size:0!important}
  .character-dossier{width:210mm;margin:0;font-size:1rem;--cs-gold:#d5ad3f;--cs-gold-bright:#efd478;--cs-ink:#f7f1e7;--cs-muted:#c1b6c8}
    /* 296 y no 297: con `@page{margin:0}` el área imprimible mide 297 mm
     EXACTOS, así que una hoja de 297 mm se desborda por cualquier redondeo
     de subpíxel y arrastra una página en blanco detrás. Con esos dos
     milímetros de holgura el marco sigue llegando casi al borde y ya no
     sobra ninguna hoja. */
  /* ALTO FIJO, no mínimo. Con `min-height` la hoja crece si el contenido pasa
     de largo y se derrama en una página de más; el `overflow:hidden` solo
     ocultaba lo que sobraba, pero la CAJA seguía siendo más alta que el papel.
     De ahí la hoja en blanco que no había forma de quitar.
     Y en columna flexible, para que el hueco sobrante se reparta en vez de
     quedarse muerto al final: ver `flex:1` más abajo. */
  .cs-page{width:210mm;height:293mm;margin:0!important;padding:9mm 10mm 7mm;border:0;box-shadow:inset 0 0 0 1.2mm #0d0b12,inset 0 0 0 1.45mm rgba(213,173,63,.85);break-after:auto;page-break-after:auto;overflow:hidden;
    display:flex;flex-direction:column;
    /* SIN los círculos radiales de ambiente. En pantalla son un velo del 20 %
       apenas perceptible, pero los motores de PDF los rasterizan como un
       disco naranja macizo que atraviesa los paneles —que son
       semitransparentes— y se come la legibilidad. En papel, además, es
       tinta gastada en decoración. */
    background:linear-gradient(145deg,#20192a,#100d15 60%,#0b0a0f)!important}
  /* El aro decorativo se ancla en `bottom:-120px`, o sea 31,7 mm POR DEBAJO
     del borde de la hoja. `overflow:hidden` lo tapa, pero la caja sigue
     midiendo 324,6 mm de contenido en un papel de 293: medido, no supuesto.
     Chromium lo recorta sin más; a otros motores ese sobrante les basta para
     sacar una hoja más. Y en papel es un aro que no se ve: fuera. */
  .cs-page::after{display:none!important}
  /* El salto va ANTES de cada hoja a partir de la segunda, no DESPUÉS de
     cada una. Con el salto detrás, la última hoja arrastra siempre una
     página vacía: hay que acordarse de anularlo con `:last-child`, y basta
     con que el motor no aplique esa excepción —o con que alguien meta un
     elemento detrás— para que reaparezca. Poniéndolo delante, la primera
     hoja no lo lleva y la última no tiene nada que arrastrar: no hay
     excepción que recordar. */
  .cs-page + .cs-page{break-before:page;page-break-before:always}.cs-corner{width:18mm;height:18mm}.cs-corner::before{width:15mm;top:3mm;left:3mm}.cs-corner::after{height:15mm;top:3mm;left:3mm}
  .cs-masthead,.cs-chapter-head{margin-bottom:4mm;padding-bottom:3mm}.cs-branding img{width:11mm;height:11mm}.cs-branding span{font-size:9pt}.cs-branding small{font-size:5pt}.cs-level-seal{min-width:31mm;padding:2mm 4mm}.cs-level-seal strong{font-size:10pt}.cs-level-seal small,.cs-level-seal span{font-size:5pt}
  .cs-identity-grid{grid-template-columns:minmax(0,1.32fr) minmax(50mm,.68fr);gap:6mm}.cs-identity-copy{padding-top:2mm}.cs-kicker{font-size:5.5pt}.cs-identity-copy h1{font-size:31pt;margin:1.5mm 0 1mm}.cs-alias-print{display:block;font-size:8pt}.cs-alias-print span{font-size:4.5pt}.cs-vitals{margin:4mm 0;gap:1.5mm}.cs-vital{min-height:19mm;padding:2mm}.cs-vital span{font-size:4.5pt}.cs-vital strong{font-size:17pt}.cs-vital strong.cs-vital-word{font-size:8pt;margin:1.2mm 0}.cs-vital small{font-size:4.5pt}
  .cs-section-title{gap:2mm;margin-bottom:2mm}.cs-section-title h2{font-size:6.5pt}.cs-attribute-grid{gap:1.5mm}.cs-attribute{min-height:23mm;padding:2mm 1mm}.cs-attribute-code{font-size:5.5pt}.cs-attribute>strong{font-size:18pt}.cs-attribute-name{font-size:5pt}.cs-attribute small{font-size:4.2pt}.cs-portrait-stage{min-height:109mm}.cs-portrait-frame{inset:3mm 3% 11mm}.character-art{max-height:100%}.cs-portrait-plaque{bottom:2mm;padding:1.5mm}.cs-portrait-plaque span{font-size:4pt}.cs-portrait-plaque strong{font-size:6pt}
  .cs-quick-grid{gap:2mm;margin-top:4mm}.cs-panel{padding:3mm}.cs-panel--compact{min-height:31mm;padding:2.3mm}.cs-stat-list>div,.cs-equipment-list>div{padding:1mm 0}.cs-stat-list dt,.cs-equipment-list dt{font-size:5.2pt}.cs-stat-list dd{font-size:7pt}.cs-equipment-list dd{font-size:5.3pt}.cs-dice-row{gap:1mm}.cs-dice-row>div{padding:2mm .5mm}.cs-dice-row span{font-size:4pt}.cs-dice-row strong{font-size:6.2pt;white-space:nowrap;letter-spacing:-.02em}.cs-inline-note,.cs-clean-list li{font-size:5pt}.cs-empty{font-size:6pt;padding:2mm}.cs-page-footer{margin-top:3mm;padding-top:2mm;font-size:4.5pt}
  .cs-chapter-head h2{font-size:17pt}.cs-chapter-name{font-size:8pt}.cs-chapter-name img{width:9mm;height:9mm}.cs-content-grid{gap:2.5mm}.cs-content-column{gap:2.5mm}.cs-feature-list{gap:1mm}.cs-feature-list li,.cs-feature{padding:1.3mm 0}.cs-feature-list strong,.cs-feature strong{font-size:5.5pt}.cs-feature-list span,.cs-feature p{font-size:5.4pt;line-height:1.35}.cs-panel h3{margin:2mm 0 1mm;font-size:5.2pt}.cs-note-list li{font-size:5pt;padding-block:.5mm}.cs-adjustments{margin:0 0 2mm;padding:2mm;font-size:5pt}.cs-magic-list{gap:1mm}.cs-magic-list li{padding:1.4mm;font-size:5.2pt}.cs-panel--background p{min-height:9mm;font-size:6.5pt;line-height:1.45}.cs-panel--notes{min-height:76mm}.has-additional-occupations .cs-panel--notes{min-height:54mm}.cs-notes-print,.cs-notes-print.is-readable{display:block;min-height:65mm;padding:0 2mm;font-size:6pt;line-height:7mm;background-size:auto 7mm}.has-additional-occupations .cs-notes-print{min-height:43mm}.cs-panel--deeds{margin-top:2.5mm}.cs-deed-list{gap:1.3mm}.cs-deed-list li{gap:1.3mm;padding:1.3mm}.cs-deed-list strong{font-size:5.3pt}.cs-deed-list small,.cs-renown-history span,.cs-renown-history>strong{font-size:4.5pt}.cs-renown-history{margin-top:2mm;padding-top:1.5mm}.cs-authorship{margin-top:2mm;font-size:4.3pt}
  .cs-panel--mesa{margin-top:4mm}.cs-mesa-grid{gap:4mm}
  /* Pauta de 7 mm: es el alto en que cabe cómodamente una línea escrita
     a mano, el mismo que ya usa el bloque de notas de la segunda hoja. */
  .cs-lined--equipo,.cs-lined--estado{min-height:28mm}.cs-lined--sesion{min-height:42mm}
  /* Letra y renglón idénticos a los de Notas —lo que se pidió—, pero la pauta
     se redibuja en milímetros: el degradado heredado marca la raya en el píxel
     30 y en papel la baldosa mide 7 mm (26,5 px), así que la raya caía fuera y
     la zona salía sin pautar. Aquí la raya va al final de cada renglón, que es
     donde se apoya el texto escrito a mano. */
  .cs-lined{padding:0 2mm;font-size:6pt;line-height:7mm;
    background:repeating-linear-gradient(180deg,transparent 0,transparent 6.8mm,rgba(217,182,79,.32) 6.8mm,rgba(217,182,79,.32) 7mm)}
  /* ── FONDO CLARO ──
     La hoja está pensada en oscuro, pero imprimirla así gasta un cartucho por
     ficha y depende de que el navegador tenga activada la casilla «Imprimir
     fondos»: si está apagada, el texto claro sale sobre papel blanco y la hoja
     queda ilegible. Este modo invierte solo las VARIABLES de color y los
     rellenos, no la maquetación, así que las dos versiones se mantienen solas.
     El oro se oscurece hasta un tono que se lee sobre blanco. */
  .character-dossier[data-print-mode="claro"]{--cs-gold:#8a6a12;--cs-gold-bright:#6d520b;
    --cs-ink:#17141c;--cs-muted:#5a5464;--cs-accent:#8c3d10}
  .character-dossier[data-print-mode="claro"] .cs-page{background:#fff!important;
    box-shadow:inset 0 0 0 1.2mm #fff,inset 0 0 0 1.45mm rgba(138,106,18,.8)}
  .character-dossier[data-print-mode="claro"] .cs-panel,
  .character-dossier[data-print-mode="claro"] .cs-attribute,
  .character-dossier[data-print-mode="claro"] .cs-vital,
  .character-dossier[data-print-mode="claro"] .cs-dice-row>div,
  .character-dossier[data-print-mode="claro"] .cs-deed-list li,
  .character-dossier[data-print-mode="claro"] .cs-magic-list li,
  .character-dossier[data-print-mode="claro"] .cs-adjustments,
  .character-dossier[data-print-mode="claro"] .cs-portrait-stage,
  .character-dossier[data-print-mode="claro"] .cs-level-seal{background:#fff!important;
    border-color:rgba(138,106,18,.5)!important}
  .character-dossier[data-print-mode="claro"] .cs-page::before,
  .character-dossier[data-print-mode="claro"] .cs-portrait-frame{background:none!important}
  .character-dossier[data-print-mode="claro"] .cs-identity-copy h1,
  .character-dossier[data-print-mode="claro"] .cs-chapter-head h2,
  .character-dossier[data-print-mode="claro"] .cs-attribute>strong,
  .character-dossier[data-print-mode="claro"] .cs-vital strong{color:#17141c!important}
  .character-dossier[data-print-mode="claro"] .cs-lined{border-bottom-color:rgba(90,84,100,.55);
    background-image:repeating-linear-gradient(rgba(90,84,100,.45) 0 .2mm,transparent .2mm 7mm)}

  /* ── EL HUECO SOBRANTE SE REPARTE ──
     Lo que quede libre en cada hoja se lo lleva la zona de escribir a mano,
     que es lo que de verdad se agradece en una hoja impresa. Y al revés: si el
     personaje tiene muchos hechizos, muchos poderes psiónicos o muchas
     técnicas, esas listas empujan y la zona de escribir se encoge hasta su
     mínimo. El espacio se adapta al personaje en vez de estar fijado. */
  .cs-page-footer{margin-top:auto}
  .cs-panel--mesa{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .cs-mesa-print,.cs-mesa-print.is-readable{flex:1;display:flex;flex-direction:column;min-height:0}
  .cs-equipo-print,.cs-equipo-print.is-readable{display:block}
  /* Mínimos bajos a propósito: son el suelo al que se encoge la zona de
     escribir cuando el personaje trae muchas habilidades. Cuanto más bajos,
     más contenido cabe antes de que algo se recorte. */
  .cs-mesa-print>.cs-lined--sesion{flex:1;min-height:14mm}
  .cs-lined--equipo,.cs-lined--estado{min-height:18mm}
  /* Segunda hoja: la rejilla de contenido se estira y las notas absorben el
     resto de la columna. `align-items:start` lo impedía. */
  .cs-content-grid{flex:1 1 auto;align-items:stretch;min-height:0}
  .cs-content-column{min-height:0}
  .cs-content-column:last-child{display:flex;flex-direction:column}
  .cs-panel--notes{flex:1;display:flex;flex-direction:column;min-height:0}
  .cs-notes-print,.cs-notes-print.is-readable{flex:1;min-height:30mm}
  .has-additional-occupations .cs-notes-print{min-height:24mm}

  .cs-panel,.cs-attribute,.cs-vital,.cs-deed-list li{break-inside:avoid;page-break-inside:avoid}
}

/* Los números de la navegación se quedan en blanco, como el resto del menú:
   teñir uno y no el otro daba a entender que uno urge más que el otro. Lo que
   sí lleva cada uno es su `title`, para que el paréntesis diga de qué es.
   A lo que apunta el número se le da color en SU listado, que es donde
   realmente ayuda: las partidas que te tocan y los mensajes sin leer. */
.nav-cuenta{cursor:help}

/* ============================================================
   Gestión de usuarios (administración)
   ============================================================ */
.tabla-admin{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem}
.tabla-admin th,.tabla-admin td{padding:9px 10px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.08)}
.tabla-admin th{color:var(--ado-gold);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.tabla-admin small{color:var(--ado-muted)}
/* La fila suspendida se atenúa, pero NO se oculta: sigue siendo una cuenta
   que administrar, y esconderla haría creer que se ha borrado. */
.fila-suspendida{opacity:.62}
.etiqueta{display:inline-block;padding:1px 7px;border-radius:99px;font-size:.7rem;font-weight:700;border:1px solid currentColor}
.etiqueta-admin{color:var(--ado-gold)}
.etiqueta-suspendida{color:#d6534f}
.acciones-admin{display:flex;flex-wrap:wrap;gap:6px}
.inline-form{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:12px 0}
.inline-form label{display:grid;gap:4px}
.paginacion{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:720px){
  /* En móvil la tabla se lee como fichas: con cinco columnas, el desbordamiento
     horizontal deja las acciones fuera de la pantalla. */
  .tabla-admin thead{display:none}
  .tabla-admin tr{display:block;border:1px solid rgba(255,255,255,.1);border-radius:9px;margin-bottom:10px;padding:8px}
  .tabla-admin td{display:block;border:0;padding:4px 6px}
}
.editar-identidad{margin-top:6px;width:100%}
.editar-identidad>summary{color:var(--ado-muted);font-size:.8rem;cursor:pointer}
.editar-identidad>summary:hover{color:var(--ado-gold)}
.editar-identidad .inline-form{margin:8px 0 0}
/* Seis meses sin entrar. Rojo, no oculto: es una cuenta que sigue existiendo
   y sobre la que hay que decidir algo. */
.celda-inactiva{color:#d6534f}
.celda-inactiva strong{color:#d6534f}

/* --- Temas privados de los foros --------------------------------------- */
/* La etiqueta «Privado» hereda de .tag y solo cambia el color: es el mismo
   objeto visual, con otra intención. */
.tag--privado{border-color:rgba(231,88,24,.55);color:var(--ado-ember-bright)}
.panel--privado{border-color:rgba(231,88,24,.3)}
.member-list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem}
.member-list li{display:flex;align-items:center;gap:.6rem}
.member-list .avatar.mini{width:28px;height:28px}
.member-list form{margin:0 0 0 auto}
/* Cada opción en su línea y con el texto alineado junto al círculo: puestas
   en fila, el texto largo de cada una las hacía ilegibles. */
.inline-choice{display:flex;align-items:flex-start;gap:.55rem;margin:.35rem 0}
.inline-choice input{margin-top:.25rem;flex:0 0 auto}
/* Aviso de moderación: hereda de .msg y solo cambia el color. Ni verde de
   «hecho» ni rojo de «error»: es una advertencia sobre lo que estás haciendo. */
.msg.aviso{background:rgba(215,168,74,.12);border-color:rgba(215,168,74,.55);color:var(--ado-gold)}
/* Tu propia fila en la clasificación: se encuentra de un vistazo sin buscar. */
.fila-propia{background:rgba(231,88,24,.09)}

/* --- Escenas de una partida ------------------------------------------- */
/* Tarjetas y no tabla: cada escena lleva varios datos, y seis columnas en un
   móvil no se leen. La rejilla se adapta sola sin puntos de ruptura. */
.escena-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:12px 0}

/* LA TARJETA ENTERA ES PULSABLE, y sigue siendo un enlace de verdad: el del
   título se estira por encima con ::after. Nada de capturar el clic con
   JavaScript, que rompe tabular, abrir en pestaña nueva y los lectores de
   pantalla. `position:relative` es lo que le da el marco a esa capa. */
.escena-card{position:relative;cursor:pointer;border:1px solid rgba(242,236,225,.13);border-radius:11px;
  padding:14px 16px;display:flex;flex-direction:column;gap:9px;
  background:rgba(255,255,255,.02);
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
.escena-card__link::after{content:"";position:absolute;inset:0;border-radius:11px}
/* El resalte responde igual al ratón y al teclado: sin `:focus-within`, quien
   tabula no sabría en qué tarjeta está. */
.escena-card:hover,.escena-card:focus-within{border-color:rgba(231,88,24,.75);
  background:rgba(231,88,24,.1);transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(0,0,0,.4),0 0 0 1px rgba(231,88,24,.25)}
.escena-card:hover .escena-card__link,.escena-card:focus-within .escena-card__link{color:var(--ado-ember-bright)}
/* Un halo visible para quien navega con teclado, ya que el foco real lo tiene
   un enlace que ocupa toda la tarjeta. */
.escena-card:focus-within{outline:2px solid rgba(231,88,24,.55);outline-offset:2px}
.escena-card__link:focus{outline:none}
@media (prefers-reduced-motion: reduce){
  .escena-card{transition:none}
  .escena-card:hover,.escena-card:focus-within{transform:none}
}

.escena-card header{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
.escena-card h3{margin:0;font-size:1.05rem;line-height:1.3}
.escena-card__desc{margin:0;color:var(--ado-muted);font-size:.9rem}
/* Los recuentos a la izquierda y las flechas de orden a la derecha, en la misma
   línea: en su propia fila gastaban un renglón entero para dos flechas. */
.escena-card__datos{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin:0}
.escena-card__datos>div{margin:0}
.escena-card__datos dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ado-muted)}
.escena-card__datos dd{margin:0;font-weight:600}
/* Por encima del enlace estirado: si no, quedan tapados y no se pueden pulsar. */
.escena-orden{position:relative;z-index:1;margin-left:auto;display:inline-flex;gap:2px}
.escena-orden .linklike{padding:2px 6px;font-size:1rem;line-height:1}
.escena-card__pie{margin-top:auto;display:flex;align-items:center;gap:10px;
  justify-content:space-between;flex-wrap:wrap}
.escena-card__actividad{color:var(--ado-muted);font-size:.82rem}
.escena-sinleer{position:relative;z-index:1;border-color:rgba(231,88,24,.55);color:var(--ado-ember-bright)}
/* El estado se distingue por color Y por texto: solo por color no sirve a
   quien no distingue esos tonos. */
.escena-estado--abierta{border-color:rgba(46,139,87,.55);color:#7fd3a4}
.escena-estado--activa{border-color:rgba(231,88,24,.55);color:var(--ado-ember-bright)}
.escena-estado--pausa{border-color:rgba(215,168,74,.55);color:var(--ado-gold)}
.escena-estado--cerrada{border-color:rgba(242,236,225,.25);color:var(--ado-muted)}
.escena-card--cerrada{opacity:.72}
.escena-card--cerrada:hover,.escena-card--cerrada:focus-within{opacity:1}
.escenas-cerradas{margin-top:10px}
.escenas-cerradas summary{cursor:pointer;color:var(--ado-muted)}
.escena-cabecera{margin-bottom:14px}
.escena-cabecera h1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.escena-descripcion{color:var(--ado-muted);max-width:70ch}
.escenas-esperando{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.escenas-esperando li{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.escenas-esperando small{color:var(--ado-muted)}
.escena-orden{display:inline-flex;gap:4px;margin-right:8px}
.mover-escena{max-width:180px}
/* La campaña dentro de una tarjeta de partida es OTRO destino: tiene que
   quedar por encima del enlace que cubre la tarjeta entera. */
.campana-enlace{position:relative;z-index:1}
.campana-cabecera{margin-bottom:14px}
.campana-meta{color:var(--ado-muted)}
.campana-descripcion{max-width:75ch}

/* --- Columnas con prioridad en las tablas largas ----------------------- */
/* El tablón de partidas tiene diez columnas: en un móvil eso era un carrusel
   horizontal que había que arrastrar para leer una sola fila. Las secundarias
   se retiran por tamaño en vez de convertir la tabla en tarjetas — es un
   directorio para COMPARAR, y comparar en tarjetas se hace peor. */
@media (max-width:1000px){
  table.list th.col-extra,table.list td.col-extra{display:none}
}
@media (max-width:700px){
  table.list th.col-media,table.list td.col-media{display:none}
  /* Ya sin columnas de sobra, la tabla deja de necesitar el desplazamiento
     lateral y el texto puede volver a partirse en varias líneas. */
  table.list{white-space:normal}
}
/* La etiqueta de estado no se parte: «En curso» en dos líneas estiraba la
   cabecera de la tarjeta y descuadraba la rejilla. */
.escena-estado{white-space:nowrap}

/* --- Ajustes de ancho pequeño ----------------------------------------- */
/* La chuleta de formato, plegada, no debe parecer un botón: es un desplegable
   discreto encima del botón de enviar. */
.ayuda-formato{margin:6px 0 10px}
.ayuda-formato summary{cursor:pointer;color:var(--ado-muted);font-size:.9rem}

/* EL SELLO DE NIVEL SE ADAPTA A LA PALABRA.
   Tenía un ancho mínimo fijo y el texto no encogía, así que «PRINCIPIANTE»
   —el nivel más largo, y justo el que ve todo el mundo al empezar— se salía
   del hexágono. Ahora el ancho mínimo cede si no cabe y la palabra baja de
   cuerpo antes de desbordar. El hexágono se recorta con clip-path, así que
   además hace falta que el texto no llegue nunca a los picos laterales. */
.cs-level-seal{max-width:100%;min-width:0}
/* Nunca en dos líneas: el hexágono se recorta con clip-path y una segunda
   línea se sale por los picos. Si no cabe, encoge. */
.cs-level-seal strong{white-space:nowrap}
/* Solo los nombres largos encogen, y la clase la pone la vista según cuántas
   letras tenga —no el ancho de la pantalla—, así que «Experto» sigue
   viéndose grande y «Principiante» cabe. */
.cs-level-seal--largo strong{font-size:.95rem;letter-spacing:-.01em}
@media (max-width:560px){
  .cs-level-seal{padding-inline:16px}
  .cs-level-seal small{letter-spacing:.12em}
  .cs-level-seal--largo strong{font-size:.82rem}
}
/* De qué atributo salió el umbral de una tirada. Discreto: acompaña al número,
   no compite con él. */
.dice-attr{font-size:.78rem;color:var(--ado-gold);border:1px solid rgba(215,168,74,.4);
  border-radius:6px;padding:1px 6px;margin-left:6px;white-space:nowrap}

/* Los seis atributos como botones, en vez de la lista que dibuja el navegador
   y que ninguna regla puede alcanzar. Se ven siempre y se ven como el sitio. */
.atributo-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.atributo-chip{padding:5px 11px;font:600 .8rem var(--font-ui);letter-spacing:.04em;
  color:var(--ado-muted);background:rgba(255,255,255,.03);
  border:1px solid rgba(242,236,225,.16);border-radius:999px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.atributo-chip:hover{color:var(--ado-ivory);border-color:rgba(215,168,74,.55)}
.atributo-chip:focus-visible{outline:2px solid var(--ado-ember);outline-offset:2px}
.atributo-chip.is-activo{color:var(--ado-gold);border-color:rgba(215,168,74,.75);
  background:rgba(215,168,74,.12)}
/* El campo del atributo con su etiqueta y sus pastillas: un solo bloque, para
   que la rejilla de dos columnas lo trate como un hijo y no como tres. */
.campo-atributo{display:flex;flex-direction:column}
.campo-atributo label{margin:0}

/* Campos uno debajo de otro, cada uno a todo el ancho. */
.form-apilado{display:flex;flex-direction:column;gap:14px}
.form-apilado>label,.form-apilado>.campo-atributo{margin:0}
/* Con el campo a todo el ancho, los seis atributos caben en una línea. */
.campo-atributo .atributo-chips{flex-wrap:wrap}