/* nav-premium-1 */
/* ============================================================
   BDO Class Hub
   Dark cinematic fantasy showcase (original; premium fantasy class-page inspired layout)
   Palette: #000 #232323 #07131B #B28D55 #F3F4F6 #6D3B39
   ============================================================ */

:root {
  --black: #000000;
  --charcoal: #232323;
  --charcoal-deep: #121212;
  --blue-black: #07131B;
  --gold: #B28D55;
  --gold-hover: #c9a46a;
  --off-white: #F3F4F6;
  --maroon: #6D3B39;
  --muted: #9a9a9a;
  --muted-blue: #7a8a9a;
  --text-dark: #1a1a1a;
  --font-display: "Cinzel", "Palatino Linotype", "Times New Roman", serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --header-h: 64px;
  --announce-h: 40px;
  --transition: 0.35s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-ui);
  background: var(--black);
  color: var(--off-white);
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ========== HEADER ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
  height: var(--header-h);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 1.5rem;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.brand-logo {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--off-white);
  white-space: nowrap;
}

.header-link {
  background: none;
  border: none;
  color: rgba(243,244,246,0.75);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.header-link:hover { color: var(--off-white); }
.chevron { font-size: 0.65rem; opacity: 0.7; }

/* ========== CLASSES MEGA-MENU ========== */
.nav-dropdown {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-dropdown-trigger {
  height: 100%;
}

.nav-dropdown-trigger .chevron {
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger,
.nav-dropdown.is-open .nav-dropdown-trigger {
  color: var(--off-white);
}

.nav-dropdown:hover .nav-dropdown-trigger .chevron,
.nav-dropdown:focus-within .nav-dropdown-trigger .chevron,
.nav-dropdown.is-open .nav-dropdown-trigger .chevron {
  transform: rotate(180deg);
  color: var(--gold);
}

.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  width: min(920px, calc(100vw - 2rem));
  padding: 1.25rem 1.35rem 1.4rem;
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 18px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  overflow: visible;
}

/* Bridge so pointer can move from trigger into panel without closing */
.nav-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
  pointer-events: auto;
}

.nav-dropdown:hover .nav-mega,
.nav-dropdown:focus-within .nav-mega,
.nav-dropdown.is-open .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-heading {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(178, 141, 85, 0.25);
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.55rem;
  overflow: visible;
}

.mega-link {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 7rem;
  padding: 0.55rem 0.35rem;
  overflow: hidden;
  background-color: #111315;
  background-position: center 28%;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid rgba(243, 244, 246, 0.12);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 3px #000;
  --mega-accent: var(--gold, #B28D55);
  background-color: color-mix(in srgb, var(--mega-accent) 22%, #111315);
  border-color: color-mix(in srgb, var(--mega-accent) 40%, rgba(243, 244, 246, 0.12));
  /* Icon stays vivid; labels stay white (filter was darkening text too) */
  filter: none;
  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  transition:
    box-shadow 0.3s ease-out,
    filter 0.2s ease,
    transform 0.3s cubic-bezier(0.33, 0, 0, 1),
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease;
  will-change: transform, filter;
}

.mega-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: none;
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
}

.mega-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.15) 0%,
      transparent 38%,
      rgba(0, 0, 0, 0.55) 72%,
      rgba(0, 0, 0, 0.92) 100%
    );
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 1;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.mega-link span {
  position: relative;
  z-index: 5;
  width: 100%;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 2px #000,
    0 1px 3px rgba(0,0,0,1),
    0 2px 10px rgba(0,0,0,0.9);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.mega-link:hover,
.mega-link:focus-visible {
  color: #fff;
  filter: none;
  outline: 3px solid var(--mega-accent);
  outline-offset: 0;
  transform: scale3d(1.12, 1.12, 1) translate3d(0, 0, 0);
  z-index: 3;
  background-color: color-mix(in srgb, var(--mega-accent) 35%, #111315);
  border-color: var(--mega-accent);
  box-shadow:
    0 5px 20px 5px rgba(0, 0, 0, 0.27),
    0 0 18px color-mix(in srgb, var(--mega-accent) 45%, transparent);
}

/* mega-link accent uses outline on the tile edge */

.mega-link:hover::after,
.mega-link:focus-visible::after {
  mix-blend-mode: normal;
  opacity: 1;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--mega-accent) 18%, transparent) 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.9) 100%
    );
}

.mega-link:hover span,
.mega-link:focus-visible span {
  color: #ffffff;
}

/* Per-class mega-menu accents (vibe from each class landing) */
.mega-link[data-class="agent"] { --mega-accent: #6e4a8a; }
.mega-link[data-class="archer"] { --mega-accent: #c4a06a; }
.mega-link[data-class="berserker"] { --mega-accent: #c44b2f; }
.mega-link[data-class="corsair"] { --mega-accent: #a82040; }
.mega-link[data-class="dark-knight"] { --mega-accent: #6b4fc2; }
.mega-link[data-class="deadeye"] { --mega-accent: #c47a3a; }
.mega-link[data-class="dosa"] { --mega-accent: #3a7ab8; }
.mega-link[data-class="drakania"] { --mega-accent: #2a5a8a; }
.mega-link[data-class="guardian"] { --mega-accent: #6a9ab8; }
.mega-link[data-class="hashashin"] { --mega-accent: #c4a35a; }
.mega-link[data-class="kunoichi"] { --mega-accent: #c45a6e; }
.mega-link[data-class="lahn"] { --mega-accent: #c4786a; }
.mega-link[data-class="maegu"] { --mega-accent: #d42020; }
.mega-link[data-class="maehwa"] { --mega-accent: #d46a8a; }
.mega-link[data-class="musa"] { --mega-accent: #4a6fa5; }
.mega-link[data-class="mystic"] { --mega-accent: #4a5fd4; }
.mega-link[data-class="ninja"] { --mega-accent: #2a9a8a; }
.mega-link[data-class="nova"] { --mega-accent: #7eb6d9; }
.mega-link[data-class="ranger"] { --mega-accent: #3d8b4f; }
.mega-link[data-class="sage"] { --mega-accent: #e0c878; }
.mega-link[data-class="scholar"] { --mega-accent: #c45a20; }
.mega-link[data-class="seraph"] { background-image: url("../assets/class-icons/seraph.png"); }
.mega-link[data-class="shai"] { --mega-accent: #c4c45a; }
.mega-link[data-class="sorceress"] { --mega-accent: #7a4db8; }
.mega-link[data-class="striker"] { --mega-accent: #b8433a; }
.mega-link[data-class="tamer"] { --mega-accent: #6a9a4a; }
.mega-link[data-class="valkyrie"] { --mega-accent: #d4b45a; }
.mega-link[data-class="warrior"] { --mega-accent: #b8884a; }
.mega-link[data-class="witch"] { --mega-accent: #d4a020; }
.mega-link[data-class="wizard"] { --mega-accent: #3a5ab8; }
.mega-link[data-class="woosa"] { --mega-accent: #8b7bb8; }
.mega-link[data-class="wukong"] { --mega-accent: #c44a2a; }

/* Class portraits use the supplied art as centered tile backgrounds. */
.mega-link[data-class="agent"] { background-image: url("../assets/class-icons/agent.png"); }
.mega-link[data-class="archer"] { background-image: url("../assets/class-icons/archer.png"); }
.mega-link[data-class="berserker"] { background-image: url("../assets/class-icons/berserker.png"); }
.mega-link[data-class="corsair"] { background-image: url("../assets/class-icons/corsair.png"); }
.mega-link[data-class="dark-knight"] { background-image: url("../assets/class-icons/dark-knight.png"); }
.mega-link[data-class="deadeye"] { background-image: url("../assets/class-icons/deadeye.png"); }
.mega-link[data-class="dosa"] { background-image: url("../assets/class-icons/dosa.png"); }
.mega-link[data-class="drakania"] { background-image: url("../assets/class-icons/drakania.png"); }
.mega-link[data-class="guardian"] { background-image: url("../assets/class-icons/guardian.png"); }
.mega-link[data-class="hashashin"] { background-image: url("../assets/class-icons/hashashin.png"); }
.mega-link[data-class="kunoichi"] { background-image: url("../assets/class-icons/kunoichi.png"); }
.mega-link[data-class="lahn"] { background-image: url("../assets/class-icons/lahn.png"); }
.mega-link[data-class="maegu"] { background-image: url("../assets/class-icons/maegu.png"); }
.mega-link[data-class="maehwa"] { background-image: url("../assets/class-icons/maehwa.png"); }
.mega-link[data-class="musa"] { background-image: url("../assets/class-icons/musa.png"); }
.mega-link[data-class="mystic"] { background-image: url("../assets/class-icons/mystic.png"); }
.mega-link[data-class="ninja"] { background-image: url("../assets/class-icons/ninja.png"); }
.mega-link[data-class="nova"] { background-image: url("../assets/class-icons/nova.png"); }
.mega-link[data-class="ranger"] { background-image: url("../assets/class-icons/ranger.png"); }
.mega-link[data-class="sage"] { background-image: url("../assets/class-icons/sage.png"); }
.mega-link[data-class="scholar"] { background-image: url("../assets/class-icons/scholar.png"); }
.mega-link[data-class="shai"] { background-image: url("../assets/class-icons/shai.png"); }
.mega-link[data-class="sorceress"] { background-image: url("../assets/class-icons/sorceress.png"); }
.mega-link[data-class="striker"] { background-image: url("../assets/class-icons/striker.png"); }
.mega-link[data-class="tamer"] { background-image: url("../assets/class-icons/tamer.png"); }
.mega-link[data-class="valkyrie"] { background-image: url("../assets/class-icons/valkyrie.png"); }
.mega-link[data-class="warrior"] { background-image: url("../assets/class-icons/warrior.png"); }
.mega-link[data-class="witch"] { background-image: url("../assets/class-icons/witch.png"); }
.mega-link[data-class="wizard"] { background-image: url("../assets/class-icons/wizard.png"); }
.mega-link[data-class="woosa"] { background-image: url("../assets/class-icons/woosa.png"); }
.mega-link[data-class="wukong"] { background-image: url("../assets/class-icons/wukong.png"); }

/* Seraph has no supplied portrait, so keep its tile intentionally mystical. */
.mega-link[data-class="seraph"] { background-image: url("../assets/class-icons/seraph.png"); }

.header-right {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0;
}

.icon-btn {
  background: none;
  border: none;
  color: rgba(243,244,246,0.8);
  padding: 0 0.85rem;
  height: 100%;
  display: flex;
  align-items: center;
}

.icon-btn:hover { color: var(--off-white); }

.header-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.2);
  margin: 0 0.25rem;
}

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 2rem;
  background: var(--gold);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background var(--transition);
}

.cta-btn:hover { background: var(--gold-hover); }

/* ========== ANNOUNCE ========== */
.announce-strip {
  background: var(--blue-black);
  height: var(--announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1rem;
}

.announce-strip p {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--off-white);
  letter-spacing: 0.02em;
}

.announce-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2a6a9a;
  color: #fff;
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: background var(--transition);
}

.announce-arrow:hover { background: #3a8aba; }

/* ========== HERO ========== */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h) - var(--announce-h));
  min-height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--charcoal-deep);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(178,141,85,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(109,59,57,0.15) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 80% 30%, rgba(7,19,27,0.6) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0e 0%, #121218 40%, #0d0d12 100%);
  transition: opacity 0.5s ease;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.04;
  pointer-events: none;
}

.hero-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 40%, rgba(255,180,80,0.5), transparent),
    radial-gradient(1px 1px at 35% 25%, rgba(255,200,100,0.4), transparent),
    radial-gradient(1.5px 1.5px at 55% 55%, rgba(255,160,60,0.45), transparent),
    radial-gradient(1px 1px at 70% 35%, rgba(255,190,90,0.35), transparent),
    radial-gradient(2px 2px at 85% 60%, rgba(255,170,70,0.4), transparent),
    radial-gradient(1px 1px at 25% 70%, rgba(255,200,100,0.3), transparent),
    radial-gradient(1.5px 1.5px at 60% 20%, rgba(255,180,80,0.35), transparent),
    radial-gradient(1px 1px at 90% 45%, rgba(255,160,60,0.3), transparent);
  animation: ember-drift 12s ease-in-out infinite alternate;
  pointer-events: none;
  opacity: 0.7;
}

@keyframes ember-drift {
  from { transform: translateY(0) translateX(0); opacity: 0.5; }
  to { transform: translateY(-30px) translateX(8px); opacity: 0.85; }
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 50% 45%, transparent 20%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-figure {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: min(420px, 55vw);
  height: min(560px, 72vh);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 0.4s ease, transform 0.45s ease;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
}

.hero-figure.has-portrait {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-radius: 4px;
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.hero-figure.is-changing {
  opacity: 0;
  transform: translateX(-50%) translateY(16px) scale(0.97);
}

.hero-figure svg {
  width: 100%;
  height: 100%;
}

.hero-title-block {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 1.5rem 2.5rem;
  transition: opacity 0.3s ease;
}

.hero-title-block.is-changing { opacity: 0.3; }

.hero-epithet {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(243,244,246,0.55);
  margin-bottom: 0.5rem;
}

.hero-class-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--off-white);
  text-shadow: 0 4px 40px rgba(0,0,0,0.8), 0 0 60px rgba(0,0,0,0.4);
  line-height: 1.05;
}

.hero-roles {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.role-tag {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243,244,246,0.85);
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(178,141,85,0.5);
  background: rgba(0,0,0,0.35);
}

.hero-crest {
  position: relative;
  z-index: 3;
  margin-bottom: -1px;
  line-height: 0;
}

/* ========== SECTION BAND ========== */
.section-band {
  background: linear-gradient(180deg, #7a4540 0%, var(--maroon) 50%, #5a302e 100%);
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.section-band-thin { height: 28px; }

.band-crest {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== PATH TABS ========== */
.path-tabs {
  display: flex;
  justify-content: center;
  background: var(--charcoal);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 0;
}

.path-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.15rem 2rem;
  transition: color var(--transition), border-color var(--transition);
}

.path-tab:hover { color: var(--off-white); }

.path-tab.is-active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ========== DETAIL PANELS ========== */
.detail-panel {
  display: none;
  min-height: 520px;
}

.detail-panel.is-active {
  display: block;
  animation: fade-up 0.45s ease;
}

.detail-panel[hidden] { display: none !important; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Light overview panel */
.panel-light {
  background:
    linear-gradient(180deg, rgba(243,244,246,0.97) 0%, #e8eaee 100%),
    radial-gradient(ellipse 80% 50% at 70% 80%, rgba(120,130,150,0.12), transparent);
  color: var(--text-dark);
}

.detail-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: 520px;
}

.detail-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #a0a5ad;
  margin-bottom: 1rem;
}

.detail-label-on-dark { color: rgba(243,244,246,0.45); }

.detail-slogan {
  font-family: var(--font-ui);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: 1.25rem;
  max-width: 28ch;
}

.detail-slogan-light { color: var(--off-white); max-width: none; text-align: center; }

.detail-slogan-serif {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--off-white);
  line-height: 1.4;
  margin-bottom: 1.5rem;
  max-width: 22ch;
}

.detail-lore {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #4a4a4a;
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 42ch;
}

.detail-lore-muted {
  color: rgba(243,244,246,0.65);
  max-width: 40ch;
}

.attr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
  margin-bottom: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  max-width: 360px;
}

.attr-grid-dark {
  border-top-color: rgba(255,255,255,0.15);
}

.attr-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted-blue);
  margin-bottom: 0.25rem;
}

.attr-grid-dark .attr-label { color: rgba(122,138,154,0.9); }

.attr-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-dark);
}

.attr-grid-dark .attr-value { color: var(--off-white); }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  border: 1px solid rgba(0,0,0,0.35);
  background: #e0e2e6;
  color: var(--text-dark);
  transition: background var(--transition), border-color var(--transition);
}

.ghost-btn:hover {
  background: #d0d2d6;
  border-color: rgba(0,0,0,0.5);
}

.ghost-btn-light {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: var(--off-white);
}

.ghost-btn-light:hover {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
}

.detail-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  position: relative;
}

.detail-art svg {
  width: min(340px, 100%);
  height: auto;
  max-height: 420px;
}

.detail-art.has-portrait {
  overflow: hidden;
}

.detail-art .detail-portrait {
  width: min(340px, 100%);
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: center top;
  border-radius: 4px;
}

.detail-art-light svg,
.detail-art-light .detail-portrait {
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.2));
}

.detail-art-dark svg,
.detail-art-dark .detail-portrait {
  filter: drop-shadow(0 0 40px rgba(178,141,85,0.15));
}

/* Skills panel */
.panel-dark {
  background: var(--charcoal);
}

.detail-inner-skills {
  display: block;
  max-width: 1100px;
  padding: 3.5rem 2.5rem 4rem;
}

.skills-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.skill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.skill-card {
  padding: 1.35rem 1.5rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(178,141,85,0.2);
  transition: border-color var(--transition), background var(--transition), transform 0.25s ease;
}

.skill-card:hover {
  border-color: var(--gold);
  background: rgba(178,141,85,0.08);
  transform: translateY(-2px);
}

.skill-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.skill-name::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.skill-desc {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: rgba(243,244,246,0.65);
  line-height: 1.55;
}

/* Ascension panel */
.panel-ascend {
  background:
    radial-gradient(ellipse 50% 60% at 25% 50%, rgba(178,141,85,0.06) 0%, transparent 60%),
    linear-gradient(135deg, #0a1018 0%, var(--blue-black) 50%, #0c0c12 100%);
}

.detail-inner-ascend {
  grid-template-columns: 1fr 1fr;
}

.detail-copy-dark { color: var(--off-white); }

.ascension-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding: 1rem 1.4rem;
  border: 1px solid rgba(178,141,85,0.45);
  background: linear-gradient(135deg, rgba(178,141,85,0.12), rgba(0,0,0,0.3));
}

.ascension-badge-label {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.ascension-badge-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}

/* ========== CLASS PICKER ========== */
.class-section {
  background: var(--charcoal);
  padding: 4rem 2rem 5rem;
}

.class-section-header {
  text-align: center;
  margin-bottom: 2.75rem;
}

.choose-heading {
  font-family: var(--font-ui);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--off-white);
  margin-bottom: 0.75rem;
}

.choose-sub {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 420px;
  margin: 0 auto;
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .class-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
  }
}

.class-card {
  position: relative;
  aspect-ratio: 3 / 4.2;
  background: #0e0e0e;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), transform 0.25s ease;
}

.class-card:hover {
  transform: translateY(-3px);
  border-color: rgba(178,141,85,0.45);
}

.class-card:hover .card-portrait {
  filter: grayscale(0%) brightness(1.05);
}

.class-card:hover .card-name {
  color: var(--gold);
}

.class-card.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(178,141,85,0.3), 0 8px 24px rgba(0,0,0,0.4);
}

.class-card.is-active .card-portrait {
  filter: grayscale(0%) brightness(1.08);
}

.class-card.is-active .card-name {
  color: var(--gold);
}

.card-portrait {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: #121212;
  filter: grayscale(100%) brightness(0.88);
  transition: filter 0.4s ease;
  position: relative;
  overflow: hidden;
}

.card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  position: relative;
  z-index: 1;
}

.card-portrait::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, transparent 0%, #0a0a0a 92%);
  pointer-events: none;
  z-index: 2;
}

.card-portrait svg {
  width: 72%;
  height: 85%;
  position: relative;
  z-index: 1;
}

.card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.5rem 0.85rem;
  gap: 0.35rem;
}

.card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--off-white);
}

.card-icon svg {
  width: 18px;
  height: 18px;
}

.card-name {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--off-white);
  transition: color var(--transition);
  text-align: center;
}

/* ========== FOOTER ========== */
.site-footer {
  background: var(--black);
  padding: 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.site-footer p {
  font-size: 0.7rem;
  color: #555;
  letter-spacing: 0.04em;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 960px) {
  .detail-inner,
  .detail-inner-ascend {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 1.5rem;
  }

  .detail-art { min-height: 280px; order: -1; }
  .detail-inner-ascend .detail-art { order: -1; }

  .class-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .skill-grid { grid-template-columns: 1fr; }

  .mega-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav-mega {
    width: min(680px, calc(100vw - 1.5rem));
    left: 0;
  }
}

@media (max-width: 720px) {
  .mega-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-mega {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    top: var(--header-h);
    min-width: 0;
    max-height: calc(100vh - var(--header-h) - 1rem);
    overflow-y: auto;
  }
}

@media (max-width: 640px) {
  .cta-btn { padding: 0 1.1rem; font-size: 0.75rem; }
  .brand-logo { font-size: 0.9rem; letter-spacing: 0.08em; }
  .header-left { gap: 0.85rem; }
  .header-link { font-size: 0.75rem; }
  .announce-strip p { font-size: 0.7rem; text-align: center; }
  .path-tab { padding: 1rem 0.85rem; font-size: 0.7rem; letter-spacing: 0.1em; }
  .class-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hero { min-height: 520px; }
  .hero-class-name { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-particles, .hero-figure, .hero-title-block, .detail-panel {
    animation: none !important;
    transition: none !important;
  }
}

/* ========== HEADER TEXT LINKS ========== */
.header-text-link {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(243,244,246,0.75);
  padding: 0.5rem 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-text-link:hover,
.header-text-link.is-current { color: var(--off-white); }
.header-text-link.is-current { color: var(--gold); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ========== HOME HERO ========== */
.home-hero {
  position: relative;
  min-height: calc(100vh - var(--header-h) - var(--announce-h));
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--charcoal-deep);
  padding: 4rem 1.5rem 5rem;
}

.home-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 40% 45%, rgba(178,141,85,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 85% 20%, rgba(109,59,57,0.22) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 10% 80%, rgba(7,19,27,0.7) 0%, transparent 55%),
    linear-gradient(180deg, #050508 0%, #0e0e14 45%, #0a0a10 100%);
}

.home-hero-mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  opacity: 0.28;
  transform: scale(1.05);
  filter: saturate(0.75) brightness(0.55);
  pointer-events: none;
}

.mosaic-tile {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 0;
}

.home-hero-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, transparent 15%, rgba(0,0,0,0.55) 65%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

.home-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
}

.home-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.home-logo {
  max-width: min(280px, 70vw);
  max-height: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.6));
}

.home-wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--off-white);
}

.home-kicker {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.home-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--off-white);
  text-shadow: 0 4px 40px rgba(0,0,0,0.8);
  margin-bottom: 1.1rem;
}

.home-subcopy {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.65;
  color: rgba(243,244,246,0.78);
  max-width: 48ch;
  margin: 0 auto 2rem;
}

.home-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  background: var(--gold);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  transition: background var(--transition), transform 0.2s ease;
}
.btn-primary:hover { background: var(--gold-hover); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  background: transparent;
  color: var(--off-white);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid rgba(243,244,246,0.45);
  transition: background var(--transition), border-color var(--transition);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
}

/* ========== FEATURES ========== */
.features {
  background: var(--blue-black);
  padding: 3.5rem 1.5rem 4rem;
  border-top: 1px solid rgba(178,141,85,0.15);
}

.features-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.feature-card {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(178,141,85,0.22);
  padding: 1.75rem 1.5rem;
  transition: border-color var(--transition), transform 0.25s ease;
}
.feature-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.feature-icon {
  color: var(--gold);
  margin-bottom: 1rem;
  display: flex;
}

.feature-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--off-white);
  margin-bottom: 0.65rem;
}

