/* ============================================================
   DORENOR — hoja de estilos (paleta Jade, era de preparación)
   Mobile-first: base = móvil · 760px = tablet · 1040px = escritorio.

   s.130 — migración desde Noria Kingdom. Reglas de la guía de marca v1:
   · El DORADO significa Nexo (conexión). No es decoración: cada aparición
     señala conexión, comunidad o el Nexo Central.
   · NINGÚN AZUL. Los azules están reservados para la Era 3 (el invierno);
     por eso salieron el navy y el cyan de la versión anterior.
   · Los violetas son de la Era 2 (Crepúsculo): tampoco se usan todavía.
   · El header se queda en jade profundo en LOS DOS temas, para que la marca
     no parpadee al cambiar de tema.

   Los nombres de las variables se conservaron a propósito (--navy, --cyan…)
   para no reescribir 1300 líneas de reglas: lo que cambió son los valores.
   Lo que era "navy" hoy es el fondo, y lo que era "cyan" hoy es el acento.
   ============================================================ */

:root {
  /* tipografía — guía de marca v2.0 §3: Teko (logotipo/hero), Rajdhani
     (títulos de panel y botones), Roboto (cuerpo y párrafos largos de la web).
     --mono se conserva (IBM Plex Mono): la guía no la reemplaza, es la que ya
     usa el sitio para cifras/HUD y no es una de las tres fuentes de marca. */
  --display: 'Teko', system-ui, sans-serif;     /* logotipo y títulos gigantes */
  --heading: 'Rajdhani', system-ui, sans-serif; /* títulos de panel, botones */
  --sans:    'Roboto', system-ui, sans-serif;   /* cuerpo */
  --mono:    'IBM Plex Mono', monospace;        /* números y datos */

  /* botón principal (§6.1): fondo/texto FIJOS, no siguen el tema — el mismo
     botón cian se ve igual en modo oscuro y en modo claro (§2.3). */
  --btn-bg:          #00E5FF;
  --btn-bg-rgb:      0, 229, 255;
  --btn-text:        #1B2230;
  --btn-hover:       #5CF0FF;
  --btn-press:       #00B8CC;
  --btn-disabled-bg: #4F5D75;
  --btn-disabled-tx: #8A96AD;

  /* único rojo de estado (§2.5, s.104), fijo — no es un color de marca */
  --danger:     #D9533B;
  --danger-rgb: 217, 83, 59;

  /* el header no cambia con el tema (regla de marca) */
  --hd-bg:    rgba(27, 34, 48, 0.94);
  --hd-text:  #E8EAF0;
  --hd-soft:  #8A96AD;
  --hd-line:  rgba(232, 234, 240, 0.12);
  --hd-accent: #00E5FF;   /* el acento del header, también fijo (enlace activo) */

  /* ── TEMA OSCURO (el de por defecto si el sistema no dice otra cosa) ──
     Guía de marca v2.0 §6.1 + §2.1: Piedra profunda / Gris acero / Hueso /
     Cian eléctrico. El dorado sigue exclusivo de Nexo y moneda (§2.5). */
  --navy:      #1B2230;   /* piedra profunda — fondo */
  --surface:   #4F5D75;   /* gris acero — tarjetas y cajas */
  --surface-2: #3A4658;
  --bone:      #E8EAF0;   /* hueso — texto principal */
  /* s.153b (decisión de Josue) — DORADO UNIVERSAL DE MARCA: #FFD700, el mismo
     valor en los tres bloques de tema de este archivo (ya no hay un dorado
     "oscuro" distinto para el tema claro). Sigue exclusivo de Nexo/moneda. */
  --gold:      #FFD700;   /* dorado — solo Nexo/moneda */
  --cyan:      #00E5FF;   /* cian eléctrico — ACENTO exclusivo */
  --violet:    #8E6BD8;   /* violeta Transporte, sin cambio por tema */
  --soft:      #B3BCCB;   /* acero claro + (texto secundario) */
  --muted:     #8A96AD;   /* acero claro — texto apagado, 5.4:1 sobre piedra profunda */
  --box:       #5DA35D;   /* verde claro — categoría "carga", no forma parte del acento de marca */
  --line:      rgba(232, 234, 240, 0.10);

  /* canales sueltos: los usan los rgba() con transparencia */
  --navy-rgb:   27, 34, 48;
  --bone-rgb:   232, 234, 240;
  --gold-rgb:   255, 215, 0;
  --cyan-rgb:   0, 229, 255;
  --violet-rgb: 142, 107, 216;
  --muted-rgb:  138, 150, 173;

  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ── TEMA CLARO ──────────────────────────────────────────────────────────
   El que pide la guía para web: blanco jade de fondo, tinta de texto y el
   dorado oscuro #C99722, que es el legible sobre claro. El acento de lectura
   baja a jade medio porque la menta no contrasta contra el blanco. */
:root[data-theme="light"] {
  --navy:      #EEF1F5;
  --surface:   #FFFFFF;
  --surface-2: #E4E8EE;
  --bone:      #1B2230;
  --gold:      #FFD700;   /* s.153b — dorado universal de marca (ya no un tono distinto por tema) */
  --cyan:      #00707C;
  --violet:    #8E6BD8;
  --soft:      #4F5D75;
  --muted:     #5F6C85;   /* corregido por §2.3: el #8A96AD del oscuro da 2.4:1 sobre claro */
  --box:       #1A531A;
  --line:      #D7DCE4;

  --navy-rgb:   238, 241, 245;
  --bone-rgb:   27, 34, 48;
  --gold-rgb:   255, 215, 0;
  --cyan-rgb:   0, 112, 124;
  --violet-rgb: 142, 107, 216;
  --muted-rgb:  95, 108, 133;

  --shadow: 0 10px 28px rgba(27, 34, 48, 0.10);
  color-scheme: light;
}

/* Sin elección guardada, manda el modo del sistema del visitante.
   `:root:not([data-theme])` para que el botón de tema siempre gane. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --navy:      #EEF1F5;
    --surface:   #FFFFFF;
    --surface-2: #E4E8EE;
    --bone:      #1B2230;
    --gold:      #FFD700;   /* s.153b — dorado universal de marca (ya no un tono distinto por tema) */
    --cyan:      #00707C;
    --violet:    #8E6BD8;
    --soft:      #4F5D75;
    --muted:     #5F6C85;
    --box:       #1A531A;
    --line:      #D7DCE4;

    --navy-rgb:   238, 241, 245;
    --bone-rgb:   27, 34, 48;
    --gold-rgb:   255, 215, 0;
    --cyan-rgb:   0, 112, 124;
    --violet-rgb: 142, 107, 216;
    --muted-rgb:  95, 108, 133;

    --shadow: 0 10px 28px rgba(27, 34, 48, 0.10);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--navy);
  color: var(--bone);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--gold); color: var(--navy); }

