/* ============================================================
   CARNAGE JADE DYNASTY — EMBER CODE  ·  HOMEPAGE PROTOTYPE
   Layered on top of /colors_and_type.css
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  background: var(--surface-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(ellipse 1400px 700px at 50% 0%,   rgba(40, 101, 181, .22), transparent 70%),
    radial-gradient(ellipse 900px 500px at 92% 80%,   rgba(91, 200, 240, .09), transparent 70%),
    radial-gradient(ellipse 700px 500px at 6% 50%,    rgba(11, 31, 68,  .18), transparent 70%),
    var(--surface-deep);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* Reveal animation defaults — GSAP overrides these in JS, but we
   set a no-FOUC fallback so the page is usable without JS too. */
.reveal { opacity: 1; }

/* ===== Ember canvas ===== */
#ember-canvas {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: .6;
}
.page-content { position: relative; z-index: 2; }

/* ============================================================
   HEADER  (sticky)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background:
    linear-gradient(180deg, rgba(6, 9, 18,.96), rgba(6, 9, 18,.78));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212, 168, 90,.22);
}
.header-inner {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 8px 0;
}
.brand-logo {
  display: block;
  width: 96px; height: 80px;
  background: url("../img/cjd_frost/immortal_main_logo@desktop.png") left center/contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(91, 200, 240,.45));
  border: 0;
}
.top-nav {
  display: flex; gap: 4px; justify-content: center;
}
/* Plain text top nav — no painted button frames per design refresh.
   Active state uses an underline + highlight gold; hover bumps to antique-gold. */
.ttab {
  position: relative;
  padding: 10px 18px;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.22em; color: var(--text-secondary);
  text-transform: uppercase; cursor: pointer;
  text-decoration: none; border: 0;
  font-weight: 700;
  transition: color   var(--dur-quick) var(--ease-ember),
              filter  var(--dur-quick) var(--ease-ember);
}
.ttab::after {
  /* underline indicator that grows on hover/active */
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember-orange, #5BC8F0), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-quick) var(--ease-ember),
              opacity   var(--dur-quick) var(--ease-ember);
  opacity: 0;
}
.ttab:hover  { color: var(--antique-gold); }
.ttab:hover::after { transform: scaleX(1); opacity: 0.8; }
.ttab.active { color: var(--highlight-gold); text-shadow: 0 0 8px rgba(91, 200, 240,.45); }
.ttab.active::after { transform: scaleX(1); opacity: 1; }

.header-right { display: flex; align-items: center; gap: 16px; }
.server-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-sans); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700;
  /* Default to online colors; .is-offline overrides */
  background: rgba(42,157,85,.12);
  border: 1px solid rgba(42,157,85,.5);
  color: var(--online-green);
}
.server-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: pulse-pip 1.6s var(--ease-ember) infinite;
}
.server-pill.is-offline {
  background: rgba(180, 32, 32, .14);
  border-color: rgba(220, 56, 40, .55);
  color: #E84A30;
}
@keyframes pulse-pip {
  0%,100% { opacity: 1; }
  50%     { opacity: .55; }
}
.server-time {
  font-family: var(--font-numerals); font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.auth-buttons { display: flex; gap: 10px; }
.btn.btn-header {
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 9px 18px;
  background: transparent; border: 1px solid rgba(212, 168, 90,.45);
  color: var(--antique-gold); cursor: pointer;
  font-weight: 700;
  width: auto; height: auto;
  text-shadow: none;
}
.btn.btn-header:hover {
  color: var(--highlight-gold);
  border-color: var(--highlight-gold);
  box-shadow: var(--glow-gold);
}
.btn.btn-header.primary {
  background: linear-gradient(180deg, var(--imperial-red), var(--mid-red));
  border-color: var(--antique-gold);
  color: var(--highlight-gold);
}
.btn.btn-header.primary:hover {
  box-shadow: var(--glow-ember);
  filter: brightness(1.12);
}

/* ============================================================
   HERO  (parallax key art)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* .hero__bg is now a <video> element. object-fit:cover replicates the
   bg-size:cover behavior; object-position matches the painted-strip's prior
   38% Y-anchor. The poster attribute (painted_strip PNG) shows immediately
   while the MP4 loads. */
.hero__bg {
  position: absolute; inset: -10% -2% -2%;
  width: 104%; height: 112%;
  object-fit: cover;
  object-position: center 38%;
  z-index: 0;
  will-change: transform;
  pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 9, 18,.62) 0%, rgba(6, 9, 18,.18) 28%, rgba(6, 9, 18,.92) 100%),
    linear-gradient(90deg,  rgba(6, 9, 18,.78) 0%, rgba(6, 9, 18,.05) 38%, rgba(6, 9, 18,.05) 65%, rgba(6, 9, 18,.55) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 72px minmax(0, 620px);
  gap: 32px;
  padding: 96px 0 120px;
  /* Content is held to the left ~640px columns so the painted warrior on the
     right side of the video keeps his full silhouette visible. */
  margin-right: auto;
  align-items: center;
  justify-content: start;
}
/* Centered variant — single column, all text/logo/button stacked centered */
.hero__inner.hero__inner--centered {
  display: block;
  max-width: 640px;
  padding: 96px 0 120px;
  margin: 0 auto 0 0;  /* sits in the left half, but content is internally centered */
  text-align: center;
}
.hero__inner--centered .hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
/* Extra breathing room so the logo's painted wings don't visually clip into
   the eyebrow text above. */
.hero__inner--centered .hero__eyebrow { margin-bottom: 56px; }
.hero__seal {
  width: 72px; height: auto;
  filter: drop-shadow(0 0 18px rgba(180,50,36,.7));
}
.hero__seal--inline {
  width: 64px;
  margin: 0 auto 18px;
  display: block;
}
.hero__content { max-width: 620px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 12px;
  letter-spacing: 0.4em; color: var(--antique-gold);
  margin: 0 0 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.hero__eyebrow::before, .hero__eyebrow::after {
  content: "◆"; font-size: 8px; color: var(--antique-gold);
}
.hero__wordmark {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.2rem, 6.6vw, 5.6rem);
  line-height: 0.96; letter-spacing: 0.06em;
  color: #F2DCA7;
  margin: 0 0 8px;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.95))
    drop-shadow(0 2px 4px rgba(0,0,0,.85))
    drop-shadow(0 6px 18px rgba(0,0,0,.7));
}
.hero__wordmark .row { display: block; }
/* Logo variant — replaces text wordmark with painted CARNAGE / Jade Dynasty logo
   (matching prod hero pattern). The painted asset already includes its own glow. */
.hero__wordmark--logo {
  margin: 0 0 12px;
  padding: 0;
  filter: none;
  display: block;
  line-height: 0;
}
.hero__logo {
  display: block;
  width: 100%;
  max-width: clamp(300px, 34vw, 500px);
  height: auto;
  filter:
    drop-shadow(0 4px 14px rgba(0,0,0,.7))
    drop-shadow(0 0 22px rgba(244, 221, 160,.55))
    drop-shadow(0 0 44px rgba(240,163,58,.35));
  animation: heroLogoFloat 6.4s var(--ease-ember, cubic-bezier(.4,0,.2,1)) infinite;
  transform-origin: 50% 60%;
  will-change: transform, filter;
}
@keyframes heroLogoFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 4px 14px rgba(0,0,0,.7))
      drop-shadow(0 0 22px rgba(244, 221, 160,.55))
      drop-shadow(0 0 44px rgba(240,163,58,.35));
  }
  50% {
    transform: translateY(-6px) scale(1.012);
    filter:
      drop-shadow(0 8px 20px rgba(0,0,0,.7))
      drop-shadow(0 0 30px rgba(244, 221, 160,.85))
      drop-shadow(0 0 60px rgba(240,163,58,.55));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo { animation: none; }
}
.hero__tagline {
  font-family: var(--font-headings); font-style: italic; font-weight: 500;
  font-size: 1.55rem; line-height: 1.4;
  color: var(--text-primary);
  margin: 18px 0 12px;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.hero__deck {
  font-family: var(--font-body);
  font-size: 1.05rem; line-height: 1.6;
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 0 36px;
  text-wrap: pretty;
}
/* Centered hero variant — stack actions vertically so PLAY NOW + chevron
   both sit on the same vertical axis as the logo */
.hero__inner--centered .hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hero__inner--centered .hero__deck { margin-left: auto; margin-right: auto; }
.hero__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero__chevron {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--antique-gold); border: 0;
  font-weight: 700;
}
.hero__chevron:hover { color: var(--highlight-gold); }
.hero__chevron svg { width: 14px; height: 14px; transition: transform var(--dur-quick) var(--ease-ember); }
.hero__chevron:hover svg { transform: translateX(4px); }