.feature-text {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(243,244,246,0.65);
}

/* ========== SURVEY PAGE ========== */
.page-survey {
  background: var(--black);
}

.survey-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.survey-hero {
  text-align: center;
  margin-bottom: 2.5rem;
}

.survey-mark {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(178,141,85,0.4);
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.survey-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--off-white);
  margin-bottom: 1rem;
}

.survey-intro {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.65;
  color: rgba(243,244,246,0.72);
  max-width: 46ch;
  margin: 0 auto;
}

.survey-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.survey-q {
  border: 1px solid rgba(178,141,85,0.25);
  background: var(--charcoal);
  padding: 1.35rem 1.4rem 1.5rem;
}

.survey-q legend {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  padding: 0 0.35rem;
  margin-bottom: 0.75rem;
}

.survey-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  margin: 0.35rem 0;
  border: 1px solid transparent;
  background: rgba(0,0,0,0.25);
  cursor: pointer;
  font-size: 0.9rem;
  color: rgba(243,244,246,0.88);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.survey-option:hover {
  border-color: rgba(178,141,85,0.45);
  background: rgba(178,141,85,0.08);
}
.survey-option:has(input:checked) {
  border-color: var(--gold);
  background: rgba(178,141,85,0.12);
}
.survey-option input {
  margin-top: 0.2rem;
  accent-color: var(--gold);
}

.survey-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.survey-result {
  margin-top: 1rem;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(178,141,85,0.35);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(178,141,85,0.1), transparent 60%),
    var(--charcoal);
  animation: fade-up 0.45s ease;
}

.survey-result-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--off-white);
  margin-bottom: 0.75rem;
}

.survey-result-blurb {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: rgba(243,244,246,0.7);
  margin-bottom: 1.5rem;
  line-height: 1.55;
}

.survey-result-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.survey-result-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(178,141,85,0.2);
}

.result-rank {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--gold);
  width: 1.5rem;
  text-align: center;
}

.result-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--off-white);
  margin-bottom: 0.2rem;
}
.result-name:hover { color: var(--gold); }

