/* ========================================================================== 
   RiftMu — Obsidian Citadel selectable template
   Everything visual is scoped to [data-site-template="citadel"]. The current
   Rift Ascendant template remains the untouched fallback.
   ========================================================================== */

/* Shared template picker and accessibility helpers. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 2147483647;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(245, 194, 75, 0.72);
  border-radius: 8px;
  background: #09090d;
  color: #ffe5a6;
  font-weight: 850;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.16s ease;
}
.skip-link:focus {
  transform: translateY(0);
}
.content-start {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
}

.template-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding-left: 34px;
  border: 1px solid rgba(146, 166, 214, 0.24);
  border-radius: 11px;
  background: linear-gradient(180deg, #151f34, #0c1322);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 22px rgba(0, 0, 0, 0.28);
}
.template-switcher__gem {
  position: absolute;
  left: 13px;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(224, 203, 255, 0.8);
  background: linear-gradient(135deg, #ff8b36 0 45%, #a64cff 55% 100%);
  box-shadow: 0 0 11px rgba(174, 81, 255, 0.6);
  transform: rotate(45deg);
  pointer-events: none;
}
.template-switcher select {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0.48rem 1.7rem 0.48rem 0.18rem;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent var(--select-chevron) no-repeat right 0.7rem center /
    12px 8px;
  color: #e7edf9;
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  cursor: pointer;
}
.template-switcher:focus-within {
  border-color: rgba(245, 194, 75, 0.62);
  box-shadow:
    0 0 0 3px rgba(245, 194, 75, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.citadel-hero-proof,
.citadel-hero-art {
  display: none;
}

html[data-site-template="citadel"] {
  color-scheme: dark;
  --page-bg: #070609;
  --surface-0: #100e13;
  --surface-1: #0b0a0e;
  --surface-2: #17131b;
  --surface-soft: #0d0b10;
  --text-strong: #fff4dc;
  --text: #d8cfc4;
  --text-muted: #a39791;
  --accent: #f6d38a;
  --accent-2: #c7a96d;
  --brand-1: #b81720;
  --brand-2: #f04435;
  --gold: #e9b84f;
  --gold-tone: #e9b84f;
  --blue: #8f4dff;
  --rift: #a64cff;
  --border: rgba(221, 176, 89, 0.18);
  --border-2: rgba(236, 193, 105, 0.34);
  --border-light: rgba(221, 176, 89, 0.18);
  --glass: rgba(11, 9, 13, 0.82);
  --glass-2: rgba(17, 13, 20, 0.94);
  --focus-ring: 0 0 0 3px rgba(224, 175, 76, 0.28);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.34);
  --shadow-md:
    0 22px 58px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 238, 199, 0.035);
  --shadow-lg: 0 34px 90px rgba(0, 0, 0, 0.68);
  --ranking-primary: #f1c86e;
  --ranking-primary-light: #ffe3a3;
  --ranking-primary-dark: #c49338;
  --ranking-box-bg: #100e13;
  --ranking-box-border: rgba(221, 176, 89, 0.18);
  --ranking-tab-bg: linear-gradient(180deg, #151119, #0b090d);
  --ranking-tab-active-bg: linear-gradient(
    135deg,
    #7d111b,
    #c62625 62%,
    #8e3cff
  );
  --ranking-table-header-bg: #0b090d;
  --ranking-table-header-color: #f0c86d;
  --ranking-badge-bg: #1b151d;
  --ranking-shadow: var(--shadow-md);
  --site-header-offset: 88px;
  background: #070609;
  scroll-padding-top: var(--site-header-offset);
}

html[data-site-template="citadel"] body {
  color: var(--text);
  background:
    radial-gradient(
      1000px 700px at 10% 8%,
      rgba(119, 12, 22, 0.14),
      transparent 62%
    ),
    radial-gradient(
      900px 620px at 92% 22%,
      rgba(116, 42, 180, 0.12),
      transparent 60%
    ),
    linear-gradient(180deg, #09070b 0, #070609 38%, #0a080b 100%);
  background-attachment: fixed;
  scrollbar-color: #684b27 #08070a;
}
html[data-site-template="citadel"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(
      115deg,
      transparent 0 48%,
      rgba(255, 212, 128, 0.018) 49%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 0,
      rgba(255, 213, 130, 0.035),
      transparent 34%
    );
  background-size:
    58px 58px,
    100% 100%;
}
html[data-site-template="citadel"] body > main,
html[data-site-template="citadel"] body > footer {
  position: relative;
  z-index: 1;
}

.citadel-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.52;
  mix-blend-mode: screen;
}
.citadel-ambient[hidden] {
  display: none;
}

html[data-site-template="citadel"] ::selection {
  background: rgba(165, 42, 35, 0.86);
  color: #fff7e5;
}
html[data-site-template="citadel"] ::-webkit-scrollbar {
  width: 11px;
  background: #08070a;
}
html[data-site-template="citadel"] ::-webkit-scrollbar-thumb {
  border: 3px solid #08070a;
  border-radius: 20px;
  background: linear-gradient(#815d2d, #4b301b);
}
html[data-site-template="citadel"] a:focus-visible,
html[data-site-template="citadel"] button:focus-visible,
html[data-site-template="citadel"] select:focus-visible,
html[data-site-template="citadel"] input:focus-visible,
html[data-site-template="citadel"] textarea:focus-visible {
  outline: 2px solid #f2ca73;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(164, 74, 255, 0.16);
}

/* ------------------------------------------------------------------ header */
html[data-site-template="citadel"] header[role="banner"] {
  min-height: 72px;
  padding: 0.7rem clamp(1rem, 2.2vw, 2.4rem);
  gap: clamp(0.7rem, 1.35vw, 1.45rem);
  border: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(14, 10, 15, 0.97),
    rgba(7, 6, 9, 0.94)
  ) !important;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.62),
    inset 0 -1px 0 rgba(235, 188, 93, 0.22) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}
html[data-site-template="citadel"] header[role="banner"]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    #6d1720 25%,
    #e7b955 50%,
    #6d1720 75%,
    transparent
  );
  opacity: 0.7;
}
html[data-site-template="citadel"] header[role="banner"]::after {
  left: 18%;
  right: 18%;
  bottom: -4px;
  height: 7px;
  background: radial-gradient(
    ellipse at center,
    rgba(235, 183, 76, 0.52),
    transparent 66%
  );
  filter: blur(3px);
}
html[data-site-template="citadel"] .logo {
  position: relative;
  height: 46px;
  padding: 0 0 0 23px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.7vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    #fff6dc 0,
    #f2c866 42%,
    #a96722 76%,
    #f0c66a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #311409)
    drop-shadow(0 0 13px rgba(231, 179, 73, 0.2));
}
html[data-site-template="citadel"] .logo::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 1px solid #f0c56b;
  background: linear-gradient(
    135deg,
    #5a1020,
    #c92b26 45%,
    #8c3eff 55%,
    #2c163b
  );
  box-shadow: 0 0 14px rgba(171, 72, 255, 0.5);
  transform: translateY(-50%) rotate(45deg);
}
html[data-site-template="citadel"] header[role="banner"] nav {
  gap: clamp(0.22rem, 0.55vw, 0.7rem);
}
html[data-site-template="citadel"]
  header[role="banner"]
  nav
  a:not([class*="btn"]) {
  position: relative;
  padding: 0.62rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #c9bdb5;
  /* 12.5px in the two-row band, ~14px on full desktop — the old
     clamp(0.66rem, 0.56vw, 0.76rem) rendered 10.75px at 1920px. */
  font-size: clamp(0.78rem, 0.35vw + 0.55rem, 0.88rem);
  font-weight: 850;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}
html[data-site-template="citadel"]
  header[role="banner"]
  nav
  a:not([class*="btn"]):hover,
html[data-site-template="citadel"]
  header[role="banner"]
  nav
  a:not([class*="btn"]):focus-visible,
html[data-site-template="citadel"]
  header[role="banner"]
  nav
  a:not([class*="btn"]).is-active {
  border-color: rgba(226, 177, 80, 0.25);
  background: linear-gradient(
    180deg,
    rgba(227, 178, 80, 0.09),
    rgba(132, 29, 30, 0.1)
  );
  color: #ffe6ad;
  text-decoration: none;
  transform: translateY(-1px);
}
html[data-site-template="citadel"]
  header[role="banner"]
  nav
  a:not([class*="btn"]).is-active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 1px;
  background: #efc568;
  box-shadow: 0 0 9px #d69735;
}
html[data-site-template="citadel"] .header-right {
  gap: 0.65rem;
}
html[data-site-template="citadel"] .account-controls {
  gap: 0.5rem;
}
html[data-site-template="citadel"] .account-controls a[class*="btn"] {
  min-height: 42px;
  padding: 0.62rem 0.95rem;
  border-radius: 7px;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html[data-site-template="citadel"] .btn-register {
  --btn-bg: linear-gradient(180deg, #e24731, #9e151c 72%, #661016);
  --btn-bg-hover: linear-gradient(180deg, #ef5b3d, #bb2022 72%, #791219);
  --btn-border: rgba(239, 195, 101, 0.44);
  --btn-shadow:
    0 10px 24px rgba(123, 10, 18, 0.34), inset 0 1px 0 rgba(255, 238, 191, 0.28);
}
html[data-site-template="citadel"] .btn-login,
html[data-site-template="citadel"] .btn-account {
  --btn-bg: linear-gradient(180deg, #201922, #0d0a10);
  --btn-bg-hover: linear-gradient(180deg, #312334, #151018);
  --btn-border: rgba(223, 180, 92, 0.28);
  --btn-fg: #ead8b6;
  --btn-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 18px rgba(0, 0, 0, 0.28);
}
html[data-site-template="citadel"] .lang-switcher select,
html[data-site-template="citadel"] .template-switcher {
  border-color: rgba(228, 183, 93, 0.25);
  border-radius: 6px;
  background-color: #0d0a10;
}
html[data-site-template="citadel"] .lang-switcher select {
  min-height: 42px;
  margin-left: 0;
  padding: 0.45rem 1.5rem 0.45rem 0.62rem;
  color: #e7d5b4;
  font-size: 0.8rem;
  background-image: none;
}
html[data-site-template="citadel"] .template-switcher {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 20px rgba(0, 0, 0, 0.28);
}
html[data-site-template="citadel"] .template-switcher select {
  color: #f2dbab;
}

/* --------------------------------------------------------------- structure */
html[data-site-template="citadel"] .container {
  max-width: var(--shell);
}
html[data-site-template="citadel"]
  :where(h1, h2, .page-title, .ranking-title, .side-widget__title) {
  font-family: var(--font-display);
  color: var(--text-strong);
}
html[data-site-template="citadel"]
  :where(
    .page-title,
    section.container > h2:first-child,
    .home-records-head h2
  ) {
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-shadow:
    0 2px 0 #2b130a,
    0 0 24px rgba(228, 174, 68, 0.1);
}
html[data-site-template="citadel"]
  :where(
    .white-box,
    .info-block,
    .news-card,
    .news-item,
    .news-archive-item,
    .news-archive-shell,
    .news-more,
    .class-panel,
    .muor .nav-card,
    .muor .realm-card,
    .muor .detail-hero,
    .muor .hero-lite,
    .muor .stat-grid > div,
    .ranking-main-container,
    .ranking-main-container .white-box,
    .account-card,
    .account-panel
  ) {
  border: 1px solid rgba(222, 177, 88, 0.2) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, rgba(255, 238, 198, 0.025), transparent 28%),
    linear-gradient(180deg, #151117 0%, #0d0b0f 100%) !important;
  color: var(--text) !important;
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 238, 195, 0.045),
    inset 0 0 0 3px rgba(0, 0, 0, 0.18) !important;
}
html[data-site-template="citadel"] section.container {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-site-template="citadel"] .page-header-box,
html[data-site-template="citadel"] .ranking-heading-card,
html[data-site-template="citadel"]
  :where(.account-titlebar, .sp-hero, .buygp-hero) {
  position: relative;
  overflow: hidden;
  border-color: rgba(235, 190, 99, 0.34) !important;
  background:
    linear-gradient(
      90deg,
      rgba(9, 7, 10, 0.98) 0%,
      rgba(10, 7, 11, 0.91) 43%,
      rgba(9, 6, 10, 0.54) 76%,
      rgba(8, 6, 9, 0.72) 100%
    ),
    url("/assets/templates/citadel/inner-masthead-v2.webp") center right / cover
      no-repeat !important;
}
html[data-site-template="citadel"] .page-header-box {
  min-height: clamp(164px, 16vw, 214px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.35rem, 2.8vw, 2.5rem) !important;
}
html[data-site-template="citadel"] .page-header-box > * {
  position: relative;
  z-index: 1;
}
html[data-site-template="citadel"] .page-header-box .page-header-copy {
  max-width: 760px;
}
html[data-site-template="citadel"] .page-header-box::after,
html[data-site-template="citadel"] .ranking-heading-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    #9b1a20 28%,
    #e9bb5d 50%,
    #7f2bc0 72%,
    transparent
  );
  opacity: 0.9;
}
html[data-site-template="citadel"] .page-kicker,
html[data-site-template="citadel"] .page-count-pill,
html[data-site-template="citadel"] .badge {
  border-color: rgba(231, 184, 89, 0.3) !important;
  background: rgba(225, 177, 79, 0.075) !important;
  color: #f2ca76 !important;
}
html[data-site-template="citadel"] :where(main p, main li, main dd) {
  color: var(--text);
}
html[data-site-template="citadel"]
  :where(.text-muted, .hint, .section-intro, .page-subtitle, .guide-updated) {
  color: var(--text-muted);
}
html[data-site-template="citadel"]
  :where(a, .char-link, .guild-link, .ranking-table a) {
  text-decoration-color: rgba(235, 187, 91, 0.3);
}
html[data-site-template="citadel"]
  :where(
    .char-link,
    .guild-link,
    .home-record-name,
    .home-kill-log a,
    .home-event-row a,
    .home-mini-table a
  ) {
  color: #eac069 !important;
}

/* ------------------------------------------------------------- controls */
html[data-site-template="citadel"]
  :where(
    .btn,
    .btn-primary,
    .btn--primary,
    .news-btn,
    .filter-btn,
    .pagination-list a,
    .ranking-tab,
    .muor .realm-card .cta,
    .hero-download-btn
  ) {
  --btn-bg: linear-gradient(180deg, #291b1e 0%, #160f13 52%, #0c090c 100%);
  --btn-bg-hover: linear-gradient(
    180deg,
    #3a2728 0%,
    #21151a 58%,
    #100b0f 100%
  );
  --btn-border: rgba(231, 184, 89, 0.34);
  --btn-fg: #f3dfb7;
  --btn-shadow:
    0 10px 28px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 237, 194, 0.07);
  border-radius: 6px;
}
html[data-site-template="citadel"]
  :where(.btn--gold, .filter-btn, .pagination-list .active) {
  --btn-bg: linear-gradient(180deg, #f0cc78, #b47b26 60%, #765018);
  --btn-bg-hover: linear-gradient(180deg, #ffe39b, #ca9132 60%, #82581b);
  --btn-border: #e1b25c;
  --btn-fg: #251408;
}
html[data-site-template="citadel"]
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(
        [type="file"]
      ):not([type="submit"]):not([type="button"]):not([type="reset"]):not(
        [type="image"]
      ),
    select,
    textarea,
    .input,
    .filter-input,
    .filter-select
  ) {
  border-color: rgba(222, 177, 87, 0.25) !important;
  border-radius: 6px !important;
  background: #0b090d !important;
  color: #eadfce !important;
  box-shadow: inset 0 2px 9px rgba(0, 0, 0, 0.42);
}
html[data-site-template="citadel"]
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(
        [type="file"]
      ):not([type="submit"]):not([type="button"]):not([type="reset"]):not(
        [type="image"]
      ),
    select,
    textarea,
    .input
  ):focus {
  border-color: #dcae54 !important;
  box-shadow:
    var(--focus-ring),
    inset 0 2px 9px rgba(0, 0, 0, 0.42) !important;
}
html[data-site-template="citadel"] select:not([multiple]) {
  padding-right: 2.35rem !important;
  background-color: #0b090d !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #e4b75f 50%),
    linear-gradient(135deg, #e4b75f 50%, transparent 50%) !important;
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50% !important;
  background-repeat: no-repeat !important;
  background-size:
    6px 6px,
    6px 6px !important;
}
html[data-site-template="citadel"]
  :where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  accent-color: #d9a948;
}

/* -------------------------------------------------------------------- hero */
html[data-site-template="citadel"] .rift-hero {
  min-height: clamp(690px, 86vh, 860px);
  margin: 0;
  padding: clamp(3.1rem, 6vh, 5rem) 0 clamp(4.7rem, 8vh, 6rem);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(
      90deg,
      #050407 0%,
      rgba(7, 5, 8, 0.98) 39%,
      rgba(10, 6, 11, 0.9) 68%,
      #070508 100%
    ),
    radial-gradient(
      ellipse 54% 82% at 78% 45%,
      rgba(105, 30, 139, 0.22),
      transparent 70%
    ),
    radial-gradient(
      ellipse 44% 68% at 70% 30%,
      rgba(164, 42, 28, 0.16),
      transparent 72%
    ),
    linear-gradient(180deg, #0a070b, #050407 96%);
  box-shadow: none;
  isolation: isolate;
}
html[data-site-template="citadel"] .rift-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 0 49.8%,
      rgba(241, 190, 88, 0.035) 50%,
      transparent 50.2%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 8.9%,
      rgba(232, 185, 91, 0.017) 9%,
      transparent 9.15% 18%
    ),
    radial-gradient(
      620px 390px at 72% 48%,
      rgba(153, 43, 215, 0.16),
      transparent 72%
    ),
    radial-gradient(
      600px 340px at 61% 31%,
      rgba(216, 50, 35, 0.14),
      transparent 74%
    );
  mix-blend-mode: screen;
}
html[data-site-template="citadel"] .rift-hero::after {
  height: 180px;
  z-index: 2;
  background:
    linear-gradient(180deg, transparent, #080609 83%),
    linear-gradient(
        90deg,
        transparent 7%,
        rgba(232, 184, 88, 0.5) 50%,
        transparent 93%
      )
      bottom / 100% 1px no-repeat;
}
html[data-site-template="citadel"] .rift-hero__bg {
  display: none;
}
html[data-site-template="citadel"] .rift-hero__inner {
  z-index: 3;
  width: min(var(--shell-fluid), var(--shell));
  box-sizing: border-box;
  padding-inline: var(--shell-gutter);
  grid-template-columns: minmax(420px, 0.88fr) minmax(520px, 1.12fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
}
html[data-site-template="citadel"] .rift-hero__copy {
  position: relative;
  z-index: 4;
  gap: 13px;
  max-width: 660px;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}
html[data-site-template="citadel"] .rift-hero__copy::before {
  content: "";
  position: absolute;
  left: -8%;
  top: -12%;
  width: 94%;
  height: 120%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 35% 48%,
    rgba(4, 3, 5, 0.86),
    rgba(4, 3, 5, 0.42) 52%,
    transparent 76%
  );
  filter: blur(12px);
}
html[data-site-template="citadel"] .rift-hero__kicker {
  gap: 0.72rem;
  color: #f7cd75;
  font-size: clamp(0.66rem, 0.55vw, 0.78rem);
  letter-spacing: 0.3em;
  text-shadow:
    0 0 15px rgba(235, 174, 62, 0.28),
    0 2px 7px #000;
}
html[data-site-template="citadel"] .rift-hero__kicker::before,
html[data-site-template="citadel"] .rift-hero__kicker::after {
  width: clamp(24px, 4vw, 62px);
  background: linear-gradient(90deg, transparent, #dca843);
}
html[data-site-template="citadel"] .rift-hero__kicker::after {
  background: linear-gradient(90deg, #dca843, transparent);
}
html[data-site-template="citadel"] .rift-hero__title {
  margin: -0.02em 0 0;
  font-family: var(--font-display);
  font-size: clamp(4.3rem, 7.4vw, 7.2rem);
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 0.9;
  text-transform: uppercase;
  background:
    linear-gradient(
      110deg,
      transparent 40%,
      rgba(255, 255, 255, 0.88) 49%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #fff7df 0%,
      #f2cf7d 29%,
      #b97825 57%,
      #ebc268 74%,
      #7d1c19 100%
    );
  background-size:
    250% 100%,
    100% 100%;
  background-position:
    220% 0,
    0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(75, 32, 12, 0.5);
  filter: drop-shadow(0 4px 0 #301107)
    drop-shadow(0 14px 24px rgba(0, 0, 0, 0.72));
  animation: citadelTitleSheen 7s ease-in-out infinite;
}
@keyframes citadelTitleSheen {
  0%,
  60% {
    background-position:
      220% 0,
      0 0;
  }
  86%,
  100% {
    background-position:
      -120% 0,
      0 0;
  }
}
html[data-site-template="citadel"] .rift-hero__lead {
  max-width: 47ch;
  color: #ddd2c3;
  font-size: clamp(1.03rem, 0.45vw + 0.94rem, 1.18rem);
  line-height: 1.7;
  text-shadow: 0 2px 9px #000;
}
html[data-site-template="citadel"] .citadel-hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 590px);
  margin: 0.45rem 0 0.2rem;
  padding: 0.7rem 0;
  list-style: none;
  border-top: 1px solid rgba(232, 183, 83, 0.25);
  border-bottom: 1px solid rgba(232, 183, 83, 0.18);
}
html[data-site-template="citadel"] .citadel-hero-proof li {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 0.16rem 0.9rem;
}
html[data-site-template="citadel"] .citadel-hero-proof li:first-child {
  padding-left: 0;
}
html[data-site-template="citadel"] .citadel-hero-proof li + li {
  border-left: 1px solid rgba(232, 183, 83, 0.18);
}
html[data-site-template="citadel"] .citadel-hero-proof strong {
  color: #f5cd78;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html[data-site-template="citadel"] .citadel-hero-proof span {
  color: #9f938b;
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-site-template="citadel"] .rift-hero__cta {
  justify-content: flex-start;
  gap: 0.7rem;
}
html[data-site-template="citadel"] .rift-hero .main-register-btn,
html[data-site-template="citadel"] .rift-hero .hero-ghost-btn {
  min-height: 51px;
  padding: 0.9rem clamp(1.4rem, 2.3vw, 2.4rem);
  border-radius: 4px;
  clip-path: polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 50%,
    calc(100% - 10px) 100%,
    10px 100%,
    0 50%
  );
  font-size: 0.87rem;
  letter-spacing: 0.1em;
}
html[data-site-template="citadel"] .rift-hero .main-register-btn {
  border: 1px solid rgba(255, 218, 137, 0.55);
  background: linear-gradient(180deg, #e84d32 0%, #aa171d 55%, #641017 100%);
  box-shadow:
    0 18px 38px rgba(111, 6, 16, 0.44),
    inset 0 1px 0 rgba(255, 235, 186, 0.32);
}
html[data-site-template="citadel"] .rift-hero .hero-ghost-btn {
  border-color: rgba(235, 190, 99, 0.38);
  background: linear-gradient(
    180deg,
    rgba(33, 24, 34, 0.94),
    rgba(12, 9, 13, 0.95)
  );
  color: #ead3a2;
}
html[data-site-template="citadel"] .rift-hero .countdown-frame {
  width: min(100%, 590px) !important;
  height: 64px !important;
  margin: 0.6rem 0 0 !important;
  border-radius: 8px !important;
  filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.52)) sepia(0.12);
}
html[data-site-template="citadel"] .rift-portal {
  height: clamp(500px, 66vh, 650px);
  overflow: visible;
  cursor: default;
  isolation: isolate;
}
html[data-site-template="citadel"]
  .rift-portal
  > :not(.citadel-hero-art):not(.citadel-rift-canvas) {
  display: none;
}
html[data-site-template="citadel"] .rift-portal::before {
  content: "";
  position: absolute;
  inset: 12% 4% 4%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 52% 58%,
      rgba(141, 48, 202, 0.2),
      transparent 57%
    ),
    radial-gradient(
      ellipse at 45% 45%,
      rgba(190, 54, 33, 0.14),
      transparent 65%
    );
  filter: blur(28px);
}
html[data-site-template="citadel"] .citadel-hero-art {
  position: absolute;
  inset: -3% -1% -7% -4%;
  z-index: 1;
  display: block;
  background: url("/assets/templates/citadel/hero-citadel.webp") center bottom /
    contain no-repeat;
  filter: drop-shadow(0 28px 50px rgba(0, 0, 0, 0.76)) saturate(1.05)
    contrast(1.04);
  transform: translate3d(
      calc(var(--mx, 0) * -8px),
      calc(var(--my, 0) * -5px),
      0
    )
    scale(1.055);
  transition: transform 0.18s ease-out;
  -webkit-mask-image: radial-gradient(
    ellipse 53% 58% at 52% 50%,
    #000 42%,
    rgba(0, 0, 0, 0.92) 63%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 53% 58% at 52% 50%,
    #000 42%,
    rgba(0, 0, 0, 0.92) 63%,
    transparent 100%
  );
}
html[data-site-template="citadel"] .citadel-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      transparent 48%,
      rgba(7, 5, 8, 0.14) 72%,
      rgba(7, 5, 8, 0.86) 100%
    ),
    linear-gradient(
      90deg,
      rgba(6, 4, 7, 0.66),
      transparent 18%,
      transparent 84%,
      rgba(7, 5, 8, 0.38)
    ),
    linear-gradient(
      180deg,
      rgba(8, 5, 8, 0.2),
      transparent 65%,
      rgba(7, 5, 8, 0.8)
    );
}
html[data-site-template="citadel"] .citadel-hero-art__frame {
  display: none;
}
html[data-site-template="citadel"] .citadel-hero-art__rune {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 20px;
  height: 20px;
  border: 2px solid #efc66e;
  background: radial-gradient(
    circle at 38% 32%,
    #f5caff,
    #a341e6 38%,
    #351044 70%
  );
  box-shadow:
    0 0 17px rgba(172, 69, 238, 0.9),
    0 0 35px rgba(229, 171, 72, 0.35);
  transform: translateX(-50%) rotate(45deg);
}
html[data-site-template="citadel"] .citadel-hero-art__flare {
  position: absolute;
  right: 6%;
  top: 18%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(177, 70, 255, 0.2), transparent 68%);
  filter: blur(12px);
  animation: citadelFlare 4.8s ease-in-out infinite;
}
@keyframes citadelFlare {
  50% {
    opacity: 0.52;
    transform: scale(1.12);
  }
}
html[data-site-template="citadel"] .rift-hero__scroll {
  z-index: 4;
  border-color: rgba(233, 184, 79, 0.46);
  border-radius: 4px;
}