/* ============================================================
   BUTTONS  (painted PNG pills)
   ============================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; background: transparent; padding: 0;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--highlight-gold);
  text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 12px rgba(91, 200, 240,.5);
  transition: filter var(--dur-quick) var(--ease-ember),
              transform var(--dur-quick) var(--ease-ember);
  text-decoration: none;
}
.btn:hover  { filter: brightness(1.15); transform: translateY(-1px); }
.btn:active { filter: brightness(.92);  transform: translateY(0); }

.btn-primary {
  /* The painted asset has "PLAY NOW" baked into the metal plate — suppress the
     HTML label text (still in DOM for screen readers) so it doesn't overlap. */
  width: 420px; height: 112px;
  background: url("../img/cjd_frost/play_now_btn_v2@desktop.png") center/contain no-repeat;
  font-size: 0;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(244, 221, 160,.40)) drop-shadow(0 6px 14px rgba(0,0,0,.55));
  transition: filter var(--dur-quick) var(--ease-ember),
              transform var(--dur-quick) var(--ease-ember);
}
.btn-primary:hover {
  filter: drop-shadow(0 0 28px rgba(244, 221, 160,.85)) drop-shadow(0 8px 20px rgba(122, 217, 248,.55));
}
/* Hero PLAY NOW — bigger + centered on logo column + gentle float in sync with logo */
.hero__actions .btn-primary.lg {
  width: clamp(360px, 30vw, 520px);
  height: clamp(108px, 9vw, 144px);
  font-size: 0;
  /* Centered under the logo column — no horizontal offset. */
  margin: 0 auto;
  animation: heroBtnFloat 6.4s var(--ease-ember, cubic-bezier(.4,0,.2,1)) infinite;
  animation-delay: -1.6s;
  transform-origin: 50% 50%;
  will-change: transform, filter;
}
@keyframes heroBtnFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 18px rgba(244, 221, 160,.40)) drop-shadow(0 6px 14px rgba(0,0,0,.55));
  }
  50% {
    transform: translateY(-4px) scale(1.015);
    filter: drop-shadow(0 0 28px rgba(244, 221, 160,.75)) drop-shadow(0 10px 20px rgba(122, 217, 248,.40));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__actions .btn-primary.lg { animation: none; }
}
/* Other PLAY NOW instances on the page (event card, CTAs) keep prior fixed sizing */
.btn-primary.lg { width: 360px; height: 80px; font-size: 16px; }
.btn-secondary {
  width: 240px; height: 60px; font-size: 12px;
  background: url("../img/cjd_frost/btn_secondary_cta_v2@desktop.png") center/100% 100% no-repeat;
  color: var(--text-primary); text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
.btn-ghost {
  width: 240px; height: 56px; font-size: 11px;
  background: url("../img/cjd_frost/btn_ghost@desktop.png") center/100% 100% no-repeat;
  color: var(--antique-gold); text-shadow: 0 1px 0 rgba(0,0,0,.7);
}

/* ============================================================
   SECTION  (base)
   ============================================================ */
.section {
  position: relative;
  padding: 96px 0;
}
.section--tight { padding: 56px 0 96px; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-header .eyebrow { margin-bottom: 14px; }
.section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.5rem; letter-spacing: 0.1em;
  color: var(--highlight-gold);
  text-shadow: var(--text-glow-gold);
  margin: 0 0 18px;
  text-transform: uppercase;
}
.section-divider {
  height: 28px;
  background: url("../img/cjd_frost/section_divider_h@desktop.png") center/contain no-repeat;
  margin: 0 auto;
  max-width: 480px;
}
.diamond-flank::before, .diamond-flank::after {
  content: "◆";
  display: inline-block;
  font-size: 0.45em;
  color: var(--antique-gold);
  margin: 0 0.6em;
  vertical-align: middle;
  transform: translateY(-0.25em);
}

/* ============================================================
   STATS  (orbital w/ central download medallion)
   ============================================================ */
.stats-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr;
  gap: 22px;
  align-items: center;
}
.stat-card {
  position: relative;
  aspect-ratio: 1.05 / 1;
  background: url("../img/cjd_frost/stat_card_frame_v2@desktop.png") center/100% 100% no-repeat;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 18% 12% 20%;
  text-align: center;
}
.stat-card .stat__icon {
  width: 32px; height: 32px;
  background: url("../img/cjd_frost/phoenix_shield_emblem_icon@desktop.png") center/contain no-repeat;
  opacity: .82;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 6px rgba(91, 200, 240,.5));
}
.stat-card .eyebrow {
  font-size: 11px; letter-spacing: 0.26em;
  margin-bottom: 6px;
}
.stat-card .value {
  font-family: var(--font-numerals); font-size: 44px; font-weight: 700;
  color: var(--highlight-gold);
  text-shadow: var(--text-glow-ember);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat-card .value .suffix {
  font-size: 22px; color: var(--ember-orange); margin-left: 2px;
}
.stat-card .label {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary); margin-top: 8px;
  font-weight: 600;
}