a { color: inherit; }
button { font-family: inherit; }
main { flex: 1; padding-top: 60px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.mono { font-family: var(--mono); }

/* ---------- animaciones ---------- */
@keyframes ihPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--bone-rgb), 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(var(--bone-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--bone-rgb), 0); }
}
@keyframes ihGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.35); }
  50% { box-shadow: 0 0 34px rgba(var(--gold-rgb), 0.6); }
}
@keyframes ihDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- gema (rombo) ---------- */
.gem {
  display: inline-block;
  width: 11px; height: 11px;
  transform: rotate(45deg);
}
.gem.gold { background: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5); }
.gem.violet { background: var(--violet); box-shadow: 0 0 22px rgba(var(--violet-rgb), 0.8); }

/* ============================================================
   HEADER
   ============================================================ */
.hd {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--hd-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hd-inner {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo .gem { width: 11px; height: 11px; }
.logo-txt { font-weight: 700; font-size: 17px; letter-spacing: 2px; color: var(--bone); }
.logo-txt b { color: var(--gold); font-weight: 700; }

.nav { display: none; gap: 4px; margin-left: auto; align-items: center; }
.nav a {
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--soft);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.nav a:hover { color: var(--cyan); }
.nav a.active { color: var(--cyan); border-bottom-color: var(--cyan); }

.langs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  align-items: center;
  border: 1px solid rgba(var(--bone-rgb), 0.15);
  border-radius: 6px;
  padding: 2px;
}
.lang-btn {
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--soft);
  background: transparent;
  border: none;
  border-radius: 4px;
}
.lang-btn.active { color: var(--navy); background: var(--cyan); }

.burger {
  display: block;
  cursor: pointer;
  font-size: 22px;
  color: var(--bone);
  background: none;
  border: none;
  padding: 4px 6px;
  line-height: 1;
}

/* menú móvil */
.mmenu {
  position: fixed;
  top: 60px; left: 0; right: 0; bottom: 0;
  z-index: 49;
  background: #16241E;
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  gap: 4px;
}
.mmenu[hidden] { display: none; }
.mmenu a {
  padding: 16px 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--soft);
  border-bottom: 1px solid rgba(var(--bone-rgb), 0.07);
  text-decoration: none;
}
.mmenu a.active { color: var(--cyan); }

@media (min-width: 1040px) {
  .nav { display: flex; }
  .burger { display: none; }
  .langs { margin-left: 8px; }
}

/* ============================================================
   HOME
   ============================================================ */
.hero {
  padding: 64px 20px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: url('../img/marca/dorenor-refugio-16x9.jpg') center/cover no-repeat;
  /* El hero vive siempre sobre la foto oscurecida del refugio (overlay de
     abajo): el texto no sigue el tema claro/oscuro del sitio, igual que el
     header (--hd-*, más arriba). */
  --bone: #E8EAF0;
  --bone-rgb: 232, 234, 240;
  --soft: #8A96AD;
  --muted: #8A96AD;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  /* Overlay de marca §6.1: más oscuro abajo, donde vive el texto, para que
     la puerta cian del refugio no compita con el párrafo (ajuste s.143). */
  background: linear-gradient(180deg, rgba(27, 34, 48, .45) 0%, rgba(27, 34, 48, .55) 45%, rgba(27, 34, 48, .88) 100%);
  pointer-events: none;
}
.hero .hero-lema, .hero .tagline, .hero .cta-sub, .hero .kicker {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 18px rgba(27, 34, 48, .9);
}
.hero .tagline { color: #F4F6FA; }
.hero-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--violet);
  text-transform: uppercase;
}
.hero-logo-wrap { margin: 0; line-height: 0; }
.hero-logo {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  /* PNG con transparencia (s.143): el arte flota sobre la escena, sin máscara. */
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55));
}
.logo-d { width: 28px; height: 28px; margin-right: 8px; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.hero h1 {
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 4px;
  line-height: 1.05;
}
.hero h1 b { color: var(--gold); font-weight: 700; }
.tagline {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--soft);
  max-width: 460px;
  text-wrap: pretty;
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 10px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.5px;
  padding: 14px 36px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
}
.cta:hover { background: var(--btn-hover); transform: translateY(-1px); }
.cta:active { background: var(--btn-press); }
.cta:focus-visible { outline: 2px solid var(--btn-bg); outline-offset: 2px; }
.cta-sub { font-family: var(--mono); font-size: 12px; color: var(--muted); }
/* Dos tiendas (s.141): Android + iPhone lado a lado; el de iPhone es de contorno y, mientras
   no haya link de TestFlight, queda apagado con la etiqueta "pronto".
   Regla del cian (§1): solo el botón Android (arriba) es el botón principal
   cian de esta pantalla; el de iPhone es SECUNDARIO de contorno (§6.1). */
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta-row .cta { margin-top: 10px; }
.cta-ios { background: transparent; color: var(--bone); border: 1.5px solid var(--soft); }
.cta-ios:hover { border-color: var(--bone); color: var(--bone); background: rgba(var(--bone-rgb), 0.06); }
.cta-soon { opacity: 0.55; cursor: default; pointer-events: none; }
.cta-soon small { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0; margin-left: 6px; opacity: 0.9; }

.status-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgba(var(--bone-rgb), 0.25);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 13px;
}
/* El estado "en línea" NUNCA es cian (§2.1: el cian no marca estados del
   juego/servidor). Se marca con un borde Hueso pulsante, sin relleno. */
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--bone);
  animation: ihPulse 2s infinite;
}
.status-dot.off { border-color: var(--muted); background: transparent; animation: none; }
.status-players { color: var(--bone); font-weight: 600; }