.result-meta {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ========== HOME / SURVEY RESPONSIVE ========== */
@media (max-width: 960px) {
  .features-inner {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  .home-hero-mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .home-hero { min-height: 520px; padding: 3rem 1.15rem 4rem; }
  .home-cta-row { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-ghost { width: 100%; }
  .header-text-link { display: none; }
  .home-hero-mosaic {
    grid-template-columns: repeat(3, 1fr);
    opacity: 0.22;
  }
  .survey-actions { flex-direction: column; }
  .survey-actions .btn-primary,
  .survey-actions .btn-ghost { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero, .feature-card, .survey-result {
    animation: none !important;
    transition: none !important;
  }
}

/* ========== CLASS EXPERTS ========== */
.page-experts { background: #000; }
.experts-main { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.experts-hero { text-align: center; margin-bottom: 2.5rem; }
.experts-eyebrow {
  font-family: var(--font-display, Cinzel, serif);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--gold, #B28D55);
  margin-bottom: 0.75rem;
}
.experts-title {
  font-family: var(--font-display, Cinzel, serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--off-white, #F3F4F6);
  margin-bottom: 0.9rem;
}
.experts-intro {
  max-width: 640px;
  margin: 0 auto;
  color: var(--muted, #9a9a9a);
  line-height: 1.6;
}
.experts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1100px) {
  .experts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .experts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .experts-grid { grid-template-columns: 1fr; }
}
a.expert-card {
  position: relative;
  min-height: 340px;
  border: 1px solid rgba(178, 141, 85, 0.35);
  border-radius: 4px;
  overflow: hidden;
  background: #0e0e0e;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
a.expert-card:hover {
  border-color: var(--gold, #B28D55);
  transform: translateY(-3px);
}
.expert-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(40%);
  transform: scale(1.02);
  transition: filter 0.25s ease, transform 0.25s ease;
  z-index: 0;
}
a.expert-card:hover .expert-card-photo {
  filter: grayscale(0%);
  transform: scale(1.06);
}
.expert-card-photo--fallback {
  background: linear-gradient(145deg, #1a1a1a, #2a2218);
}
.expert-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}
.expert-card-body {
  position: relative;
  z-index: 2;
  padding: 1.1rem 1rem 1.15rem;
  width: 100%;
}
.expert-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold, #B28D55);
  margin-bottom: 0.35rem;
}
.expert-name {
  font-family: var(--font-display, Cinzel, serif);
  font-size: 1.25rem;
  color: var(--off-white, #F3F4F6);
  margin-bottom: 0.45rem;
}
.expert-why {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(243,244,246,0.78);
  margin-bottom: 0.75rem;
  min-height: 3.6em;
}
.expert-link {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--gold, #B28D55);
}

/* Expert profile pages */
.page-expert-profile { background: #000; color: var(--off-white, #F3F4F6); }
.expert-profile-main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.expert-back {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: rgba(243,244,246,0.75);
  font-size: 0.9rem;
}
.expert-back:hover { color: var(--gold, #B28D55); }
.expert-profile {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 860px) {
  .expert-profile { grid-template-columns: 1fr; }
}
.expert-profile-media {
  border: 1px solid rgba(178,141,85,0.35);
  overflow: hidden;
  background: #121212;
  min-height: 420px;
}
.expert-profile-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center top;
}
.expert-profile-photo--fallback {
  min-height: 420px;
  background: linear-gradient(145deg, #1a1a1a, #2a2218);
}
.expert-profile-name {
  font-family: var(--font-display, Cinzel, serif);
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin: 0.25rem 0 0.75rem;
}
.expert-profile-tagline {
  color: rgba(243,244,246,0.85);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.expert-section-title {
  font-family: var(--font-display, Cinzel, serif);
  color: var(--gold, #B28D55);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.25rem 0 0.6rem;
}
.expert-profile-body {
  color: rgba(243,244,246,0.8);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.expert-social-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.expert-social {
  display: inline-block;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(178,141,85,0.45);
  color: var(--off-white, #F3F4F6);
  font-size: 0.85rem;
}
.expert-social:hover {
  border-color: var(--gold, #B28D55);
  color: var(--gold, #B28D55);
}
.expert-social-note {
  font-size: 0.8rem;
  color: var(--muted, #9a9a9a);
  margin-bottom: 1.25rem;
}
.expert-class-cta { display: inline-block; margin-top: 0.5rem; }

.header-right { gap: 0; }

/* Hub footer */
.hub-footer {
  background: #000;
  border-top: 1px solid rgba(178, 141, 85, 0.25);
  padding: 2rem 1.5rem;
  text-align: center;
}
.hub-footer-inner { max-width: 900px; margin: 0 auto; }
.hub-footer-brand {
  display: inline-block;
  font-family: var(--font-display, Cinzel, serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--off-white, #F3F4F6);
  margin-bottom: 0.85rem;
}
.hub-footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  margin-bottom: 0.9rem;
}
.hub-footer-nav a {
  color: rgba(243,244,246,0.75);
  font-size: 0.85rem;
}
.hub-footer-nav a:hover { color: var(--gold, #B28D55); }
.hub-footer-copy {
  color: var(--muted, #9a9a9a);
  font-size: 0.8rem;
  line-height: 1.5;
}

.brand-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.1rem;
  padding-left: 0.15rem;
  overflow: visible;
}
.brand-logo .brand-mark {
  width: 1.85rem;
  height: 1.85rem;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(178, 141, 85, 0.35));
}
.brand-logo .brand-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display, Cinzel, serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--off-white, #F3F4F6);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.85),
    0 0 12px rgba(0,0,0,0.45);
}
.brand-logo::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 50%;
  width: 2.6rem;
  height: 2.6rem;
  transform: translateY(-50%);
  background: url("../assets/bdo-logo.png") center / contain no-repeat;
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
  filter: blur(0.2px);
}

.home-logo, .survey-mark {
  width: min(160px, 36vw);
  height: auto;
  display: block;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 0 18px rgba(178, 141, 85, 0.28));
}
.survey-mark { width: min(120px, 30vw); }

/* Floating class-expert card on class pages */
.class-expert-float {
  position: fixed;
  top: 5.75rem;
  left: 1rem;
  z-index: 80;
  width: 200px;
  min-height: 260px;
  max-height: 300px;
  border: 1px solid rgba(178, 141, 85, 0.45);
  border-radius: 4px;
  overflow: hidden;
  background: #0e0e0e;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.class-expert-float:hover {
  border-color: var(--gold, #B28D55);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}

/* Expert float: hide when it would overlap guide content (narrow viewports) */
.class-expert-float.is-scrolled-away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}

.class-expert-float .expert-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(30%);
  transition: filter 0.2s ease, transform 0.35s ease;
}
.class-expert-float:hover .expert-card-photo {
  filter: grayscale(0%);
  transform: scale(1.04);
}
.class-expert-float .expert-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0.88) 100%);
  z-index: 1;
}
.class-expert-float .expert-card-body {
  position: relative;
  z-index: 2;
  padding: 0.75rem 0.85rem 0.9rem;
  width: 100%;
}
.class-expert-float .expert-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold, #B28D55);
}
.class-expert-float .expert-name {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #f2efe8;
  line-height: 1.2;
}
.class-expert-float .expert-why {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(242, 239, 232, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.class-expert-float .expert-link {
  font-size: 0.72rem;
  color: var(--gold, #B28D55);
  font-weight: 600;
}
@media (max-width: 900px) {
  .class-expert-float {
    width: 160px;
    min-height: 210px;
    top: 5.25rem;
    left: 0.65rem;
  }
  .class-expert-float .expert-why { display: none; }
}
@media (max-width: 640px) {
  .class-expert-float {
    width: 132px;
    min-height: 168px;
  }
  .class-expert-float .expert-kicker { font-size: 0.58rem; }
  .class-expert-float .expert-name { font-size: 0.9rem; }
}

/* Split header: Awakening | Succession hit areas on class pages */
.classes_top {
  position: relative;
  isolation: isolate;
}
.classes_top .classes_title {
  position: relative;
  z-index: 6;
  pointer-events: none;
}
.class-path-split {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 5;
}
.class-path-hit {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
  color: #f5f0e6;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  min-height: 100%;
  padding: 1.5rem 1rem;
  text-align: center;
}
.class-path-hit--left {
  background: linear-gradient(90deg, rgba(0,0,0,0.28), rgba(0,0,0,0.05));
}
.class-path-hit--right {
  background: linear-gradient(270deg, rgba(0,0,0,0.28), rgba(0,0,0,0.05));
}
.class-path-hit--left:hover,
.class-path-hit--left:focus-visible {
  background: linear-gradient(90deg, rgba(178, 141, 85, 0.45), rgba(178, 141, 85, 0.08));
  outline: none;
}
.class-path-hit--right:hover,
.class-path-hit--right:focus-visible {
  background: linear-gradient(270deg, rgba(90, 140, 210, 0.42), rgba(90, 140, 210, 0.08));
  outline: none;
}
.class-path-hit-label {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
}
.class-path-hit-hint {
  font-size: 0.85rem;
  opacity: 0.85;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.class-path-hit.is-disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.4;
  filter: grayscale(0.4);
}
.class-path-hit.is-disabled .class-path-hit-hint {
  opacity: 0.7;
}
.class-path-split.is-single .class-path-hit {
  flex-basis: 100%;
}
@media (max-width: 640px) {
  .class-path-hit-label { font-size: 1.05rem; letter-spacing: 0.05em; }
  .class-path-hit-hint { font-size: 0.72rem; }
}

/* Path subpages (awakening / succession): small Back on hero */
.path-page-back {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem 0.4rem 0.55rem;
  border: 1px solid rgba(178, 141, 85, 0.55);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #f5f0e6;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.path-page-back:hover,
.path-page-back:focus-visible {
  background: rgba(178, 141, 85, 0.35);
  border-color: rgba(178, 141, 85, 0.9);
  color: #fff;
  outline: none;
  text-decoration: none;
}
.path-page-back-arrow {
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.9;
}
@media (max-width: 640px) {
  .path-page-back {
    top: 0.65rem;
    left: 0.65rem;
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem 0.35rem 0.45rem;
  }
}

/* Keep Back clear of the left floating expert card (Awakening path pages) */
body:has(.class-expert-float--left) .path-page-back {
  left: calc(1rem + 200px + 0.85rem);
  z-index: 90;
}
@media (max-width: 900px) {
  body:has(.class-expert-float--left) .path-page-back {
    left: calc(0.65rem + 160px + 0.75rem);
  }
}
@media (max-width: 640px) {
  body:has(.class-expert-float--left) .path-page-back {
    left: calc(0.5rem + 132px + 0.65rem);
  }
}
.path-page-banner {
  max-width: 1100px;
  margin: 0.5rem auto 1rem;
  padding: 0 1rem;
}
.path-page-banner h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: #f2efe8;
}
.path-page-banner p {
  margin: 0.35rem 0 0;
  color: rgba(242,239,232,0.75);
}

/* Inline path detail (moved from class-page learn-more layer) */
.path-detail-panel {
  max-width: 980px;
  margin: 1.25rem auto 3rem;
  padding: 1.25rem 1.35rem 1.5rem;
  border: 1px solid rgba(178, 141, 85, 0.35);
  border-radius: 4px;
  background: rgba(14, 14, 14, 0.92);
  color: #f2efe8;
}
.path-detail-panel .feature ul {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.path-detail-panel .feature .title {
  color: var(--gold, #B28D55);
  margin-right: 0.55rem;
  font-weight: 600;
}
.path-detail-panel .desc {
  margin: 0;
  line-height: 1.55;
  color: rgba(242, 239, 232, 0.88);
}

/* Path-specific expert cards */
.expert-card--awakening { box-shadow: inset 0 0 0 1px rgba(178, 141, 85, 0.25); }
.expert-card--succession { box-shadow: inset 0 0 0 1px rgba(90, 140, 210, 0.28); }
.expert-card--talent { box-shadow: inset 0 0 0 1px rgba(180, 120, 200, 0.3); }
.expert-card--awakening:hover { border-color: #B28D55; }
.expert-card--succession:hover { border-color: #6a9ad8; }
.expert-card--talent:hover { border-color: #c09ad8; }
.expert-path-badge {
  display: inline-block;
  margin: 0.35rem 0 0.75rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(178, 141, 85, 0.45);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold, #B28D55);
}

.expert-card--ascension { box-shadow: inset 0 0 0 1px rgba(180, 120, 200, 0.3); }
.expert-card--ascension:hover { border-color: #c09ad8; }

/* Left = Awakening expert, Right = Succession expert */
.class-expert-float--left {
  left: 1rem;
  right: auto;
}
.class-expert-float--right {
  left: auto;
  right: 1rem;
  border-color: rgba(90, 140, 210, 0.5);
}
.class-expert-float--right:hover {
  border-color: #6a9ad8;
}
@media (max-width: 900px) {
  .class-expert-float--right {
    right: 0.65rem;
  }
}
@media (max-width: 640px) {
  .class-expert-float--right {
    right: 0.5rem;
  }
}

/* Path pages: match main class chrome */
.path-page .classes_top {
  position: relative;
}
.path-page .path-page-banner {
  max-width: 1100px;
  margin: 1.25rem auto 0.75rem;
  padding: 0 1.25rem;
}
.path-page .path-page-banner h1 {
  margin: 0.35rem 0 0.25rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #f2efe8;
  letter-spacing: 0.04em;
}
.path-page .path-page-banner p {
  margin: 0;
  color: rgba(242, 239, 232, 0.72);
}
.path-page .classes_top_symbol {
  display: flex;
  justify-content: center;
  margin: -2.5rem auto 1.5rem;
  position: relative;
  z-index: 4;
  pointer-events: none;
}
.path-page .classes_top_symbol .img_character_symbol {
  width: min(160px, 28vw);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}
/* Do not shrink mid/footer crest strips */
.path-page .classes_top_symbol.classes_top_symbol--mid .img_character_symbol,
.path-page .classes_top_symbol.classes_top_symbol--footer .img_character_symbol {
  width: 100%;
  height: 144px;
  object-fit: cover;
}
.path-page .class_section {
  position: relative;
}
.path-page-pathchip {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 6;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(178, 141, 85, 0.55);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--gold, #B28D55);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Path pages: title overlaid on hero near bottom; Awakening left half, Succession right half */
.classes_wrap .classes_top .classes_title.path-page-title {
  position: absolute !important;
  bottom: 3.2rem !important;
  margin: 0;
  padding: 0 1.25rem;
  box-sizing: border-box;
  display: block;
  color: #fff;
  font-size: clamp(1.45rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: none;
  z-index: 16;
  pointer-events: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}
.classes_wrap .classes_top .classes_title.path-page-title--awakening {
  left: 0 !important;
  right: auto !important;
  width: 50%;
}
.classes_top .classes_title.path-page-title--ascension {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  text-align: center !important;
}
.classes_wrap .classes_top .classes_title.path-page-title--succession {
  left: 50% !important;
  right: auto !important;
  width: 50%;
}
@media (max-width: 640px) {
  .classes_wrap .classes_top .classes_title.path-page-title {
    bottom: 2.4rem !important;
    font-size: clamp(1.15rem, 5vw, 1.65rem);
    letter-spacing: 0.04em;
    padding: 0 0.75rem;
  }
}

/* Combo guide (path pages) */
.combo-guide {
  position: relative;
  z-index: 3;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
}
.combo-guide-inner {
  padding: 1.35rem 1.4rem 1.5rem;
  border: 1px solid rgba(178, 141, 85, 0.35);
  border-radius: 6px;
  background: rgba(14, 14, 14, 0.94);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  width: 100%;
}
.combo-kicker {
  margin: 0 0 0.35rem;
  color: var(--gold, #B28D55);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.combo-guide-title {
  margin: 0 0 1.25rem;
  color: #f2efe8;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing: 0.04em;
}
.combo-chain {
  margin: 0 0 1.35rem;
}
.combo-chain-title {
  margin: 0 0 0.65rem;
  color: var(--gold, #B28D55);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.combo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.combo-step {
  display: grid;
  grid-template-columns: minmax(9.5rem, 13rem) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}
.combo-step .combo-skills {
  flex-wrap: wrap;
  min-width: 0;
}
.combo-keys kbd {
  display: inline-block;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(178, 141, 85, 0.45);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: #f5f0e6;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: normal;
}
.combo-skills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}
.combo-skill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
}
.combo-skill-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(178, 141, 85, 0.35);
  background: #0a0a0a;
  object-fit: cover;
  flex: 0 0 auto;
}
.combo-skill-name {
  color: #f2efe8;
  font-size: 0.92rem;
  font-weight: 600;
}
.combo-skill-arrow {
  color: rgba(178, 141, 85, 0.9);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0 0.15rem;
}
.combo-repeat {
  margin: 0.25rem 0 1.1rem;
  color: #f2efe8;
  font-size: 1rem;
}
.combo-notes {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.combo-notes-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 0.45rem;
  background: #b8433a;
}
.combo-notes-title {
  margin: 0 0 0.7rem;
  color: #f2efe8;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.combo-notes ul {
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(242, 239, 232, 0.88);
  line-height: 1.55;
}
.combo-notes li {
  margin: 0 0 0.55rem;
}
.combo-notes li:last-child {
  margin-bottom: 0;
}
.combo-note-skills {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  vertical-align: middle;
}
.combo-notes .combo-skill-icon {
  width: 28px;
  height: 28px;
}
.combo-notes .combo-skill-name {
  font-size: 0.88rem;
}
.classes_wrap .classes_top_symbol.classes_top_symbol--mid,
.classes_wrap .classes_top_symbol.classes_top_symbol--footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  pointer-events: none;
}

/* Mid crests: same height as full crests (144px), width matches guide cards */
.classes_wrap .classes_top_symbol.classes_top_symbol--mid {
  box-sizing: border-box;
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  height: 144px !important;
  /* Tip-overlap the card ABOVE only; sit above the card below (no bury) */
  margin: -1.35rem auto 0 !important;
  padding: 0 1.25rem !important; /* same inset as .combo-guide cards */
  overflow: hidden !important;
  z-index: 5;
}
.classes_wrap .classes_top_symbol.classes_top_symbol--mid .img_character_symbol {
  position: static !important;
  left: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 144px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}

/* Bottom crest: full-width strip into Choose a Class */
.classes_wrap .classes_top_symbol.classes_top_symbol--footer {
  width: 100% !important;
  max-width: none !important;
  height: 144px !important;
  margin: -1.35rem auto -5.5rem !important; /* tip-overlap Class Specifics; still joins Choose a Class */
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 6;
}
.classes_wrap .classes_top_symbol.classes_top_symbol--footer .img_character_symbol {
  position: static !important;
  left: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 144px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}
.combo-step-extra {
  color: rgba(242, 239, 232, 0.72);
  font-size: 0.85rem;
  font-weight: 500;
}
.combo-skill-name--solo {
  color: #f2efe8;
  font-size: 0.92rem;
  font-weight: 600;
}
/* Keep note text close to the skill chip before it */
.combo-skills .combo-skill + .combo-skill-name--solo {
  margin-left: -0.3rem;
}
.class-mobility .combo-notes {
  margin-top: 0.85rem;
}
@media (max-width: 720px) {
  .combo-step {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .combo-guide-inner {
    padding: 1.1rem 1rem 1.2rem;
  }
}

/* Footer crest joins Choose a Class; mid crest stays clear of Mobility */
.classes_wrap:has(.classes_top_symbol--footer) > .select_classes_wrap.select_sub {
  position: relative;
  z-index: 2;
  padding-top: 7.5rem;
}
@media (max-width: 640px) {
  .classes_top_symbol--footer {
    height: 110px;
    margin-bottom: -4.25rem;
  }
  .classes_wrap:has(.classes_top_symbol--footer) > .select_classes_wrap.select_sub {
    padding-top: 6rem;
  }
}

/* Class Specifics */
.specifics-row {
  grid-template-columns: 1fr auto;
}
.specifics-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.specifics-tag {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(178, 141, 85, 0.45);
  border-radius: 999px;
  color: var(--gold, #B28D55);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.specifics-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1.15rem;
}
.specifics-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}
.specifics-stat-label {
  color: rgba(242, 239, 232, 0.65);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.specifics-stat-value {
  color: #f2efe8;
  font-size: 1.05rem;
  font-weight: 700;
}
@media (max-width: 720px) {
  .specifics-stats {
    grid-template-columns: 1fr;
  }
  .specifics-row {
    grid-template-columns: 1fr;
  }
  .specifics-meta {
    justify-content: flex-start;
  }
}
/* Path hero quick stats + section jump links: under nav, over banner */
.path-hero-panel {
  --path-stat-chip: 13.25rem;
  --path-stat-gap: 0.75rem;
  --path-stats-row-width: calc(var(--path-stat-chip) * 3 + var(--path-stat-gap) * 2); /* ~660px at 16px root */
  position: absolute;
  top: 50%;
  left: 6.75rem;
  right: auto;
  transform: translateY(-50%);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  width: var(--path-stats-row-width);
  max-width: calc(100% - 8rem);
  pointer-events: none;
}
.path-hero-stats {
  --path-stat-chip: 13.25rem;
  --path-stat-gap: 0.75rem;
  --path-stats-row-width: calc(var(--path-stat-chip) * 3 + var(--path-stat-gap) * 2);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--path-stat-gap);
  width: var(--path-stats-row-width);
  pointer-events: none;
}
.path-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  box-sizing: border-box;
  width: var(--path-stat-chip);
  min-width: var(--path-stat-chip);
  flex: 0 0 var(--path-stat-chip);
  padding: 0.75rem 1.15rem;
  border: 1px solid rgba(178, 141, 85, 0.5);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}
.path-hero-stat-label {
  color: rgba(242, 239, 232, 0.72);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.path-hero-stat-value {
  color: #f5f0e6;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: left;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}
.path-hero-jumps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: var(--path-stats-row-width, 37.5rem); /* 3×12rem chips + 2×0.75rem gaps = 600px at 16px root */
  max-width: 100%;
  pointer-events: auto;
}
.path-hero-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(178, 141, 85, 0.55);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #f5f0e6;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-align: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.path-hero-jump:hover,
.path-hero-jump:focus-visible {
  background: rgba(178, 141, 85, 0.35);
  border-color: rgba(178, 141, 85, 0.95);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}
html {
  scroll-behavior: smooth;
}
#skill-rotation,
#class-mobility,
#class-specifics,
#class-addons {
  scroll-margin-top: 5.5rem;
}
body:has(.class-expert-float--left) .path-hero-panel {
  left: calc(1rem + 200px + 0.85rem + 5.75rem);
  max-width: min(700px, calc(100% - 18rem));
}

@media (max-width: 900px) {
  .path-hero-panel {
    top: 50%;
    left: 6.25rem;
    max-width: calc(100% - 7rem);
  }
  body:has(.class-expert-float--left) .path-hero-panel {
    left: calc(0.65rem + 160px + 0.75rem + 5.25rem);
  }
  .path-hero-stat {
    padding: 0.65rem 0.9rem;
  }
  .path-hero-stat-label { font-size: 0.7rem; }
  .path-hero-stat-value { font-size: 1.15rem; }
  .path-hero-jump {
    min-height: 2.45rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.88rem;
  }
}
@media (max-width: 640px) {
  .path-hero-panel {
    top: 50%;
    left: 5.75rem;
    max-width: calc(100% - 6.25rem);
    gap: 0.5rem;
  }
  body:has(.class-expert-float--left) .path-hero-panel {
    left: calc(0.5rem + 132px + 0.65rem + 4.75rem);
  }
  .path-hero-stat-label {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }
  .path-hero-stat-value { font-size: 1.05rem; }
}

@media (max-width: 900px) {
  .path-hero-panel,
  .path-hero-stats {
    --path-stat-chip: 11.25rem;
  }
}
@media (max-width: 640px) {
  .path-hero-stats {
    flex-wrap: wrap;
    width: min(var(--path-stats-row-width), 100%);
  }
}

/* Awakening hero panel: force right side (must follow all .path-hero-panel left rules) */
.path-hero-panel.path-hero-panel--right {
  left: auto !important;
  right: 6.75rem !important;
  align-items: flex-end;
}
body:has(.class-expert-float--left) .path-hero-panel.path-hero-panel--right {
  left: auto !important;
  right: 6.75rem !important;
  max-width: calc(100% - 8rem);
}
@media (max-width: 900px) {
  .path-hero-panel.path-hero-panel--right {
    left: auto !important;
    right: 6.25rem !important;
    max-width: calc(100% - 7rem);
  }
  body:has(.class-expert-float--left) .path-hero-panel.path-hero-panel--right {
    left: auto !important;
    right: 6.25rem !important;
  }
}
@media (max-width: 640px) {
  .path-hero-panel.path-hero-panel--right {
    left: auto !important;
    right: 5.75rem !important;
    max-width: calc(100% - 6.25rem);
  }
  body:has(.class-expert-float--left) .path-hero-panel.path-hero-panel--right {
    left: auto !important;
    right: 5.75rem !important;
  }
}

/* Crest / card spacing on path guides */
/* Top crest: modest gap before first guide card on awakening/succession path pages */
.classes_wrap > .classes_top_symbol:not(.classes_top_symbol--mid):not(.classes_top_symbol--footer):has(+ .combo-guide) {
  margin-bottom: 1.15rem !important;
  z-index: 4;
}
/* Class selection landings: no gap between crest divider and Choose a Class */
.classes_wrap > .classes_top_symbol:not(.classes_top_symbol--mid):not(.classes_top_symbol--footer):has(+ .select_classes_wrap) {
  margin-bottom: 0 !important;
  z-index: 4;
}
.classes_wrap > .classes_top_symbol:not(.classes_top_symbol--mid):not(.classes_top_symbol--footer) + .select_classes_wrap {
  padding-top: 0 !important;
}
/* Guide cards: no vertical margins; mid/footer crests handle flush joins via overlap */
.classes_wrap > .combo-guide {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
  /* One shared layer (5) for guide cards and mid crests: later siblings always paint on top of earlier ones.
     Stacking follows page order, so nothing lower on the page is ever drawn beneath the card or crest above it. */
  z-index: 5;
}

.classes_wrap > .combo-guide + .classes_top_symbol--mid,
.classes_wrap > .classes_top_symbol--mid + .combo-guide {
  /* no extra offset; flush join */
}

/* Cards below a crest paint above that crest by page order (same layer 5, later sibling wins).
   Previously z-index 6 here put every card ABOVE the next mid crest (z5), so the crest tip that
   overlaps the card above was drawn underneath it. */
.classes_wrap > .classes_top_symbol--mid + .combo-guide,
.classes_wrap > .classes_top_symbol:not(.classes_top_symbol--mid):not(.classes_top_symbol--footer) + .combo-guide {
  position: relative;
  z-index: 5;
}

/* Mid crests after guide cards: tip-overlap card above; next card starts below crest */
.classes_wrap > #skill-rotation + .classes_top_symbol--mid,
.classes_wrap > #class-mobility + .classes_top_symbol--mid,
.classes_wrap > #class-specifics + .classes_top_symbol--mid,
.classes_wrap > #class-addons + .classes_top_symbol--mid,
.classes_wrap > #class-video + .classes_top_symbol--mid {
  margin-top: -1.35rem !important;
  margin-bottom: 0 !important;
  z-index: 5;
}

/* Class Addons: BDO skill add-on card layout */
.addon-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.addon-card {
  display: grid;
  grid-template-columns: minmax(12rem, 1.05fr) minmax(12rem, 1.25fr) 3.25rem;
  align-items: stretch;
  min-height: 5.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(20, 20, 22, 0.92);
  overflow: hidden;
}
.addon-card-skill {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1.75rem 0.75rem 0.75rem;
  background: linear-gradient(90deg, rgba(12, 12, 14, 0.98), rgba(32, 32, 36, 0.92));
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  z-index: 2;
}
.addon-card-icon-wrap {
  position: relative;
  width: 56px;
  flex: 0 0 56px;
}
.addon-card-icon {
  display: block;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(178, 141, 85, 0.35);
  border-radius: 2px;
  object-fit: cover;
  background: #0a0a0a;
}
.addon-card-icon-swap {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translate(-50%, 50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 0.95rem;
  border-radius: 2px;
  background: rgba(24, 24, 28, 0.95);
  color: rgba(242, 239, 232, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.addon-card-name {
  margin: 0 0 0.25rem;
  color: #f2efe8;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.addon-card-desc {
  margin: 0;
  color: rgba(242, 239, 232, 0.58);
  font-size: 0.78rem;
  line-height: 1.35;
}
.addon-card-effects {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.75rem 0.9rem 0.75rem 1.15rem;
  background: rgba(16, 16, 18, 0.96);
  z-index: 1;
}
.addon-card-effects-title {
  margin: 0;
  color: #c5a059;
  font-size: 0.78rem;
  font-weight: 600;
}
.addon-card-effects-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}
.addon-effect {
  color: rgba(242, 239, 232, 0.88);
  font-size: 0.82rem;
  line-height: 1.35;
}
.addon-effect-value {
  color: #e7bc5c;
  font-weight: 600;
}
.addon-card-swap {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.55);
  background: rgba(48, 50, 56, 0.95);
  color: rgba(242, 239, 232, 0.92);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.addon-card-swap:hover,
.addon-card-swap:focus-visible {
  background: rgba(70, 74, 84, 0.98);
  color: #fff;
  outline: none;
}
.addon-list-note {
  margin: 0.85rem 0 0;
  color: rgba(242, 239, 232, 0.55);
  font-size: 0.82rem;
}
@media (max-width: 720px) {
  .addon-card {
    grid-template-columns: 1fr;
  }
  .addon-card-skill {
    clip-path: none;
    padding-right: 0.75rem;
  }
  .addon-card-swap {
    min-height: 2.75rem;
    border-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.55);
  }
}

/* === Inline skill descriptions (right of icon) === */
.combo-skills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  min-width: 0;
}

.combo-skill-desc,
.combo-skills > .combo-step-extra,
.combo-skill > .combo-step-extra,
.combo-skills .combo-skill-name--solo {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  color: rgba(242, 239, 232, 0.72);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Short parentheticals stay tight beside the chip */
.combo-skills .combo-skill-name--solo {
  flex: 0 1 auto;
}

/* Ability rows: keys | icon + description (desc never under keys on desktop) */
.combo-step:has(.combo-skill-desc),
.combo-step:has(.combo-skills > .combo-step-extra) {
  align-items: start;
}

.combo-step:has(.combo-skill-desc) .combo-keys,
.combo-step:has(.combo-skills > .combo-step-extra) .combo-keys {
  padding-top: 0.35rem;
}

/* Old block-level extras under the row, kept out of the way if any remain */
div.combo-step-extra {
  display: none;
}

/* === Guide video embed === */
.guide-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0.35rem 0 0.15rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(178, 141, 85, 0.35);
  background: #0a0a0a;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.guide-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  z-index: 1;
}

.guide-video-fallback {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  text-decoration: none;
  color: inherit;
}

.guide-video.is-fallback .guide-video-frame {
  display: none !important;
}

.guide-video.is-fallback .guide-video-fallback {
  display: grid;
  place-items: center;
}

.guide-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72);
}

.guide-video-fallback-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 196, 90, 0.85);
  background: linear-gradient(180deg, #e8c45a, #c9a227);
  color: #1a1408;
  font: 700 0.95rem/1.2 "Noto Sans", system-ui, sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.guide-video-fallback:hover .guide-video-fallback-btn {
  filter: brightness(1.05);
}

.guide-video-hint {
  margin: 0.65rem 0 0;
  color: rgba(242, 239, 232, 0.62);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* === Change log (path guides) === */
.changelog-intro {
  margin: -0.35rem 0 1.15rem;
  color: rgba(242, 239, 232, 0.78);
  font-size: 0.92rem;
  line-height: 1.5;
}

.changelog-list {
  display: grid;
  gap: 1rem;
}

.changelog-entry {
  /* base shell; details.changelog-entry overrides for collapse UI */
  border: 1px solid rgba(178, 141, 85, 0.22);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
}

.changelog-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.45rem;
}

.changelog-date {
  margin: 0;
  color: #f2efe8;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.changelog-source {
  color: var(--gold, #B28D55);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(178, 141, 85, 0.35);
}

.changelog-source:hover {
  color: #e8c45a;
  border-bottom-color: rgba(232, 196, 90, 0.7);
}

.changelog-entry-note {
  margin: 0 0 0.65rem;
  color: rgba(242, 239, 232, 0.58);
  font-size: 0.8rem;
  line-height: 1.4;
}

.changelog-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.changelog-item {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
}

.changelog-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.15rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.changelog-item--buff .changelog-tag {
  color: #b8f0c8;
  background: rgba(46, 140, 80, 0.22);
  border-color: rgba(80, 180, 110, 0.4);
}

.changelog-item--nerf .changelog-tag {
  color: #ffc9c0;
  background: rgba(160, 50, 40, 0.25);
  border-color: rgba(220, 90, 70, 0.4);
}

.changelog-item--fix .changelog-tag,
.changelog-item--change .changelog-tag {
  color: #e8d9a8;
  background: rgba(178, 141, 85, 0.15);
  border-color: rgba(178, 141, 85, 0.4);
}

.changelog-skill {
  display: block;
  color: #f2efe8;
  font-size: 0.92rem;
  margin-bottom: 0.15rem;
}

.changelog-desc {
  margin: 0;
  color: rgba(242, 239, 232, 0.78);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Crest overlap for changelog card */
.classes_wrap > #class-video + .classes_top_symbol--mid,
.classes_wrap > #class-changelog + .classes_top_symbol--mid {
  margin-top: -1.35rem !important;
  margin-bottom: 0 !important;
  z-index: 5; /* same layer as cards; page order decides */
}

.changelog-empty {
  margin: 0;
  padding: 1.25rem 0.25rem 0.5rem;
  color: rgba(242, 239, 232, 0.65);
  font-size: 0.92rem;
  text-align: center;
}

/* === Change log collapse === */
details.changelog-entry {
  border: 1px solid rgba(178, 141, 85, 0.22);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  padding: 0;
  overflow: hidden;
}

details.changelog-entry > summary.changelog-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

details.changelog-entry > summary.changelog-entry-head::-webkit-details-marker {
  display: none;
}

details.changelog-entry > summary.changelog-entry-head::marker {
  content: "";
}

.changelog-entry-summary-main {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.changelog-disclosure {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid rgba(232, 196, 90, 0.85);
  border-bottom: 2px solid rgba(232, 196, 90, 0.85);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}

details.changelog-entry[open] > summary .changelog-disclosure {
  transform: rotate(45deg);
}

details.changelog-entry > summary .changelog-date {
  margin: 0;
}


.changelog-entry-body {
  padding: 0 1rem 0.95rem;
  border-top: 1px solid rgba(178, 141, 85, 0.15);
}

.changelog-entry-body .changelog-entry-note {
  margin-top: 0.75rem;
}

/* Prevent double chrome if old article rules remain */
article.changelog-entry {
  /* legacy */
}

.changelog-entry-source-row {
  display: flex;
  justify-content: flex-end;
  margin: 0.65rem 0 0.35rem;
}

/* ===== nav-premium-1 overrides (hub chrome only) ===== */
.site-header {
  background: linear-gradient(180deg, rgba(18,18,18,0.97) 0%, rgba(8,8,10,0.94) 100%);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(178,141,85,0.22);
  box-shadow: 0 1px 0 rgba(178,141,85,0.08), 0 12px 32px rgba(0,0,0,0.45);
}
.brand-logo {
  letter-spacing: 0.14em;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.brand-logo:hover, .brand-logo:focus-visible {
  color: var(--gold-hover);
  text-shadow: 0 0 18px rgba(178,141,85,0.35);
  outline: none;
}
.header-link, .header-text-link {
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 0.65rem;
  border-radius: 2px;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.header-link:hover, .header-link:focus-visible,
.header-text-link:hover, .header-text-link:focus-visible {
  color: var(--off-white);
  background: rgba(178,141,85,0.08);
  outline: none;
}
.header-link:focus-visible, .header-text-link:focus-visible {
  box-shadow: 0 0 0 1px rgba(178,141,85,0.55);
}
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger,
.nav-dropdown.is-open .nav-dropdown-trigger {
  color: var(--gold-hover);
  background: rgba(178,141,85,0.1);
}
.nav-mega {
  /* Flush to trigger, since a gap was killing hover on class pages */
  top: 100%;
  width: min(980px, calc(100vw - 2rem));
  padding: 1.35rem 1.45rem 1.5rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 42%),
    linear-gradient(165deg, rgba(30,30,34,0.98) 0%, rgba(12,12,14,0.99) 52%, rgba(8,10,14,1) 100%);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(212,176,120,0.7),
    0 0 0 1px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(178,141,85,0.18),
    0 18px 48px rgba(0,0,0,0.55),
    0 4px 16px rgba(0,0,0,0.35),
    0 0 60px rgba(178,141,85,0.06);
  overflow: visible;
  isolation: isolate;
}
/* Hover bridge back (must catch pointer between trigger and panel) */
.nav-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
  background: transparent;
  pointer-events: auto;
  z-index: 0;
}
.nav-mega::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(178,141,85,0.12);
  z-index: 1;
}
/* Readable class labels: never inherit tile filters/blends */
.nav-mega .mega-link {
  filter: none !important;
  color: #ffffff !important;
}
.nav-mega .mega-link span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  z-index: 5;
  font-weight: 700 !important;
  text-shadow:
    0 0 2px #000,
    0 1px 3px #000,
    0 2px 12px rgba(0,0,0,0.95) !important;
}
.nav-mega .mega-link:hover span,
.nav-mega .mega-link:focus-visible span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.mega-heading {
  letter-spacing: 0.3em;
  text-shadow: 0 0 24px rgba(178,141,85,0.25);
}
.mega-grid { gap: 0.65rem; }
.mega-link {
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 1 / 1.12;
  min-height: 0;
  height: auto;
  padding: 0.35rem 0.25rem 0.45rem;
  background-size: 88%;
  background-position: center 28%;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35); /* bottom darkening removed 2026-09-29 */
}
.mega-link::before {
  /* scrim only, the accent outline is on the tile edge */
  inset: 0;
  border: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 28%, transparent 42%, rgba(0,0,0,0.88) 88%),
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(178,141,85,0.1), transparent 60%);
}
.mega-link:hover, .mega-link:focus-visible {
  background-size: 94%;
  transform: translateY(-3px) scale3d(1.06, 1.06, 1);
  outline: 3px solid var(--mega-accent);
  outline-offset: 0;
  border-color: var(--mega-accent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45); /* bottom darkening removed 2026-09-29 */
}
.mega-link:focus-visible {
  outline: 3px solid var(--mega-accent);
  outline-offset: 0;
}
.cta-btn {
  background: linear-gradient(180deg, var(--gold-hover) 0%, var(--gold) 100%);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-left: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.cta-btn:hover, .cta-btn:focus-visible {
  background: linear-gradient(180deg, #d4b078 0%, var(--gold-hover) 100%);
  filter: brightness(1.04);
  outline: none;
}

/* ===== homepage Pearl Choose a Class ===== */
/* Scoped to .hub-home-choose so class-page Pearl CSS stays authoritative */
.hub-home-choose.select_classes_wrap {
  --padding-select_character: 8px;
  position: relative;
  padding: 4.5rem 0 5.5rem;
  margin: 0;
  background-image: url(../assets/vendor/site/img/portal/gameinfo/select_classes_bg.jpg);
  background-position: 50% 0;
  background-size: cover;
  background-repeat: no-repeat;
}
.hub-home-choose .title_wrap {
  text-align: center;
}
.hub-home-choose .select_title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display, Cinzel, serif);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
}
.hub-home-choose .select_title_desc {
  display: block;
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1rem;
}
.hub-home-choose .select_classes_list {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(7, minmax(0, 160px));
  gap: 0;
  width: min(1280px, 94%);
  margin: 3rem auto 0;
  padding: 0;
  list-style: none;
}
.hub-home-choose .select_character {
  position: relative;
  padding: 0 var(--padding-select_character) 14px;
  box-sizing: border-box;
}
.hub-home-choose .select_character .class_wrap {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 237 / 329;
  border-radius: 6px;
  outline: none;
  overflow: hidden;
  filter: grayscale(1) brightness(0.8);
  transform: scale3d(1, 1, 1);
  transition: filter 0.2s ease, transform 0.3s ease-out, box-shadow 0.3s ease-out;
  text-decoration: none;
  color: inherit;
}
.hub-home-choose .select_character .class_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 3px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
  pointer-events: none;
  transition: border-color 0.2s ease;
}
.hub-home-choose .select_character .class_wrap:hover,
.hub-home-choose .select_character .class_wrap:focus-visible {
  filter: none;
  transform: scale3d(1.12, 1.12, 1);
  z-index: 2;
  box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.27);
}
.hub-home-choose .select_character .class_wrap:hover::before,
.hub-home-choose .select_character .class_wrap:focus-visible::before {
  border-color: #e7bc5c;
}
.hub-home-choose .class_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hub-home-choose .class_icon {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  transform: translateX(-50%);
  background-color: #e7bc5c;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}
.hub-home-choose .class_name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.65rem;
  z-index: 3;
  margin: 0;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.hub-home-choose .select_character:hover {
  z-index: 3;
}

@media (max-width: 1400px) {
  .hub-home-choose .select_classes_list {
    grid-template-columns: repeat(7, minmax(0, 150px));
  }
}
@media (max-width: 1100px) {
  .hub-home-choose .select_classes_list {
    grid-template-columns: repeat(6, minmax(0, 140px));
  }
}
@media (max-width: 900px) {
  .hub-home-choose .select_classes_list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 96%;
  }
}
@media (max-width: 560px) {
  .hub-home-choose .select_classes_list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hub-home-choose .select_title {
    font-size: 1.6rem;
  }
}


/* ===== Tierlist visual board (Garmoth / tiermaker style) ===== */
.page-tierlist { background: #050505; }
.tl-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
.tl-hero { text-align: center; margin-bottom: 1.75rem; }
.tl-eyebrow {
  font-family: var(--font-display, Cinzel, serif);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--gold, #B28D55);
  margin-bottom: 0.65rem;
}
.tl-title {
  font-family: var(--font-display, Cinzel, serif);
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  color: #f3f4f6;
  margin: 0 0 0.4rem;
}
.tl-meta { color: rgba(178, 141, 85, 0.95); margin: 0 0 0.55rem; }
.tl-source { margin: 0; font-size: 0.85rem; color: rgba(242, 239, 232, 0.55); }
.tl-source a { color: var(--gold, #B28D55); }

.tl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 1.25rem;
  align-items: start;
}
.tl-board { display: flex; flex-direction: column; gap: 0.85rem; }

.tl-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(12, 12, 14, 0.96);
}
.tl-row-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tl-color) 22%, #0a0a0a);
  border-right: 3px solid var(--tl-color);
  min-height: 100%;
}
.tl-row-letter {
  font-family: var(--font-display, Cinzel, serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  color: var(--tl-color);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.tl-row-body { padding: 0.85rem 0.9rem 1rem; }
.tl-row-head { margin-bottom: 0.75rem; }
.tl-row-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  color: #f2efe8;
  font-weight: 600;
}
.tl-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: 0 0 auto;
}
.tl-row-desc {
  margin: 0;
  color: rgba(242, 239, 232, 0.58);
  font-size: 0.86rem;
  line-height: 1.45;
}

.tl-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 0.55rem;
}
.tl-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #101012;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.tl-card:hover {
  transform: translateY(-2px);
  border-color: rgba(178, 141, 85, 0.55);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.tl-card-art {
  display: block;
  aspect-ratio: 4 / 5;
  background: #070707;
  overflow: hidden;
}
.tl-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.tl-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.4rem 0.55rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.72);
}
.tl-card-class {
  font-size: 0.78rem;
  font-weight: 600;
  color: #f2efe8;
  line-height: 1.2;
}
.tl-card-spec {
  font-size: 0.68rem;
  color: rgba(178, 141, 85, 0.9);
  letter-spacing: 0.02em;
}

.tl-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: sticky;
  top: 5.5rem;
}
.tl-side-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(14, 14, 16, 0.96);
  padding: 0.75rem 0.9rem 0.9rem;
}
.tl-side-panel > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #f2efe8;
  margin-bottom: 0.55rem;
}
.tl-side-panel > summary::-webkit-details-marker { display: none; }
.tl-side-panel > summary::after {
  content: "▾";
  float: right;
  color: rgba(242, 239, 232, 0.45);
}
.tl-side-panel > p {
  margin: 0;
  color: rgba(242, 239, 232, 0.62);
  font-size: 0.86rem;
  line-height: 1.55;
}
.tl-notes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: min(70vh, 640px);
  overflow: auto;
  padding-right: 0.25rem;
}
.tl-note-rank {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #f2efe8;
}
.tl-note-tier { font-weight: 700; }
.tl-note-body {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(242, 239, 232, 0.58);
}

@media (max-width: 1020px) {
  .tl-layout { grid-template-columns: 1fr; }
  .tl-sidebar { position: static; }
  .tl-notes { max-height: 420px; }
}
@media (max-width: 640px) {
  .tl-row { grid-template-columns: 54px minmax(0, 1fr); }
  .tl-card-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}


/* Expert LIVE (Twitch) */
/* Grid cards need relative for the badge; floats stay position:fixed (do not override). */
.expert-card[data-twitch] {
  position: relative;
}
.expert-card.is-live,
.class-expert-float.is-live {
  border-color: #e91916 !important;
  box-shadow: 0 0 0 2px rgba(233, 25, 22, 0.55), 0 12px 28px rgba(233, 25, 22, 0.18);
}
a.expert-card.is-live:hover,
a.class-expert-float.is-live:hover {
  border-color: #ff2d2a !important;
}
.expert-live-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 5;
  display: none !important;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.5rem 0.22rem 0.4rem;
  border-radius: 3px;
  background: #e91916;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.expert-live-badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: expert-live-pulse 1.4s ease-out infinite;
}
.expert-card.is-live .expert-live-badge,
.class-expert-float.is-live .expert-live-badge {
  display: inline-flex !important;
}
.expert-live-badge[hidden] {
  display: none !important;
}
@keyframes expert-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); }
  70% { box-shadow: 0 0 0 0.45rem rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}


/* Experts search */
.experts-search {
  max-width: 520px;
  margin: 1.35rem auto 0;
  text-align: left;
}
.experts-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.experts-search-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.experts-search-input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0.95rem;
  border: 1px solid rgba(178, 141, 85, 0.4);
  border-radius: 6px;
  background: rgba(12, 12, 14, 0.95);
  color: #f2efe8;
  font: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.experts-search-input::placeholder {
  color: rgba(242, 239, 232, 0.42);
}
.experts-search-input:focus {
  border-color: rgba(178, 141, 85, 0.85);
  box-shadow: 0 0 0 3px rgba(178, 141, 85, 0.18);
}
.experts-search-clear {
  flex: 0 0 auto;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(242, 239, 232, 0.85);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.experts-search-clear:hover {
  border-color: rgba(178, 141, 85, 0.45);
  color: #fff;
}
.experts-search-meta {
  min-height: 1.2em;
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  color: rgba(242, 239, 232, 0.55);
}
.experts-search-empty {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  padding: 1.25rem;
  text-align: center;
  color: rgba(242, 239, 232, 0.6);
  border: 1px dashed rgba(178, 141, 85, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.expert-card.is-search-hidden,
.expert-card[hidden] {
  display: none !important;
}


/* Nav Class Experts search */
.nav-experts-search {
  position: relative;
  margin-left: 0.25rem;
  flex: 1 1 160px;
  min-width: 120px;
  max-width: 220px;
}
.nav-experts-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-experts-search-shell {
  position: relative;
}
.nav-experts-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 2rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(178, 141, 85, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: #f2efe8;
  font: inherit;
  font-size: 0.78rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.nav-experts-search-input::placeholder {
  color: rgba(242, 239, 232, 0.4);
}
.nav-experts-search-input:focus {
  border-color: rgba(178, 141, 85, 0.85);
  background: rgba(12, 12, 14, 0.95);
  box-shadow: 0 0 0 2px rgba(178, 141, 85, 0.16);
}
.nav-experts-search-results {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  min-width: 260px;
  max-height: min(70vh, 360px);
  overflow: auto;
  z-index: 200;
  border: 1px solid rgba(178, 141, 85, 0.35);
  border-radius: 6px;
  background: rgba(10, 10, 12, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  padding: 0.25rem;
}
.nav-experts-search-item,
.nav-experts-search-all {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #f2efe8;
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
}
.nav-experts-search-item {
  padding: 0.55rem 0.65rem;
}
.nav-experts-search-item:hover,
.nav-experts-search-item.is-active {
  background: rgba(178, 141, 85, 0.16);
}
.nav-experts-search-item-name {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
}
.nav-experts-search-item-meta {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: rgba(242, 239, 232, 0.55);
}
.nav-experts-search-all {
  margin-top: 0.15rem;
  padding: 0.55rem 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  color: rgba(178, 141, 85, 0.95);
}
.nav-experts-search-all:hover {
  background: rgba(178, 141, 85, 0.12);
}
.nav-experts-search-empty {
  padding: 0.7rem 0.65rem;
  font-size: 0.78rem;
  color: rgba(242, 239, 232, 0.5);
}
@media (max-width: 900px) {
  .nav-experts-search {
    display: none;
  }
}


/* Expert profile Twitch link when LIVE */
a.expert-social.is-live {
  border-color: #e91916 !important;
  color: #e91916 !important;
  font-weight: 700;
  animation: expert-twitch-live-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(233, 25, 22, 0.45);
}
a.expert-social.is-live:hover {
  border-color: #ff2d2a !important;
  color: #ff2d2a !important;
}
@keyframes expert-twitch-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(233, 25, 22, 0.55); }
  70% { box-shadow: 0 0 0 0.45rem rgba(233, 25, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(233, 25, 22, 0); }
}


.combo-intro {
  margin: 0.35rem 0 1.1rem;
  max-width: 52rem;
  color: rgba(242, 239, 232, 0.78);
  font-size: 0.95rem;
  line-height: 1.55;
}
.combo-chain-note {
  margin: 0 0 0.65rem;
  color: rgba(242, 239, 232, 0.62);
  font-size: 0.85rem;
}


/* ===== Premium hover shine (2026-09-27) =====
   A gold/white glint orbits the SAME single hover border ring (no extra border):
   - mega-link: glint overlays the existing accent outline+border ring (outline kept)
   - class_wrap: glint overlays the existing 3px ::before border ring
   - expert cards: the element's own 1px border is painted with a conic gradient
   Pseudo-elements are pointer-events:none. Reduced motion = static glint. */
@property --hub-shine-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes hub-shine-orbit {
  from { --hub-shine-angle: 0deg; }
  to { --hub-shine-angle: 360deg; }
}

/* (1) Header Classes mega-menu tiles.
   ::before is freed for the shine: its scrim layers move onto ::after (same paint order). */
.mega-link { overflow: visible; }
.mega-link::after {
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 28%, transparent 42%, rgba(0,0,0,0.88) 88%),
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(178,141,85,0.1), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 38%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.92) 100%);
}
.mega-link:hover::after,
.mega-link:focus-visible::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 28%, transparent 42%, rgba(0,0,0,0.88) 88%),
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(178,141,85,0.1), transparent 60%),
    linear-gradient(to bottom, color-mix(in srgb, var(--mega-accent) 18%, transparent) 0%, transparent 40%, rgba(0,0,0,0.9) 100%);
}
.mega-link::before {
  /* sits exactly on the 1px border + 3px outline ring */
  inset: -4px;
  padding: 4px;
  z-index: 6;
  border: none;
  border-radius: 9px;
  box-sizing: border-box;
  pointer-events: none;
}