/* central download medallion */
.medallion {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  border: 0; background: transparent;
  font-family: var(--font-display);
  color: var(--highlight-gold);
  padding: 0;
  transform: scale(1.06);
  transition: transform var(--dur-base) var(--ease-ember);
}
.medallion:hover { transform: scale(1.1); }
.medallion__ring,
.medallion__ring--inner {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.medallion__ring {
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(212, 168, 90,.7) 30deg,
      transparent 70deg,
      rgba(91, 200, 240,.55) 200deg,
      transparent 240deg,
      rgba(212, 168, 90,.6) 320deg,
      transparent 360deg);
  filter: blur(.4px);
  animation: spin-slow 22s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%, #000 50%, transparent 51%);
          mask: radial-gradient(circle, transparent 46%, #000 47%, #000 50%, transparent 51%);
}
.medallion__ring--inner {
  inset: 12%;
  background:
    conic-gradient(from 90deg,
      transparent 0deg,
      rgba(91, 200, 240,.6) 60deg,
      transparent 110deg,
      rgba(244, 221, 160,.5) 240deg,
      transparent 290deg);
  animation: spin-slow 30s linear infinite reverse;
  -webkit-mask: radial-gradient(circle, transparent 47%, #000 48%, #000 50%, transparent 51%);
          mask: radial-gradient(circle, transparent 47%, #000 48%, #000 50%, transparent 51%);
}
.medallion__core {
  position: relative;
  width: 78%; height: 78%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(122, 217, 248,.55), transparent 60%),
    radial-gradient(circle at 50% 70%, rgba(11, 31, 68,.85), rgba(6, 9, 18,.9) 70%),
    var(--panel-sunken);
  border: 1.5px solid var(--antique-gold);
  box-shadow:
    var(--inset-oxblood),
    0 0 32px rgba(91, 200, 240,.35),
    0 0 60px rgba(40, 101, 181,.35);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 16px;
  transition: box-shadow var(--dur-base) var(--ease-ember);
}
.medallion:hover .medallion__core {
  box-shadow:
    var(--inset-oxblood),
    0 0 40px rgba(91, 200, 240,.55),
    0 0 80px rgba(91, 200, 240,.35);
}
.medallion__emblem {
  width: 36px; height: 36px;
  background: url("../img/cjd_frost/phoenix_shield_emblem_icon@desktop.png") center/contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(91, 200, 240,.65));
  margin-bottom: 2px;
}
.medallion__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: 0.18em;
  color: var(--highlight-gold);
  text-shadow: var(--text-glow-ember);
  line-height: 1.05;
}
.medallion__sub {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: 0.18em;
  color: var(--highlight-gold);
  text-shadow: var(--text-glow-ember);
  line-height: 1;
  margin-bottom: 4px;
}
.medallion__meta {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-secondary); font-weight: 600;
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* status strip below stats */
.stat-rail {
  margin-top: 28px;
  display: flex; align-items: center; gap: 22px;
  padding: 14px 24px;
  border: 1px solid rgba(212, 168, 90,.28);
  background: linear-gradient(90deg,
    rgba(11, 31, 68,.35),
    rgba(12, 18, 32,.55),
    rgba(11, 31, 68,.35));
  position: relative;
}
.stat-rail::before, .stat-rail::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--antique-gold);
  pointer-events: none;
}
.stat-rail::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.stat-rail::after  { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.stat-rail .pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--online-green);
  box-shadow: 0 0 8px var(--online-green);
  animation: pulse-pip 1.6s var(--ease-ember) infinite;
}
.stat-rail .label-mono {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em;
  color: var(--text-secondary); text-transform: uppercase; font-weight: 600;
}
.stat-rail .v {
  font-family: var(--font-numerals);
  color: var(--highlight-gold); font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: 6px;
}
.stat-rail .sep {
  width: 1px; height: 14px;
  background: rgba(212, 168, 90,.3);
}

/* ============================================================
   FEATURED EVENT  +  RECENT NEWS
   ============================================================ */
.split-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; }
.event-card {
  position: relative;
  min-height: 480px;
  background: url("../img/cjd_frost/featured_event_phoenix_v2@desktop.png") center/cover no-repeat;
  border: 1px solid rgba(212, 168, 90,.35);
  padding: 36px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.event-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 9, 18,.45) 0%,
    rgba(6, 9, 18,.05) 35%,
    rgba(6, 9, 18,.94) 100%);
}
.event-card > * { position: relative; z-index: 1; }
.event-card__chips {
  display: flex; gap: 8px; align-items: center;
  align-self: flex-start; margin-bottom: 18px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 700;
  border: 1px solid;
}
.chip.featured  { background: rgba(40, 101, 181,.55); border-color: var(--antique-gold); color: var(--highlight-gold); }
.chip.featured::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember-orange); box-shadow: 0 0 6px var(--ember-orange);
}
.chip.hot   { color: var(--ember-bright); border-color: var(--ember-bright); background: rgba(122, 217, 248,.08); }
.chip.live  { color: var(--ember-orange); border-color: var(--ember-orange); background: rgba(91, 200, 240,.08); }
.chip.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember-orange); box-shadow: 0 0 6px var(--ember-orange);
  animation: pulse-pip 1.4s var(--ease-ember) infinite;
}
.chip.legendary { color: var(--rank-1-gold); border-color: var(--rank-1-gold); background: rgba(232,181,71,.08); }