.counter-band {
  border-top: 1px solid rgba(var(--bone-rgb), 0.07);
  border-bottom: 1px solid rgba(var(--bone-rgb), 0.07);
  background: rgba(var(--bone-rgb), 0.02);
}
.counter-inner {
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.counter-num {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.counter-label { font-size: 14px; color: var(--soft); letter-spacing: 0.5px; }
.counter-upd { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* s.130 — BUG HEREDADO: esto era `padding: 48px 0 8px`, y como casi todas las
   secciones son `class="section wrap"`, el atajo de 3 valores le ponía 0 a los
   lados y borraba el padding lateral de .wrap. En escritorio no se notaba
   porque el max-width de 1080 deja aire por el centrado; en tablet y móvil el
   texto tocaba el borde de la pantalla. `padding-block` solo toca arriba/abajo. */
.section { padding-block: 48px 8px; }
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.sec-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 1px; }
.link-cyan {
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  cursor: pointer;
}
.link-cyan:hover { text-decoration: underline; }

.news-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.shots {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
}
.shot {
  flex-shrink: 0;
  width: 176px; height: 312px;
  border-radius: 14px;
  border: 1px solid rgba(var(--bone-rgb), 0.12);
  background: repeating-linear-gradient(135deg, rgba(var(--violet-rgb), 0.08) 0px, rgba(var(--violet-rgb), 0.08) 10px, rgba(var(--navy-rgb), 0) 10px, rgba(var(--navy-rgb), 0) 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 0 12px;
}

@media (min-width: 760px) {
  .hero { padding: 110px 24px 70px; }
  .hero h1 { font-size: 72px; }
  .tagline { font-size: 18px; }
  .counter-num { font-size: 44px; }
  .news-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============================================================
   TARJETAS / NOTICIAS
   ============================================================ */
.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(var(--bone-rgb), 0.035);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  text-decoration: none;
  cursor: pointer;
}
.card:hover { border-color: rgba(var(--cyan-rgb), 0.45); }
.card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.date { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tag {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--violet);
  border: 1px solid rgba(var(--violet-rgb), 0.4);
  border-radius: 4px;
  padding: 2px 7px;
}
.card-title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--bone); }
.excerpt { font-size: 14px; line-height: 1.6; color: var(--soft); }
.missing-note { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.page-head { padding-top: 40px; }
.page-head h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: 1px; }
.page-sub { margin: 0; color: var(--muted); font-size: 14px; }

.news-list { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; padding-bottom: 64px; }
.news-list .card { padding: 20px; }
.news-list .card-title { font-size: 19px; }

/* post individual */
.post { max-width: 680px; margin: 0 auto; padding: 40px 20px 64px; }
.post h1 {
  margin: 18px 0 10px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-wrap: pretty;
}
.missing-box {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px dashed rgba(var(--muted-rgb), 0.4);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.md {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 22px;
  font-size: 16px;
}
.md p { margin: 0 0 16px; color: var(--soft); line-height: 1.75; }
.md h2 { font-size: 20px; font-weight: 700; color: var(--bone); margin: 26px 0 10px; letter-spacing: 0.5px; }
.md ul { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.md li { color: var(--soft); line-height: 1.65; }
.md strong { color: var(--bone); font-weight: 600; }
.md em { color: var(--bone); }

@media (min-width: 760px) {
  .post h1 { font-size: 34px; }
}

/* ============================================================
   HISCORES
   ============================================================ */
.hs-page { max-width: 860px; margin: 0 auto; padding: 40px 16px 64px; }
.hs-hint { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.hs-hint-desktop { display: none; }

.hs-titlebar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; }
.hs-bar {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
/* PESTAÑAS QUE ENVUELVEN, NO QUE SE DESLIZAN (s.86)
   Vale para las DOS barras del sitio —hiscores y wiki—: una sola regla en vez
   de dos, porque es una sola decisión de producto.

   Antes esta barra deslizaba en horizontal (overflow-x:auto). Medido a 430 px:
   en hiscores quedaban fuera de cuadro "Objetos legendarios" y "Minijuego
   (Talar)"; en la wiki, "Calculadoras". Se llegaba deslizando, pero nadie
   desliza lo que no sabe que está ahí — el jugador de teléfono, que es la
   mayoría, no se enteraba de que esas secciones existían. Envolviendo, se ven
   todas de una sola mirada; desde 760 px entran en un renglón y el envoltorio
   ni se nota.

   El margin-left negativo iguala al padding lateral de .hs-tab: así la primera
   pestaña de CADA línea arranca a plomo con el título de la página, en vez de
   quedar corrida (y sin sacarle el padding solo a la primera, que dejaba la
   segunda línea desalineada respecto de la de arriba). */
.hs-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  row-gap: 2px;
  flex: 1;
  min-width: 0;
  margin-left: -12px;
}
.hs-tab {
  cursor: pointer;
  padding: 8px 12px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--soft);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
}
.hs-tab:hover { color: var(--cyan); }
.hs-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }

.hs-subbar { margin-top: 12px; display: flex; }
.hs-toggle { display: inline-flex; gap: 2px; background: rgba(var(--bone-rgb), 0.04); border: 1px solid rgba(var(--bone-rgb), 0.1); border-radius: 8px; padding: 3px; }
.hs-toggle-btn { cursor: pointer; padding: 6px 12px; border: none; background: none; border-radius: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.hs-toggle-btn:hover { color: var(--soft); }
.hs-toggle-btn.active { color: var(--navy); background: var(--cyan); }
.hs-search { position: relative; flex-shrink: 0; width: 100%; margin-top: 12px; }
.hs-search .lens {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}
.hs-search input {
  width: 100%;
  background: rgba(var(--bone-rgb), 0.04);
  border: 1px solid rgba(var(--bone-rgb), 0.15);
  border-radius: 8px;
  padding: 9px 12px 9px 32px;
  color: var(--bone);
  font-family: var(--mono);
  font-size: 13px;
  outline: none;
}
.hs-search input:focus { border-color: var(--cyan); }
.hs-search input::placeholder { color: var(--muted); }

.hs-table {
  margin-top: 16px;
  border: 1px solid rgba(var(--bone-rgb), 0.1);
  border-radius: 10px;
  overflow: hidden;
}
.hs-grid {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 11px 14px;
}
.hs-head {
  background: rgba(var(--violet-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--bone-rgb), 0.1);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--soft);
  padding-top: 12px;
  padding-bottom: 12px;
}
.hs-head .hs-num { text-align: right; }
.hs-head .col-axes { color: var(--gold); }
.hs-row { border-bottom: 1px solid rgba(var(--bone-rgb), 0.05); cursor: pointer; }
.hs-row.no-expand { cursor: default; }
.hs-row.top3 { background: rgba(var(--gold-rgb), 0.05); }
.hs-row.even { background: rgba(var(--bone-rgb), 0.02); }
.hs-rank { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--muted); }
.top3 .hs-rank { color: var(--gold); }
.hs-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top3 .hs-name { color: var(--bone); }
.hs-num {
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.hs-row .hs-num:first-of-type { color: var(--bone); }
.col-axes { text-align: right; }
.axes-val { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--gold); white-space: nowrap; }
.axes-val .gem { width: 8px; height: 8px; margin-right: 6px; box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.6); }
.axes-none { font-family: var(--mono); font-size: 13px; color: #3d4d63; }

.xp-expand {
  padding: 8px 14px 12px;
  background: rgba(var(--cyan-rgb), 0.05);
  border-bottom: 1px solid rgba(var(--bone-rgb), 0.05);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--soft);
}
.xp-expand b { color: var(--cyan); font-weight: 600; }
.xp-expand[hidden] { display: none; }