/* (2) Choose a Class cards (homepage + every class / Awakening / Succession page) */
.select_classes_wrap .select_character .class_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 3px; /* same width as the ::before hover border */
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
}
@media screen and (max-width: 1024px) {
  .select_classes_wrap:not(.hub-home-choose) .select_character .class_wrap::after { padding: 0.3rem; }
}

/* shared glint ring for the two pseudo-element cases */
.mega-link::before,
.select_classes_wrap .select_character .class_wrap::after {
  background: conic-gradient(from var(--hub-shine-angle), transparent 0turn, transparent 0.6turn, rgba(231,188,92,0.35) 0.72turn, rgba(240,206,130,0.85) 0.8turn, rgba(255,248,230,1) 0.835turn, #ffffff 0.845turn, rgba(255,236,190,0.9) 0.86turn, rgba(231,188,92,0.4) 0.9turn, transparent 0.94turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mega-link:hover::before,
.mega-link:focus-visible::before,
.select_classes_wrap .select_character .class_wrap:hover::after,
.select_classes_wrap .select_character .class_wrap:focus-visible::after {
  opacity: 1;
  animation: hub-shine-orbit 1.1s linear infinite;
}

/* (3) Expert cards: experts.html grid, class-page floats, profile/Class Experts cards.
   The glint is painted into the card's own border (border-box background), so there is
   still exactly one ring. LIVE cards are excluded: their red border/badge stay untouched. */
a.expert-card,
.class-expert-float { --hub-shine-ring: var(--gold, #B28D55); }
.expert-card--succession,
.class-expert-float--right { --hub-shine-ring: #6a9ad8; }
.expert-card--talent,
.expert-card--ascension { --hub-shine-ring: #c09ad8; }
a.expert-card:not(.is-live):hover,
a.expert-card:not(.is-live):focus-visible,
.class-expert-float:not(.is-live):hover,
.class-expert-float:not(.is-live):focus-visible {
  border-color: transparent;
  background:
    linear-gradient(#0e0e0e, #0e0e0e) padding-box,
    conic-gradient(from var(--hub-shine-angle), var(--hub-shine-ring) 0turn, var(--hub-shine-ring) 0.6turn, color-mix(in srgb, var(--hub-shine-ring) 60%, #e7bc5c) 0.72turn, #f0ce82 0.8turn, #fff8e6 0.835turn, #ffffff 0.845turn, #ffecbe 0.86turn, color-mix(in srgb, var(--hub-shine-ring) 50%, #e7bc5c) 0.9turn, var(--hub-shine-ring) 0.94turn) border-box;
  animation: hub-shine-orbit 1.1s linear infinite;
}

/* soft inner halo that travels with the glint (transparent elsewhere: no second static ring) */
a.expert-card::after,
.class-expert-float::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3; /* above photo/scrim/body, below the LIVE badge (5) */
  padding: 2px;
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
  background: conic-gradient(from var(--hub-shine-angle), transparent 0turn, transparent 0.68turn, rgba(231,188,92,0.35) 0.78turn, rgba(255,246,222,0.85) 0.845turn, rgba(231,188,92,0.3) 0.9turn, transparent 0.94turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.25s ease;
}
a.expert-card:not(.is-live):hover::after,
a.expert-card:not(.is-live):focus-visible::after,
.class-expert-float:not(.is-live):hover::after,
.class-expert-float:not(.is-live):focus-visible::after {
  opacity: 1;
  animation: hub-shine-orbit 1.1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  a.expert-card:hover::after,
  .class-expert-float:hover::after,
  .mega-link:hover::before,
  .mega-link:focus-visible::before,
  .select_classes_wrap .select_character .class_wrap:hover::after,
  .select_classes_wrap .select_character .class_wrap:focus-visible::after,
  a.expert-card:hover,
  a.expert-card:focus-visible,
  .class-expert-float:hover,
  .class-expert-float:focus-visible {
    animation: none !important; /* static glint, no motion */
  }
}

/* ===== Nav Classes mega-menu: keep hover glint ring fully on-screen (2026-09-28) =====
   The panel is anchored at the Classes trigger (left:0) with width up to 980px, so between
   ~721px and ~1250px viewports its right columns ran past the viewport and were cut by
   body overflow-x:hidden: the right-hand tiles and their orbiting glint ring were clipped.
   js/nav-experts-search.js measures the panel and sets --mega-shift to pull it back inside. */
@media (min-width: 721px) {
  .nav-mega {
    left: var(--mega-shift, 0px);
    max-width: calc(100vw - 2rem);
  }
}
/* ring geometry: exactly covers the 1px border + 3px accent outline, centred on the tile */
.mega-link { --mega-ring: 4px; }
.mega-link::before {
  inset: calc(-1 * var(--mega-ring));
  padding: var(--mega-ring);
  border-radius: calc(5px + var(--mega-ring));
}

/* ===== Nav Classes dropdown glint = SAME mechanism as the Choose a Class cards (2026-09-28za) =====
   Choose a Class cards (which rotate correctly for the user): glint on ::after, inset 0 INSIDE the
   card (overflow:hidden), no will-change, animated with hub-shine-orbit on :hover.
   Dropdown tiles (froze for the user): glint on ::before painted OUTSIDE the tile (inset -4px,
   overflow:visible) on a tile promoted to its own GPU layer (will-change: transform, filter) inside
   a backdrop-filter panel. The dropdown now mirrors the card exactly:
   - scrim layers go back to ::before (static), glint ring moves to ::after, inset 0, inside the tile
   - tile clips like the card (overflow:hidden) and is no longer force-promoted (will-change:auto)
   - same conic gradient / mask / keyframes / @property --hub-shine-angle as the cards
   Continuous rotation is kept even under prefers-reduced-motion (slower), per the owner's request. */
.nav-mega .mega-link {
  overflow: hidden;
  will-change: auto;
}
.nav-mega .mega-link::before,
.nav-mega .mega-link:hover::before,
.nav-mega .mega-link:focus-visible::before {
  inset: 0;
  padding: 0;
  z-index: 2;
  border-radius: inherit;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  animation: none;
  transition: none;
  /* bottom darkening gradients removed 2026-09-29: tiles are a uniform colour */
  background:
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(178,141,85,0.1), transparent 60%);
}
.nav-mega .mega-link:hover::before,
.nav-mega .mega-link:focus-visible::before {
  background:
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(178,141,85,0.1), transparent 60%),
    linear-gradient(to bottom, color-mix(in srgb, var(--mega-accent) 18%, transparent) 0%, transparent 40%);
}
.nav-mega .mega-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: 3px;
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
  mix-blend-mode: normal;
  background: conic-gradient(from var(--hub-shine-angle), transparent 0turn, transparent 0.6turn, rgba(231,188,92,0.35) 0.72turn, rgba(240,206,130,0.85) 0.8turn, rgba(255,248,230,1) 0.835turn, #ffffff 0.845turn, rgba(255,236,190,0.9) 0.86turn, rgba(231,188,92,0.4) 0.9turn, transparent 0.94turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-mega .mega-link:hover::after,
.nav-mega .mega-link:focus-visible::after {
  opacity: 1;
  background: conic-gradient(from var(--hub-shine-angle), transparent 0turn, transparent 0.6turn, rgba(231,188,92,0.35) 0.72turn, rgba(240,206,130,0.85) 0.8turn, rgba(255,248,230,1) 0.835turn, #ffffff 0.845turn, rgba(255,236,190,0.9) 0.86turn, rgba(231,188,92,0.4) 0.9turn, transparent 0.94turn);
  animation: hub-shine-orbit 1.1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nav-mega .mega-link:hover::after,
  .nav-mega .mega-link:focus-visible::after {
    animation: hub-shine-orbit 2.4s linear infinite !important;
  }
}

/* ===== Dropdown glint ON the tile's outermost border (2026-09-28zb) =====
   The za ring sat at inset 0 inside the clipped tile, i.e. along the INNER edge of the
   1px border + 3px accent outline. The ring now covers that whole 4px outer band exactly:
   inset -4px / padding 4px from the padding box = border-box edge + 3px outline; outer radius
   6px + 3px = 9px, inner radius 5px (= padding-box radius). The tile no longer clips
   (overflow:visible) so the ring can paint outside it. will-change stays auto. */
.nav-mega .mega-link { overflow: visible; will-change: auto; }
.nav-mega .mega-link::after {
  inset: -4px;
  padding: 4px;
  border-radius: 9px;
}


/* ===== Survey CTA: muted crest-gold pill (matches class header crest ~#aa9074, a touch brighter), hover sheen + lift, orbiting border glint (2026-09-29) =====
   Applies to every "Take the Survey" header button (.cta-btn, used only for the survey link on
   all pages) and the homepage hero "Take the Class Survey" button. Width/padding/font-size and
   placement are unchanged; the header pill is inset vertically so the pill shape reads. */
@property --survey-glint-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.cta-btn,
a.btn-primary[href$="survey.html"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent; /* keep existing border widths so sizes don't change */
  border-radius: 999px;
  background: linear-gradient(135deg, #dac7a1 0%, #c9ae82 26%, #b3956c 62%, #9d7f5a 100%);
  color: #1f1507;
  text-shadow: 0 1px 0 rgba(250, 240, 218, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(250, 242, 222, 0.6),
    inset 0 -1px 0 rgba(92, 70, 44, 0.4),
    0 0 10px rgba(201, 174, 130, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.cta-btn {
  align-self: center;
  height: calc(100% - 20px);
  margin: 0 0.75rem 0 0.35rem;
}
/* light sweep (hover) */
.cta-btn::before,
a.btn-primary[href$="survey.html"]::before {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -70%;
  width: 45%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.15) 70%, rgba(255,255,255,0) 100%);
  transform: skewX(-22deg);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
/* glint orbiting the perimeter (conic ring masked to a thin border) */
.cta-btn::after,
a.btn-primary[href$="survey.html"]::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--survey-glint-angle),
    transparent 0turn, transparent 0.62turn,
    rgba(232, 218, 188, 0.35) 0.74turn, rgba(248, 240, 222, 0.95) 0.82turn,
    #fffaf0 0.84turn, rgba(232, 218, 188, 0.6) 0.88turn, transparent 0.94turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0.5;
  animation: survey-glint-orbit 4.8s linear infinite;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.25s ease;
}
.cta-btn:hover,
.cta-btn:focus-visible,
.cta-btn.is-hover,
a.btn-primary[href$="survey.html"]:hover,
a.btn-primary[href$="survey.html"]:focus-visible,
a.btn-primary[href$="survey.html"].is-hover {
  background: linear-gradient(135deg, #e3d2ae 0%, #d2b98e 26%, #bea178 62%, #a88a64 100%);
  color: #1b1205;
  filter: brightness(1.03);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(252, 246, 230, 0.7),
    inset 0 -1px 0 rgba(92, 70, 44, 0.4),
    0 0 16px rgba(214, 190, 146, 0.5),
    0 0 34px rgba(178, 150, 112, 0.25),
    0 6px 14px rgba(0, 0, 0, 0.4);
  outline: none;
}
.cta-btn:focus-visible,
a.btn-primary[href$="survey.html"]:focus-visible {
  outline: 2px solid #efe3c8;
  outline-offset: 2px;
}
.cta-btn:hover::before,
.cta-btn:focus-visible::before,
.cta-btn.is-hover::before,
a.btn-primary[href$="survey.html"]:hover::before,
a.btn-primary[href$="survey.html"]:focus-visible::before,
a.btn-primary[href$="survey.html"].is-hover::before {
  animation: survey-sheen 0.95s ease-out forwards;
}
.cta-btn:hover::after,
.cta-btn:focus-visible::after,
.cta-btn.is-hover::after,
a.btn-primary[href$="survey.html"]:hover::after,
a.btn-primary[href$="survey.html"]:focus-visible::after,
a.btn-primary[href$="survey.html"].is-hover::after {
  opacity: 1;
  padding: 2px;
  animation-duration: 1.6s;
}
@keyframes survey-sheen {
  0%   { left: -70%; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
@keyframes survey-glint-orbit {
  to { --survey-glint-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-btn,
  a.btn-primary[href$="survey.html"] { transition: box-shadow 0.2s ease, filter 0.2s ease; }
  .cta-btn:hover, .cta-btn:focus-visible, .cta-btn.is-hover,
  a.btn-primary[href$="survey.html"]:hover,
  a.btn-primary[href$="survey.html"]:focus-visible,
  a.btn-primary[href$="survey.html"].is-hover { transform: none; }
  .cta-btn::before, a.btn-primary[href$="survey.html"]::before,
  .cta-btn:hover::before, .cta-btn.is-hover::before,
  a.btn-primary[href$="survey.html"]:hover::before,
  a.btn-primary[href$="survey.html"].is-hover::before { animation: none; opacity: 0; }
  .cta-btn::after, a.btn-primary[href$="survey.html"]::after {
    animation: none;
    --survey-glint-angle: 35deg; /* static highlight on the top-right edge */
  }
}


/* ===== Header crest guide tabs v3: PvE Guide / PvP Guide halves in the top crest band (2026-09-29) =====
   At rest the band looks exactly like the original crest divider: no panels, frames or shadows, only labels.
   Each half is still the full clickable area (from the band edge to just short of the centered crest).
   Hover fades in the same outer-edge wash as the Awakening / Succession split tiles on the class landing pages
   (.class-path-hit), plus a slight brighten of the band under it.
   .is-active (+ aria-current="page") marks the current guide page and is shown only by its gold label.
   PvE pages mark PvE; a future pvp/index.html page marks PvP. .is-disabled = Coming Soon (subtle hover only). */
.classes_top_symbol .guide-tabs {
  --guide-tab-crest-clear: 64px; /* half the crest plus breathing room */
  position: absolute;
  left: 0;
  right: 0;
  top: 25.7%;   /* the band art is transparent above this (crest notch) */
  bottom: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr calc(2 * var(--guide-tab-crest-clear)) 1fr;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.classes_top_symbol .guide-tab {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 1rem;
  background: none;
  border: 0;
  box-shadow: none;
  color: #f5f0e6;
  text-align: center;
  text-decoration: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease;
}
.classes_top_symbol .guide-tab--pve { grid-column: 1; }
.classes_top_symbol .guide-tab--pvp { grid-column: 3; }
/* Hover wash layer: invisible at rest, fades in over the half */
.classes_top_symbol .guide-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.classes_top_symbol .guide-tab--pve::before {
  background: linear-gradient(90deg, rgba(178, 141, 85, 0.45), rgba(178, 141, 85, 0.08));
}
.classes_top_symbol .guide-tab--pvp::before {
  background: linear-gradient(270deg, rgba(90, 140, 210, 0.42), rgba(90, 140, 210, 0.08));
}
.classes_top_symbol .guide-tab--pvp.is-active::before {
  background: linear-gradient(270deg, rgba(178, 141, 85, 0.45), rgba(178, 141, 85, 0.08));
}
.classes_top_symbol .guide-tab > span { position: relative; z-index: 1; }
.classes_top_symbol .guide-tab-label {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}
.classes_top_symbol .guide-tab-hint {
  font-size: 0.85rem;
  opacity: 0.85;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

/* Current guide: gold label only */
.classes_top_symbol .guide-tab.is-active { color: #e6cf9c; cursor: pointer; }
.classes_top_symbol .guide-tab.is-active .guide-tab-hint { color: var(--gold, #B28D55); opacity: 1; }
.classes_top_symbol .guide-tab:not(.is-active):not(.is-disabled) { cursor: pointer; }

/* Hover / keyboard focus on a clickable half: wash fades in and the band brightens slightly */
.classes_top_symbol .guide-tab:not(.is-disabled):hover::before,
.classes_top_symbol .guide-tab:not(.is-disabled):focus-visible::before {
  opacity: 1;
  -webkit-backdrop-filter: brightness(1.12);
  backdrop-filter: brightness(1.12);
}
.classes_top_symbol .guide-tab:not(.is-disabled):hover,
.classes_top_symbol .guide-tab:not(.is-disabled):focus-visible { color: #fff8ea; outline: none; }
.classes_top_symbol .guide-tab.is-active:hover,
.classes_top_symbol .guide-tab.is-active:focus-visible { color: #f6e3b6; }
.classes_top_symbol .guide-tab:not(.is-disabled):focus-visible::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid rgba(218, 199, 161, 0.75);
  pointer-events: none;
}

/* Disabled half (PvP, Coming Soon): muted label, not clickable, only a faint wash on hover */
.classes_top_symbol .guide-tab.is-disabled {
  cursor: not-allowed;
  color: rgba(245, 240, 230, 0.55);
  user-select: none;
}
.classes_top_symbol .guide-tab.is-disabled:hover { color: rgba(245, 240, 230, 0.72); }
.classes_top_symbol .guide-tab.is-disabled:hover::before {
  opacity: 0.35;
  -webkit-backdrop-filter: brightness(1.05);
  backdrop-filter: brightness(1.05);
}
.classes_top_symbol .guide-tab-soon {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(178, 141, 85, 0.55);
  border-radius: 999px;
  background: rgba(20, 14, 8, 0.4);
  color: var(--gold, #B28D55);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The band drops to 96px tall below about 1024px, so the crest shrinks */
@media (max-width: 1024px) {
  .classes_top_symbol .guide-tabs { --guide-tab-crest-clear: 44px; }
  .classes_top_symbol .guide-tab { gap: 0.2rem; padding: 0.25rem 0.6rem; }
  .classes_top_symbol .guide-tab-label { font-size: clamp(1.05rem, 2.6vw, 1.4rem); }
  .classes_top_symbol .guide-tab-hint { font-size: 0.72rem; }
  .classes_top_symbol .guide-tab-soon { font-size: 0.56rem; padding: 0.14rem 0.45rem; }
}
@media (max-width: 640px) {
  .classes_top_symbol .guide-tabs { --guide-tab-crest-clear: 34px; }
  .classes_top_symbol .guide-tab-label { font-size: 1.05rem; letter-spacing: 0.05em; }
  .classes_top_symbol .guide-tab-hint { font-size: 0.66rem; }
}
@media (max-width: 380px) {
  .classes_top_symbol .guide-tab { padding: 0.2rem 0.35rem; }
  .classes_top_symbol .guide-tab-label { font-size: 0.92rem; letter-spacing: 0.03em; }
  .classes_top_symbol .guide-tab-soon { font-size: 0.5rem; letter-spacing: 0.05em; }
}
@media (prefers-reduced-motion: reduce) {
  .classes_top_symbol .guide-tab,
  .classes_top_symbol .guide-tab::before { transition: none; }
}
/* ===== /Header crest guide tabs v3 ===== */

/* ===== Header crest guide tabs v4: banner-shaped hover + hit area (2026-10-15) =====
   The tab boxes now start at the top of the crest strip and are clipped with clip-path to the banner's
   real top edge, traced from class_detail_top_symbol.png alpha (flat edge at y=44 of 144, rising to the crest
   peak at y=11 in the centre). clip-path also limits pointer hit-testing, so nothing above the banner
   highlights or clicks. --gt-s is the banner scale: 144px tall = 1, 96px tall (viewport <= 1280px) = 2/3.
   padding-top keeps the labels exactly where they were (centred in the old 25.7%-to-bottom area). */
.classes_top_symbol .guide-tabs { --gt-s: 1; top: 0; }
@media (max-width: 1280px) { .classes_top_symbol .guide-tabs { --gt-s: 0.6667; } }
.classes_top_symbol .guide-tabs .guide-tab { padding-top: calc(var(--gt-s) * 37px + var(--gt-pt, 0.35rem)); }
@media (max-width: 1024px) { .classes_top_symbol .guide-tabs { --gt-pt: 0.25rem; } }
@media (max-width: 380px) { .classes_top_symbol .guide-tabs { --gt-pt: 0.2rem; } }
.classes_top_symbol .guide-tabs .guide-tab--pve { clip-path: polygon(0 calc(var(--gt-s) * 45px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 130px) calc(var(--gt-s) * 44.4px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 125px) calc(var(--gt-s) * 44.4px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 120px) calc(var(--gt-s) * 44.4px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 115px) calc(var(--gt-s) * 44.4px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 110px) calc(var(--gt-s) * 44.4px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 105px) calc(var(--gt-s) * 44.3px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 100px) calc(var(--gt-s) * 43.9px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 95px) calc(var(--gt-s) * 43.6px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 90px) calc(var(--gt-s) * 43.4px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 85px) calc(var(--gt-s) * 42.8px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 80px) calc(var(--gt-s) * 42.3px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 75px) calc(var(--gt-s) * 41.5px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 70px) calc(var(--gt-s) * 40.7px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 65px) calc(var(--gt-s) * 39.7px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 60px) calc(var(--gt-s) * 38.6px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 55px) calc(var(--gt-s) * 37.4px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 50px) calc(var(--gt-s) * 35.8px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 45px) calc(var(--gt-s) * 34.2px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 40px) calc(var(--gt-s) * 32.2px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 35px) calc(var(--gt-s) * 30.1px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 30px) calc(var(--gt-s) * 27.7px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 25px) calc(var(--gt-s) * 25.5px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 20px) calc(var(--gt-s) * 22.9px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 15px) calc(var(--gt-s) * 20.1px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 10px) calc(var(--gt-s) * 16.6px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 5px) calc(var(--gt-s) * 12.7px), calc(100% + var(--guide-tab-crest-clear) - var(--gt-s) * 0px) calc(var(--gt-s) * 11.3px), calc(100% + var(--guide-tab-crest-clear)) 100%, 0 100%); }
.classes_top_symbol .guide-tabs .guide-tab--pvp { clip-path: polygon(calc(var(--gt-s) * 0px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 11.3px), calc(var(--gt-s) * 5px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 15.4px), calc(var(--gt-s) * 10px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 18.8px), calc(var(--gt-s) * 15px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 21.9px), calc(var(--gt-s) * 20px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 24.5px), calc(var(--gt-s) * 25px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 27.0px), calc(var(--gt-s) * 30px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 29.3px), calc(var(--gt-s) * 35px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 31.4px), calc(var(--gt-s) * 40px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 33.4px), calc(var(--gt-s) * 45px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 35.3px), calc(var(--gt-s) * 50px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 36.8px), calc(var(--gt-s) * 55px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 38.3px), calc(var(--gt-s) * 60px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 39.4px), calc(var(--gt-s) * 65px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 40.4px), calc(var(--gt-s) * 70px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 41.3px), calc(var(--gt-s) * 75px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 42.1px), calc(var(--gt-s) * 80px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 42.6px), calc(var(--gt-s) * 85px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 43.2px), calc(var(--gt-s) * 90px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 43.5px), calc(var(--gt-s) * 95px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 43.8px), calc(var(--gt-s) * 100px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 44.2px), calc(var(--gt-s) * 105px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 44.4px), calc(var(--gt-s) * 110px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 44.4px), calc(var(--gt-s) * 115px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 44.4px), calc(var(--gt-s) * 120px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 44.4px), calc(var(--gt-s) * 125px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 44.4px), calc(var(--gt-s) * 130px - var(--guide-tab-crest-clear)) calc(var(--gt-s) * 44.5px), 100% calc(var(--gt-s) * 45px), 100% 100%, calc(0px - var(--guide-tab-crest-clear)) 100%); }
.classes_top_symbol .guide-tabs .guide-tab:not(.is-disabled):focus-visible::after { top: calc(var(--gt-s) * 47px); }
/* ===== /Header crest guide tabs v4 ===== */

/* Stacked class-expert floats (several experts for one class page, e.g. Shai) */
.class-expert-stack {
  position: fixed;
  top: 5.75rem;
  left: 1rem;
  z-index: 80;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}
.class-expert-stack .class-expert-float {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  min-height: 0;
  max-height: none;
  height: min(180px, calc((100vh - 7.5rem) / 3));
  pointer-events: auto;
}
.class-expert-stack .class-expert-float .expert-why { -webkit-line-clamp: 2; }
.class-expert-stack .class-expert-float .expert-card-scrim {
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.9) 55%);
}
@media (max-width: 900px) {
  .class-expert-stack {
    width: 160px;
    top: 5.25rem;
    left: 0.65rem;
    gap: 0.5rem;
  }
  .class-expert-stack .class-expert-float { height: min(140px, calc((100vh - 7rem) / 3)); }
}
@media (max-width: 640px) {
  .class-expert-stack {
    width: 132px;
    gap: 0.35rem;
  }
  .class-expert-stack .class-expert-float { height: 74px; }
  .class-expert-stack .class-expert-float .expert-kicker { display: none; }
  .class-expert-stack .class-expert-float .expert-card-body { padding: 0.45rem 0.6rem 0.5rem; }
  .class-expert-stack .class-expert-float .expert-name { margin-bottom: 0.15rem; }
}


/* ===== Combo form labels + easy-combo callout (2026-10-01, Drakania Awakening) =====
   .combo-form marks the form a skill is used in (Dragonblood / Hexeblood). .combo-easy-callout is the
   short "an easier combo is just below" note above a hard rotation. Only pages that use these classes change. */
.combo-form {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.12rem 0.5rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.combo-form--dragonblood {
  color: #a9cbff;
  border-color: rgba(110, 160, 240, 0.55);
  background: rgba(70, 120, 210, 0.16);
}
.combo-form--hexeblood {
  color: #ffab9c;
  border-color: rgba(230, 100, 80, 0.55);
  background: rgba(200, 70, 50, 0.16);
}
.combo-intro .combo-form { margin: 0 0.1rem; vertical-align: 0.08em; }
.combo-easy-callout { margin: 0.35rem 0 1rem; }
.combo-easy-callout p { margin: 0; color: #f2efe8; font-size: 0.95rem; line-height: 1.55; }
.combo-easy-link {
  color: var(--gold, #B28D55);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.combo-easy-link:hover,
.combo-easy-link:focus-visible { color: #e7c98f; }
.combo-easy-link::after { content: " \2193"; }
#easy-combo,
#class-video,
#advanced-information { scroll-margin-top: 5.5rem; }
.combo-inline-link {
  color: var(--gold, #B28D55);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.combo-inline-link:hover,
.combo-inline-link:focus-visible { color: #e7c98f; }
/* ===== /Combo form labels + easy-combo callout ===== */

/* ===== Mobile pass (2026-09-30): phones only, desktop layout untouched =====
   Everything below sits inside max-width media queries (720px, 640px and 380px).
   1) Header: brand, Classes and the Take the Survey pill fit the viewport (no sideways scroll).
   2) Guide page hero (pages with .path-hero-panel): stats, jump buttons and the class title are laid out
      in normal flow instead of absolute positions, so they no longer overlap each other or the art.
   3) Floating expert card on guide pages becomes a compact chip in the hero's top-right corner.
   4) Classes mega-menu: the panel scrolls inside itself (it had overflow: visible, so the lower classes
      were unreachable and the hidden panel added ~1500px of blank space under short pages).
   5) Inline skill names (icon + name) and key hints in notes and change logs no longer run past the card. */
@media (max-width: 720px) {
  .site-header .nav-mega {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: calc(100dvh - var(--header-h) - 1rem);
  }
}
@media (max-width: 640px) {
  /* 1) Header */
  .site-header .header-inner { padding-left: 0.75rem; }
  .site-header .header-left { gap: 0.55rem; min-width: 0; flex: 1 1 auto; }
  .site-header .brand-logo { gap: 0.4rem; min-width: 0; flex: 0 1 auto; letter-spacing: 0.08em; }
  .site-header .brand-logo .brand-mark { width: 1.6rem; height: 1.6rem; }
  .site-header .brand-logo::before { width: 2.2rem; height: 2.2rem; }
  .site-header .brand-logo .brand-text { font-size: 0.8rem; letter-spacing: 0.07em; white-space: nowrap; }
  .site-header .nav-dropdown-trigger { padding-left: 0.4rem; padding-right: 0.4rem; font-size: 0.72rem; white-space: nowrap; }
  .site-header .header-right { flex: 0 0 auto; }
  .site-header .header-right .cta-btn {
    height: calc(100% - 24px);
    margin: 0 0.6rem 0 0.25rem;
    padding: 0 0.75rem;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
  }

  /* 2) Guide page hero */
  .classes_wrap .classes_top:has(.path-hero-panel) {
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    padding: 3.35rem 0.75rem 3.1rem;
    box-sizing: border-box;
  }
  .classes_wrap .classes_top:has(.path-hero-panel) .classes_back_wrap {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    height: auto !important;
  }
  .classes_wrap .classes_top:has(.path-hero-panel) .classes_back_wrap .classes_back_image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center top;
  }
  .classes_wrap .classes_top:has(.path-hero-panel)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.55) 100%);
  }
  .classes_top:has(.path-hero-panel) .path-hero-panel,
  body:has(.class-expert-float--left) .classes_top:has(.path-hero-panel) .path-hero-panel,
  .classes_top:has(.path-hero-panel) .path-hero-panel.path-hero-panel--right,
  body:has(.class-expert-float--left) .classes_top:has(.path-hero-panel) .path-hero-panel.path-hero-panel--right {
    position: relative;
    order: 1;
    top: auto;
    left: auto !important;
    right: auto !important;
    transform: none;
    width: 100%;
    max-width: none;
    align-items: stretch;
    gap: 0.45rem;
    z-index: 9;
  }
  .classes_top:has(.path-hero-panel) .path-hero-stats {
    width: 100%;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  .classes_top:has(.path-hero-panel) .path-hero-stat {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    gap: 0.15rem;
    padding: 0.45rem 0.55rem;
  }
  .classes_top:has(.path-hero-panel) .path-hero-stat-label { font-size: 0.56rem; letter-spacing: 0.08em; }
  .classes_top:has(.path-hero-panel) .path-hero-stat-value { font-size: 0.9rem; white-space: nowrap; overflow-wrap: normal; word-break: normal; line-height: 1.15; }
  .classes_top:has(.path-hero-panel) .path-hero-jumps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
  }
  .classes_top:has(.path-hero-panel) .path-hero-jump {
    min-height: 2.25rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    line-height: 1.2;
  }
  .classes_top:has(.path-hero-panel) .path-hero-jump:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .classes_wrap .classes_top:has(.path-hero-panel) .classes_title.path-page-title {
    position: relative !important;
    order: 2;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 1.1rem 0 0;
    padding: 0;
    text-align: center !important;
    font-size: clamp(1.3rem, 6.4vw, 1.75rem);
  }
  .classes_top:has(.path-hero-panel) .path-page-back { top: 0.7rem; left: 0.75rem; right: auto; }

  /* 3) Floating expert card on guide pages: compact chip at the top-right of the hero */
  body:has(.path-hero-panel) .class-expert-float,
  body:has(.path-hero-panel) .class-expert-float.class-expert-float--left,
  body:has(.path-hero-panel) .class-expert-float.class-expert-float--right {
    position: absolute;
    top: calc(var(--header-h) + 0.45rem);
    left: auto;
    right: 0.75rem;
    width: auto;
    max-width: calc(100% - 7rem);
    min-height: 0;
    height: 2.5rem;
    max-height: none;
    padding: 0.2rem 0.75rem 0.2rem 0.2rem;
    border-radius: 999px;
    align-items: center;
    gap: 0.5rem;
    background: rgba(8, 8, 10, 0.82);
  }
  body:has(.path-hero-panel) .class-expert-float .expert-card-photo {
    position: static;
    flex: 0 0 2.05rem;
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 50%;
    filter: none;
  }
  body:has(.path-hero-panel) .class-expert-float .expert-card-scrim,
  body:has(.path-hero-panel) .class-expert-float .expert-why,
  body:has(.path-hero-panel) .class-expert-float .expert-link { display: none; }
  body:has(.path-hero-panel) .class-expert-float .expert-card-body {
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body:has(.path-hero-panel) .class-expert-float .expert-kicker {
    margin: 0;
    font-size: 0.5rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body:has(.path-hero-panel) .class-expert-float .expert-name {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body:has(.path-hero-panel) .class-expert-float .expert-card-photo { order: 1; }
  body:has(.path-hero-panel) .class-expert-float .expert-card-body { order: 2; }
  body:has(.path-hero-panel) .class-expert-float .expert-live-badge {
    position: static;
    order: 3;
    flex: 0 0 auto;
    padding: 0.12rem 0.35rem 0.12rem 0.3rem;
    font-size: 0.55rem;
  }

  /* 4) Classes mega-menu: 4 compact columns */
  .site-header .nav-mega { left: 0.5rem; right: 0.5rem; padding: 0.9rem 0.75rem 1rem; }
  .site-header .nav-mega .mega-heading { margin-bottom: 0.65rem; }
  .site-header .nav-mega .mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
  .site-header .nav-mega .mega-link { padding: 0.3rem 0.15rem 0.35rem; font-size: 0.62rem; }

  /* 5) Inline skill names and key hints: keep each one together on a line, but let a name that is
     longer than the line wrap inside itself (skill-tooltip.css sets nowrap) */
  body .skill-inline,
  body .skill-inline-keys { display: inline-block; max-width: 100%; white-space: normal; }
}
@media (max-width: 380px) {
  .site-header .header-inner { padding-left: 0.6rem; }
  .site-header .header-left { gap: 0.4rem; }
  .site-header .brand-logo .brand-text { font-size: 0.72rem; letter-spacing: 0.05em; }
  .site-header .nav-dropdown-trigger { padding-left: 0.3rem; padding-right: 0.3rem; }
  .site-header .header-right .cta-btn { margin-right: 0.5rem; padding: 0 0.6rem; font-size: 0.6rem; letter-spacing: 0.02em; }
  .classes_top:has(.path-hero-panel) .path-hero-stat { padding: 0.4rem 0.45rem; }
  .classes_top:has(.path-hero-panel) .path-hero-stat-value { font-size: 0.8rem; }
  .classes_top:has(.path-hero-panel) .path-hero-jump { font-size: 0.72rem; }
}
/* ===== /Mobile pass (2026-09-30) ===== */

/* Reforge stones (class specifics) */
.reforge-panel {
  margin-top: 0.35rem;
  padding: 1rem;
  border: 1px solid rgba(178, 141, 85, 0.28);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(34, 29, 22, 0.55), rgba(14, 14, 16, 0.96) 60%);
  box-shadow: inset 0 1px 0 rgba(231, 188, 92, 0.08);
}
.reforge-panel-title {
  margin: 0 0 0.9rem;
  text-align: center;
  color: #c5a059;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.reforge-panel-title span {
  color: rgba(242, 239, 232, 0.5);
  letter-spacing: 0.06em;
}
.reforge-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.6rem;
}
.reforge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding: 0.95rem 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(32, 32, 36, 0.92), rgba(12, 12, 14, 0.98));
  transition: border-color 0.15s ease;
}
.reforge-card:hover {
  border-color: rgba(178, 141, 85, 0.45);
}
.reforge-card-icon-wrap {
  display: inline-flex;
  padding: 3px;
  margin-bottom: 0.6rem;
  border: 1px solid rgba(178, 141, 85, 0.55);
  border-radius: 2px;
  background: #0a0a0a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 14px rgba(231, 188, 92, 0.08);
}
.reforge-card-icon {
  display: block;
  width: 48px;
  height: 48px;
}
.reforge-card-kicker {
  margin: 0;
  color: rgba(197, 160, 89, 0.8);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.reforge-card-name {
  margin: 0.2rem 0 0.55rem;
  color: #f2efe8;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.reforge-card-effect {
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(178, 141, 85, 0.18);
}
.reforge-card-label {
  color: rgba(242, 239, 232, 0.5);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.reforge-card-value {
  color: #e7bc5c;
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
}
.reforge-panel-note {
  margin: 0.9rem 0 0;
  text-align: center;
  color: rgba(242, 239, 232, 0.55);
  font-size: 0.8rem;
}
@media (max-width: 480px) {
  .reforge-panel {
    padding: 0.75rem;
  }
  .reforge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reforge-card:first-child {
    grid-column: 1 / -1;
  }
}

/* Lightstone combination (class specifics) */
.lightstone-panel {
  margin-top: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(178, 141, 85, 0.28);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(34, 29, 22, 0.55), rgba(14, 14, 16, 0.96) 60%);
  box-shadow: inset 0 1px 0 rgba(231, 188, 92, 0.08);
}
.lightstone-panel-title {
  margin: 0 0 0.9rem;
  text-align: center;
  color: #c5a059;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lightstone-panel-title span {
  color: rgba(242, 239, 232, 0.5);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.lightstone-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 0.6rem;
}
.lightstone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding: 0.95rem 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(32, 32, 36, 0.92), rgba(12, 12, 14, 0.98));
  transition: border-color 0.15s ease;
}
.lightstone-card:hover {
  border-color: rgba(178, 141, 85, 0.45);
}
.lightstone-card--set {
  border-color: rgba(178, 141, 85, 0.4);
  background: linear-gradient(180deg, rgba(48, 40, 26, 0.7), rgba(14, 13, 12, 0.98));
}
.lightstone-card-icon-wrap {
  position: relative;
  display: inline-flex;
  padding: 3px;
  margin-bottom: 0.6rem;
  border: 1px solid rgba(178, 141, 85, 0.55);
  border-radius: 2px;
  background: #0a0a0a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 14px rgba(231, 188, 92, 0.08);
}
.lightstone-card-icon {
  display: block;
  width: 48px;
  height: 48px;
}
.lightstone-card-qty {
  position: absolute;
  right: -0.55rem;
  bottom: -0.45rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid rgba(178, 141, 85, 0.6);
  border-radius: 2px;
  background: rgba(14, 14, 16, 0.96);
  color: #e7bc5c;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}
.lightstone-card-kicker {
  margin: 0;
  color: rgba(197, 160, 89, 0.8);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lightstone-card-name {
  margin: 0.2rem 0 0.55rem;
  color: #f2efe8;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.lightstone-card-effect {
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(178, 141, 85, 0.18);
}
.lightstone-card-label {
  color: rgba(242, 239, 232, 0.5);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.lightstone-card-stat {
  color: rgba(242, 239, 232, 0.88);
  font-size: 0.82rem;
  line-height: 1.3;
}
.lightstone-card-value {
  color: #e7bc5c;
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
}
.lightstone-set-effects {
  list-style: none;
  margin: auto 0 0;
  padding: 0.5rem 0 0;
  width: 100%;
  display: grid;
  gap: 0.35rem;
  border-top: 1px solid rgba(178, 141, 85, 0.18);
}
.lightstone-set-effect {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0.55rem;
  background: rgba(0, 0, 0, 0.28);
  border-left: 2px solid rgba(197, 160, 89, 0.55);
  color: rgba(242, 239, 232, 0.88);
  font-size: 0.84rem;
  line-height: 1.3;
  text-align: left;
}
.lightstone-set-effect .lightstone-card-value {
  font-size: 1rem;
}
.lightstone-panel-note {
  margin: 0.9rem 0 0;
  text-align: center;
  color: rgba(242, 239, 232, 0.55);
  font-size: 0.8rem;
}
@media (max-width: 720px) {
  .lightstone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lightstone-card--set {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .lightstone-panel {
    padding: 0.75rem;
  }
}

/* Lightstone combination: set card totals */
.lightstone-card--set {
  padding-top: 1.1rem;
}
.lightstone-set-body {
  margin-top: auto;
  width: 100%;
  display: grid;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(178, 141, 85, 0.18);
}
.lightstone-set-body .lightstone-set-effects {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.lightstone-set-heading {
  margin: 0.2rem 0 0;
  color: rgba(242, 239, 232, 0.5);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-align: left;
}
.lightstone-set-body .lightstone-set-effect {
  align-items: center;
}
.lightstone-set-effects--total .lightstone-set-effect {
  border-left-color: #e7bc5c;
  background: rgba(231, 188, 92, 0.08);
}
.lightstone-set-math {
  display: block;
  margin-top: 0.1rem;
  color: rgba(242, 239, 232, 0.45);
  font-size: 0.7rem;
}
.lightstone-set-total-label {
  margin-left: 0.25rem;
  color: rgba(231, 188, 92, 0.75);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (min-width: 721px) {
  .lightstone-card:not(.lightstone-card--set) {
    justify-content: center;
  }
  .lightstone-card:not(.lightstone-card--set) .lightstone-card-effect {
    margin-top: 0.35rem;
  }
}

/* ===== Live Now header dropdown (2026-10-01, js/live-now.js) ===== */
.live-now {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.live-now-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2rem;
  padding: 0 0.6rem 0 0.55rem;
  border: 1px solid rgba(178, 141, 85, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(243, 244, 246, 0.82);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.live-now-trigger:hover,
.live-now.is-open .live-now-trigger {
  color: var(--off-white, #F3F4F6);
  border-color: rgba(178, 141, 85, 0.7);
  background: rgba(178, 141, 85, 0.1);
}
.live-now-trigger:focus { outline: none; }
.live-now-trigger:focus-visible {
  border-color: rgba(201, 164, 106, 0.95);
  box-shadow: 0 0 0 2px rgba(178, 141, 85, 0.25);
}
.live-now-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #6b6b70;
}
.live-now[data-state="live"] .live-now-dot {
  background: #e5484d;
  box-shadow: 0 0 6px rgba(229, 72, 77, 0.75);
}
.live-now[data-state="live"] .live-now-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(229, 72, 77, 0.6);
  animation: live-now-pulse 1.8s ease-out infinite;
}
.live-now[data-state="loading"] .live-now-dot {
  animation: live-now-blink 1.2s ease-in-out infinite;
}
@keyframes live-now-pulse {
  0% { transform: scale(1); opacity: 0.85; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}
@keyframes live-now-blink {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.live-now-count {
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(243, 244, 246, 0.7);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.live-now-count:empty { display: none; }
.live-now[data-state="live"] .live-now-count {
  background: #c8373c;
  color: #fff;
}
.live-now-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Panel (same chrome as the Classes mega-menu) */
.live-now-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 210;
  width: 330px;
  max-width: calc(100vw - 1.5rem);
  box-sizing: border-box;
  overflow-x: clip;
  padding: 0.85rem 0.85rem 0.7rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%),
    linear-gradient(165deg, rgba(30, 30, 34, 0.98) 0%, rgba(12, 12, 14, 0.99) 52%, rgba(8, 10, 14, 1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(212, 176, 120, 0.7),
    0 0 0 1px rgba(178, 141, 85, 0.18),
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 4px 16px rgba(0, 0, 0, 0.35);
  color: var(--off-white, #F3F4F6);
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.live-now-panel::before {
  /* hover bridge between trigger and panel */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.live-now.is-open .live-now-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.live-now-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.15rem 0.6rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(178, 141, 85, 0.22);
}
.live-now-head-title {
  font-family: var(--font-display, Cinzel, serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-hover, #c9a46a);
}
.live-now-head-sub {
  font-size: 0.7rem;
  color: rgba(243, 244, 246, 0.5);
  white-space: nowrap;
}
.live-now-body {
  max-height: min(60vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(178, 141, 85, 0.45) transparent;
}
.live-now-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem 0.5rem;
  font-size: 0.82rem;
  color: rgba(243, 244, 246, 0.6);
  text-align: center;
}
.live-now-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  border: 2px solid rgba(178, 141, 85, 0.25);
  border-top-color: var(--gold, #B28D55);
  animation: live-now-spin 0.8s linear infinite;
}
@keyframes live-now-spin { to { transform: rotate(360deg); } }
.live-now-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  min-width: 0;
  overflow-x: hidden;
}
.live-now-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.live-now-item:hover,
.live-now-item:focus-within {
  background: rgba(178, 141, 85, 0.08);
  border-color: rgba(178, 141, 85, 0.22);
}
.live-now-stream {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.2rem 0.45rem 0.45rem;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}
.live-now-stream:focus-visible,
.live-now-profile:focus-visible {
  outline: 1px solid rgba(201, 164, 106, 0.9);
  outline-offset: -1px;
}
.live-now-avatar {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 2px #c8373c, 0 0 0 3px rgba(0, 0, 0, 0.6);
}
.live-now-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.live-now-avatar.is-icon img {
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
  filter: drop-shadow(0 0 4px rgba(178, 141, 85, 0.35));
}
.live-now-avatar-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5484d;
  border: 2px solid #121214;
}
.live-now-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.live-now-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.live-now-name {
  min-width: 0;
  font-family: var(--font-display, Cinzel, serif);
  font-size: 0.86rem;
  font-weight: 700;
  color: #f3eadb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-now-uptime {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f08a8d;
  white-space: nowrap;
}
.live-now-spec {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold, #B28D55);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-now-profile {
  flex: 0 0 auto;
  margin-right: 0.45rem;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(178, 141, 85, 0.4);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(243, 244, 246, 0.85);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.live-now-profile:hover {
  background: rgba(178, 141, 85, 0.16);
  border-color: rgba(201, 164, 106, 0.8);
  color: #fff;
}
.live-now-foot {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(178, 141, 85, 0.16);
  text-align: right;
}
.live-now-all {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold, #B28D55);
  text-decoration: none;
}
.live-now-all:hover,
.live-now-all:focus-visible { color: var(--gold-hover, #c9a46a); text-decoration: underline; }

/* Below 1280px the header is crowded: show the dot and count only, and tighten the row
   so the header fits without sideways scrolling (it already overflowed here before) */
@media (max-width: 1279px) {
  .live-now-label { display: none; }
  .live-now-trigger { gap: 0.35rem; padding: 0 0.45rem; }
}
@media (min-width: 641px) and (max-width: 1279px) {
  .site-header .header-left { gap: 0.8rem; }
  .site-header .brand-logo .brand-text { font-size: 0.92rem; letter-spacing: 0.1em; }
  .site-header .header-text-link { padding-left: 0.45rem; padding-right: 0.45rem; font-size: 0.74rem; }
  .site-header .header-right .cta-btn { padding: 0 1.1rem; font-size: 0.78rem; }
  .site-header .nav-experts-search { min-width: 104px; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  /* the gold "Take the Survey" button stays, so the duplicate text link can go */
  .site-header .header-text-link[href$="survey.html"] { display: none; }
}
@media (min-width: 641px) and (max-width: 799px) {
  /* same as phones: text links go, Classes, Live Now and the survey button stay */
  .site-header .header-text-link { display: none; }
}
@media (max-width: 640px) {
  /* Compact: a round dot button, the count sits on its corner */
  .live-now-trigger {
    position: relative;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    gap: 0;
  }
  .live-now-dot { width: 9px; height: 9px; flex-basis: 9px; }
  .live-now-count {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 0.95rem;
    height: 0.95rem;
    padding: 0 0.22rem;
    font-size: 0.58rem;
    box-shadow: 0 0 0 2px #0c0c0e;
  }
  .live-now[data-state="none"] .live-now-count { display: none; }
}
@media (max-width: 799px) {
  /* the panel spans the screen just under the header */
  .live-now-panel {
    position: fixed;
    top: var(--header-h, 64px);
    left: auto;
    right: 0.6rem;
    width: min(420px, calc(100vw - 1.2rem));
    max-width: none;
  }
  .live-now-panel::before { display: none; }
  .live-now-body { max-height: calc(100dvh - var(--header-h, 64px) - 7rem); }
}
@media (max-width: 480px) {
  /* make room for the Live Now dot next to Classes */
  .site-header .header-left { gap: 0.45rem; }
  .site-header .brand-logo { gap: 0.3rem; }
  .site-header .brand-logo .brand-text { font-size: 0.7rem; letter-spacing: 0.04em; }
  .site-header .nav-dropdown-trigger .chevron { display: none; }
  .site-header .header-right .cta-btn { margin: 0 0.5rem 0 0.2rem; padding: 0 0.6rem; }
}
@media (max-width: 380px) {
  .site-header .header-left { gap: 0.4rem; }
  .site-header .brand-logo .brand-text { font-size: 0.66rem; letter-spacing: 0.03em; }
  .site-header .header-right .cta-btn { padding: 0 0.5rem; font-size: 0.58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .live-now[data-state="live"] .live-now-dot::after,
  .live-now[data-state="loading"] .live-now-dot,
  .live-now-spinner { animation: none; }
  .live-now-panel { transition: none; }
}
/* Live Now sits in .header-right, just left of the "Take the Survey" button (2026-10-01).
   Centered at the old row height so the panel opens at the same spot under the trigger. */
.site-header .header-right .live-now {
  align-self: center;
  min-height: 2.3rem;
  margin: 0 0.4rem 0 0.8rem; /* left margin keeps it off the class search when the row is full */
}
@media (max-width: 640px) {
  .site-header .header-right .live-now { margin: 0 0 0 0.45rem; }
}
/* ===== /Live Now ===== */

/* ===== Class Experts: merged both-spec cards (same expert for both specs) + gold text legibility (2026-10-01) =====
   Merged cards (experts.html) carry .expert-card--both, a "<Class> Expert" kicker and two spec pills.
   An empty .expert-anchor-alias keeps the old #expert-<class>-succession links landing on the card.
   Legibility rule is scoped to expert cards: experts.html grid cards and the class-page floating expert cards. */
.expert-anchor-alias {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.expert-specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: -0.1rem 0 0.5rem;
}
.expert-spec-pill {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border: 1px solid rgba(178, 141, 85, 0.6);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.6rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfb487;
  white-space: nowrap;
}
.expert-spec-pill--b {
  border-color: rgba(106, 154, 216, 0.65);
  color: #a9c3e6;
}
.expert-spec-amp {
  font-size: 0.7rem;
  color: rgba(243, 244, 246, 0.72);
}
.expert-card .expert-kicker,
.expert-card .expert-name,
.expert-card .expert-link,
.expert-card .expert-spec-pill,
.expert-card .expert-spec-amp,
.class-expert-float .expert-kicker,
.class-expert-float .expert-name,
.class-expert-float .expert-link {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6);
}
.expert-card .expert-kicker,
.expert-card .expert-link,
.class-expert-float .expert-kicker,
.class-expert-float .expert-link {
  color: #c9a66f;
}
.expert-card .expert-kicker,
.class-expert-float .expert-kicker {
  font-weight: 600;
}
/* 3-column widths: center a lone last card so the final row looks even (only when no search filter is active). */
@media (min-width: 801px) and (max-width: 1100px) {
  .experts-grid:not(:has(.expert-card[hidden])) > .expert-card:last-child:nth-child(3n+2) { grid-column: 2; }
}
/* ===== /Class Experts merged cards + legibility ===== */

/* Gap between skill cards and grey explanatory notes (sitewide).
   Covers Class Mobility, Class Specifics, combo sections, etc.
   Use padding-top (not margin-top) so space cannot collapse against .combo-steps. */
.combo-steps + .combo-chain-note,
.combo-steps + .combo-repeat,
.combo-chain + .combo-repeat,
.combo-chain + .combo-chain-note,
.combo-guide-inner > .combo-repeat,
.combo-guide-inner > .combo-chain-note {
  margin-top: 0 !important;
  padding-top: 1.75rem !important; /* clear gap under last skill/ability card */
}

/* When grey notes follow a whole combo-chain (Shai DPS etc.), keep the same gap */
.combo-chain:has(+ .combo-repeat),
.combo-chain:has(+ .combo-notes),
.combo-chain:has(+ .combo-chain-note) {
  margin-bottom: 0;
}

/* Gap between add-on cards and a notes box below them (sitewide) */
.addon-list + .combo-notes,
.addon-list + .addon-list-note,
.addon-list + .combo-chain-note { margin-top: 1.25rem; padding-top: 0.5rem; }

/* Stacked expert floats: hard 2-line cap on the why text */
.class-expert-stack .class-expert-float .expert-why { min-height: 0; max-height: calc(1.35em * 2); }

/* ===== Language switcher (2026-10-02, js/i18n.js) =====
   Header: pill next to Live Now (same look), menu opens under it. Footer: a row of language names. */
.site-header .header-right .lang-switch {
  position: relative;
  align-self: center;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 2.3rem;
  margin: 0 0.75rem 0 0.1rem;
}
.lang-switch-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2rem;
  padding: 0 0.55rem 0 0.5rem;
  border: 1px solid rgba(178, 141, 85, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(243, 244, 246, 0.82);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lang-switch-trigger:hover,
.lang-switch.is-open .lang-switch-trigger {
  color: var(--off-white, #F3F4F6);
  border-color: rgba(178, 141, 85, 0.7);
  background: rgba(178, 141, 85, 0.1);
}
.lang-switch-trigger:focus { outline: none; }
.lang-switch-trigger:focus-visible {
  border-color: rgba(201, 164, 106, 0.95);
  box-shadow: 0 0 0 2px rgba(178, 141, 85, 0.25);
}
.lang-switch-globe { flex: 0 0 auto; color: var(--gold, #B28D55); }
.lang-switch-chev { font-size: 0.62rem; opacity: 0.7; }
.lang-switch-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 215;
  min-width: 11rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: linear-gradient(165deg, rgba(30, 30, 34, 0.98) 0%, rgba(12, 12, 14, 0.99) 60%, rgba(8, 10, 14, 1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(212, 176, 120, 0.7), 0 0 0 1px rgba(178, 141, 85, 0.18), 0 18px 48px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.lang-switch.is-open .lang-switch-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-switch-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(243, 244, 246, 0.86);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.lang-switch-option:hover,
.lang-switch-option:focus-visible { background: rgba(178, 141, 85, 0.12); color: var(--off-white, #F3F4F6); outline: none; }
.lang-switch-option-code {
  flex: 0 0 auto;
  min-width: 1.9rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(243, 244, 246, 0.55);
}
.lang-switch-option.is-current { color: var(--gold, #B28D55); }
.lang-switch-option.is-current .lang-switch-option-code { color: var(--gold, #B28D55); }
.lang-switch-option.is-current::after { content: "\2713"; margin-left: auto; font-size: 0.8rem; }
@media (max-width: 1279px) {
  .lang-switch-chev { display: none; }
  .lang-switch-trigger { padding: 0 0.5rem 0 0.45rem; }
}
@media (max-width: 640px) {
  .site-header .header-right .lang-switch { margin: 0 0.4rem 0 0.35rem; }
  .lang-switch-trigger { height: 1.85rem; padding: 0 0.4rem; gap: 0.25rem; font-size: 0.62rem; letter-spacing: 0.04em; }
  .lang-switch-globe { width: 13px; height: 13px; }
}
@media (max-width: 799px) {
  .lang-switch-menu { position: fixed; top: var(--header-h, 64px); right: 0.6rem; }
}
@media (max-width: 480px) {
  /* phones: compact round "EN" button; brand and survey button tighten to make room for it */
  .site-header .header-right .lang-switch { margin: 0 0.2rem 0 0.3rem; }
  .lang-switch-globe { display: none; }
  .lang-switch-trigger { width: 1.75rem; height: 1.75rem; justify-content: center; padding: 0; font-size: 0.58rem; }
  .site-header .header-right .live-now { margin-left: 0.3rem; }
  .site-header .brand-logo .brand-text { font-size: 0.62rem; letter-spacing: 0.03em; }
  .site-header .header-right .cta-btn { margin: 0 0.45rem 0 0.15rem; padding: 0 0.5rem; font-size: 0.6rem; letter-spacing: 0.02em; }
  .site-header .nav-dropdown-trigger { padding-left: 0.3rem; padding-right: 0.3rem; letter-spacing: 0.06em; }
}
.hub-footer-lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  margin: 0.9rem auto 0.2rem;
  color: var(--gold, #B28D55);
}
.hub-footer-lang .lang-switch-globe { margin-right: 0.15rem; }
.hub-footer-lang-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(178, 141, 85, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(243, 244, 246, 0.7);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.hub-footer-lang-btn:hover,
.hub-footer-lang-btn:focus-visible { color: var(--off-white, #F3F4F6); border-color: rgba(178, 141, 85, 0.6); outline: none; }
.hub-footer-lang-btn.is-current { color: var(--gold, #B28D55); border-color: rgba(178, 141, 85, 0.7); background: rgba(178, 141, 85, 0.1); }
/* the switcher adds one item to the header: drop the duplicate Survey text link (the gold
   button stays) and keep the switcher compact until the header has room again */
@media (min-width: 641px) and (max-width: 1599px) {
  .site-header .header-text-link[href$="survey.html"] { display: none; }
  .lang-switch-chev { display: none; }
  .lang-switch-trigger { padding: 0 0.5rem 0 0.45rem; }
  .site-header .header-right .lang-switch { margin-right: 0.55rem; }
}
@media (min-width: 800px) and (max-width: 959px) {
  /* text links do not fit next to search, Live Now, language and survey here (same as below 800px) */
  .site-header .header-text-link { display: none; }
}
@media (min-width: 960px) and (max-width: 1023px) {
  html[lang="fr"] .site-header .header-text-link,
  html[lang="es"] .site-header .header-text-link { display: none; }
}
/* translated labels can be longer than English: let class-specifics tags wrap on phones */
@media (max-width: 720px) {
  .specifics-tag { white-space: normal; max-width: 100%; }
}
/* 12 languages: the header menu scrolls if the screen is short; footer uses a compact select */
.lang-switch-menu { max-height: calc(100vh - var(--header-h, 64px) - 1rem); max-height: calc(100dvh - var(--header-h, 64px) - 1rem); overflow-y: auto; overscroll-behavior: contain; }
.lang-switch-option { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.hub-footer-lang-select {
  max-width: 100%;
  padding: 0.3rem 1.9rem 0.3rem 0.75rem;
  border: 1px solid rgba(178, 141, 85, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23B28D55'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  color: rgba(243, 244, 246, 0.85);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.hub-footer-lang-select:hover,
.hub-footer-lang-select:focus-visible { color: var(--off-white, #F3F4F6); border-color: rgba(178, 141, 85, 0.7); outline: none; }
.hub-footer-lang-select option { background: #121214; color: #F3F4F6; }
/* CJK and Thai: system fonts with the right glyphs (Cinzel, Cormorant and Inter are Latin only),
   no wide letter-spacing, and line breaking that suits each script */
html:lang(ko) {
  --font-ui: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Nanum Gothic", system-ui, sans-serif;
  --font-display: "Cinzel", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", serif;
  --font-serif: "Cormorant Garamond", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Georgia, serif;
}
html:lang(ja) {
  --font-ui: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Cinzel", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", serif;
  --font-serif: "Cormorant Garamond", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", Georgia, serif;
}
html:lang(zh-Hant) {
  --font-ui: "Inter", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  --font-display: "Cinzel", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", serif;
  --font-serif: "Cormorant Garamond", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", Georgia, serif;
}
html:lang(th) {
  --font-ui: "Inter", "Leelawadee UI", "Thonburi", "Noto Sans Thai", "Tahoma", system-ui, sans-serif;
  --font-display: "Cinzel", "Leelawadee UI", "Thonburi", "Noto Sans Thai", "Tahoma", serif;
  --font-serif: "Cormorant Garamond", "Leelawadee UI", "Thonburi", "Noto Sans Thai", "Tahoma", Georgia, serif;
}
html:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }
html:lang(ja) body,
html:lang(zh-Hant) body { line-break: strict; overflow-wrap: anywhere; }
html:lang(th) body { overflow-wrap: anywhere; line-height: 1.7; }
html:lang(ko) :is(h1, h2, h3, h4, h5, h6, .nav-dropdown-trigger, .header-text-link, .cta-btn, .btn, button, .eyebrow, [class*="label"], [class*="tag"], [class*="title"]),
html:lang(ja) :is(h1, h2, h3, h4, h5, h6, .nav-dropdown-trigger, .header-text-link, .cta-btn, .btn, button, .eyebrow, [class*="label"], [class*="tag"], [class*="title"]),
html:lang(zh-Hant) :is(h1, h2, h3, h4, h5, h6, .nav-dropdown-trigger, .header-text-link, .cta-btn, .btn, button, .eyebrow, [class*="label"], [class*="tag"], [class*="title"]),
html:lang(th) :is(h1, h2, h3, h4, h5, h6, .nav-dropdown-trigger, .header-text-link, .cta-btn, .btn, button, .eyebrow, [class*="label"], [class*="tag"], [class*="title"]) { letter-spacing: 0.01em; }
/* ===== /Language switcher ===== */

/* CJK/Thai short labels and headings: break at spaces/phrases, not mid-word (overflow-wrap still rescues long runs) */
html:lang(ja) :is(h1, h2, h3, h4, h5, h6, .cta-btn, .btn, button, [class*="title"], [class*="label"], [class*="eyebrow"], [class*="name"], [class*="link"]) { word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; }
html:lang(zh-Hant) :is(h1, h2, h3, h4, h5, h6, .cta-btn, .btn, button, [class*="title"], [class*="label"], [class*="eyebrow"], [class*="name"], [class*="link"]) { word-break: keep-all; overflow-wrap: anywhere; }
/* ===== Expert cards: uniform format (2026-10-03) =====
   "<Class> Expert" kicker, spec pill row, name, bio clamped to 3 lines, View profile pinned to the bottom.
   Same structure and text sizes on every card, so cards in a row line up. */
a.expert-card { align-items: stretch; }
.expert-card .expert-card-body,
.class-expert-float .expert-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.expert-card .expert-card-body > *,
.class-expert-float .expert-card-body > * { max-width: 100%; }
.expert-card .expert-kicker,
.class-expert-float .expert-kicker {
  margin-top: auto;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expert-card .expert-specs,
.class-expert-float .expert-specs { margin: 0.1rem 0 0.5rem; }
.class-expert-float .expert-specs { margin: 0.05rem 0 0.4rem; gap: 0.25rem; }
.class-expert-float .expert-spec-pill { font-size: 0.56rem; padding: 0.1rem 0.42rem; }
.class-expert-float .expert-spec-pill,
.class-expert-float .expert-spec-amp { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.6); }
.expert-card .expert-name,
.class-expert-float .expert-name {
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expert-card .expert-why {
  font-size: 0.82rem;
  line-height: 1.45;
  height: calc(1.45em * 3);
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.class-expert-float .expert-why {
  height: calc(1.35em * 3);
  flex: 0 0 auto;
}
.expert-card .expert-link,
.class-expert-float .expert-link { margin-top: auto; flex: 0 0 auto; }
.expert-card .expert-why + .expert-link,
.class-expert-float .expert-why + .expert-link { margin-top: 0; }
/* Stacked floats keep their 2-line bio (three cards share one column) */
.class-expert-stack .class-expert-float .expert-why { height: calc(1.35em * 2); }
@media (max-width: 640px) {
  .class-expert-float .expert-spec-pill { font-size: 0.5rem; padding: 0.08rem 0.35rem; letter-spacing: 0.08em; }
  .class-expert-float .expert-specs { margin-bottom: 0.3rem; }
  .class-expert-stack .class-expert-float .expert-specs { display: none; }
}
@media (max-width: 640px) {
  body:has(.path-hero-panel) .class-expert-float .expert-specs { display: none; }
  body:has(.path-hero-panel) .class-expert-float .expert-kicker,
  body:has(.path-hero-panel) .class-expert-float .expert-name { margin: 0; display: block; }
}
/* Guide pages under 640px with several experts (Shai, Valkyrie Awakening): a row of compact chips
   at the top-right of the hero instead of three chips squeezed into the 132px stack column */
@media (max-width: 640px) {
  body:has(.path-hero-panel) .class-expert-stack {
    position: absolute;
    top: calc(var(--header-h) + 0.45rem);
    right: 0.75rem;
    left: auto;
    width: auto;
    max-width: calc(100% - 1.5rem);
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.35rem;
  }
  body:has(.path-hero-panel) .class-expert-stack .class-expert-float,
  body:has(.path-hero-panel) .class-expert-stack .class-expert-float.class-expert-float--left,
  body:has(.path-hero-panel) .class-expert-stack .class-expert-float.class-expert-float--right {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    height: 2.5rem;
    padding-right: 0.6rem;
  }
  body:has(.path-hero-panel) .class-expert-stack .class-expert-float .expert-kicker { display: none; }
  body:has(.path-hero-panel) .class-expert-stack .class-expert-float .expert-name { font-size: 0.78rem; }
}
/* Duo tags: slightly tighter so both fit on one line at 4-column desktop width in most languages */
.expert-card .expert-specs:has(.expert-spec-amp) .expert-spec-pill { letter-spacing: 0.08em; padding: 0.12rem 0.42rem; }
.expert-card .expert-specs:has(.expert-spec-amp) { gap: 0.25rem; }
/* ===== /Expert cards: uniform format ===== */

/* Path hero: short note under the quick stats (e.g. a skill-dependent Tankiness range) (2026-10-03) */
.path-hero-stat-note {
  box-sizing: border-box;
  width: calc(13.25rem * 3 + 0.75rem * 2);
  max-width: 100%;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(178, 141, 85, 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: rgba(242, 239, 232, 0.86);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: left;
  pointer-events: auto;
}
@media (max-width: 900px) {
  .path-hero-stat-note { width: calc(11.25rem * 3 + 0.75rem * 2); font-size: 0.74rem; }
}
@media (max-width: 640px) {
  .path-hero-stat-note,
  .classes_top:has(.path-hero-panel) .path-hero-stat-note { width: 100%; padding: 0.4rem 0.55rem; font-size: 0.68rem; line-height: 1.4; }
}

/* Stacked class-expert floats on the right (several Succession experts, e.g. Ninja Succession) */
.class-expert-stack.class-expert-stack--right { left: auto; right: 1rem; }
@media (max-width: 900px) {
  .class-expert-stack.class-expert-stack--right { left: auto; right: 0.65rem; }
}
@media (max-width: 640px) {
  body:has(.path-hero-panel) .class-expert-stack.class-expert-stack--right { right: 0.75rem; left: auto; }
}

/* ===== Grey text spacing (sitewide, 2026-10-06) =====
   Grey explanatory text must never sit flush against the UI element above it
   (panels, card grids, lists, videos, images). More specific gap rules above still win. */
:is(div, ul, ol, section, aside, figure, img, table, iframe) + :is(.combo-chain-note, .addon-list-note, .reforge-panel-note, .lightstone-panel-note, .combo-notes, .combo-repeat, .changelog-entry-note, .guide-video-hint, .tl-note-body) {
  margin-top: 0.9rem;
}
.reforge-panel + .combo-chain-note,
.lightstone-panel + .combo-chain-note,
.reforge-grid + .reforge-panel-note,
.lightstone-grid + .lightstone-panel-note {
  margin-top: 0.9rem !important;
}

/* Obvious external clip link (e.g. Twitch clips inside guide notes) */
a.clip-link {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s ease;
}
a.clip-link::after {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-left: .3em;
  vertical-align: -.08em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.clip-link:hover,
a.clip-link:focus-visible {
  color: var(--gold-hover);
  text-decoration-thickness: 2px;
}

/* ===== Crest logo shimmer (2026-10-15) =====
   Overlay added by js/crest-shimmer.js on top of each crest image, sized to the image's rendered art and masked
   to the class logo's alpha, so the light only ever lands on the logo. One ~1.9s sweep every 3s. */
.classes_top_symbol { position: relative; }
.classes_top_symbol .crest-shimmer {
  position: absolute;
  left: 0; top: 0; width: 0; height: 0;
  pointer-events: none;
  z-index: 2;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 175, 220, 0.30) 44%, rgba(165, 238, 255, 0.50) 46.5%, rgba(255, 255, 255, 0.97) 50%, rgba(200, 182, 255, 0.50) 53.5%, rgba(255, 190, 228, 0.30) 56%, rgba(255, 255, 255, 0) 60%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  mix-blend-mode: screen; mix-blend-mode: plus-lighter;
  animation: crest-shimmer-sweep 3s ease-in-out infinite;
}
@keyframes crest-shimmer-sweep {
  0%   { background-position: 100% 0; }
  63%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .classes_top_symbol .crest-shimmer { animation: none; display: none; }
}
/* Home maroon band star crest: same sweep, masked to the SVG (2026-10-15) */
.band-crest { position: relative; }
.band-crest .crest-shimmer {
  position: absolute; pointer-events: none; z-index: 1;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 175, 220, 0.30) 44%, rgba(165, 238, 255, 0.50) 46.5%, rgba(255, 255, 255, 0.97) 50%, rgba(200, 182, 255, 0.50) 53.5%, rgba(255, 190, 228, 0.30) 56%, rgba(255, 255, 255, 0) 60%);
  background-size: 300% 100%; background-repeat: no-repeat; background-position: 100% 0;
  mix-blend-mode: screen; mix-blend-mode: plus-lighter;
  animation: crest-shimmer-sweep 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .band-crest .crest-shimmer { animation: none; display: none; } }
/* ===== /Crest logo shimmer ===== */

/* ===== Home crest divider (2026-10-15): matches the class crest banners =====
   Same band art as class_detail_top_symbol.png (assets/home-divider-band.png = the class band with its logo
   painted out): 100px band + pointed centre tip at 144px tall, 2/3 scale at <= 1280px like the class pages.
   A crisp 4-point gold SVG star sits where the class logo would; js/crest-shimmer.js sweeps it (.band-crest). */
.section-band.section-band--crest {
  --hbc-s: 1;
  height: calc(var(--hbc-s) * 144px);
  margin-top: calc(var(--hbc-s) * -44px);
  background: none;
  display: block;
  position: relative;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
@media (max-width: 1280px) { .section-band.section-band--crest { --hbc-s: 0.6667; } }
.section-band--crest .section-band-art {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}
.section-band--crest .band-crest {
  position: absolute;
  left: 50%;
  top: calc(var(--hbc-s) * 48px);
  width: calc(var(--hbc-s) * 78px);
  height: calc(var(--hbc-s) * 78px);
  transform: translateX(-50%);
  display: block;
  z-index: 1;
}
.section-band--crest .band-crest-star {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
/* ===== /Home crest divider ===== */

/* ===== Home hero class conveyor (2026-10-15) =====
   js/home-mosaic.js turns .home-hero-mosaic into one belt per row. The visible window is unchanged:
   --cols x --rows tiles (6x2, 4x3 at <= 960px, 3x3 at <= 640px), same 4px gaps, opacity and colour treatment. */
.home-hero-mosaic { --cols: 6; --rows: 2; }
@media (max-width: 960px) { .home-hero-mosaic { --cols: 4; --rows: 3; } }
@media (max-width: 640px) { .home-hero-mosaic { --cols: 3; --rows: 3; } }
.home-hero-mosaic.is-belt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  container-type: inline-size;
  pointer-events: auto;
}
.home-hero-mosaic.is-belt .mosaic-row { flex: 1 1 0; min-height: 0; overflow: hidden; }
.home-hero-mosaic.is-belt .mosaic-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: home-mosaic-belt var(--belt-dur, 144s) linear infinite;
  will-change: transform;
}
.home-hero-mosaic.is-belt .mosaic-tile {
  display: block;
  flex: 0 0 auto;
  width: calc((100cqw - (var(--cols) - 1) * 4px) / var(--cols));
  height: 100%;
  margin-right: 4px;
}
.home-hero-mosaic.is-belt:hover .mosaic-track { animation-play-state: paused; }
@keyframes home-mosaic-belt { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--belt-shift, 50%))); } }
@media (prefers-reduced-motion: reduce) {
  .home-hero-mosaic.is-belt .mosaic-track { animation: none; transform: none; }
  .home-hero-mosaic.is-belt .mosaic-row { overflow-x: auto; scrollbar-width: none; }
  .home-hero-mosaic.is-belt .mosaic-tile.is-clone { display: none; }
}
/* ===== /Home hero class conveyor ===== */

/* ===== Nav wordmark pearl shimmer (2026-10-15) =====
   The same pearlescent sweep as the crest logos (near-white core, soft pink / cyan / lavender edges,
   plus-lighter over screen), on the "BDO Class Hub" wordmark in the top bar. A ::after copy of the text sits
   exactly on top of the real text (same box, font and wrapping) and the sweep is clipped to its letterforms with
   background-clip:text, so it never spills outside the letters and causes no layout shift. 6s cycle, ~1.9s sweep. */
.brand-logo .brand-text::after {
  content: "BDO Class Hub";
  position: absolute;
  inset: 0;
  pointer-events: none;
  white-space: inherit;
  text-shadow: none;
  color: transparent;
  background-image: linear-gradient(105deg, rgba(255, 90, 180, 0) 34%, rgba(255, 90, 180, 0.85) 39.8%, rgba(255, 196, 80, 0.85) 43.5%, rgba(50, 215, 255, 0.95) 47.1%, rgba(255, 255, 255, 0.9) 49.6%, rgba(255, 255, 255, 0.9) 50.4%, rgba(150, 110, 255, 0.95) 52.9%, rgba(80, 235, 180, 0.85) 56.5%, rgba(255, 110, 200, 0.8) 60.2%, rgba(255, 110, 200, 0) 66%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: normal;
  animation: nav-pearl-sweep 6s ease-in-out infinite;
}
/* 6s cycle: same ~1.9s sweep (31.5% of 6s), idle the rest */
@keyframes nav-pearl-sweep {
  0%    { background-position: 100% 0; }
  31.5% { background-position: 0% 0; }
  100%  { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo .brand-text::after { animation: none; content: none; }
}
/* ===== /Nav wordmark pearl shimmer ===== */

/* In-place navigation progress bar (js/nav-router.js) */
.site-header .nav-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; opacity: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(178,141,85,0.4), #d9b46a, #f3d58f); box-shadow: 0 0 8px rgba(217,180,106,0.6); }
.site-header .nav-progress.is-loading { opacity: 1; width: 80%; transition: width 2.5s cubic-bezier(.1,.7,.2,1), opacity .1s; }
.site-header .nav-progress.is-done { opacity: 0; width: 100%; transition: width .15s ease, opacity .25s ease .12s; }
@media (prefers-reduced-motion: reduce) { .site-header .nav-progress, .site-header .nav-progress.is-loading, .site-header .nav-progress.is-done { transition: none; } }

.prio-hint{display:none!important}

/* Nav search: same box on every page. Guide pages (class-layout.css) render inputs content-box; match that sitewide. */
.site-header .nav-experts-search-input { box-sizing: content-box !important; }

/* Back-to-top (shown after a guide quick-nav jump; js/nav-router.js) */
.nr-backtop {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(178, 141, 85, 0.75);
  background: rgba(12, 12, 14, 0.88);
  color: #e3c27a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(227, 194, 122, 0.08) inset;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.nr-backtop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.nr-backtop:hover { background: rgba(178, 141, 85, 0.22); border-color: #e3c27a; color: #f5dc9e; }
.nr-backtop:focus { outline: none; }
.nr-backtop:focus-visible { outline: 2px solid #e3c27a; outline-offset: 3px; }
@media (max-width: 600px) {
  .nr-backtop { bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .nr-backtop, .nr-backtop.is-visible { transition: none; }
}

/* Router guide entry: expert cards + page content appear together with the class banner (js/nav-router.js) */
html.nr-entering .class-expert-float,
html.nr-entering .class-expert-stack,
html.nr-entering .classes_wrap { opacity: 0 !important; transition: none !important; }
html.nr-reveal .class-expert-float,
html.nr-reveal .class-expert-stack,
html.nr-reveal .classes_wrap { transition: opacity 0.35s ease !important; }
@media (prefers-reduced-motion: reduce) {
  html.nr-reveal .class-expert-float, html.nr-reveal .class-expert-stack, html.nr-reveal .classes_wrap { transition: none !important; }
}

/* ===== Home crest band recoloured gold (2026-10-20): same gradient as .btn-primary, masked to the band art's
   exact shape so the original band, tip, star and drop shadow are untouched. Home page only (.section-band--crest). */
.section-band.section-band--crest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, #dac7a1 0%, #c9ae82 30%, #b3956c 68%, #9d7f5a 100%);
  -webkit-mask: url(../assets/home-divider-band.png) center top / auto 100% no-repeat;
  mask: url(../assets/home-divider-band.png) center top / auto 100% no-repeat;
}
/* Texture: the original band art (its fabric weave, edge bevel and highlights) is turned to greyscale and brightened,
   and the gold gradient is laid over it with mix-blend-mode: color, so the art's light/dark detail shows through in gold. */
.section-band.section-band--crest { isolation: isolate; }
.section-band.section-band--crest .section-band-art {
  filter: grayscale(1) brightness(3) contrast(1.25) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}
.section-band.section-band--crest::before { mix-blend-mode: color; }
/* ===== /Home crest band gold ===== */
/* Always reserve the scrollbar's space (2026-10-20): during in-place navigation a page briefly gets short, the scrollbar
   vanished and the whole nav shifted ~15px sideways. Keeping the gutter stops that on every page. */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* Old square vendor top button never shows (2026-10-20); only .nr-backtop remains */
.btn_site_top, .js-btnSiteTop { display: none !important; }
/* Leave blank room under the footer so the round back-to-top button (44px, 1.25rem up) covers no text */
.site-footer, .hub-footer, footer.footer, #footer {
  padding-bottom: calc(44px + 1.25rem + 24px + env(safe-area-inset-bottom, 0px)) !important;
}
/* No white flash (2026-10-20): everything that can paint before content stays dark */
html, body { background-color: #000; color-scheme: dark; }
.page_wrap { background-color: #000; }
iframe { background-color: #000; color-scheme: dark; }
/* ===== Darker bronze-gold survey buttons + home band (2026-10-20, matches survey-btn-ref.png) ===== */
.cta-btn, a.btn-primary[href$="survey.html"] { background: linear-gradient(180deg, rgba(40, 28, 8, 0.45) 0%, rgba(40, 28, 8, 0) 34%, rgba(255, 228, 180, 0) 72%, rgba(255, 228, 180, 0.07) 100%), linear-gradient(90deg, #644f2a 0%, #6f5835 50%, #7c6343 100%); color: #ece7dd; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 0 0 1px #110e0a, inset 0 1px 0 rgba(255, 235, 200, 0.10), inset 0 -1px 0 rgba(125, 100, 68, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45); }
.cta-btn:hover, .cta-btn:focus-visible, .cta-btn.is-hover, a.btn-primary[href$="survey.html"]:hover, a.btn-primary[href$="survey.html"]:focus-visible, a.btn-primary[href$="survey.html"].is-hover { background: linear-gradient(180deg, rgba(40, 28, 8, 0.35) 0%, rgba(40, 28, 8, 0) 34%, rgba(255, 228, 180, 0) 72%, rgba(255, 228, 180, 0.10) 100%), linear-gradient(90deg, #745c33 0%, #81673f 50%, #8f7450 100%); color: #fff; filter: none; box-shadow: 0 0 0 1px #110e0a, inset 0 1px 0 rgba(255, 235, 200, 0.16), inset 0 -1px 0 rgba(140, 112, 76, 0.6), 0 0 14px rgba(160, 126, 76, 0.45), 0 6px 14px rgba(0, 0, 0, 0.45); }
.section-band.section-band--crest .section-band-art { filter: grayscale(1) brightness(1.75) contrast(1.25) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55)); }
.section-band.section-band--crest::before { background: linear-gradient(180deg, #4b3a19 0%, #644f2a 30%, #7c6343 70%, #715832 100%); }

/* ===== Subtle woven background (2026-10-20): the home crest band's fabric weave, high-passed into a seamless 512x128 tile
   (assets/bg-weave-tile.png, alpha baked at max 12%, mean ~4%), on the plain-black page surfaces only. Scrolls with the page
   (no fixed attachment); black colour stays underneath so first paint is still black before the tile arrives. ===== */
body, .page_wrap { background-color: #000; }
body, .page_wrap, .classes_wrap, .e404-main { background-image: url(../assets/bg-crest-tile.png?v=2) !important; background-repeat: repeat !important; background-size: 51.2px 19px !important; background-position: 0 0 !important; }
/* 404 keeps its gold glow on top of the weave */
.e404-main { background-image: radial-gradient(at 50% 0%, rgba(178, 141, 85, 0.16), transparent 60%), url(../assets/bg-crest-tile.png?v=2) !important; background-size: auto, 51.2px 19px !important; }
/* Home 'Choose a Class' (2026-10-21): drop its grey art so the body's black + faint crest tile shows straight through (no seam, tile stays aligned) */
/* 2026-10-21 grey again: a translucent warm-white wash over the body's black + crest tile gives the old art's grey
   (top ~rgb(41,39,37) fading to ~rgb(16,15,15), same vertical falloff and hard top edge as select_classes_bg.jpg),
   while the body tile underneath stays perfectly aligned because the section paints no tile of its own. */
/* also every class landing and guide page (Awakening / Succession / single-spec): one shared rule so they stay in sync */
.select_classes_wrap.hub-home-choose, .select_classes_wrap.select_sub { background: linear-gradient(180deg, rgba(255, 242, 230, 0.161) 0%, rgba(255, 242, 230, 0.155) 10%, rgba(255, 242, 230, 0.131) 30%, rgba(255, 242, 230, 0.100) 50%, rgba(255, 242, 230, 0.079) 70%, rgba(255, 242, 230, 0.065) 90%, rgba(255, 242, 230, 0.063) 100%) !important; }

/* Tier list (2026-10-21): same pure black base as every other page (was #050505), crest tile on top unchanged */
body.page-tierlist { background-color: #000 !important; }

/* 2026-10-21: Classes dropdown starts straight with the class grid (no "Black Desert Classes" label/divider) */
.nav-mega .mega-heading { display: none !important; }

/* Notice cards: always 10px gap above and below (beats :first-child/:last-child and sibling zeroing) */
.combo-notes.combo-notes.combo-notes {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* Merged notice cards: spacing before each following note title */
.combo-notes > :not(.combo-notes-title) + .combo-notes-title {
  margin-top: 1.1rem;
}

/* ===== PC / Console controls toggle (js/controls-toggle.js) =====
   Static: floats at the top-right of the first guide window, beside the kicker/title.
   The whole panel is the switch; hover grows the panel slightly from its top-right corner. */
.controls-toggle-mount,
.combo-guide-inner > .controls-toggle {
  float: right;
  margin: 0 0 0.6rem 1rem;
}
.controls-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem 0.45rem 0.55rem;
  box-sizing: border-box;
  border: 1px solid rgba(178, 141, 85, 0.45);
  border-radius: 4px;
  background: #0e0e0e;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: top right;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.controls-toggle:hover,
.controls-toggle:focus-visible {
  transform: scale(1.05);
  border-color: var(--gold, #B28D55);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}
.controls-toggle:focus-visible { outline: 2px solid #e3c27a; outline-offset: 2px; }
.ct-labels { display: flex; flex-direction: column; gap: 0.28rem; }
.ct-label {
  color: rgba(242, 239, 232, 0.5);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.controls-toggle:not(.is-console) .ct-label--pc,
.controls-toggle.is-console .ct-label--console { color: #e3c27a; }
.ct-switch {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid rgba(178, 141, 85, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}
.ct-knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold, #B28D55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}
.controls-toggle.is-console .ct-knob { transform: translateY(16px); background: #e3c27a; }
/* saved "console" choice: hide guide text until converted (no PC flash); auto-reveal fallback */
html.ct-pending:not(.ct-applied) .combo-guide { visibility: hidden; animation: ct-reveal 0s linear 2s forwards; }
@keyframes ct-reveal { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .controls-toggle, .ct-knob { transition: none; }
  .controls-toggle:hover, .controls-toggle:focus-visible { transform: none; }
}