.event-card h3 {
  font-family: var(--font-display); font-size: 2.4rem; letter-spacing: 0.08em;
  color: var(--highlight-gold);
  text-shadow: var(--text-glow-ember);
  margin: 0 0 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.event-card .deck {
  font-family: var(--font-headings); font-style: italic; font-size: 1.1rem;
  color: var(--text-primary); margin: 0 0 24px;
  max-width: 520px;
}
.event-meta {
  display: flex; gap: 40px; margin-bottom: 22px;
}
.event-meta .item {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.22em;
  color: var(--text-secondary); text-transform: uppercase; font-weight: 600;
}
.event-meta .item strong {
  display: block;
  font-family: var(--font-numerals); font-size: 22px; letter-spacing: 0.04em;
  color: var(--ember-orange); text-shadow: var(--text-glow-ember);
  margin-top: 4px;
  text-transform: none; font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.event-rewards {
  display: flex; gap: 10px; margin-bottom: 24px;
}
.event-rewards .slot {
  width: 44px; height: 44px;
  background:
    radial-gradient(circle at 50% 30%, rgba(91, 200, 240,.35), transparent 60%),
    var(--panel-sunken);
  border: 1px solid var(--antique-gold);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.event-rewards .slot::before, .event-rewards .slot::after {
  content: ""; position: absolute; width: 6px; height: 6px;
  border: 1px solid var(--antique-gold); pointer-events: none;
}
.event-rewards .slot::before { top: 2px; left: 2px; border-right: 0; border-bottom: 0; }
.event-rewards .slot::after  { bottom: 2px; right: 2px; border-left: 0; border-top: 0; }
.event-rewards .slot .glyph {
  width: 22px; height: 22px;
  background: url("../img/cjd_frost/phoenix_shield_emblem_icon@desktop.png") center/contain no-repeat;
  opacity: .85;
  filter: drop-shadow(0 0 4px rgba(91, 200, 240,.55));
}
.event-rewards .slot[data-tier="2"] .glyph { filter: drop-shadow(0 0 4px rgba(232,181,71,.5)); opacity: .9; }
.event-rewards .slot[data-tier="3"] .glyph { filter: drop-shadow(0 0 6px rgba(180,50,36,.6)); }
.event-card__actions { display: flex; gap: 14px; }
.event-card .btn-primary { width: 220px; height: 60px; font-size: 12px; }
.event-card .btn-secondary { width: 200px; height: 60px; font-size: 11px; }

/* news panel */
.news-panel {
  background: var(--panel-surface);
  border: 1px solid rgba(212, 168, 90,.35);
  padding: 28px;
  position: relative;
}
.news-panel::before, .news-panel::after,
.news-panel > .cr-tr, .news-panel > .cr-bl {
  position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--antique-gold); pointer-events: none;
}
.news-panel::before  { top: 8px; left: 8px;     border-right: 0; border-bottom: 0; }
.news-panel::after   { bottom: 8px; right: 8px; border-left: 0;  border-top: 0; }
.news-panel > .cr-tr { top: 8px; right: 8px;    border-left: 0;  border-bottom: 0; }
.news-panel > .cr-bl { bottom: 8px; left: 8px;  border-right: 0; border-top: 0; }
.news-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(212, 168, 90,.18);
}
.news-head h3 {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.22em;
  color: var(--antique-gold); margin: 0; text-transform: uppercase; font-weight: 700;
}
.news-head a {
  font-family: var(--font-sans); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); border: 0; font-weight: 600;
}
.news-head a:hover { color: var(--highlight-gold); }
.news-list { display: flex; flex-direction: column; }
.news-item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(212, 168, 90,.1);
  align-items: center;
}
.news-item:last-child { border-bottom: 0; }
.news-item__main h4 {
  font-family: var(--font-headings); font-weight: 600;
  font-size: 15px; color: var(--text-primary);
  margin: 0 0 4px; letter-spacing: 0.01em;
}
.news-item__main .meta {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
.news-item__main .meta .tag {
  padding: 2px 8px; border: 1px solid;
  text-transform: uppercase;
}
.news-item__main .meta .tag.update { color: var(--antique-gold); border-color: rgba(212, 168, 90,.5); }
.news-item__main .meta .tag.event  { color: var(--ember-orange); border-color: rgba(91, 200, 240,.5); }
.news-item__main .meta .tag.dev    { color: var(--online-green); border-color: rgba(42,157,85,.5); }
.news-item__date {
  font-family: var(--font-numerals); font-size: 12px;
  letter-spacing: 0.16em; text-align: right;
  color: var(--text-secondary); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CHAMPIONS
   ============================================================ */
.champions-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.lb-panel {
  background: var(--panel-surface);
  border: 1px solid rgba(212, 168, 90,.32);
  padding: 26px 22px 16px;
  position: relative;
}
.lb-panel::before, .lb-panel::after,
.lb-panel > .cr-tr, .lb-panel > .cr-bl {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--antique-gold); pointer-events: none;
}
.lb-panel::before  { top: 6px; left: 6px;     border-right: 0; border-bottom: 0; }
.lb-panel::after   { bottom: 6px; right: 6px; border-left: 0;  border-top: 0; }
.lb-panel > .cr-tr { top: 6px; right: 6px;    border-left: 0;  border-bottom: 0; }
.lb-panel > .cr-bl { bottom: 6px; left: 6px;  border-right: 0; border-top: 0; }
.lb-panel h3 {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.24em;
  color: var(--antique-gold); margin: 0 0 6px; text-align: center; font-weight: 700;
  text-transform: uppercase;
}
.lb-divider {
  height: 16px;
  background: url("../img/cjd_frost/section_divider_h@desktop.png") center/contain no-repeat;
  margin-bottom: 6px;
}
.lb-row-head {
  display: grid; grid-template-columns: 36px 1fr 36px auto;
  gap: 12px;
  padding: 8px 6px 10px;
  border-bottom: 1px solid rgba(212, 168, 90,.18);
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
.lb-row {
  display: grid; grid-template-columns: 36px 1fr 36px auto;
  align-items: center; gap: 12px;
  padding: 11px 6px;
  border-bottom: 1px solid rgba(212, 168, 90,.08);
  font-family: var(--font-body);
}
.lb-row:last-child { border-bottom: 0; }
.lb-rank {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
/* Rank medallions 1/2/3 — pure CSS, gold/silver/bronze gem cut. No image
   stretching, scales crisply at any size, matches the podium frame palette. */
.lb-rank.r1, .lb-rank.r2, .lb-rank.r3 {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: 13px; line-height: 1;
  border: 1px solid;
  /* Octagonal/diamond clip — feels like a carved medal not a circle */
  clip-path: polygon(50% 0, 100% 28%, 100% 72%, 50% 100%, 0 72%, 0 28%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.lb-rank.r1 {
  background: linear-gradient(180deg, #FFE9A6 0%, #F4DDA0 25%, #D4A85A 65%, #8E6F2A 100%);
  color: #1A1004;
  border-color: #FFF5DA;
  box-shadow: 0 0 12px rgba(244, 221, 160, .55), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.lb-rank.r2 {
  background: linear-gradient(180deg, #FFFFFF 0%, #E5E5DA 30%, #B8B8B0 70%, #6F6F66 100%);
  color: #1A1A1A;
  border-color: #FFFFFF;
  box-shadow: 0 0 10px rgba(216, 216, 210, .50), inset 0 1px 0 rgba(255, 255, 255, .60);
}
.lb-rank.r3 {
  background: linear-gradient(180deg, #F5C58A 0%, #D4A85A 30%, #A8743B 70%, #5A3818 100%);
  color: #1A0F04;
  border-color: #F4DDA0;
  box-shadow: 0 0 10px rgba(205, 127, 50, .50), inset 0 1px 0 rgba(255, 240, 200, .50);
}
.lb-name {
  font-family: var(--font-headings); font-weight: 600;
  font-size: 14.5px; color: var(--text-primary);
}
.lb-lv {
  font-family: var(--font-numerals); font-size: 13px;
  color: var(--antique-gold); text-align: center;
  font-variant-numeric: tabular-nums;
}
.lb-value {
  font-family: var(--font-numerals); font-size: 14px;
  color: var(--highlight-gold); font-variant-numeric: tabular-nums;
  text-align: right;
}
.lb-foot {
  margin-top: 10px;
  text-align: center;
}
.lb-foot a {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--antique-gold); border: 0; font-weight: 700;
}
.lb-foot a:hover { color: var(--highlight-gold); }

/* champion centerpiece */
.center-panel {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(40, 101, 181,.42), transparent 70%),
    radial-gradient(ellipse at 50% 100%, rgba(91, 200, 240,.16), transparent 70%),
    var(--panel-sunken);
  border: 1px solid rgba(212, 168, 90,.4);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 20px;
  overflow: hidden;
  min-height: 540px;
}
.center-panel::before, .center-panel::after,
.center-panel > .cr-tr, .center-panel > .cr-bl {
  position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--antique-gold); pointer-events: none; z-index: 4;
}
.center-panel::before  { top: 8px; left: 8px;     border-right: 0; border-bottom: 0; }
.center-panel::after   { bottom: 8px; right: 8px; border-left: 0;  border-top: 0; }
.center-panel > .cr-tr { top: 8px; right: 8px;    border-left: 0;  border-bottom: 0; }
.center-panel > .cr-bl { bottom: 8px; left: 8px;  border-right: 0; border-top: 0; }
.halo {
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 2px solid rgba(212, 168, 90,.4);
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(212, 168, 90,.5) 30deg,
      transparent 70deg,
      rgba(91, 200, 240,.4) 200deg,
      transparent 240deg,
      rgba(212, 168, 90,.4) 320deg,
      transparent 360deg);
  filter: blur(.5px);
  animation: spin-slow 18s linear infinite;
  opacity: .8;
}
.halo--inner {
  width: 280px; height: 280px;
  border-color: rgba(91, 200, 240,.45);
  animation-direction: reverse;
  animation-duration: 26s;
  background:
    conic-gradient(from 90deg,
      transparent 0deg,
      rgba(91, 200, 240,.55) 60deg,
      transparent 110deg,
      rgba(244, 221, 160,.45) 240deg,
      transparent 290deg);
}
.warrior {
  position: relative; z-index: 2;
  width: 320px; height: 420px;
  background: url("../img/cjd_frost/champion_warrior_v2@desktop.png") no-repeat center bottom / contain;
  filter: drop-shadow(0 12px 32px rgba(91, 200, 240,.45));
}
.warrior img { display: none; }
.warrior::after {
  content: "";
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  font-family: var(--font-sans); font-size: 8.5px; letter-spacing: 0.18em;
  color: rgba(212, 168, 90,.45); text-transform: uppercase; white-space: nowrap;
  font-weight: 600;
}
.center-panel .crown {
  position: relative; z-index: 3;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.32em; color: var(--antique-gold);
  margin-top: 36px; font-weight: 700;
  text-transform: uppercase;
}
.center-panel .name {
  position: relative; z-index: 3;
  font-family: var(--font-display); font-size: 1.85rem;
  letter-spacing: 0.06em; color: var(--highlight-gold);
  text-shadow: var(--text-glow-ember);
  margin-top: 8px;
}
.center-panel .subline {
  position: relative; z-index: 3;
  font-family: var(--font-headings); font-style: italic;
  color: var(--text-secondary); font-size: 13px;
  margin-top: 6px;
  text-align: center;
  max-width: 280px;
}

/* ============================================================
   REBIRTH BAND
   ============================================================ */
.rebirth-band {
  position: relative;
  padding: 96px 0 80px;
  text-align: center;
  background:
    radial-gradient(ellipse 1100px 450px at 50% 50%, rgba(91, 200, 240,.22), transparent 70%),
    radial-gradient(ellipse 1500px 600px at 50% 50%, rgba(40, 101, 181,.16), transparent 70%);
  overflow: hidden;
}
.rebirth-band::before {
  content: "凤凰涅槃";
  position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
  font-family: var(--font-chinese);
  font-size: 8rem;
  color: rgba(40, 101, 181,.07);
  letter-spacing: 0.4em;
  pointer-events: none;
  white-space: nowrap;
}
.rebirth-band img {
  position: relative;
  max-width: 760px; width: 92%; height: auto;
  filter: drop-shadow(0 0 36px rgba(91, 200, 240,.45));
}
.rebirth-band .gloss {
  font-family: var(--font-headings); font-style: italic;
  font-size: 1.2rem; color: var(--text-secondary);
  margin-top: 24px; letter-spacing: 0.04em;
  position: relative;
}

/* ============================================================
   CTA BANNERS  (3-up)
   ============================================================ */
.cta-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cta-banner {
  position: relative;
  height: 320px;
  border: 1px solid rgba(212, 168, 90,.35);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-ember),
              box-shadow var(--dur-base) var(--ease-ember);
}
.cta-banner:hover { transform: translateY(-4px); box-shadow: var(--glow-ember); }
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform var(--dur-slow) var(--ease-ember);
}
.cta-banner:hover::before { transform: scale(1.04); }
.cta-banner.donate::before {
  background-image: url("../img/cjd_frost/cta_donation_v2@desktop.jpg");
  background-color: #061428;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.cta-banner.play::before  { background-image: url("../img/cjd_frost/cta_play_now_v2@desktop.jpg"); background-size: cover; background-position: center; }
.cta-banner.stats::before { background-image: url("../img/cjd_frost/cta_stats_v2@desktop.jpg");    background-size: cover; background-position: center; }
.cta-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 9, 18,.42) 0%,
    rgba(6, 9, 18,.05) 38%,
    rgba(6, 9, 18,.94) 100%);
}
.cta-banner > * { position: relative; z-index: 2; }
.cta-banner .cta-eyebrow {
  font-family: var(--font-sans); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--antique-gold); font-weight: 700;
  margin: 0 0 8px;
}
.cta-banner h3 {
  font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.08em;
  color: var(--highlight-gold);
  text-shadow: var(--text-glow-ember);
  margin: 0 0 8px;
  font-weight: 700;
  text-transform: uppercase;
}
.cta-banner h3 .row { display: block; }
.cta-banner h3 .row + .row { color: var(--ember-orange); }
.cta-banner p {
  font-family: var(--font-headings); font-style: italic; font-size: 14px;
  color: var(--text-primary); margin: 0 0 18px;
  max-width: 320px;
}
.cta-banner .arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--antique-gold); font-weight: 700;
  align-self: flex-start;
}
.cta-banner .arrow svg { width: 16px; height: 16px; transition: transform var(--dur-quick) var(--ease-ember); }
.cta-banner:hover .arrow svg { transform: translateX(6px); }
.cta-banner:hover .arrow { color: var(--highlight-gold); }