.hs-empty {
  padding: 44px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.hs-empty .gem { opacity: 0.7; }
.hs-empty-msg { font-size: 15px; color: var(--soft); }
.hs-empty-q { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.hs-foot { margin: 14px 2px 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* paginación */
.hs-pager { margin-top: 16px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.hs-page-btn {
  cursor: pointer;
  min-width: 34px;
  text-align: center;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--soft);
  background: transparent;
  border: 1px solid rgba(var(--bone-rgb), 0.15);
  border-radius: 7px;
}
.hs-page-btn.active { color: var(--navy); background: var(--cyan); border-color: var(--cyan); }
.hs-nav-btn {
  cursor: pointer;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--soft);
  border: 1px solid rgba(var(--bone-rgb), 0.15);
  border-radius: 7px;
  background: none;
}
.hs-nav-btn[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.hs-page-of { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 0 4px; }

@media (min-width: 760px) {
  .hs-search { width: 260px; margin-top: 6px; }
  .hs-bar { justify-content: space-between; }
  .hs-row { cursor: default; }
  .xp-expand { display: none !important; }
  .hs-hint-mobile { display: none; }
}

/* ============================================================
   WIKI
   ============================================================ */
.wiki-page { padding-top: 40px; padding-bottom: 64px; }
.cat-block { margin-bottom: 40px; }
.cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cat-head .gem { width: 10px; height: 10px; box-shadow: none; }
.cat-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cat-count { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.wiki-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.item-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(var(--bone-rgb), 0.035);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  text-decoration: none;
  cursor: pointer;
}
.item-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, rgba(var(--bone-rgb), 0.04) 0px, rgba(var(--bone-rgb), 0.04) 8px, rgba(var(--navy-rgb), 0) 8px, rgba(var(--navy-rgb), 0) 16px);
  border: 1px solid rgba(var(--bone-rgb), 0.07);
  overflow: hidden;
}
.ph-initial { font-size: 34px; font-weight: 700; font-family: var(--mono); }
.item-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--navy);
}
.item-name { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--bone); }
.gate { font-family: var(--mono); font-size: 11px; color: var(--cyan); }
/* "Se vende al NPC: Sí/No" (s.76) — misma tipografía que .gate, con el valor
   destacado en verde/apagado según la respuesta. */
.sellable { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.sellable b { font-weight: 700; }
.sellable b.yes { color: var(--gold); }
.sellable b.no { color: var(--muted); }
.item-detail .sellable { font-size: 13px; }
.stat-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid rgba(var(--bone-rgb), 0.07);
  padding-top: 8px;
}
.stat-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.stat-line .k { color: var(--muted); }
.stat-line .v { font-family: var(--mono); color: var(--bone); font-variant-numeric: tabular-nums; }

/* colores por categoría */
.cat-axe { color: var(--gold); }
.cat-speed { color: var(--cyan); }
.cat-cargo { color: var(--violet); }
.cat-box { color: var(--box); }
.bg-axe { background: var(--gold); }
.bg-speed { background: var(--cyan); }
.bg-cargo { background: var(--violet); }
.bg-box { background: var(--box); }
.item-card:hover.hov-axe { border-color: var(--gold); }
.item-card:hover.hov-speed { border-color: var(--cyan); }
.item-card:hover.hov-cargo { border-color: var(--violet); }
.item-card:hover.hov-box { border-color: var(--box); }

/* ítem legendario */
.legendary-badge {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  /* s.153b — texto FIJO (no var(--navy), que en tema claro es un color CLARO
     y da un contraste ilegible sobre dorado): #1B2230 sobre #FFD700 da ~11:1
     en los dos temas. */
  color: #1B2230;
  background: var(--gold);
  border-radius: 4px;
  padding: 2px 7px;
}
.item-detail .legendary-badge { font-size: 11px; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 5px; }

/* detalle de ítem */
.item-detail { max-width: 680px; margin: 0 auto; padding: 40px 20px 64px; }
.item-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 22px;
  align-items: start;
}
.item-detail .item-img { border-radius: 12px; border-color: rgba(var(--bone-rgb), 0.1); }
.item-detail .ph-initial { font-size: 64px; }
.item-cat {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.item-detail h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15; }
.item-detail .gate { font-size: 13px; }
.item-detail-info { display: flex; flex-direction: column; gap: 12px; }
.stat-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(var(--bone-rgb), 0.1);
  border-radius: 10px;
  padding: 14px;
}
.stat-box .stat-line { font-size: 14px; }
.stat-box .v { font-weight: 600; }
.howto-box {
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 10px;
  padding: 14px;
  background: rgba(var(--gold-rgb), 0.04);
}
.howto-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.howto-text { font-size: 14px; line-height: 1.6; color: var(--soft); }

@media (min-width: 760px) {
  .wiki-grid { grid-template-columns: repeat(4, 1fr); }
  .item-detail-grid { grid-template-columns: 260px 1fr; }
}

/* ============================================================
   PACK PRESENCIA
   ============================================================ */
.pack-page { max-width: 680px; margin: 0 auto; padding: 48px 20px 64px; }
.pack-kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--violet);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pack-page h1 { margin: 0 0 8px; font-size: 32px; font-weight: 700; letter-spacing: 0.5px; }
/* PLANES (s.86) — hoy hay uno solo y se ve igual que cuando el precio era una
   línea suelta. La fila es flex y envuelve: el día que se sume el plan anual
   (ver PACK_PLANS en js/app.js) los dos precios se acomodan al lado en pantalla
   ancha y uno debajo del otro en teléfono, sin tocar este bloque. */