/* --------------------------------------------------------- homepage panels */
html[data-site-template="citadel"] section.rift-strip-wrap {
  position: relative;
  z-index: 5;
  margin-top: -48px;
  padding-top: 0;
}
html[data-site-template="citadel"] .rift-strip {
  border: 1px solid rgba(236, 192, 103, 0.35);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 237, 193, 0.04), transparent 44%),
    linear-gradient(90deg, #100c11, #1a1015 50%, #100c11);
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.62),
    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
}
html[data-site-template="citadel"] .rift-strip::before {
  left: 6%;
  right: 6%;
  background: linear-gradient(
    90deg,
    transparent,
    #8d1b21 25%,
    #f0c66c 50%,
    #852cb7 75%,
    transparent
  );
}
html[data-site-template="citadel"] .rift-stat {
  padding: 1.18rem 0.75rem;
}
html[data-site-template="citadel"] .rift-stat__value {
  color: #f0c66b;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.3vw, 2.15rem);
  text-shadow:
    0 2px 0 #39180b,
    0 0 18px rgba(231, 176, 69, 0.24);
}
html[data-site-template="citadel"] .rift-stat__label {
  color: #988b84;
}
html[data-site-template="citadel"] .home-cols {
  max-width: var(--shell);
  gap: 24px;
}
html[data-site-template="citadel"] .home-cols__side {
  top: 132px;
}
html[data-site-template="citadel"] .home-news,
html[data-site-template="citadel"] .side-widget {
  border: 1px solid rgba(224, 179, 90, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 239, 199, 0.025), transparent 30%),
    linear-gradient(180deg, #141015, #0c0a0e);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(0, 0, 0, 0.16);
}
html[data-site-template="citadel"] .home-sec-kicker {
  color: #c78d37;
  letter-spacing: 0.3em;
}
html[data-site-template="citadel"] .home-sec-head h2,
html[data-site-template="citadel"] .side-widget__title {
  color: #f3d494;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 0 #2d1208;
}
html[data-site-template="citadel"] .news-feature {
  border-color: rgba(226, 178, 83, 0.28);
  border-radius: 6px;
  background:
    radial-gradient(
      500px 200px at 100% 0,
      rgba(129, 46, 184, 0.14),
      transparent 68%
    ),
    linear-gradient(145deg, #181117, #0b090d);
}
html[data-site-template="citadel"] .news-feature::before {
  opacity: 0.68;
  background: linear-gradient(
    135deg,
    #8a191e,
    transparent 34%,
    transparent 66%,
    #7430a4
  );
}
html[data-site-template="citadel"] .news-row,
html[data-site-template="citadel"] .side-rank-list li,
html[data-site-template="citadel"] .side-event {
  border-color: rgba(222, 177, 87, 0.16);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 240, 207, 0.022), transparent), #0d0a0f;
}
html[data-site-template="citadel"] .news-row:hover,
html[data-site-template="citadel"] .side-rank-list li:hover {
  border-color: rgba(235, 188, 91, 0.44);
  background-color: #151017;
}
html[data-site-template="citadel"] .side-tab.is-active {
  border-color: rgba(240, 196, 105, 0.42);
  background: linear-gradient(180deg, #cf3729, #80131b);
  box-shadow:
    0 8px 23px rgba(105, 7, 15, 0.42),
    inset 0 1px 0 rgba(255, 234, 181, 0.2);
}
html[data-site-template="citadel"] .news-archive-btn,
html[data-site-template="citadel"] .side-widget__more {
  color: #efc56b;
  border-color: rgba(233, 184, 80, 0.34);
}

html[data-site-template="citadel"] .class-overview {
  border-color: rgba(226, 180, 88, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(
      700px 300px at 50% 0,
      rgba(111, 40, 149, 0.1),
      transparent 72%
    ),
    linear-gradient(180deg, #120e13, #0a080c);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(0, 0, 0, 0.18);
}
html[data-site-template="citadel"] .class-grid {
  gap: 1.15rem;
}
html[data-site-template="citadel"] .class-panel {
  padding: 1.2rem;
  overflow: hidden;
}
html[data-site-template="citadel"] .class-panel:hover {
  border-color: rgba(236, 191, 100, 0.48) !important;
  box-shadow:
    0 27px 65px rgba(0, 0, 0, 0.64),
    0 0 34px rgba(142, 49, 199, 0.09) !important;
}
html[data-site-template="citadel"] .class-icon {
  border: 1px solid rgba(231, 186, 96, 0.24);
  border-radius: 4px;
  background: #0b090d !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
html[data-site-template="citadel"] .class-panel h3 {
  color: #f0ca7c;
  font-family: var(--font-display);
}

/* --------------------------------------------------- records, tables, tabs */
html[data-site-template="citadel"] .home-records-section,
html[data-site-template="citadel"] .home-record-card,
html[data-site-template="citadel"] .home-boss-card {
  border-color: rgba(224, 179, 88, 0.2) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #141015, #0c090d) !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-site-template="citadel"] .home-records-kicker {
  color: #c78c36;
}
html[data-site-template="citadel"]
  :where(.sys-table, .table-style, .ranking-table-wrap, .muor .table-wrap) {
  border: 1px solid rgba(224, 179, 89, 0.22) !important;
  border-radius: 7px !important;
  background: #0c090d !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.46) !important;
}
html[data-site-template="citadel"]
  :where(
    .sys-table th,
    .table-style th,
    .ranking-table th,
    .muor .dmn-rankings-table thead th
  ) {
  border-bottom-color: rgba(233, 185, 86, 0.34) !important;
  background: linear-gradient(180deg, #22161a, #100b0e) !important;
  color: #f0c66c !important;
  font-family: var(--font-display);
  letter-spacing: 0.055em;
}
html[data-site-template="citadel"]
  :where(
    .sys-table td,
    .table-style td,
    .ranking-table td,
    .muor .dmn-rankings-table tbody td
  ) {
  border-bottom-color: rgba(224, 177, 85, 0.12) !important;
  background: #100d11 !important;
  color: #d8cec1 !important;
}
html[data-site-template="citadel"]
  :where(
    .sys-table tr:nth-child(even) td,
    .ranking-table tr:nth-child(even) td,
    .muor .dmn-rankings-table tbody tr:nth-child(even) td
  ) {
  background: #0c0a0e !important;
}
html[data-site-template="citadel"] .ranking-main-container {
  max-width: var(--shell);
}
html[data-site-template="citadel"] .ranking-tabs-bar {
  border-color: rgba(225, 180, 91, 0.22) !important;
  border-radius: 7px;
  background: linear-gradient(180deg, #151116, #0a080b) !important;
}
html[data-site-template="citadel"] .ranking-tab.active,
html[data-site-template="citadel"] .ranking-tab[aria-selected="true"] {
  --btn-bg: linear-gradient(180deg, #d83b2b, #7d121a);
  --btn-bg-hover: linear-gradient(180deg, #e64d34, #95161d);
  --btn-border: rgba(239, 191, 94, 0.42);
  --btn-fg: #fff2d5;
}
html[data-site-template="citadel"] .ranking-table .rank-badge.gold,
html[data-site-template="citadel"] .side-rank-badge--1 {
  background: linear-gradient(160deg, #ffe5a2, #b97a22) !important;
  color: #2b1705 !important;
  border-color: #e6b451 !important;
}

/* ---------------------------------------------------------- inner heroes */
html[data-site-template="citadel"] .hero-download,
html[data-site-template="citadel"] .rift-hero--sub {
  border-bottom: 1px solid rgba(232, 184, 87, 0.26);
  background:
    linear-gradient(90deg, rgba(8, 6, 9, 0.94), rgba(8, 6, 9, 0.55)),
    radial-gradient(
      500px 280px at 76% 40%,
      rgba(136, 47, 190, 0.19),
      transparent 72%
    ),
    url("/assets/bg-download.webp") center / cover no-repeat !important;
}
html[data-site-template="citadel"] .hero-card {
  border: 1px solid rgba(230, 183, 91, 0.32);
  border-radius: 7px;
  background: linear-gradient(
    180deg,
    rgba(20, 14, 20, 0.88),
    rgba(8, 6, 9, 0.9)
  );
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 240, 205, 0.06);
}
html[data-site-template="citadel"] .hero-card h1 {
  font-family: var(--font-display);
  background: linear-gradient(#fff5d7, #dca846 60%, #8e571b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------- account UI */
html[data-site-template="citadel"] .account-main {
  --theme-ink: #f7ead2;
  --theme-ink-soft: #d8cdc0;
  --theme-muted: #9f938b;
  --theme-surface-strong: #110e12;
  --theme-surface-subtle: #0c0a0e;
  --theme-border: rgba(224, 179, 89, 0.2);
  --theme-border-strong: rgba(233, 188, 97, 0.36);
  --theme-gold: #e7b758;
  --theme-gold-strong: #c67d27;
  --theme-blue: #9a50e4;
  --theme-shadow-soft: var(--shadow-md);
  --theme-shadow-card: var(--shadow-lg);
}
html[data-site-template="citadel"]
  .account-main
  :where(
    .account-shell,
    .account-section,
    .account-card,
    .account-panel,
    .sp-box,
    .sp-panel,
    .buygp-card,
    .buygp-panel,
    .reward-card,
    .reward-vip-card,
    .white-box
  ) {
  border-color: rgba(224, 179, 89, 0.2) !important;
  background: linear-gradient(180deg, #141015, #0c0a0e) !important;
  color: #ddd2c5 !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-site-template="citadel"] .account-main .account-section {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-site-template="citadel"]
  .account-main
  :where(
    .account-titlebar,
    .buygp-hero,
    .sp-hero,
    .sp-head,
    .reward-section-head--shop,
    .account-titlebar--vip-shop
  ) {
  border-color: rgba(233, 188, 97, 0.32) !important;
  background:
    radial-gradient(
      440px 190px at 100% 0,
      rgba(128, 42, 178, 0.18),
      transparent 70%
    ),
    linear-gradient(135deg, #211319, #0b090d 75%) !important;
  color: #f7e9cc !important;
}
html[data-site-template="citadel"]
  .account-main
  :where(h1, h2, h3, h4, .account-card__title) {
  color: #f3d38f !important;
}

/* ------------------------------------------------------------------ footer */
html[data-site-template="citadel"] footer {
  position: relative;
  padding: 2.7rem 1.25rem;
  border: 0 !important;
  background:
    radial-gradient(
      600px 180px at 50% 0,
      rgba(126, 38, 155, 0.1),
      transparent 70%
    ),
    linear-gradient(180deg, #0c090d, #050406) !important;
  color: #92867f !important;
  box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.42) !important;
}
html[data-site-template="citadel"] footer::before {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 5%,
    #70151d 28%,
    #e4b453 50%,
    #6d2693 72%,
    transparent 95%
  );
}
html[data-site-template="citadel"] footer a {
  color: #dcb25d;
  text-decoration-color: rgba(220, 178, 93, 0.32);
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1560px) and (min-width: 769px) {
  html[data-site-template="ascendant"] header[role="banner"] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand controls" "nav nav";
    row-gap: 0.45rem;
  }
  html[data-site-template="ascendant"] .header-left {
    grid-area: brand;
  }
  html[data-site-template="ascendant"] header[role="banner"] nav {
    grid-area: nav;
    justify-content: center;
  }
  html[data-site-template="ascendant"] .header-right {
    grid-area: controls;
    justify-content: flex-end;
  }
}

/* Two-row band widened alongside the nav-legibility lift. Measured natural
   header content width per locale at the lifted sizes (2026-08-27):
     en/ph 1394 · tr 1440 · pt 1519 · vi 1527 · es 1531 · ro 1549 · nl 1557
     fr 1561 · de 1573 · pl 1596
   pl + 2x2.4rem padding needs a ~1673px viewport, so every locale rides the
   brand+controls / nav grid until 1700px, where one row genuinely fits. The
   floor is 1081px because the hamburger block below owns everything narrower. */
@media (max-width: 1700px) and (min-width: 1081px) {
  html[data-site-template="citadel"] header[role="banner"] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand controls" "nav nav";
    row-gap: 0.45rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  html[data-site-template="citadel"] .header-left {
    grid-area: brand;
  }
  html[data-site-template="citadel"] header[role="banner"] nav {
    grid-area: nav;
    justify-content: center;
  }
  html[data-site-template="citadel"] .header-right {
    grid-area: controls;
    justify-content: flex-end;
  }
  html[data-site-template="citadel"] .home-cols__side {
    top: 126px;
  }
}

@media (max-width: 1120px) {
  html[data-site-template="citadel"] .rift-hero__inner {
    grid-template-columns: minmax(360px, 0.92fr) minmax(440px, 1.08fr);
    width: min(var(--shell-fluid), var(--shell));
  }
  html[data-site-template="citadel"] .rift-hero__title {
    font-size: clamp(3.8rem, 7.6vw, 6rem);
  }
  html[data-site-template="citadel"] .rift-portal {
    height: 530px;
  }
}

@media (max-width: 980px) {
  html[data-site-template="citadel"] .rift-hero {
    min-height: 0;
    padding: 1.6rem 0 5.6rem;
    background-position: 60% 50%;
  }
  html[data-site-template="citadel"] .rift-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: min(var(--shell-fluid), var(--shell));
  }
  html[data-site-template="citadel"] .rift-portal {
    order: -1;
    height: clamp(330px, 54vw, 470px);
    width: min(650px, 100%);
    margin: 0 auto -2.3rem;
  }
  html[data-site-template="citadel"] .citadel-hero-art {
    inset: -10% 0 -4%;
  }
  html[data-site-template="citadel"] .rift-hero__copy {
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
  }
  html[data-site-template="citadel"] .rift-hero__copy::before {
    left: 0;
    width: 100%;
  }
  html[data-site-template="citadel"] .rift-hero__lead {
    margin-inline: auto;
    /* Stacked hero is centre-set: balance the short lead into even lines
       instead of leaving a one-word orphan under it. */
    text-wrap: balance;
  }
  html[data-site-template="citadel"] .rift-hero__cta {
    justify-content: center;
  }
  html[data-site-template="citadel"] .rift-hero .countdown-frame {
    margin-inline: auto !important;
  }
  html[data-site-template="citadel"] .citadel-hero-proof {
    margin-inline: auto;
  }
  html[data-site-template="citadel"] .rift-hero__scroll {
    display: none;
  }
}

@media (max-width: 768px) {
  html[data-site-template="ascendant"] .template-switcher {
    width: 100%;
  }
  html[data-site-template="citadel"] header[role="banner"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-height: 65px;
    padding: 0.62rem 0.75rem 0.5rem;
  }
  html[data-site-template="citadel"] .logo {
    height: 40px;
    font-size: 1.45rem;
  }
  html[data-site-template="citadel"] .mobile-toggle {
    top: 0.68rem;
    border: 1px solid rgba(227, 182, 93, 0.29);
    border-radius: 5px;
    background: #100d12;
    color: #efc66d;
  }
  html[data-site-template="citadel"] header[role="banner"] nav,
  html[data-site-template="citadel"] header[role="banner"] nav.show {
    width: 100%;
    padding: 0.65rem;
    border: 1px solid rgba(223, 178, 89, 0.2);
    border-radius: 6px;
    background: #0b090d;
  }
  html[data-site-template="citadel"]
    header[role="banner"]
    nav
    a:not([class*="btn"]) {
    width: 100%;
    padding: 0.75rem 0.8rem;
    font-size: 0.76rem;
    text-align: center;
  }
  html[data-site-template="citadel"] .header-right {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    gap: 0.45rem;
    flex-wrap: wrap;
  }
  html[data-site-template="citadel"] .account-controls {
    width: 100%;
    margin: 0.15rem 0;
  }
  html[data-site-template="citadel"] .account-controls a[class*="btn"] {
    flex: 1 1 120px;
  }
  html[data-site-template="citadel"] .template-switcher {
    flex: 1 1 210px;
  }
  html[data-site-template="citadel"] .lang-switcher {
    flex: 0 1 86px;
    width: auto;
    margin: 0;
  }
  html[data-site-template="citadel"] .lang-switcher select {
    width: 100%;
  }
  html[data-site-template="citadel"] section.rift-strip-wrap {
    margin-top: -32px;
  }
  html[data-site-template="citadel"] .home-cols__side {
    position: static;
  }
}

@media (max-width: 620px) {
  html[data-site-template="citadel"] body {
    background-attachment: scroll;
  }
  html[data-site-template="citadel"] .container {
    width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html[data-site-template="citadel"] .rift-hero {
    padding-top: 0.4rem;
  }
  html[data-site-template="citadel"] .rift-portal {
    height: 330px;
    margin-bottom: -2rem;
  }
  html[data-site-template="citadel"] .citadel-hero-art {
    inset: -2% -9% -2%;
  }
  html[data-site-template="citadel"] .citadel-hero-art__frame {
    inset: 9% 8%;
  }
  html[data-site-template="citadel"] .rift-hero__title {
    font-size: clamp(3.15rem, 17vw, 4.7rem);
  }
  html[data-site-template="citadel"] .rift-hero__kicker {
    letter-spacing: 0.16em;
    text-indent: 0.16em;
  }
  html[data-site-template="citadel"] .rift-hero__lead {
    font-size: 0.98rem;
    line-height: 1.62;
  }
  html[data-site-template="citadel"] .citadel-hero-proof {
    width: 100%;
  }
  html[data-site-template="citadel"] .citadel-hero-proof li {
    padding: 0.1rem 0.42rem;
  }
  html[data-site-template="citadel"] .citadel-hero-proof strong {
    font-size: 0.7rem;
  }
  html[data-site-template="citadel"] .citadel-hero-proof span {
    font-size: 0.58rem;
  }
  html[data-site-template="citadel"] .rift-hero__cta {
    width: 100%;
  }
  html[data-site-template="citadel"] .rift-hero .main-register-btn,
  html[data-site-template="citadel"] .rift-hero .hero-ghost-btn {
    flex: 1 1 100%;
    width: 100%;
  }
  html[data-site-template="citadel"] .rift-hero .countdown-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: 64px !important;
    margin: 0.55rem auto 0 !important;
  }
  html[data-site-template="citadel"] .rift-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-site-template="citadel"] .rift-stat {
    padding: 0.9rem 0.45rem;
  }
  html[data-site-template="citadel"] .home-news,
  html[data-site-template="citadel"] .side-widget,
  html[data-site-template="citadel"] .class-overview {
    padding: 1rem;
  }
  html[data-site-template="citadel"] :where(.white-box, .info-block) {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-template="citadel"] body {
    background-attachment: scroll;
  }
  html[data-site-template="citadel"] .rift-hero__title,
  html[data-site-template="citadel"] .citadel-hero-art__flare {
    animation: none !important;
  }
  html[data-site-template="citadel"] .citadel-hero-art {
    transform: none;
    transition: none;
  }
  .citadel-ambient {
    display: none !important;
  }
}

@media print {
  .template-switcher,
  .citadel-ambient,
  .skip-link {
    display: none !important;
  }
}

/* ========================================================================== 
   Full-site Citadel component skin
   ========================================================================== */
.citadel-footer,
.class-icon--citadel,
.class-card-image--citadel,
.related-item__image--citadel,
.class-archive-image--citadel {
  display: none;
}

html[data-site-template="citadel"] {
  --panel-bg: linear-gradient(
    180deg,
    rgba(22, 17, 23, 0.98),
    rgba(11, 9, 13, 0.98)
  );
  --panel-bg-soft: linear-gradient(
    180deg,
    rgba(26, 20, 28, 0.94),
    rgba(13, 10, 15, 0.96)
  );
  --panel-border: rgba(230, 184, 92, 0.22);
  --panel-border-strong: rgba(237, 194, 103, 0.4);
  --control-bg: #0b090d;
  --control-border: rgba(229, 184, 92, 0.28);
  --ember: #d03b2d;
  --success: #68bd82;
  --danger: #ee6a62;
}

html[data-site-template="citadel"] .class-icon--classic,
html[data-site-template="citadel"] .class-card-image--classic,
html[data-site-template="citadel"] .related-item__image--classic,
html[data-site-template="citadel"] .class-archive-image--classic,
html[data-site-template="citadel"] footer .ascendant-footer {
  display: none !important;
}

html[data-site-template="citadel"] .class-icon--citadel,
html[data-site-template="citadel"] .class-card-image--citadel,
html[data-site-template="citadel"] .related-item__image--citadel,
html[data-site-template="citadel"] .class-archive-image--citadel {
  display: block;
}

html[data-site-template="citadel"] main {
  min-width: 0;
}
html[data-site-template="citadel"] main :where(h2, h3, h4) {
  color: #ebc773;
  font-family: var(--font-display);
  text-wrap: balance;
}
html[data-site-template="citadel"] main :where(strong, b) {
  color: #f0dfbd;
}
html[data-site-template="citadel"] main :where(hr) {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 183, 84, 0.48),
    transparent
  );
}

/* Shared navigation, content panels and state components. */
html[data-site-template="citadel"]
  :where(.breadcrumb-nav, .account-breadcrumb) {
  width: min(100%, var(--shell));
  margin: 0 auto 0.9rem;
  color: #9d918a;
  font-size: 0.77rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
html[data-site-template="citadel"] :where(.breadcrumb, .breadcrumb-nav ol) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-site-template="citadel"] :where(.breadcrumb li, .breadcrumb-nav li) {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: #8f847d;
}
html[data-site-template="citadel"]
  :where(.breadcrumb li + li, .breadcrumb-nav li + li)::before {
  content: "◆";
  color: #9d642c;
  font-size: 0.55rem;
}
html[data-site-template="citadel"]
  :where(.breadcrumb a, .breadcrumb-nav a, .account-breadcrumb a) {
  color: #d9af59;
  text-decoration: none;
}

html[data-site-template="citadel"]
  :where(
    .card,
    .glass-card,
    .panel,
    .acc-card,
    .table-shell,
    .table-wrap,
    .responsive-table,
    .event-card,
    .guides-featured-card,
    .guides-seo-mini-grid article,
    .community-shell,
    .community-card,
    .media-gallery-box,
    .media-card,
    .muor-panel,
    .muor-stat-card,
    .muor-guide-card,
    .muor-command-card,
    .ih-card,
    .ih-cur-card,
    .ih-event-card,
    .rates-overview,
    .faq-item,
    .related-item,
    .guild-card,
    .char-card,
    .server-card,
    .servers-card,
    .resource-card,
    .kpi,
    .skill-detail-hero,
    .skill-detail-block,
    .skill-meta-pill,
    .map-filter-item,
    .decide-cta,
    .not-for-you,
    .payments-card,
    .pkg-card,
    .pay-card,
    .bonus-box,
    .vipbox,
    .account-info-box,
    .account-action-panel,
    .points-card,
    .realm-banner
  ) {
  border: 1px solid var(--panel-border) !important;
  border-radius: 8px !important;
  background: var(--panel-bg) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-site-template="citadel"]
  :where(
    .event-card,
    .guides-featured-card,
    .community-card,
    .media-card,
    .ih-cur-card,
    .ih-event-card,
    .related-item,
    .resource-card,
    .points-card,
    .kpi
  ) {
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  html[data-site-template="citadel"]
    :where(
      .event-card,
      .guides-featured-card,
      .community-card,
      .media-card,
      .ih-cur-card,
      .ih-event-card,
      .related-item,
      .resource-card,
      .points-card,
      .kpi
    ):hover {
    border-color: rgba(239, 193, 98, 0.48) !important;
    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.58),
      0 0 28px rgba(143, 48, 198, 0.1) !important;
    transform: translateY(-3px);
  }
}

html[data-site-template="citadel"] .hero-404 {
  border-bottom: 1px solid rgba(232, 184, 89, 0.28) !important;
  background:
    linear-gradient(90deg, rgba(7, 5, 8, 0.92), rgba(7, 5, 8, 0.45)),
    url("/assets/templates/citadel/inner-masthead-v2.webp") center right / cover
      no-repeat !important;
}
html[data-site-template="citadel"]
  :where(.kpi__value, .servers-card .ranking-card-rank) {
  color: #f0c86d !important;
  font-family: var(--font-display);
}
html[data-site-template="citadel"]
  :where(.kpi__label, .kpi__sub, .skill-meta-pill, .item-row-meta) {
  color: #a99c93 !important;
}

html[data-site-template="citadel"]
  :where(.alert, .form-alert, .notice, .callout, .step-callout, .bonus-box) {
  border: 1px solid rgba(225, 179, 89, 0.25) !important;
  border-left: 3px solid #d4a448 !important;
  border-radius: 7px !important;
  background: linear-gradient(
    90deg,
    rgba(179, 116, 38, 0.12),
    rgba(16, 12, 17, 0.96)
  ) !important;
  color: #e8dac2 !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34) !important;
}
html[data-site-template="citadel"]
  :where(.alert--success, .form-alert.success, .alert.success) {
  border-left-color: #56b875 !important;
  background: linear-gradient(
    90deg,
    rgba(48, 137, 78, 0.17),
    rgba(12, 15, 14, 0.96)
  ) !important;
  color: #bce7c8 !important;
}
html[data-site-template="citadel"]
  :where(.alert--error, .form-alert.error, .alert.error) {
  border-left-color: #d74a43 !important;
  background: linear-gradient(
    90deg,
    rgba(165, 36, 39, 0.2),
    rgba(17, 11, 14, 0.96)
  ) !important;
  color: #f4c3bd !important;
}
html[data-site-template="citadel"] :where(.form-alert.info, .alert--info) {
  border-left-color: #9e58dd !important;
  background: linear-gradient(
    90deg,
    rgba(113, 52, 163, 0.18),
    rgba(13, 10, 16, 0.96)
  ) !important;
}

html[data-site-template="citadel"]
  :where(
    .button,
    .action-btn,
    .buy-gp-btn,
    .back-btn,
    .class-link-btn,
    .attr-btn,
    .event-filter-btn,
    .ih-chip,
    .community-action,
    .guides-featured-open,
    .realm-chip,
    .status-pill,
    .xp-chip,
    .meta-chip,
    .rate-pill,
    .rate-badge,
    button[type="submit"]
  ) {
  border: 1px solid rgba(231, 185, 93, 0.32) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #281c22, #110d12) !important;
  color: #ead4a4 !important;
  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 241, 205, 0.06) !important;
  text-decoration: none !important;
}
html[data-site-template="citadel"]
  :where(
    .button,
    .action-btn,
    .buy-gp-btn,
    .back-btn,
    .class-link-btn,
    .attr-btn,
    .event-filter-btn,
    .ih-chip,
    button[type="submit"]
  ) {
  min-height: 42px;
  font-weight: 800;
  letter-spacing: 0.035em;
}
html[data-site-template="citadel"]
  :where(.button, .buy-gp-btn, button[type="submit"], .main-register-btn):not(
    .btn--ghost
  ) {
  background: linear-gradient(
    180deg,
    #df4933 0%,
    #99171d 62%,
    #5d0e15 100%
  ) !important;
  color: #fff0d3 !important;
}
html[data-site-template="citadel"]
  :where(
    .button,
    .action-btn,
    .buy-gp-btn,
    .back-btn,
    .class-link-btn,
    .attr-btn,
    .event-filter-btn,
    .ih-chip,
    button[type="submit"]
  ):hover {
  border-color: rgba(248, 207, 118, 0.56) !important;
  filter: brightness(1.1);
}
html[data-site-template="citadel"]
  :where(
    .realm-chip.active,
    .status-pill--online,
    .xp-chip.active,
    .meta-chip.active
  ) {
  border-color: rgba(232, 190, 98, 0.55) !important;
  background: linear-gradient(180deg, #9f2023, #4e1118) !important;
  color: #fff0d1 !important;
  box-shadow: 0 0 18px rgba(191, 44, 44, 0.2) !important;
}
html[data-site-template="citadel"] :where(.status-pill--offline, .is-disabled) {
  opacity: 0.66;
}

html[data-site-template="citadel"]
  :where(.no-results, .empty-state, .no-results-wrapper) {
  border: 1px dashed rgba(228, 181, 88, 0.28);
  border-radius: 8px;
  background: rgba(12, 9, 13, 0.68);
  color: #a89b91 !important;
}

/* Tables and dense data surfaces. */
html[data-site-template="citadel"]
  :where(
    .event-registration-table-wrapper,
    .rates-table-wrap,
    .gb-tablewrap,
    .char-table-wrap,
    .guild-member-table,
    .ranking-table-wrap,
    .muor-table-wrap,
    .ih-bag-tablewrap,
    .table-scroll,
    .responsive-table,
    .muinvx-table-wrap
  ) {
  border: 1px solid rgba(228, 181, 89, 0.2) !important;
  border-radius: 8px !important;
  background: #0b090d !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42) !important;
  overflow-x: auto;
}
html[data-site-template="citadel"]
  :where(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  ) {
  width: 100%;
  border-collapse: collapse;
  border-color: rgba(228, 181, 88, 0.16) !important;
  background: #0c0a0e !important;
  color: var(--text) !important;
}
html[data-site-template="citadel"]
  :where(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  )
  th {
  border-color: rgba(232, 184, 88, 0.22) !important;
  background: linear-gradient(180deg, #24171c, #100b0e) !important;
  color: #efc76e !important;
  font-family: var(--font-display);
  letter-spacing: 0.045em;
}
html[data-site-template="citadel"]
  :where(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  )
  td {
  border-color: rgba(225, 177, 85, 0.12) !important;
  background: rgba(17, 13, 18, 0.96) !important;
  color: #d7cdc1 !important;
}
html[data-site-template="citadel"]
  :where(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .muor-table,
    .account-main table
  )
  tbody
  tr:nth-child(even)
  td {
  background: #0d0a0f !important;
}
html[data-site-template="citadel"]
  :where(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .muor-table,
    .account-main table
  )
  tbody
  tr:hover
  td {
  background: rgba(80, 35, 74, 0.24) !important;
}

/* Registration, login, recovery, contact and legal pages. */
html[data-site-template="citadel"] :where(.register-page, .auth-page-shell) {
  width: min(var(--shell-fluid), var(--shell));
  padding-top: clamp(2rem, 5vw, 4.5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5.5rem) !important;
}
html[data-site-template="citadel"]
  :where(.register-section, .register-side__panel) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(232, 185, 94, 0.28) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(145deg, rgba(255, 236, 190, 0.035), transparent 32%),
    linear-gradient(180deg, #171218, #0b090d) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-lg) !important;
}
html[data-site-template="citadel"] .register-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    #a31a22,
    #e1b252,
    #7b2daf,
    transparent
  );
}
html[data-site-template="citadel"]
  :where(.register-section h1, .login-section h1) {
  color: #f4d285 !important;
  font-family: var(--font-display);
  text-shadow:
    0 2px 0 #2d130a,
    0 0 24px rgba(225, 177, 74, 0.16);
}
html[data-site-template="citadel"]
  :where(
    .register-intro,
    .login-intro,
    .auth-intro,
    .register-platform-note,
    .register-resend__note
  ) {
  color: #b8ada4 !important;
}
html[data-site-template="citadel"]
  :where(.form-layout label, .form-check label) {
  color: #d9cdbb !important;
  font-weight: 700;
}
html[data-site-template="citadel"]
  .form-layout
  :where(input, select, textarea) {
  min-height: 46px;
}
html[data-site-template="citadel"] .form-layout textarea {
  min-height: 130px;
}
html[data-site-template="citadel"] :where(.form-links, .register-resend) {
  border-top-color: rgba(227, 180, 88, 0.18) !important;
  color: #a89c93 !important;
}
html[data-site-template="citadel"]
  :where(.terms-content, .privacy-content, .refund-page, .guide-article) {
  color: #d6ccc0 !important;
  line-height: 1.78;
}
html[data-site-template="citadel"]
  :where(.terms-content, .privacy-content, .refund-page, .guide-article)
  :where(h2, h3) {
  scroll-margin-top: calc(var(--site-header-offset) + 16px);
}

/* Events and rankings. */
html[data-site-template="citadel"]
  :where(
    .event-overview,
    .event-seo-content,
    .guild-faq-box,
    .ranking-results-card
  ) {
  padding: clamp(1rem, 2.5vw, 2rem) !important;
}
html[data-site-template="citadel"]
  :where(.timezone-box, .next-event-banner, .active-events-bar) {
  border: 1px solid rgba(231, 184, 91, 0.3) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(
      320px 120px at 90% 0,
      rgba(142, 52, 197, 0.2),
      transparent 70%
    ),
    linear-gradient(135deg, #20131a, #0b090d) !important;
  color: #e8dac5 !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-site-template="citadel"]
  :where(.next-event-label, .event-meta-label, .event-overview-intro) {
  color: #a99d94 !important;
}
html[data-site-template="citadel"]
  :where(.event-countdown, .event-time, .next-event-main strong) {
  color: #f2c96e !important;
}
html[data-site-template="citadel"] .ranking-flexbox {
  gap: 1.25rem;
}
html[data-site-template="citadel"] .ranking-tabs-bar {
  top: calc(var(--site-header-offset) + 12px) !important;
  align-self: start;
}
html[data-site-template="citadel"]
  :where(.realm-switcher, .ranking-filter-bar, .filter-row) {
  border-color: rgba(229, 181, 89, 0.18) !important;
  background: rgba(11, 9, 13, 0.74) !important;
}
html[data-site-template="citadel"] :where(.ranking-card, .ranking-card-main) {
  border-color: rgba(227, 181, 89, 0.2) !important;
  background: var(--panel-bg) !important;
  color: var(--text) !important;
}
html[data-site-template="citadel"] .ranking-card-rank.silver {
  color: #d9dde8 !important;
}
html[data-site-template="citadel"] .ranking-card-rank.bronze {
  color: #d99b60 !important;
}

/* Guides and news/editorial. */
html[data-site-template="citadel"] .guides-featured-grid {
  gap: 1rem;
}
html[data-site-template="citadel"] .guides-featured-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.5rem) !important;
}
html[data-site-template="citadel"] .guides-featured-card--primary {
  border-color: rgba(229, 185, 94, 0.45) !important;
  background:
    radial-gradient(
      300px 170px at 100% 0,
      rgba(135, 52, 191, 0.2),
      transparent 70%
    ),
    linear-gradient(145deg, #24161d, #0c090e) !important;
}
html[data-site-template="citadel"]
  :where(.guides-featured-kicker, .news-meta, .guide-updated) {
  color: #b8904c !important;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
html[data-site-template="citadel"]
  :where(.guides-featured-card strong, .news-title, .news-title a) {
  color: #f2d38f !important;
}
html[data-site-template="citadel"]
  :where(.guides-featured-desc, .news-excerpt) {
  color: #aea29a !important;
}
html[data-site-template="citadel"] :where(.faq-q, .faq-item summary) {
  color: #e7c276 !important;
  font-family: var(--font-display);
}
html[data-site-template="citadel"] :where(.faq-a, .faq-item > p) {
  color: #b9aea4 !important;
}
html[data-site-template="citadel"]
  :where(.news-detail, .news-archive, .guide-article-main) {
  padding-bottom: 3rem;
}
html[data-site-template="citadel"] :where(.mu-hero-article, .mu-hero-banner) {
  border: 1px solid rgba(234, 188, 96, 0.3) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(90deg, rgba(8, 6, 9, 0.95), rgba(8, 6, 9, 0.45)),
    url("/assets/templates/citadel/inner-masthead-v2.webp") center right / cover
      no-repeat !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Media and community. */
html[data-site-template="citadel"] .media-grid {
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
}
html[data-site-template="citadel"] .media-card {
  overflow: hidden;
  padding: 0 !important;
  will-change: auto !important;
}
html[data-site-template="citadel"] .media-thumb-wrap {
  background: #070609 !important;
}
html[data-site-template="citadel"] .media-thumb {
  filter: saturate(0.9) contrast(1.06) brightness(0.88);
  transition:
    filter 0.25s ease,
    transform 0.35s ease;
  will-change: auto !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-site-template="citadel"] .media-card:hover .media-thumb {
    filter: saturate(1.06) contrast(1.07) brightness(1);
    transform: scale(1.035);
  }
}
html[data-site-template="citadel"] .media-title {
  border-top: 1px solid rgba(227, 181, 88, 0.18) !important;
  background: #100d11 !important;
  color: #e8c677 !important;
}
html[data-site-template="citadel"] .discord-hero {
  border: 1px solid rgba(170, 99, 224, 0.4) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(
      420px 210px at 5% 0,
      rgba(133, 67, 188, 0.25),
      transparent 70%
    ),
    linear-gradient(135deg, #241629, #100c14) !important;
  color: #eee0f4 !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
html[data-site-template="citadel"]
  :where(.discord-hero-name, .community-name, .community-section-title) {
  color: #efcf86 !important;
}
html[data-site-template="citadel"]
  :where(.discord-hero-desc, .community-desc, .community-seo-copy) {
  color: #b5a8b8 !important;
}
html[data-site-template="citadel"] .community-icon {
  border-color: rgba(234, 188, 96, 0.3) !important;
  background: linear-gradient(145deg, #2a1928, #0e0a10) !important;
  color: #e7bd68 !important;
}

/* Classes and game-data detail pages. */
html[data-site-template="citadel"] .class-icon--citadel {
  width: min(100%, 245px);
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid rgba(233, 188, 96, 0.36);
  border-radius: 5px;
  object-fit: cover;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.52),
    0 0 24px rgba(124, 45, 172, 0.12);
}
html[data-site-template="citadel"]
  :where(
    .class-card,
    .guild-hero-card,
    .character-details,
    .char-header,
    .guild-header
  ) {
  border: 1px solid rgba(231, 185, 94, 0.3) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(
      420px 220px at 100% 0,
      rgba(127, 48, 180, 0.18),
      transparent 70%
    ),
    linear-gradient(180deg, #171218, #0b090d) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-lg) !important;
}
html[data-site-template="citadel"] .class-card-image--citadel {
  width: clamp(210px, 29vw, 330px) !important;
  height: auto !important;
  aspect-ratio: 1;
  margin: 0 auto 1rem;
  border: 1px solid rgba(234, 188, 96, 0.4);
  border-radius: 8px;
  object-fit: cover;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.58),
    0 0 35px rgba(141, 53, 198, 0.12);
}
html[data-site-template="citadel"] .class-speech-bubble {
  border-color: rgba(231, 185, 93, 0.3) !important;
  background: #120e13 !important;
  color: #e2d5c2 !important;
}
html[data-site-template="citadel"]
  :where(.matchup, .class-longdesc, .class-card-desc) {
  color: #c8bdb1 !important;
}
html[data-site-template="citadel"] .matchup.strong {
  border-color: rgba(85, 186, 118, 0.35) !important;
}
html[data-site-template="citadel"] .matchup.weak {
  border-color: rgba(219, 78, 68, 0.35) !important;
}
html[data-site-template="citadel"]
  :where(.class-related-section, .classes-grid) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-site-template="citadel"] .related-item__image--citadel {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 5px 5px 0 0;
  object-fit: cover;
}
html[data-site-template="citadel"] .class-archive-image--citadel {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html[data-site-template="citadel"]
  :where(.classes-archive .class-card, .classes-grid .class-card) {
  overflow: hidden;
}
html[data-site-template="citadel"]
  :where(.classes-archive .class-card__body, .classes-grid .class-card__body) {
  border-top: 1px solid rgba(228, 181, 88, 0.2);
  background: linear-gradient(180deg, #151016, #0b090d) !important;
}
html[data-site-template="citadel"]
  :where(
    .cd-panel,
    .muinvx-panel,
    .inventory-panel,
    .warehouse-panel,
    .attr-panel,
    .item-detail-card,
    .skill-detail-card,
    .map-card,
    .map-detail,
    .server-detail-card
  ) {
  border-color: rgba(229, 183, 91, 0.22) !important;
  background: var(--panel-bg) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-site-template="citadel"]
  :where(.class-pill, .source-badge, .item-badge, .skill-meta-item) {
  border-color: rgba(229, 183, 91, 0.28) !important;
  background: rgba(223, 175, 78, 0.08) !important;
  color: #e4bd69 !important;
}

/* Realm, item hunt, rates and download utility pages. */
html[data-site-template="citadel"]
  :where(.muor-section-head, .ih-section-head, .rates-section-head) {
  border-bottom-color: rgba(230, 184, 92, 0.2) !important;
}
html[data-site-template="citadel"]
  :where(.muor-stat-value, .ih-stat-value, .rate-value) {
  color: #f1c96d !important;
  font-family: var(--font-display);
}
html[data-site-template="citadel"]
  :where(.muor-stat-label, .ih-stat-label, .rate-label) {
  color: #a69a91 !important;
}
html[data-site-template="citadel"] .ih-chip.is-active {
  border-color: #e1b45d !important;
  background: linear-gradient(180deg, #a52226, #541019) !important;
  color: #fff0d0 !important;
}
html[data-site-template="citadel"]
  :where(
    .ih-status,
    .rates-legend,
    .download-note,
    .rift-trust,
    .rift-integrity
  ) {
  border-color: rgba(230, 183, 89, 0.22) !important;
  background: rgba(12, 9, 13, 0.72) !important;
  color: #b9ada3 !important;
}
html[data-site-template="citadel"] :where(.warning-box, .alt-box) {
  border-left: 3px solid #c98a37 !important;
}
html[data-site-template="citadel"] :where(.ss-step, .install-step) {
  border-color: rgba(229, 183, 90, 0.2) !important;
  background: #100d11 !important;
  color: var(--text) !important;
}

/* Account, rewards, shop and payment pages. */
html[data-site-template="citadel"] .account-main {
  background:
    radial-gradient(
      760px 420px at 92% 5%,
      rgba(116, 40, 170, 0.11),
      transparent 68%
    ),
    radial-gradient(
      720px 380px at 5% 0,
      rgba(145, 26, 34, 0.1),
      transparent 68%
    ) !important;
}
html[data-site-template="citadel"]
  .account-main
  :where(.account-breadcrumb, .account-section) {
  max-width: var(--shell);
}
html[data-site-template="citadel"]
  .account-main
  :where(
    .account-info-box,
    .account-action-panel,
    .account-card,
    .account-panel,
    .points-card,
    .sp-box,
    .sp-panel,
    .buygp-card,
    .buygp-panel,
    .payments-card,
    .pkg-card,
    .reward-card,
    .reward-vip-card,
    .daily-card,
    .vote-card,
    .vp-card,
    .invite-card,
    .guild-invite-card,
    .share-task-card,
    .share-destination
  ) {
  border-color: rgba(228, 182, 91, 0.22) !important;
  background: var(--panel-bg) !important;
  color: #d9cec1 !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-site-template="citadel"] .points-card :where(.point-label, small) {
  color: #a99d94 !important;
}
html[data-site-template="citadel"] .points-card .point-value {
  color: #f1cd78 !important;
  font-family: var(--font-display);
}
html[data-site-template="citadel"]
  .account-main
  :where(.info-header, .sp-head, .reward-section-head, .pkg-head) {
  border-bottom-color: rgba(231, 184, 90, 0.2) !important;
  background: transparent !important;
}
html[data-site-template="citadel"]
  .account-main
  :where(.action-btn, .reward-dashboard-action, .buy-gp-btn) {
  border-color: rgba(229, 183, 91, 0.28) !important;
  background: linear-gradient(180deg, #24181e, #100c11) !important;
  color: #e5cf9f !important;
}
html[data-site-template="citadel"]
  .account-main
  :where(.action-btn, .reward-dashboard-action):hover {
  background: linear-gradient(180deg, #382229, #171017) !important;
}
html[data-site-template="citadel"]
  :where(
    dialog.modal,
    .gr-modal__dialog,
    #gateway-confirm,
    .media-lightbox-content
  ) {
  border: 1px solid rgba(235, 190, 99, 0.38) !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #181319, #09070b) !important;
  color: var(--text) !important;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.78) !important;
}
html[data-site-template="citadel"]
  :where(.media-lightbox, dialog::backdrop, .modal-backdrop) {
  background: rgba(3, 2, 4, 0.88) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Full Citadel footer. */
html[data-site-template="citadel"] footer {
  text-align: left;
}
html[data-site-template="citadel"] footer .citadel-footer {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(480px, 1.4fr);
  width: min(var(--shell-fluid), var(--shell));
  box-sizing: border-box;
  padding-inline: var(--shell-gutter);
  margin: 0 auto;
  gap: clamp(2rem, 5vw, 5rem);
}
html[data-site-template="citadel"] .citadel-footer__brand {
  max-width: 420px;
}
html[data-site-template="citadel"] .citadel-footer__logo {
  position: relative;
  display: inline-block;
  padding-left: 23px;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  text-decoration: none;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff4d4, #e9b958 55%, #965a1d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-site-template="citadel"] .citadel-footer__logo::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1px solid #ebbd64;
  background: linear-gradient(135deg, #8d1622, #8d3cd5);
  box-shadow: 0 0 14px rgba(161, 66, 225, 0.55);
  transform: translateY(-50%) rotate(45deg);
}
html[data-site-template="citadel"] .citadel-footer__brand p {
  margin: 0.8rem 0 1.25rem;
  color: #9f948d !important;
  line-height: 1.65;
}
html[data-site-template="citadel"] .citadel-footer__play {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0.72rem 1.2rem;
  border: 1px solid rgba(235, 191, 101, 0.4);
  border-radius: 5px;
  background: linear-gradient(180deg, #d94531, #7d1219);
  color: #fff0d0;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
html[data-site-template="citadel"] .citadel-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
html[data-site-template="citadel"] .citadel-footer__nav h2 {
  margin: 0 0 0.75rem;
  color: #e5bd6d;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[data-site-template="citadel"] .citadel-footer__nav ul {
  display: grid;
  gap: 0.48rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-site-template="citadel"] .citadel-footer__nav a {
  color: #aca099;
  font-size: 0.9rem;
  text-decoration: none;
}
html[data-site-template="citadel"] .citadel-footer__nav a:hover {
  color: #f0c66d;
}
html[data-site-template="citadel"] .citadel-footer__legal {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(227, 181, 88, 0.16);
  color: #817770;
  font-size: 0.79rem;
}
html[data-site-template="citadel"] .citadel-footer__legal nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.9rem;
}
html[data-site-template="citadel"] .citadel-footer__legal p {
  grid-column: 1 / -1;
  margin: 0;
  color: #716864 !important;
}

/* Citadel navigation collapses before translations can overflow. */
@media (max-width: 1080px) {
  html[data-site-template="citadel"] {
    --site-header-offset: 68px;
  }
  html[data-site-template="citadel"] body {
    background-attachment: scroll;
  }
  html[data-site-template="citadel"] body::before {
    position: absolute;
  }
  html[data-site-template="citadel"] header[role="banner"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand toggle" "nav nav" "controls controls";
    align-items: center;
    gap: 0.45rem;
    min-height: 66px;
    padding: 0.65rem 0.85rem;
  }
  html[data-site-template="citadel"] .header-left {
    grid-area: brand;
  }
  html[data-site-template="citadel"] .mobile-toggle {
    position: static;
    grid-area: toggle;
    display: inline-flex;
    width: 44px;
    min-width: 44px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(230, 184, 92, 0.3);
    border-radius: 5px;
    background: #100d12;
    color: #efc66d;
    font-size: 1.55rem;
  }
  html[data-site-template="citadel"] header[role="banner"] nav {
    grid-area: nav;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.35rem;
    padding: 0.7rem;
    border: 1px solid rgba(223, 178, 89, 0.2);
    border-radius: 6px;
    background: #0b090d;
  }
  html[data-site-template="citadel"] header[role="banner"] nav.show {
    display: grid !important;
  }
  html[data-site-template="citadel"]
    header[role="banner"]
    nav
    a:not([class*="btn"]) {
    width: 100%;
    padding: 0.85rem 0.7rem;
    font-size: 0.85rem;
    text-align: center;
  }
  html[data-site-template="citadel"] .header-right {
    grid-area: controls;
    display: none;
    width: 100%;
    align-items: stretch;
    gap: 0.5rem;
    padding-top: 0.15rem;
  }
  html[data-site-template="citadel"] body.nav-open .header-right {
    display: flex;
  }
  html[data-site-template="citadel"] .account-controls {
    flex: 1 1 auto;
  }
  html[data-site-template="citadel"] .template-switcher {
    flex: 0 1 240px;
    min-width: 190px;
  }
  html[data-site-template="citadel"] .lang-switcher {
    flex: 0 0 82px;
    width: auto;
    margin: 0;
  }
  html[data-site-template="citadel"] .lang-switcher select {
    width: 100%;
  }
  html[data-site-template="citadel"] .ranking-tabs-bar {
    position: static !important;
  }
  html[data-site-template="citadel"] .citadel-ambient {
    display: none !important;
  }
}

@media (max-width: 768px) {
  html[data-site-template="citadel"] .container {
    width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html[data-site-template="citadel"] .page-header-box {
    min-height: 190px;
    align-items: flex-end;
    padding: 1.25rem !important;
    background-position: 63% center !important;
  }
  html[data-site-template="citadel"] .page-header-box .page-subtitle {
    max-width: 52ch;
  }
  html[data-site-template="citadel"] footer .citadel-footer {
    grid-template-columns: 1fr;
  }
  html[data-site-template="citadel"] .citadel-footer__brand {
    max-width: 620px;
  }
  html[data-site-template="citadel"] .citadel-footer__legal {
    grid-column: 1;
  }
  html[data-site-template="citadel"] :where(.register-page, .auth-page-shell) {
    width: 100%;
  }
}

@media (max-width: 620px) {
  html[data-site-template="citadel"] header[role="banner"] nav {
    grid-template-columns: 1fr;
  }
  html[data-site-template="citadel"] body.nav-open .header-right {
    display: grid;
    grid-template-columns: 1fr 78px;
  }
  html[data-site-template="citadel"] .account-controls {
    grid-column: 1 / -1;
  }
  html[data-site-template="citadel"] .template-switcher {
    min-width: 0;
    width: 100%;
  }
  html[data-site-template="citadel"] .template-switcher select {
    width: 100%;
  }
  html[data-site-template="citadel"] .citadel-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-site-template="citadel"] .citadel-footer__legal {
    grid-template-columns: 1fr;
  }
  html[data-site-template="citadel"] .citadel-footer__legal nav {
    justify-content: flex-start;
  }
  html[data-site-template="citadel"] .citadel-footer__legal p {
    grid-column: 1;
  }
  html[data-site-template="citadel"]
    :where(.modal-actions, .gr-modal__actions, .gateway-confirm__actions) {
    flex-direction: column-reverse !important;
  }
  html[data-site-template="citadel"]
    :where(.modal-actions, .gr-modal__actions, .gateway-confirm__actions)
    > * {
    width: 100% !important;
  }
  html[data-site-template="citadel"] .media-lightbox-content {
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto;
  }
}

@media (max-width: 420px) {
  html[data-site-template="citadel"] .citadel-footer__nav {
    grid-template-columns: 1fr;
  }
  html[data-site-template="citadel"] .account-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-template="citadel"]
    :where(
      .media-thumb,
      .event-card,
      .guides-featured-card,
      .community-card,
      .media-card,
      .ih-cur-card,
      .ih-event-card,
      .related-item,
      .resource-card,
      .points-card
    ) {
    transition: none !important;
    transform: none !important;
  }
}

@media print {
  html[data-site-template="citadel"],
  html[data-site-template="citadel"] body,
  html[data-site-template="citadel"] main,
  html[data-site-template="citadel"]
    :where(
      .white-box,
      .card,
      .panel,
      .account-card,
      .guide-article,
      .event-card,
      .ranking-main-container,
      .ranking-results-card,
      .class-card
    ) {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    filter: none !important;
  }
  html[data-site-template="citadel"]
    :where(p, li, td, th, h1, h2, h3, h4, a, strong) {
    color: #000 !important;
  }
  html[data-site-template="citadel"]
    :where(
      header[role="banner"],
      footer,
      .citadel-ambient,
      .template-switcher
    ) {
    display: none !important;
  }
}

/* ==========================================================================
   OBSIDIAN CITADEL — ASCENSION PASS (2026-08-27)

   Appended on purpose: everything below is a refinement of the base Citadel
   skin above, and "later in the file" is what wins the equal-specificity ties
   this file is full of. Where the base pins a property with !important the
   override below repeats !important — otherwise it is silently inert.

   What this pass changes
     1. Real typography. The skin ran entirely on Georgia/system fonts, which
        is the loudest "stock template" tell there is. Cinzel (inscriptional
        Roman caps) carries display, Oswald (condensed gothic) carries UI.
     2. Forged materials. Flat rounded rectangles become gradient-border
        panels with bevels, corner brackets and inner shadow.
     3. The hero. A WebGL rift renders behind the key art (js/citadel-3d.js);
        this file owns its compositing and its no-JS fallback.
     4. Concrete fixes: the download hero's dead vertical space, its three
        identical red CTAs, mismatched inner mastheads, header offset drift.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
/* Cinzel, Oswald and EB Garamond ship under the SIL Open Font License 1.1
   (see assets/templates/citadel/fonts/OFL.txt). Self-hosted: no third-party
   connection, no render-blocking Google stylesheet, no late-swap CLS.
   EB Garamond exists only so Vietnamese headings do not fall back mid-word —
   Cinzel has no Vietnamese subset. Non-vi locales never request it. */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/templates/citadel/fonts/cinzel-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/templates/citadel/fonts/cinzel-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/templates/citadel/fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/templates/citadel/fonts/oswald-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/templates/citadel/fonts/oswald-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/templates/citadel/fonts/ebgaramond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/templates/citadel/fonts/ebgaramond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/templates/citadel/fonts/ebgaramond-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* ----------------------------------------------------------------- tokens */
html[data-site-template="citadel"] {
  --font-display: "Cinzel", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "Oswald", var(--font-sans), system-ui, sans-serif;

  /* ONE page shell for every band of the layout. Before this the hero ran at
     1440, .container at 1320, rankings at 1360, register at 1380 and the footer
     at 1320 — five different left edges stacked down the page. Anything that
     defines a content column must use these three tokens. */
  --shell: 1440px;
  --shell-fluid: 93%;
  --shell-gutter: 1.2rem;

  /* Gold leaf read as a struck surface: highlight, body, shadow, re-lit edge.
     The shadow band is the whole trick and also the whole risk — the first
     version bottomed out at #7d5619, which is 2.6:1 on this background and put
     a near-black stripe through the middle of every large glyph. The floor is
     now #cf9a41 (~7:1), so it still reads as struck metal but stays legible at
     display sizes. Do not darken these stops without re-checking contrast. */
  --leaf-gold: linear-gradient(
    178deg,
    #fffdf4 0%,
    #ffeec0 12%,
    #f6d488 30%,
    #e6b45c 46%,
    #cf9a41 55%,
    #eac572 68%,
    #ffe9b4 84%,
    #fffaea 100%
  );
  --face-gold: linear-gradient(
    180deg,
    #fbe8ba 0%,
    #e2b866 30%,
    #9f7429 58%,
    #cb9c40 79%,
    #f5dfa6 100%
  );
  --face-crimson: linear-gradient(
    180deg,
    #f4704a 0%,
    #c62521 32%,
    #7e0e16 68%,
    #47060d 100%
  );
  --face-obsidian: linear-gradient(
    180deg,
    #241b28 0%,
    #150f19 40%,
    #0a080c 100%
  );
  --edge-gold: rgba(238, 195, 108, 0.55);
  --edge-gold-soft: rgba(228, 182, 92, 0.24);

  /* Filigree used on section rules and heading flourishes. */
  --ornament-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='14' viewBox='0 0 168 14'%3E%3Cg fill='none' stroke='%23dcae57' stroke-width='1.1'%3E%3Cpath d='M0 7h58M110 7h58' opacity='.7'/%3E%3Cpath d='M84 1.6 89.4 7 84 12.4 78.6 7z'/%3E%3Cpath d='M66 7h6M96 7h6'/%3E%3Cpath d='M74.5 4.4 77 7l-2.5 2.6M93.5 4.4 91 7l2.5 2.6'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-site-template="citadel"]:lang(vi),
html[data-site-template="citadel"] :lang(vi) {
  /* Cinzel has no Vietnamese subset: swapping the whole heading font beats
     letting tone marks fall back glyph-by-glyph into Georgia. */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------- typography */
/* NOTE on :is() below — every list here is kept to single-class/element
   arguments on purpose. :is() takes the specificity of its MOST specific
   argument, so slipping one descendant selector (`.hero-card h1`,
   `header nav a`, `.muor .realm-card .cta`) into a list silently promotes the
   whole rule and it starts beating the targeted rules further down this file.
   Compound targets get their own rule instead. */
html[data-site-template="citadel"]
  :is(
    h1,
    h2,
    .page-title,
    .rift-hero__title,
    .logo,
    .section-title,
    .home-records-title
  ),
html[data-site-template="citadel"] .hero-card h1,
html[data-site-template="citadel"] .account-titlebar h1 {
  font-family: var(--font-display);
  font-weight: 800;
  /* Cinzel is a caps face; the base skin's Georgia-era negative tracking would
     smear it. .rift-hero__title overrides this with its own value below. */
  letter-spacing: 0.012em;
  text-transform: uppercase;
}
html[data-site-template="citadel"]
  :is(
    h3,
    h4,
    h5,
    .rift-hero__kicker,
    .hero-kicker,
    .page-kicker,
    .home-records-kicker,
    .rift-stat__label,
    .badge,
    .page-count-pill,
    .ranking-tab,
    .filter-btn,
    .btn,
    .news-btn,
    .btn-register,
    .btn-login,
    .btn-account,
    .btn-logout,
    .main-register-btn,
    .hero-ghost-btn,
    .hero-download-btn
  ),
html[data-site-template="citadel"] header[role="banner"] nav a {
  /* font-family only. Tracking is deliberately NOT set here: one value across
     h3s, kickers, badges, tabs and buttons is wrong for all of them, and this
     list is broad enough that it was quietly flattening the 0.34em hero kicker
     down to 0.055em. Each component sets its own tracking below. */
  font-family: var(--font-ui);
}
html[data-site-template="citadel"]
  header[role="banner"]
  nav
  a:not([class*="btn"]) {
  /* Oswald tops out at 700; the base skin's 850 would trigger synthetic bold.
     Tracking stays modest — long uppercase runs get harder to scan as the
     letterspacing grows, and the header carries ten of them. */
  font-weight: 600;
  letter-spacing: 0.05em;
}
html[data-site-template="citadel"] :is(h3, h4, h5) {
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #edca7e;
  text-transform: none;
}
/* Numerals carry a lot of this design (ranks, stats, counters); the display
   face gives them the struck-metal look the rest of the skin is going for. */
html[data-site-template="citadel"]
  :is(
    .rift-stat__value,
    .kpi__value,
    .citadel-hero-proof strong,
    .ranking-card-rank,
    .rank-badge,
    .side-rank-badge
  ) {
  font-family: var(--font-display) !important;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.01em;
}
html[data-site-template="citadel"]
  :is(.sys-table th, .table-style th, .ranking-table th) {
  font-family: var(--font-ui) !important;
  font-weight: 600;
  font-size: 0.79rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Gold-leaf heading treatment. drop-shadow rather than text-shadow so the
   bevel survives background-clip:text. */
html[data-site-template="citadel"] main :is(h1, h2),
html[data-site-template="citadel"] .page-header-box .page-title,
html[data-site-template="citadel"] .hero-card h1 {
  background: var(--leaf-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(20, 8, 2, 0.95))
    drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
}
html[data-site-template="citadel"] .logo {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.03em;
  background: var(--leaf-gold);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Ornamented section headings: filigree above and below centred titles. */
html[data-site-template="citadel"] main h2.text-center::before,
html[data-site-template="citadel"] main h2.text-accent::before {
  content: "";
  display: block;
  width: 168px;
  height: 14px;
  margin: 0 auto 0.9rem;
  background: var(--ornament-rule) center / 168px 14px no-repeat;
  opacity: 0.9;
}
html[data-site-template="citadel"] main h2.text-center::after,
html[data-site-template="citadel"] main h2.text-accent::after {
  content: "";
  display: block;
  width: 168px;
  height: 14px;
  margin: 0.9rem auto 0;
  background: var(--ornament-rule) center / 168px 14px no-repeat;
  opacity: 0.5;
  transform: scaleY(-1);
}

/* ------------------------------------------------------- WebGL hero rift */
/* The renderer draws opaque on black and the canvas is composited with
   mix-blend-mode:screen, so black contributes nothing and the scene melts into
   the hero gradients. That only works if the portal is NOT its own isolation
   group — the base skin isolates it for the old CSS crystal, so undo that
   exactly when the canvas is mounted. */
html[data-site-template="citadel"] .rift-portal.has-rift-3d {
  isolation: auto;
}
html[data-site-template="citadel"] .citadel-rift-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  /* Opacity is driven per-frame by the render loop (it also handles the fade
     back in after a context restore), so no CSS transition here — one would
     restart on every frame and make the fade lag behind the scene. */
  opacity: 0;
  mix-blend-mode: screen;
  /* Bloom leaves a faint warm haze right out to the canvas edge; without this
     the screen blend paints a visible rectangle over the hero gradient. */
  -webkit-mask-image: radial-gradient(
    ellipse 78% 76% at 50% 48%,
    #000 56%,
    rgba(0, 0, 0, 0.7) 78%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 78% 76% at 50% 48%,
    #000 56%,
    rgba(0, 0, 0, 0.7) 78%,
    transparent 100%
  );
}
/* With the rift live the key art needs a touch less contrast crushing so the
   portal reads through the silhouette instead of fighting it. */
html[data-site-template="citadel"] .rift-portal.has-rift-3d .citadel-hero-art {
  filter: drop-shadow(0 28px 54px rgba(0, 0, 0, 0.8)) saturate(1.08)
    contrast(1.02);
}
html[data-site-template="citadel"] .rift-portal.has-rift-3d::before {
  /* The CSS glow was standing in for the portal; dim it so it only softens
     the canvas edge instead of doubling it. */
  opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  html[data-site-template="citadel"] .citadel-rift-canvas {
    display: none !important;
  }
}

/* -------------------------------------------------------------- hero copy */
html[data-site-template="citadel"] .rift-hero__title {
  /* Cinzel is a caps face with generous sidebearings: the old -0.075em
     tracking (tuned for Georgia) collapsed it into a smear. */
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6.2vw, 6.2rem);
  font-weight: 900;
  letter-spacing: 0.008em;
  line-height: 0.98;
  background:
    linear-gradient(
      110deg,
      transparent 40%,
      rgba(255, 255, 255, 0.85) 49%,
      transparent 58%
    ),
    var(--leaf-gold);
  background-size:
    250% 100%,
    100% 100%;
  background-position:
    220% 0,
    0 0;
  background-repeat: no-repeat;
  /* Must be repeated here: the `background:` shorthand above resets
     background-clip to border-box, which beats the base rule's `text` (same
     specificity, earlier in the file) and leaves transparent text on an
     unclipped gradient — i.e. an invisible <h1>. */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.8px rgba(58, 24, 8, 0.45);
  filter: drop-shadow(0 3px 0 #2c0f06)
    drop-shadow(0 12px 26px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 34px rgba(226, 150, 52, 0.16));
}
html[data-site-template="citadel"] .rift-hero__kicker {
  font-weight: 600;
  font-size: clamp(0.7rem, 0.6vw, 0.82rem);
  letter-spacing: 0.34em;
}
html[data-site-template="citadel"] .rift-hero__lead {
  font-size: clamp(1.02rem, 0.4vw + 0.94rem, 1.14rem);
  line-height: 1.72;
  color: #d5c9ba;
}

/* Proof bar: hairline gold frame with divider pips, not three bare columns. */
html[data-site-template="citadel"] .citadel-hero-proof {
  position: relative;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(232, 183, 83, 0.32);
  border-bottom: 1px solid rgba(232, 183, 83, 0.22);
  background: linear-gradient(
    180deg,
    rgba(233, 184, 84, 0.05),
    rgba(0, 0, 0, 0) 62%
  );
}
html[data-site-template="citadel"] .citadel-hero-proof strong {
  font-size: 1.02rem;
  letter-spacing: 0.045em;
  background: var(--leaf-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-site-template="citadel"] .citadel-hero-proof span {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.71rem;
  letter-spacing: 0.12em;
  color: #b6aa9e;
}
html[data-site-template="citadel"] .citadel-hero-proof li + li {
  border-left: 1px solid rgba(232, 183, 83, 0.16);
}

/* --------------------------------------------------------------- controls */
/* Forged plate: bevelled top light, dark bottom roll, hard 1px gold edge and a
   sheen that sweeps on hover. The clip-path notch from the base skin stays. */
html[data-site-template="citadel"] .rift-hero .main-register-btn,
html[data-site-template="citadel"] .rift-hero .hero-ghost-btn,
html[data-site-template="citadel"] .hero-download-btn {
  position: relative;
  overflow: hidden;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    transform 0.16s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}
/* background/color repeat !important: the sitewide primary-button rule above
   (:where(.button, .buy-gp-btn, button[type=submit], .main-register-btn)) pins
   both, and would otherwise silently keep its flatter gradient here. */
html[data-site-template="citadel"] .rift-hero .main-register-btn {
  border: 1px solid rgba(255, 219, 140, 0.6);
  background: var(--face-crimson) !important;
  color: #fff3dd !important;
  box-shadow:
    0 20px 40px rgba(110, 6, 16, 0.46),
    0 2px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 238, 196, 0.45),
    inset 0 -12px 22px rgba(52, 3, 9, 0.5);
  text-shadow: 0 1px 2px rgba(60, 4, 10, 0.85);
}
html[data-site-template="citadel"] .rift-hero .hero-ghost-btn {
  border: 1px solid rgba(235, 190, 99, 0.42);
  background: var(--face-obsidian);
  color: #ecd5a5;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 236, 190, 0.12),
    inset 0 -12px 22px rgba(0, 0, 0, 0.45);
}
/* ::before is already taken on .main-register-btn by the base skin. */
html[data-site-template="citadel"] .rift-hero .main-register-btn::after,
html[data-site-template="citadel"] .rift-hero .hero-ghost-btn::after,
html[data-site-template="citadel"] .hero-download-btn::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -140%;
  width: 55%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 244, 214, 0.34),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  html[data-site-template="citadel"] .rift-hero .main-register-btn:hover::after,
  html[data-site-template="citadel"] .rift-hero .hero-ghost-btn:hover::after,
  html[data-site-template="citadel"] .hero-download-btn:hover::after {
    left: 150%;
  }
  html[data-site-template="citadel"] .rift-hero .main-register-btn:hover {
    transform: translateY(-2px);
    box-shadow:
      0 26px 52px rgba(140, 10, 20, 0.55),
      0 0 26px rgba(255, 150, 80, 0.22),
      inset 0 1px 0 rgba(255, 242, 208, 0.55);
  }
  html[data-site-template="citadel"] .rift-hero .hero-ghost-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(246, 208, 129, 0.7);
    box-shadow:
      0 22px 44px rgba(0, 0, 0, 0.6),
      0 0 22px rgba(160, 78, 226, 0.18),
      inset 0 1px 0 rgba(255, 238, 196, 0.2);
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-site-template="citadel"] .rift-hero .main-register-btn::after,
  html[data-site-template="citadel"] .rift-hero .hero-ghost-btn::after,
  html[data-site-template="citadel"] .hero-download-btn::after {
    display: none;
  }
}

/* Sitewide buttons pick up the same bevel without the notch. */
html[data-site-template="citadel"]
  :is(
    .btn,
    .btn-primary,
    .news-btn,
    .filter-btn,
    .ranking-tab,
    .btn-register,
    .btn-login,
    .btn-account,
    .btn-logout
  ),
html[data-site-template="citadel"] .muor .realm-card .cta {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    var(--btn-shadow, 0 10px 24px rgba(0, 0, 0, 0.34)),
    inset 0 1px 0 rgba(255, 240, 200, 0.09),
    inset 0 -10px 18px rgba(0, 0, 0, 0.32);
}

/* ------------------------------------------------- download page (sub hero) */
/* The sub hero inherited the homepage's 690-860px min-height and centred a
   short block of copy inside it, leaving a screen of empty gradient under the
   buttons. Size it to its own content instead. */
html[data-site-template="citadel"] .rift-hero--sub {
  min-height: clamp(360px, 46vh, 520px);
  padding: clamp(2.6rem, 5vh, 4rem) 0 clamp(2.8rem, 5vh, 4rem);
  background:
    linear-gradient(
      90deg,
      rgba(7, 5, 8, 0.96) 0%,
      rgba(7, 5, 8, 0.82) 38%,
      rgba(8, 5, 9, 0.34) 72%,
      rgba(7, 5, 8, 0.6) 100%
    ),
    radial-gradient(
      620px 320px at 74% 42%,
      rgba(136, 47, 190, 0.22),
      transparent 72%
    ),
    url("/assets/bg-download.webp") center right / cover no-repeat !important;
}
html[data-site-template="citadel"] .rift-hero--sub .rift-hero__inner {
  grid-template-columns: minmax(0, 1fr);
}
html[data-site-template="citadel"] .rift-hero--sub .rift-hero__copy {
  max-width: 760px;
}
html[data-site-template="citadel"] .rift-hero--sub .rift-hero__title {
  font-size: clamp(2.5rem, 4.4vw, 4.3rem);
  line-height: 1.02;
}
/* Three identical crimson CTAs gave the page no primary action. Tier them:
   crimson primary, gold-edged secondary, ghost tertiary — all one row. */
html[data-site-template="citadel"] .rift-hero--sub .rift-hero__cta {
  flex-wrap: wrap;
  gap: 0.65rem;
}
/* All three mirrors also carry .main-register-btn, so the secondary and
   tertiary faces have to out-specify `.rift-hero .main-register-btn` above —
   hence the .rift-hero scope here rather than the bare modifier class. */
html[data-site-template="citadel"] .rift-hero .hero-download-btn {
  min-height: 52px;
  padding: 0.9rem clamp(1.2rem, 1.9vw, 1.9rem);
}
html[data-site-template="citadel"] .rift-hero .hero-download-btn--alt {
  border: 1px solid rgba(243, 205, 124, 0.62) !important;
  background: linear-gradient(
    180deg,
    #35281b 0%,
    #1d1510 48%,
    #100b09 100%
  ) !important;
  color: #f6dda6 !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 232, 178, 0.24),
    inset 0 -12px 20px rgba(0, 0, 0, 0.42) !important;
}
html[data-site-template="citadel"] .rift-hero .hero-download-btn--ghost {
  border: 1px solid rgba(198, 170, 214, 0.34) !important;
  background: linear-gradient(
    180deg,
    rgba(30, 22, 36, 0.9),
    rgba(11, 8, 14, 0.94)
  ) !important;
  color: #d8cbe4 !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(226, 206, 245, 0.12) !important;
}

/* -------------------------------------------------------- forged surfaces */
/* Every card in the base skin was the same flat rounded rectangle. These get a
   lit top edge that fades at the corners, a bevelled inner highlight, a dark
   bottom roll and a real cast shadow — the difference between "dark div" and
   "plate of blackened steel". Repeats !important because the base pins
   background/border/box-shadow on most of these selectors. */
html[data-site-template="citadel"]
  :is(
    .white-box,
    .news-card,
    .news-feature,
    .class-panel,
    .side-widget,
    .home-record-card,
    .home-boss-card,
    .home-records-section,
    .hero-card,
    .info-block,
    .media-card,
    .faq-item,
    .muor .nav-card,
    .muor .realm-card,
    .servers-card,
    .guide-card
  ) {
  position: relative;
  border: 1px solid rgba(229, 183, 92, 0.24) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(
        90deg,
        transparent 6%,
        rgba(246, 213, 143, 0.5) 50%,
        transparent 94%
      )
      top center / 100% 1px no-repeat,
    linear-gradient(
      180deg,
      rgba(30, 23, 33, 0.97) 0%,
      rgba(18, 14, 21, 0.98) 44%,
      rgba(10, 8, 12, 0.99) 100%
    ) !important;
  box-shadow:
    0 26px 62px rgba(0, 0, 0, 0.56),
    0 2px 0 rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 238, 198, 0.09),
    inset 0 -34px 52px rgba(0, 0, 0, 0.34) !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-site-template="citadel"]
    :is(
      .news-card,
      .class-panel,
      .home-record-card,
      .media-card,
      .muor .nav-card,
      .muor .realm-card,
      .servers-card
    ):hover {
    border-color: rgba(246, 208, 129, 0.52) !important;
    box-shadow:
      0 32px 70px rgba(0, 0, 0, 0.62),
      0 0 30px rgba(150, 55, 205, 0.14),
      inset 0 1px 0 rgba(255, 242, 210, 0.16),
      inset 0 -34px 52px rgba(0, 0, 0, 0.32) !important;
  }
}

/* Corner brackets. Applied only where the base skin leaves the pseudo free:
   ::before on record cards / side widgets / stat cells, ::after on the strip
   and the news feature (their ::before is already spoken for). */
html[data-site-template="citadel"] .home-record-card::before,
html[data-site-template="citadel"] .side-widget::before,

html[data-site-template="citadel"] .rift-strip::after,
html[data-site-template="citadel"] .news-feature::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(#eec473, #eec473), linear-gradient(#eec473, #eec473),
    linear-gradient(#eec473, #eec473), linear-gradient(#eec473, #eec473),
    linear-gradient(#eec473, #eec473), linear-gradient(#eec473, #eec473),
    linear-gradient(#eec473, #eec473), linear-gradient(#eec473, #eec473);
  background-repeat: no-repeat;
  background-size:
    13px 1px,
    1px 13px,
    13px 1px,
    1px 13px,
    13px 1px,
    1px 13px,
    13px 1px,
    1px 13px;
  background-position:
    left top,
    left top,
    right top,
    right top,
    left bottom,
    left bottom,
    right bottom,
    right bottom;
}

/* ---------------------------------------------------------- highlight strip */
html[data-site-template="citadel"] .rift-strip {
  position: relative;
  border: 1px solid rgba(229, 183, 92, 0.26) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(
        90deg,
        transparent,
        rgba(246, 213, 143, 0.55) 50%,
        transparent
      )
      top center / 100% 1px no-repeat,
    radial-gradient(
      620px 130px at 50% 0,
      rgba(126, 38, 155, 0.16),
      transparent 74%
    ),
    linear-gradient(180deg, #191320 0%, #0d0a11 100%) !important;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 238, 198, 0.1) !important;
}
html[data-site-template="citadel"] .rift-stat {
  position: relative;
}
html[data-site-template="citadel"] .rift-stat__value {
  font-size: clamp(1.9rem, 2.4vw, 2.6rem);
  line-height: 1;
  background: var(--leaf-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(18, 7, 2, 0.9));
}
html[data-site-template="citadel"] .rift-stat__label {
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #b6aa9e;
}

/* ------------------------------------------------------------- mastheads */
/* Page headers get the same plate treatment as the cards plus an inset hair
   frame, so a masthead reads as the heavier sibling of a panel rather than as
   a differently-styled box. */
html[data-site-template="citadel"] .page-header-box,
html[data-site-template="citadel"] .ranking-heading-card {
  border-radius: 9px !important;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 240, 205, 0.08) !important;
}
html[data-site-template="citadel"] .page-header-box::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(233, 188, 97, 0.16);
  border-radius: 5px;
}
html[data-site-template="citadel"] .page-kicker {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ data tables */
html[data-site-template="citadel"]
  :is(.sys-table th, .table-style th, .ranking-table th) {
  background: linear-gradient(180deg, #251820, #120c10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.08);
}
@media (hover: hover) and (pointer: fine) {
  html[data-site-template="citadel"]
    :is(.sys-table tbody tr:hover td, .ranking-table tbody tr:hover td) {
    background: linear-gradient(
      90deg,
      rgba(146, 52, 200, 0.1),
      rgba(224, 176, 84, 0.08)
    ) !important;
    color: #f4e9d6 !important;
  }
}
html[data-site-template="citadel"] .ranking-table .rank-badge {
  font-weight: 700;
  letter-spacing: 0;
}

/* -------------------------------------------------------- countdown frame */
html[data-site-template="citadel"] .rift-hero .countdown-frame {
  width: min(100%, 620px) !important;
  /* sepia() was muting the violet in the launch card into mud. */
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.6));
}

/* ------------------------------------------------------------------ footer */
html[data-site-template="citadel"] footer::after {
  content: "";
  display: block;
  width: 168px;
  height: 14px;
  margin: 1.6rem auto 0;
  background: var(--ornament-rule) center / 168px 14px no-repeat;
  opacity: 0.45;
}

/* ---------------------------------------------------------------- motion */
/* [data-reveal] itself is already owned by style.css (including its own
   reduced-motion override) — nothing to add here but the title sheen, which
   the base skin animates unconditionally. */
@media (prefers-reduced-motion: reduce) {
  html[data-site-template="citadel"] .rift-hero__title {
    animation: none !important;
  }
  html[data-site-template="citadel"] .citadel-hero-art__flare {
    animation: none !important;
  }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  html[data-site-template="citadel"] .rift-hero__title {
    font-size: clamp(2.9rem, 9vw, 4.4rem);
  }
  html[data-site-template="citadel"] .citadel-hero-proof {
    width: 100%;
  }
}
@media (max-width: 720px) {
  html[data-site-template="citadel"] .rift-hero__title {
    font-size: clamp(2.4rem, 10.5vw, 3.4rem);
    letter-spacing: 0.005em;
  }
  html[data-site-template="citadel"] .rift-hero--sub .rift-hero__title {
    font-size: clamp(1.9rem, 8.5vw, 2.8rem);
  }
  html[data-site-template="citadel"] .rift-hero__cta,
  html[data-site-template="citadel"] .rift-hero--sub .rift-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  html[data-site-template="citadel"] .rift-hero .main-register-btn,
  html[data-site-template="citadel"] .rift-hero .hero-ghost-btn,
  html[data-site-template="citadel"] .hero-download-btn {
    width: 100%;
  }
  html[data-site-template="citadel"] .citadel-hero-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  html[data-site-template="citadel"] .citadel-hero-proof li {
    padding: 0.16rem 0.5rem;
  }
  html[data-site-template="citadel"] .citadel-hero-proof strong {
    font-size: 0.86rem;
  }
  html[data-site-template="citadel"] .citadel-hero-proof span {
    font-size: 0.62rem;
    letter-spacing: 0.07em;
  }
  html[data-site-template="citadel"] main h2.text-center::before,
  html[data-site-template="citadel"] main h2.text-center::after,
  html[data-site-template="citadel"] main h2.text-accent::before,
  html[data-site-template="citadel"] main h2.text-accent::after {
    width: 118px;
    background-size: 118px 10px;
  }
}

/* --------------------------------------------------------- type hygiene */
/* Cleanup after swapping the skin's Georgia stack for the real families.
   Two classes of leftovers:
     1. Card titles that had their own `.card h3` rule and so kept the display
        face while every other h3 moved to the UI face.
     2. Weights above 700 inherited from the old system-font era. Oswald's
        variable axis stops at 700, so 800/900 there is synthetic bold — a
        smeared, heavier-looking glyph that does not match Cinzel next to it. */
html[data-site-template="citadel"] .class-panel h3,
html[data-site-template="citadel"] .home-record-card h3,
html[data-site-template="citadel"] .news-card h3,
html[data-site-template="citadel"] .media-card h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.03em;
}
html[data-site-template="citadel"]
  :is(
    .main-register-btn,
    .hero-ghost-btn,
    .hero-download-btn,
    .home-records-kicker,
    .rift-hero__kicker,
    .hero-kicker,
    .page-kicker,
    .rift-stat__label,
    .badge,
    .page-count-pill
  ) {
  font-weight: 600;
}

/* ==========================================================================
   ALIGNMENT + LEGIBILITY PASS (2026-08-27, second round)
   ========================================================================== */

/* ------------------------------------------------------------ header shell */
/* The header is the one band that cannot sit on --shell: with the 2026-08-27
   nav-legibility lift (~14px links) its natural one-row width is 1394px in
   English and up to 1596px in pl, so it gets its own wider cap — enough for
   the longest translation, narrow enough that the bar stops sprawling on
   ultra-wide monitors. Scoped above the 1080px hamburger breakpoint so it
   cannot fight the mobile header padding defined there. The short template
   names ("Obsidian"/"Classic") bought back ~90px of picker width for this.
   The active cap lives in the "header width, refined" block further down. */

/* --------------------------------------------------------- legibility lifts */
/* Small uppercase gold on near-black: these sat between 4.3:1 and 4.9:1, which
   is exactly where letterspaced 12px text stops being comfortable. */
html[data-site-template="citadel"] .home-records-kicker {
  color: #e2ab4d;
}
html[data-site-template="citadel"]
  :is(.kpi__label, .kpi__sub, .skill-meta-pill, .item-row-meta) {
  color: #b6aa9e !important;
}
html[data-site-template="citadel"] :is(.faq-a, .faq-item > p) {
  color: #c6bab0 !important;
}

/* Large gold-leaf numerals need the bevel to stay readable at a glance: a
   hairline dark rim under the gradient stops the light stops from dissolving
   into the panel behind them. */
html[data-site-template="citadel"]
  :is(.rift-stat__value, .citadel-hero-proof strong) {
  filter: drop-shadow(0 1px 0 rgba(16, 6, 2, 0.95))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

/* --------------------------------------------------------- strip alignment */
/* With the shell unified the strip gets ~120px wider; give the four stats room
   to breathe rather than letting the labels re-wrap at the new width. */
html[data-site-template="citadel"] .rift-strip {
  padding: clamp(1.1rem, 1.8vw, 1.6rem) clamp(1rem, 2vw, 2rem);
}
html[data-site-template="citadel"] .rift-stat {
  padding-inline: clamp(0.6rem, 1.2vw, 1.4rem);
}

/* --------------------------------------------------- header width, refined */
/* One-row cap sized for the measured post-lift locale widths (worst: pl at
   1596px — full table on the two-row media query in the responsive section,
   whose 1700px breakpoint is tuned to the same numbers): 1640px of content
   room keeps every locale on one row with ~44px slack. */
@media (min-width: 1081px) {
  html[data-site-template="citadel"] header[role="banner"] {
    padding-inline: max(clamp(1rem, 2.2vw, 2.4rem), calc(50% - 820px));
  }
  html[data-site-template="citadel"] header[role="banner"] nav {
    gap: clamp(0.2rem, 0.42vw, 0.5rem);
  }
}

/* ---------------------------------------------------------- prose measure */
/* With one 1440px shell, body copy in the single-column panels was running to
   1336px — 167 characters per line on /rates and /best-mu-online-server, more
   than double a comfortable measure. Headings, tables and media keep the full
   panel width; only running text is capped. Checked across the site: none of
   the matched paragraphs are centre-aligned, so capping cannot orphan a
   centred block off to the left. */
html[data-site-template="citadel"]
  :is(
    .white-box,
    .info-block,
    .news-detail,
    .guide-article-main,
    .rates-page,
    .faq-item
  )
  :is(p, ul, ol) {
  max-width: 78ch;
}
html[data-site-template="citadel"] :is(.section-intro, .page-subtitle) {
  max-width: 78ch;
}
/* The homepage class-overview sections put running copy straight into
   <article>, outside the panel selectors above — 25 blocks at up to 171ch. */
html[data-site-template="citadel"] main article > :is(p, ul, ol) {
  max-width: 78ch;
}

/* ------------------------------------------------------ shell, enforced */
/* Page stylesheets pin their own narrower shells with compound selectors —
   guides.css uses `section.container.media-page.guides-page {max-width:1240px}`
   at (0,3,1), which outranks `html[data-site-template] .container` at (0,2,1)
   and left /guides sitting 100px inside every other page. Repeating the
   template attribute lifts this to (0,3,1) as well; citadel.css is emitted
   after $pageStyles in includes/header.php, so the tie resolves here. This is
   the one width that must win globally — prefer this over !important. */
html[data-site-template="citadel"][data-site-template="citadel"] .container {
  max-width: var(--shell);
}
/* .class-overview carries 2.1rem of side padding where every other .container
   carries 1.2rem, which pushed the homepage class copy 15px right of the strip
   above it. Vertical padding is left alone. */
html[data-site-template="citadel"] .class-overview.container {
  padding-inline: var(--shell-gutter);
}
/* The footer's own 1.25rem side padding was shrinking the box that
   .citadel-footer centres itself in, so the footer columns landed ~19px inside
   the page column. The inner grid owns the gutter now. */
html[data-site-template="citadel"] footer {
  padding-inline: 0 !important;
}
/* Last two uncapped intro blocks on the homepage (115ch and 103ch). */
html[data-site-template="citadel"] .news-feature__excerpt,
html[data-site-template="citadel"] .home-records-head > p {
  max-width: 78ch;
}

/* ----------------------------------------------- page shells outside .container */
/* A handful of pages wrap their content in a bespoke element instead of
   .container, each with its own width: .classes-grid and .class-main-container
   sat at 1240px, .news-more at 1030px, and the /classes and /news mastheads ran
   edge-to-edge at full viewport width. They join the shell here.
   (/contact's 700px form and /login's 600px card are intentionally narrow and
   centred — those are left alone.) */
html[data-site-template="citadel"]
  main
  > :is(.classes-grid, .class-main-container, .news-more) {
  /* width:auto (not a percentage) so this composes with either kind of parent:
     it fills a full-bleed <main> and is reined in by max-width, or it simply
     fills a <main> that is already the shell — see the .container case below. */
  width: auto;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-gutter);
  box-sizing: border-box;
}
/* The masthead is a card, so its border — not its padding box — is what has to
   line up with the cards below it. */
html[data-site-template="citadel"] main > .white-box.page-header-box {
  width: auto;
  max-width: calc(var(--shell) - 2 * var(--shell-gutter));
  margin-inline: auto;
}
/* /news puts the shell on <main> itself (class="container news-archive"), so
   its children must not apply a second one — that was nesting 1440 inside 1440
   and landing the masthead 68px in from the page column. */
html[data-site-template="citadel"]
  main.container
  > :is(
    .classes-grid,
    .class-main-container,
    .news-more,
    .white-box.page-header-box
  ) {
  max-width: none;
  padding-inline: 0;
  /* This <main> is a column flexbox. `margin-inline: auto` from the rules above
     cancels cross-axis stretch there, which collapsed these bands to their
     content width and centred them ~210px in. Reset both. */
  margin-inline: 0;
  width: 100%;
}

/* --------------------------------------------------- remaining contrast gaps */
/* Swept every non-transparent text node on /, /guides and /rates for sub-4.5:1
   pairs against its resolved backdrop. Two survived the pass above. */

/* "Event schedule →" inherited the brand crimson (#b81720) straight onto the
   near-black card: 3.06:1. Every other in-card link in this skin is gold. */
html[data-site-template="citadel"] .home-record-link {
  color: #eac069 !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-site-template="citadel"] .home-record-link:hover {
    color: #ffdc95 !important;
  }
}
/* Footer disclaimer at 12.6px and 3.72:1 — the smallest type on the site was
   also the faintest. */
html[data-site-template="citadel"] .citadel-footer__legal p {
  color: #9d928a !important;
}
/* "(Permanent)" realm tag rendered in brand crimson on the near-black heading
   card — 3.06:1 at 18px. Same crimson-on-dark trap as .home-record-link. */
html[data-site-template="citadel"] .ranking-title__realm {
  color: #e8c07a !important;
  background: rgba(226, 178, 92, 0.08) !important;
}

/* ==========================================================================
   OBSIDIAN CITADEL — LUMEN PASS (2026-08-28)

   Appended, same discipline as the Ascension pass above: later-in-file wins
   the equal-specificity ties, and anything the earlier passes pin with
   !important is re-pinned here or it would be silently inert.

   What this pass changes (owner feedback, 2026-08-28)
     1. Less dark. The page ran on a #070609 void; every surface lifts ~2
        steps into a charcoal-plum range so cards, tables and the footer read
        as material instead of holes. Deliberate photo scrims are untouched.
     2. Brighter gold. The struck-metal gradients kept muddy floors
        (#cf9a41 / #8e571b / #965a1d); floors rise so titles stay gold, not
        brown. Section titles and header nav also get a size lift.
     3. One hero, one logo. The wordmark loses the sweeping white sheen band
        and the duplicate .logo treatment; the key art loses the orphaned
        rune-gem and flare ornaments that were standing in for a WebGL portal
        the art (an alpha-less webp) can never reveal.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */
html[data-site-template="citadel"] {
  --page-bg: #100d15;
  --surface-0: #1a1620;
  --surface-1: #151119;
  --surface-2: #211b28;
  --surface-soft: #171219;
  --text-strong: #fff7e6;
  --text: #e9e1d6;
  --text-muted: #bcb1a5;
  --accent: #f8d996;
  --accent-2: #d4b87c;
  --gold: #f0c463;
  --gold-tone: #f0c463;
  --border: rgba(228, 185, 99, 0.28);
  --border-2: rgba(240, 199, 112, 0.46);
  --border-light: rgba(228, 185, 99, 0.28);
  --glass: rgba(24, 19, 29, 0.85);
  --glass-2: rgba(30, 24, 36, 0.94);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.28);
  --shadow-md:
    0 20px 50px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 238, 199, 0.05);
  --shadow-lg: 0 30px 78px rgba(0, 0, 0, 0.52);
  --ranking-primary: #f5d284;
  --ranking-primary-light: #ffe9b3;
  --ranking-primary-dark: #d3a854;
  --ranking-box-bg: #1a1620;
  --ranking-box-border: rgba(228, 185, 99, 0.28);
  --ranking-tab-bg: linear-gradient(180deg, #241d2b, #161119);
  --ranking-table-header-bg: #171219;
  --ranking-table-header-color: #f5d284;
  --ranking-badge-bg: #292130;
  background: #100d15;

  /* Gold leaf, floors raised: #cf9a41 -> #deae59 and the face mid
     #9f7429 -> #b98e42. Same struck-metal shape, no brown band. */
  --leaf-gold: linear-gradient(
    178deg,
    #fffdf4 0%,
    #ffeec4 12%,
    #f9da92 30%,
    #eec26f 46%,
    #deae59 55%,
    #f2cf83 68%,
    #ffedbf 84%,
    #fffbee 100%
  );
  --face-gold: linear-gradient(
    180deg,
    #fceec4 0%,
    #e8c273 30%,
    #b98e42 58%,
    #d5a952 79%,
    #f7e3ad 100%
  );

  /* Component-skin panel tokens (consumed via var() by the big !important
     card/table rules above — redefining them here brightens all of those
     without repeating a single !important). */
  --panel-bg: linear-gradient(
    180deg,
    rgba(38, 31, 44, 0.97),
    rgba(23, 18, 28, 0.98)
  );
  --panel-bg-soft: linear-gradient(
    180deg,
    rgba(43, 35, 49, 0.94),
    rgba(27, 21, 32, 0.96)
  );
  --panel-border: rgba(235, 192, 104, 0.3);
  --panel-border-strong: rgba(242, 201, 114, 0.5);
  --control-bg: #171220;
  --control-border: rgba(233, 190, 100, 0.36);
}

html[data-site-template="citadel"] body {
  background:
    radial-gradient(
      1000px 700px at 10% 8%,
      rgba(146, 24, 38, 0.16),
      transparent 62%
    ),
    radial-gradient(
      900px 620px at 92% 22%,
      rgba(132, 56, 200, 0.14),
      transparent 60%
    ),
    linear-gradient(180deg, #161221 0, #100d15 38%, #131017 100%);
  background-attachment: fixed;
  scrollbar-color: #8a6531 #100d15;
}
html[data-site-template="citadel"] body::before {
  opacity: 0.2;
}
html[data-site-template="citadel"] ::-webkit-scrollbar {
  background: #100d15;
}
html[data-site-template="citadel"] ::-webkit-scrollbar-thumb {
  border-color: #100d15;
  background: linear-gradient(#9a7136, #5d3d22);
}

/* ----------------------------------------------------------------- header */
html[data-site-template="citadel"] header[role="banner"] {
  background: linear-gradient(
    180deg,
    rgba(27, 21, 32, 0.97),
    rgba(17, 13, 21, 0.95)
  ) !important;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(240, 196, 108, 0.3) !important;
}
/* Three stacked gold strips under a 72px bar was one too many: keep the
   hairline and the crimson-gold rule, drop the blurred underglow. */
html[data-site-template="citadel"] header[role="banner"]::after {
  opacity: 0.3;
}
/* Nav lift: ~16px at 1920px, tapering to the measured-safe ~14.1px at the
   1701px one-row floor; the 0.82rem clamp floor rules the centred two-row
   band below that. Slightly brighter resting color. */
html[data-site-template="citadel"]
  header[role="banner"]
  nav
  a:not([class*="btn"]) {
  padding: 0.66rem 0.6rem;
  color: #ded3c6;
  font-size: clamp(0.82rem, 0.42vw + 0.55rem, 0.95rem);
  letter-spacing: 0.045em;
}
html[data-site-template="citadel"] .account-controls a[class*="btn"] {
  font-size: 0.84rem;
}
html[data-site-template="citadel"] .btn-login,
html[data-site-template="citadel"] .btn-account {
  --btn-bg: linear-gradient(180deg, #2b232f, #171219);
  --btn-bg-hover: linear-gradient(180deg, #3a2f3e, #211a26);
  --btn-fg: #f0dfc0;
}
html[data-site-template="citadel"] .lang-switcher select,
html[data-site-template="citadel"] .template-switcher {
  background-color: #16121c;
}
html[data-site-template="citadel"] .lang-switcher select {
  color: #eddcbc;
}

/* One logo treatment instead of two half-applied ones: leaf gold, a crisp
   rim, no 13px halo fighting the gem's violet glow. */
html[data-site-template="citadel"] .logo {
  font-size: clamp(1.6rem, 1.8vw, 2.1rem);
  letter-spacing: 0.03em;
  background: var(--leaf-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(43, 18, 6, 0.9))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
html[data-site-template="citadel"] .logo::before {
  border-color: #f2cb79;
  box-shadow: 0 0 10px rgba(171, 72, 255, 0.38);
}

/* ------------------------------------------------------------------- hero */
html[data-site-template="citadel"] .rift-hero {
  background:
    linear-gradient(
      90deg,
      #0d0a12 0%,
      rgba(14, 11, 19, 0.97) 39%,
      rgba(18, 12, 22, 0.88) 68%,
      #0f0c14 100%
    ),
    radial-gradient(
      ellipse 54% 82% at 78% 45%,
      rgba(122, 40, 164, 0.26),
      transparent 70%
    ),
    radial-gradient(
      ellipse 44% 68% at 70% 30%,
      rgba(186, 54, 38, 0.19),
      transparent 72%
    ),
    linear-gradient(180deg, #131019, #0d0a12 96%);
}
/* The bottom fade must land on the NEW page background or it prints a dark
   band across the strip that overlaps it. */
html[data-site-template="citadel"] .rift-hero::after {
  background:
    linear-gradient(180deg, transparent, #100d15 83%),
    linear-gradient(
        90deg,
        transparent 7%,
        rgba(238, 192, 96, 0.55) 50%,
        transparent 93%
      )
      bottom / 100% 1px no-repeat;
}
html[data-site-template="citadel"] .rift-hero__copy::before {
  background: radial-gradient(
    ellipse at 35% 48%,
    rgba(10, 8, 14, 0.84),
    rgba(10, 8, 14, 0.4) 52%,
    transparent 76%
  );
}
/* The wordmark: solid leaf gold, no sweeping white sheen layer. The sheen
   was the "stacked glow" reading as a glitch over the portal art. */
html[data-site-template="citadel"] .rift-hero__title {
  background: var(--leaf-gold);
  background-size: 100% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: none;
  filter: drop-shadow(0 3px 0 #2c1007)
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}
html[data-site-template="citadel"] .rift-hero__lead {
  color: #e2d7c9;
}
/* Orphaned portal ornaments: a glowing gem and a pulsing flare floating on
   top of the key art, accents for a rotating WebGL rift that hero-citadel
   .webp (opaque, no alpha channel) can never reveal. The single ambient
   glow behind the art (.rift-portal::before) carries the mood alone. */
html[data-site-template="citadel"] .citadel-hero-art__rune,
html[data-site-template="citadel"] .citadel-hero-art__flare {
  display: none;
}
html[data-site-template="citadel"] .citadel-hero-proof span {
  color: #c0b5a8;
}

/* ---------------------------------------------------- strip + home panels */
html[data-site-template="citadel"] .rift-strip {
  border: 1px solid rgba(233, 190, 102, 0.34) !important;
  background:
    linear-gradient(
        90deg,
        transparent,
        rgba(248, 217, 150, 0.55) 50%,
        transparent
      )
      top center / 100% 1px no-repeat,
    radial-gradient(
      620px 130px at 50% 0,
      rgba(139, 45, 172, 0.18),
      transparent 74%
    ),
    linear-gradient(180deg, #241c2e 0%, #151019 100%) !important;
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 240, 202, 0.12) !important;
}
html[data-site-template="citadel"] .rift-stat__label {
  color: #c6bbae;
}
html[data-site-template="citadel"] .home-sec-kicker {
  color: #dda757;
  font-size: 0.78rem;
}
html[data-site-template="citadel"] .home-sec-head h2 {
  font-size: clamp(1.45rem, 1.6vw, 1.9rem);
}
html[data-site-template="citadel"] .side-widget__title {
  font-size: 1.22rem;
}
html[data-site-template="citadel"] .home-records-kicker {
  color: #e8b45e;
}
html[data-site-template="citadel"] .news-feature {
  background:
    radial-gradient(
      500px 200px at 100% 0,
      rgba(140, 52, 198, 0.16),
      transparent 68%
    ),
    linear-gradient(145deg, #251c2b, #151019);
}
html[data-site-template="citadel"] .news-row,
html[data-site-template="citadel"] .side-rank-list li,
html[data-site-template="citadel"] .side-event {
  border-color: rgba(230, 186, 96, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 240, 207, 0.03), transparent), #171220;
}
html[data-site-template="citadel"] .news-row:hover,
html[data-site-template="citadel"] .side-rank-list li:hover {
  background-color: #211a2b;
}
html[data-site-template="citadel"] .class-overview {
  background:
    radial-gradient(
      700px 300px at 50% 0,
      rgba(123, 46, 163, 0.12),
      transparent 72%
    ),
    linear-gradient(180deg, #1d1724, #131017);
}
html[data-site-template="citadel"] .class-icon {
  background: #171220 !important;
}

/* ------------------------------------------------------- forged surfaces */
/* Union of the two earlier card lists, lifted ~2 steps with the bottom
   crush halved. Repeats !important because both earlier rules pin these.
   The attribute is doubled on purpose: the Ascension forged rule carries
   `.muor .nav-card` INSIDE its :is(), promoting it to (0,3,1) — this rule
   must match that specificity to win the tie by file order. */
html[data-site-template="citadel"][data-site-template="citadel"]
  :is(
    .white-box,
    .news-card,
    .news-feature,
    .news-item,
    .news-archive-item,
    .news-archive-shell,
    .news-more,
    .class-panel,
    .side-widget,
    .home-news,
    .home-record-card,
    .home-boss-card,
    .home-records-section,
    .hero-card,
    .info-block,
    .media-card,
    .faq-item,
    .servers-card,
    .guide-card,
    .account-card,
    .account-panel,
    .ranking-main-container
  ),
html[data-site-template="citadel"] .muor .nav-card,
html[data-site-template="citadel"] .muor .realm-card,
html[data-site-template="citadel"] .muor .detail-hero,
html[data-site-template="citadel"] .muor .hero-lite,
html[data-site-template="citadel"] .muor .stat-grid > div {
  border: 1px solid rgba(233, 190, 102, 0.3) !important;
  background:
    linear-gradient(
        90deg,
        transparent 6%,
        rgba(248, 217, 150, 0.5) 50%,
        transparent 94%
      )
      top center / 100% 1px no-repeat,
    linear-gradient(
      180deg,
      rgba(41, 33, 47, 0.97) 0%,
      rgba(28, 22, 33, 0.98) 44%,
      rgba(19, 15, 23, 0.99) 100%
    ) !important;
  color: var(--text) !important;
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.42),
    0 2px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 240, 202, 0.1),
    inset 0 -28px 44px rgba(0, 0, 0, 0.18) !important;
}
html[data-site-template="citadel"] section.container {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-site-template="citadel"] .hero-card {
  background: linear-gradient(
    180deg,
    rgba(38, 30, 44, 0.92),
    rgba(21, 16, 26, 0.94)
  ) !important;
}

/* ------------------------------------------------------------ typography */
html[data-site-template="citadel"] main :where(h2, h3, h4) {
  color: #f2d38c;
}
html[data-site-template="citadel"] :is(h3, h4, h5) {
  color: #f2d38c;
}
html[data-site-template="citadel"] .class-panel h3 {
  color: #f4d590;
}
html[data-site-template="citadel"] main :is(h1, h2),
html[data-site-template="citadel"] .page-header-box .page-title,
html[data-site-template="citadel"] .hero-card h1 {
  filter: drop-shadow(0 1px 0 rgba(26, 11, 3, 0.9))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.42));
}
html[data-site-template="citadel"] main :where(strong, b) {
  color: #f4e5c4;
}
html[data-site-template="citadel"]
  :where(.text-muted, .hint, .section-intro, .page-subtitle, .guide-updated) {
  color: var(--text-muted);
}

/* --------------------------------------------------------------- controls */
html[data-site-template="citadel"]
  :where(
    .btn,
    .btn-primary,
    .btn--primary,
    .news-btn,
    .filter-btn,
    .pagination-list a,
    .ranking-tab,
    .muor .realm-card .cta,
    .hero-download-btn
  ) {
  --btn-bg: linear-gradient(180deg, #352730 0%, #221822 52%, #171016 100%);
  --btn-bg-hover: linear-gradient(
    180deg,
    #46343d 0%,
    #2d2029 58%,
    #1c141b 100%
  );
  --btn-border: rgba(236, 192, 100, 0.4);
  --btn-fg: #f5e3bd;
}
html[data-site-template="citadel"]
  :where(
    .button,
    .action-btn,
    .buy-gp-btn,
    .back-btn,
    .class-link-btn,
    .attr-btn,
    .event-filter-btn,
    .ih-chip,
    .community-action,
    .realm-chip,
    .status-pill,
    .meta-chip,
    .rate-pill
  ):not(.is-active):not(.active) {
  background: linear-gradient(180deg, #382a34, #1c141d) !important;
}
html[data-site-template="citadel"]
  .account-main
  :where(.action-btn, .reward-dashboard-action, .buy-gp-btn) {
  background: linear-gradient(180deg, #382a34, #1c141d) !important;
}
html[data-site-template="citadel"]
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(
        [type="file"]
      ):not([type="submit"]):not([type="button"]):not([type="reset"]):not(
        [type="image"]
      ),
    select,
    textarea,
    .input,
    .filter-input,
    .filter-select
  ) {
  border-color: rgba(230, 186, 96, 0.32) !important;
  background: #16111b !important;
  color: #f2e9db !important;
  box-shadow: inset 0 2px 9px rgba(0, 0, 0, 0.34);
}
html[data-site-template="citadel"] select:not([multiple]) {
  background-color: #16111b !important;
}

/* ---------------------------------------------------------------- tables */
/* :is() (not :where) on purpose throughout this table block — the Ascension
   pass styles th via :is() at (0,2,2), so a :where() override here would be
   silently outranked despite coming later. */
html[data-site-template="citadel"]
  :is(.sys-table, .table-style, .ranking-table-wrap, .muor .table-wrap) {
  background: #161119 !important;
}
html[data-site-template="citadel"]
  :is(
    .sys-table th,
    .table-style th,
    .ranking-table th,
    .muor .dmn-rankings-table thead th
  ) {
  background: linear-gradient(180deg, #2e2029, #191219) !important;
}
html[data-site-template="citadel"]
  :is(
    .sys-table td,
    .table-style td,
    .ranking-table td,
    .muor .dmn-rankings-table tbody td
  ) {
  background: #191420 !important;
  border-bottom-color: rgba(230, 185, 95, 0.2) !important;
}
html[data-site-template="citadel"]
  :is(
    .sys-table tbody tr:nth-child(even) td,
    .ranking-table tbody tr:nth-child(even) td,
    .muor .dmn-rankings-table tbody tr:nth-child(even) td
  ) {
  background: #1e1826 !important;
}
html[data-site-template="citadel"] .ranking-tabs-bar {
  background: linear-gradient(180deg, #241d2b, #151019) !important;
}
html[data-site-template="citadel"] .ranking-table .rank-badge.gold,
html[data-site-template="citadel"] .side-rank-badge--1 {
  background: linear-gradient(180deg, #ffe9b3, #cf9040) !important;
}
html[data-site-template="citadel"]
  :is(
    .event-registration-table-wrapper,
    .rates-table-wrap,
    .gb-tablewrap,
    .char-table-wrap,
    .guild-member-table,
    .ranking-table-wrap,
    .muor-table-wrap,
    .ih-bag-tablewrap,
    .table-scroll,
    .responsive-table,
    .muinvx-table-wrap
  ) {
  border-color: rgba(232, 188, 98, 0.28) !important;
  background: #161119 !important;
}
html[data-site-template="citadel"]
  :is(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  ) {
  background: #171220 !important;
  border-color: rgba(232, 188, 98, 0.24) !important;
}
html[data-site-template="citadel"]
  :is(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  )
  th {
  background: linear-gradient(180deg, #2e2029, #191219) !important;
}
html[data-site-template="citadel"]
  :is(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  )
  td {
  background: rgba(27, 21, 33, 0.96) !important;
  border-color: rgba(230, 185, 95, 0.2) !important;
}
html[data-site-template="citadel"]
  :is(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  )
  tbody
  tr:nth-child(even)
  td {
  background: #211a29 !important;
}

/* --------------------------------------------- dim-text legibility lifts */
html[data-site-template="citadel"]
  :is(.kpi__label, .kpi__sub, .skill-meta-pill, .item-row-meta) {
  color: #c4b9ac !important;
}
html[data-site-template="citadel"] :is(.faq-a, .faq-item > p) {
  color: #d4c9bd !important;
}
html[data-site-template="citadel"]
  :where(.breadcrumb-nav, .account-breadcrumb) {
  color: #b3a89f;
}
html[data-site-template="citadel"]
  :where(.breadcrumb li, .breadcrumb-nav li) {
  color: #a89d94;
}
html[data-site-template="citadel"]
  :where(.guides-featured-kicker, .news-meta, .guide-updated) {
  color: #d3a75e !important;
}
html[data-site-template="citadel"]
  :where(.guides-featured-desc, .news-excerpt) {
  color: #c0b5a9 !important;
}
html[data-site-template="citadel"]
  :where(.muor-stat-label, .ih-stat-label, .rate-label) {
  color: #b9ada2 !important;
}
html[data-site-template="citadel"]
  :where(.no-results, .empty-state, .no-results-wrapper) {
  color: #b9ada2 !important;
  background: rgba(30, 24, 37, 0.68);
}
html[data-site-template="citadel"]
  :where(.next-event-label, .event-meta-label, .event-overview-intro) {
  color: #bcb0a5 !important;
}
html[data-site-template="citadel"] .points-card :where(.point-label, small) {
  color: #bcb0a5 !important;
}
html[data-site-template="citadel"] :where(.form-links, .register-resend) {
  border-top-color: rgba(230, 185, 95, 0.26) !important;
  color: #bbafa5 !important;
}
html[data-site-template="citadel"]
  :where(
    .register-intro,
    .login-intro,
    .auth-intro,
    .register-platform-note,
    .register-resend__note
  ) {
  color: #c2b7ac !important;
}
html[data-site-template="citadel"]
  :where(.terms-content, .privacy-content, .refund-page, .guide-article) {
  color: #ddd3c7 !important;
}
html[data-site-template="citadel"]
  :where(.class-pill, .source-badge, .item-badge, .skill-meta-item) {
  background: rgba(232, 186, 92, 0.14) !important;
}
html[data-site-template="citadel"]
  :where(
    .ih-status,
    .rates-legend,
    .download-note,
    .rift-trust,
    .rift-integrity
  ) {
  background: rgba(30, 24, 37, 0.72) !important;
  color: #c2b7ab !important;
}
html[data-site-template="citadel"]
  :where(.realm-switcher, .ranking-filter-bar, .filter-row) {
  border-color: rgba(232, 188, 98, 0.28) !important;
  background: rgba(26, 21, 32, 0.8) !important;
}
html[data-site-template="citadel"]
  :where(.alert, .form-alert, .notice, .callout, .step-callout, .bonus-box) {
  background: linear-gradient(
    180deg,
    rgba(42, 33, 47, 0.96),
    rgba(28, 22, 34, 0.96)
  ) !important;
}
html[data-site-template="citadel"] :where(.ss-step, .install-step) {
  background: #191420 !important;
}

/* ------------------------------------------------ per-page surface lifts */
html[data-site-template="citadel"]
  :where(.register-section, .register-side__panel) {
  border-color: rgba(236, 192, 102, 0.32) !important;
  background:
    linear-gradient(145deg, rgba(255, 236, 190, 0.04), transparent 32%),
    linear-gradient(180deg, #251d2b, #151019) !important;
}
html[data-site-template="citadel"] .guides-featured-card--primary {
  background: linear-gradient(145deg, #322232, #171119) !important;
}
html[data-site-template="citadel"] .discord-hero {
  background: linear-gradient(135deg, #322038, #1a141f) !important;
}
html[data-site-template="citadel"] .community-icon {
  background: linear-gradient(145deg, #382438, #191320) !important;
}
html[data-site-template="citadel"]
  :where(
    .class-card,
    .guild-hero-card,
    .character-details,
    .char-header,
    .guild-header
  ) {
  background: linear-gradient(180deg, #241d2b, #151019) !important;
}
html[data-site-template="citadel"] .class-speech-bubble {
  background: #1c1622 !important;
}
html[data-site-template="citadel"]
  :where(.classes-archive .class-card__body, .classes-grid .class-card__body) {
  background: linear-gradient(180deg, #211a27, #151019) !important;
  border-top-color: rgba(232, 188, 98, 0.28);
}
html[data-site-template="citadel"] .media-thumb {
  filter: saturate(0.96) contrast(1.04) brightness(0.97);
}
html[data-site-template="citadel"] .media-title {
  background: #191420 !important;
  border-top-color: rgba(232, 188, 98, 0.26) !important;
}
html[data-site-template="citadel"]
  :where(
    dialog.modal,
    .gr-modal__dialog,
    #gateway-confirm,
    .media-lightbox-content
  ) {
  background: linear-gradient(180deg, #241d2b, #141018) !important;
}
html[data-site-template="citadel"] .home-records-section,
html[data-site-template="citadel"] .home-record-card,
html[data-site-template="citadel"] .home-boss-card {
  border-color: rgba(233, 190, 102, 0.3) !important;
}

/* ---------------------------------------------------------------- account */
html[data-site-template="citadel"] .account-main {
  --theme-ink: #f9eed8;
  --theme-ink-soft: #e2d8cb;
  --theme-muted: #b6aba1;
  --theme-surface-strong: #1c1723;
  --theme-surface-subtle: #171219;
  --theme-border: rgba(230, 186, 96, 0.28);
  --theme-border-strong: rgba(238, 196, 106, 0.46);
  --theme-gold: #efc46a;
  --theme-gold-strong: #dda049;
}
html[data-site-template="citadel"]
  .account-main
  :where(
    .account-shell,
    .account-section,
    .account-card,
    .account-panel,
    .sp-box,
    .sp-panel,
    .buygp-card,
    .buygp-panel,
    .reward-card,
    .reward-vip-card,
    .white-box
  ) {
  border-color: rgba(230, 186, 96, 0.28) !important;
  background: linear-gradient(180deg, #241d2b, #171219) !important;
  color: #e5dbce !important;
}
html[data-site-template="citadel"] .account-main .account-section {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-site-template="citadel"]
  .account-main
  :where(
    .account-titlebar,
    .buygp-hero,
    .sp-hero,
    .sp-head,
    .reward-section-head--shop,
    .account-titlebar--vip-shop
  ) {
  background:
    radial-gradient(
      440px 190px at 100% 0,
      rgba(140, 50, 192, 0.2),
      transparent 70%
    ),
    linear-gradient(135deg, #2e1e28, #151019 75%) !important;
}

/* ----------------------------------------------------------------- footer */
html[data-site-template="citadel"] footer {
  background: linear-gradient(180deg, #171219, #0f0c12) !important;
  color: #b0a499 !important;
}
html[data-site-template="citadel"] .citadel-footer__brand p {
  color: #b0a499 !important;
}
html[data-site-template="citadel"] .citadel-footer__nav a {
  color: #c1b6aa;
}
html[data-site-template="citadel"] .citadel-footer__legal {
  color: #a2978e;
  border-top-color: rgba(230, 185, 95, 0.24);
}
html[data-site-template="citadel"] .citadel-footer__legal p {
  color: #9a9088 !important;
}
html[data-site-template="citadel"] .citadel-footer__logo {
  background: var(--leaf-gold);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  html[data-site-template="citadel"] .mobile-toggle {
    background: #191420;
  }
  html[data-site-template="citadel"] header[role="banner"] nav {
    background: #16111b;
    border-color: rgba(231, 187, 97, 0.28);
  }
}
@media (max-width: 768px) {
  html[data-site-template="citadel"] .mobile-toggle {
    background: #191420;
  }
  html[data-site-template="citadel"] header[role="banner"] nav {
    background: #16111b;
    border-color: rgba(231, 187, 97, 0.28);
  }
}

/* The Classic skin's ranking-table header keeps its literal navy gradient at
   (0,4,2) + !important (style.css "ranking page: table" block) — the only
   part of that table citadel tokens don't already recolor. Out-rank it, and
   swap its crimson row links for the skin's gold. */
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-table
  thead
  th {
  background: linear-gradient(180deg, #2e2029, #191219) !important;
  color: #f5d284 !important;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-table
  a {
  color: #eac069 !important;
}

/* ---------------------------------------------------- header fit, re-tuned */
/* This pass lifts the nav from 14.08px to 15.2px, which spends far more than
   the 44px of slack the 1640px one-row cap was sized for, so both numbers
   move together. Using the measured locale table on the 2026-08-27 two-row
   block above (worst case: pl at 1596px):

     1596 x (15.2 / 14.08) + 16px of added link padding = 1739px of content.

   That is a deliberate over-estimate: it scales the WHOLE header by the nav
   ratio, while the logo, account buttons and the two pickers do not grow.

   So the brand+controls / nav grid now rides to 1860px rather than 1700px,
   and the one-row cap opens from 1640px to 1800px of content room. At 1861px
   the viewport still yields 1784px (45px slack); at 1920px and wider it
   yields the full 1800px (61px slack). Narrower than 1081px is the
   hamburger, where nav stacks vertically and width stops mattering. */
@media (max-width: 1860px) and (min-width: 1081px) {
  html[data-site-template="citadel"] header[role="banner"] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand controls" "nav nav";
    row-gap: 0.45rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  html[data-site-template="citadel"] .header-left {
    grid-area: brand;
  }
  html[data-site-template="citadel"] header[role="banner"] nav {
    grid-area: nav;
    justify-content: center;
  }
  html[data-site-template="citadel"] .header-right {
    grid-area: controls;
    justify-content: flex-end;
  }
  html[data-site-template="citadel"] .home-cols__side {
    top: 126px;
  }
}
@media (min-width: 1081px) {
  html[data-site-template="citadel"] header[role="banner"] {
    padding-inline: max(clamp(1rem, 2.2vw, 2.4rem), calc(50% - 900px));
  }
}

/* ==========================================================================
   OBSIDIAN CITADEL — LUMEN II (2026-08-28, second round of owner feedback)

   "Still not good - hard to read." Round one lifted the void; this round
   fixes the two things that still read as mud on the events screenshot:

   1. Display gold. The struck-metal gradient kept a medium-dark band through
      the middle of every large title, and the base skin ALSO paints a hard
      umber text-shadow (0 2px 0 #2b130a) behind the clipped glyphs — at
      masthead sizes the two combine into engraved dark bronze. The leaf
      ramp is now bright end to end and the hard shadows are gone; depth
      comes from a soft drop-shadow only.
   2. Ambient light. Every surface takes one more visible step up, and the
      masthead scrim thins so the inner-masthead art actually shows.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */
html[data-site-template="citadel"] {
  --page-bg: #16121e;
  --surface-0: #231d2b;
  --surface-1: #1c1723;
  --surface-2: #2a2334;
  --surface-soft: #1d1824;
  --text-strong: #fff9ec;
  --text: #efe8dd;
  --text-muted: #c6bbaf;
  --border: rgba(230, 187, 101, 0.34);
  --border-2: rgba(242, 202, 116, 0.52);
  --border-light: rgba(230, 187, 101, 0.34);
  --glass: rgba(30, 24, 37, 0.86);
  --glass-2: rgba(36, 29, 44, 0.94);
  --ranking-box-bg: #231d2b;
  --ranking-box-border: rgba(230, 187, 101, 0.34);
  --ranking-tab-bg: linear-gradient(180deg, #2c2436, #1c1723);
  --ranking-table-header-bg: #1d1824;
  --ranking-badge-bg: #322a3c;
  background: #16121e;

  /* Bright end to end: the darkest stop is now #f3cd7c, so large titles can
     no longer bottom out into bronze. Sheen comes from stop variation. */
  --leaf-gold: linear-gradient(
    178deg,
    #fffef7 0%,
    #ffeebd 16%,
    #fbdf9b 34%,
    #f3cd7c 52%,
    #f8da90 66%,
    #ffefc6 84%,
    #fffdf2 100%
  );
  --face-gold: linear-gradient(
    180deg,
    #fdf0c8 0%,
    #edc97c 30%,
    #cfa658 58%,
    #e3bc66 79%,
    #f9e6b2 100%
  );

  --panel-bg: linear-gradient(
    180deg,
    rgba(48, 39, 55, 0.97),
    rgba(30, 24, 36, 0.98)
  );
  --panel-bg-soft: linear-gradient(
    180deg,
    rgba(52, 43, 60, 0.94),
    rgba(34, 27, 41, 0.96)
  );
  --panel-border: rgba(238, 196, 110, 0.36);
  --panel-border-strong: rgba(244, 204, 120, 0.55);
  --control-bg: #1d1826;
  --control-border: rgba(236, 193, 105, 0.42);
}

html[data-site-template="citadel"] body {
  background:
    radial-gradient(
      1000px 700px at 10% 8%,
      rgba(152, 28, 43, 0.18),
      transparent 62%
    ),
    radial-gradient(
      900px 620px at 92% 22%,
      rgba(138, 62, 206, 0.16),
      transparent 60%
    ),
    linear-gradient(180deg, #1c1628 0, #16121e 38%, #191420 100%);
  background-attachment: fixed;
  scrollbar-color: #96703a #16121e;
}
html[data-site-template="citadel"] ::-webkit-scrollbar {
  background: #16121e;
}
html[data-site-template="citadel"] ::-webkit-scrollbar-thumb {
  border-color: #16121e;
  background: linear-gradient(#a67c3f, #6a4728);
}

/* ------------------------------------------------------- display headings */
/* The base skin's hard umber offsets are what made clipped gold read as
   engraving. Kill them everywhere a gradient fill applies. */
html[data-site-template="citadel"]
  :where(
    .page-title,
    section.container > h2:first-child,
    .home-records-head h2
  ) {
  text-shadow: none;
}
html[data-site-template="citadel"] .home-sec-head h2,
html[data-site-template="citadel"] .side-widget__title {
  text-shadow: none;
}
html[data-site-template="citadel"]
  :where(.register-section h1, .login-section h1) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}
html[data-site-template="citadel"] main :is(h1, h2),
html[data-site-template="citadel"] .page-header-box .page-title,
html[data-site-template="citadel"] .hero-card h1 {
  filter: drop-shadow(0 1px 1px rgba(22, 10, 3, 0.55))
    drop-shadow(0 3px 10px rgba(0, 0, 0, 0.35));
}
html[data-site-template="citadel"] main :where(h2, h3, h4) {
  color: #f5d894;
}
html[data-site-template="citadel"] :is(h3, h4, h5) {
  color: #f5d894;
}
html[data-site-template="citadel"] .home-sec-kicker {
  color: #e5b167;
}
html[data-site-template="citadel"] .rift-hero__title {
  filter: drop-shadow(0 2px 0 #33150a)
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
}

/* -------------------------------------------------------------- mastheads */
/* The 98%-opaque left band buried the artwork; thin the scrim so the photo
   reads while the copy side stays solid enough for text. */
html[data-site-template="citadel"] .page-header-box,
html[data-site-template="citadel"] .ranking-heading-card,
html[data-site-template="citadel"]
  :where(.account-titlebar, .sp-hero, .buygp-hero) {
  border-color: rgba(240, 198, 112, 0.4) !important;
  background:
    linear-gradient(
      90deg,
      rgba(26, 20, 31, 0.95) 0%,
      rgba(26, 20, 31, 0.85) 43%,
      rgba(23, 17, 28, 0.42) 76%,
      rgba(26, 20, 31, 0.62) 100%
    ),
    url("/assets/templates/citadel/inner-masthead-v2.webp") center right / cover
      no-repeat !important;
}

/* -------------------------------------------------------------- hero band */
html[data-site-template="citadel"] .rift-hero {
  background:
    linear-gradient(
      90deg,
      #121017 0%,
      rgba(20, 16, 26, 0.96) 39%,
      rgba(24, 17, 30, 0.86) 68%,
      #14111a 100%
    ),
    radial-gradient(
      ellipse 54% 82% at 78% 45%,
      rgba(130, 46, 174, 0.28),
      transparent 70%
    ),
    radial-gradient(
      ellipse 44% 68% at 70% 30%,
      rgba(194, 60, 42, 0.2),
      transparent 72%
    ),
    linear-gradient(180deg, #181424, #121017 96%);
}
html[data-site-template="citadel"] .rift-hero::after {
  background:
    linear-gradient(180deg, transparent, #16121e 83%),
    linear-gradient(
        90deg,
        transparent 7%,
        rgba(240, 196, 102, 0.55) 50%,
        transparent 93%
      )
      bottom / 100% 1px no-repeat;
}
html[data-site-template="citadel"] .rift-hero__copy::before {
  background: radial-gradient(
    ellipse at 35% 48%,
    rgba(13, 10, 18, 0.8),
    rgba(13, 10, 18, 0.36) 52%,
    transparent 76%
  );
}

/* --------------------------------------------------------------- surfaces */
html[data-site-template="citadel"][data-site-template="citadel"]
  :is(
    .white-box,
    .news-card,
    .news-feature,
    .news-item,
    .news-archive-item,
    .news-archive-shell,
    .news-more,
    .class-panel,
    .side-widget,
    .home-news,
    .home-record-card,
    .home-boss-card,
    .home-records-section,
    .hero-card,
    .info-block,
    .media-card,
    .faq-item,
    .servers-card,
    .guide-card,
    .account-card,
    .account-panel,
    .ranking-main-container
  ),
html[data-site-template="citadel"] .muor .nav-card,
html[data-site-template="citadel"] .muor .realm-card,
html[data-site-template="citadel"] .muor .detail-hero,
html[data-site-template="citadel"] .muor .hero-lite,
html[data-site-template="citadel"] .muor .stat-grid > div {
  border: 1px solid rgba(236, 193, 105, 0.36) !important;
  background:
    linear-gradient(
        90deg,
        transparent 6%,
        rgba(250, 221, 158, 0.55) 50%,
        transparent 94%
      )
      top center / 100% 1px no-repeat,
    linear-gradient(
      180deg,
      rgba(50, 41, 58, 0.97) 0%,
      rgba(36, 29, 43, 0.98) 44%,
      rgba(25, 20, 31, 0.99) 100%
    ) !important;
  color: var(--text) !important;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.38),
    0 2px 0 rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 242, 206, 0.11),
    inset 0 -24px 38px rgba(0, 0, 0, 0.14) !important;
}
html[data-site-template="citadel"] section.container {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-site-template="citadel"] .rift-strip {
  border: 1px solid rgba(238, 196, 110, 0.4) !important;
  background:
    linear-gradient(
        90deg,
        transparent,
        rgba(250, 221, 158, 0.6) 50%,
        transparent
      )
      top center / 100% 1px no-repeat,
    radial-gradient(
      620px 130px at 50% 0,
      rgba(146, 52, 182, 0.2),
      transparent 74%
    ),
    linear-gradient(180deg, #2c2338 0%, #1b1622 100%) !important;
}
html[data-site-template="citadel"] .news-feature {
  background:
    radial-gradient(
      500px 200px at 100% 0,
      rgba(150, 60, 210, 0.18),
      transparent 68%
    ),
    linear-gradient(145deg, #2e2334, #1b1622);
}
html[data-site-template="citadel"] .news-row,
html[data-site-template="citadel"] .side-rank-list li,
html[data-site-template="citadel"] .side-event {
  border-color: rgba(232, 189, 102, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 242, 210, 0.035), transparent), #1d1728;
}
html[data-site-template="citadel"] .news-row:hover,
html[data-site-template="citadel"] .side-rank-list li:hover {
  background-color: #292236;
}
html[data-site-template="citadel"] .class-overview {
  background:
    radial-gradient(
      700px 300px at 50% 0,
      rgba(132, 52, 174, 0.14),
      transparent 72%
    ),
    linear-gradient(180deg, #241d2e, #18141e);
}
html[data-site-template="citadel"] .class-icon {
  background: #1d1826 !important;
}

/* --------------------------------------------------------------- controls */
html[data-site-template="citadel"]
  :where(
    .btn,
    .btn-primary,
    .btn--primary,
    .news-btn,
    .filter-btn,
    .pagination-list a,
    .ranking-tab,
    .muor .realm-card .cta,
    .hero-download-btn
  ) {
  --btn-bg: linear-gradient(180deg, #423440 0%, #2b212a 52%, #1d151c 100%);
  --btn-bg-hover: linear-gradient(
    180deg,
    #534351 0%,
    #372b36 58%,
    #251b23 100%
  );
  --btn-border: rgba(240, 197, 106, 0.46);
  --btn-fg: #f7e7c4;
}
html[data-site-template="citadel"]
  :where(
    .button,
    .action-btn,
    .buy-gp-btn,
    .back-btn,
    .class-link-btn,
    .attr-btn,
    .event-filter-btn,
    .ih-chip,
    .community-action,
    .realm-chip,
    .status-pill,
    .meta-chip,
    .rate-pill
  ):not(.is-active):not(.active) {
  background: linear-gradient(180deg, #443441, #251c26) !important;
}
html[data-site-template="citadel"]
  .account-main
  :where(.action-btn, .reward-dashboard-action, .buy-gp-btn) {
  background: linear-gradient(180deg, #443441, #251c26) !important;
}
html[data-site-template="citadel"]
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(
        [type="file"]
      ):not([type="submit"]):not([type="button"]):not([type="reset"]):not(
        [type="image"]
      ),
    select,
    textarea,
    .input,
    .filter-input,
    .filter-select
  ) {
  border-color: rgba(234, 191, 103, 0.38) !important;
  background: #1c1724 !important;
  color: #f5edde !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}
html[data-site-template="citadel"] select:not([multiple]) {
  background-color: #1c1724 !important;
}

/* ---------------------------------------------------------------- tables */
html[data-site-template="citadel"]
  :is(.sys-table, .table-style, .ranking-table-wrap, .muor .table-wrap) {
  background: #1c1723 !important;
}
html[data-site-template="citadel"]
  :is(
    .sys-table th,
    .table-style th,
    .ranking-table th,
    .muor .dmn-rankings-table thead th
  ) {
  background: linear-gradient(180deg, #3a2c37, #211a24) !important;
}
html[data-site-template="citadel"]
  :is(
    .sys-table td,
    .table-style td,
    .ranking-table td,
    .muor .dmn-rankings-table tbody td
  ) {
  background: #201a29 !important;
  border-bottom-color: rgba(232, 189, 100, 0.24) !important;
}
html[data-site-template="citadel"]
  :is(
    .sys-table tbody tr:nth-child(even) td,
    .ranking-table tbody tr:nth-child(even) td,
    .muor .dmn-rankings-table tbody tr:nth-child(even) td
  ) {
  background: #272031 !important;
}
html[data-site-template="citadel"] .ranking-tabs-bar {
  background: linear-gradient(180deg, #2c2436, #1b1622) !important;
}
html[data-site-template="citadel"]
  :is(
    .event-registration-table-wrapper,
    .rates-table-wrap,
    .gb-tablewrap,
    .char-table-wrap,
    .guild-member-table,
    .ranking-table-wrap,
    .muor-table-wrap,
    .ih-bag-tablewrap,
    .table-scroll,
    .responsive-table,
    .muinvx-table-wrap
  ) {
  border-color: rgba(236, 193, 105, 0.34) !important;
  background: #1c1723 !important;
}
html[data-site-template="citadel"]
  :is(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  ) {
  background: #1d1826 !important;
  border-color: rgba(236, 193, 105, 0.28) !important;
}
html[data-site-template="citadel"]
  :is(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  )
  th {
  background: linear-gradient(180deg, #3a2c37, #211a24) !important;
}
html[data-site-template="citadel"]
  :is(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  )
  td {
  background: rgba(33, 26, 41, 0.96) !important;
  border-color: rgba(232, 189, 100, 0.24) !important;
}
html[data-site-template="citadel"]
  :is(
    .event-registration-table,
    .event-overview-table,
    .rates-table,
    .gb-table,
    .char-table,
    .guild-table,
    #item-table,
    #skill-table,
    .mu-simple-table,
    .mu-mini-command-table,
    .muor-table,
    .guide-article table,
    .account-main table
  )
  tbody
  tr:nth-child(even)
  td {
  background: #282133 !important;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-table
  thead
  th {
  background: linear-gradient(180deg, #3a2c37, #211a24) !important;
}

/* ------------------------------------------------ per-page surface lifts */
html[data-site-template="citadel"]
  :where(.register-section, .register-side__panel) {
  background:
    linear-gradient(145deg, rgba(255, 238, 196, 0.045), transparent 32%),
    linear-gradient(180deg, #2d2434, #1b1622) !important;
}
html[data-site-template="citadel"] .guides-featured-card--primary {
  background: linear-gradient(145deg, #3a2a3a, #1d1723) !important;
}
html[data-site-template="citadel"] .discord-hero {
  background: linear-gradient(135deg, #3a2742, #201925) !important;
}
html[data-site-template="citadel"] .community-icon {
  background: linear-gradient(145deg, #422c42, #1d1726) !important;
}
html[data-site-template="citadel"]
  :where(
    .class-card,
    .guild-hero-card,
    .character-details,
    .char-header,
    .guild-header
  ) {
  background: linear-gradient(180deg, #2c2436, #1b1622) !important;
}
html[data-site-template="citadel"] .class-speech-bubble {
  background: #221b29 !important;
}
html[data-site-template="citadel"]
  :where(.classes-archive .class-card__body, .classes-grid .class-card__body) {
  background: linear-gradient(180deg, #271f30, #1b1622) !important;
}
html[data-site-template="citadel"] .media-title {
  background: #201a29 !important;
}
html[data-site-template="citadel"]
  :where(
    dialog.modal,
    .gr-modal__dialog,
    #gateway-confirm,
    .media-lightbox-content
  ) {
  background: linear-gradient(180deg, #2c2436, #1a1520) !important;
}
html[data-site-template="citadel"] :where(.ss-step, .install-step) {
  background: #201a29 !important;
}
html[data-site-template="citadel"]
  :where(
    .ih-status,
    .rates-legend,
    .download-note,
    .rift-trust,
    .rift-integrity
  ) {
  background: rgba(36, 29, 44, 0.72) !important;
  color: #ccc1b5 !important;
}
html[data-site-template="citadel"]
  :where(.realm-switcher, .ranking-filter-bar, .filter-row) {
  border-color: rgba(236, 193, 105, 0.34) !important;
  background: rgba(31, 25, 38, 0.82) !important;
}
html[data-site-template="citadel"]
  :where(.alert, .form-alert, .notice, .callout, .step-callout, .bonus-box) {
  background: linear-gradient(
    180deg,
    rgba(50, 40, 56, 0.96),
    rgba(34, 27, 41, 0.96)
  ) !important;
}

/* ---------------------------------------------------------------- account */
html[data-site-template="citadel"] .account-main {
  --theme-muted: #beb3a8;
  --theme-surface-strong: #241e2c;
  --theme-surface-subtle: #1d1824;
  --theme-border: rgba(234, 191, 102, 0.32);
}
html[data-site-template="citadel"]
  .account-main
  :where(
    .account-shell,
    .account-section,
    .account-card,
    .account-panel,
    .sp-box,
    .sp-panel,
    .buygp-card,
    .buygp-panel,
    .reward-card,
    .reward-vip-card,
    .white-box
  ) {
  border-color: rgba(234, 191, 102, 0.32) !important;
  background: linear-gradient(180deg, #2c2436, #1d1824) !important;
  color: #eae0d3 !important;
}
html[data-site-template="citadel"] .account-main .account-section {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-site-template="citadel"]
  .account-main
  :where(
    .account-titlebar,
    .buygp-hero,
    .sp-hero,
    .sp-head,
    .reward-section-head--shop,
    .account-titlebar--vip-shop
  ) {
  background:
    radial-gradient(
      440px 190px at 100% 0,
      rgba(150, 58, 204, 0.22),
      transparent 70%
    ),
    linear-gradient(135deg, #382632, #1b1622 75%) !important;
}

/* ----------------------------------------------------------------- footer */
html[data-site-template="citadel"] footer {
  background: linear-gradient(180deg, #1c1723, #141019) !important;
  color: #b9ada2 !important;
}
html[data-site-template="citadel"] .citadel-footer__brand p {
  color: #b9ada2 !important;
}
html[data-site-template="citadel"] .citadel-footer__nav a {
  color: #cbc0b4;
}
html[data-site-template="citadel"] .citadel-footer__legal {
  color: #aca196;
}
html[data-site-template="citadel"] .citadel-footer__legal p {
  color: #a2988e !important;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  html[data-site-template="citadel"] .mobile-toggle {
    background: #201a29;
  }
  html[data-site-template="citadel"] header[role="banner"] nav {
    background: #1c1724;
    border-color: rgba(234, 191, 102, 0.32);
  }
}
@media (max-width: 768px) {
  html[data-site-template="citadel"] .mobile-toggle {
    background: #201a29;
  }
  html[data-site-template="citadel"] header[role="banner"] nav {
    background: #1c1724;
    border-color: rgba(234, 191, 102, 0.32);
  }
}

/* The two remaining masthead siblings (news-article banner, 404 hero) kept
   their void-black scrims; bring them to the same lighter plum as the
   page-header scrim above so every masthead reads as one family. */
html[data-site-template="citadel"] .hero-404 {
  background:
    linear-gradient(90deg, rgba(26, 20, 31, 0.92), rgba(23, 17, 28, 0.45)),
    url("/assets/templates/citadel/inner-masthead-v2.webp") center right / cover
      no-repeat !important;
}
html[data-site-template="citadel"] :where(.mu-hero-article, .mu-hero-banner) {
  background:
    linear-gradient(90deg, rgba(26, 20, 31, 0.95), rgba(23, 17, 28, 0.45)),
    url("/assets/templates/citadel/inner-masthead-v2.webp") center right / cover
      no-repeat !important;
}

/* ==========================================================================
   LUMEN III (2026-08-28) — screenshot-driven glyph fixes
   ========================================================================== */

/* The strip numerals still carried the base skin's 0 2px 0 #39180b
   text-shadow underneath their transparent clipped fill — pixel-sampled as
   solid #39180b bands inside S21 / 16 / 24/7 / MEDIUM. Same bug class as
   the page titles fixed in LUMEN II. */
html[data-site-template="citadel"] .rift-stat__value {
  text-shadow: none;
}

/* Cinzel is a variable font that keeps overlapping contours, and
   -webkit-text-stroke strokes EVERY contour — including the internal
   overlap seams, which rendered as thin dark cracks across the hero
   wordmark. Kill the stroke; the crisp drop-shadow rim already carries
   the edge. */
html[data-site-template="citadel"] .rift-hero__title {
  -webkit-text-stroke: 0;
}

/* The lower filigree sat inside the descender zone of centred section
   titles ("Season 21 Class Lineup") — give it breathing room. */
html[data-site-template="citadel"] main h2.text-center::after,
html[data-site-template="citadel"] main h2.text-accent::after {
  margin-top: 1.2rem;
}

/* Root cause of the "line through centred titles" (pre-existing since the
   Ascension pass): style.css absolutely positions a gold underline + diamond
   on section.container > h2:first-child::before/::after. The citadel
   filigree rule overrode display/background but never declared position, so
   both pseudos stayed position:absolute at the heading's bottom edge — and
   scaleY(-1) on ::after also cancelled style.css's translateX(-50%), which
   is why one copy sat off-centre. Re-pin the layout box here. */
html[data-site-template="citadel"] main h2.text-center::before,
html[data-site-template="citadel"] main h2.text-accent::before {
  position: static;
  transform: none;
}
html[data-site-template="citadel"] main h2.text-center::after,
html[data-site-template="citadel"] main h2.text-accent::after {
  position: static;
  transform: scaleY(-1);
}

/* Events overview: the "Full schedule" column inherited the generic violet
   link color — the one non-gold link on the page. */
html[data-site-template="citadel"] .event-ov-go a {
  color: #eac069;
}
html[data-site-template="citadel"] .event-ov-go a:hover {
  color: #ffdc95;
}

/* ==========================================================================
   LUMEN IV (2026-08-28) — hero composition
   The palette is right; the composition was not. Three tells remained:
   the key art floated as a soft-edged pasted rectangle, the centred hero
   distributed ~150px of dead dark above the copy, and the proof row read
   as a bare table fragment. The art becomes a deliberately FRAMED key-art
   panel in the site's bracket-and-hairline language, the rhythm tightens,
   and the proof row becomes a forged plate.
   ========================================================================== */

html[data-site-template="citadel"] .rift-hero {
  min-height: clamp(620px, 76vh, 780px);
  padding: clamp(1.8rem, 3.5vh, 3rem) 0 clamp(3.4rem, 6vh, 4.6rem);
}

/* Framed key-art panel: crisp plate, hairline gold edge, corner brackets,
   clipped parallax. Owning the rectangle beats pretending it is not one. */
html[data-site-template="citadel"] .rift-portal {
  height: clamp(480px, 62vh, 620px);
  overflow: hidden;
  border: 1px solid rgba(238, 196, 110, 0.42);
  border-radius: 12px;
  background: linear-gradient(180deg, #241d2b, #151019);
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.5),
    0 0 70px rgba(150, 60, 210, 0.16),
    inset 0 1px 0 rgba(255, 240, 200, 0.14);
}
html[data-site-template="citadel"] .citadel-hero-art {
  inset: 0;
  background: url("/assets/templates/citadel/hero-citadel.webp") center 24% /
    cover no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
  filter: saturate(1.06) contrast(1.03);
  transform: translate3d(
      calc(var(--mx, 0) * -8px),
      calc(var(--my, 0) * -5px),
      0
    )
    scale(1.06);
}
/* Vignette becomes a frame-meld: darker foot for grounding, gentle top. */
html[data-site-template="citadel"] .citadel-hero-art::after {
  background:
    linear-gradient(
      180deg,
      rgba(10, 8, 14, 0.3),
      transparent 26% 58%,
      rgba(10, 8, 14, 0.62) 97%
    ),
    radial-gradient(
      ellipse at center,
      transparent 58%,
      rgba(10, 8, 14, 0.32) 100%
    );
}
/* Inner hairline + corner brackets, same language as the record cards. */
html[data-site-template="citadel"] .rift-portal::after {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(240, 199, 112, 0.2);
  border-radius: 7px;
  opacity: 0.75;
  background-image:
    linear-gradient(#f0c573, #f0c573), linear-gradient(#f0c573, #f0c573),
    linear-gradient(#f0c573, #f0c573), linear-gradient(#f0c573, #f0c573),
    linear-gradient(#f0c573, #f0c573), linear-gradient(#f0c573, #f0c573),
    linear-gradient(#f0c573, #f0c573), linear-gradient(#f0c573, #f0c573);
  background-repeat: no-repeat;
  background-size:
    14px 1px,
    1px 14px,
    14px 1px,
    1px 14px,
    14px 1px,
    1px 14px,
    14px 1px,
    1px 14px;
  background-position:
    left top,
    left top,
    right top,
    right top,
    left bottom,
    left bottom,
    right bottom,
    right bottom;
}

/* Wordmark flourish: a tapered gold hairline anchors the title block. */
html[data-site-template="citadel"] .rift-hero__title::after {
  content: "";
  display: block;
  width: min(320px, 68%);
  height: 2px;
  margin-top: 0.16em;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    #efc568,
    rgba(239, 197, 104, 0.35) 55%,
    transparent
  );
}

/* Proof row becomes a plate instead of three bare columns. */
html[data-site-template="citadel"] .citadel-hero-proof {
  width: min(100%, 620px);
  margin: 0.75rem 0 0.3rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid rgba(236, 193, 105, 0.32);
  border-radius: 9px;
  background:
    linear-gradient(
        90deg,
        transparent 6%,
        rgba(250, 221, 158, 0.4) 50%,
        transparent 94%
      )
      top center / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(46, 37, 53, 0.88), rgba(26, 21, 32, 0.92));
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 242, 206, 0.08);
}
html[data-site-template="citadel"] .citadel-hero-proof strong {
  font-size: 1.12rem;
}
html[data-site-template="citadel"] .citadel-hero-proof span {
  font-size: 0.73rem;
  color: #c6bbaf;
}
html[data-site-template="citadel"] .citadel-hero-proof li {
  padding: 0.2rem 1.05rem;
}
html[data-site-template="citadel"] .citadel-hero-proof li + li {
  border-left: 1px solid rgba(236, 193, 105, 0.24);
}
html[data-site-template="citadel"] .rift-hero__copy {
  gap: 15px;
}

/* --------------------------------------------------- LUMEN IV, mobile band */
/* Two fixes below 980px. (1) The footer grid's minmax(250px)+minmax(480px)
   forced a 730px page minimum, widening EVERY section on phones — the real
   source of the horizontal overflow. (2) The old stacked hero tucked the
   copy 2.3rem up over the art's faded mask; against the new hard-framed
   panel that read as a collision, so the tuck goes and the panel gets a
   phone-sized height (the unscoped panel rules above are later in the file
   than the original 980px block, so they must be re-scoped here). */
@media (max-width: 860px) {
  html[data-site-template="citadel"] footer .citadel-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }
}
@media (max-width: 980px) {
  html[data-site-template="citadel"] .rift-portal {
    order: -1;
    height: clamp(300px, 56vw, 440px);
    width: min(650px, 100%);
    margin: 0 auto 1.15rem;
  }
  html[data-site-template="citadel"] .rift-hero__title::after {
    margin-inline: auto;
  }
  html[data-site-template="citadel"] .citadel-hero-proof {
    width: 100%;
  }
}

/* The plate's larger numerals are later in the file than the old 720px
   sizing, so they were winning on phones and clipping the column labels.
   Re-scope the phone sizes after them. */
@media (max-width: 720px) {
  html[data-site-template="citadel"] .citadel-hero-proof {
    padding: 0.75rem 0.55rem;
  }
  html[data-site-template="citadel"] .citadel-hero-proof strong {
    font-size: 0.88rem;
  }
  html[data-site-template="citadel"] .citadel-hero-proof span {
    font-size: 0.62rem;
    letter-spacing: 0.07em;
  }
  html[data-site-template="citadel"] .citadel-hero-proof li {
    padding: 0.16rem 0.5rem;
  }
}
@media (max-width: 430px) {
  html[data-site-template="citadel"] .citadel-hero-proof strong {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
  }
}

/* ==========================================================================
   LUMEN V (2026-08-28) — per-locale one-row header + ambience
   The two-row band was one global breakpoint sized for the LONGEST locale
   (pl needs ~1790px), so English screens at 1400-1860px — including the
   owner's 1600px window — wrapped for no reason. The nav type now scales
   harder below 1600px, and short locales get their one-row layout back at
   the width where THEY actually fit. Long locales keep the 1860px band.
   ========================================================================== */
@media (min-width: 1081px) {
  html[data-site-template="citadel"]
    header[role="banner"]
    nav
    a:not([class*="btn"]) {
    font-size: clamp(0.8rem, 1.02vw - 0.07rem, 0.95rem);
    padding: 0.66rem 0.55rem;
  }
}
@media (min-width: 1400px) {
  html[data-site-template="citadel"]:lang(en) header[role="banner"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    row-gap: 0;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  html[data-site-template="citadel"]:lang(en) .home-cols__side {
    top: 132px;
  }
}
@media (min-width: 1480px) {
  html[data-site-template="citadel"]:lang(tr) header[role="banner"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    row-gap: 0;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  html[data-site-template="citadel"]:lang(tr) .home-cols__side {
    top: 132px;
  }
}

/* Active nav item gets the gem: a small gold diamond over the underline —
   game-nav language, static, costs nothing. */
html[data-site-template="citadel"]
  header[role="banner"]
  nav
  a:not([class*="btn"]).is-active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #ffe9ae, #d99b3a);
  box-shadow: 0 0 8px rgba(240, 190, 90, 0.55);
}

/* Divider pips between the strip stats. */
html[data-site-template="citadel"] .rift-stat + .rift-stat {
  border-left: 1px solid rgba(236, 193, 105, 0.18);
}

/* ------------------------------------------------- living hero (motion-safe) */
/* Everyone gets a richer static scene; browsers that allow motion get a slow
   aurora drift and a breathing panel glow. Respects prefers-reduced-motion. */
html[data-site-template="citadel"] .rift-hero::before {
  background:
    linear-gradient(
      90deg,
      transparent 0 49.8%,
      rgba(241, 190, 88, 0.04) 50%,
      transparent 50.2%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 8.9%,
      rgba(232, 185, 91, 0.02) 9%,
      transparent 9.15% 18%
    ),
    radial-gradient(
      640px 400px at 71% 46%,
      rgba(158, 52, 220, 0.19),
      transparent 72%
    ),
    radial-gradient(
      600px 340px at 34% 28%,
      rgba(219, 60, 42, 0.1),
      transparent 74%
    ),
    radial-gradient(
      520px 320px at 22% 74%,
      rgba(146, 58, 206, 0.09),
      transparent 76%
    );
}
@media (prefers-reduced-motion: no-preference) {
  html[data-site-template="citadel"] .rift-hero::before {
    animation: citadelAurora 16s ease-in-out infinite alternate;
  }
  @keyframes citadelAurora {
    0% {
      opacity: 0.82;
      transform: translate3d(0, 0, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, -14px, 0);
    }
  }
  html[data-site-template="citadel"] .rift-portal {
    animation: citadelPanelGlow 7s ease-in-out infinite alternate;
  }
  @keyframes citadelPanelGlow {
    0% {
      box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.5),
        0 0 55px rgba(150, 60, 210, 0.14),
        inset 0 1px 0 rgba(255, 240, 200, 0.14);
    }
    100% {
      box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.5),
        0 0 90px rgba(163, 74, 224, 0.26),
        inset 0 1px 0 rgba(255, 240, 200, 0.14);
    }
  }
  html[data-site-template="citadel"] .logo::before {
    animation: citadelGemGlint 6s ease-in-out infinite;
  }
  @keyframes citadelGemGlint {
    0%,
    86%,
    100% {
      box-shadow: 0 0 10px rgba(171, 72, 255, 0.38);
    }
    92% {
      box-shadow:
        0 0 14px rgba(196, 116, 255, 0.75),
        0 0 26px rgba(240, 197, 107, 0.4);
    }
  }
}

/* ==========================================================================
   RANKING PAGE — ONE MASTHEAD, TWO BOARDS (2026-09-08)

   ranking.php used to stack three .page-header-box cards (title, realm
   switcher, "full results" link). Each inherits the masthead treatment
   above — a 164-214px min-height plus 1.35-2.5rem padding — so roughly
   700px of near-empty plate sat above the first ranking row. The page now
   has one masthead: title on the left, realm chips and the results link on
   the right. It may sit lower than the single-purpose mastheads elsewhere
   because it carries working controls rather than a lead.

   The merged Guild Battle tab shows two boards in one results card (the
   guild ladder above the paginated fighters board); .ranking-board__title
   labels each. Selectors repeat the page scope so they out-rank both the
   masthead rules above and style.css's [data-page="ranking"] pins.
   ========================================================================== */
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .page-header-box.ranking-masthead {
  min-height: 0;
  /* style.css turns .page-header-box into a column flexbox under 700px; keep
     the row so the title block's flex-basis stays a width, not a height. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 2rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.6vw, 2.25rem) !important;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-masthead .page-header-copy {
  flex: 1 1 320px;
  min-width: 0;
  max-width: none;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-masthead .page-title {
  margin: 0;
  font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem);
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-masthead__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem 0.8rem;
  margin-left: auto;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-masthead .realm-switcher {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.35rem 0.6rem 0.35rem 0.8rem;
  border: 1px solid rgba(229, 181, 89, 0.22) !important;
  border-radius: 8px;
  background: rgba(11, 9, 13, 0.55) !important;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-masthead .realm-switcher-title {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cdb98c !important;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-masthead .realm-chip {
  display: inline-flex;
  align-items: center;
  width: auto !important;
  margin: 0;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-masthead .realm-note__bot {
  font-size: 0.72rem;
  color: #9d928a;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-masthead__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(233, 188, 97, 0.38);
  border-radius: 7px;
  background: linear-gradient(180deg, #2b1f27, #150f16);
  color: #eac069 !important;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  html[data-site-template="citadel"]
    section.container.media-page[data-page="ranking"]
    .ranking-masthead__link:hover {
    border-color: rgba(240, 198, 112, 0.7);
    background: linear-gradient(180deg, #382a34, #1c141d);
    color: #ffdc95 !important;
    transform: translateY(-1px);
  }
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-masthead__link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(233, 188, 97, 0.35);
}

/* Two boards in one results card. */
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-board__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1rem, 0.6vw + 0.8rem, 1.2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-board--ladder {
  margin-bottom: 1.5rem;
}
html[data-site-template="citadel"]
  section.container.media-page[data-page="ranking"]
  .ranking-board--ladder .ranking-table-wrap {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  html[data-site-template="citadel"]
    section.container.media-page[data-page="ranking"]
    .page-header-box.ranking-masthead {
    align-items: flex-start;
    gap: 0.8rem;
  }
  html[data-site-template="citadel"]
    section.container.media-page[data-page="ranking"]
    .ranking-masthead .page-header-copy {
    flex: 0 0 100%;
  }
  html[data-site-template="citadel"]
    section.container.media-page[data-page="ranking"]
    .ranking-masthead__tools {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  html[data-site-template="citadel"]
    section.container.media-page[data-page="ranking"]
    .ranking-masthead__link {
    white-space: normal;
  }
}