/* ============================================================
   WIDGETS  (Forum / Event Timers / Market)
   ============================================================ */
.widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.widget {
  background: var(--panel-surface);
  border: 1px solid rgba(212, 168, 90,.32);
  padding: 24px;
  position: relative;
}
.widget::before, .widget::after,
.widget > .cr-tr, .widget > .cr-bl {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--antique-gold); pointer-events: none;
}
.widget::before  { top: 6px; left: 6px;     border-right: 0; border-bottom: 0; }
.widget::after   { bottom: 6px; right: 6px; border-left: 0;  border-top: 0; }
.widget > .cr-tr { top: 6px; right: 6px;    border-left: 0;  border-bottom: 0; }
.widget > .cr-bl { bottom: 6px; left: 6px;  border-right: 0; border-top: 0; }
.widget-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(212, 168, 90,.2);
}
.widget-head h3 {
  font-family: var(--font-display); font-size: 14px; letter-spacing: 0.22em;
  color: var(--antique-gold); margin: 0; font-weight: 700;
  text-transform: uppercase;
}
.widget-head a {
  font-family: var(--font-sans); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); border: 0; font-weight: 600;
}
.widget-head a:hover { color: var(--highlight-gold); }

/* widget rows */
.wrow {
  display: grid; grid-template-columns: 32px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 8px;
  border-bottom: 1px dashed rgba(212, 168, 90,.14);
  font-family: var(--font-body);
}
.wrow:last-child { border-bottom: 0; }
.wrow .ic {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-sunken);
  border: 1px solid rgba(212, 168, 90,.35);
  color: var(--antique-gold);
}
.wrow .ic svg { width: 16px; height: 16px; }
.wrow .main {
  font-family: var(--font-headings); font-size: 14.5px; font-weight: 600;
  color: var(--text-primary); line-height: 1.25;
}
.wrow .main small {
  display: block; font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 3px; font-weight: 500;
}
.wrow .right {
  font-family: var(--font-numerals); font-size: 13.5px;
  color: var(--ember-orange); font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(91, 200, 240,.3);
}
.wrow .pill {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid;
  font-weight: 700;
}
.wrow .pill.live { color: var(--ember-orange); border-color: var(--ember-orange); background: rgba(91, 200, 240,.06); }
.wrow .pill.new  { color: var(--online-green); border-color: var(--online-green); background: rgba(42,157,85,.06); }
.wrow .pill.hot  { color: var(--vermillion);   border-color: var(--vermillion);   background: rgba(180,50,36,.06); }

/* event-timer specific (segmented HH MM SS) */
.timer-row .timer-segs {
  display: inline-flex; gap: 4px; align-items: baseline;
  font-family: var(--font-numerals); font-variant-numeric: tabular-nums;
}
.timer-row .seg {
  display: inline-block;
  min-width: 28px;
  padding: 4px 6px;
  background: var(--panel-sunken);
  border: 1px solid rgba(212, 168, 90,.32);
  color: var(--highlight-gold);
  font-size: 13px;
  text-align: center;
  text-shadow: 0 0 6px rgba(91, 200, 240,.3);
}
.timer-row .colon {
  color: var(--ember-orange); font-size: 13px;
}

/* market row icon glyph */
.mrow .ic {
  background:
    radial-gradient(circle at 50% 30%, rgba(91, 200, 240,.4), transparent 65%),
    var(--panel-sunken);
}
.mrow .ic .glyph {
  width: 18px; height: 18px;
  background: url("../img/cjd_frost/phoenix_shield_emblem_icon@desktop.png") center/contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(91, 200, 240,.6));
}
.mrow .right .coin {
  display: inline-block; width: 12px; height: 12px;
  background:
    radial-gradient(circle at 35% 30%, #FFE9B6, #C9A45A 60%, #7A5A2A 100%);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(91, 200, 240,.5);
  margin-right: 6px;
  transform: translateY(1px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  padding: 96px 0 28px;
  margin-top: 64px;
  /* Warmer palette than the raw blue-night palace bg: stack a crimson/oxblood
     ember tint on top of the palace photo so it joins the rest of the page. */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(122, 217, 248,.18) 0%, transparent 55%),
    linear-gradient(180deg, transparent 0%, rgba(6, 9, 18,.78) 30%, rgba(6, 9, 18,.98) 75%, rgba(6, 9, 18,1) 100%),
    linear-gradient(180deg, rgba(90,22,8,.55) 0%, rgba(6, 9, 18,.45) 60%, rgba(6, 9, 18,.85) 100%),
    url("../img/cjd_frost/bg_palace_night_extra@desktop.png") center bottom/cover no-repeat;
  border-top: 1px solid rgba(212, 168, 90,.22);
  isolation: isolate;
}
/* Sepia-warm the palace photo itself so it stops reading as cold blue. */
.site-footer::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    linear-gradient(180deg, rgba(91, 200, 240,.10) 0%, transparent 40%, rgba(90,22,8,.20) 100%);
  mix-blend-mode: overlay;
}
.site-footer::before {
  content: ""; position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
  width: 600px; height: 32px;
  background: url("../img/cjd_frost/section_divider_h@desktop.png") center/contain no-repeat;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 2fr 1.4fr;
  gap: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(212, 168, 90,.18);
  align-items: start;
}
.footer-brand img {
  width: 220px; height: auto; margin-bottom: 18px;
  filter: drop-shadow(0 0 14px rgba(91, 200, 240,.45));
}
.footer-brand .ember-tag {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.36em; color: var(--antique-gold);
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700;
}
.footer-brand .ember-tag::before, .footer-brand .ember-tag::after {
  content: ""; width: 24px; height: 1px; background: rgba(212, 168, 90,.5);
}
.footer-brand .epigraph {
  font-family: var(--font-headings); font-style: italic;
  color: var(--text-secondary); font-size: 14.5px;
  max-width: 320px; line-height: 1.55;
  margin: 0;
}