.pack-plans { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-bottom: 24px; }
.pack-plan { display: flex; flex-direction: column; }
.pack-price {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
}
.pack-plan-note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 2px; }
.pack-card {
  display: flex;
  gap: 16px;
  /* s.86 — centrado: la tarjeta pasó de dos párrafos a la frase-tesis
     ("es presencia, no poder"), y alineada arriba dejaba al fantasma solo
     contra un vacío en pantalla ancha. */
  align-items: center;
  background: rgba(var(--bone-rgb), 0.035);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.ghost {
  flex-shrink: 0;
  width: 52px; height: 72px;
  border-radius: 26px 26px 8px 8px;
  background: rgba(var(--violet-rgb), 0.25);
  border: 1px solid rgba(var(--violet-rgb), 0.6);
  animation: ihDrift 3.5s ease-in-out infinite;
  opacity: 0.85;
}
.pack-card p { margin: 0 0 10px; font-size: 16px; line-height: 1.65; }
.pack-card p:last-child { margin: 0; font-size: 14px; color: var(--soft); }
/* "LO QUE INCLUYE" (s.86) — espejo deliberado de .not-box, que ya está abajo:
   misma caja, misma lista, misma tipografía. Solo cambia el color y la marca
   (cian y ✓ para lo que sí; dorado y ✕ para la advertencia de lo que no).
   Reusar una forma que el jugador ya conoce de esta misma página vale más que
   inventar un bloque nuevo para decir lo contrario. */
.inc-box {
  margin-top: 22px;
  border: 1px solid rgba(var(--cyan-rgb), 0.35);
  border-radius: 12px;
  padding: 22px;
  background: rgba(var(--cyan-rgb), 0.04);
}
.inc-box h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--cyan);
  text-transform: uppercase;
}
.inc-item { display: flex; gap: 12px; align-items: baseline; }
.inc-item .tick { font-family: var(--mono); font-weight: 600; color: var(--cyan); flex-shrink: 0; }
.inc-item span:last-child { font-size: 15px; line-height: 1.5; color: var(--soft); }
.inc-item b { color: var(--bone); font-weight: 600; }

/* CAMBIO v2: el dorado es exclusivo de Nexo/moneda (§2.5) — "lo que NO
   incluye" pasa al rojo de estado, que es lo que este bloque es en realidad
   (una advertencia), no una superficie de marca. */
.not-box {
  margin-top: 22px;
  border: 1px solid rgba(var(--danger-rgb), 0.45);
  border-radius: 12px;
  padding: 22px;
  background: rgba(var(--danger-rgb), 0.04);
}
.not-box h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--danger);
  text-transform: uppercase;
}
.not-list { display: flex; flex-direction: column; gap: 10px; }
.not-item { display: flex; gap: 12px; align-items: baseline; }
.not-item .x { font-family: var(--mono); font-weight: 600; color: var(--danger); flex-shrink: 0; }
.not-item span:last-child { font-size: 15px; line-height: 1.5; }
.pillar { margin: 16px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--soft); }

/* ============================================================
   NOVANEXUS
   ============================================================ */
.nova {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 40px 20px;
}
.nova::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 45% at 50% 55%, rgba(var(--violet-rgb), 0.22), rgba(var(--navy-rgb), 0) 70%);
  pointer-events: none;
}
.nova-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 560px;
}
.nova-inner .gem { width: 14px; height: 14px; animation: ihDrift 4s ease-in-out infinite; }
.nova h1 {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--violet);
  line-height: 1;
}
.nova-soon {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--gold);
  text-transform: uppercase;
}
.nova p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--soft); text-wrap: pretty; }
.nova-hint {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px dashed rgba(var(--muted-rgb), 0.4);
  border-radius: 6px;
  padding: 8px 14px;
}
@media (min-width: 760px) {
  .nova h1 { font-size: 64px; letter-spacing: 14px; }
}

/* ============================================================
   LEGALES
   ============================================================ */
.legal-page { max-width: 680px; margin: 0 auto; padding: 48px 20px 64px; }
.legal-page h1 { margin: 18px 0 16px; font-size: 28px; font-weight: 700; }
.legal-page p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--soft); }
.legal-ph {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px dashed rgba(var(--muted-rgb), 0.4);
  border-radius: 6px;
  padding: 10px 14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ft {
  border-top: 1px solid var(--line);
  background: rgba(var(--bone-rgb), 0.02);
  margin-top: auto;
}
.ft-grid {
  padding: 36px 20px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.ft-brand { display: flex; flex-direction: column; gap: 8px; }
.ft-logo { display: flex; align-items: center; gap: 8px; }
.ft-logo .gem { width: 9px; height: 9px; box-shadow: none; }
.ft-logo span { font-weight: 700; font-size: 15px; letter-spacing: 2px; }
.ft-logo b { color: var(--gold); font-weight: 700; }
.ft-tag { font-size: 13px; color: var(--muted); line-height: 1.5; }
.ft-col { display: flex; flex-direction: column; gap: 8px; }
.ft-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.ft-col a { font-size: 14px; color: var(--soft); text-decoration: none; cursor: pointer; }
.ft-col a:hover { color: var(--cyan); }
.socials { display: flex; gap: 10px; }
.social {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(var(--bone-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--soft);
  cursor: pointer;
}
.social:hover { border-color: var(--cyan); color: var(--cyan); }
.ft-bottom {
  border-top: 1px solid rgba(var(--bone-rgb), 0.06);
  padding: 14px 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
@media (min-width: 760px) {
  .ft-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* botón volver */
.back-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  cursor: pointer;
}
.back-link:hover { text-decoration: underline; }

/* ============================================================
   ESTADO DE ERROR DE API (nunca pantalla rota)
   ============================================================ */
.api-error {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 18px 0; padding: 18px 20px;
  border: 1px solid rgba(var(--bone-rgb), 0.12);
  border-radius: 12px;
  background: rgba(var(--bone-rgb), 0.03);
  font-family: var(--mono); font-size: 13px; color: var(--soft);
}
.api-error .hs-nav-btn { margin-left: auto; }
.wiki-note {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  letter-spacing: 0.3px;
}

/* Buscador de la wiki (s.150) — mismo look que .hs-search de hiscores, con el
   panel de resultados encima del resto del contenido (no empuja el layout). */
.wiki-search { max-width: 420px; margin-top: 4px; margin-bottom: 10px; }
.wiki-search-results {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  z-index: 20;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--navy);
  border: 1px solid rgba(var(--bone-rgb), 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.wiki-search-list { list-style: none; margin: 0; padding: 4px; }
.wiki-search-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--bone);
}
.wiki-search-item:hover, .wiki-search-item:focus { background: rgba(var(--cyan-rgb), 0.12); outline: none; }
.wiki-search-name { font-size: 13px; font-weight: 600; }
.wiki-search-sec { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.wiki-search-empty {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  padding: 10px 12px; margin: 0;
}
@keyframes wikiSearchHit {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 0 0 2px var(--cyan); }
}
.item-card.wiki-search-hit { animation: wikiSearchHit 2s ease; }

/* ============================================================
   HOME — NOVEDADES + CÓMO FUNCIONA (s.75)
   ============================================================ */
.feat-kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 8px;
}
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.feat-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(var(--bone-rgb), 0.035);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
}
.feat-card .gem { align-self: flex-start; }
.feat-card h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0.5px; }
.feat-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--soft); }

