/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Retail: el Vacío contra la Luz — negros violáceos, morado del Vacío y destellos dorados de la Luz */
  --bg: #06030d;
  --bg-rgb: 6, 3, 13;
  --bg-soft: #0d0719;
  --panel: #130a24;
  --panel-2: rgba(190, 150, 255, 0.05);
  --line: rgba(170, 120, 255, 0.17);
  --ink: #f4eeff;
  --muted: #b9a8de;
  --muted-2: #8776aa;

  --accent: #a66bff;       /* Vacío / morado */
  --accent-rgb: 166, 107, 255;
  --accent-ink: #12041f;
  --void: #6d28d9;         /* Vacío profundo */
  --void-rgb: 109, 40, 217;
  --void-2: #3b0f8c;
  --fire: #ffe3a0;         /* la Luz */
  --fire-rgb: 255, 227, 160;
  --gold: #ffd27a;         /* premios / Luz */
  --pink: #e94fd0;

  /* Una sola textura en escala de grises para las 4 expansiones (así
     el tinte de color de cada tema se aplica limpio, sin que la
     imagen ya traiga un color propio de fondo) — vuelta a como se
     veía antes (fondo oscuro, textura discreta), solo que ahora la
     textura sí se nota un poco en vez de quedar invisible. */
  --gradient-void: var(--gradient-retail);
  --gradient-panel: linear-gradient(160deg, rgba(var(--accent-rgb), 0.09), rgba(var(--void-rgb), 0.06));

  /* Copias fijas de cada fondo de expansión — a diferencia de --gradient-void
     (que cambia con [data-theme] y por eso no se puede transicionar de forma
     suave, ya que el navegador no interpola entre dos imágenes distintas),
     estas nunca cambian de valor: cada una vive en su propia capa de
     .bg-crossfade y solo se cruza su opacidad, así el fondo general de la
     web sí se ve tan lento como el resto de los colores. */
  --gradient-sod: radial-gradient(120% 140% at 50% -10%, rgba(74,18,20,.78) 0%, rgba(21,10,11,.85) 55%), url("assets/img/site-texture-gray.webp") center / cover;
  --gradient-mop: radial-gradient(60% 45% at 4% 108%, rgba(236,242,239,.11) 0%, transparent 72%), radial-gradient(120% 140% at 50% -10%, rgba(12,86,58,.66) 0%, rgba(3,8,6,.94) 58%), url("assets/img/site-texture-gray.webp") center / cover;
  --gradient-retail: radial-gradient(70% 55% at 94% 108%, rgba(255,214,140,.16) 0%, transparent 70%), radial-gradient(120% 140% at 50% -10%, rgba(76,29,149,.62) 0%, rgba(6,3,13,.92) 58%), url("assets/img/site-texture-gray.webp") center / cover;
  --gradient-forever: radial-gradient(110% 60% at 50% 112%, rgba(240,130,90,.30) 0%, rgba(192,112,159,.18) 36%, transparent 72%), radial-gradient(120% 120% at 50% -14%, rgba(66,80,170,.62) 0%, rgba(11,17,38,.9) 58%), url("assets/img/site-texture-gray.webp") center / cover;

  --dragon-c1: #e6d3ff;
  --dragon-c2: #a66bff;
  --dragon-c3: #4c1d95;
  --ink-strong: #ffffff;
  --logo-contact-rgb: 0, 0, 0;

  --theme-transition: background-color 2.5s ease, background 2.5s ease, color 2.5s ease, border-color 2.5s ease, box-shadow 2.5s ease, fill 2.5s ease;
  --bg-fade: 2.5s; /* duración del fundido oscuro↔color del fondo general, ver .bg-layer */

  --display: "Space Grotesk", "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --radius: 16px;
  --radius-sm: 10px;
  --container: 1180px;
}

/* =============================================================
   1b. Expansion themes — set via [data-theme] on <html>, driven by
   the progression tabs. Every component reads the tokens above, so
   overriding them here reskins the whole site, not just the tab.
   ============================================================= */
html[data-theme="sod"] {
  /* Rojo de la Horda, sin azul de la Alianza esta vez. */
  --bg: #180d0e; --bg-rgb: 24, 13, 14;
  --bg-soft: #221213; --panel: #2b1516;
  --panel-2: rgba(255, 255, 255, 0.05); --line: rgba(255, 120, 120, 0.14);
  --ink: #fbeeee; --muted: #d9a8a8; --muted-2: #a97878;
  --accent: #e0393e; --accent-rgb: 224, 57, 62; --accent-ink: #ffffff;
  --void: #a81f22; --void-rgb: 168, 31, 34; --void-2: #7a1517;
  --fire: #ff6b6b; --gold: #e2696d;
  --gradient-void: var(--gradient-sod);
  --dragon-c1: #ffdede; --dragon-c2: #e0393e; --dragon-c3: #7a1517;
}
html[data-theme="mop"] {
  /* MoP: el Dragón de Jade contra el Sha — verde jade sobre negros profundos, con toques de blanco espectral del Sha */
  --bg: #030806; --bg-rgb: 3, 8, 6;
  --bg-soft: #07110d; --panel: #0b1a14;
  --panel-2: rgba(110, 255, 200, 0.055); --line: rgba(110, 240, 190, 0.17);
  --ink: #f0fbf6; --muted: #9fcdb9; --muted-2: #6e9d88;
  --accent: #2fe3a0; --accent-rgb: 47, 227, 160; --accent-ink: #02150e;
  --void: #12805a; --void-rgb: 18, 128, 90; --void-2: #0b4d37;
  --fire: #f4f8f6; --gold: #ffe27a;
  --gradient-void: var(--gradient-mop);
  --dragon-c1: #d8fff0; --dragon-c2: #2fe3a0; --dragon-c3: #0b6b4b;
}
html[data-theme="forever"] {
  /* "Crepúsculo de Azeroth": el arte oficial de Forever es un cielo de atardecer — índigo de medianoche arriba,
     violeta y rosa en el horizonte y un resplandor ámbar. Fondo oscuro azul-índigo (nada de blancos que cansen la
     vista), acento ámbar cálido y un rosa de horizonte como segundo color. */
  --bg: #0b1126; --bg-rgb: 11, 17, 38;
  --bg-soft: #121a38; --panel: #181f40;
  --panel-2: rgba(255, 190, 130, 0.055); --line: rgba(210, 175, 235, 0.17);
  --ink: #efe8f4; --muted: #b9afcf; --muted-2: #8a81a8;
  --accent: #f2a65a; --accent-rgb: 242, 166, 90; --accent-ink: #26130a;
  --void: #c0709f; --void-rgb: 192, 112, 159; --void-2: #84487a;
  --fire: #ffb86c; --gold: #f4c76b;
  --gradient-void: var(--gradient-forever);
  --dragon-c1: #ffe4c4; --dragon-c2: #f2a65a; --dragon-c3: #84487a;
  --ink-strong: #fff7ee;
}
/* Menos brillo/resplandor en Forever — que se vea mate, como papel, no
   como neón. */
html[data-theme="forever"] .btn-primary {
  box-shadow: 0 8px 18px -8px rgba(var(--accent-rgb), .3);
}
html[data-theme="forever"] .btn-primary:hover {
  box-shadow: 0 10px 22px -8px rgba(var(--accent-rgb), .35);
}
html[data-theme="forever"] .hero-medallion-glow { opacity: .55; }
html { transition: var(--theme-transition); }
/* Activada por JS solo durante el ciclo automático de expansiones, para que
   ese cambio (sin que el usuario lo pida) se sienta lento y natural. */
html.theme-auto-slow {
  --theme-transition: background-color 8.5s ease, background 8.5s ease, color 8.5s ease, border-color 8.5s ease, box-shadow 8.5s ease, fill 8.5s ease;
  --bg-fade: 8.5s;
}
html[data-theme="forever"] .hero-slide.is-active { opacity: .4; }
html[data-theme="forever"] .hero-veil {
  background:
    radial-gradient(60% 34% at 50% 100%, rgba(240,140,90,.22) 0%, transparent 70%),
    radial-gradient(40% 22% at 22% 8%, rgba(190,150,230,.16) 0%, transparent 65%),
    linear-gradient(180deg, rgba(70,82,170,.52) 0%, rgba(104,80,160,.38) 24%, rgba(var(--bg-rgb),.8) 52%, rgba(var(--bg-rgb),.95) 100%);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; overflow-x: clip; scroll-behavior: smooth; }

/* Barras de scroll con los colores de la marca (cian → morado) en vez
   del gris por defecto del navegador — para toda la página y para
   cualquier panel con su propio scroll interno (el modal del
   personaje, tablas, el panel de Discord, etc). Se sigue el tema
   activo porque usa las mismas variables --accent/--void que cambian
   de color según la expansión seleccionada. */
* { scrollbar-width: thin; scrollbar-color: var(--accent) rgba(255, 255, 255, .08); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); border-radius: 999px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--void)); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--void), var(--accent)); background-clip: content-box; }
body {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
  transition: var(--theme-transition);
}
section, .value-card, .core-card, .store-card, .apply-form, .horizon-inner, .raid-tracker {
  transition: var(--theme-transition), transform .35s var(--ease-out);
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.08; letter-spacing: -0.01em; font-family: var(--display); }
ul { list-style: none; padding: 0; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
}

.section-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 1rem;
  max-width: 22ch;
}
.section-lead {
  color: var(--muted);
  max-width: 62ch;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  margin-bottom: 2.5rem;
}

section { position: relative; padding-block: clamp(4rem, 8vw, 7rem); }

/* reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out), border-color .35s var(--ease-out);
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--void));
  color: #060217;
  box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), 0.55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -8px rgba(var(--accent-rgb), 0.65); }
.btn-outline {
  border: 1.5px solid var(--line);
  color: var(--ink);
  background: var(--panel-2);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--ink); }
.btn-discord {
  background: linear-gradient(135deg, var(--accent), var(--void));
  color: var(--accent-ink);
}
.btn-discord:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(var(--accent-rgb), .55); }
.btn:disabled { opacity: .55; cursor: progress; transform: none !important; }

/* =============================================================
   4. Nav
   ============================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  padding-block: .9rem;
  background: rgba(var(--bg-rgb), 0.35);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out), padding .4s var(--ease-out);
}
.nav.is-scrolled { background: rgba(var(--bg-rgb), 0.78); border-color: var(--line); padding-block: .6rem; }
.nav-inner {
  max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.nav-brand { display: flex; align-items: center; gap: .9rem; font-family: var(--display); font-weight: 800; font-size: 1.55rem; letter-spacing: .09em; margin-right: auto; }
.nav-brand span {
  background: linear-gradient(90deg, var(--ink) 0%, var(--accent) 35%, var(--void) 60%, var(--ink) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brandShimmer 6s linear infinite;
  /* Sombra suave de contacto (sin borde ni brillo de color). */
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
@keyframes brandShimmer { to { background-position: -250% center; } }
@media (prefers-reduced-motion: reduce) { .nav-brand span { animation: none; background-position: 0 center; } }
.nav-links { display: none; align-items: center; gap: 1.75rem; font-weight: 600; font-size: .93rem; color: var(--muted); }
.nav-links a { transition: color .3s var(--ease-out); }
.nav-links a:hover { color: var(--accent); }
.btn-login {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  font-family: var(--sans); border: none; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, var(--accent), var(--void)); color: var(--accent-ink);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(var(--accent-rgb), .55); }
.btn-login svg { flex: none; }
.nav-actions { display: none; align-items: center; gap: .75rem; }
.nav-actions .btn { padding: .6rem 1.1rem; font-size: .85rem; }

/* Botón circular "Calendario Raids" al lado de Regístrate — el ícono de
   calendario se cruza con uno de reloj al pasar el mouse (dos SVG
   superpuestos, uno se desvanece mientras el otro entra girando), con
   un anillo pulsante para que llame la atención sin ser invasivo, y un
   tooltip propio con el estilo de la web en vez del feo tooltip nativo
   del navegador. */
.nav-calendar-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--void)); color: var(--accent-ink);
  box-shadow: 0 6px 16px -6px rgba(var(--accent-rgb), .6);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.nav-calendar-btn::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), .55);
  animation: nav-calendar-ring 2.4s ease-out infinite;
}
@keyframes nav-calendar-ring {
  0% { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}
.nav-calendar-btn:hover, .nav-calendar-btn:focus-visible {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 22px -6px rgba(var(--accent-rgb), .75);
}
.nav-calendar-icon { position: relative; width: 17px; height: 17px; }
.nav-calendar-icon svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.nav-calendar-icon-cal { opacity: 1; transform: rotate(0deg) scale(1); }
.nav-calendar-icon-clock { opacity: 0; transform: rotate(-90deg) scale(.6); }
.nav-calendar-btn:hover .nav-calendar-icon-cal, .nav-calendar-btn:focus-visible .nav-calendar-icon-cal { opacity: 0; transform: rotate(90deg) scale(.6); }
.nav-calendar-btn:hover .nav-calendar-icon-clock, .nav-calendar-btn:focus-visible .nav-calendar-icon-clock { opacity: 1; transform: rotate(0deg) scale(1); }
.nav-calendar-tooltip {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -6px);
  padding: .35rem .7rem; border-radius: var(--radius-sm); white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-size: .74rem; font-weight: 700; font-family: var(--sans);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.nav-calendar-tooltip::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--line);
}
.nav-calendar-btn:hover .nav-calendar-tooltip, .nav-calendar-btn:focus-visible .nav-calendar-tooltip {
  opacity: 1; transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .nav-calendar-btn::before { animation: none; }
  .nav-calendar-btn, .nav-calendar-icon svg, .nav-calendar-tooltip { transition: none; }
}

/* Botón al panel de staff — flota al lado de "Volver arriba", pero solo
   aparece cuando el pie de página está a la vista (ver initFooterFab en
   main.js con IntersectionObserver): el resto de la guild lo ve nada
   más al llegar al final de la web, no todo el tiempo scrolleando. */
.footer-staff-fab {
  position: fixed; right: 4.2rem; bottom: 1.2rem; z-index: 300;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 0 .9rem; height: 46px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  font-size: .78rem; font-weight: 700; font-family: var(--sans); white-space: nowrap; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.footer-staff-fab.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.footer-staff-fab:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }
@media (prefers-reduced-motion: reduce) { .footer-staff-fab { transition: none; } }
@media (max-width: 520px) {
  /* En pantallas chicas no entran los dos botones lado a lado sin
     tapar contenido — el ícono solo, más angosto, alcanza igual. */
  .footer-staff-fab { right: 3.6rem; padding: 0; width: 46px; justify-content: center; }
  .footer-staff-fab span { display: none; }
}
.nav-burger {
  display: flex; flex-direction: column; gap: 4px; padding: .5rem;
  margin-left: auto;
}
.nav-burger span { width: 22px; height: 2px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); }
.nav.is-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 960px) {
  .nav-links, .nav-actions { display: flex; }
  .nav-burger { display: none; }
}

.nav-links[data-open="true"] {
  display: flex; position: fixed; inset: 64px 0 auto 0; flex-direction: column;
  background: rgba(var(--bg-rgb), 0.97); padding: 1.5rem 1.25rem 2rem; gap: 1.1rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 960px) {
  .nav-links[data-open="true"] { position: static; flex-direction: row; background: none; padding: 0; border: 0; }
}

/* Nav dropdowns — "everything included in this section" mega-menu */
.nav-item { position: relative; }
.nav-item-btn { display: flex; align-items: center; gap: .35rem; font: inherit; color: inherit; }
.nav-caret { transition: transform .3s var(--ease-out); }
.nav-item.is-open .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  display: none; flex-direction: column; gap: .1rem;
  min-width: 220px; padding: .6rem; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,.5);
}
.nav-item.is-open .nav-dropdown { display: flex; }
.nav-dropdown a, .nav-dropdown button {
  display: block; width: 100%; text-align: left; font: inherit; color: var(--muted);
  padding: .55rem .7rem; border-radius: 8px; font-size: .88rem;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.nav-dropdown a:hover, .nav-dropdown button:hover { background: var(--panel-2); color: var(--accent); }
@media (min-width: 960px) {
  .nav-dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); z-index: 20; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
  .nav-item.is-open .nav-dropdown { display: flex; opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
}

/* =============================================================
   5. Splash
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: var(--gradient-void);
 
  transition: opacity .6s var(--ease-out), clip-path .7s var(--ease-in);
  animation: splashSafety .01s 4.5s forwards;
}
.splash-mark { display: flex; justify-content: center; align-items: center; position: relative; }
.splash-mark::before {
  content: ""; position: absolute; width: 280px; height: 280px; max-width: 60vw; max-height: 60vw;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .4) 0%, rgba(var(--accent-rgb), .16) 45%, transparent 72%);
  filter: blur(4px); border-radius: 50%; animation: splashGlow 1.8s ease-in-out infinite; z-index: 0;
}
.splash-mark img { position: relative; z-index: 1; }
.splash-word { font-family: var(--display); letter-spacing: .3em; font-size: .95rem; color: var(--accent); }
.splash.is-out { opacity: 0; clip-path: inset(0 0 100% 0); pointer-events: none; }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
@keyframes splashPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes splashGlow { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

/* =============================================================
   5b. Background crossfade — one fixed layer per expansion, all always
   painted with their own fixed gradient (never reassigned at runtime), so
   switching themes is just an opacity cross-fade. A plain "background:
   var(--gradient-void)" swap can't do this: the browser can't interpolate
   between two different gradient/image lists, so it would snap instantly
   no matter how long --theme-transition is set to. Opacity, unlike
   background-image, always transitions smoothly — that's the whole trick.

   The outgoing layer and incoming layer do NOT fade at the same time
   (that briefly let the page's default white canvas show through both
   half-transparent layers at once, reading as a flash of brightness).
   Instead the outgoing layer fades out fast first, revealing this
   container's own dark background-color, and only then does the incoming
   layer fade in — so every expansion change dips through dark first.
   --bg-fade is the shared duration (kept in sync with --theme-transition's
   normal/slow modes); the .4/.6 split is where the handoff happens.
   ============================================================= */
.bg-crossfade {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: #05070a;
}
.bg-layer {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity calc(var(--bg-fade, 3s) * .4) ease-in;
}
.bg-layer--sod { background: var(--gradient-sod); }
.bg-layer--mop { background: var(--gradient-mop); }
.bg-layer--retail { background: var(--gradient-retail); opacity: 1; } /* estado inicial antes de que main.js fije data-theme */
.bg-layer--forever { background: var(--gradient-forever); }
html[data-theme="sod"] .bg-layer--sod,
html[data-theme="mop"] .bg-layer--mop,
html[data-theme="retail"] .bg-layer--retail,
html[data-theme="forever"] .bg-layer--forever {
  opacity: 1;
  transition: opacity calc(var(--bg-fade, 3s) * .6) ease-out calc(var(--bg-fade, 3s) * .4);
}
html[data-theme="sod"] .bg-layer--retail,
html[data-theme="mop"] .bg-layer--retail,
html[data-theme="forever"] .bg-layer--retail,
html[data-theme="sod"] .bg-layer--mop,
html[data-theme="mop"] .bg-layer--sod,
html[data-theme="retail"] .bg-layer--sod,
html[data-theme="retail"] .bg-layer--mop,
html[data-theme="forever"] .bg-layer--sod,
html[data-theme="forever"] .bg-layer--mop,
html[data-theme="sod"] .bg-layer--forever,
html[data-theme="mop"] .bg-layer--forever,
html[data-theme="retail"] .bg-layer--forever { opacity: 0; }

/* =============================================================
   6. Starfield — the void behind everything
   ============================================================= */
.starfield {
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
}

/* Clouds — decorative, only drift in for the Forever (sky) theme */
.theme-clouds { position: fixed; inset: 0; z-index: -1; overflow: clip; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.theme-clouds span {
  /* Un racimo de "bultos" redondos superpuestos, más juntos y altos al
     centro, en vez de una sola elipse plana — así se lee como una nube de
     verdad y no como un óvalo borroso. */
  position: absolute; top: var(--cy, 10%); left: -38%;
  width: var(--cw, 340px); height: calc(var(--cw, 340px) * .56);
  background:
    radial-gradient(circle calc(var(--cw, 340px) * .16) at 16% 64%, rgba(255,255,255,.5), rgba(255,255,255,0) 100%),
    radial-gradient(circle calc(var(--cw, 340px) * .21) at 35% 40%, rgba(255,255,255,.5), rgba(255,255,255,0) 100%),
    radial-gradient(circle calc(var(--cw, 340px) * .24) at 57% 36%, rgba(255,255,255,.5), rgba(255,255,255,0) 100%),
    radial-gradient(circle calc(var(--cw, 340px) * .18) at 78% 48%, rgba(255,255,255,.5), rgba(255,255,255,0) 100%),
    radial-gradient(circle calc(var(--cw, 340px) * .14) at 92% 62%, rgba(255,255,255,.45), rgba(255,255,255,0) 100%),
    radial-gradient(ellipse calc(var(--cw, 340px) * .48) calc(var(--cw, 340px) * .17) at 52% 76%, rgba(255,255,255,.4), rgba(255,255,255,0) 100%);
  filter: blur(11px);
  animation: cloudDrift var(--cd, 60s) ease-in-out infinite;
  animation-delay: var(--cdelay, 0s);
}
.theme-clouds span:nth-child(1) { --cy: 8%;  --cw: 380px; --cd: 130s; --cdelay: 0s; animation-name: cloudDriftA; }
.theme-clouds span:nth-child(2) { --cy: 24%; --cw: 260px; --cd: 95s; --cdelay: -32s; animation-name: cloudDriftB; }
.theme-clouds span:nth-child(3) { --cy: 42%; --cw: 320px; --cd: 115s; --cdelay: -60s; animation-name: cloudDriftC; }
.theme-clouds span:nth-child(4) { --cy: 60%; --cw: 220px; --cd: 85s; --cdelay: -15s; animation-name: cloudDriftB; }
/* Cada nube recorre la pantalla completa (0 a 160vw) pero con paradas
   intermedias irregulares — a veces avanza más, a veces retrocede un poco
   — para que el vaivén se sienta como una deriva de lado a lado y no como
   una cinta transportadora en línea recta. Tres variantes con paradas
   distintas para que las nubes no se muevan todas igual. */
@keyframes cloudDriftA {
  0%   { transform: translateX(0); }
  16%  { transform: translateX(30vw); }
  30%  { transform: translateX(18vw); }
  48%  { transform: translateX(55vw); }
  63%  { transform: translateX(44vw); }
  80%  { transform: translateX(95vw); }
  100% { transform: translateX(160vw); }
}
@keyframes cloudDriftB {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(14vw); }
  38%  { transform: translateX(38vw); }
  52%  { transform: translateX(26vw); }
  70%  { transform: translateX(68vw); }
  88%  { transform: translateX(58vw); }
  100% { transform: translateX(160vw); }
}
@keyframes cloudDriftC {
  0%   { transform: translateX(0); }
  14%  { transform: translateX(22vw); }
  33%  { transform: translateX(42vw); }
  47%  { transform: translateX(30vw); }
  66%  { transform: translateX(72vw); }
  82%  { transform: translateX(62vw); }
  100% { transform: translateX(160vw); }
}
html[data-theme="forever"] .theme-clouds { opacity: .45; }
html[data-theme="mop"] .theme-clouds { opacity: .2; }
@media (prefers-reduced-motion: reduce) { .theme-clouds span { animation: none; left: 10%; } }

/* Wind / breeze streaks — sand breeze (SoD), jade wind (MoP), blue breeze
   (Forever). Reuses one layer: color always follows the theme's --accent,
   so no per-theme duplication needed. */
.theme-wind { position: fixed; inset: 0; z-index: -1; overflow: clip; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.theme-wind span {
  position: absolute; top: var(--wy, 20%); left: -20%;
  width: var(--ww, 220px); height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.55), transparent);
  filter: blur(.5px);
  animation: windDrift var(--wd, 5s) linear infinite;
  animation-delay: var(--wdelay, 0s);
}
.theme-wind span:nth-child(1) { --wy: 12%; --ww: 260px; --wd: 4.5s; --wdelay: 0s; }
.theme-wind span:nth-child(2) { --wy: 30%; --ww: 180px; --wd: 3.6s; --wdelay: -1.2s; }
.theme-wind span:nth-child(3) { --wy: 48%; --ww: 240px; --wd: 5.2s; --wdelay: -2.6s; }
.theme-wind span:nth-child(4) { --wy: 66%; --ww: 200px; --wd: 4s; --wdelay: -.6s; }
.theme-wind span:nth-child(5) { --wy: 82%; --ww: 260px; --wd: 4.8s; --wdelay: -3.4s; }
@keyframes windDrift { from { transform: translateX(0); } to { transform: translateX(150vw); } }
html[data-theme="sod"] .theme-wind,
html[data-theme="mop"] .theme-wind,
html[data-theme="forever"] .theme-wind { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .theme-wind span { animation: none; display: none; } }

/* SoD theme — floating legendary-relic symbols + fine drifting sand dust */
.theme-legendary { position: fixed; inset: 0; z-index: -1; overflow: clip; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.theme-legendary span {
  position: absolute; left: var(--lx, 10%); top: 105%;
  font-size: var(--ls, 1.6rem); color: rgba(var(--accent-rgb), .5);
  animation: legendaryFloat var(--ld, 16s) linear infinite;
  animation-delay: var(--ldelay, 0s);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .5));
}
.theme-legendary span:nth-child(1) { --lx: 8%;  --ls: 1.8rem; --ld: 15s; --ldelay: 0s; }
.theme-legendary span:nth-child(2) { --lx: 26%; --ls: 1.3rem; --ld: 19s; --ldelay: -4s; }
.theme-legendary span:nth-child(3) { --lx: 50%; --ls: 1.6rem; --ld: 17s; --ldelay: -9s; }
.theme-legendary span:nth-child(4) { --lx: 72%; --ls: 1.4rem; --ld: 21s; --ldelay: -2s; }
.theme-legendary span:nth-child(5) { --lx: 90%; --ls: 1.7rem; --ld: 18s; --ldelay: -12s; }
@keyframes legendaryFloat {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: .7; }
  90% { opacity: .7; }
  100% { transform: translateY(-120vh) rotate(25deg); opacity: 0; }
}
html[data-theme="sod"] .theme-legendary { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .theme-legendary span { animation: none; display: none; } }

.theme-sand { position: fixed; inset: 0; z-index: -1; overflow: clip; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.theme-sand span {
  position: absolute; top: var(--sy, 20%); left: -5%;
  width: var(--ss, 4px); height: var(--ss, 4px); border-radius: 50%;
  background: rgba(var(--accent-rgb), .6);
  filter: blur(.3px);
  animation: sandDrift var(--sd, 9s) linear infinite;
  animation-delay: var(--sdelay, 0s);
}
.theme-sand span:nth-child(1) { --sy: 15%; --ss: 3px; --sd: 8s;  --sdelay: 0s; }
.theme-sand span:nth-child(2) { --sy: 35%; --ss: 5px; --sd: 11s; --sdelay: -3s; }
.theme-sand span:nth-child(3) { --sy: 55%; --ss: 3px; --sd: 9s;  --sdelay: -6s; }
.theme-sand span:nth-child(4) { --sy: 70%; --ss: 4px; --sd: 10s; --sdelay: -1.5s; }
.theme-sand span:nth-child(5) { --sy: 85%; --ss: 3px; --sd: 12s; --sdelay: -8s; }
.theme-sand span:nth-child(6) { --sy: 25%; --ss: 2px; --sd: 7s;  --sdelay: -4.5s; }
@keyframes sandDrift { from { transform: translate(0,0); } to { transform: translate(130vw, 6vh); } }
html[data-theme="sod"] .theme-sand { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .theme-sand span { animation: none; display: none; } }

/* Retail theme — void orbs drifting up + faceted light gems twinkling */
.theme-orbs { position: fixed; inset: 0; z-index: -1; overflow: clip; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.theme-orbs span {
  position: absolute; left: var(--ox, 10%); top: 100%;
  width: var(--osz, 26px); height: var(--osz, 26px); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(var(--void-rgb),.8), rgba(var(--void-rgb),.15) 70%, transparent 80%);
  filter: blur(1px);
  animation: orbRise var(--od, 14s) ease-in infinite;
  animation-delay: var(--odelay, 0s);
}
.theme-orbs span:nth-child(1) { --ox: 12%; --osz: 22px; --od: 13s; --odelay: 0s; }
.theme-orbs span:nth-child(2) { --ox: 32%; --osz: 34px; --od: 17s; --odelay: -5s; }
.theme-orbs span:nth-child(3) { --ox: 58%; --osz: 20px; --od: 12s; --odelay: -8s; }
.theme-orbs span:nth-child(4) { --ox: 78%; --osz: 30px; --od: 16s; --odelay: -2s; }
.theme-orbs span:nth-child(5) { --ox: 92%; --osz: 18px; --od: 11s; --odelay: -10s; }
@keyframes orbRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: .55; }
  88% { opacity: .55; }
  100% { transform: translateY(-115vh) translateX(4vw); opacity: 0; }
}
html[data-theme="retail"] .theme-orbs { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .theme-orbs span { animation: none; display: none; } }

.theme-gems { position: fixed; inset: 0; z-index: -1; overflow: clip; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.theme-gems span {
  position: absolute; left: var(--gx, 15%); top: var(--gy, 20%);
  width: var(--gsz, 10px); height: var(--gsz, 10px);
  background: rgba(var(--accent-rgb), .85);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .8));
  animation: gemTwinkle var(--gd, 3.5s) ease-in-out infinite;
  animation-delay: var(--gdelay, 0s);
}
.theme-gems span:nth-child(1) { --gx: 10%; --gy: 22%; --gsz: 9px;  --gd: 3.2s; --gdelay: 0s; }
.theme-gems span:nth-child(2) { --gx: 26%; --gy: 68%; --gsz: 7px;  --gd: 4s;   --gdelay: -1s; }
.theme-gems span:nth-child(3) { --gx: 46%; --gy: 40%; --gsz: 11px; --gd: 3.6s; --gdelay: -2s; }
.theme-gems span:nth-child(4) { --gx: 66%; --gy: 78%; --gsz: 8px;  --gd: 4.4s; --gdelay: -.5s; }
.theme-gems span:nth-child(5) { --gx: 82%; --gy: 30%; --gsz: 10px; --gd: 3.8s; --gdelay: -3s; }
.theme-gems span:nth-child(6) { --gx: 92%; --gy: 60%; --gsz: 7px;  --gd: 3.3s; --gdelay: -1.6s; }
@keyframes gemTwinkle { 0%, 100% { opacity: .25; transform: scale(.8) rotate(0deg); } 50% { opacity: .9; transform: scale(1.15) rotate(20deg); } }
html[data-theme="retail"] .theme-gems { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .theme-gems span { animation: none; display: none; } }

/* Logo mark — the guild's real dragon crest, background removed (true
   transparency, no card/box behind it). A per-theme hue-rotate/saturate
   filter retints the real art to match whichever expansion is active. */
.logo-mark {
  width: 41px; height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(var(--logo-contact-rgb, 0,0,0), .5)) drop-shadow(0 0 10px rgba(var(--accent-rgb), .55)) var(--dragon-tint, hue-rotate(0deg));
  transition: filter .6s ease;
}
.logo-mark--nav {
  width: 54px; height: 60px;
  /* Sin brillo de color — sombra oscura de contacto para que resalte
     por contraste, no por luz. */
  filter: drop-shadow(0 2px 5px rgba(var(--logo-contact-rgb, 0,0,0), .7)) var(--dragon-tint, hue-rotate(0deg));
}
.logo-mark--hero {
  width: clamp(160px, 22vw, 250px); height: auto; aspect-ratio: 97 / 108;
  /* Sin brillo de color — solo una sombra de contacto oscura, para que
     no quede flotando sin peso. */
  filter: drop-shadow(0 3px 8px rgba(var(--logo-contact-rgb, 0,0,0), .6)) var(--dragon-tint, hue-rotate(0deg));
  animation: logoFadePulse 7s ease-in-out infinite;
}
/* Se desvanece un poco y vuelve a aparecer, bien lento — a diferencia
   de medallionPulse (el resplandor de atrás, más rápido) esto es el
   logo mismo. */
@keyframes logoFadePulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* Logo del hero con fuego real animado (video) encima del trazo nítido
   de siempre. El grupo entero (trazo + fuego) hereda el tamaño, la
   sombra de contacto, el pulso de opacidad y el --dragon-tint de
   .logo-mark--hero sin cambios — por eso cambia de color solo con
   cambiar de pestaña de expansión, igual que el resto del logo. */
/* El pulso de opacidad (logoFadePulse) que trae .logo-mark--hero es para
   la imagen estática sola; aquí opacaría también el fuego de encima, así
   que se cancela en el grupo — el trazo del logo se queda siempre 100%
   nítido y solo el fuego (más abajo) se ve tenue. */
.logo-mark--hero-live {
  position: relative; animation: none; opacity: 1;
  /* Solo la sombra de contacto acá — el tinte de color se pone en cada
     capa por separado (el trazo y el fuego pueden llevar cada uno su
     propio color, más abajo). */
  filter: drop-shadow(0 3px 8px rgba(var(--logo-contact-rgb, 0,0,0), .6));
}
.logo-mark--hero-live .crest-crisp-site {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: var(--dragon-tint, hue-rotate(0deg));
}
.logo-mark--hero-live .crest-fire-canvas {
  position: absolute; left: 50%; top: 50%; width: 380%; aspect-ratio: 1080 / 608;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .5; /* más tenue todavía — para que el trazo se note por debajo aun cuando brilla el anillo pegado al marco */
  /* El color exacto por tema (rojo/verde/morado/celeste) ya lo pinta
     initHeroDragonFire() píxel a píxel en main.js — aquí no hace falta
     ningún filtro de color. */
  /* Agujero más grande que antes: el fuego arrancaba muy pegado al
     trazo y, al pasar semitransparente por encima de las líneas finas
     del logo, se veía como si el logo mismo estuviera borroso. Dejando
     más aire antes de que aparezca, el trazo queda despejado y el
     fuego se nota solo alrededor, no encima del dibujo. */
  -webkit-mask-image: radial-gradient(ellipse 20% 23% at 50% 50%, transparent 42%, #000 68%);
  mask-image: radial-gradient(ellipse 20% 23% at 50% 50%, transparent 42%, #000 68%);
}
.logo-mark--hero-live .crest-fire-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .logo-mark--hero-live .crest-fire-canvas { display: none; }
}
.logo-mark--card { width: 62px; height: 69px; margin-inline: auto; }
.logo-mark--footer { width: 30px; height: 33px; }
.logo-mark--splash {
  width: clamp(150px, 24vw, 230px); height: auto; aspect-ratio: 97 / 108;
  filter: drop-shadow(0 2px 5px rgba(var(--logo-contact-rgb, 0,0,0), .5)) drop-shadow(0 0 30px rgba(var(--accent-rgb),.7)) drop-shadow(0 0 55px rgba(var(--void-rgb),.4)) var(--dragon-tint, hue-rotate(0deg));
  animation: splashPulse 1.8s ease-in-out infinite;
}

html[data-theme="sod"]     { --dragon-tint: hue-rotate(180deg) saturate(1.3) brightness(1.05); }
html[data-theme="mop"]     { --dragon-tint: hue-rotate(-35deg) saturate(1.25); }
html[data-theme="retail"]  { --dragon-tint: hue-rotate(0deg); }
html[data-theme="forever"] { --dragon-tint: hue-rotate(0deg); }


/* =============================================================
   7. Hero
   ============================================================= */
.hero {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 6rem;
  overflow: clip;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.hero-slideshow { position: absolute; inset: 0; overflow: clip; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  opacity: 0; transition: opacity 1.6s ease;
  filter: saturate(112%);
}
.hero-slide.is-active { opacity: .4; }
/* Mismo tratamiento que .hero-slide (posición, encuadre, opacidad) —
   pero cada video solo se muestra cuando SU tema está activo; el resto
   del tiempo queda invisible y pausado (ver main.js) para no gastar
   batería/CPU decodificando algo que no se ve. */
.hero-theme-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  opacity: 0; transition: opacity 1.6s ease;
  filter: saturate(112%);
}
/* Mientras el video de fondo esté puesto, las 4 imágenes de atrás se
   apagan del todo — si no, se veían las dos capas mezcladas (la
   imagen activa de la rotación por debajo del video). */
.hero-slideshow { transition: opacity 1.6s ease; }
html[data-theme="retail"] .hero-slideshow,
html[data-theme="forever"] .hero-slideshow,
html[data-theme="mop"] .hero-slideshow,
html[data-theme="sod"] .hero-slideshow {
  opacity: 0;
}
html[data-theme="retail"] .hero-theme-video[data-hero-theme-video="retail"],
html[data-theme="forever"] .hero-theme-video[data-hero-theme-video="forever"],
html[data-theme="mop"] .hero-theme-video[data-hero-theme-video="mop"],
html[data-theme="sod"] .hero-theme-video[data-hero-theme-video="sod"] {
  opacity: .4;
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb),.72) 0%, rgba(var(--bg-rgb),.82) 55%, var(--bg) 96%),
              radial-gradient(65% 55% at 50% 10%, rgba(var(--void-rgb),.3), transparent 70%);
}
.hero-grid { display: none; }
.hero-content { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-medallion { position: relative; width: clamp(220px, 30vw, 340px); height: clamp(220px, 30vw, 340px); margin-bottom: 1.4rem; display: grid; place-items: center; }
/* Sin halo — a pedido, el logo se queda sin ningún brillo alrededor. */
.hero-medallion-glow { display: none; }
.hero-medallion .logo-mark--hero { position: relative; }
@keyframes medallionPulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.hero-title {
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  text-wrap: balance;
  max-width: 16ch;
  margin-inline: auto;
  background: linear-gradient(135deg, var(--ink-strong) 20%, var(--accent) 60%, var(--void) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Sombra suave de contacto (sin borde ni brillo de color) para que se
     lea bien sobre cualquier fondo, incluido el video de Forever. */
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)) drop-shadow(0 10px 22px rgba(0, 0, 0, .4));
}
.hero-sub { max-width: 56ch; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.2rem); margin: 1.4rem 0 2rem; }
.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-bottom: 2rem; }
.stat-chip {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .8rem 1.3rem; border-radius: var(--radius-sm);
  background: linear-gradient(165deg, rgba(0, 0, 0, .3), transparent 65%), var(--panel-2);
  border: 1px solid var(--line);
  min-width: 108px;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: stat-chip-in .5s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 100ms);
}
@keyframes stat-chip-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
.stat-chip::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold, var(--accent))); opacity: .7;
}
.stat-chip:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 14px 28px -16px rgba(var(--accent-rgb), .55); }
.stat-chip-icon { font-size: 1.1rem; margin-bottom: .1rem; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .5)); }
.stat-chip strong { font-family: var(--display); font-size: 1.3rem; color: var(--accent); }
.stat-chip span:not(.stat-chip-icon) { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.hero-expansions { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-bottom: 1.6rem; }
.hero-exp-btn {
  position: relative; overflow: hidden;
  padding: .55rem 1.15rem; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: .82rem;
  border: 1px solid var(--line); color: var(--muted); background: var(--panel-2);
  transition: transform .3s var(--ease-out), var(--theme-transition), box-shadow .3s var(--ease-out);
}
.hero-exp-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(var(--accent-rgb), .35), transparent);
  transform: translateX(-120%); transition: transform .6s var(--ease-out);
}
.hero-exp-btn:hover::before { transform: translateX(120%); }
.hero-exp-btn:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-2px); }
.hero-exp-btn.is-active {
  background: linear-gradient(135deg, var(--accent), var(--void)); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 10px 22px -10px rgba(var(--accent-rgb), .6);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.hero-cta .btn-primary { position: relative; }
.hero-cta .btn-primary::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  border: 1px solid rgba(var(--accent-rgb), .55); opacity: 0; pointer-events: none;
  animation: hero-cta-ring 2.6s var(--ease-out) infinite;
}
@keyframes hero-cta-ring {
  0% { opacity: .8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { .hero-cta .btn-primary::after { animation: none; } }

/* Frase emocional en vez del horario plano de antes — el horario ya
   está a un clic ("Calendario Raids" arriba). Corazón que late despacio
   + texto con un brillo lento pasando por encima. */
.hero-tagline {
  margin-top: 1.7rem; display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-size: 1.05rem; color: var(--muted);
}
.hero-tagline strong {
  background: linear-gradient(90deg, var(--ink) 30%, var(--accent) 50%, var(--ink) 70%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hero-tagline-shine 5s linear infinite;
}
@keyframes hero-tagline-shine { 0% { background-position: 200% 0; } 100% { background-position: -20% 0; } }
.hero-tagline-heart { color: var(--accent); display: inline-block; animation: hero-tagline-heartbeat 1.6s ease-in-out infinite; }
@keyframes hero-tagline-heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(1); }
  45% { transform: scale(1.2); }
  60% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tagline strong { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
  .hero-tagline-heart { animation: none; }
}

.scroll-cue {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid var(--line); border-radius: 20px;
}
.scroll-cue span {
  display: block; width: 4px; height: 8px; border-radius: 2px; background: var(--accent);
  margin: 7px auto; animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* =============================================================
   8. About / values / stats band
   ============================================================= */
.about { background: transparent; }
.about .eyebrow, .about .section-title, .about .section-lead { text-align: center; margin-inline: auto; }
.about .eyebrow { display: table; }
.values-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: 3rem; }
@media (min-width: 720px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-item {
  display: flex; flex-direction: column; align-items: center;
  animation: value-item-in .5s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 120ms);
}
@keyframes value-item-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .value-item { animation: none; } }
.value-card {
  position: relative; overflow: hidden;
  width: 100%; padding: 1.8rem; border-radius: var(--radius);
  background: var(--gradient-panel); border: 1px solid var(--line);
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.value-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold, var(--accent))); opacity: .8;
}
.value-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 20px 42px -22px rgba(var(--accent-rgb), .55); }
.value-card h3 { font-size: 1.25rem; margin-bottom: .6rem; color: var(--accent); }
.value-card p { color: var(--muted); font-size: .95rem; }

/* El personaje de cada valor va SUELTO, fuera de la tarjeta — entre el
   fondo de la sección y la tarjeta, no encerrado dentro de su marco —
   y con los pies pisando apenas el borde de arriba de la tarjeta. Se
   tiñe un poco del color de la expansión activa con un velo que sigue
   exactamente su silueta (mask-image con el mismo gif) — así solo se
   tiñe al personaje y no aparece un cuadro de color detrás suyo donde
   la imagen es transparente. */
.value-img-wrap { position: relative; width: 130px; margin-bottom: -45px; z-index: 2; }
.value-img { display: block; width: 100%; height: auto; }
.value-img-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--accent); mix-blend-mode: color; opacity: .38;
  -webkit-mask-image: var(--value-img-url); mask-image: var(--value-img-url);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background-color .2s ease;
}

/* Countdown a la próxima raid — una tarjeta por expansión, cada una
   con el color de esa expansión sin depender del tema activo (se ven
   las 3 a la vez, sin importar qué pestaña esté puesta). */
/* Flex en vez de grid de columnas fijas — la tarjeta de una expansión
   con varios cores (--multi, ej. MoP: Cindergrim + Pandamonium) pide
   el doble de ancho que una de un solo core, así sus bloques caben
   alineados en fila en vez de apilarse, sin importar cuántas tarjetas
   haya en total. */
.raid-countdown-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.raid-countdown-card {
  flex: 1 1 220px; max-width: 360px;
  padding: 1.4rem 1.2rem; border-radius: var(--radius); text-align: center;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-top: 3px solid var(--rc-color);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: value-item-in .5s var(--ease-out) backwards;
}
.raid-countdown-wrap > *:nth-child(1) { animation-delay: 0ms; }
.raid-countdown-wrap > *:nth-child(2) { animation-delay: 120ms; }
.raid-countdown-wrap > *:nth-child(3) { animation-delay: 240ms; }
.raid-countdown-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px -20px rgba(var(--rc-color-rgb, var(--accent-rgb)), .5); }
.raid-countdown-card--multi { flex: 2 1 460px; max-width: 640px; }
.raid-countdown-exp { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--rc-color); margin-bottom: .7rem; }
/* Cuando una expansión tiene varios cores (ej. MoP: Cindergrim +
   Pandamonium) van juntos en la misma tarjeta, cada uno en su propio
   bloque con fondo propio — separados visualmente sin necesitar
   tarjetas aparte. */
.raid-countdown-cores { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.raid-countdown-core-block {
  flex: 1 1 190px; min-width: 165px;
  background: rgba(0, 0, 0, .18); border-radius: var(--radius-sm);
  padding: .65rem .5rem .75rem;
}
.raid-countdown-core { display: block; color: var(--muted); font-size: .78rem; margin-bottom: .9rem; }
.raid-countdown-timer { display: flex; justify-content: center; gap: .7rem; margin-bottom: .7rem; }
.raid-countdown-unit { display: flex; flex-direction: column; align-items: center; min-width: 2.4rem; }
.raid-countdown-unit strong { font-family: var(--display); font-size: 1.5rem; color: var(--ink); line-height: 1; }
.raid-countdown-unit small { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; }
.raid-countdown-local { display: block; color: var(--muted-2); font-size: .74rem; text-transform: capitalize; }

/* Countdown al lanzamiento (hoy solo Forever) — reemplaza la tarjeta
   de raid semanal de esa expansión en .raid-countdown-wrap (no tiene
   sentido un horario de raid para un juego que no lanzó todavía), pero
   usa exactamente el mismo fondo/borde que sus tarjetas vecinas de
   Retail/MoP (nada de paleta fija) para que la fila se vea uniforme y
   cambie de color junto con el resto del sitio al cambiar de tema. */
.launch-countdown {
  flex: 1 1 220px; max-width: 360px;
  padding: 1.3rem 1.2rem; border-radius: var(--radius); text-align: center;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-top: 3px solid var(--rc-color);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.launch-countdown:hover { transform: translateY(-5px); box-shadow: 0 18px 36px -20px rgba(var(--accent-rgb), .5); }
/* Adentro reutiliza .raid-countdown-core-block/.raid-countdown-timer/
   .raid-countdown-unit — las mismas clases que Retail/MoP (sin
   overrides de margen propios, para que el título y el cuadrito
   empiecen exactamente a la misma altura en las tres tarjetas). */
.launch-countdown .raid-countdown-core-block { width: 100%; }

/* =============================================================
   9. Progression tabs
   ============================================================= */
.progression { position: relative; overflow: clip; }
.progression > .container > .eyebrow, .progression > .container > .section-title, .progression > .container > .section-lead { text-align: center; margin-inline: auto; }
.progression > .container > .eyebrow { display: table; }
.progression::before, .apply::before, .store::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: conic-gradient(from 200deg at 85% 0%, rgba(255,255,255,.03), transparent 22%),
              conic-gradient(from 20deg at 10% 100%, rgba(var(--void-rgb),.22), transparent 30%);
  mix-blend-mode: screen;
}
.progression::after, .apply::after, .store::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: rgba(0,0,0,.22);
}
.progression > .container, .apply > .container, .store > .container { position: relative; z-index: 1; }

.core-card {
  position: relative; overflow: hidden;
  padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--radius-sm);
  background: linear-gradient(165deg, rgba(0, 0, 0, .28), transparent 60%), var(--panel-2);
  border: 1px solid var(--line);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: core-card-in .5s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes core-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.core-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold, var(--accent))); opacity: .8;
}
.core-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 34px -20px rgba(var(--accent-rgb), .5); }
.core-card h4 { font-size: 1rem; display: flex; align-items: baseline; gap: .4rem; }
.core-size { font-family: var(--sans); font-size: .7rem; color: var(--accent); font-weight: 700; }
.core-meta, .core-schedule { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.core-note { font-size: .78rem; color: var(--gold); margin-top: .4rem; font-weight: 600; }
.tab-cores { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 1.4rem; }

/* Mismo esquema de color por core (rojo/verde/morado/…) que ya usan
   Reportes de Raid y DataValyrians — un solo lugar donde se elige
   (Cores → Color), se ve igual en los tres lados. */
.core-card[data-core-color="red"] { --core-rgb: 240, 84, 84; }
.core-card[data-core-color="green"] { --core-rgb: 61, 220, 132; }
.core-card[data-core-color="purple"] { --core-rgb: 176, 124, 255; }
.core-card[data-core-color="blue"] { --core-rgb: 74, 158, 255; }
.core-card[data-core-color="orange"] { --core-rgb: 255, 152, 56; }
.core-card[data-core-color="pink"] { --core-rgb: 255, 110, 186; }
.core-card[data-core-color="cyan"] { --core-rgb: 40, 212, 230; }
.core-card[data-core-color="gold"] { --core-rgb: 240, 196, 72; }
.core-card[data-core-color] { border-color: rgba(var(--core-rgb), .35); }
.core-card[data-core-color]::before { background: linear-gradient(90deg, rgb(var(--core-rgb)), rgba(var(--core-rgb), .35)); opacity: 1; }
.core-card[data-core-color] .core-size { color: rgb(var(--core-rgb)); }
.core-card[data-core-color]:hover { border-color: rgba(var(--core-rgb), .6); box-shadow: 0 16px 34px -20px rgba(var(--core-rgb), .55); }

/* Tira de 7 puntos Lun..Dom — el ritmo semanal de raid de ese core de
   un vistazo, sin leer una lista de días. */
.core-schedule-strip { display: flex; gap: .3rem; margin-top: .5rem; }
.core-schedule-strip span {
  display: flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; font-size: .62rem; font-weight: 700;
  background: rgba(255, 255, 255, .06); color: var(--muted-2); transition: transform .25s var(--ease-out);
}
.core-schedule-strip span.is-active {
  background: rgb(var(--core-rgb, var(--accent-rgb))); color: var(--accent-ink, #fff);
}
.core-card:hover .core-schedule-strip span.is-active { transform: scale(1.12); }

/* Tabs nav — "epic" treatment: glow sweep + active underline pulse */
.tabs-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-bottom: 2rem; position: relative; }
.tab-btn {
  position: relative; overflow: clip;
  padding: .75rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: .92rem;
  font-family: var(--display); letter-spacing: .02em;
  border: 1px solid rgba(var(--accent-rgb), .35); color: var(--accent); background: rgba(var(--accent-rgb), .08);
  transition: transform .35s var(--ease-out), var(--theme-transition);
}
.tab-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(var(--accent-rgb),.35), transparent);
  transform: translateX(-120%); transition: transform .6s var(--ease-out);
}
.tab-btn:hover::before { transform: translateX(120%); }
.tab-btn:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-2px); }
.tab-btn[aria-selected="true"] {
  background: linear-gradient(135deg, var(--accent), var(--void)); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 10px 26px -10px rgba(var(--accent-rgb), .6);
  animation: tabPop .4s var(--ease-bounce);
}
@keyframes tabPop { 0% { transform: scale(.9); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }

.tab-panel { display: none; }
.tab-panel.is-active { display: grid; gap: 2.2rem; grid-template-columns: 1fr; animation: fadeIn .5s var(--ease-out); }
@media (min-width: 900px) {
  /* stretch (no "start"): la galería iguala la altura real del texto de
     al lado en vez de quedar con su propio aspect-ratio fijo — si un
     tab tiene más texto (más highlights, la tarjeta de core, etc.), la
     galería crece con él en vez de dejar aire de más o de menos.
     min-width: 0 en las dos columnas es el arreglo clave: sin esto, el
     <video> (por su tamaño real en píxeles) empuja el ancho de su
     columna más allá de lo que le toca y aprieta/superpone la de al
     lado — un problema clásico de CSS Grid con contenido ancho. */
  .tab-panel.is-active { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .tab-media, .tab-copy { min-width: 0; }
  /* flex en vez de height:100% anidado — más predecible entre
     navegadores para que la galería llene exactamente la altura que
     le da el grid, sin porcentajes encadenados. */
  .tab-media { height: 100%; display: flex; }
  .gallery { aspect-ratio: auto; flex: 1 1 auto; min-width: 0; min-height: 320px; }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tab-media { position: relative; }
.tab-kicker { color: var(--accent); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.tab-panel h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .8rem; }
.tab-panel p.summary { color: var(--muted); margin-bottom: 1.2rem; }
.tab-highlights li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; color: var(--ink); font-size: .95rem; }
.tab-highlights li::before { content: "✦"; position: absolute; left: 0; color: var(--accent); }
.tab-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.tab-links a { font-weight: 700; color: var(--accent); font-size: .9rem; }
.tab-links a:hover { text-decoration: underline; }

/* Gallery / carousel — min. 3 photos per expansion */
.gallery {
  position: relative; border-radius: var(--radius); overflow: clip;
  border: 1px solid var(--line); aspect-ratio: 16/9.5; background: var(--panel);
  box-shadow: 0 30px 70px -25px rgba(var(--bg-rgb), .6), 0 0 0 1px rgba(var(--accent-rgb), .08);
}
.gallery-track { position: relative; width: 100%; height: 100%; }
.gallery-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease-out);
}
.gallery-slide.is-active { opacity: 1; visibility: visible; }
.gallery-slide img, .gallery-slide video { width: 100%; height: 100%; object-fit: cover; }
/* Zoom lento mientras la foto/video está activa — sin esto la galería
   se sentía "quieta" entre un cambio de slide y el siguiente. */
.gallery-slide.is-active img, .gallery-slide.is-active video { animation: gallery-ken-burns 9s var(--ease-out) forwards; }
@keyframes gallery-ken-burns { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) {
  .gallery-slide.is-active img, .gallery-slide.is-active video { animation: none; }
}
.gallery-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--bg-rgb), .55); color: var(--ink); font-size: 1.2rem; backdrop-filter: blur(6px);
  transition: background .25s var(--ease-out), transform .25s var(--ease-out);
}
.gallery-nav:hover { background: rgba(var(--bg-rgb), .8); transform: translateY(-50%) scale(1.08); }
.gallery-prev { left: .6rem; }
.gallery-next { right: .6rem; }
.gallery-dots { position: absolute; bottom: .7rem; left: 50%; translate: -50% 0; z-index: 3; display: flex; gap: .4rem; }
.gallery-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .25s var(--ease-out), transform .25s var(--ease-out); }
.gallery-dot.is-active { background: var(--accent); transform: scale(1.3); }
.gallery-live-avatar, .gallery-themed-panel {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  background: var(--gradient-void); text-align: center; padding: 1rem;
}
.gallery-live-avatar img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--accent-rgb),.4); }
.gallery-live-caption, .gallery-loading { font-size: .8rem; color: var(--muted); }
.gallery-themed-panel span { font-weight: 700; color: var(--ink); font-size: .95rem; max-width: 22ch; }
.gallery-themed-panel::before { content: "✦"; font-size: 1.8rem; color: var(--accent); }

/* Live raid-progress tracker (WarcraftLogs-inspired boss/progress cards,
   powered by a real Raider.IO guild-profile fetch) */
.raid-tracker {
  grid-column: 1 / -1;
  margin-top: .5rem;
  padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--line);
}
.raid-tracker-label { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fire); margin-bottom: 1rem; }
.raid-tracker-loading, .raid-tracker-error { color: var(--muted); font-size: .88rem; }
.raid-tracker-error a { color: var(--accent); font-weight: 700; }
.raid-row + .raid-row { margin-top: .85rem; }
.raid-row-title { font-weight: 700; font-size: .92rem; margin: 0 0 .5rem; }
.raid-row-sizes { display: grid; grid-template-columns: 1fr; gap: .8rem 1.4rem; }
@media (min-width: 560px) { .raid-row-sizes { grid-template-columns: 1fr 1fr; } }
.raid-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; margin-bottom: .35rem; }
.raid-row-name { font-weight: 700; font-size: .92rem; }
.raid-row-badge {
  font-size: .74rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px;
  background: rgba(var(--void-rgb),.18); color: #c9b6ff; border: 1px solid rgba(var(--void-rgb),.4); white-space: nowrap;
}
.raid-row-badge.is-cleared { background: rgba(166,226,46,.16); color: var(--fire); border-color: rgba(166,226,46,.4); }
.raid-row-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: clip; }
.raid-row-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--void)); border-radius: 999px; transition: width .8s var(--ease-out), var(--theme-transition); }
.raid-tracker-updated { margin-top: 1rem; font-size: .76rem; color: var(--muted-2); }

/* Explorador de zonas de Forever — video real de fondo por zona, tal como
   en worldofwarcraft.blizzard.com/forever. */
.zone-explorer { grid-column: 1 / -1; margin-top: .5rem; }
.zone-explorer-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: .9rem; }
.zone-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 1rem; }
.zone-tab {
  padding: .5rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: .85rem;
  font-family: var(--display); border: 1px solid var(--line); color: var(--muted); background: var(--panel-2);
  transition: transform .3s var(--ease-out), var(--theme-transition);
}
.zone-tab:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-2px); }
.zone-tab[aria-selected="true"] { background: linear-gradient(135deg, var(--accent), var(--void)); color: var(--accent-ink); border-color: transparent; }
.zone-stage { position: relative; border-radius: var(--radius); overflow: clip; aspect-ratio: 16 / 9; background: #05070a; }
.zone-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zone-veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.8) 100%); }
.zone-desc { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem 1.4rem; color: #fff; font-size: .92rem; line-height: 1.5; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.raid-tracker-updated a { color: var(--accent); font-weight: 700; }

/* =============================================================
   9b. Horizon — próxima aventura (World of Warcraft Forever)
   ============================================================= */
.horizon { padding-block: clamp(3rem, 6vw, 5rem); }
.horizon-inner {
  position: relative;
  border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem);
  background: linear-gradient(135deg, rgba(255,207,107,.1), rgba(var(--void-rgb),.08));
  border: 1px solid rgba(255,207,107,.28);
  overflow: clip;
}
.horizon-inner::before {
  content: ""; position: absolute; inset: -40% -10% -60% -10%;
  background: radial-gradient(45% 55% at 15% 20%, rgba(255,207,107,.28), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.horizon-copy { position: relative; max-width: 68ch; }
.horizon .eyebrow { color: var(--gold); }
.horizon-bullets { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.horizon-bullets li { position: relative; padding-left: 1.6rem; font-size: .95rem; color: var(--ink); }
.horizon-bullets li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }

/* =============================================================
   10. Achievement banner
   ============================================================= */
.achievement { padding-block: clamp(3rem, 6vw, 5rem); }
.achievement-grid { display: grid; grid-template-columns: 1fr; gap: 2.2rem; }
@media (min-width: 960px) { .achievement-grid { grid-template-columns: 1.1fr 1fr; align-items: center; } }
/* Misma tarjeta que la galería (borde + esquinas redondeadas + sombra),
   para que la foto encaje con cualquier tema en vez de sangrar al borde. */
.achievement-media {
  position: relative; min-height: 280px; aspect-ratio: 16/10; max-height: 480px;
  border-radius: var(--radius); overflow: clip; border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 30px 70px -25px rgba(var(--bg-rgb), .6), 0 0 0 1px rgba(var(--accent-rgb), .08);
}
.achievement-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transition: transform 1.2s var(--ease-out);
}
.achievement-media:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .achievement-media:hover img { transform: none; } }
.achievement-content { display: flex; flex-direction: column; justify-content: center; }
.roster-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.roster-list li {
  padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2);
  font-weight: 700; font-size: .88rem; color: var(--ink);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
  animation: value-item-in .4s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.roster-list li:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 8px 18px -12px rgba(var(--accent-rgb), .5); }

/* =============================================================
   10a2. Nuestros Raiders Valyrianos — roster real (Retail + MoP)
   ============================================================= */
.raiders { background: var(--gradient-void); background-attachment: fixed; }
.raiders .eyebrow, .raiders .section-title, .raiders .section-lead { text-align: center; margin-inline: auto; }
.raiders .eyebrow { display: table; }
.raid-reports .eyebrow, .raid-reports .section-title, .raid-reports .section-lead { text-align: center; margin-inline: auto; }
.raid-reports .eyebrow { display: table; }
.leaderboard-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 640px) { .leaderboard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .leaderboard-grid { grid-template-columns: repeat(3, 1fr); } }
.leaderboard-card {
  position: relative; overflow: hidden;
  padding: 1.2rem; border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(0, 0, 0, .28), transparent 60%), var(--panel-2);
  border: 1px solid var(--line);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: leaderboard-card-in .5s var(--ease-out) backwards;
}
.leaderboard-card:nth-child(1) { animation-delay: 0ms; }
.leaderboard-card:nth-child(2) { animation-delay: 90ms; }
.leaderboard-card:nth-child(3) { animation-delay: 180ms; }
@keyframes leaderboard-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.leaderboard-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold, var(--accent))); opacity: .85;
}
.leaderboard-card:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 18px 40px -22px rgba(var(--accent-rgb), .5); }
.leaderboard-title { font-family: var(--display); font-size: .95rem; text-align: center; margin: 0 0 .7rem; color: var(--ink); }
.leaderboard-row {
  position: relative; display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .5rem .6rem; border-radius: var(--radius-sm); background: none;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
  animation: leaderboard-row-in .4s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes leaderboard-row-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.leaderboard-row:hover { background: rgba(255, 255, 255, .07); transform: translateX(2px); }
.leaderboard-rank { flex: none; width: 1.6rem; text-align: center; font-size: 1rem; }
.leaderboard-who { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1; }
.leaderboard-class-icon { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); flex: none; }
.leaderboard-who-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.leaderboard-name { font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.leaderboard-spec { font-size: .72rem; color: var(--muted); }
.leaderboard-value { font-family: var(--display); font-size: .88rem; color: var(--ink); flex: none; }

.raiders-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 2rem; margin-bottom: 1.2rem;
}
.raiders-tabs { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.raiders-tab {
  padding: .5rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: .84rem;
  font-family: var(--display); border: 1px solid var(--line); color: var(--muted); background: var(--panel-2);
  transition: var(--theme-transition), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.raiders-tab:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-2px); }
.raiders-tab.is-active {
  background: linear-gradient(135deg, var(--accent), var(--void)); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 10px 24px -12px rgba(var(--accent-rgb), .6); animation: tabPop .4s var(--ease-bounce);
}
.raiders-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.raiders-search, .raiders-select {
  padding: .5rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-family: var(--sans); font-size: .84rem;
  transition: border-color .2s var(--ease-out);
}
.raiders-search:hover, .raiders-select:hover { border-color: rgba(var(--accent-rgb), .5); }
.raiders-search { min-width: 150px; flex: 1 1 170px; }
.raiders-search:focus, .raiders-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.raiders-search-btn {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; flex: 0 0 auto;
  padding: .5rem .9rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: linear-gradient(135deg, var(--accent), var(--void)); color: var(--accent-ink);
  font-weight: 700; font-size: .82rem; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.raiders-search-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(var(--accent-rgb), .6); }
.raiders-retry {
  display: inline-block; margin: 0 .4rem; padding: .3rem .8rem; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: .82rem; background: none;
}
.raiders-retry:hover { background: rgba(var(--accent-rgb), .12); }

/* Espera "divertida" del roster — un retrato al azar con un anillo que
   pulsa detrás y un mensaje que va rotando, en vez del texto plano de
   siempre. Se ve breve casi siempre (roster_feed.php sirve de la base,
   no espera nada externo), pero cuando tarda un poco ya no se siente
   una pantalla muerta. */
.raiders-loading { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem 0; }
.raiders-loading-ring {
  position: relative; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; overflow: visible;
}
.raiders-loading-ring::before, .raiders-loading-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), .5);
  animation: raiders-loading-pulse 1.8s var(--ease-out) infinite;
}
.raiders-loading-ring::after { animation-delay: .6s; }
@keyframes raiders-loading-pulse {
  0% { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.5); opacity: 0; }
}
.raiders-loading-ring img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(var(--accent-rgb), .6); box-shadow: 0 0 24px -4px rgba(var(--accent-rgb), .6);
  animation: raiders-loading-bob 2.4s ease-in-out infinite;
}
@keyframes raiders-loading-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.raiders-loading-msg {
  font-family: var(--display); font-size: .92rem; color: var(--muted); letter-spacing: .02em;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.raiders-loading-msg.is-swapping { opacity: 0; transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) {
  .raiders-loading-ring::before, .raiders-loading-ring::after, .raiders-loading-ring img { animation: none; }
}

.raiders-table-wrap {
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2);
  overflow-x: auto;
  /* ~10 filas visibles — el resto se ve bajando el scroll interno, para
     que la lista completa no alargue la página. */
  max-height: 760px;
  overflow-y: auto;
}
.raiders-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel);
}
.raiders-status { padding: 2.2rem 1.5rem; text-align: center; color: var(--muted); font-size: .92rem; }
.raiders-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 760px; table-layout: fixed; }
.raiders-table th {
  text-align: left; padding: .8rem 1.1rem; font-family: var(--display); font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); border-bottom: 1px solid var(--line);
}
.raiders-table td { padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
.raiders-table tbody tr {
  position: relative; border-left: 2px solid transparent;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
  animation: raiders-row-in .35s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes raiders-row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.raiders-table tbody tr:last-child td { border-bottom: none; }
.raiders-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .1), transparent 70%);
  border-left-color: var(--class-color, var(--accent));
}
@media (prefers-reduced-motion: reduce) { .raiders-table tbody tr { animation: none; } }
.raiders-name-cell a { color: var(--ink); font-weight: 700; }
.raiders-name-cell a:hover { color: var(--accent); }
.raiders-name-wrap { display: flex; align-items: center; gap: .55rem; }
.raiders-class-icon { width: 22px; height: 22px; border-radius: 5px; flex: none; border: 1px solid var(--line); }
.raiders-realm { display: block; font-size: .74rem; color: var(--muted-2); margin-top: .1rem; }
.raiders-subline { display: block; font-size: .74rem; color: var(--muted-2); margin-top: .1rem; }
.raiders-class-badge {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .85rem;
  color: var(--class-color, var(--accent));
}
.raiders-class-badge::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--class-color, var(--accent));
  box-shadow: 0 0 8px var(--class-color, var(--accent));
}
.raiders-role-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); }
.raiders-role-badge svg { flex-shrink: 0; }
.raiders-ilvl { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1rem; }
.raiders-parse {
  font-weight: 800; font-size: .95rem; color: var(--parse-color, var(--muted));
  text-shadow: 0 0 10px color-mix(in srgb, var(--parse-color, transparent) 45%, transparent);
}
.raiders-parse--empty { font-weight: 600; color: var(--muted-2); text-shadow: none; }
.raiders-parse-th, .raiders-parse-cell { text-align: center; }
.raiders-parse-diff { display: block; text-align: center; font-size: .72rem; color: var(--muted-2); margin-top: .1rem; }
.raiders-link { display: block; color: var(--accent); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.raiders-link + .raiders-link { margin-top: .3rem; }
.raiders-link--logs { color: var(--gold); }
.raiders-link--empty { color: var(--muted); font-weight: 400; }
.raiders-note { margin-top: 1rem; font-size: .82rem; color: var(--muted-2); }
.raiders-note a { color: var(--accent); }

/* Reportes de Raid — cards con la progresión real (jefes/wipes) de
   cada log, mismo lenguaje visual que el toolbar/tabla de Raiders. */
.raid-reports-toolbar {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: center;
  gap: 1rem; margin-top: 2rem; margin-bottom: 2rem;
}
.raid-reports-date-label {
  display: flex; flex-direction: column; gap: .3rem; font-size: .76rem; color: var(--muted-2);
  font-family: var(--display); letter-spacing: .03em; text-transform: uppercase;
}
.raid-reports-date-label input {
  padding: .5rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-family: var(--sans); font-size: .84rem;
}
.raid-reports-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 1.3rem;
}
/* Reportes de Raid usa un contenedor más ancho que el resto de la web
   (hasta 1500px en vez de los 1180px de siempre) — el carrusel y sus
   cards son 100%/cqw de ESTE ancho (sin vw, sigue siendo la cuenta
   robusta de siempre), así que agrandar esto agranda las cards de
   forma pareja, sin tocar la fórmula que ya está probada. */
#reportes .container { max-width: 1620px; }
/* Flechas a los costados del carrusel de Reportes de Raid — cambian de
   página a mano (ya no se mueve sola con un timer, era justo el pedido:
   que no se le muevan las cards de encima a quien está mirando otra
   página). Colores del tema activo (var(--accent)), con su propio
   brillo cuando hay datos nuevos del lado de la página 1. */
.raid-reports-pager-wrap {
  display: flex; align-items: center; gap: .6rem;
  /* Habilita "cqw" medido sobre ESTE ancho (flechas + carrusel juntos)
     — el carrusel de abajo resta el espacio de las flechas para saber
     cuánto le queda de verdad a él solo. */
  container-type: inline-size;
}
/* OJO con esto: antes el carrusel media "100% del contenedor" y cada
   card se achicaba con un colchón de píxeles para "dejar aire" — pero
   ese aire quedaba DESPUÉS de la 3ra card y ANTES del borde del
   carrusel, que es EXACTAMENTE el lugar por donde se cuela la 4ta
   card (nada la frena ahí). Achicar las cards nunca iba a arreglarlo,
   por más colchón que se le pusiera. Ahora es al revés: el carrusel
   mismo mide EXACTO lo que ocupan 3 cards + sus 2 huecos, ni un pixel
   más — así no queda ningún resquicio por donde asome la siguiente.
   flex:0 (no crece) en vez de flex:1, porque ahora su ancho ya es un
   valor exacto, no "lo que sobre". */
.raid-reports-pager-wrap .raid-reports-carousel { flex: 0 0 auto; min-width: 0; }
.raid-reports-arrow {
  flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(165deg, rgba(0, 0, 0, .3), transparent 60%), var(--panel-2);
  border: 1px solid var(--line); color: var(--accent); cursor: pointer;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out), opacity .25s var(--ease-out);
}
.raid-reports-arrow svg { width: 20px; height: 20px; }
.raid-reports-arrow:hover:not(:disabled) {
  transform: scale(1.12); border-color: rgba(var(--accent-rgb), .7);
  box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), .6);
}
.raid-reports-arrow:disabled { opacity: .25; cursor: default; }
.raid-reports-arrow[hidden] { display: none; }
/* Brillo pulsante — hay pulls/wipes nuevos del lado de la página 1
   mientras la persona mira otra página; no se mueve sola, solo avisa. */
.raid-reports-arrow.has-update { border-color: rgba(var(--accent-rgb), .8); animation: raid-reports-arrow-glow 1.6s ease-in-out infinite; }
@keyframes raid-reports-arrow-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); }
  50% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .raid-reports-arrow { transition: none; animation: none; } }

/* Una sola fila (mismo carrusel del Foro) — las cards quedan a su
   altura natural (no se estiran entre sí) porque cada una se despliega
   distinto. */
.raid-reports-carousel {
  /* Nada de "100vw" ni de "100%" del contenedor — esas dos formas se
     probaron y las dos se rompían: "vw" mide distinto en celulares
     reales, y "100%" deja un resto de espacio libre después de la 3ra
     card por donde se cuela la 4ta, sin importar cuánto colchón se le
     reste al ancho de cada card (el resto siempre queda ahí, ese es
     justo el problema). La solución de fondo: el carrusel mide EXACTO
     lo que ocupan 3 cards + sus 2 huecos (ver --rr-card-w y el ancho
     de abajo) — nada de sobra, nada por donde asomar.
     "cqw" ahora mide sobre .raid-reports-pager-wrap (flechas +
     carrusel juntos, ver arriba) — a esa medida se le resta el ancho
     de las 2 flechas y sus huecos para saber qué le queda de verdad al
     carrusel solo. */
  --rr-arrows-overhead: calc(2 * 46px + 2 * .6rem);
  --rr-card-w: calc((100cqw - var(--rr-arrows-overhead) - 2rem - 4px) / 3);
  margin-top: 0; padding: .6rem 0 1rem; cursor: default; overflow: hidden;
  width: calc(var(--rr-card-w) * 3 + 2rem);
}
.raid-reports-carousel.is-paging { cursor: grab; }
.raid-reports-carousel.is-dragging { cursor: grabbing; }
.raid-reports-carousel .raid-reports-grid {
  display: flex; align-items: flex-start; gap: 1rem; width: max-content; min-width: 100%;
  justify-content: flex-start;
}
/* Avanza de a página de 3 (ver initReportsPager en main.js) — la
   transición es del propio grid moviéndose, no un salto brusco. Se
   apaga mientras se arrastra con el mouse (ahí el movimiento sigue al
   cursor 1 a 1, sin demora) y vuelve a prenderse al soltar, para que
   el "snap" a la página más cercana sí se sienta suave. */
.raid-reports-carousel.is-paging:not(.is-dragging) .raid-reports-grid { transition: transform .6s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .raid-reports-carousel .raid-reports-grid { transition: none; } }
/* Mismo --rr-card-w que ya fijó el ancho del carrusel arriba — así los
   dos SIEMPRE coinciden exacto, por definición, no por casualidad. */
.raid-reports-carousel .raid-report-card {
  flex: 0 0 var(--rr-card-w); user-select: text;
}
.raid-reports-carousel .raid-reports-status { flex: 1; }
.raid-reports-status { grid-column: 1 / -1; padding: 2.2rem 1.5rem; text-align: center; color: var(--muted); font-size: .92rem; }
.raid-report-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  /* --panel-2 es casi transparente (pensado para ir ENCIMA de otro
     fondo) — usarlo como fondo de toda la card dejaba pasar el color
     de la sección de atrás y lavaba el contraste del texto. Acá hace
     falta un fondo oscuro y opaco de verdad. */
  background: linear-gradient(165deg, rgba(0, 0, 0, .3), transparent 60%), rgba(var(--bg-rgb), .92);
  padding: 1.1rem 1.05rem 1rem; display: flex; flex-direction: column; gap: .65rem;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out), opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
/* Mismo .reveal del resto del sitio, pero escalonado card por card
   (--i, puesto en JS) para que no aparezcan todas de una — más vivo,
   estilo guildsofwow.com. */
.raid-report-card.reveal { transition-delay: calc(var(--i, 0) * 70ms); }
.raid-report-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold, var(--accent)));
  opacity: .7;
}
.raid-report-card:hover {
  transform: translateY(-5px); border-color: rgba(var(--accent-rgb), .5);
  box-shadow: 0 18px 40px -20px rgba(var(--accent-rgb), .45);
}
/* Se pone en la card unos segundos justo después de que el sondeo en
   segundo plano (ver pollRaidReports en main.js) le detecta un pull o
   un wipe nuevo — un resplandor que va y viene, para que se note que
   "esto se acaba de actualizar solo" sin tener que recargar nada. */
.raid-report-card--live-update {
  animation: raid-report-live-flash 1.8s var(--ease-out);
}
@keyframes raid-report-live-flash {
  0% { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .35), 0 18px 40px -20px rgba(var(--accent-rgb), .6); }
  100% { border-color: var(--line); box-shadow: none; }
}
/* Reporte del core que está raideando AHORA MISMO (día y horario de
   ese core activos en este momento, ver isReportLiveNow en main.js) —
   un destello de borde que parpadea sin parar (no una sola vez como
   --live-update de arriba) para que salte a la vista cuál es el log en
   vivo entre varias cards. */
/* Usa el --core-rgb de ese core en particular (definido más abajo por
   data-core-color) cuando la card lo tiene — así el brillo "en vivo"
   sale del color propio de ese core, no siempre rojo. Sin core-color
   (reporte suelto, sin core asignado) cae al rojo de siempre. */
.raid-report-card--live {
  --live-rgb: var(--core-rgb, 255, 60, 60);
  animation: raid-report-live-pulse 1.8s ease-in-out infinite;
}
@keyframes raid-report-live-pulse {
  0%, 100% { border-color: rgba(var(--live-rgb), .45); box-shadow: 0 0 0 0 rgba(var(--live-rgb), .3); }
  50% { border-color: rgba(var(--live-rgb), .95); box-shadow: 0 0 0 5px rgba(var(--live-rgb), .18), 0 18px 40px -18px rgba(var(--live-rgb), .55); }
}
.raid-report-live-badge {
  position: absolute; top: .25rem; right: 1rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .08rem .55rem; border-radius: 999px; font-family: var(--display);
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, #ff4040, #b30f0f);
  animation: raid-report-live-badge-pulse 1.4s ease-in-out infinite;
}
@keyframes raid-report-live-badge-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .raid-report-card--live, .raid-report-live-badge { animation: none; } }

/* Colores temáticos por core (rojo/negro, verde/negro, morado/negro…).
   Se redefinen --accent* y --line/--panel SOLO dentro de la card, así
   todo lo que ya usaba el acento (barra de arriba, hover, jefe abierto,
   píldora del core) se tiñe solo sin tocar cada regla. */
.raid-report-card[data-core-color="red"] { --core-rgb: 240, 84, 84; }
.raid-report-card[data-core-color="green"] { --core-rgb: 61, 220, 132; }
.raid-report-card[data-core-color="purple"] { --core-rgb: 176, 124, 255; }
.raid-report-card[data-core-color="blue"] { --core-rgb: 74, 158, 255; }
.raid-report-card[data-core-color="orange"] { --core-rgb: 255, 152, 56; }
.raid-report-card[data-core-color="pink"] { --core-rgb: 255, 110, 186; }
.raid-report-card[data-core-color="cyan"] { --core-rgb: 40, 212, 230; }
.raid-report-card[data-core-color="gold"] { --core-rgb: 240, 196, 72; }
.raid-report-card[data-core-color] {
  --accent-rgb: var(--core-rgb);
  --accent: rgb(var(--core-rgb));
  --line: rgba(var(--core-rgb), .24);
  --panel: rgba(var(--core-rgb), .07);
  border-color: rgba(var(--core-rgb), .38);
  background: linear-gradient(165deg, rgba(var(--core-rgb), .2), rgba(0, 0, 0, .5) 45%), #060506;
}
.raid-report-card[data-core-color]::before {
  background: linear-gradient(90deg, rgb(var(--core-rgb)), rgba(var(--core-rgb), .3));
  opacity: .95;
}
.raid-report-card[data-core-color] .raid-report-new-badge { background: rgb(var(--core-rgb)); color: #fff; }
.raid-report-card[data-core-color] .raid-report-core-pill {
  background: rgba(var(--core-rgb), .14); border-color: rgba(var(--core-rgb), .55); color: rgb(var(--core-rgb));
}
.raid-report-new-badge {
  position: absolute; top: .25rem; right: 1rem; z-index: 1;
  padding: .08rem .5rem; border-radius: 999px; font-family: var(--display);
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--void));
  animation: raid-report-badge-pulse 2.2s ease-in-out infinite;
}
@keyframes raid-report-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); }
  50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
}
/* Fila 1: título + iconos; fila 2: fecha + core al borde derecho. */
.raid-report-card-head { display: flex; flex-direction: column; gap: .2rem; }
.raid-report-card-row { display: flex; align-items: center; justify-content: space-between; gap: .3rem .4rem; flex-wrap: wrap; }
.raid-report-card-head h3 { margin: 0; font-size: 1.15rem; min-width: 0; }
.raid-report-card-meta { font-size: .74rem; white-space: nowrap; font-weight: 600; color: var(--muted); }
.raid-report-core-pill {
  flex: none; margin-left: auto; padding: .12rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap;
  font-family: var(--sans); letter-spacing: .01em;
  border: 1px solid rgba(var(--accent-rgb), .4); color: var(--accent);
}
.raid-report-platforms { display: flex; gap: .4rem; flex: none; }
.raid-report-platform-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--rp-color, var(--line)); color: var(--rp-color, var(--muted));
  background: color-mix(in srgb, var(--rp-color, var(--muted)) 12%, transparent);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
}
.raid-report-platform-btn svg { width: 15px; height: 15px; }
.raid-report-platform-btn:hover {
  transform: translateY(-2px) scale(1.1);
  background: color-mix(in srgb, var(--rp-color, var(--muted)) 25%, transparent);
  box-shadow: 0 6px 14px -6px var(--rp-color, transparent);
}
/* Colores propios de cada plataforma, para reconocerlas de un
   vistazo sin tener que leer el tooltip. */
.raid-report-platform-btn[data-platform="wcl"] { --rp-color: #3aa0ff; }
.raid-report-platform-btn[data-platform="wipefest"] { --rp-color: #00c2cb; }
.raid-report-platform-btn[data-platform="wowanalyzer"] { --rp-color: #f0a020; }
.raid-report-platform-btn--sm { width: 22px; height: 22px; }
.raid-report-platform-btn--sm svg { width: 11px; height: 11px; }
.raid-report-card-summary { margin: 0; font-size: .85rem; color: var(--muted); }
.raid-report-card-summary--empty { font-style: italic; }
.raid-report-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.raid-report-stat {
  display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.15;
  padding: .28rem .3rem .3rem; border-radius: 10px; background: var(--panel);
  border: 1px solid var(--line);
}
.raid-report-stat-label { font-size: .62rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-family: var(--sans); }
/* var(--sans), no var(--display) — la tipografía gótica/fantasía del
   sitio queda bien en títulos, pero en un dato como "hace 9h" se lee
   informal/torcida; acá conviene una de palo seco, clara y moderna. */
.raid-report-stat-value { font-family: var(--sans); font-weight: 800; font-size: .98rem; letter-spacing: -.01em; color: var(--ink); }
.raid-report-stat.is-kill .raid-report-stat-value { color: #3ddc84; }
.raid-report-stat.is-wipe .raid-report-stat-value { color: #ff6b6b; }

/* Progresión por jefe — un <details> por boss, así se despliega cada
   uno con sus pulls sin JS aparte. El mismo "name" en todos los de una
   card los agrupa como acordeón EXCLUSIVO nativo — al abrir uno, el
   navegador cierra solo los demás de esa misma card. Sin max-height ni
   scroll propio: la card crece con el contenido, nada queda recortado. */
.raid-report-boss-list { display: flex; flex-direction: column; gap: .3rem; }
.raid-report-boss {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
  animation: raid-report-boss-in .45s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.raid-report-boss[open] { border-color: rgba(var(--accent-rgb), .45); background: color-mix(in srgb, var(--panel) 75%, black 25%); }
@keyframes raid-report-boss-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}
.raid-report-boss summary {
  display: flex; align-items: center; gap: .55rem; padding: .4rem .75rem;
  cursor: pointer; list-style: none; font-size: .84rem; user-select: none;
  border-radius: var(--radius-sm); transition: background .2s var(--ease-out);
}
.raid-report-boss summary::-webkit-details-marker { display: none; }
.raid-report-boss summary:hover { background: rgba(var(--accent-rgb), .08); }
.raid-report-boss-chevron { width: 14px; height: 14px; flex: none; color: var(--muted-2); transition: transform .3s var(--ease-out); }
.raid-report-boss[open] .raid-report-boss-chevron { transform: rotate(90deg); color: var(--accent); }
/* Círculo con check/X en SVG en vez del emoji ✅❌ — colores propios
   (no dependen de la fuente de emoji del sistema) y un "pop" elástico
   al aparecer, para que no se vean estáticos. */
.raid-report-result-icon {
  flex: none; width: 18px; height: 18px;
  animation: raid-report-icon-pop .45s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms + 80ms);
}
.raid-report-result-icon.is-kill circle { fill: #17b866; }
.raid-report-result-icon.is-wipe circle { fill: #e5484d; }
@keyframes raid-report-icon-pop {
  0% { opacity: 0; transform: scale(.3); }
  60% { opacity: 1; transform: scale(1.18); }
  100% { transform: scale(1); }
}
.raid-report-pull .raid-report-result-icon { width: 15px; height: 15px; }
.raid-report-boss-name { flex: 1; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-report-boss-icon.is-kill ~ .raid-report-boss-name { color: var(--ink); font-weight: 600; }
.raid-report-boss-diff { color: var(--muted-2); font-size: .74rem; }
.raid-report-boss-pulls-badge {
  flex: none; font-size: .74rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px;
  background: rgba(0, 0, 0, .35); color: var(--ink); font-family: var(--sans); white-space: nowrap;
}
.raid-report-boss[open] .raid-report-boss-pulls-badge { background: rgba(var(--accent-rgb), .18); color: var(--accent); }
.raid-report-boss-body {
  padding: .1rem .8rem .8rem; display: flex; flex-direction: column; gap: .5rem;
  animation: raid-report-body-in .35s var(--ease-out);
}
@keyframes raid-report-body-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.raid-report-boss-totals {
  margin: 0 0 .1rem; display: flex; gap: 1.1rem; font-size: .78rem; font-weight: 600; color: var(--muted);
  padding-bottom: .5rem; border-bottom: 1px dashed var(--line);
}

.raid-report-pull {
  display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .55rem;
  font-size: .76rem; padding: .4rem .55rem; border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .28);
  animation: raid-report-boss-in .35s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.raid-report-pull-num { flex: none; color: var(--ink); font-weight: 700; font-family: var(--display); white-space: nowrap; }
.raid-report-pull-bar {
  flex: 1 1 40px; min-width: 32px; height: 7px; border-radius: 999px; background: var(--panel); overflow: hidden;
}
.raid-report-pull-bar span { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--ease-out); background: #ff6b6b; }
.raid-report-pull.is-kill .raid-report-pull-bar span { background: linear-gradient(90deg, #3ddc84, #17b866); }
.raid-report-pull-result { flex: none; text-align: right; font-family: var(--display); font-weight: 700; font-size: .78rem; min-width: 2.9rem; }
.raid-report-pull.is-kill .raid-report-pull-result { color: #3ddc84; }
.raid-report-pull.is-wipe .raid-report-pull-result { color: #ff6b6b; }
.raid-report-pull-duration { flex: none; color: var(--muted); font-weight: 600; white-space: nowrap; }
.raid-report-pull .raid-report-platforms { flex: none; gap: .25rem; margin-left: auto; }
.raid-report-pull .raid-report-platform-btn--sm { width: 20px; height: 20px; }
.raid-report-pull .raid-report-platform-btn--sm svg { width: 10px; height: 10px; }

/* Quién estuvo en ese kill puntual y su parse en ESA pelea — reemplaza
   la vieja pregunta "¿cuántos pulls?" por "¿cómo le fue a cada uno?". */
.raid-report-participants { display: flex; flex-direction: column; gap: .5rem; }
.raid-report-participants-group { display: flex; flex-direction: column; gap: .3rem; }
.raid-report-participants-role { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-2); }
.raid-report-participants-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.raid-report-participant {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 999px;
  background: rgba(0, 0, 0, .28); font-size: .78rem; font-weight: 600; color: var(--class-color, var(--ink));
  border: 1px solid color-mix(in srgb, var(--class-color, var(--line)) 35%, transparent);
}
.raid-report-participant-icon { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.raid-report-participant-name { font-weight: 700; }
.raid-report-participant-stat {
  display: inline-flex; align-items: baseline; gap: .25rem; padding-left: .5rem;
  border-left: 1px solid var(--line); color: var(--ink); font-weight: 700;
}
.raid-report-participant-stat small {
  font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2);
}
.raid-report-participant b { font-family: var(--display); font-weight: 800; }

/* Integrantes de un jefe: 2 por fila, cada uno en una mini-tarjeta de
   dos líneas (icono + nombre arriba, ilvl y parse abajo) para que los
   nombres largos no se corten. */
.raid-report-participants-list--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.raid-report-participant.raid-report-participant--card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  column-gap: .4rem; row-gap: .1rem; padding: .32rem .6rem .36rem; border-radius: 12px; min-width: 0; line-height: 1.25;
}
.raid-report-participant--card .raid-report-participant-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-report-participant-stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; padding-left: .1rem; }
.raid-report-participant--card .raid-report-participant-stat { padding-left: 0; border-left: 0; }
.raid-report-participant--card .raid-report-participant-stat + .raid-report-participant-stat {
  padding-left: .55rem; border-left: 1px solid var(--line);
}
/* Si un jefe tiene muchos pulls, la lista tiene su propio scroll chico
   al costado (unos 6 pulls a la vista) en vez de alargar toda la card. */
.raid-report-pulls-list {
  display: flex; flex-direction: column; gap: .35rem;
  max-height: 14.5rem; overflow-y: auto; padding-right: .35rem;
  scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), .55) transparent;
}
.raid-report-pulls-list::-webkit-scrollbar { width: 6px; }
.raid-report-pulls-list::-webkit-scrollbar-track { background: transparent; }
.raid-report-pulls-list::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), .5); border-radius: 999px; }
.raid-report-pulls-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), .8); }
.raid-report-pulls-list > .raid-report-pull { flex: none; }
.raid-report-pulls-toggle { margin-top: .1rem; }
.raid-report-pulls-toggle summary {
  cursor: pointer; list-style: none; font-size: .76rem; font-weight: 600; color: var(--muted-2);
  padding: .2rem 0;
}
.raid-report-pulls-toggle summary::-webkit-details-marker { display: none; }
.raid-report-pulls-toggle summary:hover { color: var(--accent); }
.raid-report-pulls-toggle[open] summary { margin-bottom: .4rem; }
.raid-report-pulls-toggle .raid-report-pull { margin-top: .35rem; }

.raid-report-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .2rem; padding-top: .7rem; border-top: 1px solid var(--line);
  font-size: .86rem; font-weight: 600; color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .raid-report-card, .raid-report-boss, .raid-report-pull, .raid-report-boss-body, .raid-report-new-badge, .raid-report-result-icon, .raid-report-card--live-update { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  .raiders-toolbar { flex-direction: column; align-items: stretch; }
  .raiders-controls { flex-direction: column; }
  /* Angosto de más: el nombre del jefe pasa a su propia línea en vez
     de achicarse hasta desaparecer y dejar solo la etiqueta flotando. */
  .raid-reports-grid { grid-template-columns: 1fr; }
  .raid-report-boss summary { flex-wrap: wrap; }
  .raid-report-boss-name { flex: 1 1 100%; order: 3; white-space: normal; }
  .raid-report-boss-pulls-badge { order: 4; margin-left: auto; }
  .raiders-search, .raiders-select, .raiders-search-btn { width: 100%; }
}
@media (max-width: 760px) {
  /* Por debajo de esto no alcanza el ancho para 3 cards en fila ni
     achicándolas al mínimo legible — en vez de forzarlas, pasa a una
     sola columna apilada (main.js no activa el paginado a este ancho,
     ver initReportsPager). */
  .raid-reports-carousel {
    overflow: visible; width: 100%; padding: 0;
  }
  .raid-reports-carousel .raid-reports-grid {
    display: flex; flex-direction: column; width: auto; min-width: 0; gap: 1rem;
  }
  .raid-reports-carousel .raid-report-card { flex: none; width: 100%; }
}

/* =============================================================
   10a-bis. Mi Cuenta (autoservicio de personaje vía Battle.net/Discord)
   — vive en un modal, mismo look que .login-modal pero más ancho para
   la lista de personajes.
   ============================================================= */
.account-modal-card {
  position: relative; width: min(480px, 100%); z-index: 1; max-height: 85vh; overflow-y: auto;
  background: var(--gradient-panel), var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: .85rem;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
  animation: tabPop .35s var(--ease-bounce);
}
.account-pitch { text-align: center; }
.account-pitch h2 { font-family: var(--display); font-size: 1.4rem; margin: 0 0 .6rem; }
.account-pitch p { color: var(--muted); font-size: .88rem; margin: 0 0 1rem; }
.account-pitch ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.account-pitch li { display: flex; gap: .6rem; font-size: .86rem; color: var(--ink); }
.account-pitch li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }
.account-pitch .btn { width: 100%; }
.account-flash {
  padding: .7rem 1rem; text-align: center; margin-bottom: .4rem;
  border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), .12); color: var(--ink);
  border: 1px solid rgba(var(--accent-rgb), .35); font-size: .86rem;
}
.account-flash.is-error { background: rgba(255, 100, 100, .12); border-color: rgba(255, 100, 100, .35); }
.account-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; margin-bottom: 1.2rem; }
.account-who { display: flex; flex-direction: column; gap: .3rem; }
.account-who strong { font-family: var(--display); font-size: 1.1rem; }
.account-discord-tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); }
.account-discord-tag img { width: 20px; height: 20px; border-radius: 50%; }
.account-chars { display: grid; gap: .8rem; }
.account-char {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  padding: .8rem; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); text-align: left;
}
.account-char-icon { width: 34px; height: 34px; border-radius: 8px; }
.account-char-who { display: flex; flex-direction: column; gap: .15rem; }
.account-char-who span { color: var(--muted-2); font-size: .78rem; }
.account-char-stats { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.account-char-points { color: var(--accent); font-weight: 700; }
.account-more-link { display: block; text-align: center; margin-bottom: 1.2rem; }
.account-empty { text-align: center; }
.account-relink-hint { color: var(--muted); font-size: .8rem; margin: 1rem 0 .8rem; }

/* Fila de acciones al final del modal — Actualizar/Discord son
   acciones normales, Cerrar sesión queda aparte y en rojo oscuro para
   que no se confunda con las otras (es la única que te saca de la
   cuenta). */
.account-footer-actions {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem;
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
/* .btn y .account-logout-confirm ya traen su propio "display" —
   eso le gana a la regla del navegador para [hidden] (una declaración
   normal de autor siempre le gana a la del user-agent, sin importar
   la especificidad), así que sin esto "hidden" no ocultaba nada. */
.account-footer-actions [hidden] { display: none !important; }
.account-btn-sync { display: inline-flex; align-items: center; gap: .45rem; }
.account-btn-sync svg { width: 16px; height: 16px; }
.account-footer-actions small { opacity: .7; font-size: .78em; margin-left: .2rem; }
.account-btn-danger {
  margin-left: auto; border: 1px solid rgba(200, 60, 60, .5); color: #ff8080;
  background: rgba(160, 40, 40, .18); transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.account-btn-danger:hover { background: rgba(160, 40, 40, .32); border-color: rgba(255, 100, 100, .7); }
.account-logout-confirm {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; width: 100%;
  margin-top: .6rem; padding: .7rem .8rem; border-radius: var(--radius-sm);
  background: rgba(160, 40, 40, .12); border: 1px solid rgba(200, 60, 60, .35);
  font-size: .84rem; color: var(--muted);
}
.account-logout-confirm span { flex: 1 1 100%; }
@media (max-width: 480px) { .account-logout-confirm span { flex-basis: auto; } }

/* =============================================================
   13d. Página "Mi Perfil" — un card por personaje con el mismo
   contenido rico del modal de personaje (char-modal-*), pero como
   sección de página en vez de ventana flotante.
   ============================================================= */
.profile-page-header {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem); background: rgba(var(--bg-rgb), .85);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.profile-page-header-actions { display: flex; align-items: center; gap: 1rem; }
.profile-page-header-actions span { color: var(--muted); font-size: .85rem; }
.profile-page-main { max-width: 960px; margin: 0 auto; padding: 2.4rem 1.2rem 4rem; }
.profile-page-title { text-align: center; margin-bottom: .4rem; }
.profile-page-sub { text-align: center; color: var(--muted); margin: 0 0 1.4rem; }
.profile-page-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.profile-page-filters input[type="search"] {
  min-width: 220px; flex: 1 1 240px; padding: .5rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: var(--sans); font-size: .88rem;
}
.profile-page-filters input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .16); }
.profile-page-filters select {
  color-scheme: dark; padding: .5rem 1.7rem .5rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" width="10" height="7"><path d="M1 1l5 5 5-5" fill="none" stroke="%23b2a7d6" stroke-width="1.6"/></svg>') no-repeat right .7rem center;
  color: var(--ink); font-family: var(--sans); font-size: .88rem; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.profile-page-filters select:hover { border-color: var(--accent); }
.profile-page-filters select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.profile-row {
  --char-class-color: var(--accent);
  position: relative; overflow: hidden; margin-bottom: 1rem;
  background: color-mix(in srgb, var(--char-class-color) 14%, var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .55);
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out), border-color .25s var(--ease-out);
  animation: profile-row-in .4s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes profile-row-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.profile-row::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--char-class-color) 16%, transparent), color-mix(in srgb, var(--char-class-color) 8%, transparent)), rgba(var(--bg-rgb), .68);
}
.profile-row::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--char-class-color), transparent 85%); opacity: .8;
}
.profile-row:not(.is-open):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--char-class-color) 45%, var(--line)); }
.profile-row.is-open { box-shadow: 0 20px 50px -22px rgba(0, 0, 0, .6), 0 0 30px -14px var(--char-class-color); }
@media (prefers-reduced-motion: reduce) { .profile-row { animation: none; transition: none; } }
.profile-row-summary {
  position: relative; z-index: 1; width: 100%; display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.2rem; text-align: left; cursor: pointer;
}
.profile-row-summary:hover { background: rgba(255, 255, 255, .03); }
.profile-row-icon { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.profile-row-who { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.profile-row-who strong { font-family: var(--display); font-size: 1rem; }
.profile-row-who span { color: var(--muted-2); font-size: .78rem; }
.profile-row-stats { display: flex; gap: 1rem; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.profile-row-points { color: var(--accent); font-weight: 700; }
.profile-row-chevron { color: var(--muted); transition: transform .25s var(--ease-out); flex: none; }
.profile-row.is-open .profile-row-chevron { transform: rotate(180deg); color: var(--char-class-color); }
.profile-row-detail { position: relative; z-index: 1; padding: 0 1.6rem 1.8rem; }
@media (max-width: 560px) {
  .profile-row-stats { flex-wrap: wrap; gap: .3rem 1rem; }
}
.profile-page-empty, .profile-page-error, .profile-page-loading { text-align: center; color: var(--muted); padding: 3rem 0; }
.profile-page-verify { text-align: center; padding: 3rem 1rem; }
.profile-page-verify p { color: var(--muted); margin-bottom: 1.4rem; }
.account-loading, .account-error { color: var(--muted); font-size: .88rem; }

/* Resumen de cuenta — una fila de tarjetas arriba de todo, calculada
   del lado del navegador con los datos que ya trae la página (sin
   pedir nada nuevo): cuántos personajes tenés, puntos totales, tu
   mejor ilvl y mejor parse de toda la cuenta. Le da un "plus" a
   registrarse — de un vistazo se ve el estado general, no solo
   personaje por personaje. */
.profile-summary-grid {
  display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 2rem;
}
.profile-summary-card {
  --card-accent: var(--accent);
  position: relative; overflow: hidden; padding: 1.1rem 1rem; text-align: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(0, 0, 0, .22), transparent 60%), var(--panel-2);
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: profile-summary-in .4s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms);
}
.profile-summary-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--card-accent), transparent 85%); opacity: .8;
}
@keyframes profile-summary-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.profile-summary-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--card-accent) 40%, var(--line)); box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--card-accent) 55%, transparent); }
.profile-summary-icon { font-size: 1.25rem; }
.profile-summary-card strong { font-family: var(--display); font-size: 1.5rem; color: var(--card-accent); }
.profile-summary-card span:last-child { color: var(--muted); font-size: .76rem; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .profile-summary-card { animation: none; transition: none; } }

.profile-page-loading {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.profile-page-loading::before { content: "⏳"; animation: profile-loading-spin 1.6s linear infinite; }
@keyframes profile-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .profile-page-loading::before { animation: none; } }

/* =============================================================
   10b. Comunidad Discord (feed propio vía bot, sin iframe de terceros)
   ============================================================= */
.community { background: var(--gradient-void); background-attachment: fixed; }
.community .eyebrow, .community .section-title, .community .section-lead { text-align: center; margin-inline: auto; }
.community .eyebrow { display: table; }
.community-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.5rem;
}
.tab-btn--stacked { display: flex; flex-direction: column; gap: .1rem; line-height: 1.25; padding-block: .6rem; }
.tab-btn--stacked span { display: block; }
.community-embed {
  position: relative; overflow: hidden; overflow-y: auto;
  margin-top: 2rem; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(165deg, rgba(0, 0, 0, .3), transparent 60%), var(--panel);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 1.2rem; display: flex; flex-direction: column; gap: 1rem;
  max-height: 640px; text-align: left;
  animation: community-embed-in .4s var(--ease-out);
}
.community-embed::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold, var(--accent))); opacity: .75;
}
@keyframes community-embed-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .community-embed { animation: none; } }
.discord-feed-loading, .discord-feed-empty, .discord-feed-error { color: var(--muted); font-size: .9rem; text-align: center; padding: 1.5rem 0; }
.discord-msg {
  display: flex; gap: .9rem; padding: .3rem .4rem; border-radius: var(--radius-sm);
  transition: background .2s var(--ease-out);
  animation: discord-msg-in .35s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.discord-msg:hover { background: rgba(255, 255, 255, .04); }
@keyframes discord-msg-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.discord-msg + .discord-msg { padding-top: 1rem; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .discord-msg { animation: none; } }
.discord-msg-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
}
.discord-msg-avatar--fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-panel); color: var(--accent); font-weight: 800; font-size: 1.1rem;
}
.discord-msg-body { min-width: 0; flex: 1; }
.discord-msg-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.discord-msg-author { font-weight: 700; color: var(--ink); }
.discord-msg-time { font-size: .78rem; color: var(--muted-2); }
.discord-msg-text { margin-top: .3rem; color: var(--muted); font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.discord-msg-text a { color: var(--accent); }
.discord-mention { font-weight: 800; }
.discord-msg-attachment { margin-top: .6rem; max-width: 100%; border-radius: 10px; display: block; }
.discord-msg-embed {
  margin-top: .6rem; padding: .8rem 1rem; border-radius: 10px;
  background: var(--panel-2); border-left: 3px solid var(--accent);
}
.discord-msg-embed-title { font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
.discord-msg-embed-title a { color: var(--accent); }
.discord-msg-embed-desc { font-size: .88rem; color: var(--muted); line-height: 1.5; }

/* Tarjeta con chrome propio fijo (oscuro), independiente del tema activo de
   la web — así siempre se lee igual, sea cual sea la expansión seleccionada
   en el hero (incluida Forever, de fondo claro). */
.raid-cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.2rem; margin-bottom: 1rem; }
.raid-cal-legend-item { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .78); }
.raid-cal-legend-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--cal-accent, #37e6e2);
  box-shadow: 0 0 8px var(--cal-accent, #37e6e2); flex: none;
  animation: raid-cal-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes raid-cal-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.raid-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; }
@media (max-width: 720px) { .raid-calendar { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); } }
.raid-cal-day {
  position: relative; overflow: hidden;
  min-height: 130px; border-radius: 12px; padding: .8rem .5rem;
  background: rgba(8, 10, 16, .6); border: 1px solid rgba(255, 255, 255, .08);
  display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  transition: border-color .3s ease, background .3s ease, transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: raid-cal-day-in .4s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes raid-cal-day-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.raid-cal-day:hover { transform: translateY(-3px); }
.raid-cal-day-name { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .5); }
.raid-cal-day.has-raid { border-color: rgba(255, 255, 255, .22); background: rgba(8, 10, 16, .85); }
.raid-cal-day.has-raid:hover { box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .55); }
/* Columna de hoy, resaltada con el acento del sitio y un pequeño
   "Hoy" — de un vistazo se ve si toca raid hoy sin tener que contar
   días de la semana. */
.raid-cal-day.is-today { border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .08); }
.raid-cal-day.is-today .raid-cal-day-name { color: var(--accent); }
.raid-cal-today-badge {
  font-size: .6rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--void));
  border-radius: 999px; padding: .05rem .5rem;
  animation: raid-cal-today-pulse 1.8s ease-in-out infinite;
}
@keyframes raid-cal-today-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); } 50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0); } }
.raid-cal-event {
  width: 100%; display: flex; flex-direction: column; gap: .2rem; text-align: left;
  background: rgba(0, 0, 0, .35); border-radius: 8px; padding: .5rem .5rem .5rem .6rem;
  border-left: 3px solid var(--cal-accent, #37e6e2);
  transition: transform .2s var(--ease-out), background .2s var(--ease-out);
  animation: raid-cal-event-in .3s var(--ease-out) backwards;
  animation-delay: calc(.3s + var(--i, 0) * 80ms);
}
@keyframes raid-cal-event-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.raid-cal-event:hover { transform: translateX(2px); background: rgba(0, 0, 0, .5); }
.raid-cal-event-exp { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--cal-accent, #37e6e2); }
.raid-cal-event-core { font-size: .72rem; font-weight: 700; color: #fdfdfd; line-height: 1.3; }
/* El color del EVENTO (borde/icono) sigue siendo el de la expansión —
   pero el NOMBRE del core adentro se tiñe con el color que se le eligió
   en DataValyrians (Cores → Color), mismo criterio y misma paleta que ya
   usan las tarjetas de "Así avanzamos" y los reportes de raid — así con
   varios cores de una misma expansión el mismo día se distinguen de un
   vistazo, no solo por el texto. */
.raid-cal-event[data-core-color="red"] { --core-rgb: 240, 84, 84; }
.raid-cal-event[data-core-color="green"] { --core-rgb: 61, 220, 132; }
.raid-cal-event[data-core-color="purple"] { --core-rgb: 176, 124, 255; }
.raid-cal-event[data-core-color="blue"] { --core-rgb: 74, 158, 255; }
.raid-cal-event[data-core-color="orange"] { --core-rgb: 255, 152, 56; }
.raid-cal-event[data-core-color="pink"] { --core-rgb: 255, 110, 186; }
.raid-cal-event[data-core-color="cyan"] { --core-rgb: 40, 212, 230; }
.raid-cal-event[data-core-color="gold"] { --core-rgb: 240, 196, 72; }
.raid-cal-event[data-core-color] .raid-cal-event-core { color: rgb(var(--core-rgb)); }
.raid-cal-event-time { font-size: .7rem; font-weight: 800; color: rgba(255, 255, 255, .82); }
.raid-cal-tentative-note {
  font-size: .82rem; color: #ffcf6b; margin-bottom: .8rem; text-align: center;
}
.raid-cal-event.is-tentative { border-left-style: dashed; }
.raid-cal-event-badge {
  align-self: flex-start; font-size: .62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #1c1608; background: #ffcf6b; border-radius: 999px; padding: .1rem .45rem;
}
@media (prefers-reduced-motion: reduce) {
  .raid-cal-legend-dot, .raid-cal-day, .raid-cal-event, .raid-cal-today-badge { animation: none; }
}

/* =============================================================
   11. Store / premios
   ============================================================= */
.store { text-align: center; position: relative; overflow: clip; }
.store .section-title, .store .section-lead { margin-inline: auto; }
.store-logo { display: flex; justify-content: center; margin-bottom: 1.5rem; }
/* Kael'Thas, Tauren y Uther juntos como si fueran el equipo — el del
   medio (Tauren) un poco más grande y encima, los de los costados se
   traslapan un poco detrás, como una formación de grupo. Mismo velo
   de color con máscara que Sylvanas y los GIFs de "valores" (se tiñe
   solo la silueta de cada uno, no un cuadro detrás) — acá la imagen
   para la máscara cambia por personaje, así que va en una variable
   por tarjeta en vez de fija en el CSS. */
.store-team { display: flex; align-items: flex-end; justify-content: center; }
/* Cada uno con su propio ancho natural (dejar que fluya solo evita que
   se vean estirados o achatados) y su propia altura — Kael'Thas es el
   más alto y va adelante, Tauren casi tan alto justo a su lado, Uther
   un poco más bajo del otro lado y mirando hacia afuera (volteado). */
.store-arthas-wrap {
  position: relative; width: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5));
}
.store-team-kael { height: clamp(150px, 20vw, 230px); z-index: 1; }
.store-team-tauren { height: clamp(143px, 19vw, 219px); margin-left: -3.4rem; }
.store-team-uther { height: clamp(112px, 15vw, 172px); margin-right: -3.9rem; margin-bottom: .3rem; transform: scaleX(-1); }
.store-arthas { display: block; height: 100%; width: auto; border-radius: var(--radius-sm); }
.store-arthas-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius-sm);
  /* Mismo nivel de tinte que Trall/Jaina/Ilidan en Valores (.38) — más
     notorio que el de Sylvanas (que se bajó a pedido a .24), para que
     los 3 se vean tan "del tema" como esos personajes de referencia. */
  background: var(--accent); mix-blend-mode: color; opacity: .38;
  -webkit-mask-image: var(--team-img-url); mask-image: var(--team-img-url);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background-color .2s ease;
}
.store .section-lead { margin-inline: auto; }
.store-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); text-align: left; }
@media (min-width: 620px) { .store-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .store-grid { grid-template-columns: repeat(5, 1fr); } }
.store-card {
  padding: 1.5rem 1.2rem; border-radius: var(--radius); background: var(--gradient-panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem;
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out);
}
.store-card:hover { transform: translateY(-5px); border-color: var(--gold); }
.store-card .icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  font-size: 1.6rem; line-height: 1;
  background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3);
  animation: storeIconFloat 3s ease-in-out infinite;
}
/* Un poco de delay por tarjeta para que no floten todas exactamente
   igual al mismo tiempo — se ve más vivo, menos repetitivo. */
.store-card:nth-child(2) .icon { animation-delay: .25s; }
.store-card:nth-child(3) .icon { animation-delay: .5s; }
.store-card:nth-child(4) .icon { animation-delay: .75s; }
.store-card:nth-child(5) .icon { animation-delay: 1s; }
@keyframes storeIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-5deg); }
}
.store-card .name { font-weight: 700; font-size: .92rem; line-height: 1.35; }
.store-cta { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.store-cta p { color: var(--muted); font-size: 1.05rem; }

/* =============================================================
   12. Apply / contact
   ============================================================= */
.apply { position: relative; overflow: clip; }
.apply-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .apply-grid { grid-template-columns: .85fr 1.15fr; } }
.apply-intro { position: relative; }
/* Sylvanas debajo del título, a la derecha del párrafo "Cuéntanos…"
   (no del título) — con el borde izquierdo desvanecido (mismo truco
   de mask-image que ya usa el sitio) para que no se vea como un
   rectángulo pegado encima. Solo el párrafo se angosta a su lado; el
   eyebrow y el título usan el ancho completo, sin recorte. */
.apply-mascot-wrap {
  position: absolute; top: 6.4rem; right: -.4rem; z-index: 0;
  width: clamp(145px, 19vw, 200px);
  -webkit-mask-image: linear-gradient(100deg, transparent, black 42%);
  mask-image: linear-gradient(100deg, transparent, black 42%);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
  pointer-events: none;
}
.apply-mascot { display: block; width: 100%; height: auto; }
/* Mismo velo de color con máscara que los GIFs de "valores" — se tiñe
   solo la silueta del personaje (no un cuadro detrás) con el color de
   la expansión activa, y cambia solo cuando cambia el tema del sitio. */
.apply-mascot-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--accent); mix-blend-mode: color; opacity: .24;
  -webkit-mask-image: url("assets/img/sylvanas.webp"); mask-image: url("assets/img/sylvanas.webp");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background-color .2s ease;
}
.apply-intro .section-lead {
  position: relative; z-index: 1;
  max-width: calc(100% - 175px);
}
@media (max-width: 640px) { .apply-mascot-wrap { display: none; } }
.apply-recruiting {
  margin-top: 1.1rem; font-size: .88rem; font-weight: 600; color: var(--fire);
  padding: .6rem .9rem; border-radius: 10px; background: rgba(166,226,46,.08); border: 1px solid rgba(166,226,46,.25);
  display: inline-block;
}
.apply-discord-card {
  margin-top: 2rem; display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.4rem; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--line);
}
.apply-discord-card img { border-radius: 12px; flex-shrink: 0; }
.apply-discord-card p { color: var(--muted); font-size: .9rem; margin: .4rem 0 .9rem; }

.apply-form {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(0, 0, 0, .25), transparent 55%), var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.apply-form::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold, var(--accent))); opacity: .8;
}
.form-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.apply-form label { display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; color: var(--muted); font-weight: 600; }
.apply-form label.full { width: 100%; }
.apply-form input, .apply-form select, .apply-form textarea {
  font: inherit; color: var(--ink); background: rgba(255,255,255,.04);
  border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem;
  transition: border-color .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.apply-form input:hover, .apply-form select:hover, .apply-form textarea:hover { border-color: rgba(var(--accent-rgb), .5); }
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus {
  border-color: var(--accent); background: rgba(255,255,255,.06); outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.apply-form select option { background: var(--panel); color: var(--ink); }
.verify-label { justify-content: flex-end; }
.btn-verify { align-self: flex-start; }
.verify-result {
  font-size: .88rem; padding: .7rem .9rem; border-radius: 10px; display: none;
}
.verify-result.is-visible { display: block; animation: verify-result-in .3s var(--ease-out); }
@keyframes verify-result-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.verify-result.ok { display: block; background: rgba(166,226,46,.12); border: 1px solid rgba(166,226,46,.4); color: var(--fire); }
.verify-result.bad { display: block; background: rgba(233,79,208,.1); border: 1px solid rgba(233,79,208,.4); color: var(--pink); }
.verify-result.pending { display: block; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .verify-result.is-visible { animation: none; } }
.cf-turnstile { max-width: 100%; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; }
.form-actions .btn-primary { position: relative; }
.form-actions .btn-primary::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  border: 1px solid rgba(var(--accent-rgb), .55); opacity: 0; pointer-events: none;
  animation: hero-cta-ring 2.6s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) { .form-actions .btn-primary::after { animation: none; } }
.form-note { font-size: .82rem; color: var(--muted); }
.form-note.is-error { color: var(--pink); }
.form-status-check { font-size: .82rem; color: var(--muted); margin-top: .4rem; word-break: break-all; }
.form-status-check a { color: var(--accent); }
.hp-field {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none;
}

/* =============================================================
   13. Footer
   ============================================================= */
.site-footer { border-top: 1px solid var(--line); padding-block: 3rem; }
.footer-grid { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 720px) { .footer-grid { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.footer-brand { display: flex; flex-direction: column; gap: .6rem; max-width: 46ch; }
.footer-brand img { border-radius: 50%; margin-bottom: .4rem; }
.footer-brand p { color: var(--muted); font-size: .9rem; }
.footer-legal { font-size: .76rem !important; color: var(--muted-2) !important; }
.footer-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.3rem; font-weight: 600; font-size: .9rem; color: var(--muted); }
.footer-links a:hover { color: var(--accent); }

.to-top {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 300;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* Barra lateral de expansiones — el mismo escudo de la guild, retinado por
   tema, con nombre visible solo al pasar el mouse. Solo visible pasado el
   hero (el selector grande ya vive ahí). */
.theme-rail {
  position: fixed; left: 16px; top: 50%; transform: translateY(-50%) translateX(-6px);
  z-index: 350; display: flex; flex-direction: column; gap: .7rem;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), var(--theme-transition);
}
.theme-rail.is-visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.theme-rail-btn {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  background: rgba(var(--bg-rgb), .6); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  transition: var(--theme-transition), transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.theme-rail-btn:hover { transform: scale(1.08); border-color: var(--accent); }
.theme-rail-btn.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
/* Los 3 primeros son los badges reales de Blizzard (sus propios colores,
   sin retinar) — solo el de SoD es nuestro escudo, porque Blizzard no
   tiene un ícono propio para esa versión en ningún sitio oficial. */
.theme-rail-icon {
  width: 26px; height: 26px; object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5));
}
.theme-rail-tooltip {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-6px);
  white-space: nowrap; padding: .4rem .8rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.theme-rail-btn:hover .theme-rail-tooltip,
.theme-rail-btn:focus-visible .theme-rail-tooltip {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
@media (max-width: 900px) { .theme-rail { display: none; } }

/* =============================================================
   13b. Login modal (DataValyrians)
   ============================================================= */
.login-modal { position: fixed; inset: 0; z-index: 600; display: none; place-items: center; padding: 1.2rem; }
.login-modal:not([hidden]) { display: grid; }
.login-modal-backdrop { position: absolute; inset: 0; background: rgba(2, 1, 8, .72); backdrop-filter: blur(3px); }
.login-modal-card {
  position: relative; width: min(360px, 100%); z-index: 1;
  background: var(--gradient-panel), var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.6rem 1.6rem; display: flex; flex-direction: column; align-items: center; gap: .85rem;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
  animation: tabPop .35s var(--ease-bounce);
}
.login-modal-card h2 { font-family: var(--display); font-size: 1.4rem; margin: 0; }
.login-modal-sub { color: var(--muted); font-size: .85rem; text-align: center; margin: 0 0 .3rem; }
.login-modal-card label { width: 100%; display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--muted); }
.login-modal-card input {
  padding: .6rem .75rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink); font-size: .92rem; font-family: var(--sans);
}
.login-modal-card input:focus { outline: none; border-color: var(--accent); }
.login-modal-card .btn { width: 100%; }
.login-modal-error { color: #ff8a8a; font-size: .82rem; text-align: center; margin: 0; }
.login-modal-x {
  position: absolute; top: .7rem; right: .8rem; background: none; border: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; line-height: 1; padding: .3rem;
}
.login-modal-x:hover { color: var(--ink); }

/* =============================================================
   13b2. Modal de perfil de personaje (equipo + progreso de raid)
   ============================================================= */
.char-modal { position: fixed; inset: 0; z-index: 600; display: none; place-items: center; padding: 1.2rem; }
.char-modal:not([hidden]) { display: grid; }
.char-modal-backdrop { position: absolute; inset: 0; background: rgba(2, 1, 8, .78); backdrop-filter: blur(3px); }
.char-modal-card {
  --char-class-color: var(--accent); /* JS la pone en el color real de la clase al cargar */
  position: relative; width: min(920px, 96vw); max-height: min(95vh, 980px); z-index: 1;
  display: flex; flex-direction: column; overflow: hidden;
  background: color-mix(in srgb, var(--char-class-color) 14%, var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  animation: tabPop .35s var(--ease-bounce), charGlowPulse 4s ease-in-out .3s infinite;
}
/* El mapa-portal girando muy despacio de fondo — agrandado bastante
   más que la tarjeta (inset negativo) para que al girar nunca se vea
   una esquina vacía, y recortado por el overflow:hidden de la tarjeta. */
.char-modal-card::before {
  content: ""; position: absolute; inset: -45%; z-index: 0;
  background: url("assets/img/site-texture-gray.webp") center / cover;
  animation: charModalSpin 160s linear infinite;
  pointer-events: none;
}
/* Velo oscuro encima de la imagen — oscuro como el resto de la web,
   pero dejando ver un poco más la textura de fondo que antes (era
   casi invisible con el velo tan opaco). */
.char-modal-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--char-class-color) 16%, transparent), color-mix(in srgb, var(--char-class-color) 8%, transparent)), rgba(var(--bg-rgb), .68);
}
@keyframes charModalSpin { to { transform: rotate(360deg); } }
@keyframes charGlowPulse {
  0%, 100% { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 0 40px -14px var(--char-class-color); }
  50% { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 0 65px -10px var(--char-class-color); }
}
.char-modal-x {
  position: absolute; top: .7rem; right: .8rem; background: none; border: none; color: var(--muted);
  font-size: 1rem; cursor: pointer; line-height: 1; padding: .3rem; z-index: 2;
}
.char-modal-x:hover { color: var(--ink); }
.char-modal-body {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 2rem 1.6rem 1.8rem;
  /* Barra de scroll teñida con el color de la clase, no el acento del
     sitio — combina con el borde y el fondo del modal (::after). */
  scrollbar-color: var(--char-class-color) rgba(255, 255, 255, .08);
}
.char-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--char-class-color), var(--void));
}
.char-modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--void), var(--char-class-color));
}
.char-modal-loading, .char-modal-error, .char-modal-empty { color: var(--muted); text-align: center; padding: 2rem 0; }
.raiders-loading.char-modal-loading-wrap { padding: 1.5rem 0 2rem; }
.char-modal-head { text-align: center; margin-bottom: 1.4rem; }
.char-modal-head h2 { font-family: var(--display); font-size: 1.6rem; margin: 0; }
.char-modal-title-row { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .3rem; }
.char-modal-class-icon { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); }
.char-modal-sub { color: var(--muted); font-size: .88rem; margin: 0 0 .4rem; display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.char-modal-role-badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line); font-size: .72rem; font-weight: 700; color: var(--ink);
}
.char-modal-role-badge svg { flex: none; }
.char-modal-lastseen { color: var(--muted-2); font-size: .74rem; margin: 0 0 .7rem; }
.char-modal-stats { display: flex; justify-content: center; gap: 1.6rem; font-size: .85rem; color: var(--muted); margin-bottom: .8rem; }
.char-modal-stats strong { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.char-modal-links { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.char-modal-links a { color: var(--accent); font-size: .84rem; font-weight: 600; }

/* Aparición escalonada de cada bloque del modal (encabezado, equipo,
   stats, progresión) — un fundido + deslizado bien corto, cada uno
   un poco después del anterior (ver revealStep en main.js). */
.char-reveal { opacity: 0; animation: charReveal .5s var(--ease-out) both; }
@keyframes charReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.char-gear-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem 1.2rem; margin-bottom: .8rem; }
@media (min-width: 560px) { .char-gear-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 760px) { .char-gear-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.char-gear-col { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.char-gear-weapons { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.2rem; }
.char-gear-weapons .char-gear-item { max-width: 260px; }
.char-gear-item {
  display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .22); color: inherit; text-decoration: none; transition: background .2s var(--ease-out);
  min-width: 0;
}
a.char-gear-item:hover { background: rgba(0, 0, 0, .38); }
.char-gear-hint { text-align: center; font-size: .76rem; color: var(--muted); margin-top: -.2rem; margin-bottom: 1rem; }
.char-gear-icon { width: 32px; height: 32px; border-radius: 5px; border: 1px solid var(--line); flex: none; }
.char-gear-info { display: flex; flex-direction: column; gap: .1rem; overflow: hidden; min-width: 0; flex: 1; }
.char-gear-name { font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-gear-meta { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-modal-section-title { font-family: var(--display); font-size: 1.05rem; text-align: center; margin: 1rem 0 .8rem; }

/* Progreso de raid — una tarjeta compacta por temporada/raid en vez de
   barras larguísimas de ancho completo (más "vertical", como pidió el
   usuario). */
.char-progress-tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin-bottom: .4rem; }
@media (min-width: 640px) { .char-progress-tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.char-progress-tier-card {
  background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .8rem .9rem; min-width: 0;
}
.char-progress-tier-title { display: block; text-align: center; font-family: var(--display); font-size: .82rem; margin-bottom: .6rem; color: var(--ink); }
.char-progress-tier-season { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--char-class-color); margin-bottom: .1rem; }
.char-progress-bars { display: flex; flex-direction: column; gap: .5rem; }
.char-progress-row { display: grid; grid-template-columns: 62px 1fr 32px; align-items: center; gap: .5rem; }
.char-progress-label { font-size: .7rem; color: var(--muted); font-weight: 700; }
.char-progress-track { min-width: 0; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: clip; }
.char-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--char-class-color));
  transition: width 1s var(--ease-out);
}
.char-progress-count { font-size: .7rem; font-weight: 700; color: var(--ink); text-align: right; }
.char-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: .6rem; }
@media (min-width: 560px) { .char-stat-grid { grid-template-columns: repeat(4, 1fr); } }
.char-stat-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .15rem; padding: .7rem .4rem; border-radius: 10px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
}
.char-stat-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.char-stat-big { font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.char-stat-raw { font-size: .68rem; color: var(--muted); }

/* Logs por jefe — desglose de Warcraft Logs dentro del modal de
   personaje, con la misma temática que el resto (mismo look que las
   tarjetas de estadísticas/progreso). Los 3 selects (función/
   dificultad/especialización) filtran sobre datos que ya llegaron,
   sin pedir nada de nuevo al cambiarlos. */
.char-boss-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: .8rem; }
.char-boss-filters select {
  color-scheme: dark; padding: .4rem 1.7rem .4rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: rgba(0, 0, 0, .35) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" width="10" height="7"><path d="M1 1l5 5 5-5" fill="none" stroke="%23b2a7d6" stroke-width="1.6"/></svg>') no-repeat right .6rem center;
  color: var(--ink); font-family: var(--sans); font-size: .8rem; font-weight: 600;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.char-boss-filters select:hover { border-color: var(--char-class-color); }
.char-boss-filters select:focus { outline: 2px solid var(--char-class-color); outline-offset: 1px; }
.char-boss-table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: .3rem; }
.char-boss-table { width: 100%; border-collapse: collapse; font-size: .82rem; white-space: nowrap; }
.char-boss-table th, .char-boss-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); text-align: center; }
.char-boss-table th:first-child, .char-boss-table td:first-child { text-align: left; }
.char-boss-table th {
  color: var(--muted); font-weight: 700; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .04em; background: rgba(255, 255, 255, .03);
}
.char-boss-table tbody tr:last-child td { border-bottom: none; }
.char-boss-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
.char-boss-table td:first-child a { color: var(--ink); font-weight: 700; }
.char-boss-table td:first-child a:hover { color: var(--accent); text-decoration: underline; }
.char-boss-empty { text-align: center !important; color: var(--muted); padding: 1.2rem 0 !important; }
.char-boss-pct { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.char-boss-spec-icon { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .15); flex: none; }
.raiders-name-link {
  background: none; border: none; padding: 0; font: inherit; color: var(--ink); font-weight: 700;
  cursor: pointer; text-align: left;
}
.raiders-name-link:hover { color: var(--accent); text-decoration: underline; }

/* =============================================================
   13c. Foro Valyrians
   ============================================================= */
.foro .eyebrow, .foro .section-title, .foro .section-lead { text-align: center; margin-inline: auto; }
.foro .eyebrow { display: table; }
.foro-carousel { margin-top: 2.4rem; overflow: hidden; position: relative; cursor: grab; user-select: none; }
.foro-carousel.is-dragging { cursor: grabbing; }
.foro-track { display: flex; gap: 1.4rem; width: max-content; touch-action: pan-y; }
.foro-status { text-align: center; color: var(--muted); padding: 1.5rem 0; white-space: nowrap; }
.foro-card {
  position: relative;
  flex: 0 0 min(85vw, 300px);
  border-radius: var(--radius); overflow: clip; background: var(--gradient-panel), var(--panel-2);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.foro-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--accent), var(--gold, var(--accent))); opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.foro-card:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 18px 38px -22px rgba(var(--accent-rgb), .5); }
.foro-card:hover::before { opacity: .85; }
.foro-card-media { aspect-ratio: 16/10; overflow: clip; }
.foro-card-media img { width: 100%; height: 100%; object-fit: cover; }
.foro-card-body { padding: 1.1rem 1.2rem 1.3rem; }
.foro-card-body h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.foro-card-body p { color: var(--muted); font-size: .9rem; margin: 0; }
.foro-card-link { display: inline-block; margin-top: .7rem; color: var(--accent); font-size: .85rem; font-weight: 700; }
.foro-card-link:hover { text-decoration: underline; }

/* =============================================================
   14. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .splash-mark img { animation: none; }
  .scroll-cue span { animation: none; }
  .store-card .icon { animation: none; }
  .hero-medallion-glow { animation: none; opacity: .8; }
  .logo-mark--hero { animation: none; }
  .char-modal-card::before { animation: none; }
  .char-modal-card { animation: tabPop .35s var(--ease-bounce); }
  .char-reveal { animation: none; opacity: 1; }
  .char-progress-fill { transition: none; }
}

/* =============================================================
   99. Mejora visual — menú de cristal flotante, progreso de scroll,
   luz en tarjetas, botones con brillo y modo ligero. Todo con
   transform/opacity; sin librerías.
   ============================================================= */
:root { --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); }

/* Menú flotante: la barra se separa de los bordes y el cristal vive en .nav-inner */
.nav {
  padding: .75rem 1rem 0; background: transparent; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none;
}
.nav.is-scrolled { background: transparent; padding-block: .5rem 0; }
.nav > * { pointer-events: auto; }
.nav-inner {
  position: relative; max-width: 1140px; padding: .5rem .8rem .5rem 1.1rem; gap: 1.25rem;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(var(--bg-rgb), .5);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.nav.is-scrolled .nav-inner { background: rgba(var(--bg-rgb), .82); border-color: rgba(var(--accent-rgb), .22); }
.nav-inner::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .85), transparent);
  opacity: .35; transition: opacity .5s var(--ease-out);
}
.nav.is-scrolled .nav-inner::after { opacity: .9; }

.nav-links { position: relative; }
.nav-links > a, .nav-links > .nav-item { position: relative; z-index: 1; }
.nav-links a, .nav-item-btn { transition: color .25s ease; }
.nav-item-btn.is-current, .nav-links > a.is-current { color: var(--ink); }
.nav-pill { display: none; }
@media (min-width: 960px) {
  .nav-pill {
    display: block; position: absolute; left: 0; top: 50%; z-index: 0; height: 34px; width: 0;
    border-radius: 999px; pointer-events: none; opacity: 0;
    background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .3);
    box-shadow: 0 0 18px -6px rgba(var(--accent-rgb), .6);
    transform: translate(0, -50%);
    transition: transform .4s var(--ease-drawer), width .4s var(--ease-drawer), opacity .25s ease;
  }
  /* Desplegable: entra desde el botón, no desde el centro */
  .nav-dropdown { transform-origin: 50% 0; transform: translateX(-50%) translateY(-6px) scale(.97); border-radius: 16px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(var(--bg-rgb), .9); }
  .nav-item.is-open .nav-dropdown { transform: translateX(-50%) translateY(0) scale(1); }
}
.nav-links[data-open="true"] { inset: 78px 1rem auto 1rem; border: 1px solid var(--line); border-radius: 20px; }
@media (min-width: 960px) { .nav-links[data-open="true"] { inset: auto; border: 0; border-radius: 0; } }

/* Barra de progreso de scroll */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 700; pointer-events: none;
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
  background: linear-gradient(90deg, var(--accent), var(--void));
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .7);
}

/* Botones: brillo que cruza + apretón al pulsar */
.btn-primary, .btn-discord, .btn-login { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-discord::after, .btn-login::after {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-160%) skewX(-18deg);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover::after, .btn-discord:hover::after, .btn-login:hover::after {
    transform: translateX(340%) skewX(-18deg); transition: transform .7s var(--ease-out);
  }
}
.btn:active, .btn-login:active, .nav-calendar-btn:active { transform: scale(.97); transition-duration: .12s; }

/* Tarjetas: luz que sigue al puntero */
.raid-report-card, .store-card, .raid-countdown-card { position: relative; }
@media (hover: hover) and (pointer: fine) {
  :is(.raid-report-card, .value-card, .core-card, .store-card, .leaderboard-card, .foro-card, .raid-countdown-card)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--core-rgb, var(--accent-rgb)), .15), transparent 72%);
    opacity: 0; transition: opacity .35s ease;
  }
  :is(.raid-report-card, .value-card, .core-card, .store-card, .leaderboard-card, .foro-card, .raid-countdown-card).has-glow::after { opacity: 1; }
}

/* Modo ligero (lo activa el medidor de rendimiento en equipos lentos) */
html.lite .crest-fire-canvas, html.lite [data-starfield],
html.lite .theme-clouds, html.lite .theme-wind, html.lite .theme-sand,
html.lite .theme-orbs, html.lite .theme-gems, html.lite .theme-legendary { display: none; }
html.lite .nav-inner, html.lite .nav-dropdown { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--bg-rgb), .94); }
html.lite .nav-brand span, html.lite .nav-calendar-btn::before { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-pill, .scroll-progress, .btn-primary::after, .btn-discord::after, .btn-login::after { transition: none; }
}

/* =============================================================
   99b. Pasada audaz — títulos con degradado y trazo, etiquetas de
   cristal, divisores luminosos, tarjetas con relieve y foco de luz
   que sigue al mouse en el hero.
   ============================================================= */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .38rem .9rem .38rem .75rem; border-radius: 999px;
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 22px -14px rgba(var(--accent-rgb), .8);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2), 0 0 10px var(--accent);
}

.section-title {
  position: relative; padding-bottom: 1.1rem;
  background: linear-gradient(180deg, #fff 30%, rgba(var(--accent-rgb), .85) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(var(--accent-rgb), .22));
}
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 84px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--void)); box-shadow: 0 0 14px rgba(var(--accent-rgb), .7);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s .25s var(--ease-out);
}
.section-title.is-visible::after, .section-title:not(.reveal)::after { transform: scaleX(1); }
.section-title[style*="text-align: center"]::after, .hero-title::after { display: none; }

/* Divisor luminoso entre secciones */
section + section::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(70%, 760px); height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55), transparent);
  box-shadow: 0 0 24px 1px rgba(var(--accent-rgb), .25); pointer-events: none;
}

/* Tarjetas con relieve y luz más viva */
.raid-report-card, .value-card, .core-card, .store-card, .leaderboard-card, .foro-card, .raid-countdown-card, .stat-chip {
  border-color: rgba(var(--accent-rgb), .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -26px rgba(0, 0, 0, .9);
}
@media (hover: hover) and (pointer: fine) {
  :is(.raid-report-card, .value-card, .core-card, .store-card, .leaderboard-card, .foro-card, .raid-countdown-card)::after {
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--core-rgb, var(--accent-rgb)), .11), transparent 70%);
  }
  .value-card:hover, .core-card:hover, .leaderboard-card:hover, .raid-report-card:hover, .foro-card:hover {
    border-color: rgba(var(--core-rgb, var(--accent-rgb)), .6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 50px -22px rgba(var(--core-rgb, var(--accent-rgb)), .3);
  }
}
.stat-chip { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.lite .stat-chip { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Entradas con más presencia */
.reveal { transform: translateY(40px) scale(.97); }
.reveal.is-visible { transform: none; }

/* Foco de luz del hero que sigue al mouse */
.hero-spot {
  position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; z-index: 0;
  border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .13), rgba(var(--accent-rgb), .04) 45%, transparent 70%);
  transition: opacity .6s ease;
}
.hero-spot.is-on { opacity: 1; }
html.lite .hero-spot { display: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transform: none; } .section-title::after { transition: none; } }
.section-title.is-centered::after { left: 50%; margin-left: -42px; }

/* =============================================================
   99c. Logo 3D real (WebGL). El canvas dibuja el escudo original
   con relieve; si WebGL falla, queda la imagen plana.
   ============================================================= */
.crest-gl {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)) var(--dragon-tint, hue-rotate(0deg));
}
.logo-mark--hero-live.has-gl .crest-crisp-site { visibility: hidden; }
.logo-mark--hero-live .crest-gl { inset: -9%; width: 118%; height: 118%; }
.crest-gl-menu { position: relative; display: block; width: 72px; height: 80px; flex: none; margin-block: -9px; }
.crest-gl-menu .crest-gl { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)) saturate(1.25) contrast(1.12) brightness(1.08) var(--dragon-tint, hue-rotate(0deg)); }
.nav-brand.has-gl .logo-mark { display: none; }

/* Wordmark del menú: bloque junto al logo, con divisor y subtítulo */
.nav-brand { gap: 1rem; }
.nav-brand .nav-wordmark {
  display: flex; flex-direction: column; align-items: flex-start; gap: .12rem;
  padding-left: 1rem; border-left: 1px solid rgba(var(--accent-rgb), .35);
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: inherit; animation: none; text-shadow: none; letter-spacing: normal;
}
.nav-wordmark b {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 3.4vw, 1.6rem); line-height: 1; letter-spacing: .17em;
  background: linear-gradient(100deg, #fff 32%, rgba(var(--accent-rgb), 1) 50%, #fff 68%) 115% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)) drop-shadow(0 0 12px rgba(var(--accent-rgb), .3));
  animation: wordshine 6s ease-in-out infinite;
}
.nav-wordmark small {
  font-family: var(--sans); font-weight: 700; font-size: .56rem; line-height: 1; letter-spacing: .5em; text-transform: uppercase;
  color: rgba(var(--accent-rgb), .95); padding-left: .1rem;
}
@keyframes wordshine { 0%, 15% { background-position: 115% 0; } 60%, 100% { background-position: -15% 0; } }
@media (max-width: 420px) { .nav-wordmark small { display: none; } .nav-brand .nav-wordmark { padding-left: .7rem; } }
html.lite .nav-wordmark b { animation: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .nav-wordmark b { animation: none; background-position: 50% 0; } }


/* =============================================================
   99d. Fondo vivo: auroras + código de WoW + red de nodos.
   Capa fija entre el fondo base (-3) y las estrellas (-2).
   ============================================================= */
.fx-bg { position: fixed; inset: 0; z-index: -2; overflow: clip; pointer-events: none; contain: strict; }
.fx-aurora {
  position: absolute; width: 78vmax; height: 78vmax; border-radius: 50%; opacity: .24; will-change: transform;
  background-color: rgb(var(--accent-rgb));
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
  transition: background-color .2s ease;
}
.fx-a1 { left: -22vmax; top: -30vmax; animation: fx-drift-a 42s ease-in-out infinite alternate; }
.fx-a2 { right: -26vmax; top: 18vh; background-color: rgb(var(--void-rgb)); opacity: .2; animation: fx-drift-b 55s ease-in-out infinite alternate; }
.fx-a3 { left: 20vw; bottom: -42vmax; opacity: .11; animation: fx-drift-c 48s ease-in-out infinite alternate; }
@keyframes fx-drift-a { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.12); } }
@keyframes fx-drift-b { to { transform: translate3d(-12vmax, -8vmax, 0) scale(.92); } }
@keyframes fx-drift-c { to { transform: translate3d(10vmax, -12vmax, 0) scale(1.1); } }
.fx-code {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + var(--th, 1000px)); opacity: 0;
  -webkit-mask-size: 1100px 1000px; mask-size: 1100px 1000px; -webkit-mask-repeat: repeat; mask-repeat: repeat;
  transition: opacity 1.6s ease, background-color .2s ease; will-change: transform;
  animation: fx-code-up 90s linear infinite;
}
.fx-code.is-ready { opacity: var(--o, .08); }
.fx-code--far { --o: .08; background-color: rgb(var(--void-rgb)); }
.fx-code--near { --o: .13; background-color: rgb(var(--accent-rgb)); }
@keyframes fx-code-up { to { transform: translate3d(0, calc(var(--th, 1000px) * -1), 0); } }
.fx-net { position: absolute; inset: 0; width: 100%; height: 100%; }
/* (modo ligero ya NO oculta el fondo de código/red: solo baja su ritmo, ver initAuraBackground) */
html.lite .fx-aurora { animation: none; }
@media (max-width: 759px) { .fx-code--far { display: none; } }
@media (prefers-reduced-motion: reduce) { .fx-aurora, .fx-code { animation: none; } }

/* El fondo vivo (99d) tiene que verse en TODAS las secciones: Raiders y Comunidad
   pintaban su propio fondo opaco encima, y Progresión/Únete/Beneficios lo oscurecían. */
.raiders, .community { background: transparent; }
.progression::after, .apply::after, .store::after { background: rgba(0, 0, 0, .08); }

/* =============================================================
   99e. Tipografía (como AURATEC): Space Grotesk para títulos y
   números, Inter para lectura. Más moderna y legible que la serif
   de inscripción, y combina con el cristal y el fondo de red.
   ============================================================= */
body { line-height: 1.65; font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.hero-title { font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.section-title { font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.section-lead, .hero-sub { line-height: 1.7; }
.eyebrow { font-family: var(--sans); font-weight: 700; letter-spacing: .16em; }
.nav-wordmark b { font-weight: 700; letter-spacing: .14em; }
.nav-links, .nav-links a, .nav-item-btn { font-family: var(--sans); font-weight: 500; letter-spacing: -.005em; }
.btn, .hero-exp-btn, .raiders-tab, .zone-tab { font-family: var(--sans); font-weight: 600; letter-spacing: -.005em; }
.stat-chip strong, .stat-chip b, .raid-countdown-card strong, [data-count] { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.raid-countdown-card, .core-card, .leaderboard-card { font-variant-numeric: tabular-nums; }

/* =============================================================
   99f. Progresión — escenario de cristal (estilo AURATEC)
   ============================================================= */
/* Selector de expansión: cápsula de cristal, no botones sueltos */
.tabs-nav {
  display: flex; width: fit-content; max-width: 100%; margin-inline: auto; gap: .3rem; padding: .35rem;
  border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .22);
  background: rgba(var(--bg-rgb), .55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -22px rgba(0, 0, 0, .8);
}
.tab-btn { border-color: transparent; background: transparent; color: var(--muted); font-family: var(--sans); font-weight: 600; padding: .65rem 1.35rem; letter-spacing: -.005em; }
.tab-btn:hover { background: rgba(var(--accent-rgb), .1); border-color: transparent; }
.tab-btn[aria-selected="true"] { box-shadow: 0 8px 24px -8px rgba(var(--accent-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* El panel completo se vuelve un escenario: cristal, borde luminoso, entrada escalonada */
.tab-panel.is-active {
  position: relative; padding: clamp(1rem, 2.4vw, 1.8rem); border-radius: 28px;
  border: 1px solid rgba(var(--accent-rgb), .2);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .07), transparent 40%), rgba(var(--bg-rgb), .52);
  backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 90px -50px rgba(var(--accent-rgb), .7);
}
.tab-panel.is-active::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .9), transparent);
}
.tab-panel.is-active > * { animation: panel-in .6s var(--ease-out) backwards; }
.tab-panel.is-active > :nth-child(2) { animation-delay: .07s; }
.tab-panel.is-active > :nth-child(3) { animation-delay: .14s; }
.tab-panel.is-active > :nth-child(4) { animation-delay: .21s; }
@keyframes panel-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

/* Galería con más presencia */
.gallery { border-radius: 20px; border-color: rgba(var(--accent-rgb), .28); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); box-shadow: 0 36px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(var(--accent-rgb), .1), 0 0 60px -30px rgba(var(--accent-rgb), .8); }
.gallery::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, transparent 62%, rgba(var(--bg-rgb), .55)), linear-gradient(135deg, rgba(255, 255, 255, .07), transparent 30%);
}
.gallery-nav { border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); }
.gallery-dot { width: 18px; height: 4px; border-radius: 4px; transition: width .35s var(--ease-out), background .25s var(--ease-out); }
.gallery-dot.is-active { width: 34px; transform: none; box-shadow: 0 0 10px rgba(var(--accent-rgb), .8); }

/* Texto del escenario */
.tab-kicker {
  display: inline-flex; align-items: center; gap: .5rem; padding: .32rem .8rem; border-radius: 999px;
  background: rgba(var(--accent-rgb), .09); border: 1px solid rgba(var(--accent-rgb), .28); font-size: .7rem; letter-spacing: .14em;
}
.tab-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.tab-panel h3 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.04;
  background: linear-gradient(180deg, #fff 35%, rgba(var(--accent-rgb), .9) 135%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tab-panel p.summary { font-size: 1.04rem; line-height: 1.7; }
.tab-highlights { margin-top: .4rem; }
.tab-highlights li { padding: .1rem 0 .1rem 2rem; margin-bottom: .7rem; line-height: 1.5; }
.tab-highlights li::before {
  content: "✓"; display: grid; place-items: center; left: 0; top: .12rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  font-size: .72rem; font-weight: 800; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--void)); box-shadow: 0 0 12px -2px rgba(var(--accent-rgb), .8);
}
.tab-links a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.05rem; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08);
  transition: transform .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.tab-links a:hover { text-decoration: none; transform: translateY(-2px); background: rgba(var(--accent-rgb), .18); border-color: var(--accent); }
.tab-links a:active { transform: scale(.97); }

/* Tarjetas de core dentro del escenario */
.tab-panel .core-card { background: linear-gradient(165deg, rgba(var(--core-rgb, var(--accent-rgb)), .12), transparent 70%), rgba(0, 0, 0, .25); backdrop-filter: blur(6px); }

/* Progresión confirmada / en vivo: panel de cristal con barras que brillan */
.raid-tracker {
  position: relative; padding: 1.5rem 1.7rem; border-radius: 22px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .06), transparent 50%), rgba(var(--bg-rgb), .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.raid-tracker-label {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; margin-bottom: 1.2rem; border-radius: 999px;
  color: var(--accent); background: rgba(var(--accent-rgb), .09); border: 1px solid rgba(var(--accent-rgb), .28); letter-spacing: .1em;
}
.raid-row-name { font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.raid-row-badge { font-size: .76rem; padding: .28rem .7rem; letter-spacing: .01em; }
.raid-row-badge.is-cleared { box-shadow: 0 0 16px -4px rgba(166, 226, 46, .6); }
.raid-row-bar { height: 10px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.raid-row-bar span { position: relative; overflow: clip; box-shadow: 0 0 14px rgba(var(--accent-rgb), .6); }
.raid-row-bar span::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-120%); animation: bar-sheen 3.4s ease-in-out infinite;
}
@keyframes bar-sheen { 0%, 25% { transform: translateX(-120%); } 70%, 100% { transform: translateX(120%); } }
.raid-row + .raid-row { margin-top: 1.2rem; }

@media (hover: hover) and (pointer: fine) {
  :is(.gallery, .raid-tracker)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .11), transparent 70%);
    opacity: 0; transition: opacity .35s ease;
  }
  :is(.gallery, .raid-tracker).has-glow::after { opacity: 1; }
}
html.lite .tabs-nav, html.lite .tab-panel.is-active, html.lite .tab-panel .core-card { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(var(--bg-rgb), .85); }
html.lite .raid-row-bar span::after { animation: none; }
@media (max-width: 560px) { .tabs-nav { border-radius: 22px; } .tab-btn { padding: .55rem 1rem; } }
@media (prefers-reduced-motion: reduce) { .tab-panel.is-active > *, .raid-row-bar span::after { animation: none; } }

/* =============================================================
   99g. TODAS las secciones en cristal (estilo AURATEC)
   Paneles grandes: cristal con desenfoque. Tarjetas repetidas:
   translúcidas sin desenfoque (para no pesar). Mismos bordes,
   luz y entradas que Progresión.
   ============================================================= */
:root {
  --glass: linear-gradient(160deg, rgba(var(--accent-rgb), .07), transparent 45%), rgba(var(--bg-rgb), .5);
  --glass-line: rgba(var(--accent-rgb), .2);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 26px 54px -32px rgba(0, 0, 0, .9);
}

/* ---- Paneles grandes (con desenfoque) ---- */
.raiders-table-wrap, .community-embed, .apply-form, .horizon-inner, .apply-discord-card,
.raid-reports-toolbar, .raiders-toolbar, .profile-summary-card {
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%);
}
.apply-form { border-radius: 26px; padding: clamp(1.3rem, 3vw, 2.2rem); }
.community-embed { border-radius: 26px; }
.raiders-table-wrap { border-radius: 22px; }
.horizon-inner { border-radius: 26px; }

/* ---- Tarjetas repetidas (translúcidas, sin blur) ---- */
.value-card, .leaderboard-card, .raid-report-card, .store-card, .foro-card, .raid-countdown-card, .raid-cal-day, .core-card {
  background: var(--glass); border-color: var(--glass-line); box-shadow: var(--glass-shadow);
}
.value-card, .store-card, .foro-card { border-radius: 20px; }
.raid-report-card:not([data-core-color]) { border-color: var(--glass-line); }
.raid-calendar { gap: .6rem; }
.raid-cal-day { border-radius: 14px; }

/* ---- Barras de filtros: cápsulas de cristal ---- */
.raiders-toolbar, .raid-reports-toolbar { border-radius: 22px; padding: .9rem 1rem; }
.raiders-tabs { padding: .3rem; border-radius: 999px; background: rgba(var(--bg-rgb), .5); border: 1px solid var(--glass-line); width: fit-content; max-width: 100%; margin-inline: auto; gap: .25rem; }
.raiders-tab { border-color: transparent; background: transparent; color: var(--muted); font-family: var(--sans); font-weight: 600; }
.raiders-tab:hover { background: rgba(var(--accent-rgb), .1); color: var(--ink); }
.raiders-tab.is-active { box-shadow: 0 8px 22px -8px rgba(var(--accent-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* ---- Campos: cristal con aro de luz al enfocar ---- */
.raiders-search, .raiders-select, .raid-reports-date-label input,
.apply-form input, .apply-form select, .apply-form textarea {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 12px;
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
}
.raiders-search:hover, .raiders-select:hover, .apply-form input:hover, .apply-form select:hover, .apply-form textarea:hover { border-color: rgba(var(--accent-rgb), .4); }
.raiders-search:focus, .raiders-select:focus, .raid-reports-date-label input:focus,
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus {
  outline: none; border-color: var(--accent); background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2), 0 8px 24px -12px rgba(var(--accent-rgb), .7);
}
.apply-form label, .apply-form .verify-label { font-weight: 600; letter-spacing: -.005em; }

/* ---- Tabla de raiders ---- */
.raiders-table thead th { background: rgba(var(--bg-rgb), .75); backdrop-filter: blur(8px); font-family: var(--sans); letter-spacing: .08em; }
.raiders-table tbody tr { transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out); }
.raiders-table tbody tr:hover { background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), transparent 75%); border-left-color: var(--accent); }
.raiders-note, .raiders-status { color: var(--muted); }

/* ---- Tienda / beneficios ---- */
.store-card { padding: 1.7rem 1.3rem; transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.store-card .icon { width: 62px; height: 62px; box-shadow: 0 0 26px -6px rgba(var(--accent-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .15); background: radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .08)); }
.store-card .name { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }
.store-card:hover { border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 28px 54px -26px rgba(255, 207, 107, .35); }

/* ---- Logro destacado ---- */
.achievement-media { border-radius: 22px; border-color: var(--glass-line); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .9), 0 0 80px -44px rgba(var(--accent-rgb), .8); }
.roster-list li { background: var(--glass); border-color: var(--glass-line); font-family: var(--sans); font-weight: 600; transition: transform .25s var(--ease-out), border-color .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .roster-list li:hover { transform: translateY(-3px); border-color: var(--accent); } }

/* ---- Foro / Reportes: flechas de cristal ---- */
.raid-reports-arrow { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(8px); transition: transform .25s var(--ease-out), border-color .25s var(--ease-out); }
.raid-reports-arrow:hover { border-color: var(--accent); transform: scale(1.08); }

/* ---- Únete ---- */
.apply-recruiting { border-radius: 14px; backdrop-filter: blur(6px); }
.apply-form .btn-primary { padding-block: .95rem; font-size: 1rem; }

/* ---- Pie ---- */
.site-footer { position: relative; border-top: 0; background: linear-gradient(180deg, rgba(var(--bg-rgb), .25), rgba(var(--bg-rgb), .75)); }
.site-footer::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .7), transparent); box-shadow: 0 0 24px rgba(var(--accent-rgb), .3); }
.footer-links a { transition: color .25s ease, transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: var(--accent); transform: translateX(3px); } }

/* ---- Luz que sigue al mouse en los paneles grandes ---- */
.horizon-inner, .apply-discord-card, .raiders-table-wrap, .raid-cal-day { position: relative; }
@media (hover: hover) and (pointer: fine) {
  :is(.apply-form, .community-embed, .horizon-inner, .apply-discord-card, .raiders-table-wrap, .raid-cal-day)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .1), transparent 70%);
    opacity: 0; transition: opacity .35s ease;
  }
  :is(.apply-form, .community-embed, .horizon-inner, .apply-discord-card, .raiders-table-wrap, .raid-cal-day).has-glow::after { opacity: 1; }
}

/* ---- Entradas escalonadas de rejillas (30–80 ms entre elementos) ---- */
.values-grid > *, .store-grid > *, .leaderboard-wrap .leaderboard-card, .raid-calendar > * { --stag: 0ms; }
.reveal.is-visible { transition-delay: var(--stag, 0ms); }

html.lite .raiders-table-wrap, html.lite .community-embed, html.lite .apply-form, html.lite .horizon-inner,
html.lite .apply-discord-card, html.lite .raid-reports-toolbar, html.lite .raiders-toolbar, html.lite .profile-summary-card,
html.lite .raid-reports-arrow, html.lite .apply-recruiting, html.lite .raiders-table thead th { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(var(--bg-rgb), .88); }

/* =============================================================
   99h. Hero (parte baja) — barra de cifras, selector de versión,
   botones y frase, todo en cristal (estilo AURATEC)
   ============================================================= */
.hero-sub { max-width: 60ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; color: rgba(var(--ink-rgb, 244, 238, 252), .82); margin: 1.2rem 0 2.2rem; }

/* Cifras: una sola barra de cristal con divisores luminosos */
.hero-chips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: min(100%, 800px); margin: 0 auto 2.2rem; padding: .45rem;
  border-radius: 26px; border: 1px solid var(--glass-line, rgba(var(--accent-rgb), .2));
  background: var(--glass, rgba(var(--bg-rgb), .5));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -34px rgba(0, 0, 0, .9), 0 0 80px -46px rgba(var(--accent-rgb), .8);
}
.stat-chip {
  min-width: 0; padding: 1.15rem .6rem 1rem; gap: .3rem; border: 0; border-radius: 20px; background: transparent; box-shadow: none;
}
.stat-chip::before {
  inset: 18% auto 18% 0; width: 1px; height: auto; opacity: 1;
  background: linear-gradient(transparent, rgba(var(--accent-rgb), .45), transparent);
}
.stat-chip:first-child::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  .stat-chip:hover { transform: translateY(-3px); background: rgba(var(--accent-rgb), .08); box-shadow: none; border-color: transparent; }
}
.stat-chip-icon {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: .25rem; border-radius: 12px; font-size: 1.05rem;
  background: radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), .3), rgba(var(--accent-rgb), .07));
  border: 1px solid rgba(var(--accent-rgb), .28); box-shadow: 0 0 20px -6px rgba(var(--accent-rgb), .7);
}
.stat-chip strong {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 600; line-height: 1; letter-spacing: -.035em;
  background: linear-gradient(180deg, #fff 25%, rgba(var(--accent-rgb), 1) 150%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(var(--accent-rgb), .3));
}
.stat-chip span:not(.stat-chip-icon) { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 620px) {
  .hero-chips { grid-template-columns: repeat(2, 1fr); }
  .stat-chip:nth-child(3)::before { display: none; }
}

/* Selector de versión: cápsula de cristal */
.hero-expansions {
  gap: .25rem; padding: .35rem; width: fit-content; max-width: 100%; margin: 0 auto 1.8rem; border-radius: 999px;
  border: 1px solid var(--glass-line, rgba(var(--accent-rgb), .2)); background: rgba(var(--bg-rgb), .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -24px rgba(0, 0, 0, .85);
}
.hero-exp-btn { border-color: transparent; background: transparent; font-family: var(--sans); font-weight: 600; padding: .6rem 1.2rem; }
.hero-exp-btn:hover { background: rgba(var(--accent-rgb), .1); border-color: transparent; }
.hero-exp-btn.is-active { box-shadow: 0 8px 22px -8px rgba(var(--accent-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* Botones de acción */
.hero-cta { gap: 1rem; }
.hero-cta .btn { padding: 1.05rem 2rem; font-size: 1.02rem; }
.hero-cta .btn-primary { box-shadow: 0 16px 40px -14px rgba(var(--accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hero-cta .btn-outline {
  background: rgba(var(--bg-rgb), .5); border: 1px solid rgba(var(--accent-rgb), .3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Frase final en píldora de cristal */
.hero-tagline {
  width: fit-content; margin: 2rem auto 0; padding: .65rem 1.4rem; border-radius: 999px; font-family: var(--sans); font-weight: 500; font-size: 1rem;
  border: 1px solid var(--glass-line, rgba(var(--accent-rgb), .2)); background: rgba(var(--bg-rgb), .45);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html.lite .hero-chips, html.lite .hero-expansions, html.lite .hero-cta .btn-outline, html.lite .hero-tagline { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(var(--bg-rgb), .85); }

/* El fondo del hero se funde hacia la siguiente sección (sin corte seco) */
.hero-bg { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }

/* Título principal: Sora — geométrica y limpia, sin la "y" caprichosa de Space Grotesk a este tamaño */
.hero-title { font-family: "Sora", var(--display); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; }

/* Menú centrado: logo a la izquierda, enlaces al centro exacto, acciones a la derecha */
@media (min-width: 960px) {
  .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; }
  .nav-brand { margin-right: 0; justify-self: start; }
  .nav-links { justify-self: center; gap: 1.9rem; }
  .nav-actions { justify-self: end; }
}
.nav-links, .nav-links a, .nav-item-btn { font-family: "Sora", var(--sans); font-weight: 500; font-size: .84rem; letter-spacing: .005em; }
.nav-links a, .nav-item-btn { color: rgba(var(--ink-rgb, 244, 238, 252), .72); }
.nav-links a:hover, .nav-item-btn:hover, .nav-item-btn.is-current, .nav-links > a.is-current { color: #fff; }
.nav-dropdown a, .nav-dropdown button { font-family: "Sora", var(--sans); font-weight: 500; font-size: .82rem; }

/* =============================================================
   99i. Iconos 3D (como AURATEC): pieza de cristal que flota y se
   inclina con perspectiva, con borde de luz y trazo de línea.
   Solo transform: va por la GPU.
   ============================================================= */
@property --ico-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.stat-chip-icon, .store-card .icon {
  position: relative; display: grid; place-items: center; transform-style: preserve-3d;
  border: 1px solid rgba(var(--accent-rgb), .38); color: rgb(var(--accent-rgb));
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 42%),
    linear-gradient(135deg, rgba(var(--accent-rgb), .34), rgba(var(--void-rgb), .2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -8px 14px -8px rgba(0, 0, 0, .5), 0 10px 22px -10px rgba(var(--accent-rgb), .75), 0 2px 0 rgba(0, 0, 0, .35);
  animation: ico-sway 5.5s ease-in-out infinite alternate;
}
.stat-chip-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 0; }
.store-card .icon { width: 64px; height: 64px; border-radius: 18px; font-size: 0; }
.stat-chip-icon svg, .store-card .icon svg {
  width: 56%; height: 56%; transform: translateZ(14px);
  filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .7)) drop-shadow(0 3px 2px rgba(0, 0, 0, .55));
  animation: ico-nudge 6.5s ease-in-out infinite alternate;
}
/* borde de luz que gira (solo al pasar el mouse, para no repintar de más) */
.stat-chip-icon::before, .store-card .icon::before {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1px solid transparent; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: conic-gradient(from var(--ico-a), transparent 0 62%, rgb(var(--accent-rgb)) 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
@media (hover: hover) and (pointer: fine) {
  .stat-chip:hover .stat-chip-icon::before, .store-card:hover .icon::before { opacity: 1; animation: ico-spin 3.2s linear infinite; }
  .stat-chip:hover .stat-chip-icon, .store-card:hover .icon { animation-duration: 2.2s; }
}
.stat-chip:nth-child(2) .stat-chip-icon, .store-card:nth-child(2) .icon { animation-delay: -1.2s; }
.stat-chip:nth-child(3) .stat-chip-icon, .store-card:nth-child(3) .icon { animation-delay: -2.4s; }
.stat-chip:nth-child(4) .stat-chip-icon, .store-card:nth-child(4) .icon { animation-delay: -3.6s; }
.store-card:nth-child(5) .icon { animation-delay: -4.6s; }
@keyframes ico-sway {
  from { transform: perspective(240px) translateY(0) rotateY(-16deg) rotateX(5deg); }
  to   { transform: perspective(240px) translateY(-3px) rotateY(16deg) rotateX(-5deg); }
}
@keyframes ico-nudge { from { transform: translateZ(14px) rotate(-3deg) scale(1); } to { transform: translateZ(14px) rotate(3deg) scale(1.06); } }
@keyframes ico-spin { to { --ico-a: 360deg; } }
html.lite .stat-chip-icon, html.lite .store-card .icon, html.lite .stat-chip-icon svg, html.lite .store-card .icon svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .stat-chip-icon, .store-card .icon, .stat-chip-icon svg, .store-card .icon svg, .stat-chip-icon::before, .store-card .icon::before { animation: none; }
  .stat-chip-icon, .store-card .icon { transform: perspective(240px) rotateY(-10deg); }
}
/* Trazo claro (casi blanco con tinte del tema) para que el dibujo se lea sobre la pieza */
.stat-chip-icon, .store-card .icon { color: color-mix(in srgb, rgb(var(--accent-rgb)) 30%, #fff); }
.stat-chip-icon svg, .store-card .icon svg { stroke-width: 2; }

/* Barra de cifras más compacta */
.hero-chips { width: min(100%, 660px); padding: .3rem; border-radius: 22px; margin-bottom: 1.6rem; }
.stat-chip { padding: .8rem .4rem .7rem; gap: .2rem; }
.stat-chip-icon { width: 38px; height: 38px; border-radius: 12px; margin-bottom: .15rem; }
.stat-chip strong { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.stat-chip span:not(.stat-chip-icon) { font-size: .62rem; letter-spacing: .08em; }

/* Cada icono 3D con su propio color (según lo que representa) */
.stat-chip:nth-child(1) .stat-chip-icon { --ic: 114, 137, 255; }  /* Discord: azul-violeta */
.stat-chip:nth-child(2) .stat-chip-icon { --ic: 255, 98, 78; }    /* Espadas: rojo-naranja */
.stat-chip:nth-child(3) .stat-chip-icon { --ic: 255, 196, 72; }   /* Castillo: dorado */
.stat-chip:nth-child(4) .stat-chip-icon { --ic: 66, 226, 170; }   /* Reloj: verde menta */
.store-card:nth-child(1) .icon { --ic: 255, 120, 200; }           /* Ficha: rosa */
.store-card:nth-child(2) .icon { --ic: 176, 124, 255; }           /* Ruleta: morado */
.store-card:nth-child(3) .icon { --ic: 255, 200, 60; }            /* Gold: dorado */
.store-card:nth-child(4) .icon { --ic: 80, 225, 140; }            /* Consumibles: verde */
.store-card:nth-child(5) .icon { --ic: 214, 120, 255; }           /* Nitro: magenta */
.stat-chip-icon, .store-card .icon {
  color: color-mix(in srgb, rgb(var(--ic, var(--accent-rgb))) 35%, #fff);
  border-color: rgba(var(--ic, var(--accent-rgb)), .55);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .2), transparent 42%),
    linear-gradient(135deg, rgba(var(--ic, var(--accent-rgb)), .55), rgba(var(--ic, var(--accent-rgb)), .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -8px 14px -8px rgba(0, 0, 0, .5), 0 10px 24px -8px rgba(var(--ic, var(--accent-rgb)), .85), 0 2px 0 rgba(0, 0, 0, .35);
}
.stat-chip-icon svg, .store-card .icon svg { filter: drop-shadow(0 0 6px rgba(var(--ic, var(--accent-rgb)), .9)) drop-shadow(0 3px 2px rgba(0, 0, 0, .55)); }
.stat-chip-icon::before, .store-card .icon::before { background: conic-gradient(from var(--ico-a), transparent 0 62%, rgb(var(--ic, var(--accent-rgb))) 100%) border-box; }

/* Iconos 3D más pequeños */
.stat-chip-icon { width: 30px; height: 30px; border-radius: 10px; margin-bottom: .1rem; }
.store-card .icon { width: 46px; height: 46px; border-radius: 14px; }
.stat-chip-icon svg, .store-card .icon svg { width: 58%; height: 58%; transform: translateZ(8px); }
@keyframes ico-nudge { from { transform: translateZ(8px) rotate(-3deg) scale(1); } to { transform: translateZ(8px) rotate(3deg) scale(1.05); } }
.stat-chip { padding: .65rem .4rem .6rem; }

/* Pieza neutra (cristal) — el color vive en las partes del propio icono */
.stat-chip-icon, .store-card .icon {
  color: inherit;
  border-color: rgba(var(--accent-rgb), .3);
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 45%), rgba(var(--bg-rgb), .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -8px 14px -8px rgba(0, 0, 0, .55), 0 10px 22px -12px rgba(0, 0, 0, .9), 0 2px 0 rgba(0, 0, 0, .35);
}
.stat-chip-icon svg, .store-card .icon svg { width: 72%; height: 72%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5)); }
.stat-chip-icon::before, .store-card .icon::before { background: conic-gradient(from var(--ico-a), transparent 0 62%, rgb(var(--accent-rgb)) 100%) border-box; }

/* Iconos y barra de cifras: tamaño reducido otra vez */
.hero-chips { width: min(100%, 560px); border-radius: 18px; }
.stat-chip { padding: .5rem .3rem .5rem; gap: .12rem; }
.stat-chip-icon { width: 24px; height: 24px; border-radius: 8px; margin-bottom: 0; }
.stat-chip strong { font-size: clamp(1.25rem, 2.1vw, 1.65rem); }
.stat-chip span:not(.stat-chip-icon) { font-size: .56rem; letter-spacing: .07em; }
.store-card .icon { width: 36px; height: 36px; border-radius: 11px; }
.store-card { padding: 1.2rem 1rem; }
.stat-chip-icon svg, .store-card .icon svg { transform: translateZ(5px); }
@keyframes ico-nudge { from { transform: translateZ(5px) rotate(-3deg) scale(1); } to { transform: translateZ(5px) rotate(3deg) scale(1.05); } }
@media (max-width: 620px) { .hero-chips { width: min(100%, 360px); } }

/* =============================================================
   99j. Cuentas atrás de raid — paneles de cristal con el color de
   cada expansión y casillas de tiempo con volumen (estilo AURATEC)
   ============================================================= */
.raid-countdown-card, .launch-countdown {
  --c: var(--rc-color, var(--accent));
  position: relative; overflow: hidden; border-radius: 24px; padding: 1.5rem 1.3rem 1.3rem; border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--c) 26%, transparent), transparent 62%),
    linear-gradient(160deg, rgba(255, 255, 255, .05), transparent 45%), rgba(var(--bg-rgb), .55);
  backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 54px -32px rgba(0, 0, 0, .9), 0 0 70px -46px var(--c);
}
.raid-countdown-card::before, .launch-countdown::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: -1px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c), transparent); box-shadow: 0 0 18px 1px var(--c);
}
@media (hover: hover) and (pointer: fine) {
  .raid-countdown-card:hover, .launch-countdown:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 60px -30px color-mix(in srgb, var(--c) 55%, transparent), 0 0 80px -40px var(--c); }
}

/* Nombre de la expansión: píldora con punto de luz */
.raid-countdown-exp {
  display: inline-flex; align-items: center; gap: .5rem; padding: .34rem .9rem; margin-bottom: 1rem; border-radius: 999px;
  font-family: "Sora", var(--display); font-weight: 600; font-size: .86rem; letter-spacing: .02em;
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
}
.raid-countdown-exp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }

/* Bloque de cada core */
.raid-countdown-core-block {
  border-radius: 18px; padding: .85rem .7rem .85rem; background: rgba(0, 0, 0, .26);
  border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.raid-countdown-core { font-family: var(--sans); font-weight: 600; font-size: .8rem; color: var(--ink); margin-bottom: .8rem; opacity: .9; }

/* Casillas de tiempo con volumen */
.raid-countdown-timer { gap: .4rem; margin-bottom: .75rem; }
.raid-countdown-unit {
  min-width: 3.1rem; padding: .5rem .25rem .4rem; border-radius: 12px; gap: .22rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 50%, rgba(0, 0, 0, .25)), rgba(0, 0, 0, .3);
  border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -6px 10px -6px rgba(0, 0, 0, .6), 0 6px 14px -8px rgba(0, 0, 0, .8);
}
.raid-countdown-unit strong {
  font-size: 1.55rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--c) 70%, #fff) 150%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.raid-countdown-unit small { font-family: var(--sans); font-size: .56rem; font-weight: 600; letter-spacing: .12em; color: var(--muted); }
/* Los segundos laten una vez por segundo */
.raid-countdown-unit:nth-child(4) { animation: cd-beat 1s ease-out infinite; }
@keyframes cd-beat {
  0% { border-color: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 16px -2px var(--c); }
  60%, 100% { border-color: color-mix(in srgb, var(--c) 26%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -6px 10px -6px rgba(0, 0, 0, .6), 0 6px 14px -8px rgba(0, 0, 0, .8); }
}
.raid-countdown-local { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--muted); }
.raid-countdown-local::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c); opacity: .8; }

html.lite .raid-countdown-card, html.lite .launch-countdown { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(var(--bg-rgb), .88); }
html.lite .raid-countdown-unit:nth-child(4), .raid-countdown-wrap .raid-countdown-unit:nth-child(4) { animation-play-state: running; }
html.lite .raid-countdown-unit:nth-child(4) { animation: none; }
@media (prefers-reduced-motion: reduce) { .raid-countdown-unit:nth-child(4) { animation: none; } }
@media (max-width: 420px) { .raid-countdown-unit { min-width: 2.7rem; } .raid-countdown-unit strong { font-size: 1.3rem; } }

/* Que las casillas de tiempo siempre quepan dentro de su bloque */
.raid-countdown-card, .launch-countdown { padding: 1.4rem 1rem 1.2rem; }
.raid-countdown-core-block { min-width: 0; padding: .8rem .5rem .8rem; box-sizing: border-box; }
.raid-countdown-timer { width: 100%; gap: .3rem; }
.raid-countdown-unit { flex: 1 1 0; min-width: 0; max-width: 3.6rem; padding: .45rem .1rem .35rem; box-sizing: border-box; }
.raid-countdown-unit strong { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
.raid-countdown-unit small { font-size: .5rem; letter-spacing: .08em; }
.raid-countdown-card--multi .raid-countdown-core-block { flex: 1 1 200px; }

/* =============================================================
   99k. Ventana de personaje — cristal, aurora del color de la
   clase y fondo vivo visible detrás (estilo AURATEC)
   ============================================================= */
.char-modal-backdrop { background: rgba(var(--bg-rgb), .55); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); }
.char-modal-card {
  --cc: var(--char-class-color, var(--accent));
  width: min(960px, 96vw); border-radius: 30px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 12%, transparent), transparent 40%), rgba(var(--bg-rgb), .78);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--cc) 38%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 50px 100px -30px rgba(0, 0, 0, .95), 0 0 90px -40px var(--cc);
  animation: char-in .45s var(--ease-drawer, cubic-bezier(.32, .72, 0, 1)) both;
}
@keyframes char-in { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
/* Aurora de la clase (reemplaza la textura gigante que giraba) */
.char-modal-card::before {
  inset: 0; animation: none; background:
    radial-gradient(60% 50% at 12% -8%, color-mix(in srgb, var(--cc) 34%, transparent), transparent 70%),
    radial-gradient(50% 45% at 100% 8%, color-mix(in srgb, var(--void) 30%, transparent), transparent 70%),
    radial-gradient(70% 40% at 50% 120%, color-mix(in srgb, var(--cc) 18%, transparent), transparent 70%);
}
/* Luz que sigue al mouse + línea de luz superior */
.char-modal-card::after {
  inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), color-mix(in srgb, var(--cc) 14%, transparent), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
}
.char-modal-card.has-glow::after { opacity: 1; }
.char-modal-body::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cc), transparent); box-shadow: 0 0 22px 1px var(--cc);
}
.char-modal-body { padding: 2.2rem 1.9rem 2rem; }

.char-modal-x {
  top: .9rem; right: .9rem; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; padding: 0; z-index: 5;
  background: rgba(var(--bg-rgb), .6); border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); backdrop-filter: blur(8px);
  transition: transform .3s var(--ease-out), border-color .25s ease, color .25s ease;
}
.char-modal-x:hover { transform: rotate(90deg); border-color: var(--cc); color: #fff; }

/* Cabecera */
.char-modal-head { margin-bottom: 1.8rem; }
.char-modal-title-row { flex-direction: column; gap: .8rem; margin-bottom: .6rem; }
.char-modal-class-icon {
  width: 64px; height: 64px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--cc) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -10px var(--cc), 0 0 0 5px color-mix(in srgb, var(--cc) 12%, transparent);
  animation: ico-sway 5.5s ease-in-out infinite alternate;
}
.char-modal-head h2 {
  font-family: "Sora", var(--display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.04em; line-height: 1.05;
  background: linear-gradient(180deg, #fff 30%, var(--cc) 160%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; filter: drop-shadow(0 6px 24px color-mix(in srgb, var(--cc) 45%, transparent));
}
.char-modal-sub { gap: .5rem; font-family: var(--sans); font-size: .9rem; }
.char-modal-role-badge {
  padding: .25rem .7rem; background: color-mix(in srgb, var(--cc) 14%, transparent); border-color: color-mix(in srgb, var(--cc) 40%, transparent);
}
.char-modal-lastseen { margin-bottom: 1rem; }

/* Estadísticas principales como casillas de cristal */
.char-modal-stats { gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.char-modal-stats > span {
  display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 96px; padding: .7rem 1.1rem .65rem; border-radius: 16px;
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 50%, rgba(0, 0, 0, .22)), rgba(0, 0, 0, .25);
  border: 1px solid color-mix(in srgb, var(--cc) 26%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -8px 12px -8px rgba(0, 0, 0, .6), 0 10px 20px -12px rgba(0, 0, 0, .8);
}
.char-modal-stats strong { font-family: "Sora", var(--display); font-weight: 600; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.char-modal-links a {
  display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: 999px; font-weight: 600;
  color: color-mix(in srgb, var(--cc) 55%, #fff); background: color-mix(in srgb, var(--cc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 35%, transparent);
  transition: transform .25s var(--ease-out), background .25s ease, border-color .25s ease;
}
.char-modal-links a:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--cc) 22%, transparent); border-color: var(--cc); }

/* Títulos de sección con líneas laterales */
.char-modal-section-title {
  display: flex; align-items: center; gap: .9rem; margin: 1.6rem 0 1rem; font-family: "Sora", var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
}
.char-modal-section-title::before, .char-modal-section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cc) 55%, transparent)); }
.char-modal-section-title::after { transform: scaleX(-1); }

/* Equipo */
.char-gear-item {
  padding: .45rem .6rem; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 60%), rgba(0, 0, 0, .26);
  transition: transform .2s var(--ease-out), border-color .2s ease, background .2s ease;
}
a.char-gear-item:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--cc) 55%, transparent); background: rgba(0, 0, 0, .4); }
.char-gear-icon { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .8); }

/* Progreso, estadísticas y logs */
.char-progress-tier-card, .char-stat-card {
  border-radius: 18px; border: 1px solid color-mix(in srgb, var(--cc) 22%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 8%, transparent), transparent 50%), rgba(0, 0, 0, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.char-progress-track { height: 10px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.char-progress-fill { box-shadow: 0 0 12px color-mix(in srgb, var(--cc) 70%, transparent); }
.char-stat-big { font-family: "Sora", var(--display); font-weight: 600; letter-spacing: -.03em; }
.char-boss-table-wrap { border-radius: 18px; border-color: color-mix(in srgb, var(--cc) 22%, transparent); background: rgba(0, 0, 0, .22); }
.char-boss-filters select { border-radius: 999px; border-color: color-mix(in srgb, var(--cc) 30%, transparent); }

html.lite .char-modal-backdrop, html.lite .char-modal-card, html.lite .char-modal-x { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.lite .char-modal-card { background-color: rgba(var(--bg-rgb), .94); }
@media (max-width: 560px) { .char-modal-body { padding: 2rem 1rem 1.4rem; } .char-modal-stats > span { min-width: 82px; padding: .6rem .8rem; } }
@media (prefers-reduced-motion: reduce) { .char-modal-card, .char-modal-class-icon { animation: none; } }
.char-modal-head h2 { background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 30%, #fff) 5%, var(--cc) 115%); -webkit-background-clip: text; background-clip: text; }

/* Código de WoW subiendo DENTRO de la ventana de personaje (mismo mosaico del fondo vivo) */
.char-modal-code {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 1000px); z-index: 0; pointer-events: none; opacity: .16;
  background-color: var(--char-class-color, var(--accent));
  -webkit-mask-image: var(--code-tile); mask-image: var(--code-tile); -webkit-mask-size: 1100px 1000px; mask-size: 1100px 1000px; -webkit-mask-repeat: repeat; mask-repeat: repeat;
  --th: 1000px; animation: fx-code-up 70s linear infinite; will-change: transform;
}
html.lite .char-modal-code, .char-modal-card:not(:hover) .char-modal-code { animation-play-state: running; }
html.lite .char-modal-code { display: none; }
@media (prefers-reduced-motion: reduce) { .char-modal-code { animation: none; } }

/* =============================================================
   99l. Iconos de clase / equipo / especialización / rail en 3D
   - Se conserva el arte original (colores intactos, sin filtros de color).
   - No cambia ningún tamaño: border-box + bisel, sombra y giro 3D.
   ============================================================= */
.raiders-class-icon, .leaderboard-class-icon, .char-gear-icon, .char-boss-spec-icon, .raid-report-participant-icon,
.account-char-icon, .profile-row-icon, .char-modal-class-icon {
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .22); border-top-color: rgba(255, 255, 255, .48); border-bottom-color: rgba(0, 0, 0, .6);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .65), 0 6px 12px -5px rgba(0, 0, 0, .85), 0 0 0 1px rgba(var(--accent-rgb), .16);
  transition: transform .35s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
  transform-origin: 50% 60%; backface-visibility: hidden;
}
.char-modal-class-icon { border-color: color-mix(in srgb, var(--cc, var(--accent)) 55%, rgba(255, 255, 255, .25)); }

/* Giro 3D al pasar el mouse sobre la fila / tarjeta / pieza (solo rotación: no cambia tamaño) */
@media (hover: hover) and (pointer: fine) {
  .raiders-table tbody tr:hover .raiders-class-icon,
  .leaderboard-card:hover .leaderboard-class-icon,
  a.char-gear-item:hover .char-gear-icon,
  .profile-row-summary:hover .profile-row-icon,
  .account-char:hover .account-char-icon, .raid-report-participant:hover .raid-report-participant-icon,
  .theme-rail-btn:hover .theme-rail-icon {
    transform: perspective(120px) rotateY(-24deg) rotateX(8deg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .65), 8px 10px 14px -6px rgba(0, 0, 0, .9), 0 0 14px -2px rgba(var(--accent-rgb), .55);
  }
  .theme-rail-btn:hover .theme-rail-icon { box-shadow: none; }
}

/* Balanceo suave permanente solo en las piezas destacadas (pocas, no la tabla entera) */
.leaderboard-class-icon { animation: ico-sway-s 5.5s ease-in-out infinite alternate; }
.leaderboard-card:nth-child(2n) .leaderboard-class-icon { animation-delay: -1.8s; }
.leaderboard-card:nth-child(3n) .leaderboard-class-icon { animation-delay: -3.6s; }
@keyframes ico-sway-s {
  from { transform: perspective(160px) rotateY(-14deg) rotateX(3deg); }
  to   { transform: perspective(160px) rotateY(14deg) rotateX(-3deg); }
}
.char-boss-spec-icon { border-radius: 4px; }

/* Rail de expansiones: más profundidad sin tocar tamaño ni color del icono */
.theme-rail-btn { transform-style: preserve-3d; }
.theme-rail-icon { transition: transform .35s var(--ease-out); }

html.lite .leaderboard-class-icon { animation: none; }
@media (prefers-reduced-motion: reduce) { .leaderboard-class-icon { animation: none; } }

/* Texto de presentación del hero */
.hero-sub {
  position: relative; max-width: 62ch; padding: 1.5rem 1rem 1.6rem; margin: 1rem 0 1.8rem;
  font-family: "Sora", var(--sans); font-weight: 300; font-size: clamp(1.05rem, 1.55vw, 1.3rem); line-height: 1.8; letter-spacing: -.005em;
  color: rgba(var(--ink-rgb, 244, 238, 252), .8); text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .65);
}
.hero-sub::before, .hero-sub::after {
  content: ""; position: absolute; left: 50%; width: min(220px, 50%); height: 1px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .8), transparent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .45);
}
.hero-sub::before { top: 0; }
.hero-sub::after { bottom: 0; }
.hero-sub em {
  font-style: normal; font-weight: 600; letter-spacing: -.01em;
  background: linear-gradient(100deg, #fff 10%, var(--accent) 60%, var(--void) 120%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 10px rgba(var(--accent-rgb), .35));
}

/* =============================================================
   99m. Fluidez + correcciones
   ============================================================= */

/* ---- Desplegables oscuros (las opciones salían blancas con letra clara: ilegibles) ---- */
select, input, textarea { color-scheme: dark; }
select option, select optgroup { background-color: #16102e; color: #f4eefc; }
select option:checked, select option:hover { background-color: #2b2160; color: #fff; }
select option:disabled { color: #8377ab; }

/* ---- Los segundos NO parpadean: sin brillo por segundo ---- */
.raid-countdown-unit:nth-child(4) { animation: none; }

/* ---- Menos trabajo de dibujo al hacer scroll ---- */
/* 1) Desenfoque de fondo (backdrop-filter): solo donde importa (menú, desplegables y ventanas).
      En paneles grandes se recalculaba en cada cuadro del video/canvas de atrás y causaba tirones. */
.tabs-nav, .tab-panel.is-active, .tab-panel .core-card, .raiders-table-wrap, .community-embed, .apply-form,
.horizon-inner, .apply-discord-card, .raid-reports-toolbar, .raiders-toolbar, .profile-summary-card,
.raid-reports-arrow, .apply-recruiting, .raid-countdown-card, .launch-countdown, .hero-chips, .hero-expansions,
.hero-cta .btn-outline, .hero-tagline, .stat-chip, .raiders-table thead th, .gallery-nav {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background-color: rgba(var(--bg-rgb), .8);
}
.nav-inner { backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); }

/* 2) Animaciones infinitas que repintaban texto en cada cuadro (brillo del texto con background-position
      y filtros): se dejan estáticas. */
.nav-wordmark b, .hero-tagline strong, .nav-brand span { animation: none; }
.nav-wordmark b { background-position: 50% 0; }
.section-title, .stat-chip strong, .hero-sub em, .tab-panel h3, .char-modal-head h2 { filter: none; }
.nav-wordmark b { filter: none; text-shadow: none; }

/* 3) Partículas de ambiente (orbes, arena, viento, gemas): el filtro blur/drop-shadow de cada una
      obligaba a repintarlas en cada cuadro. */
.theme-orbs span, .theme-sand span, .theme-wind span, .theme-gems span, .theme-legendary span, .theme-clouds span { filter: none; }

/* 4) Mientras se hace scroll se pausan los fondos animados (JS pone html.is-scrolling) */
html.is-scrolling .fx-aurora, html.is-scrolling .fx-code, html.is-scrolling .char-modal-code,
html.is-scrolling .theme-orbs span, html.is-scrolling .theme-sand span, html.is-scrolling .theme-wind span,
html.is-scrolling .theme-gems span, html.is-scrolling .theme-legendary span, html.is-scrolling .theme-clouds span,
html.is-scrolling .bg-layer, html.is-scrolling .raid-row-bar span::after,
html.is-scrolling .hero-cta .btn-primary::after, html.is-scrolling .nav-calendar-btn::before {
  animation-play-state: paused;
}

/* 5) Una sola capa de código (la lejana se quita) y auroras algo más chicas: menos superficie por composición */
.fx-code--far { display: none; }
.fx-aurora { width: 62vmax; height: 62vmax; }

/* =============================================================
   99n. Nuestros Raiders — podio, barra de filtros y tabla con más vida,
   y iconos de clase/equipo en 3D (mismo tamaño y mismos colores)
   ============================================================= */

/* ---- Iconos 3D: el <img> original queda igual (tamaño y color); lo envuelve .i3d (lo crea main.js) ---- */
.i3d {
  position: relative; display: inline-flex; flex: none; border-radius: 6px; vertical-align: middle;
  box-shadow: 0 5px 7px -4px rgba(0, 0, 0, .85), 0 1px 0 rgba(0, 0, 0, .6);
  transition: transform .4s var(--ease-out), box-shadow .3s ease;
}
.i3d > img { display: block; position: relative; z-index: 1; transform: none !important; animation: none !important; box-shadow: none !important; }
/* Brillo de cristal encima: realza el relieve sin cambiar el color (overlay) + destello que cruza al pasar el mouse */
.i3d::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .6) 50%, transparent 66%),
    linear-gradient(140deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .3) 100%);
  background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0; background-repeat: no-repeat;
  opacity: .55; transition: background-position .8s var(--ease-out); /* sin mix-blend-mode: con cientos de iconos frenaba el scroll */
}
@media (hover: hover) and (pointer: fine) {
  .raiders-table tbody tr:hover .i3d, .leaderboard-row:hover .i3d, a.char-gear-item:hover .i3d, .profile-row-summary:hover .i3d, .account-char:hover .i3d {
    transform: perspective(130px) rotateY(-26deg) rotateX(9deg); box-shadow: 7px 9px 12px -6px rgba(0, 0, 0, .9), 0 0 16px -2px rgba(var(--accent-rgb), .6);
  }
  .raiders-table tbody tr:hover .i3d::after, .leaderboard-row:hover .i3d::after, a.char-gear-item:hover .i3d::after { background-position: -60% 0, 0 0; }
}
/* Los del podio se balancean despacio (son pocos) */
.leaderboard-class-icon { animation: none; }
.leaderboard-row .i3d { animation: ico-sway-s 5.5s ease-in-out infinite alternate; }
.leaderboard-card:nth-child(2) .leaderboard-row .i3d { animation-delay: -1.6s; }
.leaderboard-card:nth-child(3) .leaderboard-row .i3d { animation-delay: -3.2s; }
.leaderboard-row:hover .i3d { animation-play-state: paused; }
html.lite .leaderboard-row .i3d { animation: none; }
@media (prefers-reduced-motion: reduce) { .leaderboard-row .i3d { animation: none; } .i3d, .i3d::after { transition: none; } }

/* ---- Podio (los 3 rankings) ---- */
.leaderboard-card { --lb: var(--accent-rgb); border-radius: 24px; padding: 1.3rem 1.2rem 1rem; border-color: rgba(var(--lb), .3); }
.leaderboard-card:nth-child(1) { --lb: 255, 207, 107; }
.leaderboard-card:nth-child(2) { --lb: var(--accent-rgb); }
.leaderboard-card:nth-child(3) { --lb: var(--void-rgb); }
.leaderboard-card {
  background: radial-gradient(120% 85% at 50% -22%, rgba(var(--lb), .26), transparent 62%), linear-gradient(160deg, rgba(255, 255, 255, .04), transparent 45%), rgba(var(--bg-rgb), .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -34px rgba(0, 0, 0, .95), 0 0 70px -48px rgb(var(--lb));
}
.leaderboard-card::before {
  content: ""; position: absolute; left: 16%; right: 16%; top: -1px; height: 2px; border-radius: 2px; opacity: 1;
  background: linear-gradient(90deg, transparent, rgb(var(--lb)), transparent); box-shadow: 0 0 20px 1px rgb(var(--lb)); inset: -1px 16% auto 16%;
}
.leaderboard-title { font-family: "Sora", var(--display); font-weight: 600; font-size: .98rem; letter-spacing: -.01em; margin-bottom: .8rem; }
.leaderboard-row {
  position: relative; border-radius: 14px; border: 1px solid transparent; overflow: hidden;
  transition: transform .3s var(--ease-out), background .25s ease, border-color .25s ease;
}
.leaderboard-title + .leaderboard-row {
  background: linear-gradient(90deg, rgba(var(--lb), .16), transparent 80%); border-color: rgba(var(--lb), .3);
}
.leaderboard-title + .leaderboard-row::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); animation: lb-sheen 4.8s ease-in-out infinite;
}
@keyframes lb-sheen { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }
@media (hover: hover) and (pointer: fine) { .leaderboard-row:hover { transform: translateX(5px); background: rgba(var(--lb), .12); border-color: rgba(var(--lb), .35); } }
.leaderboard-rank { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); }
.leaderboard-value { font-family: "Sora", var(--display); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html.lite .leaderboard-title + .leaderboard-row::after { animation: none; }
html.is-scrolling .leaderboard-title + .leaderboard-row::after { animation-play-state: paused; }

/* ---- Barra de filtros ---- */
.raiders-toolbar { position: relative; border-radius: 26px; }
.raiders-toolbar::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .85), transparent);
}
.raiders-tab { position: relative; overflow: hidden; transition: color .25s ease, background .25s ease, box-shadow .3s ease, transform .2s var(--ease-out); }
.raiders-tab:active { transform: scale(.97); }
.raiders-tab.is-active::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); animation: lb-sheen 4.2s ease-in-out infinite;
}
html.lite .raiders-tab.is-active::after { animation: none; }
.raiders-search-btn { transition: transform .2s var(--ease-out), box-shadow .3s ease; box-shadow: 0 10px 24px -12px rgba(var(--accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
@media (hover: hover) and (pointer: fine) { .raiders-search-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(var(--accent-rgb), .95), inset 0 1px 0 rgba(255, 255, 255, .4); } }
.raiders-search-btn:active { transform: scale(.97); }

/* ---- Tabla ---- */
.raiders-table-wrap { border-radius: 26px; }
.raiders-table thead th {
  position: sticky; top: 0; font-family: "Sora", var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(var(--ink-rgb, 244, 238, 252), .62); background-color: rgba(var(--bg-rgb), .94);
  box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb), .3);
}
.raiders-table tbody tr {
  animation: row-in .55s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 10) * 45ms);
  transition: background .25s var(--ease-out), box-shadow .25s ease;
}
.raiders-table tbody tr:nth-child(n+11) { animation: none; }
@keyframes row-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.raiders-table tbody tr { border-left-width: 3px; }
.raiders-table tbody tr:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--class-color, var(--accent)) 20%, transparent), transparent 78%);
  border-left-color: var(--class-color, var(--accent)); box-shadow: inset 4px 0 18px -10px var(--class-color, var(--accent));
}
.raiders-name-link { transition: color .25s ease, letter-spacing .25s ease; }
@media (hover: hover) and (pointer: fine) { .raiders-table tbody tr:hover .raiders-name-link { color: var(--class-color, #fff); } }
.raiders-class-badge::before { box-shadow: 0 0 10px var(--class-color, var(--accent)); }
.raiders-role-badge {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: .2rem .6rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.raiders-ilvl { font-family: "Sora", var(--display); font-weight: 600; font-size: 1.04rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.raiders-parse {
  display: inline-block; padding: .14rem .6rem; border-radius: 999px; font-family: "Sora", var(--display); font-weight: 600; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--parse-color, #fff) 16%, transparent); border: 1px solid color-mix(in srgb, var(--parse-color, #fff) 48%, transparent);
  box-shadow: 0 0 16px -5px var(--parse-color, transparent);
}
.raiders-link { position: relative; transition: transform .25s var(--ease-out), color .25s ease; }
@media (hover: hover) and (pointer: fine) { .raiders-link:hover { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .raiders-table tbody tr, .leaderboard-title + .leaderboard-row::after, .raiders-tab.is-active::after { animation: none; } }

/* =============================================================
   99o. Ventana de personaje — escena viva por clase (char-fx.js) e icono de clase en 3D
   ============================================================= */
.char-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; --fc: var(--accent); --fs: var(--void); }
.char-fx > * { position: absolute; display: block; }
.cfx-sky {
  inset: 0;
  background:
    radial-gradient(95% 52% at 50% -8%, color-mix(in srgb, var(--fc) calc(var(--sky, 42) * 1%), transparent), transparent 70%),
    radial-gradient(55% 48% at 0% 100%, color-mix(in srgb, var(--fs) 30%, transparent), transparent 72%),
    radial-gradient(55% 48% at 100% 100%, color-mix(in srgb, var(--fs) 26%, transparent), transparent 72%);
}
/* el arte real de la clase, enorme y difuso detrás del nombre */
.cfx-emblem {
  left: 50%; top: -9%; width: min(600px, 88%); aspect-ratio: 1; transform: translateX(-50%); opacity: .14; filter: grayscale(1) contrast(1.15) blur(1px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 28%, transparent 66%); mask-image: radial-gradient(circle at 50% 50%, #000 28%, transparent 66%);
  animation: cfxBreath 10s ease-in-out infinite alternate;
}
@keyframes cfxBreath { from { transform: translateX(-50%) scale(.97); opacity: .1; } to { transform: translateX(-50%) scale(1.05); opacity: .18; } }
/* partículas y eventos: brillan en los laterales y se atenúan en el centro (donde está la información) */
.cfx-canvas {
  inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .85) 17%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, .85) 83%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .85) 17%, rgba(0, 0, 0, .7) 50%, rgba(0, 0, 0, .85) 83%, #000 100%);
}
.cfx-fog {
  left: -10%; right: -10%; bottom: -10%; height: 42%;
  background: radial-gradient(62% 100% at 50% 100%, color-mix(in srgb, var(--fs) 34%, transparent), transparent 72%);
  animation: cfxFog 12s ease-in-out infinite alternate;
}
@keyframes cfxFog { from { transform: translateX(-3%); opacity: .7; } to { transform: translateX(3%); opacity: 1; } }
/* velo de lectura: oscurece suavemente la zona central de la información */
.cfx-scrim { inset: 0; background: radial-gradient(70% 62% at 50% 62%, rgba(var(--bg-rgb), .5), transparent 88%); }
html.lite .cfx-fog, html.lite .cfx-emblem { animation: none; }
@media (prefers-reduced-motion: reduce) { .cfx-fog, .cfx-emblem { animation: none; } }

/* ---- Icono de clase en relieve por capas: copias del mismo arte a distinta profundidad (paralaje real al inclinar) ---- */
.cm-ico { position: relative; width: 64px; height: 64px; perspective: 420px; flex: none; margin: .35rem 0 .3rem; }
.cm-ico-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s var(--ease-out, ease-out); }
.cm-ico-float { position: absolute; inset: 0; transform-style: preserve-3d; animation: cmFloat 7s ease-in-out infinite alternate; }
@keyframes cmFloat { 0% { transform: translateY(1px) rotateY(-9deg) rotateX(3deg); } 100% { transform: translateY(-3px) rotateY(9deg) rotateX(-2deg); } }
.cm-ico img { position: absolute; inset: 0; width: 64px; height: 64px; display: block; border-radius: 17px; animation: none; backface-visibility: hidden; image-rendering: auto; }
.cm-ico .cm-l { border: 0; box-shadow: none; }
.cm-ico .cm-l1 { transform: translateZ(-4px); filter: brightness(.7) saturate(.95); }
.cm-ico .cm-l2 { transform: translateZ(-8px); filter: brightness(.55) saturate(.9); }
.cm-ico .cm-l3 { transform: translateZ(-12px); filter: brightness(.42) saturate(.85); }
.cm-ico .cm-l4 { transform: translateZ(-16px); filter: brightness(.3) saturate(.8); box-shadow: 0 16px 24px -6px rgba(0, 0, 0, .85), 0 0 26px -8px var(--cc); }
.cm-ico .char-modal-class-icon {
  transform: translateZ(3px); border: 1px solid rgba(255, 255, 255, .55); border-bottom-color: rgba(0, 0, 0, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.cm-ico-gloss {
  position: absolute; inset: 0; border-radius: 17px; pointer-events: none; transform: translateZ(4px);
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
  background-size: 260% 100%; background-position: 160% 0; background-repeat: no-repeat; animation: cmGloss 7s ease-in-out infinite;
}
@keyframes cmGloss { 0%, 60% { background-position: 160% 0; } 92%, 100% { background-position: -60% 0; } }
.cm-ico-shadow { position: absolute; left: 50%; bottom: -24px; width: 62px; height: 10px; margin-left: -31px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cc) 45%, #000), transparent); filter: blur(3px); opacity: .55; }
html.lite .cm-ico-gloss { animation: none; }
@media (prefers-reduced-motion: reduce) { .cm-ico-float, .cm-ico-gloss { animation: none; } }

/* El código de fondo de la ventana de personaje queda como textura tenue: manda la escena de la clase */
.char-modal-card .char-modal-code { opacity: .07; }


/* =============================================================
   99p. Reportes de Raid — un core, una tarjeta, pestañas por día
   ============================================================= */
.raid-report-week-sum { margin: 0; font-size: .72rem; font-weight: 600; color: var(--muted); white-space: nowrap; letter-spacing: .01em; }
.raid-report-week-sum b { color: var(--ink); font-weight: 800; }
.raid-report-week-sum .is-kill { color: #3ee08b; }
.raid-report-days {
  display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .25rem; margin: .35rem 0 .35rem; padding: .12rem;
  border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06);
}
.raid-report-day {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 .4rem; padding: .16rem .3rem; border-radius: 8px; cursor: pointer; line-height: 1.15;
  background: transparent; border: 1px solid transparent; color: var(--muted); font-family: var(--sans);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s var(--ease-out);
}
.raid-report-day:active { transform: scale(.97); }
.raid-report-day .rrd-n { font-family: "Sora", var(--display); font-weight: 700; font-size: .84rem; letter-spacing: -.01em; }
.raid-report-day .rrd-d { font-size: .66rem; text-transform: capitalize; opacity: .8; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .raid-report-day:not(.is-active):hover { background: rgba(255, 255, 255, .06); color: var(--ink); } }
.raid-report-day.is-active {
  color: #fff; background: linear-gradient(160deg, rgba(var(--core-rgb, var(--accent-rgb)), .34), rgba(var(--core-rgb, var(--accent-rgb)), .12));
  border-color: rgba(var(--core-rgb, var(--accent-rgb)), .6); box-shadow: 0 6px 14px -10px rgba(var(--core-rgb, var(--accent-rgb)), .8), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.raid-report-day-panel { display: flex; flex-direction: column; gap: .7rem; animation: rr-day-in .35s var(--ease-out) both; }
.raid-report-day-panel[hidden] { display: none; }
@keyframes rr-day-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.raid-report-day-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.raid-report-day-title { font-size: .8rem; font-weight: 600; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .raid-report-day-panel { animation: none; } }
/* Resumen de días junto al nombre del core (a la izquierda, para no chocar con la insignia "Nuevo") */
.raid-report-card--multi .raid-report-card-head .raid-report-card-row:first-child { justify-content: flex-start; align-items: baseline; gap: .15rem .7rem; padding-right: 3.6rem; }


/* =============================================================
   99q. Calendario de raids — tablero 3D: días en relieve, eventos flotando, hoy con borde de luz, "en vivo"
   ============================================================= */
.rc-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 0 1rem; }
.rc-chip {
  display: inline-flex; align-items: baseline; gap: .5rem; padding: .5rem .95rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)), rgba(8, 10, 18, .6); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -14px rgba(0, 0, 0, .8);
}
.rc-chip b { font-family: "Sora", var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; color: #fff; }
.rc-chip span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.rc-chip--next { border-color: rgba(var(--accent-rgb), .45); background: linear-gradient(180deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .05)), rgba(8, 10, 18, .6); }
.rc-chip--next .rc-chip-label { color: var(--accent); }
.rc-chip--next.is-live { border-color: rgba(255, 82, 82, .7); background: linear-gradient(180deg, rgba(255, 82, 82, .26), rgba(255, 82, 82, .05)), rgba(8, 10, 18, .6); }
.rc-chip--next.is-live .rc-chip-label { color: #ff7b7b; }

.raid-calendar { perspective: 1500px; gap: .8rem; padding: .4rem 0 .6rem; }
.raid-cal-day {
  --rx: 0deg; --ry: 0deg; --day-accent: rgba(255, 255, 255, .25);
  min-height: 210px; border-radius: 20px; padding: .85rem .6rem .8rem; gap: .55rem; justify-content: flex-start;
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  background: linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 38%, rgba(0, 0, 0, .25)), rgba(9, 11, 20, .72);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -14px 24px -16px rgba(0, 0, 0, .7), 0 18px 34px -22px rgba(0, 0, 0, .9);
  transition: transform .22s var(--ease-out), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.raid-cal-day::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 2px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--day-accent), transparent); box-shadow: 0 0 16px 1px var(--day-accent); transition: opacity .3s ease;
}
.raid-cal-day.has-raid { border-color: rgba(255, 255, 255, .16); }
.raid-cal-day.has-raid::before { opacity: .9; }
.raid-cal-day:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 44px -22px rgba(0, 0, 0, .95), 0 0 36px -16px var(--day-accent); }
.raid-cal-day:not(.has-raid) { background: linear-gradient(170deg, rgba(255, 255, 255, .03), transparent 50%), rgba(9, 11, 20, .5); }

.rcd-head { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.05; transform: translateZ(18px); }
.raid-cal-day-name { font-size: .72rem; letter-spacing: .16em; color: rgba(255, 255, 255, .55); }
.rcd-date { font-family: "Sora", var(--display); font-weight: 700; font-size: 1.9rem; letter-spacing: -.04em; color: #fff; text-shadow: 0 6px 18px rgba(0, 0, 0, .6); margin-top: .1rem; }
.rcd-month { font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
.raid-cal-day:not(.has-raid) .rcd-date { color: rgba(255, 255, 255, .45); }
.raid-cal-today-badge { margin-top: .4rem; }

/* HOY: borde de luz que gira + brillo */
@property --cal-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.raid-cal-day.is-today {
  border-color: transparent; background: linear-gradient(170deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .05) 45%, rgba(0, 0, 0, .25)), rgba(9, 11, 20, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 24px 40px -20px rgba(0, 0, 0, .9), 0 0 44px -14px rgba(var(--accent-rgb), .75);
}
.raid-cal-day.is-today::after { opacity: 1 !important; }
.raid-cal-day.is-today { --ring: conic-gradient(from var(--cal-ang), rgba(var(--accent-rgb), 0) 0 55%, var(--accent) 80%, #fff 90%, rgba(var(--accent-rgb), 0) 100%); }
.raid-cal-day.is-today .rcd-ring {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: var(--ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cal-spin 5s linear infinite;
}
@keyframes cal-spin { to { --cal-ang: 360deg; } }
.raid-cal-day.is-today .raid-cal-day-name { color: var(--accent); }

/* Eventos: tarjetas de cristal que flotan sobre el día */
.raid-cal-event {
  transform: translateZ(26px); border-radius: 12px; padding: .55rem .6rem .55rem .7rem; gap: .22rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015)), rgba(5, 7, 14, .78);
  border: 1px solid rgba(255, 255, 255, .08); border-left: 3px solid var(--cal-accent, #37e6e2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 22px -14px rgba(0, 0, 0, .9), -8px 0 22px -12px var(--cal-accent, #37e6e2);
  transition: transform .22s var(--ease-out), box-shadow .25s ease, background .25s ease;
}
.raid-cal-event:hover { transform: translateZ(40px) translateY(-2px); background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)), rgba(5, 7, 14, .9); }
.raid-cal-event-exp { display: inline-flex; align-items: center; gap: .35rem; }
.rce-ico {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; font-style: normal; font-size: .72rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cal-accent) 55%, #fff 10%), color-mix(in srgb, var(--cal-accent) 35%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 8px -3px rgba(0, 0, 0, .8);
}
.raid-cal-event-core { font-family: "Sora", var(--display); font-size: .82rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.raid-cal-event-time { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums; }
.raid-cal-event-time svg { opacity: .65; flex: none; }
.raid-cal-event.is-live { border-color: rgba(255, 82, 82, .55); animation: cal-live 1.8s ease-in-out infinite; }
@keyframes cal-live { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 22px -14px rgba(0, 0, 0, .9), 0 0 0 0 rgba(255, 82, 82, .35); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 22px -14px rgba(0, 0, 0, .9), 0 0 0 5px rgba(255, 82, 82, 0); } }
.raid-cal-event-live { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ff8a8a; }
.raid-cal-event-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff5252; box-shadow: 0 0 10px 2px rgba(255, 82, 82, .8); animation: raid-cal-dot-pulse 1.2s ease-in-out infinite; }
.rcd-rest { margin: auto; display: flex; flex-direction: column; align-items: center; gap: .3rem; color: rgba(255, 255, 255, .22); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transform: translateZ(8px); }

@media (max-width: 1100px) { .raid-calendar { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .raid-calendar { grid-template-columns: repeat(2, 1fr); perspective: none; } .raid-cal-day { min-height: 0; transform: none !important; } .raid-cal-event { transform: none; } }
html.lite .raid-cal-day.is-today .rcd-ring { animation: none; }
@media (prefers-reduced-motion: reduce) { .raid-cal-day.is-today .rcd-ring, .raid-cal-event.is-live { animation: none; } .raid-cal-day { transform: none !important; } }

/* Calendario compacto: todo entra sin scroll y alineado (sin leyenda ni nota) */
.rc-summary { margin: 0 0 .8rem; }
.raid-calendar { gap: .6rem; padding: .2rem 0; align-items: stretch; }
.raid-cal-day { min-height: 0; padding: .7rem .45rem .6rem; gap: .45rem; border-radius: 16px; }
.rcd-date { font-size: 1.55rem; }
.raid-cal-day-name { font-size: .68rem; }
.raid-cal-today-badge { margin-top: .3rem; }
.raid-cal-event { padding: .45rem .45rem .45rem .55rem; gap: .16rem; min-width: 0; }
.raid-cal-event-exp { font-size: .56rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rce-ico { width: 18px; height: 18px; flex: none; font-size: .64rem; }
.raid-cal-event-core { font-size: .76rem; overflow-wrap: anywhere; }
.raid-cal-event-time { font-size: .66rem; white-space: nowrap; }
.raid-cal-event-badge, .raid-cal-event-live { font-size: .56rem; }
.rcd-rest { margin: .6rem auto; }
.raid-cal-day.has-raid, .raid-cal-day { align-content: start; }

/* Forever: el emblema completo con 3 colores (tritono): índigo del cielo, azul cielo y oro del atardecer
   (filtro #fx-duotone-forever, definido en index.html). */
html[data-theme="forever"] .valyrians-crest > svg { filter: url(#fx-duotone-forever); }
/* Corazón del dragón: SUS LÍNEAS en tono rosa. Una copia del mismo grabado, recortada solo al corazón y pasada por un filtro
   rosa (#fx-heart-pink, en index.html), queda encima del emblema (que sigue en 3 colores). */
html[data-theme="forever"] .valyrians-crest::after {
  content: ""; position: absolute; left: 15%; top: 11%; width: 70%; height: 78.3%; pointer-events: none; z-index: 3;
  background: url("assets/img/logo-crest.webp") 0 0 / 100% 100% no-repeat;
  clip-path: ellipse(11% 12% at 50% 59%); filter: url(#fx-heart-pink);
}


/* =============================================================
   99r. Personajes (valores, premios, "únete") al estilo AURATEC — mismos colores y tamaños, más vida:
   luz de borde del color del tema, brillo en el suelo, flotación suave e inclinación 3D hacia el mouse.
   ============================================================= */
.value-img, .store-arthas, .apply-mascot {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: 50% 90%; transition: transform .28s var(--ease-out);
  image-rendering: auto; backface-visibility: hidden;
  filter: drop-shadow(0 0 1px rgba(var(--accent-rgb), .55)) drop-shadow(0 0 14px rgba(var(--accent-rgb), .22));
  animation: char-float 5.4s ease-in-out infinite;
}
.value-card:nth-child(2) .value-img { animation-delay: -1.8s; }
.value-card:nth-child(3) .value-img { animation-delay: -3.6s; }
.store-team-kael .store-arthas { animation-delay: -1.2s; }
.store-team-tauren .store-arthas { animation-delay: -2.8s; }
.store-team-uther .store-arthas { animation-delay: -4.2s; }
@keyframes char-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
/* brillo en el suelo bajo los pies (color del tema, no un cuadro) */
.value-img-wrap::before, .store-arthas-wrap::before, .apply-mascot-wrap::before {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -4px; height: 14px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), 0)); filter: blur(4px);
  animation: char-ground 5.4s ease-in-out infinite;
}
@keyframes char-ground { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.82); opacity: .55; } }
.store-arthas-wrap, .value-img-wrap { isolation: isolate; }
html.is-scrolling .value-img, html.is-scrolling .store-arthas, html.is-scrolling .apply-mascot,
html.is-scrolling .value-img-wrap::before, html.is-scrolling .store-arthas-wrap::before, html.is-scrolling .apply-mascot-wrap::before { animation-play-state: paused; }
html.lite .value-img, html.lite .store-arthas, html.lite .apply-mascot { animation: none; filter: none; }
html.lite .value-img-wrap::before, html.lite .store-arthas-wrap::before, html.lite .apply-mascot-wrap::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .value-img, .store-arthas, .apply-mascot, .value-img-wrap::before, .store-arthas-wrap::before, .apply-mascot-wrap::before { animation: none; transform: none; } }


/* =============================================================
   99s. Fluidez: nada que no se ve debe animarse ni descargarse
   ============================================================= */
/* Las capas decorativas de los temas que NO están activos (opacidad 0) seguían animando 28 elementos en vano */
html:is([data-theme="sod"], [data-theme="retail"]) .theme-clouds span,
html:not([data-theme="sod"]) .theme-legendary span, html:not([data-theme="sod"]) .theme-sand span,
html:not([data-theme="retail"]) .theme-orbs span, html:not([data-theme="retail"]) .theme-gems span,
html[data-theme="retail"] .theme-wind span { animation-play-state: paused; }
/* Secciones fuera de pantalla: sus animaciones infinitas se pausan (las marca main.js con IntersectionObserver) */
.is-offscreen, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }
/* El tinte con máscara de los personajes solo se pinta (y descarga su imagen) cuando la sección está cerca */
.value-img-wrap:not(.is-near)::after, .store-arthas-wrap:not(.is-near)::after, .apply-mascot-wrap:not(.is-near)::after { display: none; }


/* Aviso de rango en Discord (bloque "Únete") */
.apply-rank-note {
  margin: .7rem 0 .9rem; padding: .65rem .85rem; border-radius: 12px; font-size: .86rem; line-height: 1.5; color: var(--ink);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04)); border: 1px solid rgba(var(--accent-rgb), .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.apply-rank-note b { color: var(--accent); }


/* =============================================================
   99t. Hitos — "Primeras muertes": carrusel 3D horizontal con riel de línea de tiempo
   ============================================================= */
.milestones { margin-top: 2.6rem; }
.milestones[hidden] { display: none; }
.milestones-title { font-family: "Sora", var(--display); font-size: 1.4rem; text-align: center; margin: 0 0 .3rem; letter-spacing: -.02em; }
.milestones-sub { text-align: center; color: var(--muted); font-size: .86rem; margin: 0 0 .4rem; }
.ms-stage { position: relative; max-width: 1000px; margin: 0 auto; padding: 0 0 .4rem; outline: none; }
.ms-view { position: relative; height: 238px; perspective: 1300px; perspective-origin: 50% 40%; overflow: visible; touch-action: pan-y; cursor: grab; }
.ms-view:active { cursor: grabbing; }
.ms-view::before { /* luz de suelo bajo la carta central */
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 340px; height: 40px; margin-left: -170px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .35), transparent); filter: blur(10px);
}
.ms-card {
  --d: 0; --ad: 0; --tx: 0deg; --ty: 0deg; --mx: 50%; --my: 50%;
  position: absolute; left: 50%; top: 4px; width: 232px; height: 196px; margin-left: -116px; padding: 1rem 1.05rem .9rem; border-radius: 22px; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: .35rem; overflow: hidden; user-select: none; -webkit-user-drag: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 38%, rgba(0, 0, 0, .3)), linear-gradient(180deg, color-mix(in srgb, var(--cal-accent) 22%, transparent), transparent 55%), rgba(var(--bg-rgb), .86);
  border: 1px solid color-mix(in srgb, var(--cal-accent) 38%, rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 26px 40px -24px rgba(0, 0, 0, .95), 0 0 34px -18px var(--cal-accent);
  transform: translateX(calc(var(--d) * 170px)) translateZ(calc(var(--ad) * -110px)) rotateY(calc(var(--d) * -30deg)) scale(calc(1 - var(--ad) * .06));
  opacity: calc(1 - var(--ad) * .2); filter: brightness(calc(1 - var(--ad) * .12));
  transition: transform .7s var(--ease-out, cubic-bezier(.23, 1, .32, 1)), opacity .5s ease, filter .5s ease, box-shadow .4s ease;
}
.ms-card.is-hidden { opacity: 0; pointer-events: none; }
.ms-card.is-active {
  transform: translateZ(60px) rotateX(var(--ty)) rotateY(var(--tx)); transition: transform .7s var(--ease-out, cubic-bezier(.23, 1, .32, 1)), opacity .5s ease, box-shadow .4s ease; filter: none; opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 34px 54px -26px rgba(0, 0, 0, 1), 0 0 56px -12px var(--cal-accent);
}
@media (hover: hover) and (pointer: fine) { .ms-card.is-active:hover { transition: transform .12s ease-out, box-shadow .4s ease; } }
.ms-card::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--cal-accent), transparent); box-shadow: 0 0 16px 1px var(--cal-accent); }
.ms-sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, .22), transparent 60%), linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--cal-accent) 40%, transparent) 50%, transparent 62%); mix-blend-mode: screen; }
.ms-card.is-active:hover .ms-sheen, .ms-card.is-active:focus-visible .ms-sheen { opacity: 1; }
.ms-date { display: flex; align-items: baseline; gap: .4rem; }
.ms-date b { font-family: "Sora", var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em; text-transform: capitalize; color: #fff; text-shadow: 0 4px 16px rgba(0, 0, 0, .6); }
.ms-date small { font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--cal-accent); }
.ms-boss { font-family: "Sora", var(--display); font-size: 1.05rem; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; flex: 1; display: flex; align-items: center; overflow-wrap: anywhere; }
.ms-tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.ms-tags em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); border: 1px solid rgba(255, 255, 255, .1); }
.ms-tags .ms-diff { background: color-mix(in srgb, var(--cal-accent) 25%, transparent); color: #fff; border-color: color-mix(in srgb, var(--cal-accent) 55%, transparent); }
.ms-foot { display: flex; justify-content: space-between; gap: .5rem; font-size: .72rem; color: var(--muted); border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .45rem; }
.ms-pulls { color: var(--ink); font-weight: 700; white-space: nowrap; }
.ms-nav {
  position: absolute; top: 86px; z-index: 20; width: 42px; height: 42px; border-radius: 50%; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--accent);
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .3)), rgba(var(--bg-rgb), .8); border: 1px solid rgba(var(--accent-rgb), .4); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .9);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.ms-nav svg { width: 18px; height: 18px; }
.ms-prev { left: 0; } .ms-next { right: 0; }
.ms-nav:hover { transform: scale(1.12); box-shadow: 0 10px 26px -8px rgba(var(--accent-rgb), .7); }
.ms-rail { display: flex; justify-content: center; align-items: center; gap: .45rem; margin-top: .5rem; flex-wrap: wrap; padding: 0 3rem; }
.ms-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .22); transition: transform .3s var(--ease-out), background .3s ease, box-shadow .3s ease; }
.ms-dot:hover { transform: scale(1.5); background: var(--cal-accent); }
.ms-dot.is-active { width: 26px; border-radius: 6px; background: var(--cal-accent); box-shadow: 0 0 14px var(--cal-accent); }
@media (max-width: 640px) {
  .ms-view { height: 226px; }
  .ms-card { width: 210px; margin-left: -105px; transform: translateX(calc(var(--d) * 120px)) translateZ(calc(var(--ad) * -120px)) rotateY(calc(var(--d) * -34deg)) scale(calc(1 - var(--ad) * .08)); }
  .ms-nav { display: none; }
}
html.lite .ms-sheen { display: none; }
@media (prefers-reduced-motion: reduce) { .ms-card, .ms-card.is-active { transition: none; } }


/* =============================================================
   99u. Fluidez total — quitar lo que más cuesta y casi no se nota
   ============================================================= */
/* backdrop-filter (desenfoque del fondo) obliga a la tarjeta a recalcularse en CADA cuadro: se quita de los paneles grandes y chips
   (el fondo detrás es oscuro y casi uniforme, así que el cambio visual es mínimo). Solo se conserva en la barra de arriba. */
.gallery-nav, .stat-chip, .tabs-nav, .tab-panel.is-active, .tab-panel .core-card, .raiders-table-wrap, .community-embed, .apply-form, .horizon-inner,
.apply-discord-card, .raid-reports-toolbar, .raiders-toolbar, .raiders-table thead th, .raid-reports-arrow, .apply-recruiting, .hero-chips,
.hero-expansions, .hero-cta .btn-outline, .hero-tagline, .raid-countdown-card, .launch-countdown, .char-modal-backdrop, .char-modal-card, .char-modal-x,
.login-modal-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.raiders-table-wrap, .community-embed, .apply-form, .horizon-inner, .apply-discord-card, .tab-panel.is-active, .raid-countdown-card, .launch-countdown { background-color: rgba(var(--bg-rgb), .86); }

/* Ventana de personaje: fondo opaco (sin desenfoque), sin capas animadas innecesarias */
.char-modal-backdrop { background: rgba(2, 1, 8, .88); }
.char-modal-card { background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 12%, transparent), transparent 40%), rgba(var(--bg-rgb), .985); will-change: auto; contain: layout paint; }
.char-modal-code { display: none; }
.char-modal-body { overscroll-behavior: contain; contain: content; }
.cfx-canvas { -webkit-mask-image: none; mask-image: none; }
.cfx-emblem { animation: none; filter: none; opacity: .13; }
.cfx-fog { animation: none; }
.cfx-scrim { background: radial-gradient(72% 66% at 50% 62%, rgba(var(--bg-rgb), .66), rgba(var(--bg-rgb), .18) 70%, transparent 92%); }
.cm-ico-float { animation-duration: 9s; }

/* Con la ventana de personaje abierta, todo lo que está detrás deja de animarse (y se pausan videos y fondo vivo) */
html.modal-open main *, html.modal-open main *::before, html.modal-open main *::after, html.modal-open .nav *, html.modal-open [class^="theme-"] *, html.modal-open .bg-crossfade *, html.modal-open .fx-bg *, html.modal-open .site-footer * { animation-play-state: paused !important; }


/* =============================================================
   99v. Enlaces de la tabla de raiders: iconos del tema (Raider.IO y Warcraft Logs); el nombre sale al pasar el mouse
   ============================================================= */
.raiders-ico-row { display: flex; gap: .45rem; align-items: center; }
.raiders-ico {
  --ic: var(--accent); --ic-rgb: var(--accent-rgb);
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--ic);
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 45%, rgba(0, 0, 0, .25)), rgba(var(--bg-rgb), .7);
  border: 1px solid rgba(var(--ic-rgb), .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 14px -10px rgba(0, 0, 0, .9);
  transition: transform .22s var(--ease-out), box-shadow .22s ease, background .22s ease, color .22s ease;
}
.raiders-ico--logs { --ic: var(--gold); --ic-rgb: 255, 207, 107; }
.raiders-ico svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.raiders-ico::after {
  content: attr(data-tip); position: absolute; right: calc(100% + 8px); top: 50%; transform: translate(4px, -50%); padding: .28rem .6rem; border-radius: 8px; white-space: nowrap; pointer-events: none;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: rgba(var(--bg-rgb), .96); border: 1px solid rgba(var(--ic-rgb), .55); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .9);
  opacity: 0; transition: opacity .18s ease, transform .18s var(--ease-out); z-index: 30;
}
.raiders-ico:hover, .raiders-ico:focus-visible { transform: translateY(-3px); color: #fff; background: linear-gradient(160deg, rgba(var(--ic-rgb), .55), rgba(var(--ic-rgb), .18)), rgba(var(--bg-rgb), .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 20px -10px rgba(var(--ic-rgb), .75); }
.raiders-ico:hover svg, .raiders-ico:focus-visible svg { transform: scale(1.12) rotate(-6deg); }
.raiders-ico:hover::after, .raiders-ico:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.raiders-ico:active { transform: translateY(-1px) scale(.96); }


/* =============================================================
   99w. Ventana de personaje — abre rápido y se desplaza sin trabarse
   ============================================================= */
.char-modal-card { animation-duration: .26s; }
.char-gear-item { contain: layout paint; background: rgba(0, 0, 0, .3); }
.char-gear-item .i3d::after { display: none; }              /* el brillo animado sobre cada icono: 16 capas extra sin aporte visible */
a.char-gear-item:hover .char-gear-icon { transform: none; }
.char-modal-body > * { content-visibility: auto; contain-intrinsic-size: auto 320px; } /* lo que queda fuera de pantalla no se pinta hasta que se acerca */
.char-modal-body .char-gear-grid, .char-modal-body .char-modal-head { content-visibility: visible; }
.char-gear-icon { background: rgba(0, 0, 0, .35); }          /* mientras llega la imagen el hueco ya está reservado */

/* 99x. Sin luz que sigue al mouse sobre las tarjetas */
:is(.raid-report-card, .value-card, .core-card, .store-card, .leaderboard-card, .foro-card, .raid-countdown-card, .gallery, .raid-tracker, .apply-form, .community-embed, .horizon-inner, .apply-discord-card, .raiders-table-wrap, .raid-cal-day, .char-modal-card)::after { opacity: 0 !important; }
.hero-spot { display: none !important; }

/* 99y. El fondo vivo no se congela al hacer scroll (son animaciones de transform/opacity: corren en la GPU y casi no cuestan) */
html.is-scrolling:not(.modal-open) .fx-aurora, html.is-scrolling:not(.modal-open) .fx-code,
html.is-scrolling:not(.modal-open) .theme-orbs span, html.is-scrolling:not(.modal-open) .theme-sand span, html.is-scrolling:not(.modal-open) .theme-wind span,
html.is-scrolling:not(.modal-open) .theme-gems span, html.is-scrolling:not(.modal-open) .theme-legendary span, html.is-scrolling:not(.modal-open) .theme-clouds span { animation-play-state: running; }

/* 99z. Barra de filtros de Reportes de Raid: del tamaño de lo que contiene (antes ocupaba todo el ancho con mucho vacío) */
.raid-reports-toolbar {
  width: fit-content; max-width: 100%; margin: 1.4rem auto 1.6rem; padding: .75rem 1rem;
  gap: .7rem .8rem; align-items: end; border-radius: 20px;
}
.raid-reports-toolbar .raid-reports-date-label { font-size: .68rem; gap: .25rem; }
.raid-reports-toolbar .raid-reports-date-label input, .raid-reports-toolbar .raiders-select { height: 38px; padding-block: 0; }
.raid-reports-toolbar .btn { height: 38px; padding: 0 .9rem; font-size: .82rem; white-space: nowrap; }
@media (max-width: 560px) {
  .raid-reports-toolbar { width: 100%; justify-content: stretch; }
  .raid-reports-toolbar .raid-reports-date-label, .raid-reports-toolbar .raiders-select { flex: 1 1 140px; }
  .raid-reports-toolbar .btn { flex: 1 1 100%; }
}


/* 99z2. Primeras kills: la tarjeta toma el color del CORE; la etiqueta de expansión, el de la EXPANSIÓN */
.ms-tags .ms-exp { color: var(--exp); background: color-mix(in srgb, var(--exp) 16%, transparent); border-color: color-mix(in srgb, var(--exp) 55%, transparent); }
.ms-foot .ms-core { color: var(--cal-accent); font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.ms-foot .ms-core:not(:empty)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cal-accent); box-shadow: 0 0 8px var(--cal-accent); flex: none; }
.ms-card.is-active { border-color: color-mix(in srgb, var(--cal-accent) 60%, transparent); }


/* =============================================================
   99z3. Contadores de raid — tarjetas 3D por expansión, una fila por core real
   (alto fijo y compacto: no crece aunque haya 3 cores, nada se descuadra)
   ============================================================= */
.raid-countdown-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr); gap: 1rem; align-items: stretch; perspective: 1100px; }
.rcd-card {
  --c: var(--accent); --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; flex-direction: column; gap: .5rem; min-width: 0;
  padding: .8rem .8rem .75rem; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  background: radial-gradient(120% 80% at 50% -25%, color-mix(in srgb, var(--c) 26%, transparent), transparent 62%), linear-gradient(160deg, rgba(255, 255, 255, .05), transparent 45%), rgba(var(--bg-rgb), .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 26px 50px -30px rgba(0, 0, 0, .9), 0 0 60px -44px var(--c);
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .35s cubic-bezier(.23, 1, .32, 1), border-color .3s ease, box-shadow .3s ease;
  overflow: hidden;
}
.rcd-card::before { /* línea de luz que recorre el borde superior */
  content: ""; position: absolute; top: -1px; left: 0; width: 38%; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c), transparent); box-shadow: 0 0 14px 1px var(--c); animation: rcd-run 5.5s ease-in-out infinite alternate;
}
@keyframes rcd-run { from { transform: translateX(0); } to { transform: translateX(163%); } }
.rcd-card:hover { border-color: color-mix(in srgb, var(--c) 62%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 56px -28px color-mix(in srgb, var(--c) 55%, transparent); }
.rcd-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; transform: translateZ(14px); }
.rcd-exp { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--c); }
.rcd-exp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: rcd-led 2s ease-in-out infinite; }
@keyframes rcd-led { 50% { opacity: .35; } }
.rcd-n { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rcd-rows { display: flex; flex-direction: column; gap: .4rem; flex: 1; justify-content: center; transform-style: preserve-3d; }
.rcd-row {
  --cc: var(--c); display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0;
  padding: .4rem .55rem; border-radius: 14px; transform: translateZ(22px);
  border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); border-left: 3px solid var(--cc);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 14%, transparent), rgba(0, 0, 0, .28) 70%);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .9);
}
.rcd-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rcd-info b { font-size: .8rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcd-info b em { font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .06em; padding: .08rem .35rem; margin-left: .2rem; border-radius: 999px; color: var(--cc); background: color-mix(in srgb, var(--cc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); vertical-align: 1px; }
.rcd-info span { font-size: .66rem; color: var(--muted); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcd-timer { display: flex; gap: .25rem; flex: none; }
.rcd-timer i {
  font-style: normal; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 34px; height: 40px; border-radius: 9px; position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0 50%, rgba(255, 255, 255, .04) 50% 100%);
  border: 1px solid rgba(255, 255, 255, .14); border-bottom-color: rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -6px 10px -6px rgba(0, 0, 0, .7), 0 6px 10px -6px rgba(0, 0, 0, .9);
}
.rcd-timer i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); } /* bisagra del contador tipo reloj de tabla */
.rcd-timer strong { font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; transform-origin: 50% 100%; backface-visibility: hidden; }
.rcd-timer small { font-size: .48rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.rcd-timer i:last-child strong { color: color-mix(in srgb, var(--cc) 78%, #fff); text-shadow: 0 0 10px var(--cc); }
.rcd-chip { flex: none; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px; color: var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); border: 1px dashed color-mix(in srgb, var(--cc) 55%, transparent); }
.rcd-launch { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .65rem; border-radius: 12px; font-size: .7rem; color: var(--muted); background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .08); transform: translateZ(14px); }
.rcd-launch b { font-family: var(--display); font-size: .86rem; color: var(--c); font-variant-numeric: tabular-nums; }
@media (max-width: 1020px) { .raid-countdown-wrap { grid-template-columns: 1fr; } .rcd-card { transform: none; } .rcd-row, .rcd-head, .rcd-launch { transform: none; } }
@media (max-width: 420px) { .rcd-timer i { width: 30px; height: 38px; } .rcd-timer { gap: .18rem; } }
html.lite .rcd-card::before, html.lite .rcd-exp::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .rcd-card::before, .rcd-exp::before { animation: none; } .rcd-card { transition: none; } }
html.is-scrolling .rcd-card::before { animation-play-state: paused; }


/* =============================================================
   99z4. Contadores de raid v2 — una baldosa 3D por core, todas en una fila (sin huecos, mismo alto)
   ============================================================= */
.raid-countdown-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: .75rem; perspective: 1100px; }
.rct {
  --c: var(--accent); --cc: var(--c); --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .42rem; min-width: 0; padding: .7rem .6rem .65rem;
  border-radius: 20px; border: 1px solid color-mix(in srgb, var(--cc) 38%, transparent);
  background: radial-gradient(110% 70% at 50% -20%, color-mix(in srgb, var(--cc) 30%, transparent), transparent 66%), linear-gradient(165deg, rgba(255, 255, 255, .06), transparent 45%), rgba(var(--bg-rgb), .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 22px 40px -26px rgba(0, 0, 0, .9), 0 0 50px -38px var(--cc);
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .35s cubic-bezier(.23, 1, .32, 1), border-color .3s ease, box-shadow .3s ease; overflow: hidden;
}
.rct::before { content: ""; position: absolute; top: -1px; left: 0; width: 40%; height: 2px; border-radius: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--cc), transparent); box-shadow: 0 0 14px 1px var(--cc); animation: rcd-run 5s ease-in-out infinite alternate; }
.rct:hover { border-color: color-mix(in srgb, var(--cc) 70%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 26px 46px -24px color-mix(in srgb, var(--cc) 55%, transparent); }
.rct--first { margin-left: .35rem; } /* pequeña separación visual entre grupos de expansión */
.rct-top { display: flex; align-items: center; gap: .35rem; transform: translateZ(14px); }
.rct-exp { display: inline-flex; align-items: center; gap: .3rem; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.rct-exp::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.rct-top em { font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .06em; padding: .13rem .4rem; border-radius: 999px; color: var(--cc); background: color-mix(in srgb, var(--cc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); }
.rct-name { font-family: var(--display); font-size: .95rem; font-weight: 700; color: var(--ink); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateZ(20px); }
.rct-timer { display: flex; gap: .22rem; justify-content: center; width: 100%; transform: translateZ(26px); }
.rct-timer i { flex: 1 1 0; max-width: 40px; min-width: 0; height: 44px; font-style: normal; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0 50%, rgba(255, 255, 255, .04) 50% 100%); border: 1px solid rgba(255, 255, 255, .14); border-bottom-color: rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -6px 10px -6px rgba(0, 0, 0, .7), 0 7px 12px -6px rgba(0, 0, 0, .9); }
.rct-timer i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.rct-timer strong { font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; transform-origin: 50% 100%; backface-visibility: hidden; }
.rct-timer small { font-size: .46rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.rct-timer i:last-child strong { color: color-mix(in srgb, var(--cc) 75%, #fff); text-shadow: 0 0 10px var(--cc); }
.rct-none { height: 44px; display: flex; align-items: center; justify-content: center; width: 100%; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cc); border: 1px dashed color-mix(in srgb, var(--cc) 55%, transparent); border-radius: 10px; }
.rct-days { font-size: .64rem; color: var(--muted); text-align: center; line-height: 1.25; text-transform: capitalize; transform: translateZ(12px); }
@media (max-width: 700px) { .rct, .rct-top, .rct-name, .rct-timer, .rct-days { transform: none; } .rct--first { margin-left: 0; } }
html.lite .rct::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .rct::before { animation: none; } .rct { transition: none; } }
html.is-scrolling .rct::before { animation-play-state: paused; }


/* =============================================================
   99z4b. Paleta ampliada de colores de core + calendario claro
   ============================================================= */
[data-core-color="red"] { --core-rgb: 240,84,84; }
[data-core-color="green"] { --core-rgb: 61,220,132; }
[data-core-color="purple"] { --core-rgb: 176,124,255; }
[data-core-color="blue"] { --core-rgb: 74,158,255; }
[data-core-color="orange"] { --core-rgb: 255,152,56; }
[data-core-color="pink"] { --core-rgb: 255,110,186; }
[data-core-color="cyan"] { --core-rgb: 40,212,230; }
[data-core-color="gold"] { --core-rgb: 240,196,72; }
[data-core-color="crimson"] { --core-rgb: 222,38,76; }
[data-core-color="teal"] { --core-rgb: 28,200,160; }
[data-core-color="lime"] { --core-rgb: 166,230,52; }
[data-core-color="yellow"] { --core-rgb: 255,232,64; }
[data-core-color="magenta"] { --core-rgb: 226,64,250; }
[data-core-color="violet"] { --core-rgb: 124,92,255; }
[data-core-color="indigo"] { --core-rgb: 88,108,255; }
[data-core-color="sky"] { --core-rgb: 128,206,255; }
[data-core-color="coral"] { --core-rgb: 255,124,98; }
[data-core-color="mint"] { --core-rgb: 150,255,206; }
[data-core-color="silver"] { --core-rgb: 206,215,232; }
[data-core-color="bronze"] { --core-rgb: 205,127,50; }

/* 99z5. Calendario: el borde izquierdo y el nombre son del color del CORE; la pastilla de arriba, de la EXPANSIÓN */
.raid-cal-event[data-core-color] { border-left: 4px solid rgb(var(--core-rgb)); border-top: 2px solid var(--cal-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 22px -14px rgba(0, 0, 0, .9), -10px 0 22px -12px rgb(var(--core-rgb)); }
.raid-cal-event[data-core-color].is-tentative { border-left-style: dashed; }
.raid-cal-event .raid-cal-event-exp { align-self: flex-start; padding: .12rem .45rem .12rem .2rem; border-radius: 999px; background: color-mix(in srgb, var(--cal-accent) 20%, transparent); border: 1px solid color-mix(in srgb, var(--cal-accent) 55%, transparent); font-size: .56rem; }
.rc-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.1rem; margin: -.2rem 0 .9rem; font-size: .7rem; }
.rc-legend-group { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .35rem .5rem; }
.rc-lg-exp { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem .12rem .2rem; border-radius: 999px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .6rem; color: var(--cal-accent); background: color-mix(in srgb, var(--cal-accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--cal-accent) 55%, transparent); }
.rc-lg-exp i { font-style: normal; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 6px; font-size: .62rem; background: color-mix(in srgb, var(--cal-accent) 40%, #000); }
.rc-lg-core { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: rgb(var(--core-rgb)); }
.rc-lg-core b { width: 9px; height: 9px; border-radius: 3px; background: rgb(var(--core-rgb)); box-shadow: 0 0 8px rgb(var(--core-rgb)); }


/* 99z6. Evento del calendario: TODO del color del core; solo la pastillita de la expansión lleva el color de la expansión */
.rc-legend { display: none; }
.raid-cal-event[data-core-color] {
  border: 1px solid rgba(var(--core-rgb), .55); border-left: 4px solid rgb(var(--core-rgb));
  background: linear-gradient(135deg, rgba(var(--core-rgb), .2), rgba(5, 7, 14, .82) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 22px -14px rgba(0, 0, 0, .9), -10px 0 22px -12px rgb(var(--core-rgb));
}
.raid-cal-event[data-core-color].is-tentative { border-style: dashed; border-left-style: dashed; }
.raid-cal-event[data-core-color] .raid-cal-event-time { color: rgb(var(--core-rgb)); }
.raid-cal-event[data-core-color] .raid-cal-event-time svg { opacity: .9; }
.raid-cal-event[data-core-color] .raid-cal-event-badge { color: rgb(var(--core-rgb)); background: rgba(var(--core-rgb), .16); border: 1px solid rgba(var(--core-rgb), .55); }
.raid-cal-event[data-core-color].is-live { border-color: rgba(255, 82, 82, .7); }


/* =============================================================
   99z7. Calendario sin scroll, compacto y con un "HOY" limpio (sin brillo giratorio)
   ============================================================= */
.community-embed:has(.raid-calendar) { max-height: none; overflow: hidden; }
.raid-calendar { padding: .2rem 0 0; gap: .55rem; align-items: start; }
.raid-cal-day { min-height: 0; padding: .65rem .45rem .55rem; gap: .4rem; }
.rcd-date { font-size: 1.5rem; }
.raid-cal-event { padding: .35rem .45rem .35rem .5rem; gap: .14rem; }
.raid-cal-event-top { display: flex; align-items: center; justify-content: space-between; gap: .3rem; min-width: 0; flex-wrap: nowrap; }
.raid-cal-event-top .raid-cal-event-exp { align-self: auto; flex: 0 1 auto; }
.raid-cal-event-top .raid-cal-event-badge, .raid-cal-event-top .raid-cal-event-live { align-self: auto; flex: none; font-size: .5rem; padding: .08rem .35rem; }
.raid-cal-event-core { font-size: .74rem; }
.rcd-rest { margin: .4rem auto; }

/* HOY: marco sólido del color de acento, fecha en pastilla y barra superior; sin resplandor ni anillo animado */
.raid-cal-day.is-today { border: 1.5px solid var(--accent); background: linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .03) 55%), rgba(9, 11, 20, .88); box-shadow: 0 16px 28px -22px rgba(0, 0, 0, .9); }
.raid-cal-day.is-today .rcd-ring { display: none; }
.raid-cal-day.is-today::before { opacity: 1; left: 0; right: 0; top: 0; height: 4px; border-radius: 18px 18px 0 0; background: var(--accent); box-shadow: none; }
.raid-cal-day.is-today .rcd-date { color: #0b1020; background: var(--accent); border-radius: 12px; padding: .02rem .55rem; text-shadow: none; }
.raid-cal-day.is-today .raid-cal-day-name { color: var(--accent); }
.raid-cal-today-badge { animation: none; box-shadow: none; }
.raid-cal-event-top { flex-wrap: wrap; row-gap: .2rem; justify-content: flex-start; }
.raid-cal-event-top .raid-cal-event-exp { overflow: visible; text-overflow: clip; flex: none; }

/* 99z8. Calendario sin la ventana/caja de fondo: los días quedan sueltos sobre la web, sin marco ni vacío alrededor */
.community-embed:has(.raid-calendar) { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; margin-top: 1.4rem; overflow: visible; }
.community-embed:has(.raid-calendar)::before { display: none; }
.community-embed:has(.raid-calendar) .raid-calendar { align-items: start; padding: 0; }
.community-embed:has(.raid-calendar) .rc-summary { margin-bottom: .2rem; }

/* 99z9. Cambio de tema rápido y legible: los colores del texto, bordes y fondos de TODAS las tarjetas cambian al instante
   (antes se interpolaban durante 2,5 a 8,5 s: miles de repintados y textos a medio color, grises y poco legibles).
   Solo el fondo vivo hace un fundido corto (opacidad, que corre en la GPU). */
:root, :root.theme-auto-slow { --theme-transition: color 0s linear; --bg-fade: 1.5s; }

/* 99z10. Pestañas/botones ACTIVOS: al pasar el mouse conservan su fondo y su color de texto (antes el hover les ponía un fondo
   transparente con texto oscuro y las letras desaparecían). */
.hero-exp-btn.is-active:hover, .tab-btn[aria-selected="true"]:hover, .raiders-tab.is-active:hover, .zone-tab[aria-selected="true"]:hover {
  background: linear-gradient(135deg, var(--accent), var(--void)); color: var(--accent-ink); border-color: transparent;
}


/* =============================================================
   99z11. Mi Cuenta — ventana compacta con la temática de la web (cristal, acento del tema, confirmación de asistencia)
   ============================================================= */
.account-modal-card {
  width: min(560px, 100%); max-height: min(88vh, 760px); padding: 0; gap: 0; overflow: hidden;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .16), transparent 42%), radial-gradient(90% 60% at 100% 0%, rgba(var(--void-rgb, var(--accent-rgb)), .14), transparent 70%), rgba(var(--bg-rgb), .97);
  border: 1px solid rgba(var(--accent-rgb), .38); border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 80px -46px rgb(var(--accent-rgb));
  animation: char-in .26s var(--ease-drawer, cubic-bezier(.32, .72, 0, 1)) both;
}
.account-modal-card::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 16px 1px var(--accent); }
.account-modal-card .login-modal-x { top: .8rem; right: .9rem; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .06); }
[data-account-modal-body] { max-height: min(88vh, 760px); overflow-y: auto; padding: 1.15rem 1.15rem 1.1rem; overscroll-behavior: contain; scrollbar-width: thin; }

.acc-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding-right: 2.2rem; margin-bottom: .85rem; }
.acc-avatar { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--void)); box-shadow: 0 8px 18px -8px rgba(var(--accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
.acc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acc-id { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.acc-id strong { font-family: var(--display); font-size: 1.05rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.acc-badge { display: inline-flex; align-items: center; gap: .3rem; font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .02em; padding: .16rem .55rem; border-radius: 999px; color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.acc-badge svg { width: 11px; height: 11px; }
.acc-badge.is-ok { color: #5be39a; background: rgba(91, 227, 154, .1); border-color: rgba(91, 227, 154, .35); }
.acc-badge--btn { cursor: pointer; color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .1); }
.acc-badge--btn:hover { background: rgba(var(--accent-rgb), .2); }
.acc-tools { display: flex; gap: .35rem; }
.acc-tool { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); transition: color .2s, background .2s, transform .2s; }
.acc-tool svg { width: 16px; height: 16px; }
.acc-tool:hover { color: var(--ink); background: rgba(var(--accent-rgb), .16); transform: translateY(-1px); }
.acc-tool--danger:hover { color: #ff8a8a; background: rgba(200, 60, 60, .2); }
.acc-logout-confirm { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; margin: -.3rem 0 .8rem; padding: .5rem .7rem; border-radius: 12px; font-size: .82rem; background: rgba(160, 40, 40, .14); border: 1px solid rgba(200, 60, 60, .35); }
.acc-logout-confirm span { margin-right: auto; color: var(--muted); }
.acc-logout-confirm .btn { padding: .35rem .8rem; font-size: .8rem; margin: 0; }
.acc-logout-confirm[hidden] { display: none !important; }
.acc-flash { margin: 0 0 .8rem; padding: .5rem .8rem; border-radius: 12px; font-size: .82rem; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .35); }
.acc-flash.is-error { background: rgba(255, 100, 100, .12); border-color: rgba(255, 100, 100, .35); }

.acc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .07); margin-bottom: .9rem; }
.acc-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .6rem; border-radius: 10px; font-weight: 700; font-size: .86rem; color: var(--muted); transition: background .2s, color .2s; }
.acc-tabs button em { font-style: normal; font-size: .68rem; padding: .05rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.acc-tabs button:hover { color: var(--ink); }
.acc-tabs button.is-on { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--void)); box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), .8); }
.acc-tabs button.is-on em { background: rgba(0, 0, 0, .25); }

.acc-hint, .acc-note { margin: 0 0 .7rem; font-size: .78rem; color: var(--muted); line-height: 1.4; }
.acc-note { margin: .7rem 0 0; text-align: center; }
.acc-empty { margin: .5rem 0; padding: 1rem; text-align: center; font-size: .84rem; color: var(--muted); border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .15); }
.acc-empty--sm { margin: 0; padding: .6rem; font-size: .76rem; }

.acc-core { display: flex; flex-direction: column; gap: .5rem; padding: .7rem .75rem .75rem; margin-bottom: .6rem; border-radius: 16px; border: 1px solid rgba(var(--core-rgb), .3); border-left: 4px solid rgb(var(--core-rgb)); background: linear-gradient(135deg, rgba(var(--core-rgb), .12), rgba(0, 0, 0, .22) 70%); }
.acc-core-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .55rem; }
.acc-core-head b { font-family: var(--display); font-size: .95rem; color: rgb(var(--core-rgb)); }
.acc-core-head small { color: var(--muted); font-size: .7rem; margin-left: auto; }
.acc-exp { font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .14rem .5rem; border-radius: 999px; color: #8b5cf6; background: rgba(139, 92, 246, .16); border: 1px solid rgba(139, 92, 246, .5); }
.acc-exp--mop { color: #3dffb0; background: rgba(61, 255, 176, .13); border-color: rgba(61, 255, 176, .5); }
.acc-exp--forever { color: #f2a65a; background: rgba(242, 166, 90, .14); border-color: rgba(242, 166, 90, .5); }

.acc-raid { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: .35rem .6rem; padding: .5rem .55rem; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06); position: relative; }
.acc-raid-when { display: flex; flex-direction: column; line-height: 1.15; }
.acc-raid-when b { font-family: var(--display); font-size: .95rem; text-transform: capitalize; }
.acc-raid-when small { font-size: .64rem; color: var(--muted); }
.acc-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
.acc-seg button { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .42rem .3rem; border-radius: 10px; font-size: .76rem; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: background .18s, color .18s, border-color .18s, transform .12s; }
.acc-seg button svg { width: 13px; height: 13px; flex: none; }
.acc-seg button:hover { color: var(--ink); background: rgba(255, 255, 255, .1); }
.acc-seg button:active { transform: scale(.97); }
.acc-seg .acc-seg-attend.is-on { color: #062a17; background: #5be39a; border-color: #5be39a; box-shadow: 0 6px 14px -8px #5be39a; }
.acc-seg .acc-seg-late.is-on { color: #2c1c00; background: #ffcf6b; border-color: #ffcf6b; box-shadow: 0 6px 14px -8px #ffcf6b; }
.acc-seg .acc-seg-absent.is-on { color: #2c0707; background: #ff8a8a; border-color: #ff8a8a; box-shadow: 0 6px 14px -8px #ff8a8a; }
.acc-saved { position: absolute; top: .25rem; right: .5rem; font-size: .62rem; color: var(--muted); }
.acc-saved.is-ok { color: #5be39a; } .acc-saved.is-err { color: #ff8a8a; }
.acc-extra { grid-column: 1 / -1; display: none; flex-direction: column; gap: .3rem; padding-top: .25rem; font-size: .74rem; color: var(--muted); }
.acc-extra small { opacity: .7; }
.acc-raid[data-state="late"] .acc-extra--late, .acc-raid[data-state="absent"] .acc-extra--absent { display: flex; }
.acc-chips-row { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.acc-pill { padding: .22rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: background .15s, color .15s; }
.acc-pill:hover { color: var(--ink); }
.acc-pill.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.acc-chips-row input { flex: 1 1 130px; min-width: 0; padding: .3rem .6rem; border-radius: 10px; font: inherit; font-size: .78rem; color: var(--ink); background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .14); }
.acc-chips-row input[type=number] { flex: 0 0 74px; }
.acc-chips-row input:focus { outline: none; border-color: var(--accent); }

.acc-chars { display: grid; gap: .45rem; }
.acc-char { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 13px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .07); }
.acc-char-ico { width: 34px; height: 34px; border-radius: 9px; }
.acc-char-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.acc-char-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-char-who small { color: var(--muted); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-char-stats { display: flex; flex-direction: column; align-items: flex-end; font-size: .7rem; color: var(--muted); line-height: 1.25; white-space: nowrap; }
.acc-char-stats b { color: var(--ink); }
.acc-char-pts b { color: var(--accent); }
.acc-view3d { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .6rem; border-radius: 10px; font-size: .74rem; font-weight: 700; color: var(--accent); background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .4); }
.acc-view3d svg { width: 14px; height: 14px; }
.acc-view3d:hover { background: rgba(var(--accent-rgb), .24); }
.acc-more { display: block; margin-top: .7rem; text-align: center; font-size: .8rem; font-weight: 700; color: var(--accent); }

.acc-pitch { text-align: center; padding: .4rem .2rem .2rem; }
.acc-pitch-ico { width: 52px; height: 52px; margin: 0 auto .7rem; border-radius: 17px; display: grid; place-items: center; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--void)); box-shadow: 0 12px 26px -12px rgba(var(--accent-rgb), .9); }
.acc-pitch-ico svg { width: 26px; height: 26px; }
.acc-pitch h2 { font-family: var(--display); font-size: 1.25rem; margin: 0 0 .3rem; }
.acc-pitch-head p { color: var(--muted); font-size: .84rem; margin: 0 0 .9rem; }
.acc-perks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; text-align: left; }
.acc-perks li { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .65rem; border-radius: 13px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .07); font-size: .72rem; color: var(--muted); line-height: 1.35; }
.acc-perks li b { color: var(--ink); font-size: .82rem; }
.acc-cta { width: 100%; }
@media (max-width: 520px) {
  .acc-perks { grid-template-columns: 1fr; }
  .acc-raid { grid-template-columns: 1fr; }
  .acc-raid-when { flex-direction: row; align-items: baseline; gap: .5rem; }
  .acc-char { grid-template-columns: auto 1fr auto; }
  .acc-char-stats { display: none; }
}


/* =============================================================
   99z12. Visor 3D del personaje (ficha del personaje)
   ============================================================= */
.char-3d-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; font-weight: 700; font-size: .82rem; color: var(--accent-ink); background: linear-gradient(135deg, var(--cc, var(--accent)), var(--void)); border: 0; box-shadow: 0 8px 18px -10px var(--cc, var(--accent)); transition: transform .2s var(--ease-out), box-shadow .2s ease; }
.char-3d-btn svg { width: 15px; height: 15px; }
.char-3d-btn:hover { transform: translateY(-2px); }
.char-3d-btn.is-on { background: rgba(255, 255, 255, .1); color: var(--ink); box-shadow: inset 0 0 0 1px var(--cc, var(--accent)); }
.char-3d { position: relative; margin: .9rem 0 .4rem; border-radius: 22px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--cc, var(--accent)) 45%, transparent); background: radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--cc, var(--accent)) 30%, transparent), transparent 70%), rgba(4, 6, 12, .82); box-shadow: 0 24px 50px -30px var(--cc, var(--accent)); }
.char-3d[hidden] { display: none; }
.char-3d-view { position: relative; width: 100%; height: min(460px, 62vh); cursor: grab; }
.char-3d-view:active { cursor: grabbing; }
.char-3d-view canvas { display: block; width: 100% !important; height: 100% !important; }
.char-3d-status { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem; font-size: .9rem; color: var(--muted); pointer-events: none; }
.char-3d-status[hidden] { display: none; }
.char-3d-hud { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .8rem; font-size: .72rem; color: var(--muted); background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent); }
.char-3d-hud button { padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, .12); }
.char-3d-hud button:hover { background: rgba(255, 255, 255, .22); }


/* =============================================================
   99z13. Ficha de equipo "paperdoll": imagen estática al centro y objetos a los lados (sin 3D, sin animaciones)
   ============================================================= */
.pd { --cc: var(--accent); display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr); gap: .35rem .8rem; align-items: start; margin: .8rem 0 .3rem; }
.pd-col { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.pd-item { --q: #fff; display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .25rem .4rem; border-radius: 12px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .06); color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
a.pd-item:hover { border-color: var(--q); background: rgba(0, 0, 0, .5); }
.pd-ico { width: 42px; height: 42px; flex: none; border-radius: 9px; overflow: hidden; border: 2px solid var(--q); background: rgba(0, 0, 0, .5); box-shadow: 0 0 10px -4px var(--q); }
.pd-ico img { display: block; width: 100%; height: 100%; }
.pd-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pd-txt b { font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pd-txt small { display: flex; flex-wrap: wrap; gap: .1rem .45rem; font-size: .7rem; color: var(--muted); }
.pd-ilvl { color: var(--ink); font-weight: 700; }
.pd-ench { color: #1eff00; }
.pd-gems { color: #62b9ff; }
.pd-col--r .pd-item { flex-direction: row-reverse; text-align: right; }
.pd-col--r .pd-txt small { justify-content: flex-end; }
.pd-item--empty { opacity: .4; }
.pd-item--empty .pd-ico { border-style: dashed; border-color: rgba(255, 255, 255, .3); box-shadow: none; }
.pd-figure { position: relative; align-self: stretch; min-height: 420px; border-radius: 20px; overflow: hidden; display: grid; place-items: end center;
  background: radial-gradient(70% 55% at 50% 100%, color-mix(in srgb, var(--cc) 40%, transparent), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .35)); border: 1px solid color-mix(in srgb, var(--cc) 35%, transparent); }
.pd-emblem { position: absolute; left: 50%; top: 50%; width: 80%; max-width: 240px; transform: translate(-50%, -55%); opacity: .12; filter: grayscale(.3); pointer-events: none; }
.pd-render-slot { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-items: end center; }
.pd-render { display: block; width: auto; max-width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.pd-avatar { align-self: center; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cc); box-shadow: 0 0 40px -8px var(--cc); margin-bottom: 30%; }
.pd-weapons { grid-column: 1 / -1; display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem .8rem; }
.pd-weapons .pd-item { min-width: min(100%, 260px); max-width: 340px; }


/* =============================================================
   99z14. Mi Perfil — el panel de cada miembro (hero, indicadores, raids, personajes, asistencia, puntos y premios)
   ============================================================= */
.md-body { background: var(--bg); }
.md-nav { display: flex; gap: .3rem; }
.md-nav a { padding: .4rem .8rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.md-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.md-page { max-width: 1260px; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.md-gate { max-width: 520px; margin: 6vh auto; text-align: center; padding: 2rem; border-radius: 24px; background: rgba(var(--bg-rgb), .8); border: 1px solid rgba(var(--accent-rgb), .35); }
.md-gate h1 { font-family: var(--display); margin: 0 0 .6rem; }
.md-gate p { color: var(--muted); margin: 0 0 1.2rem; }

.md-hero { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.4rem; align-items: center; padding: 1.1rem 1.3rem; border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .2), transparent 55%), radial-gradient(70% 120% at 100% 0%, rgba(var(--void-rgb, var(--accent-rgb)), .18), transparent 70%), rgba(var(--bg-rgb), .9);
  border: 1px solid rgba(var(--accent-rgb), .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 50px -34px rgb(var(--accent-rgb)); }
.md-hero::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 16px 1px var(--accent); }
.md-hero-id { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.md-avatar { width: 64px; height: 64px; border-radius: 20px; flex: none; display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--void)); box-shadow: 0 12px 26px -12px rgba(var(--accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
.md-avatar img { width: 100%; height: 100%; object-fit: cover; }
.md-hero h1 { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.1; margin: 0 0 .4rem; overflow-wrap: anywhere; }
.md-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.md-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.md-badge svg { width: 12px; height: 12px; }
.md-badge.is-ok { color: #5be39a; background: rgba(91, 227, 154, .1); border-color: rgba(91, 227, 154, .35); }
.md-badge--btn { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .1); }
.md-badge--rank { color: var(--gold, #f0c448); border-color: rgba(240, 196, 72, .4); background: rgba(240, 196, 72, .1); }
.md-next { --cc: var(--accent-rgb); display: grid; grid-template-columns: auto auto; align-items: center; gap: .1rem .9rem; padding: .7rem .95rem; border-radius: 18px; background: linear-gradient(135deg, rgba(var(--cc), .2), rgba(0, 0, 0, .3)); border: 1px solid rgba(var(--cc), .45); }
.md-next small { grid-column: 1 / -1; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.md-next b { font-family: var(--display); color: rgb(var(--cc)); }
.md-next span { font-size: .78rem; color: var(--muted); grid-row: 3; grid-column: 1; }
.md-next .md-countdown { grid-row: 2 / span 2; grid-column: 2; }
.md-next-state { grid-column: 1 / -1; font-style: normal; font-size: .72rem; font-weight: 700; margin-top: .3rem; }
.md-next-state.is-attend { color: #5be39a; } .md-next-state.is-late { color: #ffcf6b; } .md-next-state.is-absent { color: #ff8a8a; }
.md-countdown { display: flex; gap: .25rem; }
.md-countdown i { font-style: normal; width: 38px; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0 50%, rgba(255, 255, 255, .04) 50%); border: 1px solid rgba(255, 255, 255, .14); }
.md-countdown b { font-family: var(--display); font-size: 1.05rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.md-countdown small { font-size: .5rem; text-transform: uppercase; color: var(--muted); letter-spacing: .08em; }
.md-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; padding-top: .8rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.md-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .85rem; border-radius: 12px; font-size: .8rem; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); transition: background .18s, transform .18s; }
.md-btn:hover { background: rgba(var(--accent-rgb), .18); transform: translateY(-1px); }
.md-btn--danger { margin-left: auto; color: #ff8a8a; border-color: rgba(200, 60, 60, .45); background: rgba(160, 40, 40, .15); }
.md-btn--danger:hover { background: rgba(160, 40, 40, .3); }

.md-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.md-kpi { --k: var(--accent); padding: .75rem .85rem; border-radius: 16px; display: flex; flex-direction: column; gap: .15rem; background: linear-gradient(160deg, rgba(255, 255, 255, .06), transparent 60%), rgba(var(--bg-rgb), .85); border: 1px solid rgba(255, 255, 255, .08); border-top: 2px solid var(--k); }
.md-kpi strong { font-family: var(--display); font-size: 1.55rem; line-height: 1.1; color: var(--k); font-variant-numeric: tabular-nums; }
.md-kpi span { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.md-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
.md-main, .md-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.md-card { padding: 1rem 1.05rem 1.05rem; border-radius: 22px; background: linear-gradient(165deg, rgba(255, 255, 255, .05), transparent 50%), rgba(var(--bg-rgb), .88); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 20px 40px -32px rgba(0, 0, 0, .9); }
.md-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 0 0 .75rem; font-family: var(--display); font-size: 1.05rem; }
.md-card-title small { font-family: var(--sans); font-size: .72rem; font-weight: 600; color: var(--muted); }
.md-sub { margin: 1rem 0 .5rem; font-family: var(--display); font-size: .88rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.md-chars { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.md-char { --cc: var(--accent); display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .65rem .35rem .4rem; border-radius: 14px; text-align: left; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .15s, background .15s; }
.md-char img { width: 30px; height: 30px; border-radius: 8px; }
.md-char span { display: flex; flex-direction: column; line-height: 1.15; }
.md-char b { font-size: .82rem; color: var(--cc); }
.md-char small { font-size: .64rem; color: var(--muted); }
.md-char em { font-style: normal; font-size: .7rem; font-weight: 800; padding: .08rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.md-char:hover { border-color: var(--cc); }
.md-char.is-on { border-color: var(--cc); background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 22%, transparent), rgba(0, 0, 0, .3)); box-shadow: 0 8px 18px -12px var(--cc); }

.md-sheet { --cc: var(--accent); padding: .8rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 10%, transparent), transparent 40%), rgba(0, 0, 0, .22); }
.md-sheet-head { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.md-sheet-ico { width: 56px; height: 56px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--cc) 60%, transparent); }
.md-sheet-id { flex: 1 1 200px; min-width: 0; }
.md-sheet-id h3 { margin: 0; font-family: var(--display); font-size: 1.35rem; line-height: 1.1; }
.md-sheet-id p { margin: .2rem 0 0; font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.md-sheet-id small { font-size: .7rem; color: var(--muted); }
.md-sheet-stats { display: flex; flex-wrap: wrap; gap: .4rem; }
.md-sheet-stats span { min-width: 64px; padding: .35rem .6rem; border-radius: 12px; display: flex; flex-direction: column; align-items: center; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); }
.md-sheet-stats small { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.md-sheet-stats b { font-family: var(--display); font-size: 1.15rem; }
.md-sheet-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.md-sheet-links a { padding: .25rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .35); }
.md-sheet-links a:hover { background: rgba(var(--accent-rgb), .22); }

.md-att { --cc: 40, 212, 230; padding: .5rem .6rem; border-radius: 13px; margin-bottom: .45rem; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid rgb(var(--cc)); }
.md-att-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.md-att-top small { color: rgb(var(--cc)); font-weight: 700; font-size: .7rem; }
.md-att > span { font-size: .72rem; color: var(--muted); }
.md-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: .35rem 0; }
.md-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgb(var(--cc, var(--accent-rgb))), var(--void)); }

.md-rewards { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .4rem; }
.md-rewards li { display: grid; grid-template-columns: 1fr auto; gap: 0 .6rem; padding: .45rem .6rem; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .07); font-size: .82rem; }
.md-rewards li em { font-style: normal; font-weight: 800; color: var(--gold, #f0c448); }
.md-rewards li .md-bar { grid-column: 1 / -1; margin: .3rem 0 .15rem; height: 6px; }
.md-rewards li small { grid-column: 1 / -1; font-size: .68rem; color: var(--muted); }
.md-rewards li.is-ok { border-color: rgba(91, 227, 154, .5); background: rgba(91, 227, 154, .08); }
.md-rewards li.is-ok small { color: #5be39a; }
.md-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.md-hist li { display: flex; gap: .6rem; align-items: baseline; font-size: .8rem; }
.md-hist b { min-width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.md-hist .is-plus { color: #5be39a; } .md-hist .is-minus { color: #ff8a8a; }
.md-hist span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.md-hist small { font-size: .66rem; color: var(--muted); }

.md-up { --cc: 40, 212, 230; display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; padding: .45rem .6rem; border-radius: 12px; margin-bottom: .35rem; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid rgb(var(--cc)); color: inherit; }
.md-up:hover { background: rgba(var(--cc), .12); }
.md-up b { font-family: var(--display); font-size: .88rem; min-width: 3.6rem; }
.md-up span { display: flex; flex-direction: column; font-size: .8rem; line-height: 1.2; }
.md-up small { color: var(--muted); font-size: .66rem; }
.md-up em { font-style: normal; font-weight: 800; }
.md-up em.is-attend { color: #5be39a; } .md-up em.is-late { color: #ffcf6b; } .md-up em.is-absent { color: #ff8a8a; }
.md-links { display: grid; gap: .35rem; }
.md-links a { display: flex; flex-direction: column; padding: .5rem .7rem; border-radius: 12px; font-weight: 700; font-size: .85rem; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .07); }
.md-links a small { font-weight: 500; color: var(--muted); font-size: .7rem; }
.md-links a:hover { border-color: var(--accent); }

.md-page .acc-core { margin-bottom: .6rem; }
.md-page .acc-core:last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
  .md-grid { grid-template-columns: 1fr; }
  .md-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .md-hero { grid-template-columns: 1fr; }
  .md-nav { display: none; }
  .md-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-btn--danger { margin-left: 0; }
}

.md-grid--wide { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); }
@media (max-width: 1100px) { .md-grid--wide { grid-template-columns: 1fr; } }
.md-grid, .md-grid--wide { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); }
@media (max-width: 1100px) { .md-grid, .md-grid--wide { grid-template-columns: 1fr; } }


/* =============================================================
   99z15. Paperdoll v2 — se adapta al ancho de SU contenedor (no de la ventana), fondo con luz y suelo
   ============================================================= */
.pd-wrap { container-type: inline-size; container-name: pd; }
.pd { grid-template-columns: minmax(0, 1fr) clamp(170px, 30cqw, 280px) minmax(0, 1fr); gap: .4rem .7rem; }
.pd-figure {
  min-height: 0; height: clamp(360px, 46cqw, 470px); align-self: start; border: 0; border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(55% 38% at 50% 90%, color-mix(in srgb, var(--cc) 60%, transparent), transparent 72%),
    radial-gradient(85% 65% at 50% 40%, color-mix(in srgb, var(--cc) 24%, transparent), transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 28%, transparent), 0 24px 40px -30px var(--cc);
}
.pd-figure::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 22%, transparent 78%, rgba(0, 0, 0, .35)); }
.pd-figure::after { content: ""; position: absolute; left: 50%; bottom: 5%; width: 62%; height: 9%; transform: translateX(-50%); z-index: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6), transparent 70%); }
.pd-render-slot { position: absolute; inset: 0; z-index: 1; }
.pd-render { position: absolute; left: 50%; top: -4%; width: auto; height: 112%; max-width: none; max-height: none; transform: translateX(-50%); object-fit: contain; }
.pd-emblem { opacity: .09; }
.pd-avatar { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); margin: 0; }
.pd-weapons { margin-top: .2rem; }
@container pd (max-width: 470px) {
  .pd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pd-figure { grid-column: 1 / -1; grid-row: 1; width: min(100%, 300px); height: 320px; justify-self: center; }
  .pd-col--r .pd-item { flex-direction: row; text-align: left; }
  .pd-col--r .pd-txt small { justify-content: flex-start; }
}
@container pd (max-width: 330px) { .pd { grid-template-columns: 1fr; } }

/* =============================================================
   99z16. Mi Perfil fluido: sin fondo animado ni desenfoques, y lo que está fuera de pantalla no se pinta
   ============================================================= */
.md-body { background: radial-gradient(70% 45% at 15% 0%, rgba(var(--accent-rgb), .16), transparent 70%), radial-gradient(60% 40% at 100% 20%, rgba(var(--void-rgb, var(--accent-rgb)), .14), transparent 70%), var(--bg); background-attachment: fixed; }
.md-body .profile-page-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--bg-rgb), .96); }
.md-card { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.md-hero::before, .md-char, .md-btn, .acc-seg button { will-change: auto; }

.pd-figure.has-render .pd-emblem { display: none; }

/* 99z17. Sin cuadro de fondo detrás del personaje: solo el personaje y una sombra suave en el suelo */
.pd-figure { background: none; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
.pd-figure::before { display: none; }
.pd-figure::after { bottom: 3%; width: 70%; height: 8%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--cc) 45%, rgba(0, 0, 0, .6)), transparent 70%); }
.pd-emblem { display: none; }
.pd-render { height: 108%; top: -2%; }
.pd-render { height: 150%; top: -16%; }

.pd-gen { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3; padding: .3rem .5rem; border-radius: 10px; font-size: .68rem; line-height: 1.25; text-align: center; color: var(--muted); background: rgba(0, 0, 0, .55); }

/* Retrato (MoP Classic): más grande y con presencia, sin cuadro */
.pd-avatar { width: 150px; height: 150px; border-radius: 28px; top: 40%; border: 3px solid var(--cc); box-shadow: 0 0 50px -10px var(--cc), 0 18px 30px -18px rgba(0, 0, 0, .9); }
.pd-figure.has-avatar .pd-emblem { display: block; opacity: .1; width: 90%; max-width: 300px; }
.pd-note { position: absolute; left: 6px; right: 6px; bottom: 4px; z-index: 3; font-size: .62rem; line-height: 1.25; text-align: center; color: var(--muted); }


/* Mi Cuenta: acceso claro al perfil completo + acciones con texto */
.acc-head { grid-template-columns: auto 1fr; }
.acc-profile { display: flex; align-items: center; gap: .75rem; margin: 0 0 .6rem; padding: .6rem .8rem; border-radius: 16px; color: var(--ink); background: linear-gradient(135deg, rgba(var(--accent-rgb), .26), rgba(var(--accent-rgb), .08)); border: 1px solid rgba(var(--accent-rgb), .55); transition: transform .18s ease, background .18s ease; }
.acc-profile:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(var(--accent-rgb), .36), rgba(var(--accent-rgb), .12)); }
.acc-profile-logo { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--void)); animation: acc-blink 2s ease-in-out infinite; }
.acc-profile-logo svg { width: 26px; height: 26px; }
@keyframes acc-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .0); opacity: .82; } 50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .22), 0 0 18px 2px rgba(var(--accent-rgb), .7); opacity: 1; } }
.acc-profile-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.acc-profile-txt b { font-family: var(--display); font-size: 1rem; letter-spacing: .03em; }
.acc-profile-txt small { font-size: .72rem; color: var(--muted); }
.acc-profile-go { margin-left: auto; flex: none; padding: .3rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 800; color: var(--accent-ink); background: var(--accent); transition: transform .18s ease; }
.acc-profile:hover .acc-profile-go { transform: translateX(3px); }
.acc-subtools { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0 0 .8rem; }
.acc-sub { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 12px; text-align: left; color: var(--ink); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: color .15s, background .15s, border-color .15s; }
.acc-sub svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.acc-sub span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.acc-sub b { font-size: .82rem; }
.acc-sub small { font-size: .68rem; color: var(--muted); font-weight: 500; }
.acc-sub:hover { background: rgba(var(--accent-rgb), .16); border-color: rgba(var(--accent-rgb), .45); }
.acc-sub--danger svg { color: #ff8a8a; }
.acc-sub--danger:hover { border-color: rgba(255, 120, 120, .5); }
.acc-sub--danger:hover { color: #ff8a8a; background: rgba(200, 60, 60, .2); }
.acc-sub[hidden] { display: none !important; }
html.lite .acc-profile-logo, html.modal-open .acc-profile-logo { animation-duration: 3.6s; }
@media (prefers-reduced-motion: reduce) { .acc-profile-logo { animation: none; } }


/* =============================================================
   99z18. Ficha: los objetos reciben el mouse (tooltip) aunque el personaje se vea grande; fondo vivo por clase en Mi Perfil
   ============================================================= */
.pd-figure, .pd-figure * { pointer-events: none; }
.pd-item { position: relative; z-index: 2; }
.pd-render { height: 104%; top: -2%; }
.md-sheet { position: relative; overflow: hidden; isolation: isolate; background: rgba(var(--bg-rgb), .55); }
.md-sheet > :not(.char-fx) { position: relative; z-index: 1; }
.md-sheet .char-fx { z-index: 0; }
.md-sheet .cfx-scrim { background: radial-gradient(75% 70% at 50% 55%, rgba(var(--bg-rgb), .55), rgba(var(--bg-rgb), .15) 70%, transparent 92%); }

/* =============================================================
   99z19. Personaje con vida: respira suavemente (solo transform/opacity → fluido y casi sin costo)
   ============================================================= */
.pd-render { transform-origin: 50% 90%; animation: pd-breathe 5.5s ease-in-out infinite; will-change: transform; }
@keyframes pd-breathe {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50%      { transform: translateX(-50%) translateY(-5px) scale(1.012, 1.02); }
}
.pd-figure.has-render::after { animation: pd-ground 5.5s ease-in-out infinite; }
@keyframes pd-ground {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .9; }
  50%      { transform: translateX(-50%) scale(.9); opacity: .6; }
}
/* aura que late detrás del personaje, en el color de la clase */
.pd-figure.has-render::before {
  display: block; content: ""; position: absolute; left: 50%; top: 30%; width: 80%; height: 55%; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc) 38%, transparent), transparent 75%); animation: pd-aura 5.5s ease-in-out infinite;
}
@keyframes pd-aura { 0%, 100% { opacity: .55; transform: translateX(-50%) scale(.94); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
html.lite .pd-render, html.lite .pd-figure::before, html.lite .pd-figure::after, html.is-scrolling .pd-render { animation: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .pd-render, .pd-figure::before, .pd-figure::after { animation: none; } }


/* =============================================================
   99z20. Confirmación de asistencia v2 — solo días de raid por semana, personaje (clase y spec) visible, días pasados cerrados
   ============================================================= */
.acc-raid[data-state="late"] .acc-extra--late, .acc-raid[data-state="late"] .acc-extra--why, .acc-raid[data-state="absent"] .acc-extra--why { display: flex; }
.rv-chars { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.1rem 0 .1rem; }
.rv-char { display: inline-flex; align-items: center; gap: .45rem; padding: .22rem .6rem .22rem .3rem; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid color-mix(in srgb, var(--cc, #fff) 55%, transparent); }
.rv-char img { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; }
.rv-char span { display: flex; flex-direction: column; line-height: 1.15; }
.rv-char b { font-size: .84rem; color: var(--cc, var(--ink)); }
.rv-char small { font-size: .66rem; color: var(--muted); }
.rv-week { margin: .25rem 0 -.1rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rv-tag { align-self: flex-start; margin-top: .15rem; font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .06em; padding: .05rem .4rem; border-radius: 999px; color: var(--accent-ink); background: var(--accent); }
.acc-raid.is-locked { opacity: .78; background: rgba(0, 0, 0, .2); }
.rv-locked { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .76rem; }
.rv-said { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.rv-said svg { width: 13px; height: 13px; }
.rv-said.is-attend { color: #5be39a; } .rv-said.is-late { color: #ffcf6b; } .rv-said.is-absent { color: #ff8a8a; }
.rv-why { color: var(--muted); font-style: italic; }
.rv-lock { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rv-lock svg { width: 12px; height: 12px; }
.acc-chips-row input[type=number] { flex: 0 0 104px; }

/* Ficha sin imagen del personaje: emblema grande de su clase en vez de un hueco vacío */
.pd-figure.no-render .pd-emblem { display: block; opacity: .55; width: 70%; max-width: 230px; filter: drop-shadow(0 0 22px var(--cc, var(--accent))); }


/* Nombre de core y de expansión con SU color, en títulos y subtítulos de toda la web */
.core-txt { color: var(--cc, inherit); font-weight: 800; }
.exp-txt { color: var(--ec, inherit); font-weight: 800; }
.raid-report-core-pill .core-txt { color: inherit; }

/* Mi Perfil: las secciones no heredan el relleno vertical enorme de las secciones de la web (era el espacio vacío entre bloques) */
.md-page section, .md-page .md-kpis { padding-block: 0; }
.md-page .md-card { padding: 1rem 1.05rem 1.05rem; }
.md-page section + section::before, .md-page .md-card::before { display: none; }
.md-page .md-hero { padding: 1.1rem 1.3rem 1.2rem; }

/* Mi Perfil — cabecera con más aire entre nombre, etiquetas, cuenta regresiva y botones */
.md-page .md-hero { padding: 1.6rem 1.8rem 1.5rem; gap: 1.3rem 2rem; }
.md-hero-id { gap: 1.2rem; align-items: flex-start; }
.md-avatar { width: 70px; height: 70px; border-radius: 22px; }
.md-hero h1 { margin: .15rem 0 .75rem; }
.md-badges { gap: .5rem .45rem; }
.md-badge { padding: .3rem .85rem; font-size: .74rem; }
.md-next { padding: 1.05rem 1.25rem; gap: .35rem 1.2rem; border-radius: 20px; }
.md-next small { margin-bottom: .2rem; }
.md-next-state { margin-top: .5rem; }
.md-countdown { gap: .4rem; }
.md-countdown i { width: 44px; height: 48px; }
.md-actions { padding-top: 1.15rem; margin-top: .15rem; gap: .6rem; }
.md-btn { padding: .55rem 1.05rem; }

/* Mi Perfil: personajes a todo lo ancho (sin Puntos y Atajos), KPIs en 5 columnas */
.md-wide { min-width: 0; }
.md-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .md-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .md-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.md-wide .pd-wrap { max-width: 100%; }
/* Ficha del personaje en Mi Perfil: equipo a la izquierda, datos (stats, progreso, logs) a la derecha, aprovechando todo el ancho */
.md-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 1rem 1.2rem; align-items: start; margin-top: .8rem; }
.md-detail-gear, .md-detail-side { min-width: 0; }
.md-detail-side > * + * { margin-top: .9rem; }
@media (max-width: 980px) { .md-detail { grid-template-columns: 1fr; } }

/* Mi Perfil: «Progreso de raid» abajo, a todo el ancho y en fila; «Logs por jefe» sube junto al equipo */
.md-detail-progress { margin-top: 1rem; }
.md-detail-progress .md-sub { margin: 0 0 .6rem; }
.md-detail-progress .char-progress-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; }
.md-detail-side .md-sub:first-child, .md-detail-side > *:first-child { margin-top: 0; }

/* Mi Perfil: «Mis raids + próximas raids + asistencia» en un panel propio; se puede elegir qué va primero */
.md-page .md-block { min-width: 0; }
.md-page[data-order="chars"] .md-block-chars { order: 3; }
.md-page[data-order="chars"] .md-block-raids { order: 4; }
.md-page[data-order="raids"] .md-block-raids { order: 3; }
.md-page[data-order="raids"] .md-block-chars { order: 4; }
.md-page .md-order { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .76rem; color: var(--muted); }
.md-order button { padding: .35rem .8rem; border-radius: 999px; font-size: .76rem; font-weight: 700; cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.md-order button:hover { color: var(--ink); }
.md-order button.is-on { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.md-panel { padding: .9rem 1rem 1rem; border-radius: 26px; background: linear-gradient(170deg, rgba(var(--accent-rgb), .08), transparent 45%), rgba(var(--bg-rgb), .55); border: 1px solid rgba(var(--accent-rgb), .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.md-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin: 0 0 .8rem; padding: 0 .2rem .6rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.md-panel-head h2 { margin: 0; font-family: var(--display); font-size: 1.2rem; }
.md-panel-head small { font-size: .76rem; color: var(--muted); }

/* Mi Perfil: dos botones (junto a «Cerrar sesión») eligen qué se ve: Mis personajes (por defecto) o Mis raids y asistencia */
.md-page[data-view="chars"] .md-block-raids { display: none; }
.md-page[data-view="raids"] .md-block-chars { display: none; }
.md-viewsw { display: inline-flex; gap: .4rem; margin-left: auto; }
.md-viewsw + .md-btn--danger { margin-left: .6rem; }
.md-btn--tab { color: var(--muted); }
.md-btn--tab.is-on { color: var(--accent-ink); background: var(--accent); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(var(--accent-rgb), .9); }
.md-btn--tab.is-on:hover { background: var(--accent); }

/* Chips de personaje: «Expansión · Core» en una sola línea (los spans de color no heredan la columna del chip) */
.md-char small { display: block; white-space: nowrap; }
.md-char small .exp-txt, .md-char small .core-txt { display: inline; }

/* Confirmación v3 — personaje en la esquina de la cabecera (una línea) y días cerrados juntos en una fila */
.acc-core-head { flex-wrap: nowrap; }
.acc-core-head .rv-chars { margin: 0 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; }
.rv-char { flex-direction: row; align-items: center; gap: .4rem; padding: .18rem .6rem .18rem .3rem; white-space: nowrap; }
.rv-char span, .rv-char b, .rv-char small { display: inline; flex-direction: row; }
.rv-char b { font-size: .84rem; }
.rv-char small { font-size: .7rem; padding-left: .4rem; border-left: 1px solid rgba(255, 255, 255, .15); }
.rv-closed { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .06); }
.rv-closed-label { flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rv-closed-label svg { width: 12px; height: 12px; }
.rv-closed-days { flex: 1; display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.rv-day { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px; font-size: .74rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); opacity: .85; white-space: nowrap; }
.rv-day b { font-family: var(--display); font-size: .78rem; color: var(--ink); }
.rv-day svg { width: 12px; height: 12px; }
.rv-day em { font-style: normal; font-weight: 700; }
.rv-day.is-attend { color: #5be39a; border-color: rgba(91, 227, 154, .3); }
.rv-day.is-late { color: #ffcf6b; border-color: rgba(255, 207, 107, .35); }
.rv-day.is-absent { color: #ff8a8a; border-color: rgba(255, 138, 138, .35); }
.rv-day-why { font-style: italic; color: var(--muted); font-size: .7rem; }
@media (max-width: 560px) { .acc-core-head { flex-wrap: wrap; } .acc-core-head .rv-chars { margin-left: 0; } }

/* =============================================================
   99z22. Composición de raid (DataValyrians → Asistencia y Mi Perfil)
   ============================================================= */
.rc { display: flex; flex-direction: column; gap: .7rem; }
.rc-top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.rc-total { display: flex; align-items: baseline; gap: .4rem; }
.rc-total b { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--accent); }
.rc-total span { font-size: .78rem; color: var(--muted); }
.rc-bar { flex: 1 1 280px; display: flex; gap: .3rem; min-width: 0; }
.rc-role { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .4rem .65rem; border-radius: 12px; font-size: .76rem; font-weight: 700; white-space: nowrap; overflow: hidden;
  background: color-mix(in srgb, var(--rr) 18%, transparent); border: 1px solid color-mix(in srgb, var(--rr) 50%, transparent); color: var(--rr); transition: flex-grow .4s cubic-bezier(.23, 1, .32, 1); }
.rc-role b { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.rc-role--tank { --rr: #5aa7ff; } .rc-role--healer { --rr: #5be39a; } .rc-role--dps { --rr: #ff8a6e; }
.rc-empty { font-size: .8rem; color: var(--muted); padding: .4rem; }
.rc-meta { display: flex; gap: .5rem; font-size: .76rem; font-weight: 700; }
.rc-meta .is-late { color: #ffcf6b; } .rc-meta .is-out { color: #ff8a8a; }
.rc-warns { display: flex; flex-wrap: wrap; gap: .4rem; }
.rc-warns span { padding: .25rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #ffcf6b; background: rgba(255, 207, 107, .1); border: 1px solid rgba(255, 207, 107, .4); }
.rc-classes { display: flex; flex-wrap: wrap; gap: .35rem; }
.rc-class { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem .2rem .3rem; border-radius: 999px; font-size: .76rem; background: rgba(0, 0, 0, .3); border: 1px solid color-mix(in srgb, var(--cc, #fff) 50%, transparent); }
.rc-class img { border-radius: 5px; }
.rc-class b { color: var(--cc, var(--ink)); font-family: var(--display); }
.rc-class em { font-style: normal; color: var(--muted); font-size: .7rem; }
.rc-buffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .35rem; }
.rc-buff { display: flex; align-items: flex-start; gap: .5rem; padding: .4rem .55rem; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.rc-buff-ico { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: .72rem; font-weight: 900; }
.rc-buff.is-ok .rc-buff-ico { color: #062a17; background: #5be39a; }
.rc-buff.is-miss { border-color: rgba(255, 138, 138, .28); }
.rc-buff.is-miss .rc-buff-ico { color: #2c0707; background: #ff8a8a; }
.rc-buff.is-key.is-miss { background: rgba(255, 90, 90, .1); border-color: rgba(255, 138, 138, .6); }
.rc-buff-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rc-buff-txt b { font-size: .78rem; }
.rc-buff-txt small { font-size: .7rem; color: var(--muted); overflow-wrap: anywhere; }
.rc-miss { color: #ff8a8a; font-weight: 700; }
/* selector de día de la composición */
.rc-days { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; align-items: center; }
.rc-days > span { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: .2rem; }
.rc-day-btn { padding: .3rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 700; cursor: pointer; color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.rc-day-btn:hover { color: var(--ink); }
.rc-day-btn.is-on { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
.rc-card { padding: .8rem .9rem 1rem; border-radius: 20px; margin-bottom: .8rem; background: linear-gradient(165deg, rgba(var(--accent-rgb), .08), transparent 50%), rgba(var(--bg-rgb), .6); border: 1px solid rgba(var(--accent-rgb), .28); }
.rc-card > h3 { margin: 0 0 .6rem; font-family: var(--display); font-size: 1rem; }

/* Composición: título, días y barra de roles en UNA línea (menos espacio) */
.rc-lead { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.rc-title { font-family: var(--display); font-size: .95rem; font-weight: 700; margin-right: .3rem; white-space: nowrap; }
.rc-top { gap: .5rem .9rem; }
.rc-bar { flex: 1 1 240px; max-width: 460px; }
.rc-card { padding: .65rem .8rem .8rem; }
.rc-card .rc { gap: .55rem; }
.rc-total b { font-size: 1.6rem; }

/* Composición: tanques / sanadores / DPS como tres chips completos pegados a la esquina superior derecha */
.rc-top { flex-wrap: wrap; align-items: center; }
.rc-bar { order: 3; margin-left: auto; flex: none; max-width: none; gap: .35rem; }
.rc-bar .rc-role { flex: none !important; padding: .32rem .7rem; gap: .5rem; }
.rc-meta { order: 2; }
.rc-empty { white-space: nowrap; }
.rc-top .rc-warns { order: 2; }


/* Jefe de un registro manual (Forever): fila fija, sin desplegable de pulls */
.raid-report-boss--static { border-radius: 14px; }
.raid-report-boss-static { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; }
.raid-report-boss-static .raid-report-boss-name { flex: 1; }


/* =============================================================
   99z30. Core público (core.html), tira de próxima raid, reclutamiento, Mi Perfil: historial / insignias / equipo
   ============================================================= */
.core-links { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin: .5rem 0 0; font-size: .76rem; font-weight: 700; }
.core-links a { color: var(--accent); text-decoration: none; }
.core-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

.acc-next { display: flex; align-items: center; gap: .7rem; margin: 0 0 .6rem; padding: .55rem .75rem; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .14), rgba(0, 0, 0, .25)); border: 1px solid rgba(var(--accent-rgb), .3); }
.acc-next-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 0, 0, .3); font-size: 1.05rem; }
.acc-next-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.acc-next-txt small { font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.acc-next-txt b { font-size: .86rem; }
.acc-next-when { margin-left: auto; font-family: var(--display); font-size: .86rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.acc-next-st { flex: none; font-style: normal; font-size: .7rem; font-weight: 800; padding: .15rem .55rem; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.acc-next-st.is-attend { color: #5be39a; } .acc-next-st.is-late { color: #ffcf6b; } .acc-next-st.is-absent { color: #ff8a8a; }

.recruit-live { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; margin: .6rem 0 0; padding: .45rem .85rem; border-radius: 14px; background: rgba(91, 227, 154, .08); border: 1px solid rgba(91, 227, 154, .35); }
.recruit-live[hidden] { display: none; }
.recruit-live b { font-size: .86rem; color: #5be39a; }
.recruit-live small { font-size: .76rem; color: var(--muted); }
.rl-dot { width: 9px; height: 9px; border-radius: 50%; background: #5be39a; box-shadow: 0 0 0 0 rgba(91, 227, 154, .6); animation: rl-pulse 2s infinite; }
@keyframes rl-pulse { 0% { box-shadow: 0 0 0 0 rgba(91, 227, 154, .55); } 70% { box-shadow: 0 0 0 10px rgba(91, 227, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 227, 154, 0); } }
@media (prefers-reduced-motion: reduce) { .rl-dot { animation: none; } }

/* Mi Perfil: acciones de próximas raids, historial, insignias, equipo mejorable */
.md-up-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.md-chip-link { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; text-decoration: none; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: background .15s ease, border-color .15s ease; }
.md-chip-link:hover { background: rgba(var(--accent-rgb), .18); border-color: rgba(var(--accent-rgb), .55); }
.md-hist-row + .md-hist-row { margin-top: .7rem; }
.md-hist-top { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.md-hist-top small { color: var(--muted); font-size: .72rem; }
.md-streak { margin-left: auto; font-size: .74rem; font-weight: 800; color: #ffb35a; }
.md-nights { display: flex; flex-wrap: wrap; gap: .25rem; }
.md-night { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-style: normal; font-size: .72rem; font-weight: 900; cursor: default; }
.md-night.is-yes { color: #062a17; background: #5be39a; }
.md-night.is-no { color: #2c0707; background: #ff8a8a; }
.md-night.is-excused { color: var(--ink); background: rgba(255, 255, 255, .14); }
.md-night.is-late { color: #2c1c00; background: #ffcf6b; }
.md-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .7rem 0 0; font-size: .7rem; color: var(--muted); }
.md-legend .md-night { width: 18px; height: 18px; font-size: .6rem; }
.md-badges-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.md-award { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px; cursor: default; background: linear-gradient(135deg, rgba(255, 207, 107, .16), rgba(var(--accent-rgb), .08)); border: 1px solid rgba(255, 207, 107, .4); animation: md-award-in .5s cubic-bezier(.23, 1, .32, 1) both; }
.md-award i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .35); font-size: 1rem; }
.md-award b { font-size: .8rem; }
.md-award small { font-size: .68rem; color: var(--muted); }
@keyframes md-award-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.md-upgrade .md-up-ok { margin: 0; color: #5be39a; font-weight: 700; }
.md-upg-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.md-upg-list li { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem; border-radius: 12px; font-size: .78rem; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.md-upg-list li b { flex: none; min-width: 6rem; }
.md-upg-list li span { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-upg-list li em { font-style: normal; font-weight: 800; font-family: var(--display); }
.md-upg-list.is-warn li { border-color: rgba(255, 138, 138, .4); background: rgba(255, 90, 90, .07); }

/* core.html */
.cp-page { gap: 1rem; }
.cp-hero { --cc: var(--accent); position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.6rem; align-items: center; padding: 1.6rem 1.8rem; border-radius: 28px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 26%, transparent), transparent 60%), radial-gradient(70% 140% at 100% 0%, color-mix(in srgb, var(--cc) 22%, transparent), transparent 70%), rgba(var(--bg-rgb), .9);
  border: 1px solid color-mix(in srgb, var(--cc) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -40px var(--cc); }
.cp-hero::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cc), transparent); box-shadow: 0 0 18px 1px var(--cc); }
.cp-exp { display: inline-block; padding: .15rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ec); background: color-mix(in srgb, var(--ec) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ec) 55%, transparent); }
.cp-hero h1 { margin: .5rem 0 .3rem; font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.05; color: var(--cc); }
.cp-hero p { margin: 0; color: var(--muted); }
.cp-kpis { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: .5rem; }
.cp-kpis div { display: flex; flex-direction: column; padding: .55rem .8rem; border-radius: 16px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .09); }
.cp-kpis b { font-family: var(--display); font-size: 1.35rem; line-height: 1.1; }
.cp-kpis span { font-size: .68rem; color: var(--muted); }
.cp-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .09); }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
.cp-main, .cp-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cp-role { padding: .9rem 1rem 1rem; border-radius: 22px; background: linear-gradient(165deg, rgba(255, 255, 255, .05), transparent 50%), rgba(var(--bg-rgb), .85); border: 1px solid rgba(255, 255, 255, .09); }
.cp-role h3 { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .7rem; font-family: var(--display); font-size: 1.05rem; }
.cp-role h3 small { color: var(--muted); font-size: .8rem; }
.cp-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .45rem; }
.cp-person { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); transition: transform .16s cubic-bezier(.23, 1, .32, 1), background .15s ease; }
.cp-person:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--cc) 14%, rgba(0, 0, 0, .3)); }
.cp-person img { border-radius: 9px; flex: none; }
.cp-person span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cp-person b { color: var(--cc); font-size: .88rem; }
.cp-person small { font-size: .7rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-person em { margin-left: auto; font-style: normal; font-family: var(--display); font-weight: 800; font-size: .85rem; }
.cp-raid { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border-radius: 14px; margin-bottom: .35rem; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.cp-raid.is-today { border-color: rgba(var(--accent-rgb), .6); background: rgba(var(--accent-rgb), .12); }
.cp-raid b { font-family: var(--display); min-width: 4.2rem; }
.cp-raid span { color: var(--muted); font-size: .8rem; }
.cp-raid i { margin-left: auto; font-style: normal; font-size: .62rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; color: var(--accent-ink); background: var(--accent); }
.cp-raid i.cp-live { background: #ff6e6e; color: #fff; }
.cp-report { padding: .6rem .7rem; border-radius: 14px; margin-bottom: .45rem; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.cp-report header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.cp-report header b { font-family: var(--display); }
.cp-report header span { font-size: .84rem; }
.cp-report header small { margin-left: auto; color: var(--muted); font-size: .72rem; }
.cp-bosses { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.cp-bosses span { padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid; }
.cp-bosses span.is-kill { color: #5be39a; background: rgba(91, 227, 154, .1); border-color: rgba(91, 227, 154, .38); }
.cp-bosses span.is-wipe { color: #ff9a9a; background: rgba(255, 110, 110, .08); border-color: rgba(255, 138, 138, .35); }
.cp-bosses em { font-style: normal; opacity: .7; }
.cp-empty { margin: 0; color: var(--muted); font-size: .84rem; }
@media (max-width: 900px) { .cp-hero { grid-template-columns: 1fr; } .cp-grid { grid-template-columns: 1fr; } }

/* Tarjeta de core (confirmación de asistencia) en Mi Perfil: la regla de secciones le quitaba el relleno vertical */
.md-page .acc-core { padding: .95rem 1.05rem 1rem; gap: .65rem; }
.md-page .acc-core-head { align-items: center; padding-bottom: .1rem; }
.md-page .acc-core-head .rv-chars { margin-right: 0; }
.md-page .acc-core-head .rv-char { padding: .28rem .7rem .28rem .35rem; }


/* Composición en Mi Perfil: separada de lo de arriba, con aire, y con tu personaje siempre visible */
.md-comp { margin-top: 1.1rem; }
.md-comp .rc-card { padding: 1rem 1.15rem 1.2rem; border-radius: 22px; margin-bottom: 0; }
.md-comp .rc-card + .rc-card { margin-top: .9rem; }
.md-comp .rc { gap: .8rem; }
.rc-mine { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.rc-mine-c { display: inline-flex; align-items: center; gap: .4rem; padding: .18rem .65rem .18rem .3rem; border-radius: 12px; white-space: nowrap;
  background: color-mix(in srgb, var(--cc, #fff) 14%, rgba(0, 0, 0, .3)); border: 1px solid color-mix(in srgb, var(--cc, #fff) 65%, transparent); }
.rc-mine-c img { border-radius: 6px; }
.rc-mine-c b { font-size: .82rem; color: var(--cc, var(--ink)); }
.rc-mine-c small { font-size: .68rem; color: var(--muted); padding-left: .4rem; border-left: 1px solid rgba(255, 255, 255, .18); }
.rc-me { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }


/* Chip del personaje: arriba nombre + spec, abajo «expansión · core» */
.rv-char { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; column-gap: .55rem; row-gap: 0; padding: .3rem .8rem .3rem .35rem; white-space: nowrap; }
.rv-char > img { grid-row: 1 / 3; border-radius: 9px; }
.rv-char-top { display: flex; align-items: baseline; gap: .45rem; line-height: 1.2; }
.rv-char-top b { font-size: .86rem; color: var(--cc, var(--ink)); }
.rv-char-top small { font-size: .7rem; color: var(--muted); padding-left: .45rem; border-left: 1px solid rgba(255, 255, 255, .18); }
.rv-char-where { font-size: .68rem; color: var(--muted); line-height: 1.2; }
.rc-mine-c { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .5rem; align-items: center; padding: .25rem .75rem .25rem .3rem; }
.rc-mine-c > img { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 8px; }
.rc-mine-top { display: flex; align-items: baseline; gap: .45rem; line-height: 1.2; }
.rc-mine-where { font-size: .68rem; color: var(--muted); line-height: 1.2; }
.rc-mine-c small { border-left: 1px solid rgba(255, 255, 255, .18); }


/* «Composición» como ayuda al pasar el mouse por «Expansión · Core» del chip (sin repetir el nombre del core) */
.rc-mine-where { position: relative; cursor: help; outline: none; }
.rc-tip { position: absolute; z-index: 60; left: 0; top: calc(100% + 8px); width: 270px; padding: .6rem .75rem; border-radius: 14px; white-space: normal; text-align: left;
  font-size: .76rem; font-weight: 500; line-height: 1.45; color: var(--ink); background: rgb(var(--bg-rgb)); border: 1px solid rgba(var(--accent-rgb), .5);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .95); opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s ease, transform .18s cubic-bezier(.23, 1, .32, 1), visibility 0s .18s; }
.rc-tip b { font-family: var(--display); }
.rc-mine-where:hover .rc-tip, .rc-mine-where:focus .rc-tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }


/* Ficha de personaje en Mi Perfil: equipo + «equipo mejorable» + asistencia en la columna izquierda; stats y logs a la derecha (columnas parejas) */
.md-detail-gear { display: flex; flex-direction: column; gap: .9rem; }
.md-char-att .md-card-title small { display: inline-flex; align-items: center; gap: .6rem; }
.md-att-pct { font-family: var(--display); font-weight: 800; font-size: .95rem; color: #5be39a; }
.md-att-line { margin: .6rem 0 0; font-size: .76rem; color: var(--muted); }


/* Ficha: dos columnas que se reparten las tarjetas por su alto (sin huecos) */
.md-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem 1.2rem; align-items: start; }
.md-col { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.md-pool { display: none; }
.md-dcard { min-width: 0; }
.md-dcard > .md-card, .md-dcard > section { margin: 0; }
@media (max-width: 980px) { .md-detail { grid-template-columns: minmax(0, 1fr); } .md-col-b { display: none; } }
/* La última tarjeta de la columna más corta se estira: ambas columnas terminan a la misma altura */
.md-detail { align-items: stretch; }
.md-col > .md-dcard:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.md-col > .md-dcard:last-child > * { flex: 1 1 auto; }
@media (max-width: 980px) { .md-col > .md-dcard:last-child { flex: 0 0 auto; } }
.md-detail.is-measuring { align-items: start; }
.md-detail.is-measuring .md-col > .md-dcard { flex: none !important; display: block !important; }
.md-detail.is-measuring .md-col > .md-dcard > * { flex: none !important; }
.md-dcard > .md-detail-progress { margin: 0; }
.md-dcard > .md-detail-progress .char-progress-tiers { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Mi Perfil sin barra superior: el logo y «Volver a la web» viven dentro de la ficha y todo sube */
.md-page { padding-top: .9rem; }
.md-hero { padding: .85rem 1.1rem 1rem !important; gap: .7rem 1.4rem !important; }
.md-hero-id { gap: .9rem !important; align-items: center !important; }
.md-hero h1 { margin: 0 0 .4rem !important; }
.md-actions { padding-top: .7rem !important; margin-top: 0 !important; gap: .45rem !important; align-items: center; }
.md-brand { display: inline-flex; align-items: center; gap: .5rem; margin-right: .6rem; padding-right: .9rem; border-right: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--display); font-weight: 800; letter-spacing: .08em; font-size: .95rem; color: var(--ink); text-decoration: none; }
.md-brand img { display: block; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .45)); }
.md-brand b { color: var(--accent); font-weight: 800; }
@media (max-width: 640px) { .md-brand { border-right: 0; margin-right: 0; padding-right: 0; width: 100%; } }

/* Logo de Valyrians junto a las insignias: centrado y con un latido suave */
.md-badges-row { justify-content: center; align-items: center; }
.md-pulse-logo { display: inline-grid; place-items: center; margin-inline: .4rem; padding: .15rem; border-radius: 50%; }
.md-pulse-logo img { display: block; width: 54px; height: auto; transform-origin: 50% 55%;
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), .55)); animation: mdHeartbeat 2.4s ease-in-out infinite; }
@keyframes mdHeartbeat {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .4)); }
  14% { transform: scale(1.1); filter: drop-shadow(0 0 20px rgba(var(--accent-rgb), .85)); }
  28% { transform: scale(1.02); }
  42% { transform: scale(1.07); filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), .7)); }
  70% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .md-pulse-logo img { animation: none; } }

/* Logo latiendo junto a «Volver a la web»: decorativo (sin clic) y se ajusta al ancho de la ventana */
.md-badges-row { justify-content: flex-start; }
.md-actions .md-pulse-logo { display: inline-grid; place-items: center; margin: 0 .35rem; padding: 0; pointer-events: none; cursor: default; }
.md-actions .md-pulse-logo img { width: auto; height: clamp(30px, 3.4vw, 50px); max-width: 100%; }

/* Indicadores + insignias en una sola fila que se reparte el ancho */
.md-kpis { grid-template-columns: repeat(auto-fit, minmax(clamp(104px, 11vw, 150px), 1fr)) !important; }
.md-kpi { min-width: 0; padding: .65rem .75rem; }
.md-kpi strong { font-size: clamp(1.1rem, 1.7vw, 1.55rem); }
.md-kpi--award { --k: #ffcf6b; background: linear-gradient(135deg, rgba(255, 207, 107, .14), rgba(var(--accent-rgb), .06)), rgba(var(--bg-rgb), .85); border-color: rgba(255, 207, 107, .35); border-top-color: #ffcf6b; }
.md-kpi--award strong { display: flex; align-items: center; gap: .4rem; font-family: var(--sans, inherit); font-size: clamp(.82rem, 1.05vw, .98rem); font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-kpi--award strong i { font-style: normal; font-size: 1.15rem; flex: none; }

/* Fila flexible: cada indicador crece para llenar su fila, sin huecos ni textos cortados */
.md-kpis { display: flex !important; flex-wrap: wrap; gap: .6rem; }
.md-kpi { flex: 1 1 clamp(112px, 11vw, 150px); }
.md-kpi--award { flex: 1.35 1 170px; }
.md-kpi--award strong { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
@media (max-width: 560px) { .md-kpi { flex-basis: calc(50% - .6rem); } .md-kpi--award { flex-basis: 100%; } }

/* Lista de personajes en vertical, a la derecha de la ficha */
.md-chars-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 17vw, 240px); gap: 1rem; align-items: start; }
.md-chars-main { min-width: 0; }
.md-chars-side { position: sticky; top: 1rem; }
.md-chars-side .md-chars { flex-direction: column; flex-wrap: nowrap; gap: .45rem; margin: 0; max-height: calc(100vh - 2rem); overflow-y: auto; padding-right: .15rem; }
.md-chars-side .md-char { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; padding: .5rem .6rem; }
.md-chars-side .md-char span { min-width: 0; }
.md-chars-side .md-char b, .md-chars-side .md-char small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-chars-side .md-char.is-on { transform: translateX(-4px); }
@media (max-width: 980px) {
  .md-chars-layout { grid-template-columns: minmax(0, 1fr); }
  .md-chars-side { position: static; order: -1; }
  .md-chars-side .md-chars { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .md-chars-side .md-char { width: auto; display: inline-flex; }
  .md-chars-side .md-char.is-on { transform: none; }
}

/* «Mis personajes» como encabezado de la lista (ya no hay barra de título aparte) */
.md-chars-title { margin: 0 0 .55rem; font-family: var(--display); font-size: 1rem; letter-spacing: .02em; color: var(--ink); }
.md-card--chars { padding-top: 1rem; }
.md-chars-side { top: 1rem; }

/* Equipo (paperdoll): iconos y letras proporcionales al ancho de la ficha, para que no se vea estirado ni cortado */
.pd { grid-template-columns: minmax(0, 1fr) clamp(140px, 27cqw, 270px) minmax(0, 1fr); gap: .3rem clamp(.35rem, 1.1cqw, .7rem); }
.pd-col { gap: clamp(.22rem, .7cqw, .4rem); }
.pd-item { gap: clamp(.35rem, 1cqw, .55rem); padding: clamp(.15rem, .5cqw, .25rem) clamp(.25rem, .7cqw, .4rem); border-radius: 11px; }
.pd-ico { width: clamp(26px, 4.4cqw, 38px); height: clamp(26px, 4.4cqw, 38px); border-radius: 8px; border-width: 1.5px; }
.pd-txt { gap: .05rem; }
.pd-txt b { font-size: clamp(.64rem, .5rem + .55cqw, .78rem); line-height: 1.15; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.pd-txt small { font-size: clamp(.58rem, .46rem + .45cqw, .7rem); gap: .05rem .35rem; line-height: 1.15; }
.pd-weapons .pd-item { min-width: min(100%, 230px); max-width: 320px; }
@container pd (max-width: 470px) {
  .pd-ico { width: clamp(26px, 6.5cqw, 34px); height: clamp(26px, 6.5cqw, 34px); }
}

/* La lista de personajes se queda a la derecha en casi cualquier ancho (solo pasa arriba en pantallas de celular) */
.md-chars-layout { grid-template-columns: minmax(0, 1fr) clamp(165px, 16vw, 230px) !important; }
@media (max-width: 980px) and (min-width: 701px) {
  .md-chars-layout { grid-template-columns: minmax(0, 1fr) 168px !important; }
  .md-chars-side { position: sticky !important; order: 0 !important; top: 1rem; }
  .md-chars-side .md-chars { flex-direction: column !important; flex-wrap: nowrap !important; max-height: calc(100vh - 2rem) !important; }
  .md-chars-side .md-char { width: 100% !important; display: grid !important; }
  .md-chars-side .md-char.is-on { transform: translateX(-4px) !important; }
}
@media (max-width: 700px) { .md-chars-layout { grid-template-columns: minmax(0, 1fr) !important; } }

/* El equipo SIEMPRE queda a los lados del personaje (ya no se apila debajo al reducir la ventana):
   en espacios angostos todo se hace más pequeño y, si ya no cabe el texto, quedan solo los iconos (el detalle sale al pasar el cursor). */
.pd { grid-template-columns: minmax(0, 1fr) clamp(104px, 26cqw, 270px) minmax(0, 1fr) !important; }
.pd-figure { grid-column: auto !important; grid-row: auto !important; width: auto !important; justify-self: stretch !important; height: clamp(300px, 52cqw, 470px) !important; }
.pd-col--r .pd-item { flex-direction: row-reverse !important; text-align: right !important; }
.pd-col--r .pd-txt small { justify-content: flex-end !important; }
.pd-weapons { grid-column: 1 / -1 !important; }
@container pd (max-width: 470px) {
  .pd { gap: .25rem .3rem !important; }
  .pd-item { padding: .15rem .25rem; gap: .3rem; }
  .pd-ico { width: 26px !important; height: 26px !important; }
  .pd-txt b { font-size: .6rem; -webkit-line-clamp: 2; }
  .pd-txt small { font-size: .55rem; }
}
@container pd (max-width: 340px) {
  .pd-txt { display: none; }
  .pd-item { justify-content: center; padding: .2rem; }
  .pd-col--r .pd-item { flex-direction: row !important; }
}

/* ===== Mi Perfil: anuncio, estaré fuera, calendario, encuestas, notas por jefe, evolución ===== */
.md-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 20px); z-index: 900; padding: .65rem 1.1rem; border-radius: 14px; font-weight: 700; font-size: .88rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .3), rgba(var(--bg-rgb), .96)); border: 1px solid rgba(var(--accent-rgb), .55); color: var(--ink);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .85); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: min(92vw, 420px); text-align: center; }
.md-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.md-announce { display: flex; align-items: center; gap: .8rem; padding: .7rem .95rem; border-radius: 16px; border: 1px solid rgba(var(--accent-rgb), .5);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .2), rgba(var(--bg-rgb), .85)); }
.md-announce.is-warn { border-color: rgba(255, 184, 77, .6); background: linear-gradient(135deg, rgba(255, 184, 77, .2), rgba(var(--bg-rgb), .85)); }
.md-announce.is-good { border-color: rgba(91, 227, 160, .6); background: linear-gradient(135deg, rgba(91, 227, 160, .18), rgba(var(--bg-rgb), .85)); }
.md-announce p { margin: 0; flex: 1; font-size: .92rem; font-weight: 600; line-height: 1.4; }
.md-announce-ico { font-size: 1.3rem; }
.md-announce-x { border: 0; background: rgba(255, 255, 255, .08); color: var(--muted); width: 28px; height: 28px; border-radius: 9px; cursor: pointer; flex: none; }
.md-announce-x:hover { color: var(--ink); }
@media (max-width: 640px) { .md-announce { flex-wrap: wrap; } .md-announce p { flex-basis: 70%; } }

.md-away-list { list-style: none; margin: 0 0 .7rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.md-away-list li { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.md-away-list li > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.md-away-list b { font-size: .86rem; }
.md-away-list small { color: var(--muted); font-size: .74rem; overflow-wrap: anywhere; }
.md-x { width: 28px; height: 28px; border-radius: 9px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: var(--muted); flex: none; }
.md-x:hover { color: #ff9a9a; border-color: rgba(255, 130, 130, .5); }
.md-away-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.md-away-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: var(--muted); min-width: 0; }
.md-away-form input { width: 100%; min-width: 0; padding: .5rem .6rem; border-radius: 10px; font: inherit; font-size: .85rem; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.md-away-form input:focus { outline: none; border-color: var(--accent); }
.md-away-why, .md-away-form button { grid-column: 1 / -1; }

.md-cal-help { margin: 0 0 .6rem; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.md-cal-link input { width: 100%; padding: .5rem .6rem; border-radius: 10px; font: inherit; font-size: .74rem; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); margin-bottom: .5rem; }
.md-cal-btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }

.md-poll-opts { display: flex; flex-direction: column; gap: .4rem; }
.md-poll-opt { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 12px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 700; text-align: left; color: var(--ink);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); transition: border-color .15s, background .15s; }
.md-poll-opt span { width: 1rem; color: var(--accent); }
.md-poll-opt:hover { border-color: var(--accent); }
.md-poll-opt.is-on { border-color: var(--accent); background: rgba(var(--accent-rgb), .18); }
.md-poll-note { margin: .5rem 0 0; font-size: .76rem; color: var(--muted); }

.md-bn-group { margin-top: .5rem; }
.md-bn-group h4 small { color: var(--muted); font-weight: 500; margin-left: .3rem; }
.md-bn { margin-top: .35rem; border-radius: 12px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); }
.md-bn summary { cursor: pointer; padding: .5rem .7rem; display: flex; gap: .6rem; align-items: baseline; list-style: none; }
.md-bn summary::-webkit-details-marker { display: none; }
.md-bn summary b { font-size: .88rem; }
.md-bn summary em { font-style: normal; font-size: .7rem; color: var(--accent); }
.md-bn[open] summary { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.md-bn p { margin: 0; padding: .6rem .75rem; font-size: .84rem; line-height: 1.55; white-space: pre-wrap; color: var(--ink); }
.md-bn .md-btn { margin: 0 .75rem .7rem; display: inline-flex; }

.md-evo-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .5rem; }
.md-evo-chip { display: flex; flex-direction: column; padding: .45rem .7rem; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.md-evo-chip small { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.md-evo-chip b { font-family: var(--display); font-size: 1.35rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.md-evo-chip em { font-style: normal; font-size: .72rem; font-weight: 700; }
.md-evo-chip em.is-up { color: #5be3a0; } .md-evo-chip em.is-down { color: #ff8a8a; }
.md-evo-svg { width: 100%; height: auto; display: block; }
.md-evo-svg .axis { stroke: rgba(255, 255, 255, .15); stroke-width: 1; }
.md-evo-svg .ln { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.md-evo-svg .ln.ilvl { stroke: var(--accent); }
.md-evo-svg .ln.parse { stroke: #ffcf6b; stroke-dasharray: 5 4; }
.md-evo-svg .dt.ilvl { fill: var(--accent); } .md-evo-svg .dt.parse { fill: #ffcf6b; }
.md-evo-svg .lbl { fill: var(--muted); font-size: 9px; }
.md-evo-svg .lbl.ilvl { fill: var(--accent); font-weight: 700; }
.md-evo-legend { display: flex; gap: 1rem; margin: .2rem 0 0; font-size: .74rem; color: var(--muted); }
.md-evo-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; background: var(--accent); }
.md-evo-legend i.parse { background: #ffcf6b; }

/* ===== Web principal: anuncio fijado y «Qué buscamos ahora» ===== */
.site-announce { position: fixed; z-index: 480; top: 5.2rem; left: 50%; transform: translateX(-50%); width: min(760px, calc(100vw - 2rem));
  display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: 16px; border: 1px solid rgba(var(--accent-rgb), .5);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .22), rgba(var(--bg-rgb), .92)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); animation: saIn .35s cubic-bezier(.23, 1, .32, 1); }
.site-announce[hidden] { display: none; }
.site-announce.is-warn { border-color: rgba(255, 184, 77, .65); background: linear-gradient(135deg, rgba(255, 184, 77, .24), rgba(var(--bg-rgb), .92)); }
.site-announce.is-good { border-color: rgba(91, 227, 160, .65); background: linear-gradient(135deg, rgba(91, 227, 160, .2), rgba(var(--bg-rgb), .92)); }
.site-announce p { margin: 0; flex: 1; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.sa-ico { font-size: 1.15rem; }
.sa-link { padding: .35rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 800; white-space: nowrap; color: var(--ink); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); text-decoration: none; }
.sa-link:hover { border-color: var(--accent); }
.sa-x { width: 28px; height: 28px; border-radius: 9px; border: 0; cursor: pointer; background: rgba(255, 255, 255, .08); color: var(--muted); flex: none; }
.sa-x:hover { color: var(--ink); }
@keyframes saIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 560px) { .site-announce { top: 4.6rem; flex-wrap: wrap; } .site-announce p { flex-basis: 70%; } }

.needs-card { margin: 1rem 0; padding: .9rem 1rem 1rem; border-radius: 20px; background: linear-gradient(160deg, rgba(var(--accent-rgb), .12), transparent 60%), rgba(255, 255, 255, .04); border: 1px solid rgba(var(--accent-rgb), .35); }
.needs-card[hidden] { display: none; }
.needs-title { margin: 0 0 .6rem; font-family: "Sora", var(--display); font-size: 1.05rem; }
.needs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.needs-list li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .8rem; padding: .5rem .7rem; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .08); }
.needs-core { display: flex; flex-direction: column; font-weight: 800; font-size: .92rem; }
.needs-core small { font-weight: 500; font-size: .72rem; color: var(--muted); }
.needs-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.need { padding: .22rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 800; border: 1px solid transparent; }
.need--tank { color: #8ec5ff; background: rgba(90, 160, 255, .15); border-color: rgba(90, 160, 255, .45); }
.need--healer { color: #7ff0b4; background: rgba(70, 220, 150, .15); border-color: rgba(70, 220, 150, .45); }
.need--dps { color: #ff9a9a; background: rgba(255, 110, 110, .14); border-color: rgba(255, 110, 110, .45); }
.needs-note, .needs-ok { margin: .6rem 0 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }

/* «Mis raids y asistencia»: las tarjetas se reparten entre dos columnas y la última de la columna corta se estira (sin huecos) */
.md-grid--bal { align-items: stretch; }
.md-grid--bal.is-measuring { align-items: start; }
.md-grid--bal .md-pool { display: none; }
.md-grid--bal .md-dcard { display: flex; flex-direction: column; min-width: 0; }
.md-grid--bal .md-dcard > * { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.md-grid--bal .md-dcard > * > .md-card, .md-grid--bal .md-dcard > .md-card { flex: 1 1 auto; }
.md-grid--bal .md-dcard:has(> [data-md-polls]:empty), .md-grid--bal .md-dcard:has(> [data-md-away]:empty), .md-grid--bal .md-dcard:has(> [data-md-notes]:empty) { display: none; }
.md-grid--bal.is-measuring .md-col > .md-dcard { flex: none !important; }
.md-grid--bal.is-measuring .md-dcard > * { flex: none !important; }
@media (max-width: 980px) { .md-grid--bal .md-col-b { display: none; } .md-grid--bal .md-col > .md-dcard:last-child { flex: 0 0 auto; } }
.md-away .md-card-title { flex-wrap: wrap; row-gap: .2rem; }
.md-away .md-card-title small { flex: 1 1 100%; text-align: left; }

/* ===== Progreso de raid con recuadros por jefe + «cómo vas hoy» + rasgos de clase y raza ===== */
.md-pips { --pc: var(--accent); display: flex; gap: 3px; min-width: 0; align-items: stretch; height: 14px; }
.md-pips i { flex: 1 1 0; min-width: 4px; border-radius: 4px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .06); transition: background .3s, box-shadow .3s; }
.md-pips i.on { background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 85%, #fff), var(--pc)); border-color: color-mix(in srgb, var(--pc) 70%, #000); box-shadow: 0 0 8px -1px var(--pc); }
.md-pips[data-diff^="mít"], .md-pips[data-diff^="mit"] { --pc: #ff8c1a; }
.md-pips[data-diff^="heroic"] { --pc: #b66bff; }
.md-pips[data-diff^="normal"] { --pc: #3ddc97; }
.md-pips[data-diff*="buscador"], .md-pips[data-diff*="lfr"] { --pc: #5aa8ff; }
.md-detail-progress .char-progress-row { grid-template-columns: 74px minmax(0, 1fr) 38px; }
.md-detail-progress .char-progress-count { font-variant-numeric: tabular-nums; }
.md-detail-progress .char-progress-row:has(.md-pips i.on:last-child) .char-progress-count { color: #ffd166; }

.md-evo-now { display: flex; flex-direction: column; gap: .9rem; }
.md-gauge-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; margin-bottom: .35rem; }
.md-gauge-head span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.md-gauge-head b { font-family: var(--display); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.md-gauge-head em { font-style: normal; font-size: .74rem; font-weight: 700; margin-left: auto; }
.md-gauge-head em.is-up { color: #5be3a0; } .md-gauge-head em.is-down { color: #ff8a8a; }
.md-gauge-track { position: relative; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: visible; }
.md-gauge-track > i { display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, #000), var(--accent)); box-shadow: 0 0 14px -2px var(--accent); animation: mdGaugeIn 1.1s cubic-bezier(.23, 1, .32, 1) both; }
.md-gauge-track > s { position: absolute; top: -4px; bottom: -4px; width: 2px; background: rgba(255, 255, 255, .75); text-decoration: none; border-radius: 2px; }
.md-gauge-track > s small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; font-size: .62rem; color: var(--muted); white-space: nowrap; }
/* lo que subió (verde) o bajó (rojo) en 30 días: va detrás de la barra normal y asoma por su borde */
.md-gauge-track > i.gain { position: absolute; left: 0; top: 0; background: linear-gradient(90deg, #1f9d63, #5be3a0); box-shadow: 0 0 12px -2px #5be3a0; animation-delay: .18s; }
.md-gauge-track > i.gain.is-down { background: linear-gradient(90deg, #b3363f, #ff8a8a); box-shadow: 0 0 12px -2px #ff8a8a; }
.md-gauge-track > i:not(.gain) { position: relative; z-index: 1; }
.md-gauge-track > s { z-index: 2; }
.md-gauge-trend { font-size: .72rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.md-gauge-trend.is-up { color: #5be3a0; background: rgba(91, 227, 160, .12); }
.md-gauge-trend.is-down { color: #ff8a8a; background: rgba(255, 138, 138, .12); }
.md-evo-key { display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin: 0 .2rem 1px 0; vertical-align: middle; background: #5be3a0; }
.md-evo-key.is-down { background: #ff8a8a; margin-left: .2rem; }
.md-gauge-track--parse > i.t-grey { background: linear-gradient(90deg, #555, #9d9d9d); box-shadow: none; }
.md-gauge-track--parse > i.t-green { background: linear-gradient(90deg, #167a1b, #1eff00); }
.md-gauge-track--parse > i.t-blue { background: linear-gradient(90deg, #004a99, #0070ff); }
.md-gauge-track--parse > i.t-purple { background: linear-gradient(90deg, #6a1fb0, #a335ee); }
.md-gauge-track--parse > i.t-orange { background: linear-gradient(90deg, #b25400, #ff8000); }
.md-gauge-track--parse > i.t-gold { background: linear-gradient(90deg, #b8a000, #e5cc80); }
@keyframes mdGaugeIn { from { width: 0; } to { width: var(--w, 0%); } }
.md-journey { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: .4rem; margin-top: .6rem; }
.md-journey-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--muted); border: 2px solid rgba(255, 255, 255, .25); }
.md-journey-dot.is-now { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); animation: mdPulseDot 1.8s ease-in-out infinite; }
.md-journey-line { height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, .25), var(--accent)); background-size: 200% 100%; animation: mdLineRun 3s linear infinite; }
.md-journey-lbl { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .6rem; margin-top: .4rem; }
.md-journey-lbl span { display: flex; flex-direction: column; }
.md-journey-lbl span.is-r { text-align: right; }
.md-journey-lbl small { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.md-journey-lbl b { font-size: .86rem; }
.md-evo-hint { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }
@keyframes mdPulseDot { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); } }
@keyframes mdLineRun { from { background-position: 0 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .md-gauge-track > i, .md-journey-dot.is-now, .md-journey-line { animation: none; } }

/* Rasgos de clase y raza */
.pk { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; margin-top: 1rem; }
.pk-block { --cc: var(--accent); display: flex; flex-direction: column; gap: .6rem; padding: .85rem .9rem; border-radius: 18px; min-width: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 16%, transparent), transparent 55%), rgba(0, 0, 0, .28); border: 1px solid color-mix(in srgb, var(--cc) 35%, rgba(255, 255, 255, .08)); }
.pk-block--race { --cc: var(--void, #b79bff); }
.pk-head { display: flex; align-items: center; gap: .7rem; }
.pk-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex: none; font-size: 1.5rem;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--cc) 40%, #fff 0%), rgba(0, 0, 0, .45)); border: 1px solid color-mix(in srgb, var(--cc) 60%, transparent); box-shadow: 0 8px 18px -10px var(--cc); }
.pk-badge img { border-radius: 8px; }
.pk-head h4 { margin: 0; font-size: .98rem; line-height: 1.2; color: var(--ink); }
.pk-head h4 em { font-style: normal; font-weight: 500; color: var(--muted); }
.pk-head p { margin: .15rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem .7rem; font-size: .72rem; color: var(--muted); }
.pk-roles { display: flex; flex-wrap: wrap; gap: .3rem; }
.pk-role { padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--muted); }
.pk-role.is-me { color: var(--ink); border-color: var(--cc); background: color-mix(in srgb, var(--cc) 22%, transparent); }
.pk-raid h5 { margin: 0 0 .3rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pk-raid { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.pk-raid h5 { flex: 1 1 100%; }
.pk-chip { padding: .15rem .55rem; border-radius: 8px; font-size: .72rem; font-weight: 700; color: #7ff0b4; background: rgba(70, 220, 150, .12); border: 1px solid rgba(70, 220, 150, .35); }
.pk-chip.is-key { color: #ffd166; background: rgba(255, 209, 102, .12); border-color: rgba(255, 209, 102, .45); }
.pk-tiles { display: flex; flex-direction: column; gap: .4rem; }
.pk-tile { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 12px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07);
  transition: transform .2s cubic-bezier(.23, 1, .32, 1), border-color .2s, background .2s; }
.pk-tile:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--cc) 60%, transparent); background: rgba(255, 255, 255, .07); }
.pk-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 1.05rem; flex: none;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cc) 30%, transparent), rgba(0, 0, 0, .35)); border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent); }
.pk-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pk-txt b { font-size: .8rem; }
.pk-txt small { font-size: .72rem; color: var(--muted); }

/* Retrato (cuando aún no hay cuerpo completo): cuadrado, a su tamaño real, centrado y con marco; nunca estirado */
.pd-figure.has-avatar .pd-avatar { width: 96px; height: 96px; max-width: 70%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; image-rendering: auto;
  border-radius: 20px; border: 3px solid var(--cc); top: 44%; box-shadow: 0 0 36px -8px var(--cc), 0 16px 26px -16px rgba(0, 0, 0, .9); background: rgba(0, 0, 0, .4); }
.pd-figure.has-avatar .pd-note { bottom: 10px; padding: .35rem .6rem; border-radius: 10px; background: rgba(0, 0, 0, .35); font-size: .64rem; }
.pd-figure.has-avatar .pd-avatar { height: auto; max-height: none; }

/* «General» en la columna derecha, debajo de la lista de personajes: indicadores en vertical y compactos */
.md-chars-side { display: flex; flex-direction: column; }
.md-chars-side .md-chars { flex: none; max-height: 52vh; }
.md-chars-title--general { margin-top: 1.1rem; }
.md-chars-side .md-kpis { display: flex !important; flex-direction: column; flex-wrap: nowrap; gap: .45rem; }
.md-chars-side .md-kpi { flex: none; flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .75rem; border-top-width: 1px; border-left: 3px solid var(--k); }
.md-chars-side .md-kpi strong { font-size: 1.15rem; order: 2; }
.md-chars-side .md-kpi span { order: 1; white-space: normal; text-align: left; font-size: .76rem; }
.md-chars-side .md-kpi--award strong { order: 1; font-size: .85rem; flex: 1; }
.md-chars-side .md-kpi--award span { order: 2; }
@media (max-width: 700px) { .md-chars-side .md-kpis { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Imagen de perfil elegible (retrato de un personaje o icono de clase) */
button.md-avatar { position: relative; border: 0; cursor: pointer; padding: 0; overflow: visible; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
button.md-avatar:hover { transform: scale(1.05); }
button.md-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.md-avatar > img, .md-avatar > span { border-radius: inherit; }
.md-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.md-avatar > img.is-class { object-fit: contain; padding: 8px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--cc) 55%, #000), rgba(0, 0, 0, .75)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cc) 70%, transparent); }
.md-avatar > img.is-portrait { object-fit: cover; object-position: center; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.md-avatar-pen { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .75rem;
  color: var(--accent-ink, #06121a); background: var(--accent); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7); opacity: .95; }
@media (hover: hover) { .md-avatar-pen { opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s; } button.md-avatar:hover .md-avatar-pen, button.md-avatar:focus-visible .md-avatar-pen { opacity: 1; transform: none; } }

.md-avpick { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 1.2rem; background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), .14), rgba(2, 1, 8, .82) 70%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.md-avpick[hidden] { display: none; }
.md-avpick-card { width: min(640px, 100%); max-height: 88vh; overflow-y: auto; padding: 1.1rem 1.2rem 1.2rem; border-radius: 24px;
  background: linear-gradient(155deg, rgba(var(--accent-rgb), .16), transparent 42%), rgba(var(--bg-rgb), .95); border: 1px solid rgba(var(--accent-rgb), .45);
  box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .95); animation: mdAvIn .25s cubic-bezier(.23, 1, .32, 1); }
@keyframes mdAvIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.md-avpick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.md-avpick-head h3 { margin: 0; font-family: var(--display); font-size: 1.15rem; }
.md-avpick-head small { color: var(--muted); font-size: .8rem; }
.md-avpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; margin-bottom: .9rem; }
.md-avopt { --cc: var(--accent); display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .4rem; border-radius: 16px; cursor: pointer; font: inherit; color: var(--ink);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: transform .2s cubic-bezier(.23, 1, .32, 1), border-color .15s, background .15s; }
.md-avopt:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); }
.md-avopt:disabled { cursor: default; opacity: .7; }
.md-avopt-img { width: 64px; height: 64px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: rgba(0, 0, 0, .35); border: 2px solid color-mix(in srgb, var(--cc) 70%, transparent); box-shadow: 0 8px 18px -10px var(--cc); }
.md-avopt-img img { width: 100%; height: 100%; object-fit: cover; }
.md-avopt-img img.is-fallback { object-fit: contain; padding: 8px; opacity: .55; }
.md-avopt.is-loading .md-avopt-img { animation: mdAvPulse 1.2s ease-in-out infinite; }
@keyframes mdAvPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.md-avopt b { font-size: .78rem; text-align: center; overflow-wrap: anywhere; line-height: 1.15; }
.md-avopt small { font-size: .68rem; color: var(--muted); }
.md-avpick-foot { display: flex; justify-content: flex-end; }
body.md-avpick-open { overflow: hidden; }

/* Varias raids en el mismo recuadro «Tus próximas raids»: lista compacta, sin agrandar la ficha; la más próxima brilla suave */
.md-next--multi { display: flex; flex-direction: column; gap: .35rem; width: min(430px, 100%); padding: .7rem .8rem; }
.md-next--multi small { margin: 0 0 .1rem; }
.md-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; max-height: 9.5rem; overflow-y: auto; scrollbar-width: thin; }
.md-next-list li { --cc: var(--accent-rgb); display: grid; grid-template-columns: minmax(0, 1.2fr) auto auto auto; align-items: center; gap: .1rem .6rem; padding: .35rem .6rem; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid rgb(var(--cc)); }
.md-next-list li.is-next { background: linear-gradient(135deg, rgba(var(--cc), .2), rgba(0, 0, 0, .25)); border-color: rgba(var(--cc), .6); animation: mdNextGlow 3.2s ease-in-out infinite; }
@keyframes mdNextGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cc), 0); } 50% { box-shadow: 0 0 16px -4px rgba(var(--cc), .55); } }
.md-next--multi .mn-core { font-family: var(--display); font-weight: 700; font-size: .84rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; grid-row: auto; grid-column: auto; }
.md-next--multi .mn-when { font-size: .74rem; color: var(--muted); white-space: nowrap; grid-row: auto; grid-column: auto; }
.md-next--multi .mn-in { font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; grid-row: auto; grid-column: auto; }
.md-next-list li:not(.is-next) .mn-in { font-weight: 600; color: var(--muted); }
.md-next--multi .md-next-state { grid-column: auto; margin: 0; font-size: .8rem; width: 1.2rem; text-align: center; }
@media (max-width: 560px) { .md-next-list li { grid-template-columns: 1fr auto; } .md-next--multi .mn-in { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .md-next-list li.is-next { animation: none; } }

/* «Tus próximas raids»: una ventanita por core (versión, core, personaje, día y hora, cuenta regresiva y si asistirás) */
.md-next.md-next--cards { display: flex; flex-direction: column; gap: .45rem; width: min(560px, 100%); padding: .7rem .8rem .8rem; }
.md-next--cards > small { margin: 0; }
.md-next-cards { display: flex; gap: .55rem; overflow-x: auto; padding: .15rem .1rem .35rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.md-ncard { --cc: var(--accent-rgb); flex: 1 0 168px; max-width: 260px; scroll-snap-align: start; display: flex; flex-direction: column; gap: .22rem; padding: .55rem .7rem .6rem; border-radius: 14px; min-width: 0;
  background: linear-gradient(160deg, rgba(var(--cc), .13), rgba(0, 0, 0, .28)); border: 1px solid rgba(var(--cc), .35); }
.md-ncard.is-next { border-color: rgba(var(--cc), .75); animation: mdNextGlow 3.2s ease-in-out infinite; }
.md-ncard.is-solo { flex-basis: 260px; max-width: none; }
.md-ncard header { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.md-ncard .mnc-exp { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.md-ncard .md-next-state { grid-column: auto; margin: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: .78rem; font-style: normal;
  background: rgba(255, 255, 255, .08); }
.md-ncard .md-next-state.is-attend { background: rgba(70, 220, 150, .2); border: 1px solid rgba(70, 220, 150, .55); }
.md-ncard .md-next-state.is-late { background: rgba(255, 207, 107, .18); border: 1px solid rgba(255, 207, 107, .5); }
.md-ncard .md-next-state.is-absent { background: rgba(255, 110, 110, .18); border: 1px solid rgba(255, 110, 110, .5); }
.md-ncard h4 { margin: 0; font-family: var(--display); font-size: .98rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-ncard p { margin: 0; }
.md-ncard .mnc-who { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .74rem; min-height: 1.1rem; }
.mnc-char { display: inline-flex; align-items: center; gap: .25rem; color: var(--cc); }
.mnc-char img { border-radius: 4px; }
.mnc-char b { font-weight: 700; }
.mnc-more { color: var(--muted); }
.md-ncard .mnc-when { font-size: .76rem; color: var(--muted); }
.md-ncard .mnc-in { margin-top: .1rem; font-size: .84rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.md-ncard:not(.is-next) .mnc-in { color: var(--muted); font-weight: 700; }
.md-ncard .mnc-state { font-size: .68rem; font-weight: 700; }
.md-ncard .mnc-state.is-attend { color: #5be39a; } .md-ncard .mnc-state.is-late { color: #ffcf6b; } .md-ncard .mnc-state.is-absent { color: #ff8a8a; }
.md-ncard .md-countdown { margin-top: .2rem; }
@media (max-width: 560px) { .md-ncard { flex-basis: 78%; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .md-ncard.is-next { animation: none; } }

.md-next.md-next--cards { padding: .55rem .7rem .6rem; gap: .35rem; }
.md-ncard { gap: .15rem; padding: .45rem .6rem .5rem; }
.md-ncard .md-next-state { width: 24px; height: 24px; font-size: .85rem; }
.md-ncard .mnc-in { margin-top: .05rem; }

/* «Tus próximas raids»: ventanitas ANCHAS y bajas (una línea cada una) que se adaptan al ancho disponible */
.md-next.md-next--cards { width: min(660px, 100%); }
.md-next-cards { container-type: inline-size; container-name: ncards; display: flex; flex-direction: column; gap: .4rem; overflow-x: hidden; overflow-y: auto; max-height: 11rem; padding: .1rem .15rem .1rem 0; scroll-snap-type: none; }
.md-ncard { flex: none; max-width: none; width: 100%; display: grid; align-items: center; column-gap: .65rem; row-gap: .1rem; padding: .4rem .65rem; border-radius: 12px; min-width: 0;
  grid-template-columns: 26px auto minmax(70px, 1.1fr) minmax(0, 1.2fr) auto auto;
  grid-template-areas: "st exp core who when in"; border-left: 3px solid rgba(var(--cc), .9); }
.md-ncard header { display: contents; }
.md-ncard .md-next-state { grid-area: st; justify-self: center; }
.md-ncard .mnc-exp { grid-area: exp; white-space: nowrap; }
.md-ncard h4 { grid-area: core; font-size: .92rem; }
.md-ncard .mnc-who { grid-area: who; flex-wrap: nowrap; min-height: 0; overflow: hidden; }
.md-ncard .mnc-char { white-space: nowrap; }
.md-ncard .mnc-when { grid-area: when; white-space: nowrap; font-size: .76rem; }
.md-ncard .mnc-in, .md-ncard .md-countdown { grid-area: in; justify-self: end; margin: 0; white-space: nowrap; }
.md-ncard .md-countdown { gap: .2rem; }
.md-ncard .md-countdown i { width: 30px; height: 30px; border-radius: 8px; }
.md-ncard .md-countdown b { font-size: .82rem; }
.md-ncard .md-countdown small { display: none; }
.md-ncard.is-solo { flex-basis: auto; }
/* ancho medio: en dos líneas */
@container ncards (max-width: 560px) {
  .md-ncard { grid-template-columns: 26px auto minmax(0, 1fr) auto; grid-template-areas: "st exp core in" "st who when when"; row-gap: .15rem; }
}
/* muy angosto: personaje y horario debajo del core */
@container ncards (max-width: 330px) {
  .md-ncard { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "st core in" "st exp exp" "st who who" "st when when"; }
}

/* ancho explícito (el contenedor de consultas no aporta ancho propio) y se adapta a la ventana */
.md-next.md-next--cards { width: clamp(300px, 54vw, 680px); max-width: 100%; box-sizing: border-box; }
@media (max-width: 900px) { .md-next.md-next--cards { width: 100%; } }
.md-ncard h4 .core-txt, .md-ncard .mnc-exp .exp-txt { font-weight: 800; }

.md-next.md-next--cards { align-items: stretch; }
.md-next-cards { width: 100%; }
.md-next--cards > small { text-align: left; }

/* Colores propios: el core con el color de su core, el personaje con el de su clase y la versión con el de su expansión */
.md-next.md-next--cards .core-txt { color: var(--cc); }
.md-next.md-next--cards .exp-txt { color: var(--ec); }
.md-next.md-next--cards .mnc-char, .md-next.md-next--cards .mnc-char b { color: var(--cc); }
.md-next.md-next--cards .mnc-when { color: var(--muted); }
.md-next.md-next--cards .mnc-in { color: var(--ink); }
.md-next.md-next--cards .md-ncard:not(.is-next) .mnc-in { color: var(--muted); }

/* Una ventanita VERTICAL por raid, una al lado de la otra y bajas: el recuadro mantiene el tamaño de la ficha */
.md-next-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(158px, 1fr); gap: .5rem; max-height: none; overflow-x: auto; overflow-y: hidden; padding: .1rem .1rem .3rem; container-type: normal; }
.md-ncard, .md-ncard.is-solo { width: auto; display: flex; flex-direction: column; align-items: stretch; gap: .12rem; padding: .4rem .6rem .45rem; border-radius: 13px; border-left: 1px solid rgba(var(--cc), .4);
  grid-template-columns: none; grid-template-areas: none; }
.md-ncard header { display: flex; align-items: center; justify-content: space-between; }
.md-ncard .md-next-state { justify-self: auto; }
.md-ncard h4 { font-size: .9rem; }
.md-ncard .mnc-who { overflow: hidden; flex-wrap: nowrap; }
.md-ncard .mnc-line { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.md-ncard .mnc-when { font-size: .72rem; }
.md-ncard .mnc-in { justify-self: auto; font-size: .8rem; }
.md-ncard .md-countdown { justify-self: auto; }
.md-next.md-next--cards { padding: .5rem .65rem .55rem; gap: .3rem; }

/* Expansión y core con el mismo estilo de «píldora» (borde y fondo tenue de SU color) en toda la web */
.core-txt, .exp-txt { display: inline-block; padding: .08em .65em; border-radius: 999px; font-size: .86em; font-weight: 800; line-height: 1.4; white-space: nowrap; vertical-align: middle; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.core-txt { color: var(--cc, inherit); background: color-mix(in srgb, var(--cc, #fff) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cc, #fff) 55%, transparent); }
.exp-txt { color: var(--ec, inherit); background: color-mix(in srgb, var(--ec, #fff) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ec, #fff) 55%, transparent); }
.raid-report-core-pill .core-txt { background: none; border: 0; padding: 0; font-size: inherit; }
/* Mi Perfil: «Tus próximas raids» — expansión, core y personaje en la misma línea */
.mnc-id { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .35rem; min-width: 0; }
.md-ncard header { align-items: flex-start; }
.md-ncard .mnc-id .mnc-char { font-size: .78rem; }
.md-ncard .mnc-id .core-txt, .md-ncard .mnc-id .exp-txt { font-size: .72rem; }

/* En la lista «Mis personajes» las píldoras de versión y core pueden pasar a otra línea en vez de cortarse */
.md-chars-side .md-char small { white-space: normal; overflow: visible; text-overflow: clip; display: flex; flex-wrap: wrap; gap: .15rem .3rem; align-items: center; }
.md-char small .core-txt, .md-char small .exp-txt { font-size: .66rem; padding: .02em .5em; }

/* Con 1 o 2 cores el recuadro de «Tus próximas raids» se ajusta a su contenido (no se estira): ventanitas de ancho fijo */
.md-next.md-next--cards { width: fit-content; max-width: 100%; }
.md-next-cards { grid-auto-columns: minmax(236px, 300px); }
.md-ncard.is-solo .md-countdown i { width: 28px; height: 28px; }
@media (max-width: 900px) {
  .md-next.md-next--cards { width: 100%; }
  .md-next-cards { grid-auto-columns: minmax(236px, 1fr); }
}

/* Ficha: avatar + nombre (con ↻) + insignias y, debajo, los botones; a la derecha las próximas raids */
.md-hero-left { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.md-hero-left .md-actions { grid-column: auto; border-top: 0; padding-top: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.md-hero-left .md-viewsw { margin-left: 0; }
.md-hero-left .md-viewsw + .md-btn--danger, .md-hero-left .md-iconbtn + .md-btn--danger { margin-left: 0; }
.md-hero h1 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.md-iconbtn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; color: var(--ink); text-decoration: none; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background .15s, border-color .15s, transform .2s cubic-bezier(.23, 1, .32, 1); }
.md-iconbtn svg { width: 19px; height: 19px; }
.md-iconbtn:hover { background: rgba(var(--accent-rgb), .22); border-color: var(--accent); transform: translateY(-1px); }
.md-iconbtn--sm { width: 32px; height: 32px; border-radius: 10px; }
.md-iconbtn--sm svg { width: 16px; height: 16px; }
.md-iconbtn[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none; z-index: 30;
  padding: .3rem .6rem; border-radius: 8px; font-family: var(--sans, inherit); font-size: .74rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink);
  background: rgba(var(--bg-rgb), .97); border: 1px solid rgba(var(--accent-rgb), .5); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .8); opacity: 0; transition: opacity .15s, transform .15s; }
.md-iconbtn[data-tip]:hover::after, .md-iconbtn[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.md-sheet-head .md-pulse-logo--sheet { margin-left: auto; margin-right: .1rem; }
.md-sheet-head .md-pulse-logo--sheet img { width: auto; height: clamp(34px, 3.4vw, 46px); }
.md-sheet-head .md-sheet-stats { margin-left: 0; }
@media (max-width: 900px) { .md-hero-left .md-actions { flex-wrap: wrap; } }

/* El recuadro de la ficha recorta lo que sobresale: el texto del ↻ sale a la derecha del icono (dentro de la ficha) */
.md-iconbtn--sm[data-tip]::after { bottom: auto; left: calc(100% + 8px); top: 50%; transform: translate(-4px, -50%); }
.md-iconbtn--sm[data-tip]:hover::after, .md-iconbtn--sm[data-tip]:focus-visible::after { transform: translate(0, -50%); }

/* Botones de la ficha: compactos y sin pasarse del final de «Conectar Discord» (el ancho lo marca el bloque de arriba) */
.md-hero-left { width: fit-content; max-width: 100%; }
.md-hero-left .md-actions { width: 0; min-width: 100%; flex-wrap: nowrap; gap: .35rem; }
.md-hero-left .md-viewsw { display: inline-flex; gap: .3rem; flex: 1 1 auto; min-width: 0; }
.md-hero-left .md-btn { padding: .38rem .6rem; font-size: .76rem; white-space: nowrap; border-radius: 11px; }
.md-hero-left .md-viewsw .md-btn { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; overflow: hidden; }
.md-hero-left .md-iconbtn { width: 34px; height: 34px; border-radius: 11px; }
.md-hero-left .md-iconbtn--sm { width: 30px; height: 30px; }
.md-hero-left .md-btn--danger { flex: none; }
@media (max-width: 520px) { .md-hero-left .md-actions { width: auto; flex-wrap: wrap; } }

.md-hero-left .md-viewsw .md-btn { text-overflow: clip; overflow: visible; padding-inline: .6rem; }

/* ===== Ficha: bloque de identidad CUADRADO + menú de dos tiles bien visibles ===== */
.md-hero { grid-template-columns: auto minmax(0, 1fr) !important; align-items: stretch !important; }
.md-hero-left { width: 340px; max-width: 100%; gap: .8rem; padding: .95rem 1rem 1rem; border-radius: 22px; position: relative; overflow: hidden;
  background: linear-gradient(155deg, rgba(var(--accent-rgb), .16), rgba(var(--void-rgb, var(--accent-rgb)), .08) 60%, rgba(0, 0, 0, .25)), rgba(var(--bg-rgb), .6);
  border: 1px solid rgba(var(--accent-rgb), .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 40px -26px rgba(var(--accent-rgb), .7); }
.md-hero-left .md-hero-id { gap: .8rem; align-items: center; }
.md-hero-left .md-avatar { width: 76px; height: 76px; border-radius: 22px; }
.md-hero-left h1 { font-size: 1.35rem; }
.md-hero-left .md-badges { gap: .3rem; }

.md-menu { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; width: 100%; }
.md-menutile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .7rem .75rem .75rem; border-radius: 16px; cursor: pointer; text-align: left; min-width: 0; font: inherit; color: var(--ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border: 1px solid rgba(var(--accent-rgb), .45);
  box-shadow: 0 14px 26px -18px rgba(var(--accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .25s cubic-bezier(.23, 1, .32, 1), box-shadow .25s, background .25s, border-color .25s; }
.md-menutile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 20px 32px -16px rgba(var(--accent-rgb), .95), inset 0 1px 0 rgba(255, 255, 255, .15); }
.md-menutile:active { transform: translateY(-1px) scale(.985); }
.md-menutile .mt-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--accent);
  background: rgba(var(--accent-rgb), .18); border: 1px solid rgba(var(--accent-rgb), .5); transition: background .25s, color .25s, transform .3s cubic-bezier(.23, 1, .32, 1); }
.md-menutile .mt-ico svg { width: 21px; height: 21px; }
.md-menutile .mt-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.md-menutile .mt-txt b { font-family: var(--display); font-size: .98rem; line-height: 1.15; }
.md-menutile .mt-txt small { font-size: .7rem; color: var(--muted); line-height: 1.25; }
.md-menutile.is-on { color: var(--accent-ink, #06121a); border-color: transparent;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--void, #7c5cff)));
  box-shadow: 0 18px 34px -14px rgba(var(--accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, .45); }
.md-menutile.is-on .mt-ico { color: var(--accent-ink, #06121a); background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .45); transform: scale(1.05); }
.md-menutile.is-on .mt-txt small { color: color-mix(in srgb, var(--accent-ink, #06121a) 78%, transparent); }
.md-menutile.is-on::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 70%, var(--void, #7c5cff)); }
.md-menutile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.md-hero-left .md-actions { display: flex; gap: .5rem; width: auto; min-width: 0; margin-top: .25rem; }
.md-hero-left .md-actions .md-iconbtn { width: auto; height: 34px; padding: 0 .75rem; gap: .4rem; display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700; flex: 1 1 auto; justify-content: center; }
.md-hero-left .md-actions .md-iconbtn[data-tip]::after { display: none; }
.md-hero-left .md-actions .md-btn--danger { flex: 1 1 auto; height: 34px; justify-content: center; }
.md-hero .md-next { justify-self: end; align-self: stretch; }
@media (max-width: 900px) {
  .md-hero { grid-template-columns: 1fr !important; }
  .md-hero-left { width: 100%; }
  .md-hero .md-next { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .md-menutile, .md-menutile .mt-ico { transition: none; } }

/* «Tus próximas raids» ocupa todo el espacio que deja el bloque de identidad (sin huecos): ventanitas que se reparten el ancho */
.md-hero .md-next.md-next--cards { width: 100%; max-width: none; justify-self: stretch; align-self: stretch; justify-content: center; padding: .9rem 1.1rem 1rem; gap: .6rem; }
.md-hero .md-next--cards > small { font-size: .72rem; }
.md-hero .md-next-cards { grid-auto-columns: minmax(250px, 1fr); gap: .75rem; overflow-y: visible; align-content: center; }
.md-hero .md-ncard { padding: .7rem .85rem .75rem; gap: .35rem; border-radius: 16px; justify-content: space-between; }
.md-hero .md-ncard .mnc-id .core-txt, .md-hero .md-ncard .mnc-id .exp-txt { font-size: .8rem; }
.md-hero .md-ncard .mnc-id .mnc-char { font-size: .86rem; }
.md-hero .md-ncard .md-next-state { width: 30px; height: 30px; font-size: 1rem; }
.md-hero .md-ncard .mnc-when { font-size: .88rem; }
.md-hero .md-ncard .mnc-in { font-size: 1.25rem; letter-spacing: .01em; }
.md-hero .md-ncard.is-solo .md-countdown { gap: .35rem; }
.md-hero .md-ncard.is-solo .md-countdown i { width: 52px; height: 54px; border-radius: 12px; }
.md-hero .md-ncard.is-solo .md-countdown b { font-size: 1.35rem; }
.md-hero .md-ncard.is-solo .md-countdown small { display: block; font-size: .56rem; }
.md-hero .md-ncard .mnc-line { align-items: flex-end; }

/* Las ventanitas llenan el alto del recuadro (sin aire vacío): cabecera, día y hora grandes, cuenta regresiva y estado */
.md-hero .md-next.md-next--cards { justify-content: flex-start; }
.md-hero .md-next-cards { flex: 1 1 auto; grid-auto-rows: 1fr; align-content: stretch; align-items: stretch; }
.md-hero .md-ncard { justify-content: space-between; gap: .45rem; padding: .8rem .95rem .8rem; }
.md-hero .md-ncard .mnc-line { display: none; }
.md-ncard .mnc-day { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; }
.md-ncard .mnc-dow { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--cc)); }
.md-ncard .mnc-day b { font-family: var(--display); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.md-ncard .mnc-time { font-size: .88rem; color: var(--muted); font-weight: 600; }
.md-ncard .mnc-count { display: flex; align-items: center; }
.md-hero .md-ncard .mnc-in { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.md-hero .md-ncard.is-next .mnc-in { color: var(--ink); }
.md-ncard footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .45rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.md-ncard .mnc-state { font-size: .78rem; font-weight: 700; }
.md-ncard .mnc-state.is-attend { color: #5be39a; } .md-ncard .mnc-state.is-late { color: #ffcf6b; } .md-ncard .mnc-state.is-absent { color: #ff8a8a; }
.md-ncard .mnc-go { padding: .2rem .65rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800; color: var(--ink);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); transition: border-color .15s, background .15s; }
.md-ncard .mnc-go:hover { border-color: rgb(var(--cc)); background: rgba(var(--cc), .18); }
.md-hero .md-ncard.is-solo .md-countdown i { width: 60px; height: 62px; }
.md-hero .md-ncard.is-solo .md-countdown b { font-size: 1.55rem; }

/* ===== Ajuste: bloque de identidad más ancho (badges en una fila, menú con icono a la izquierda) y raids compactas ===== */
.md-hero { grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 1.1rem; align-items: center !important; }
.md-hero-left { width: 420px; }
.md-hero-left .md-badges { flex-wrap: nowrap; gap: .35rem; }
.md-hero-left .md-badge { white-space: nowrap; font-size: .74rem; padding-inline: .6rem; }
.md-menutile { flex-direction: row; align-items: center; gap: .6rem; padding: .6rem .7rem; }
.md-menutile .mt-txt { flex: 1; }
.md-menutile .mt-txt b { font-size: .92rem; }
.md-menutile .mt-txt small { font-size: .68rem; }
.md-menutile .mt-ico { flex: none; }

/* «Tus próximas raids»: compacto, al lado del bloque de identidad (no se estira) */
.md-hero .md-next.md-next--cards { width: fit-content; max-width: min(100%, 680px); justify-self: start; align-self: center; padding: .65rem .8rem .75rem; gap: .45rem; }
.md-hero .md-next-cards { grid-auto-columns: minmax(230px, 290px); grid-auto-rows: auto; gap: .6rem; align-content: start; }
.md-hero .md-ncard { padding: .55rem .7rem .6rem; gap: .3rem; justify-content: flex-start; }
.md-ncard .mnc-day b { font-size: 1.45rem; }
.md-ncard .mnc-dow { font-size: .72rem; }
.md-ncard .mnc-time { font-size: .8rem; }
.md-hero .md-ncard .mnc-in { font-size: 1.15rem; }
.md-hero .md-ncard.is-solo .md-countdown i { width: 40px; height: 42px; border-radius: 10px; }
.md-hero .md-ncard.is-solo .md-countdown b { font-size: 1.1rem; }
.md-hero .md-ncard.is-solo .md-countdown small { font-size: .5rem; }
.md-hero .md-ncard .md-next-state { width: 26px; height: 26px; font-size: .9rem; }
.md-ncard footer { padding-top: .35rem; }
.md-hero .md-ncard .mnc-id .core-txt, .md-hero .md-ncard .mnc-id .exp-txt { font-size: .74rem; }
.md-hero .md-ncard .mnc-id .mnc-char { font-size: .8rem; }
@media (max-width: 900px) {
  .md-hero { grid-template-columns: 1fr !important; }
  .md-hero-left { width: 100%; }
  .md-hero .md-next.md-next--cards { width: 100%; max-width: none; }
  .md-hero .md-next-cards { grid-auto-columns: minmax(230px, 1fr); }
  .md-hero-left .md-badges { flex-wrap: wrap; }
}

/* La ficha se ajusta a su contenido (identidad + próximas raids): sin una franja vacía a la derecha */
@media (min-width: 901px) {
  .md-page > [data-md-hero] { width: fit-content; max-width: 100%; }
  .md-page > [data-md-hero] .md-hero { width: fit-content; max-width: 100%; }
}

/* Ficha LARGA: identidad a la izquierda, «Tu próxima raid» pegada a la derecha y, en el hueco central, el logo (más grande) */
@media (min-width: 901px) {
  .md-page > [data-md-hero], .md-page > [data-md-hero] .md-hero { width: 100%; max-width: none; }
  .md-hero { grid-template-columns: auto minmax(0, 1fr) auto !important; column-gap: 1rem; }
  .md-hero .md-next.md-next--cards { justify-self: end; }
}
.md-hero-mid { display: grid; place-items: center; min-width: 0; align-self: stretch; }
.md-pulse-logo--hero img { width: auto; height: clamp(64px, 7vw, 104px); }
.md-pulse-logo--hero { margin: 0; padding: 0; }
@media (max-width: 900px) { .md-hero-mid { display: none; } }
/* un solo logo a la vez */
[data-profile-body][data-logo="sheet"] .md-hero-mid .md-pulse-logo { display: none; }
[data-profile-body]:not([data-logo="sheet"]) .md-pulse-logo--sheet { display: none; }

/* Ficha más baja: identidad y menú lado a lado (el menú en dos tiles apilados a la derecha del nombre) */
@media (min-width: 901px) {
  .md-hero-left { width: auto; display: grid; grid-template-columns: auto 232px; grid-template-areas: "id menu" "act menu"; column-gap: 1rem; row-gap: .55rem; padding: .75rem .85rem; align-items: center; }
  .md-hero-left .md-hero-id { grid-area: id; }
  .md-hero-left .md-menu { grid-area: menu; grid-template-columns: 1fr; gap: .4rem; align-self: stretch; }
  .md-hero-left .md-actions { grid-area: act; width: auto; min-width: 0; margin: 0; }
  .md-hero-left .md-avatar { width: 66px; height: 66px; border-radius: 19px; }
  .md-hero-left h1 { font-size: 1.25rem; }
  .md-menutile { padding: .45rem .6rem; gap: .55rem; border-radius: 14px; flex: 1 1 0; align-items: center; }
  .md-menutile .mt-ico { width: 34px; height: 34px; border-radius: 11px; }
  .md-menutile .mt-ico svg { width: 19px; height: 19px; }
  .md-menutile .mt-txt b { font-size: .9rem; }
  .md-menutile.is-on::after { display: none; }
  .md-hero-left .md-actions .md-iconbtn, .md-hero-left .md-actions .md-btn--danger { height: 32px; }
  .md-hero { padding-block: .7rem !important; }
}

/* «Tu próxima raid» más baja: día/hora y cuenta regresiva en la misma fila */
.md-ncard .mnc-mid { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.md-ncard .mnc-day { flex-wrap: nowrap; gap: .1rem .5rem; align-items: baseline; }
.md-ncard .mnc-day b { font-size: 1.3rem; }
.md-ncard .mnc-time { display: none; }
.md-ncard .mnc-day .mnc-time { display: none; }
.md-hero .md-ncard.is-solo .md-countdown i { width: 34px; height: 36px; border-radius: 9px; }
.md-hero .md-ncard.is-solo .md-countdown b { font-size: .95rem; }
.md-hero .md-ncard { gap: .25rem; padding: .5rem .65rem .5rem; }
.md-hero .md-next.md-next--cards { padding: .55rem .7rem .6rem; gap: .35rem; }
.md-hero .md-ncard .mnc-in { font-size: 1.05rem; }
.md-ncard footer { padding-top: .25rem; }
@media (min-width: 901px) { .md-hero .md-ncard { max-width: 330px; } .md-hero .md-next-cards { grid-auto-columns: minmax(250px, 330px); } }

.md-ncard .mnc-time, .md-ncard .mnc-day .mnc-time { display: inline; font-size: .76rem; }

/* Ficha general más baja: «Tu próxima raid» en dos filas (identidad+✓ / día, hora, cuenta regresiva y «Cambiar») */
.md-hero .md-ncard { gap: .3rem; padding: .45rem .6rem .5rem; }
.md-ncard .mnc-mid { flex-wrap: nowrap; align-items: center; }
.md-ncard .mnc-mid .mnc-day { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 0; }
.md-ncard .mnc-mid .mnc-count { flex: none; }
.md-ncard .mnc-mid .mnc-go { flex: none; }
.md-ncard .mnc-in { white-space: nowrap; }
.md-hero .md-next.md-next--cards { padding: .5rem .65rem .55rem; gap: .3rem; max-width: min(100%, 720px); }
.md-hero .md-next-cards { grid-auto-columns: minmax(300px, 360px); }
.md-hero .md-ncard { max-width: 360px; }
.md-hero .md-ncard .mnc-id { flex-wrap: nowrap; }
.md-hero .md-ncard .mnc-id .mnc-char { white-space: nowrap; }
@media (min-width: 901px) { .md-hero { padding-block: .5rem !important; } }

.md-ncard .mnc-go { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; font-size: .85rem; border-radius: 9px; }
.md-hero .md-ncard.is-solo .md-countdown i { width: 30px; height: 32px; }
.md-hero .md-ncard.is-solo .md-countdown { gap: .2rem; }
.md-ncard .mnc-day b { font-size: 1.2rem; }
.md-ncard .mnc-time { font-size: .72rem; white-space: nowrap; }
.md-hero .md-ncard { max-width: 380px; }
.md-hero .md-next-cards { grid-auto-columns: minmax(300px, 380px); }
.md-pulse-logo--hero img { height: clamp(48px, 5.5vw, 96px); max-width: 100%; }

/* Los dos botones del menú: un parpadeo tenue del borde (avisa que son lo principal) y un poco menos anchos */
@media (min-width: 901px) { .md-hero-left { grid-template-columns: auto 206px; } }
.md-menutile { animation: mdTileBorder 2.8s ease-in-out infinite; }
.md-menutile + .md-menutile { animation-delay: 1.4s; }
.md-menutile:hover, .md-menutile:focus-visible { animation-play-state: paused; }
@keyframes mdTileBorder {
  0%, 100% { border-color: rgba(var(--accent-rgb), .32); box-shadow: 0 14px 26px -18px rgba(var(--accent-rgb), .6), inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 0 rgba(var(--accent-rgb), 0); }
  50% { border-color: rgba(var(--accent-rgb), .95); box-shadow: 0 14px 26px -16px rgba(var(--accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 3px rgba(var(--accent-rgb), .16); }
}
.md-menutile.is-on { animation-name: mdTileBorderOn; }
@keyframes mdTileBorderOn {
  0%, 100% { box-shadow: 0 18px 34px -14px rgba(var(--accent-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 0 rgba(var(--accent-rgb), 0); }
  50% { box-shadow: 0 18px 34px -12px rgba(var(--accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 3px rgba(var(--accent-rgb), .28); }
}
@media (prefers-reduced-motion: reduce) { .md-menutile, .md-menutile.is-on { animation: none; } }

/* Mi Perfil — tema por defecto (sin personaje elegido): negro con gris y toques amarillos */
html[data-theme="neutral"] body.md-body {
  --bg: #09090a; --bg-rgb: 9, 9, 10; --bg-soft: #101011; --panel: #161617; --panel-2: rgba(255, 255, 255, 0.05); --line: rgba(255, 255, 255, 0.12);
  --ink: #f2f2ef; --muted: #a8a8a2; --muted-2: #77776f;
  --accent: #f4c430; --accent-rgb: 244, 196, 48; --accent-ink: #181300;
  --void: #9a9a96; --void-rgb: 154, 154, 150; --void-2: #5d5d5a;
  --fire: #ffd966; --gold: #f4c430;
}
html[data-theme="neutral"] body.md-body { background: radial-gradient(70% 45% at 12% 0%, rgba(244, 196, 48, .12), transparent 70%), radial-gradient(60% 40% at 100% 18%, rgba(154, 154, 150, .12), transparent 70%), #09090a; background-attachment: fixed; }

/* Bloque de identidad sin borde (solo el fondo suave) */
.md-hero-left { border: 0 !important; box-shadow: none !important; }

/* Retail · «El Vacío contra la Luz»: motas del Vacío (morado) alternadas con destellos de la Luz (dorado) */
.theme-orbs span:nth-child(even) { background: radial-gradient(circle at 35% 35%, rgba(255, 224, 150, .85), rgba(255, 200, 110, .14) 70%, transparent 80%); }
.theme-gems span:nth-child(odd) { background: rgba(255, 226, 160, .92); filter: drop-shadow(0 0 7px rgba(255, 210, 120, .85)); }
html[data-theme="retail"] .btn-primary { box-shadow: 0 10px 28px -12px rgba(var(--accent-rgb), .75), 0 0 0 1px rgba(255, 227, 160, .18) inset; }
html[data-theme="retail"] ::selection { background: rgba(var(--accent-rgb), .45); color: #fff; }

/* MoP · «Jade contra Sha»: destellos blancos del Sha sobre el verde jade */
html[data-theme="mop"] .btn-primary { box-shadow: 0 10px 28px -12px rgba(var(--accent-rgb), .75), 0 0 0 1px rgba(255, 255, 255, .16) inset; }
html[data-theme="mop"] .theme-clouds { opacity: .32; filter: grayscale(1) brightness(.55) contrast(1.1); }
html[data-theme="mop"] .theme-wind span { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); }
html[data-theme="mop"] ::selection { background: rgba(var(--accent-rgb), .42); color: #fff; }

/* ===== La guerra de fondo: cada tanto una fuerza se pronuncia y la otra la empuja de vuelta ===== */
.theme-war { position: fixed; inset: 0; z-index: -1; overflow: clip; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.theme-war i { position: absolute; inset: -10%; display: block; opacity: 0; will-change: opacity, transform; }
html[data-theme="retail"] .theme-war, html[data-theme="mop"] .theme-war { opacity: 1; }

/* Retail: la Luz (dorada) contra el Vacío (morado) */
html[data-theme="retail"] .war-a {   /* la Luz: haces dorados que entran desde abajo a la derecha */
  background:
    conic-gradient(from 196deg at 100% 100%, transparent 0 14deg, rgba(255, 226, 160, .34) 22deg, transparent 34deg 52deg, rgba(255, 214, 140, .22) 60deg, transparent 74deg 100deg),
    radial-gradient(60% 55% at 100% 100%, rgba(255, 222, 150, .30), transparent 70%);
  animation: warLight 18s ease-in-out infinite;
}
html[data-theme="retail"] .war-b {   /* el Vacío: oscuridad y morado que se cierran desde arriba a la izquierda */
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(110, 40, 230, .46), transparent 72%),
    radial-gradient(90% 80% at 0% 0%, rgba(3, 1, 8, .7), transparent 70%);
  animation: warVoid 18s ease-in-out infinite;
}
@keyframes warLight { 0%, 8% { opacity: 0; transform: rotate(0deg) scale(1); } 28% { opacity: 1; transform: rotate(-4deg) scale(1.05); } 44% { opacity: .2; } 58%, 100% { opacity: 0; transform: rotate(0deg) scale(1); } }
@keyframes warVoid  { 0%, 46% { opacity: 0; transform: scale(1); } 66% { opacity: 1; transform: scale(1.06); } 84% { opacity: .15; } 100% { opacity: 0; } }

/* MoP: el Sha (negro y blanco espectral) contra el Dragón de Jade */
html[data-theme="mop"] .war-a {      /* el Sha: humo negro desde arriba a la derecha y jirones blancos abajo a la izquierda */
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(0, 0, 0, .78), transparent 72%),
    radial-gradient(46% 36% at 6% 100%, rgba(244, 248, 246, .26), transparent 72%),
    radial-gradient(32% 26% at 38% 8%, rgba(235, 242, 239, .14), transparent 72%);
  animation: warSha 20s ease-in-out infinite;
}
html[data-theme="mop"] .war-b {      /* el Jade: resplandor verde que empuja desde el centro-abajo */
  background:
    radial-gradient(60% 50% at 50% 110%, rgba(47, 227, 160, .42), transparent 72%),
    radial-gradient(40% 40% at 90% 90%, rgba(47, 227, 160, .22), transparent 72%);
  animation: warJade 20s ease-in-out infinite;
}
@keyframes warSha  { 0%, 6% { opacity: 0; transform: scale(1); } 24% { opacity: 1; transform: scale(1.07); } 40% { opacity: .25; } 54%, 100% { opacity: 0; transform: scale(1); } }
@keyframes warJade { 0%, 42% { opacity: 0; transform: scale(1); } 62% { opacity: 1; transform: scale(1.05); } 82% { opacity: .2; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .theme-war i { animation: none !important; opacity: .25; } }
html.lite .theme-war { display: none; }

/* más presencia de la guerra (Luz / Vacío y Sha / Jade) */
html[data-theme="retail"] .war-a {
  background:
    conic-gradient(from 192deg at 100% 100%, transparent 0 12deg, rgba(255, 228, 165, .55) 21deg, transparent 33deg 50deg, rgba(255, 216, 145, .38) 60deg, transparent 74deg 96deg, rgba(255, 228, 165, .3) 104deg, transparent 118deg),
    radial-gradient(65% 60% at 100% 100%, rgba(255, 224, 152, .46), transparent 72%);
}
html[data-theme="retail"] .war-b {
  background:
    radial-gradient(75% 65% at 0% 0%, rgba(120, 45, 240, .62), transparent 72%),
    radial-gradient(95% 85% at 0% 0%, rgba(2, 0, 8, .82), transparent 72%);
}
html[data-theme="mop"] .war-a {
  background:
    radial-gradient(75% 65% at 100% 0%, rgba(0, 0, 0, .88), transparent 74%),
    radial-gradient(52% 40% at 6% 100%, rgba(246, 250, 248, .36), transparent 74%),
    radial-gradient(36% 30% at 38% 6%, rgba(238, 244, 241, .22), transparent 74%);
}
html[data-theme="mop"] .war-b {
  background:
    radial-gradient(65% 55% at 50% 112%, rgba(47, 227, 160, .6), transparent 74%),
    radial-gradient(45% 45% at 92% 92%, rgba(47, 227, 160, .32), transparent 74%);
}

/* Rendimiento: las capas de fondo se aíslan */
.theme-war { contain: strict; }

/* ===== Reclutamiento (estilo AURATEC): formulario por pasos, panel «qué buscamos» y línea de tiempo; sin huecos ===== */
.apply-grid { align-items: stretch; }
@media (min-width: 960px) { .apply-grid { grid-template-columns: .9fr 1.1fr; gap: clamp(1.6rem, 3vw, 2.6rem); } }
.apply-intro { display: flex; flex-direction: column; }
.apply-intro > .needs-card { flex: 1 1 auto; display: flex; flex-direction: column; margin: 1.1rem 0 0; }
.apply-intro > .needs-card .needs-list { flex: 1 1 auto; justify-content: space-between; }
.apply-intro > .apply-discord-card { margin-top: 1.1rem; }
.apply-form { gap: 1.25rem; }
.apply-form > .cf-turnstile { min-height: 65px; }

.apply-head { display: flex; align-items: center; gap: .85rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.apply-head-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; font-size: 1.4rem;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .35), rgba(0, 0, 0, .35)); border: 1px solid rgba(var(--accent-rgb), .5); box-shadow: 0 10px 22px -12px rgba(var(--accent-rgb), .9); }
.apply-head h3 { margin: 0; font-family: "Sora", var(--display); font-size: 1.15rem; line-height: 1.2; }
.apply-head p { margin: .15rem 0 0; font-size: .8rem; color: var(--muted); }
.apply-head-pill { margin-left: auto; padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #7ff0b4; background: rgba(70, 220, 150, .12); border: 1px solid rgba(70, 220, 150, .4); }

.apply-group { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.05rem 1.1rem; border-radius: 18px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .07), transparent 60%), rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); }
.apply-group-title { display: flex; align-items: center; gap: .55rem; margin: 0; font-family: "Sora", var(--display); font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.apply-group-title i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; font-style: normal; font-size: .74rem; font-weight: 800; color: var(--bg);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); }
.apply-group .verify-result:not(.is-visible):not(.ok):not(.bad):not(.pending) { display: none; }

.apply-steps { list-style: none; margin: .2rem 0 0; padding: 1.05rem 1.1rem; display: flex; flex-direction: column; justify-content: space-between; gap: .8rem; flex: 1 1 auto; border-radius: 18px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .1), transparent 65%), rgba(255, 255, 255, .035); border: 1px dashed rgba(var(--accent-rgb), .4); position: relative; }
.apply-steps li { display: flex; align-items: flex-start; gap: .75rem; position: relative; }
.apply-steps li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: -.85rem; width: 2px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .6), rgba(var(--accent-rgb), .08)); }
.apply-steps i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: .8rem;
  color: var(--ink); background: rgba(var(--accent-rgb), .22); border: 1px solid rgba(var(--accent-rgb), .6); }
.apply-steps b { display: block; font-size: .92rem; }
.apply-steps span { display: block; margin-top: .1rem; font-size: .8rem; line-height: 1.45; color: var(--muted); }

.needs-card { position: relative; overflow: hidden; }
.needs-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.needs-head .needs-title { margin: 0; }
.needs-tag { padding: .2rem .65rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #ffd166; background: rgba(255, 209, 102, .12); border: 1px solid rgba(255, 209, 102, .45); }
.needs-tag.is-ok { color: #7ff0b4; background: rgba(70, 220, 150, .12); border-color: rgba(70, 220, 150, .4); }
.needs-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .45rem .8rem; }
.needs-list .needs-bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.needs-list .needs-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), 1)); }
.need--ok { color: #7ff0b4; background: rgba(70, 220, 150, .12); border-color: rgba(70, 220, 150, .4); }
.needs-chips { justify-content: flex-end; }

/* los 3 pasos van en una franja bajo el formulario (horizontal en escritorio) */
.apply-steps { margin: 1.4rem 0 0; flex: none; flex-direction: column; display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.1rem 1.2rem; }
@media (min-width: 760px) { .apply-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }
.apply-steps li:not(:last-child)::after { display: none; }
@media (min-width: 760px) {
  .apply-steps li:not(:last-child)::after { display: block; left: auto; right: -.95rem; top: 14px; bottom: auto; width: .5rem; height: 2px; background: rgba(var(--accent-rgb), .55); }
}
.needs-core { align-items: flex-start; min-width: 0; }

/* Mis personajes: el seleccionado ya no se corta (sin desplazamiento lateral; el borde y el brillo caben dentro de la lista),
   la versión va a la derecha del nombre y el core debajo */
.md-chars-side .md-chars { padding: 4px 6px 6px 4px; }
.md-chars-side .md-char.is-on, .md-chars-side .md-char.is-on:hover { transform: none !important; border-color: var(--cc); box-shadow: 0 0 0 1px var(--cc), 0 6px 16px -10px var(--cc); }
.md-chars-side .md-char { align-items: center; }
.md-char .md-char-txt { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.md-char .md-char-top { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem .4rem; min-width: 0; }
.md-char .md-char-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-char .md-char-top .exp-txt { flex: none; font-size: .62rem; padding: .02em .5em; }
.md-chars-side .md-char .md-char-txt > small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-chars-side .md-char .md-char-top { flex-wrap: nowrap; flex-direction: row; align-items: center; gap: .4rem; }
.md-chars-side .md-char .md-char-top b { display: block; flex: 0 1 auto; }

/* Formulario de reclutamiento: columnas iguales y campos alineados (misma altura, etiquetas de una línea) */
.apply-form .form-row { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 560px) { .apply-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apply-form .form-row > label { min-width: 0; justify-content: flex-end; }
.apply-form .form-row > label > span { line-height: 1.25; }
.apply-form input:not([type="hidden"]):not(.hp-field), .apply-form select { width: 100%; box-sizing: border-box; min-height: 46px; }
.apply-form .btn-verify { width: 100%; min-height: 46px; padding-block: 0; border-radius: 12px; font-size: .88rem; white-space: normal; line-height: 1.15; }
.apply-form input:not([type="hidden"]):not(.hp-field), .apply-form select, .apply-form .btn-verify { height: 48px; min-height: 48px; }

/* Qué buscamos ahora: filas compactas de una línea (caben todos los cores sin agrandar la ventana) */
.apply-intro > .needs-card { flex: 0 0 auto; margin-top: 1rem; padding: .75rem .85rem .8rem; }
.apply-intro > .needs-card .needs-list { flex: 0 0 auto; justify-content: flex-start; gap: .4rem; }
.needs-head { margin-bottom: .5rem; }
.needs-list li { padding: .42rem .65rem; gap: .35rem .6rem; }
.needs-list li .needs-core { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; }
.needs-list li .needs-core small { font-size: .7rem; }
.needs-list .needs-bar { display: none; }
.need { padding: .16rem .55rem; font-size: .72rem; white-space: nowrap; }
.need--bench { color: #ffd166; background: rgba(255, 209, 102, .12); border-color: rgba(255, 209, 102, .45); }
.need--soon { color: var(--muted); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.needs-soon-pills { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.needs-note { margin-top: .5rem; font-size: .74rem; }
/* la columna izquierda ya no se estira: el resto del alto lo absorbe la tarjeta de Discord, centrada */
.apply-intro > .apply-discord-card { flex: 1 1 auto; align-items: flex-start; margin-top: 1rem; }

/* Anuncios en Mi Perfil: varios a la vez, con alcance y botones de respuesta */
[data-md-announce] { display: flex; flex-direction: column; gap: .6rem; }
[data-md-announce]:empty { display: none; }
.md-announce-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.md-announce-body p { flex: none; }
.md-announce-for { font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.md-ann-yn { display: inline-flex; gap: .4rem; flex: none; }
.md-ann-done { flex: none; padding: .25rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #7ff0b4; background: rgba(70, 220, 150, .12); border: 1px solid rgba(70, 220, 150, .4); }

/* Anuncio nuevo / sin responder: parpadeo suave del borde para que se note (se detiene solo; en pendientes sigue más pausado) */
.md-announce { animation: mdAnnBlink 1.3s ease-in-out 5; }
.md-announce.is-pending { animation: mdAnnBlink 1.8s ease-in-out infinite; }
@keyframes mdAnnBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0), 0 0 0 rgba(var(--accent-rgb), 0); filter: none; }
  50% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .55), 0 0 28px -4px rgba(var(--accent-rgb), .75); filter: brightness(1.18); }
}
.md-announce.is-warn { --accent-rgb: 255, 184, 77; }
.md-announce.is-good { --accent-rgb: 91, 227, 160; }
.md-announce-for { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.md-announce-for img { border-radius: 4px; }
.md-announce-for b { font-size: .8rem; }
.md-announce-for .exp-txt, .md-announce-for .core-txt { font-size: .66rem; padding: .02em .5em; }
@media (prefers-reduced-motion: reduce) { .md-announce, .md-announce.is-pending { animation: none; } }

/* Encuestas sin votar: junto a los anuncios, arriba */
.md-polls-top { display: flex; flex-direction: column; gap: .6rem; }
.md-polls-top:empty { display: none; }
.md-pollbar-opts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; flex: none; max-width: 55%; }
.md-nocore { font-size: .66rem; color: var(--muted); }
@media (max-width: 640px) { .md-pollbar-opts { max-width: 100%; justify-content: flex-start; } }

/* Botón de avisos (junto al Ilvl): parpadea si hay algo pendiente; el símbolo rota entre ⚠️ / ℹ️ / 🗳 según lo que haya */
.md-bell-slot { display: inline-flex; align-items: center; flex: none; }
.md-bell-slot:empty { display: none; }
.md-bell { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; cursor: pointer; flex: none;
  color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  transition: transform .2s cubic-bezier(.23, 1, .32, 1), border-color .15s, background .15s; }
.md-bell:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .2); transform: translateY(-1px); }
.md-bell:active { transform: scale(.95); }
.md-bell-ico { font-size: 1.35rem; line-height: 1; display: block; }
.md-bell-ico.is-flip { animation: mdBellFlip .45s cubic-bezier(.23, 1, .32, 1); }
@keyframes mdBellFlip { from { transform: rotateY(90deg) scale(.7); opacity: 0; } to { transform: rotateY(0) scale(1); opacity: 1; } }
.md-bell.is-alert { border-color: #ffb84d; background: rgba(255, 184, 77, .16); animation: mdBellBlink 1.2s ease-in-out infinite; }
@keyframes mdBellBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 184, 77, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 184, 77, .45), 0 0 22px -2px rgba(255, 184, 77, .8); }
}
.md-bell-n { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 .3rem; box-sizing: border-box; border-radius: 99px; display: grid; place-items: center;
  font-style: normal; font-size: .7rem; font-weight: 800; color: #1a1100; background: #ffb84d; border: 2px solid rgba(var(--bg-rgb), .95); }
.md-bell[data-tip]::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 8px); white-space: nowrap; pointer-events: none; z-index: 40;
  padding: .3rem .65rem; border-radius: 8px; font-size: .74rem; font-weight: 700; color: var(--ink); background: rgba(var(--bg-rgb), .97);
  border: 1px solid rgba(var(--accent-rgb), .5); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .8); opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
.md-bell[data-tip]:hover::after, .md-bell[data-tip]:focus-visible::after { opacity: 1; transform: none; }

/* Ventana de avisos */
.md-comms-card { width: min(720px, 100%); }
.md-comms-sub { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .5rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.md-comms-sub:first-child { margin-top: .2rem; }
.md-comms-sub em { font-style: normal; padding: .02rem .5rem; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--ink); }
.md-comms-list { display: flex; flex-direction: column; gap: .6rem; }
.md-comms .md-announce { animation: none; }
.md-comms .md-announce.is-pending { border-width: 2px; }
.md-pollbar-opts { max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .md-bell.is-alert, .md-bell-ico.is-flip { animation: none; } }

/* Nota opcional al votar */
.md-poll-note { flex: 1 1 100%; display: flex; gap: .5rem; align-items: center; margin-top: .1rem; }
.md-poll-note input { flex: 1; min-width: 0; min-height: 38px; box-sizing: border-box; padding: .4rem .7rem; border-radius: 12px; font: inherit; font-size: .84rem; color: var(--ink);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); }
.md-poll-note input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22); }
.md-comms .md-pollbar { flex-wrap: wrap; }
/* apartados apagados desde DataValyrians › Sistema › Web */
.is-section-off { display: none !important; }

/* Botón «Calendario» (icono + texto) y su ventana interna */
.nav-calendar-btn--label { width: auto; height: 38px; border-radius: 999px; padding: 0 1rem 0 .8rem; gap: .5rem; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .84rem; letter-spacing: .01em; }
.nav-calendar-btn--label::before { border-radius: 999px; inset: -4px; }
.nav-calendar-btn--label .nav-calendar-icon { flex: none; }
.nav-calendar-label { white-space: nowrap; }
@media (max-width: 560px) { .nav-calendar-btn--label { padding: 0 .75rem 0 .65rem; font-size: .8rem; } }

.cal-modal { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: clamp(.6rem, 2.5vw, 1.6rem);
  background: radial-gradient(circle at 50% 30%, rgba(var(--accent-rgb), .16), rgba(2, 1, 8, .86) 70%);
  opacity: 0; transition: opacity .25s ease; }
.cal-modal[hidden] { display: none; }
.cal-modal.is-open { opacity: 1; }
.cal-modal-card { width: min(1240px, 100%); max-height: min(92vh, 900px); display: flex; flex-direction: column; border-radius: 26px; overflow: hidden;
  background: linear-gradient(165deg, rgba(var(--accent-rgb), .12), transparent 45%), rgba(var(--bg-rgb), .97);
  border: 1px solid rgba(var(--accent-rgb), .4); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95);
  transform: translateY(14px) scale(.97); transition: transform .32s cubic-bezier(.23, 1, .32, 1); }
.cal-modal.is-open .cal-modal-card { transform: none; }
.cal-modal-head { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cal-modal-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; font-size: 1.4rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .45), rgba(0, 0, 0, .35)); border: 1px solid rgba(var(--accent-rgb), .6); }
.cal-modal-head h2 { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.2; }
.cal-modal-head p { margin: .1rem 0 0; font-size: .8rem; color: var(--muted); }
.cal-modal-x { margin-left: auto; width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: var(--ink); cursor: pointer; font-size: 1rem;
  transition: transform .18s cubic-bezier(.23, 1, .32, 1), border-color .15s, background .15s; }
.cal-modal-x:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .2); }
.cal-modal-x:active { transform: scale(.94); }
.cal-modal-body { padding: 1rem 1.2rem 1.3rem; overflow: auto; overscroll-behavior: contain; }
.cal-modal-body .raid-calendar { margin: 0; }
html.has-cal-modal, html.has-cal-modal body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cal-modal, .cal-modal-card { transition: none; } }

/* ===== Botón de avisos v2 (AURATEC): icono de línea, anillo luminoso y marca en «Mis personajes» ===== */
.md-bell { --bk: var(--accent); position: relative; width: 48px; height: 48px; border-radius: 16px; display: inline-grid; place-items: center; cursor: pointer; flex: none; color: var(--bk);
  background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 55%), rgba(var(--bg-rgb), .85);
  border: 1px solid color-mix(in srgb, var(--bk) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px -14px var(--bk);
  transition: transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .2s, border-color .2s, color .3s; }
.md-bell.k-warn { --bk: #ffb84d; }
.md-bell.k-info { --bk: #7fd0ff; }
.md-bell.k-poll { --bk: #c8a6ff; }
.md-bell.k-ok { --bk: #8de3b4; }
.md-bell:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 26px -12px var(--bk); }
.md-bell:active { transform: scale(.95); }
.md-bell-ico { display: grid; place-items: center; width: 24px; height: 24px; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--bk) 70%, transparent)); }
.md-bell-ico svg { width: 100%; height: 100%; display: block; }
.md-bell-ico.is-flip { animation: mdBellFlip2 .5s cubic-bezier(.23, 1, .32, 1); }
@keyframes mdBellFlip2 { from { opacity: 0; transform: translateY(6px) scale(.7); } to { opacity: 1; transform: none; } }
.md-bell-ring { position: absolute; inset: -5px; border-radius: 20px; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--bk) 78%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 2px; }
.md-bell.is-alert { animation: mdBellPulse 1.6s ease-in-out infinite; border-color: var(--bk); }
.md-bell.is-alert .md-bell-ring { opacity: 1; animation: mdBellSpin 2.6s linear infinite; }
.md-bell.is-alert .md-bell-ico svg { animation: mdBellWiggle 3.2s ease-in-out infinite; transform-origin: 50% 20%; }
@keyframes mdBellPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 0 transparent, 0 10px 22px -14px var(--bk); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 4px color-mix(in srgb, var(--bk) 28%, transparent), 0 0 26px -4px var(--bk); } }
@keyframes mdBellSpin { to { transform: rotate(360deg); } }
@keyframes mdBellWiggle { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-9deg); } 90% { transform: rotate(8deg); } 94% { transform: rotate(-5deg); } 97% { transform: rotate(3deg); } }
.md-bell-n { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 .35rem; box-sizing: border-box; border-radius: 99px; display: grid; place-items: center;
  font-style: normal; font-size: .72rem; font-weight: 800; color: #1a1100; background: linear-gradient(135deg, #ffd27a, #ffb84d); border: 2px solid rgba(var(--bg-rgb), .95); box-shadow: 0 4px 10px -4px #ffb84d; }

/* «Mis personajes»: marca transparente sobre el icono de la clase + parpadeo suave del personaje con avisos pendientes */
.md-char-ico { position: relative; display: inline-block; flex: none; line-height: 0; }
.md-char-alert { position: absolute; top: -7px; right: -8px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; line-height: 0;
  color: #ffb84d; background: rgba(8, 8, 8, .42); border: 1px solid rgba(255, 184, 77, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: .9; animation: mdCharAlertBlink 2.2s ease-in-out infinite; pointer-events: none; }
.md-char-alert svg { width: 10px; height: 10px; }
.md-char.has-alert { animation: mdCharBlink 2.4s ease-in-out infinite; }
@keyframes mdCharAlertBlink { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes mdCharBlink { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 1px rgba(255, 184, 77, .55), 0 0 16px -4px rgba(255, 184, 77, .7); } }
@media (prefers-reduced-motion: reduce) {
  .md-bell.is-alert, .md-bell.is-alert .md-bell-ring, .md-bell.is-alert .md-bell-ico svg, .md-char-alert, .md-char.has-alert, .md-bell-ico.is-flip { animation: none; }
}

/* Personaje seleccionado más notorio; el brillo de los que solo tienen avisos, más discreto */
.md-chars-side .md-char.is-on, .md-chars-side .md-char.is-on:hover {
  border-color: var(--cc); border-width: 2px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 30%, transparent), rgba(0, 0, 0, .35));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc) 55%, transparent), 0 0 26px -2px var(--cc), inset 0 0 18px -8px var(--cc);
}
.md-chars-side .md-char.is-on b { text-shadow: 0 0 12px color-mix(in srgb, var(--cc) 70%, transparent); }
.md-char.is-on.has-alert { animation: none; }
@keyframes mdCharBlink { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 1px rgba(255, 184, 77, .3), 0 0 9px -4px rgba(255, 184, 77, .42); } }
.md-char.has-alert:not(.is-on) { border-color: rgba(255, 184, 77, .28); }

/* El modelo del personaje tarda en bajar: mientras tanto se ve el emblema de su clase con un pulso suave */
.pd-figure.is-loading .pd-emblem { display: block; opacity: .3; animation: pdLoadPulse 1.3s ease-in-out infinite; }
@keyframes pdLoadPulse { 0%, 100% { opacity: .18; } 50% { opacity: .42; } }
@media (prefers-reduced-motion: reduce) { .pd-figure.is-loading .pd-emblem { animation: none; } }

.md-bn-raid { margin-left: .5rem; font-size: .72rem; font-weight: 500; color: var(--muted); }
.md-bn-plan { margin: .7rem 0 .2rem; }

/* ---- Mi Perfil · v-final: encabezado de próximas raids (no se descuadra con varios cores) + asistencia legible ---- */
.md-hero .md-next.md-next--cards { width: min(100%, 400px); max-width: 100%; box-sizing: border-box; justify-self: end; align-self: center; }
.md-hero .md-next-cards { display: flex; flex-direction: column; flex-wrap: nowrap; grid-auto-flow: row; gap: .45rem; max-height: 9.4rem; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; padding: .1rem .2rem .1rem 0; align-content: stretch; }
.md-hero .md-ncard { flex: none; width: 100%; max-width: none; box-sizing: border-box; }
.md-hero .md-next-cards::-webkit-scrollbar { width: 6px; }
.md-hero .md-next-cards::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 6px; }
@media (max-width: 900px) { .md-hero .md-next.md-next--cards { width: 100%; justify-self: stretch; } .md-hero .md-next-cards { max-height: 12rem; } }

/* próximas raids (columna lateral): fecha, core, hora y estado con texto */
.md-up { grid-template-columns: auto minmax(0, 1fr) auto; }
.md-up b small { display: block; font-size: .62rem; font-weight: 600; color: var(--muted); font-family: var(--body, inherit); }
.md-up span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-up em { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .5rem; border-radius: 999px; font-size: .7rem; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); }
.md-up em i { font-style: normal; }
.md-up em small { color: inherit; font-size: .68rem; font-weight: 700; }
.md-up em.is-attend { border-color: rgba(91, 227, 154, .45); background: rgba(91, 227, 154, .1); }
.md-up em.is-late { border-color: rgba(255, 207, 107, .45); background: rgba(255, 207, 107, .1); }
.md-up em.is-absent { border-color: rgba(255, 138, 138, .45); background: rgba(255, 138, 138, .1); }

/* asistencia del personaje: cada noche con su fecha y qué pasó */
.md-att-sum { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin: .1rem 0 .6rem; font-size: .76rem; font-weight: 800; }
.md-att-sum .is-yes { color: #5be39a; } .md-att-sum .is-excused { color: var(--muted); } .md-att-sum .is-no { color: #ff8a8a; }
.md-nchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .35rem; }
.md-nchip { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .45rem; align-items: center; padding: .3rem .45rem; border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); }
.md-nchip i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-style: normal; font-size: .72rem; font-weight: 900; }
.md-nchip b { display: block; font-size: .72rem; line-height: 1.1; white-space: nowrap; }
.md-nchip small { display: block; font-size: .64rem; color: var(--muted); }
.md-nchip.is-yes i { color: #062a17; background: #5be39a; }
.md-nchip.is-late i { color: #2c1c00; background: #ffcf6b; }
.md-nchip.is-excused i { color: var(--ink); background: rgba(255, 255, 255, .18); }
.md-nchip.is-no i { color: #2c0707; background: #ff8a8a; }
.md-nchip.is-no small { color: #ff8a8a; }

/* ---- Barra superior: acceso a DataValyrians (si ya hay sesion) junto al calendario, y botones compactos para que quepan ---- */
.nav-dv-btn { display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .85rem 0 .7rem; border-radius: 999px; font-weight: 700; font-size: .82rem; letter-spacing: .01em; color: var(--ink);
  background: rgba(var(--accent-rgb), .14); border: 1px solid rgba(var(--accent-rgb), .45); transition: background .2s ease, border-color .2s ease, transform .15s ease; white-space: nowrap; }
.nav-dv-btn[hidden] { display: none; }
.nav-dv-btn:hover, .nav-dv-btn:focus-visible { background: rgba(var(--accent-rgb), .26); border-color: rgba(var(--accent-rgb), .8); }
.nav-dv-btn:active { transform: scale(.97); }
.nav-dv-btn svg { flex: none; color: var(--accent); }
.nav-actions { gap: .5rem; flex-wrap: nowrap; }
.nav-actions .btn-login { max-width: 168px; }
.nav-actions .btn-login [data-account-nav-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 118px; }
/* las columnas de los lados nunca miden menos que su contenido: los botones no pueden montarse sobre los enlaces */
@media (min-width: 960px) {
  .nav-inner { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
}
/* con el botón DataValyrians visible (oficiales) hay tres botones: con texto solo caben si la barra mide 1440 px
   (enlaces centrados); en pantallas más estrechas los botones se quedan con icono y los enlaces siguen centrados */
@media (min-width: 1500px) {
  .nav-inner:has(.nav-dv-btn:not([hidden])) { max-width: 1440px; }
}
@media (max-width: 1499px) {
  .nav-inner:has(.nav-dv-btn:not([hidden])) .nav-calendar-btn--label { padding: 0; width: 38px; justify-content: center; gap: 0; }
  .nav-inner:has(.nav-dv-btn:not([hidden])) .nav-calendar-label,
  .nav-inner:has(.nav-dv-btn:not([hidden])) .nav-dv-label { display: none; }
  .nav-inner:has(.nav-dv-btn:not([hidden])) .nav-dv-btn { padding: 0; width: 38px; justify-content: center; }
}
/* con poco ancho, los botones de la barra quedan solo con icono (el nombre sale al pasar el mouse) */
@media (max-width: 1280px) {
  .nav-calendar-btn--label { padding: 0; width: 38px; justify-content: center; gap: 0; }
  .nav-calendar-btn--label .nav-calendar-label { display: none; }
  .nav-dv-btn { padding: 0; width: 38px; justify-content: center; }
  .nav-dv-btn .nav-dv-label { display: none; }
  .nav-actions .btn-login { padding-inline: .8rem; }
}
@media (max-width: 1100px) { .nav-actions .btn-login [data-account-nav-label] { max-width: 86px; } .nav-links { gap: 1.2rem; } }

/* notas de jefe dentro de la ventana de avisos */
.md-notecard .md-note-plan { font-style: normal; font-size: .7rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px; background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .4); }
details.md-bn.is-flash { animation: mdBnFlash 2.2s ease-out 1; }
@keyframes mdBnFlash { 0%, 60% { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .8), 0 0 24px rgba(var(--accent-rgb), .4); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { details.md-bn.is-flash { animation: none; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .8); } }

/* Mi historial: noches con fecha */
.md-hist-row .md-nchips { margin-top: .35rem; }
.md-hist-sum { margin-left: auto; color: var(--muted); font-weight: 700; }
.md-hist-top { flex-wrap: wrap; }