.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-col h4 {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.26em;
  color: var(--antique-gold); margin: 0 0 16px;
  text-transform: uppercase; font-weight: 700;
}
.footer-col ul { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px; }
.footer-col a {
  font-family: var(--font-body); font-size: 14px;
  color: var(--text-secondary); border: 0;
  letter-spacing: 0.02em;
}
.footer-col a:hover { color: var(--highlight-gold); }

.footer-right {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 20px;
}
/* Painted-typography slogan — replaces the old PNG (it was too small/blurry
   and didn't read at footer scale). Uses the same gold-on-ember treatment as
   section titles so the footer ties into the page. */
.footer-slogan {
  display: inline-flex;
  align-items: center; gap: 14px;
  padding: 6px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--highlight-gold);
  text-shadow:
    0 1px 0 rgba(0,0,0,.95),
    0 0 14px rgba(91, 200, 240,.55),
    0 0 28px rgba(122, 217, 248,.35);
  white-space: nowrap;
}
.footer-slogan__line {
  position: relative;
  background: linear-gradient(180deg, #FFE9B6 0%, #F2DCA7 40%, #C9A45A 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.footer-slogan__sep {
  font-size: 11px;
  color: var(--ember-orange);
  text-shadow: 0 0 10px rgba(122, 217, 248,.7);
}
.socials { display: flex; gap: 10px; justify-content: flex-end; }
.social-icn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212, 168, 90,.35);
  color: var(--antique-gold);
  transition: all var(--dur-quick) var(--ease-ember);
}
.social-icn:hover {
  color: var(--highlight-gold);
  border-color: var(--antique-gold);
  box-shadow: var(--glow-gold);
}
.social-icn svg { width: 16px; height: 16px; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; gap: 24px;
  flex-wrap: wrap;
}
.footer-bottom .legal {
  font-family: var(--font-sans); font-size: 11px;
  color: var(--text-muted); letter-spacing: 0.06em;
}
.footer-bottom .version {
  font-family: var(--font-sans); font-size: 10px;
  color: var(--text-muted); letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600;
}