/* CAMBIO v2: ya no es un panel cian — el cian de marca es relleno exclusivo
   del botón principal y el resplandor de las grietas (§1); esta caja informativa
   pasa a un panel neutro, igual que .card. */
.afk-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(var(--bone-rgb), 0.035);
  padding: 20px;
}
.afk-box p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--soft); }

@media (min-width: 760px) {
  .feat-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ============================================================
   NOTICIAS — PORTADA Y COMPARTIR (s.75)
   ============================================================ */
.card-cover, .post-cover {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(var(--bone-rgb), 0.04);
  border: 1px solid var(--line);
}
.card-cover img, .post-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.post-cover { margin: 18px 0 0; border-radius: 12px; }
.post-share { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ============================================================
   WIKI — SECCIONES, TABLAS Y CALCULADORA (s.75)
   Mobile-first: las tablas scrollean en horizontal si no entran.
   ============================================================ */
/* SEGUNDO NIVEL DE NAVEGACIÓN (s.86) — la wiki pasó de una barra plana a
   madre + sub-secciones. Reusa .hs-bar/.hs-tabs a propósito para heredar toda
   la maquinaria de la barra de hiscores; lo único que cambia es el PESO visual:
   más chica, más liviana y con el subrayado fino, para que se lea como hija de
   la barra de arriba y no como una segunda barra madre. */
.wiki-subbar { margin-top: 0; border-top: 1px solid rgba(var(--bone-rgb), 0.08); }
.hs-tab-sub {
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--muted);
}
.hs-tab-sub.active { border-bottom-width: 1px; }

/* En TELÉFONO las pestañas madre de la wiki van un punto más compactas que las
   de hiscores: son cinco y con nombres largos, y ese par de píxeles decide si
   entran en dos líneas o en tres. Desde 760 px vuelven al padding común del
   sitio. El margin-left negativo acompaña siempre al padding — ver la nota
   larga en .hs-tabs sobre por qué existe. */
.wiki-bar .hs-tabs    { margin-left: -10px; }
.wiki-bar .hs-tab     { padding: 8px 10px; }
/* La sub-barra usa .hs-tab-sub (padding lateral 10) en los tres tamaños. */
.wiki-subbar .hs-tabs { margin-left: -10px; }
@media (min-width: 760px) {
  .wiki-bar .hs-tabs { margin-left: -12px; }
  .wiki-bar .hs-tab  { padding: 8px 12px; }
}

.wiki-sec { margin-top: 22px; padding-bottom: 24px; }
.sec-note { margin: 0 0 16px; }
.sub-title {
  margin: 30px 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--soft);
}

.nk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
.nk-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(var(--bone-rgb), 0.1);
  border-radius: 10px;
  overflow: hidden;
}
.nk-table th, .nk-table td { padding: 10px 12px; text-align: left; white-space: nowrap; }
.nk-table thead th {
  background: rgba(var(--violet-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--bone-rgb), 0.1);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--soft);
}
.nk-table tbody tr { border-bottom: 1px solid rgba(var(--bone-rgb), 0.05); }
.nk-table tbody tr:nth-child(even) { background: rgba(var(--bone-rgb), 0.02); }
.nk-table tbody th {
  font-size: 14px;
  font-weight: 600;
  color: var(--bone);
}
/* celda con miniatura del ítem (no se usa :has() a propósito: WebViews viejas) */
.cell-item { display: flex; align-items: center; gap: 10px; }
.cell-item .item-img { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 6px; }
.cell-item .ph-initial { font-size: 14px; }
/* Arte conceptual del árbol en la tabla de tiers (s.83). Variante de .cell-item
   con la miniatura más grande: acá la imagen ES el contenido de la celda, no un
   adorno al lado de un nombre largo. Un tier sin PNG no deja caja vacía — el
   onerror de treeImgHtml borra el envoltorio entero (ver ahí el porqué). */
.cell-tree { gap: 12px; }
.cell-tree .item-img { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 8px; }
/* HACHA FINAL (s.87) — el arte del trofeo, arriba de su tabla de chances. Otra
   variante de .cell-item con la miniatura grande: acá la imagen ENCABEZA la
   sección, no acompaña a un nombre dentro de una fila. */
.cell-final { gap: 14px; margin: 4px 0 18px; }
.cell-final .item-img { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 10px; }
.cell-final .item-name { font-size: 16px; }
.cell-final .legendary-badge { align-self: center; }
.nk-table td.num {
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
.nk-table thead th:not(:first-child) { text-align: right; }
/* Fila de contenido ANUNCIADO (s.83): un tier `comingSoon` ocupa las columnas
   de datos con "Próximamente" — sin números, a propósito (ver buildWikiTrees).
   Se pinta apagada y centrada para que se lea como un cartel, no como un dato.
   Se apagan el TEXTO de la celda del tier y las celdas de datos, nunca el <th>
   entero: `opacity` compone todo el subárbol y no se puede "des-apagar" desde un
   hijo, y el arte del árbol tiene que quedar a opacidad plena (en una fila
   "Próximamente" la ilustración es justamente lo que se está anunciando). */
.nk-table tbody tr.soon td,
.nk-table tbody tr.soon .tree-tier { opacity: 0.6; font-style: italic; }
.nk-table tbody tr.soon td { text-align: center; font-family: inherit; }

/* aviso de ley del juego (ítems finales solo online) */
.warn-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 20px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 10px;
  background: rgba(var(--gold-rgb), 0.05);
  font-size: 14px;
  line-height: 1.55;
  color: var(--bone);
}
.warn-box .gem { flex-shrink: 0; margin-top: 4px; }
.warn-box.soft {
  border-color: rgba(var(--violet-rgb), 0.4);
  background: rgba(var(--violet-rgb), 0.06);
  font-size: 13px;
  color: var(--soft);
}
.week-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--cyan);
  border: 1px solid rgba(var(--cyan-rgb), 0.35);
  border-radius: 6px;
  padding: 4px 10px;
}