/* ============================================================
   MODALS  (login + register)
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6, 9, 18,.86);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 32px;
}
.modal.open { display: flex; }
.modal__panel {
  /* Painted carved-gold ornate frame replaces border + CSS corner brackets.
     Frame asset is 1122×1402 (4:5 portrait); padding pushes content into the
     transparent interior window so it doesn't collide with the gold frame metal.
     IMPORTANT: padding MUST be in px (not %), otherwise % is computed from the
     PARENT's width (1900px+) and explodes the padding to 300+ px each side. */
  /* Modal frame v6 — Carnage-original phoenix-themed frame at AAA quality.
     3D-rendered bronze metalwork with phoenix-wing sentinels at top corners,
     phoenix-tail scrollwork at bottom corners, ember-glow inner edge, dark
     stone textured interior baked into the PNG. ~3:4 portrait (1007×1389).
     Default size = login (small, 2 fields). Register overrides to a larger
     panel size since it has 4 fields + checkbox. */
  width: 400px;
  height: 552px;
  max-width: 92vw;
  max-height: 92vh;
  background:
    /* 1. Frame painted on TOP — opaque painted dragons + scrollwork cover any
          bleed of the gradient layers below them. Sized to full panel. */
    url("../img/cjd_frost/modal_frame_v2@desktop.png") center / 100% 100% no-repeat,
    /* 2. Sapphire glow + base navy fill BEHIND the frame, sized + positioned to
          fit inside the frame's painted silhouette so they don't overflow past
          the frame edge. ~78% wide × 84% tall covers the entire interior window
          (top dragon area, bottom arch area, side columns) without bleeding. */
    radial-gradient(ellipse at 50% 30%, rgba(40, 101, 181, .55) 0%, rgba(11, 31, 68, .92) 55%, rgba(4, 10, 24, .98) 100%) center / 78% 84% no-repeat,
    linear-gradient(180deg, #0B2440 0%, #061428 60%, #03091A 100%) center / 78% 84% no-repeat;
  background-color: transparent;
  border: 0;
  position: relative;
  /* Padding clears phoenix sentinels + corner scrollwork + ember inner-glow
     ring. Side rails on this frame take ~15% of width — content starts well
     inside that boundary. */
  padding: 92px 64px 82px;
  /* Center content vertically inside the dark stone interior so short forms
     (login = 2 fields) don't hug the top crest. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: none;
  box-sizing: border-box;
}
/* Make the form fill the panel's interior width */
.modal__panel form { width: 100%; display: block; }

/* Hide deprecated CSS corner pseudos + .cr-* spans (frame asset replaces them). */
.modal__panel::before,
.modal__panel::after,
.modal__panel > .cr-tr,
.modal__panel > .cr-bl { display: none !important; }
.modal__close {
  position: absolute;
  /* Inside the dark stone interior of v6, top-right corner clear of the
     ember-glow inner edge. (Login default; register overrides above.) */
  top: 96px; right: 70px;
  width: 30px; height: 30px;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 107, 0, .35);
  border-radius: 50%;
  cursor: pointer;
  color: var(--highlight-gold, #F2DCA7);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; line-height: 1;
  font-weight: 700;
  z-index: 5;
  box-shadow: 0 0 8px rgba(122, 217, 248, .25);
  transition: color var(--dur-quick) var(--ease-ember),
              border-color var(--dur-quick) var(--ease-ember),
              transform var(--dur-quick) var(--ease-ember),
              background var(--dur-quick) var(--ease-ember);
}
.modal__close:hover {
  color: #FFFFFF;
  background: rgba(255, 107, 0, .25);
  border-color: var(--ember-orange, #5BC8F0);
  transform: rotate(90deg);
}
/* Modal text/inputs styled for the dark stone interior of the prod frame.
   Light text + ember-orange accents on dark backgrounds. */
.modal__panel h2 {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.10em;
  color: var(--highlight-gold, #F2DCA7);
  text-shadow: 0 0 20px rgba(122, 217, 248, .55), 0 1px 0 rgba(0, 0, 0, .8);
  margin: 0 0 6px; text-align: center; font-weight: 700;
  text-transform: uppercase;
}
.modal__subtitle {
  font-family: var(--font-headings); font-style: italic;
  color: rgba(244, 221, 160, .72);
  text-align: center; font-size: 13px;
  margin: 0 0 16px;
}
.modal label {
  display: block; font-family: var(--font-sans); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ember-orange, #5BC8F0);
  margin: 8px 0 4px;
  font-weight: 700;
}
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"] {
  width: 100%;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 107, 0, .30);
  border-radius: 3px;
  padding: 9px 12px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--highlight-gold, #F2DCA7);
  transition: all var(--dur-quick) var(--ease-ember);
}
.modal input::placeholder { color: rgba(244, 221, 160, .35); }
.modal input:focus {
  outline: 0;
  background: rgba(0, 0, 0, .7);
  border-color: var(--ember-orange);
  box-shadow: 0 0 0 3px rgba(122, 217, 248, .18);
}
.modal .check-row {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 6px;
  font-family: var(--font-body); font-size: 12px;
  color: rgba(244, 221, 160, .80);
}
.modal .check-row label {
  margin: 0; letter-spacing: 0; text-transform: none;
  font-family: var(--font-body); font-size: 12px;
  color: rgba(244, 221, 160, .80); font-weight: 400;
}
.modal .check-row input { accent-color: var(--ember-orange); }
.modal .check-row a { color: var(--ember-orange, #5BC8F0); font-weight: 600; }
.modal .submit, .modal .btn-lg {
  width: 100%;
  margin-top: 10px;
  height: 60px;
  font-size: 13px;
}
.modal .submit {
  /* Painted ornate LOGIN button v2 — sibling family of PLAY NOW v2 (no wings). */
  background: url("../img/cjd_frost/login_btn_v2@desktop.png") center/contain no-repeat;
  font-size: 0;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(244, 221, 160,.40)) drop-shadow(0 4px 8px rgba(0,0,0,.45));
  transition: filter var(--dur-quick) var(--ease-ember),
              transform var(--dur-quick) var(--ease-ember);
}
.modal .submit:hover {
  filter: drop-shadow(0 0 18px rgba(244, 221, 160,.85)) drop-shadow(0 6px 10px rgba(122, 217, 248,.45));
  transform: translateY(-1px);
}
/* Register modal uses the matching REGISTER button */
#registerModal .submit {
  background-image: url("../img/cjd_frost/register_btn_v2@desktop.png");
}
/* Register modal panel sizing — bigger than login because it has 4 fields +
   Code-of-Conduct checkbox + button + switch link. Same 1007×1389 aspect. */
#registerModal .modal__panel {
  width: 480px;
  height: 663px;
  padding: 110px 76px 100px;
}
#registerModal .modal__close {
  top: 116px; right: 80px;
}
.modal .switch {
  text-align: center; margin-top: 10px;
  font-family: var(--font-body); font-size: 12px;
  color: rgba(244, 221, 160, .65);
}
.modal .switch a { color: var(--ember-orange, #5BC8F0); font-weight: 600; }

/* ============================================================
   TWEAKS PANEL (no-impact when off)
   ============================================================ */
[data-tweak-target] { transition: opacity var(--dur-base) var(--ease-ember); }

/* ============================================================
   GAME PREVIEW GALLERY (slideshow grid)
   ============================================================ */
.section-head { text-align: center; margin-bottom: clamp(28px, 3vw, 56px); }
.section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.28em; color: var(--antique-gold);
  text-transform: uppercase; margin-bottom: 14px;
  font-weight: 700;
}
.section-head .eyebrow .seal-mark {
  font-family: 'Ma Shan Zheng', 'Cormorant Garamond', serif;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--ember-orange, #5BC8F0);
  text-transform: none;
  text-shadow: 0 0 8px rgba(122, 217, 248, .35);
}
.section-head .section-title {
  font-family: var(--font-display); font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  font-weight: 900; letter-spacing: 0.06em; line-height: 1.1;
  color: var(--highlight-gold, #F2DCA7);
  margin: 0 0 14px;
  text-shadow: 0 0 1px rgba(0,0,0,.95), 0 4px 12px rgba(0,0,0,.6);
}
.section-head .section-sub {
  font-family: var(--font-headings, 'Crimson Pro'), serif;
  font-style: italic; font-size: 1.15rem; line-height: 1.5;
  color: var(--text-secondary, #A89880);
  max-width: 560px; margin: 0 auto;
}

/* Featured trailer (Vimeo iframe) — uses same gold-corner-bracket vocabulary
   as the gallery cards, but bigger and centered. Sits ABOVE the thumb grid. */
.trailer-frame {
  position: relative;
  max-width: 980px;
  margin: 0 auto clamp(24px, 2.4vw, 48px);
  border: 1px solid rgba(212, 168, 90, .35);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(12, 18, 32,.82), rgba(19, 26, 44,.55));
  padding: clamp(8px, 0.8vw, 14px);
  box-shadow:
    0 0 0 1px rgba(122, 217, 248, .08),
    0 12px 36px rgba(0, 0, 0, .55),
    0 0 32px rgba(122, 217, 248, .15);
  isolation: isolate;
  transition: border-color 320ms ease-out, box-shadow 320ms ease-out;
}
.trailer-frame:hover {
  border-color: rgba(240, 163, 58, .55);
  box-shadow:
    0 0 0 1px rgba(240, 163, 58, .35),
    0 16px 44px rgba(0, 0, 0, .65),
    0 0 40px rgba(122, 217, 248, .25);
}
.trailer-frame::before {
  /* Gold corner brackets — same vocabulary as gallery cards + panel chrome */
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background:
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) top    left  / 22px 1px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) top    left  / 1px 22px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) top    right / 22px 1px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) top    right / 1px 22px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) bottom left  / 22px 1px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) bottom left  / 1px 22px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) bottom right / 22px 1px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) bottom right / 1px 22px no-repeat;
  z-index: 3;
  opacity: .85;
}
.trailer-frame__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}
.trailer-frame__inner iframe,
.trailer-frame__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Unmute toggle — bottom-right corner of the trailer frame */
.trailer-frame__sound {
  position: absolute;
  right: clamp(14px, 1.4vw, 22px);
  bottom: clamp(14px, 1.4vw, 22px);
  z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px;
  border: 1px solid rgba(212, 168, 90, .55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(12, 18, 32,.86), rgba(19, 26, 44,.72));
  backdrop-filter: blur(6px);
  color: var(--highlight-gold, #F2DCA7);
  font-family: var(--font-display, 'Cinzel'), serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(122, 217, 248, .12),
    0 4px 14px rgba(0, 0, 0, .55);
  transition:
    transform   220ms cubic-bezier(.2, .7, .3, 1),
    border-color 220ms ease-out,
    box-shadow  220ms ease-out,
    color       220ms ease-out;
}
.trailer-frame__sound:hover {
  transform: translateY(-1px);
  border-color: var(--ember-orange, #5BC8F0);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(240, 163, 58, .45),
    0 6px 18px rgba(122, 217, 248, .35);
}
.trailer-frame__sound-icon {
  width: 16px; height: 16px;
  filter: drop-shadow(0 0 6px rgba(122, 217, 248, .5));
}
/* Toggle which icon is visible based on .is-muted on the button */
.trailer-frame__sound .ico-unmuted { display: none; }
.trailer-frame__sound:not(.is-muted) .ico-muted   { display: none; }
.trailer-frame__sound:not(.is-muted) .ico-unmuted { display: inline-block; }
@media (max-width: 580px) {
  .trailer-frame__sound-label { display: none; }
  .trailer-frame__sound { padding: 9px; }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.4vw, 26px);
}
@media (max-width: 980px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .gallery-grid { grid-template-columns: 1fr; } }

.gallery-card {
  display: block;
  position: relative;
  text-decoration: none;
  border-radius: 6px;
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.2,.7,.3,1);
}
.gallery-card:hover { transform: translateY(-4px); }
.gallery-card:focus-visible {
  outline: 2px solid var(--ember-orange, #5BC8F0);
  outline-offset: 4px;
}

.gallery-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(212, 168, 90, .26);
  background: linear-gradient(180deg, rgba(12, 18, 32,.82), rgba(19, 26, 44,.55));
  transition: border-color 320ms ease-out, box-shadow 320ms ease-out;
}
.gallery-card:hover .gallery-card__frame {
  border-color: rgba(240, 163, 58, .55);
  box-shadow:
    0 0 0 1px rgba(240, 163, 58, .35),
    0 16px 40px rgba(122, 217, 248, .28);
}
.gallery-card__frame::before {
  /* Antique-gold corner brackets — same vocabulary as panel chrome */
  content: "";
  position: absolute;
  inset: 6px;
  border: 0;
  pointer-events: none;
  background:
    /* TL */
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) top    left  / 16px 1px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) top    left  / 1px 16px no-repeat,
    /* TR */
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) top    right / 16px 1px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) top    right / 1px 16px no-repeat,
    /* BL */
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) bottom left  / 16px 1px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) bottom left  / 1px 16px no-repeat,
    /* BR */
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) bottom right / 16px 1px no-repeat,
    linear-gradient(var(--antique-gold, #C9A45A), var(--antique-gold, #C9A45A)) bottom right / 1px 16px no-repeat;
  z-index: 3;
  opacity: .65;
  transition: opacity 320ms ease-out;
}
.gallery-card:hover .gallery-card__frame::before { opacity: 1; }

.gallery-card__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.0);
  transition: transform 720ms cubic-bezier(.2,.7,.3,1), filter 320ms ease-out;
  filter: brightness(.92) saturate(.95);
}
.gallery-card:hover .gallery-card__frame img {
  transform: scale(1.06);
  filter: brightness(1.05) saturate(1.05);
}