/* categoría vehículos */
.cat-vehicle { color: var(--cyan); }
.bg-vehicle { background: var(--cyan); }
.item-card:hover.hov-vehicle { border-color: var(--cyan); }

/* calculadora */
.calc-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.calc-field input, .calc-field select {
  width: 100%;
  background: rgba(var(--bone-rgb), 0.04);
  border: 1px solid rgba(var(--bone-rgb), 0.15);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--bone);
  font-family: var(--mono);
  font-size: 15px;
  outline: none;
}
.calc-field input:focus, .calc-field select:focus { border-color: var(--cyan); }
.calc-field select option { background: var(--navy); color: var(--bone); }
.calc-field select option[disabled] { color: var(--muted); }

.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(var(--bone-rgb), 0.1);
  border-radius: 10px;
  padding: 14px;
  background: rgba(var(--bone-rgb), 0.03);
}
.calc-k { font-size: 12px; color: var(--muted); line-height: 1.35; }
.calc-v {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.calc-big {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--bone);
}

@media (min-width: 760px) {
  .calc-form { grid-template-columns: 1fr 1.4fr 1fr; align-items: end; }
  .calc-out { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   HISTORIAL DE ARTE DE UN ÍTEM (s.87)
   Bloque al pie del detalle de la wiki: el arte viejo que fue
   reemplazado. Se corta del resto con la MISMA receta de divisor
   que .post-share (línea fina arriba + aire), para que se lea como
   apéndice y no como una sección nueva de la página.
   ============================================================ */
.history-sec { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.history-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
/* Miniaturas: auto-fill para que UNA sola entrada no se estire a lo ancho de
   la columna (el caso normal hoy es exactamente una). */
.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 130px));
  gap: 12px;
}
.history-entry { display: flex; flex-direction: column; gap: 6px; }
.history-entry .item-img { width: 100%; }
.history-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.history-note { font-size: 12px; line-height: 1.45; color: var(--soft); }

/* ============================================================
   NEXO CENTRAL (s.102) — línea de precio en la wiki + public/nexo.html
   ============================================================ */
/* Línea "Nexo Central: 120 (▲ 3,2 %)" en la tarjeta/detalle de un ítem.
   Reusa la tipografía de .sellable a propósito: es la misma familia de dato
   corto ("Se vende al NPC: Sí") y no necesita una regla nueva. */
.nexo-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nexo-var { font-family: var(--mono); font-weight: 700; }
.nexo-var.up   { color: var(--box); }
.nexo-var.down { color: #ff6f6f; }
.nexo-var.flat { color: var(--muted); font-weight: 400; }

.nexo-section-title {
  margin: 32px 0 16px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.nexo-grid { grid-template-columns: 1fr 1fr; margin-bottom: 8px; }
.nexo-card { position: relative; }
.nexo-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  /* s.153b — mismo fix de contraste que .legendary-badge (ver ese comentario). */
  color: #1B2230;
  background: var(--gold);
  border-radius: 4px;
  padding: 2px 7px;
}
@media (min-width: 760px) {
  .nexo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1040px) {
  .nexo-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   s.130 — DORENOR: lo que nace con la migración
   Este bloque va al final a propósito: todo lo de arriba es la
   estructura heredada (que no cambió), y acá vive lo nuevo.
   ============================================================ */

/* ---------- tipografía de marca (guía v2.0 §3) ----------
   Teko: SOLO el logotipo-texto (header/footer) y el h1 gigante del hero,
   en mayúsculas con tracking 0.06em (no el 0.14em de la v1: Teko ya es
   aireada). Rajdhani: títulos de panel/encabezados y botones. Roboto ya es
   --sans, el cuerpo por defecto. */
h1, h2, h3, h4,
.sec-title, .card-title, .cta {
  font-family: var(--heading);
}
.logo-txt, .hero h1 {
  font-family: var(--display);
}
.hero h1 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

/* ---------- el anillo del Nexo: el símbolo de la marca ----------
   Un arco de 84.7 de 100 con la abertura EXACTAMENTE abajo (la rampa
   del Nexo, al sur). La guía prohíbe rotarlo o cerrarlo: por eso el
   ángulo es una constante y no un parámetro. */
.ring { display: inline-block; overflow: visible; vertical-align: middle; }
.ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 84.7 100;
  transform: rotate(117.5deg);
  transform-origin: 50% 50%;
}
.ring.jade circle { stroke: var(--cyan); }

/* ---------- el logotipo: D + anillo + RENOR ---------- */
.lockup { display: inline-flex; align-items: center; gap: 2px; }
.lockup .ltr {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.06em; /* CAMBIO v2 §3: no el 0.14em de la v1, Teko ya es aireada */
  display: inline-block;
}
.lockup .ring { margin: 0 0.18em; }

/* en el header */
.logo .ltr  { font-size: 17px; color: var(--hd-text); }
.logo .ring { width: 15px; height: 15px; }

/* en el hero */
.hero .lockup .ltr  { font-size: clamp(34px, 9vw, 66px); color: var(--bone); }
.hero .lockup .ring { width: clamp(30px, 8vw, 58px); height: clamp(30px, 8vw, 58px); }
/* CAMBIO v2: el lema ya no es texto cian — el cian solo va en el botón
   principal y el enlace activo (§1/§2.1); acá pasa a Hueso. */
.hero-lema {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(11px, 2.6vw, 14px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone);
  margin-top: 4px;
}

/* en el footer */
.ft-logo .ltr  { font-size: 15px; color: var(--bone); }
.ft-logo .ring { width: 13px; height: 13px; }

/* ---------- el dorado solo donde hay conexión ----------
   El link del Nexo Central se ve como cualquier otro link de la nav; solo
   se pinta de dorado cuando ES la sección activa (s.150-frenteI: antes
   quedaba dorado siempre, activo o no). */
.nav a.nexo.active, .mmenu a.nexo.active { color: var(--gold); border-bottom-color: var(--gold); }
.link-nexo { color: var(--gold); font-weight: 600; }

/* ---------- botón de tema ---------- */
.theme-btn {
  cursor: pointer;
  width: 32px; height: 28px;
  margin-left: 6px;
  font-size: 14px; line-height: 1;
  color: var(--hd-soft);
  background: transparent;
  border: 1px solid var(--hd-line);
  border-radius: 6px;
  flex-shrink: 0;
}
.theme-btn:hover { color: var(--hd-text); }

/* ---------- animación de entrada del logotipo ----------
   Se dispara UNA vez por carga, solo en la home, y solo si el visitante
   no pidió reducir movimiento. */
.hero .lockup .ring circle { stroke-dashoffset: 84.7; }
body.play .hero .lockup .ring circle {
  animation: ihDraw 1.5s cubic-bezier(.65, 0, .35, 1) .25s forwards,
             ihGlowRing 1.2s ease-out 2.9s forwards;
}
@keyframes ihDraw { to { stroke-dashoffset: 0; } }
@keyframes ihGlowRing {
  0%   { filter: none; }
  35%  { filter: drop-shadow(0 0 12px var(--gold)); }
  100% { filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.55)); }
}
.hero .lockup .ltr { opacity: 0; transform: translateY(10px); }
body.play .hero .lockup .ltr {
  animation: ihRise .5s cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: calc(1.55s + var(--i) * .09s);
}
@keyframes ihRise { to { opacity: 1; transform: translateY(0); } }
/* El logotipo del hero ahora es la imagen fija (dorenor-logo-hero.jpg, §6.1),
   no la animación letra por letra: el resto ya no necesita esperar a que esa
   animación termine, así que el stagger se acorta. */