.gallery-card__overlay {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(180deg,
    rgba(6, 9, 18, 0) 30%,
    rgba(6, 9, 18, .55) 65%,
    rgba(6, 9, 18, .92) 100%);
  z-index: 2;
  pointer-events: none;
}
.gallery-card__icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 217, 248, .35) 0%, rgba(6, 9, 18, .85) 70%);
  border: 1px solid rgba(240, 163, 58, .55);
  color: var(--highlight-gold, #F2DCA7);
  opacity: 0;
  transform: scale(.8);
  transition: opacity 320ms ease-out, transform 320ms cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 0 16px rgba(122, 217, 248, .25), inset 0 0 12px rgba(0,0,0,.6);
}
.gallery-card__icon svg { width: 28px; height: 28px; }
.gallery-card:hover .gallery-card__icon {
  opacity: 1;
  transform: scale(1);
}

.gallery-card__cap {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--highlight-gold, #F2DCA7);
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.85);
  padding: 0 12px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card,
  .gallery-card__frame img,
  .gallery-card__icon,
  .gallery-card__frame {
    transition: none !important;
  }
  .gallery-card:hover { transform: none; }
  .gallery-card:hover .gallery-card__frame img { transform: none; }
}

/* ============================================================
   HOME PIVOT 4.16 — header PNG buttons, champion stats,
   solo event card, single-widget row, gallery lightbox
   ============================================================ */

/* --- Top-nav login / register painted PNG buttons (PLAY NOW v2 family) ---- */
.btn.btn-header.btn-header--login,
.btn.btn-header.btn-header--register {
  position: relative;
  /* v2 buttons are ~2.8:1 aspect (1206×429 etc.). Box at 150×54 ≈ 2.78:1
     fills the painted plate edge-to-edge with no letterboxing. */
  width: 150px; height: 54px;
  padding: 0;
  background: url("../img/cjd_frost/login_btn_v2@desktop.png") center / contain no-repeat;
  border: 0;
  font-family: var(--font-display);
  /* Painted PNG carries the label — span is visually hidden but kept in DOM
     for screen readers so the button still announces "Login"/"Register". */
  font-size: 0;
  letter-spacing: 0; text-transform: uppercase;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(244, 221, 160,.35)) drop-shadow(0 4px 8px rgba(0,0,0,.55));
  transition: filter var(--dur-quick) var(--ease-ember),
              transform var(--dur-quick) var(--ease-ember);
}
.btn.btn-header.btn-header--login span,
.btn.btn-header.btn-header--register span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
.btn.btn-header.btn-header--login:hover,
.btn.btn-header.btn-header--register:hover {
  filter: drop-shadow(0 0 18px rgba(244, 221, 160,.85)) drop-shadow(0 6px 10px rgba(122, 217, 248,.45));
  transform: translateY(-1px);
  box-shadow: none;
  border: 0;
}
.btn.btn-header.btn-header--register {
  background-image: url("../img/cjd_frost/register_btn_v2@desktop.png");
}

/* --- Champion stats (under PvP Champion name) ----------------------------- */
.champion-stats {
  display: flex; justify-content: center; gap: clamp(20px, 2.4vw, 40px);
  margin: 8px 0 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(212, 168, 90,.22);
  border-bottom: 1px solid rgba(212, 168, 90,.22);
}
.champion-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.champion-stat__label {
  font-family: var(--font-sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--text-muted);
}
.champion-stat__value {
  font-family: var(--font-numerals);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700; line-height: 1;
  color: var(--highlight-gold);
  text-shadow: var(--text-glow-ember);
  font-variant-numeric: tabular-nums;
}

/* --- Solo event card (full-width after news removal) --------------------- */
.event-card.event-card--solo {
  width: 100%;
  max-width: none;
}

/* --- Single-widget row (after Forum + Market removal) ------------------- */
.widgets--single {
  grid-template-columns: 1fr !important;
}
.widgets--single .widget {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* ============================================================
   GALLERY LIGHTBOX
   ============================================================ */
.gx-lightbox {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 5, 4, .88);
  backdrop-filter: blur(8px);
  padding: clamp(20px, 4vw, 56px);
  opacity: 0;
  transition: opacity 220ms var(--ease-ember, cubic-bezier(.4,0,.2,1));
}
.gx-lightbox[hidden] { display: none; }
.gx-lightbox.is-open { opacity: 1; }

.gx-lightbox__stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  max-width: min(1280px, 92vw);
  max-height: 88vh;
  margin: 0;
  pointer-events: none; /* clicks pass to backdrop except on the img itself */
}
.gx-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(88vh - 56px);
  width: auto; height: auto;
  object-fit: contain;
  border: 1px solid rgba(212, 168, 90,.45);
  background: #0E0A09;
  box-shadow:
    0 0 0 1px rgba(122, 217, 248,.10),
    0 24px 60px rgba(0,0,0,.7),
    0 0 48px rgba(122, 217, 248,.18);
  pointer-events: auto;
}
.gx-lightbox__cap {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--antique-gold);
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
  text-align: center;
  pointer-events: auto;
}

.gx-lightbox__close,
.gx-lightbox__nav {
  position: absolute;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 9, 18,.86);
  border: 1px solid rgba(212, 168, 90,.55);
  color: var(--highlight-gold);
  font-family: var(--font-display);
  font-weight: 400;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.gx-lightbox__close {
  top: clamp(16px, 2vw, 28px);
  right: clamp(16px, 2vw, 28px);
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 22px; line-height: 1;
}
.gx-lightbox__close:hover {
  border-color: var(--ember-orange);
  transform: rotate(90deg);
  box-shadow: 0 0 14px rgba(122, 217, 248,.55);
}
.gx-lightbox__nav {
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  font-size: 36px; line-height: 1;
}
.gx-lightbox__nav--prev { left: clamp(16px, 2.5vw, 36px); }
.gx-lightbox__nav--next { right: clamp(16px, 2.5vw, 36px); }
.gx-lightbox__nav:hover {
  border-color: var(--ember-orange);
  color: var(--highlight-gold);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 0 16px rgba(122, 217, 248,.55);
}
.gx-lightbox__counter {
  position: absolute;
  bottom: clamp(16px, 2vw, 28px);
  left: 50%; transform: translateX(-50%);
  font-family: var(--font-numerals);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Lock body scroll when lightbox is open */
body.gx-lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .gx-lightbox,
  .gx-lightbox__close,
  .gx-lightbox__nav { transition: none; }
  .gx-lightbox__close:hover,
  .gx-lightbox__nav:hover { transform: none; }
  .gx-lightbox__nav { transform: translateY(-50%); }
}

@media (max-width: 720px) {
  .gx-lightbox__nav { width: 44px; height: 44px; font-size: 28px; }
  .gx-lightbox__close { width: 38px; height: 38px; font-size: 20px; }
}