.hero .hero-lema, .hero .tagline, .hero .cta, .hero .cta-sub { opacity: 0; }
body.play .hero .hero-lema { animation: ihFade .6s ease .15s forwards; }
body.play .hero .tagline   { animation: ihFade .6s ease .30s forwards; }
body.play .hero .cta       { animation: ihFade .6s ease .45s forwards; }
body.play .hero .cta-sub   { animation: ihFade .6s ease .55s forwards; }
@keyframes ihFade { to { opacity: 1; } }

/* ---------- aparición por scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.seen { opacity: 1; transform: none; }

/* ---------- levantar tarjetas al pasar el cursor ---------- */
.card, .feat-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover, .feat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--cyan-rgb), 0.45);
  box-shadow: var(--shadow);
}
.cta { transition: transform .18s ease, box-shadow .18s ease; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--btn-bg-rgb), 0.34); }

/* ---------- nadie marea a nadie ---------- */
@media (prefers-reduced-motion: reduce) {
  body.play .hero .lockup .ring circle,
  body.play .hero .lockup .ltr,
  body.play .hero .hero-lema,
  body.play .hero .tagline,
  body.play .hero .cta,
  body.play .hero .cta-sub { animation: none; }
  .hero .lockup .ring circle { stroke-dashoffset: 0; }
  .hero .lockup .ltr, .hero .hero-lema, .hero .tagline,
  .hero .cta, .hero .cta-sub { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .feat-card:hover, .cta:hover { transform: none; }
}

/* ============================================================
   s.130 — EL TRAMO DE TABLET (760–1039)
   El problema que arregla: la hoja tenía UN solo corte en 760px y ahí
   entraba el layout de escritorio entero. En una tablet la wiki pasaba
   a 4 columnas y el hero saltaba a 72px de golpe. Ahora 760 es tablet
   de verdad y el layout ancho espera a 1040.
   ============================================================ */
@media (min-width: 760px) and (max-width: 1039.98px) {
  .feat-grid  { grid-template-columns: repeat(2, 1fr); }
  .news-grid  { grid-template-columns: repeat(2, 1fr); }
  .wiki-grid  { grid-template-columns: repeat(3, 1fr); }
  .shots      { grid-template-columns: repeat(3, 1fr); }
  .ft-grid    { grid-template-columns: 1fr 1fr; }
  .calc-form  { grid-template-columns: 1fr 1fr; }
  .hero h1, .hero .lockup .ltr { font-size: clamp(38px, 6.4vw, 54px); }
  .hero .lockup .ring { width: clamp(34px, 5.7vw, 48px); height: clamp(34px, 5.7vw, 48px); }
}

/* ---------- tamaños del anillo fuera del logotipo ----------
   El SVG no trae width/height propios (para que cada lugar mande el suyo):
   sin estas reglas el navegador lo pinta al tamaño del viewBox, 68px. */
.feat-card .ring { width: 26px; height: 26px; }
.api-error .ring, .hs-empty .ring, .warn-box .ring { width: 14px; height: 14px; flex-shrink: 0; }
.ring { width: 14px; height: 14px; }

/* El rombo heredado sigue vivo donde es un simple punto de color (categorías
   de la wiki, avisos). Lo que cambió es su paleta: el violeta era de la Era 2. */
/* .gem.violet volvió a pintarse con --violet (antes reusaba --cyan porque en
   la paleta Jade el "cyan" era el jade claro): con el cian eléctrico real,
   ese rombo aparece en varias pantallas a la vez y rompe la regla de un solo
   cian por pantalla (§1). Con --violet el nombre de la clase vuelve a
   coincidir con el color que pinta. */
.gem.gold   { background: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5); }
.gem.violet { background: var(--violet); box-shadow: 0 0 16px rgba(var(--violet-rgb), 0.55); }

/* ---------- el header no sigue al tema, y su TEXTO tampoco ----------
   Se pinta sobre jade profundo en los dos temas, así que si el texto usara
   los tokens del tema, en claro quedaría gris oscuro sobre verde oscuro:
   ilegible. Estos colores son fijos a propósito. */
.hd .logo .ltr,
.hd .burger        { color: var(--hd-text); }
.hd .nav a,
.hd .lang-btn      { color: var(--hd-soft); }
.hd .nav a:hover   { color: var(--hd-accent); }
.hd .nav a.active  { color: var(--hd-accent); border-bottom-color: var(--hd-accent); }
.hd .nav a.nexo.active { color: #FFD700; border-bottom-color: #FFD700; } /* s.153b — dorado universal de marca */
.hd .langs         { border-color: var(--hd-line); }
.hd .lang-btn.active { color: #1C2E26; background: var(--hd-accent); }
.hd .theme-btn     { color: var(--hd-soft); border-color: var(--hd-line); }
.hd .theme-btn:hover { color: var(--hd-text); }

.mmenu a           { color: var(--hd-soft); border-bottom-color: var(--hd-line); }
.mmenu a.active    { color: var(--hd-accent); }
.mmenu a.nexo.active { color: #FFD700; } /* s.153b — dorado universal de marca */