:root {
  --bg: #070910;
  --bg-2: #0c111b;
  --bg-3: #131a28;
  --card: #121826;
  --card-2: #182033;
  --gold: #f0c14b;
  --gold-2: #ffd86a;
  --gold-3: #ffe9a8;
  --gold-dim: #b8882c;
  --line: rgba(186, 204, 255, 0.16);
  --line-strong: rgba(255, 216, 106, 0.45);
  --cream: #f3efe8;
  --cream-2: #e4ddd2;
  --muted: #9aa6bc;
  --muted-2: #6d7a91;
  --danger: #ff6a4a;
  --accent: #8b7cff;
  --cyan: #5eead4;
  --ember: #ff6a3d;
  --live: #4ade80;
  --valorian: #f0c14b;
  --derion: #8b7cff;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  --radius: 14px;
  --nav-h: 74px;
  --font-ui: "Outfit", system-ui, sans-serif;
  --font-display: "Cinzel", serif;
  --font-serif: "Cormorant Garamond", serif;
  --font-cond: "Barlow Condensed", "Outfit", sans-serif;
}

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

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.55;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(139, 124, 255, 0.24), transparent 55%),
    radial-gradient(760px 420px at 48% 36%, rgba(94, 234, 212, 0.07), transparent 52%),
    radial-gradient(900px 480px at -12% 88%, rgba(255, 106, 61, 0.14), transparent 50%),
    var(--bg);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

::selection {
  background: rgba(139, 124, 255, 0.42);
  color: #fff8e8;
}

#embers,
.grain {
  display: none;
}

/* main.js marks sections well outside the viewport. A running CSS loop costs a style pass every frame even where
   nobody can see it, and together they kept the main thread busy on every part of the page. */
.is-offscreen,
.is-offscreen::before,
.is-offscreen::after,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.42) 100%);
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.wide {
  width: min(1280px, calc(100% - 40px));
}

.kicker {
  margin: 0 0 14px;
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.45;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--cream);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.lede {
  margin: 16px 0 0;
  max-width: 58ch;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.58;
  text-wrap: pretty;
}

.muted {
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: start;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(7, 9, 16, 0.94), rgba(7, 9, 16, 0.86));
  border-bottom: 1px solid var(--line);
}

.site-header.is-over-hero:not(.is-solid) {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent);
  border-bottom-color: transparent;
}

.site-header.is-solid {
  background: rgba(8, 11, 20, 0.96);
  border-bottom: 1px solid var(--line);
}

.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  height: 52px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  position: relative;
  display: block;
  padding: 10px 12px;
  color: var(--muted);
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--cream);
}

.nav-links a.active::after,
.nav-links a:hover::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--gold-2);
}

.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  display: block;
  width: 16px;
  height: 1px;
  margin: 0 auto;
  background: currentColor;
  content: "";
}

.menu-btn span {
  position: relative;
}

.menu-btn span::before {
  position: absolute;
  top: -5px;
}

.menu-btn span::after {
  position: absolute;
  top: 5px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Cast gold: a polished face lit from above, a dark outer rim, a thin bevel line just inside it and engraved
   lettering. ::before carries the sweep of light (::after is the loading spinner on the account pages). */
.btn-gold {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background: linear-gradient(180deg, #fff3c2 0%, #f6d574 12%, #e8b03a 36%, #c98818 56%, #a8680f 70%, #cf9530 86%, #f0c96a 100%);
  color: #2a1704;
  text-shadow: 0 1px 0 rgba(255, 238, 190, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 232, 0.95),
    inset 0 -2px 0 rgba(86, 48, 4, 0.4),
    inset 0 0 0 2px rgba(255, 228, 150, 0.32),
    inset 0 0 0 3px rgba(96, 58, 8, 0.45),
    0 0 0 1px #4f3206,
    0 0 0 2px rgba(255, 214, 120, 0.22),
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 12px 28px rgba(196, 138, 18, 0.32);
  transition: transform 0.15s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 34%, rgba(255, 253, 240, 0.7) 50%, transparent 66%) -150% 0 / 220% 100% no-repeat;
  transition: background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-gold:hover,
.btn-gold:focus-visible {
  filter: brightness(1.06) saturate(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 232, 1),
    inset 0 -2px 0 rgba(86, 48, 4, 0.4),
    inset 0 0 0 2px rgba(255, 228, 150, 0.4),
    inset 0 0 0 3px rgba(96, 58, 8, 0.45),
    0 0 0 1px #6a4308,
    0 0 0 2px rgba(255, 214, 120, 0.4),
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 14px 36px rgba(214, 152, 24, 0.5),
    0 0 28px rgba(255, 196, 80, 0.3);
}

.btn-gold:hover::before,
.btn-gold:focus-visible::before {
  background-position: 250% 0;
}

.btn-gold:active {
  transform: translateY(1px);
}

/* The big calls to action: the light sweeps across them on its own every few seconds. */
.btn-play {
  min-height: 60px;
  padding: 0 40px;
  font-size: 18px;
  letter-spacing: 0.14em;
}

.btn-play::before {
  animation: btn-shine 5s ease-in-out infinite;
}

.btn-play:hover::before {
  animation: none;
}

@keyframes btn-shine {
  0%, 62% { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}

.btn-ghost {
  border-color: rgba(186, 204, 255, 0.28);
  color: var(--gold-3);
  background: rgba(16, 22, 38, 0.55);
}

.btn-ghost:hover {
  border-color: var(--gold-2);
  background: rgba(139, 124, 255, 0.12);
}

.btn-wide {
  width: 100%;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  padding: 0;
  overflow: hidden;
}

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 46%;
  transform: scale(1.08);
  transform-origin: center 46%;
  filter: saturate(0.86) brightness(0.3) contrast(1.2);
}

.hero-cast-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-cast {
  width: 100%;
  height: 108%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 52%;
  filter: saturate(1.14) contrast(1.1) brightness(1.02);
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 56% 48% at 68% 44%, rgba(255, 186, 92, 0.18), transparent 66%),
    radial-gradient(ellipse 34% 28% at 78% 18%, rgba(139, 124, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 28% 22% at 48% 60%, rgba(94, 234, 212, 0.07), transparent 72%);
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 8, 16, 0.78) 0%, rgba(6, 8, 16, 0.42) 26%, rgba(6, 8, 16, 0.12) 48%, rgba(6, 8, 16, 0.04) 68%, rgba(10, 8, 22, 0.18) 100%),
    linear-gradient(180deg, rgba(6, 8, 16, 0.46) 0%, rgba(6, 8, 16, 0.1) 22%, transparent 46%, rgba(6, 8, 16, 0.32) 80%, rgba(6, 8, 16, 0.92) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 130px 0 28px;
}

.hero-stats {
  position: relative;
  z-index: 1;
  padding: 0 0 40px;
}

.hero-stats .stats {
  margin-top: 0;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(94, 234, 212, 0.32);
  border-radius: 999px;
  background: rgba(12, 28, 32, 0.72);
  color: var(--cream-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(94, 234, 212, 0.08);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}

.hero-logo {
  width: min(720px, 100%);
  height: auto;
  margin: 18px 0 12px;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
}

.hero h1 {
  max-width: 22ch;
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.18;
  text-wrap: pretty;
  text-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
}

/* Three taglines stacked in one grid cell, so the heading keeps the height of the tallest one and nothing
   below it jumps when js/main.js swaps .is-active. Each line rises out of a blur, a beat after the old one leaves. */
.hero .hero-rotator {
  display: grid;
  /* A tight dark edge under the letters keeps the taglines readable over the bright sky; the wide glow stays. */
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(0, 0, 0, 0.4),
    0 10px 36px rgba(0, 0, 0, 0.55);
}

.hero-line {
  grid-area: 1 / 1;
}

.hero-line > span {
  display: block;
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(10px);
  transition:
    opacity 0.6s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s ease;
}

.hero-line.is-active > span {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: 0.28s;
}

.hero-line.is-active > span + span {
  transition-delay: 0.4s;
}

.hero-line.is-leaving > span {
  transform: translateY(-0.35em);
  filter: blur(8px);
  transition-duration: 0.45s;
}

.hero-line.is-leaving > span + span {
  transition-delay: 0.07s;
}

/* Phones: the cast fills the hero by height (108% of it), which puts the faces (y ≈ 0.53 of the art) far
   below the logo. Lift both art layers so the faces land on the logo's line (≈ 268px down, fixed because the
   logo sits in normal flow), and fade the cast's lower edge into the page instead of ending on a hard line. */
@media (max-width: 720px) {
  .hero-stage {
    container-type: size;
  }

  .hero-cast-frame {
    container-type: size;
  }

  .hero-cast {
    transform: translateY(calc(330px - 57cqh));
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 94%);
    mask-image: linear-gradient(180deg, #000 68%, transparent 94%);
  }

  .hero-bg {
    transform: translateY(calc(330px - 57cqh)) scale(1.08);
  }
}

.hero .lede {
  font-size: 22px;
  max-width: 42ch;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 32px;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.linkish {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.linkish:hover {
  color: var(--cream);
}

.stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(28, 38, 62, 0.96), rgba(8, 12, 22, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stats::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-2), var(--accent), var(--cyan));
  z-index: 1;
}

.stat {
  position: relative;
  padding: 22px 16px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.stat:last-child {
  border-right: 0;
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.stat strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
}

.stat:last-child strong {
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: 0.08em;
  transition: opacity 0.32s ease;
}

.battlefield {
  position: relative;
  height: 92px;
  margin-top: -1px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(7, 9, 16, 0.08), rgba(7, 9, 16, 0.78)),
    radial-gradient(ellipse at 50% 120%, rgba(255, 106, 61, 0.32), transparent 60%),
    #0c111b;
}

.battlefield svg {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 110px;
  opacity: 0.55;
}

.battlefield-slim {
  height: 86px;
  margin-top: 0;
}

.portal {
  display: grid;
  grid-template-columns: 1.55fr 0.85fr;
  gap: 18px;
  align-items: start;
}

.dungeon-cinematic .portal {
  grid-template-columns: 1fr;
}

.stack {
  display: grid;
  gap: 18px;
}

.get-in {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 28px;
  align-items: center;
}

.get-in .lede {
  margin-top: 4px;
}

.get-in-actions {
  display: grid;
  gap: 10px;
}

.get-in-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
}

.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.news-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  flex-wrap: wrap;
}

.section {
  padding: 88px 0;
}

.section-head {
  text-align: center;
  margin-bottom: 40px;
}

.section-head .display {
  font-size: clamp(32px, 4vw, 52px);
}

.section-head .kicker {
  font-size: 17px;
  letter-spacing: 0.14em;
}

.section-head-left {
  text-align: left;
  margin-bottom: 18px;
}

.section-head-left .lede {
  margin-left: 0;
  margin-right: 0;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--gold);
}

.ornament::before,
.ornament::after {
  content: "";
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--gold));
}

.ornament::after {
  background: linear-gradient(90deg, var(--gold), var(--cyan), transparent);
}

.panel {
  position: relative;
  padding: 26px 26px 26px 32px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #1c2844, #0a1020);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold-2), var(--accent), var(--cyan));
  box-shadow: 0 0 16px rgba(94, 234, 212, 0.35);
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px 280px at 100% 100%, rgba(139, 124, 255, 0.1), transparent 70%);
}

.panel:hover {
  border-color: rgba(94, 234, 212, 0.28);
}

.tab-panel:hover,
.cta-band:hover,
.news-empty:hover {
  border-color: var(--line);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--gold-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.45fr 0.9fr;
  gap: 22px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.faction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.meta {
  display: grid;
  gap: 0;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(186, 204, 255, 0.1);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.meta-row:last-child {
  border-bottom: 0;
}

.meta-row b {
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  text-align: right;
  flex: 0 0 auto;
}

.faction {
  overflow: hidden;
  min-height: 280px;
  padding: 24px 22px 22px;
}

.faction:hover {
  border-color: var(--line-strong);
}

.faction-mark {
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
}

.faction h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.08em;
}

.faction p {
  margin: 0;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
}

.faction.valorian { --accent: var(--valorian); }
.faction.derion { --accent: var(--derion); }

.faction .faction-mark {
  color: var(--accent);
}

.class-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: start;
  min-height: 148px;
  padding: 20px;
}

.class-icon {
  width: 56px;
  height: 56px;
  color: var(--gold-2);
}

.class-card h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.08em;
}

.class-card p {
  margin: 0;
  color: var(--cream-2);
  font-size: 14px;
  line-height: 1.55;
}

.class-card small {
  display: block;
  margin-top: 8px;
  color: var(--gold-dim);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dungeon-board {
  overflow: hidden;
  border-radius: var(--radius);
}

.dungeon-board .section-head-left .kicker {
  margin-bottom: 8px;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background:
    linear-gradient(180deg, rgba(20, 28, 48, 0.92), rgba(8, 14, 28, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-right: 1px solid var(--line);
  transition: color 0.2s ease, background 0.2s ease;
}

.tab:last-child {
  border-right: 0;
}

.tab:hover {
  color: var(--cream);
}

.tab:hover .tab-thumb {
  filter: brightness(1.08);
}

.tab.active {
  color: var(--cream);
  background: linear-gradient(180deg, rgba(240, 193, 75, 0.22), rgba(94, 234, 212, 0.08));
  box-shadow: inset 0 2px 0 var(--gold);
}

.tab-thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.tab.active .tab-thumb {
  filter: drop-shadow(0 0 10px rgba(240, 193, 75, 0.35));
  transform: translateY(-1px);
}

.tab-mythic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.tab-mythic::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 0;
  width: 72px;
  height: 52px;
  background: radial-gradient(circle, rgba(255, 92, 28, 0.38), rgba(255, 160, 50, 0.1) 48%, transparent 72%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(6px);
}

.tab-mythic .tab-thumb,
.tab-mythic > span:not(.mythic-sparks) {
  position: relative;
  z-index: 2;
}

.tab-mythic.active .tab-thumb {
  filter: drop-shadow(0 0 10px rgba(255, 150, 60, 0.55));
}

.mythic-sparks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.mythic-sparks i {
  position: absolute;
  left: var(--x, 50%);
  bottom: var(--y, 18%);
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff4c8 0%, #ffb347 38%, #ff5a1f 72%, transparent 100%);
  box-shadow:
    0 0 6px 1px rgba(255, 186, 80, 0.95),
    0 0 14px 4px rgba(255, 90, 30, 0.55);
  animation: mythic-spark-float var(--t, 2.6s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
  opacity: 0;
  will-change: transform, opacity;
}

.tab-mythic .mythic-sparks i:nth-child(1) { --x: 28%; --y: 22%; --s: 3px; --t: 2.4s; --d: 0s; }
.tab-mythic .mythic-sparks i:nth-child(2) { --x: 42%; --y: 12%; --s: 5px; --t: 3.1s; --d: -0.4s; }
.tab-mythic .mythic-sparks i:nth-child(3) { --x: 58%; --y: 28%; --s: 3px; --t: 2.2s; --d: -1.1s; }
.tab-mythic .mythic-sparks i:nth-child(4) { --x: 70%; --y: 16%; --s: 4px; --t: 2.8s; --d: -0.7s; }
.tab-mythic .mythic-sparks i:nth-child(5) { --x: 22%; --y: 40%; --s: 2px; --t: 3.4s; --d: -1.8s; }
.tab-mythic .mythic-sparks i:nth-child(6) { --x: 50%; --y: 8%; --s: 4px; --t: 2.5s; --d: -2.2s; }
.tab-mythic .mythic-sparks i:nth-child(7) { --x: 78%; --y: 36%; --s: 3px; --t: 3s; --d: -0.2s; }
.tab-mythic .mythic-sparks i:nth-child(8) { --x: 34%; --y: 48%; --s: 5px; --t: 2.7s; --d: -1.4s; }
.tab-mythic .mythic-sparks i:nth-child(9) { --x: 64%; --y: 44%; --s: 2px; --t: 2.1s; --d: -2.6s; }
.tab-mythic .mythic-sparks i:nth-child(10) { --x: 16%; --y: 20%; --s: 4px; --t: 3.2s; --d: -0.9s; }
.tab-mythic .mythic-sparks i:nth-child(11) { --x: 86%; --y: 18%; --s: 3px; --t: 2.9s; --d: -1.6s; }
.tab-mythic .mythic-sparks i:nth-child(12) { --x: 48%; --y: 32%; --s: 6px; --t: 2.3s; --d: -2s; }

@keyframes mythic-spark-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.35);
  }
  14% {
    opacity: 1;
  }
  62% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(6px, -34px, 0) scale(1.15);
  }
}

.tab-panels .panel {
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}

.dungeon-board .tab-panels .panel {
  border-radius: 0;
  border-bottom: 0;
  padding-bottom: 10px;
}

.dungeon-cta {
  display: flex;
  justify-content: stretch;
  margin-top: 0;
  padding: 8px 22px 18px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: #0a1020;
  box-shadow: inset 0 1px 0 rgba(186, 204, 255, 0.1);
}

.dungeon-board .dungeon-cta {
  width: 100%;
}

.dungeon-cta .btn {
  width: 100%;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: grid;
  grid-template-columns: 240px 1.2fr 0.9fr;
  gap: 28px;
  align-items: start;
}

.tab-panel-art-wrap {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.tab-panel-art-wrap .mythic-sparks {
  z-index: 0;
  inset: -18px -14px -10px;
  border-radius: 16px;
}

.tab-panel-art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 188px;
  object-fit: cover;
  object-position: center 55%;
  border: 1px solid rgba(186, 204, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.mythic-sparks-art i:nth-child(1) { --x: 8%; --y: 12%; --s: 4px; --t: 2.6s; --d: 0s; }
.mythic-sparks-art i:nth-child(2) { --x: 22%; --y: 6%; --s: 6px; --t: 3.2s; --d: -0.5s; }
.mythic-sparks-art i:nth-child(3) { --x: 78%; --y: 10%; --s: 3px; --t: 2.4s; --d: -1.2s; }
.mythic-sparks-art i:nth-child(4) { --x: 92%; --y: 22%; --s: 5px; --t: 2.9s; --d: -0.8s; }
.mythic-sparks-art i:nth-child(5) { --x: 4%; --y: 48%; --s: 3px; --t: 3.5s; --d: -1.7s; }
.mythic-sparks-art i:nth-child(6) { --x: 96%; --y: 54%; --s: 4px; --t: 2.7s; --d: -2.1s; }
.mythic-sparks-art i:nth-child(7) { --x: 14%; --y: 78%; --s: 5px; --t: 3s; --d: -0.3s; }
.mythic-sparks-art i:nth-child(8) { --x: 86%; --y: 82%; --s: 3px; --t: 2.2s; --d: -1.5s; }
.mythic-sparks-art i:nth-child(9) { --x: 50%; --y: 4%; --s: 4px; --t: 2.8s; --d: -2.4s; }
.mythic-sparks-art i:nth-child(10) { --x: 36%; --y: 88%; --s: 6px; --t: 3.3s; --d: -0.9s; }
.mythic-sparks-art i:nth-child(11) { --x: 64%; --y: 90%; --s: 3px; --t: 2.5s; --d: -1.9s; }
.mythic-sparks-art i:nth-child(12) { --x: 2%; --y: 28%; --s: 4px; --t: 2.1s; --d: -2.7s; }
.mythic-sparks-art i:nth-child(13) { --x: 98%; --y: 38%; --s: 5px; --t: 3.1s; --d: -0.6s; }
.mythic-sparks-art i:nth-child(14) { --x: 18%; --y: 58%; --s: 2px; --t: 2.3s; --d: -1.3s; }
.mythic-sparks-art i:nth-child(15) { --x: 82%; --y: 62%; --s: 4px; --t: 2.9s; --d: -2s; }
.mythic-sparks-art i:nth-child(16) { --x: 48%; --y: 96%; --s: 3px; --t: 2.6s; --d: -1s; }

@media (max-width: 1180px) {
  .dungeon-board .tab-panel.active {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .dungeon-board .tab-panel-art-wrap,
  .dungeon-board .tab-panel-art {
    grid-column: 1 / -1;
  }

  .dungeon-board .tab-panel-art {
    height: 150px;
  }
}

.tab-panel h2 {
  margin: 0 0 12px;
  color: var(--gold-2);
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.15;
}

.dungeon-copy {
  min-width: 0;
}

.dungeon-board .meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
}

.dungeon-board .meta-row b,
.dungeon-board .meta-val {
  justify-self: end;
}

.tab-panel p:not(.kicker) {
  margin: 0;
  max-width: 46ch;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.58;
}

.tab-panel p.dungeon-blurb {
  font-size: 16px;
  line-height: 1.45;
}

.dungeon-blurb-sm {
  display: none;
}

.class-card.simple {
  grid-template-columns: 1fr;
  min-height: 0;
}

.page-hero {
  position: relative;
  padding: 110px 0 48px;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/hero-iberia.webp?v=1") center 38% / cover no-repeat;
  z-index: -2;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 9, 16, 0.5) 0%, rgba(7, 9, 16, 0.78) 55%, var(--bg) 100%);
  z-index: -1;
}

.page-hero h1 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.18;
}

.page-hero .lede {
  font-size: 21px;
  max-width: 46ch;
}

.page-hero-dungeon::before {
  background-image: url("../assets/dungeon-mythic.webp?v=1");
  background-position: center 45%;
}

[hidden] {
  display: none !important;
}

.form {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 8px;
}

.field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 12, 22, 0.72);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(139, 124, 255, 0.16);
}

.faq details {
  border-bottom: 1px solid rgba(186, 204, 255, 0.1);
  padding: 16px 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq details p {
  margin: 10px 0 0;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
}

.steps {
  display: grid;
  gap: 16px;
}

.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
}

.step b {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--gold-2);
  font-family: var(--font-display);
  background: rgba(139, 124, 255, 0.08);
}

.step h3 {
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
}

.step p {
  margin: 0;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.shop-card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-card h3 {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
}

.shop-card p {
  margin: 0;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
}

.price {
  margin: 18px 0 14px;
  color: var(--gold-2);
  font-family: var(--font-display);
  font-size: 22px;
}

.empty {
  padding: 48px 28px;
  text-align: center;
}

.empty p {
  margin: 8px 0 0;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: 22px;
}

.account-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.account-switch button {
  min-height: 48px;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.account-switch button.active {
  color: #1a1206;
  background: linear-gradient(180deg, #f3d06a, #d4a017);
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: none;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(14, 18, 32, 0.94);
  color: var(--cream);
  box-shadow: var(--shadow);
}

.toast.show {
  display: block;
  animation: rise 0.35s ease;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.site-footer {
  padding: 48px 0 28px;
  border-top: 1px solid var(--line);
  background: #080b12;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 32px;
}

.footer-brand img {
  height: 38px;
}

.footer-brand p,
.site-footer a,
.legal {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.site-footer h4 {
  margin: 0 0 12px;
  color: var(--gold-3);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 8px;
}

.site-footer a:hover {
  color: var(--cream);
}

.legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
}

.cta-band h2 {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.25;
  text-wrap: balance;
}

.cta-band p {
  margin: 0;
  color: var(--cream-2);
  line-height: 1.55;
}

.note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 1200px) {
  .nav-cta .btn-ghost {
    display: none;
  }

  .nav-links a {
    padding: 10px 8px;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 980px) {
  .nav-links,
  .nav-cta .btn-ghost,
  .nav-cta .btn-gold {
    display: none;
  }

  .nav-links.open {
    display: grid;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 50;
    padding: 12px 20px 20px;
    background: #080b14;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
  }

  .site-header:has(.nav-links.open) {
    background: #080b14;
    border-bottom-color: var(--line);
  }

  .menu-btn {
    display: grid;
    place-items: center;
  }

  .split,
  .grid-2,
  .grid-3,
  .grid-6,
  .tab-panel.active,
  .shop-grid,
  .portal,
  .get-in {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .dungeon-board .tab-panels .tab-panel.active {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: 12px 10px;
  }

  .tab-panel-art {
    width: 100%;
    height: 148px;
  }

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

  .tab {
    flex-direction: column;
    gap: 6px;
    letter-spacing: 0.08em;
    font-size: 11px;
    min-height: 0;
    padding: 10px 6px 8px;
  }

  .tab-thumb {
    width: 40px;
    height: 40px;
  }

  .inline-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .dungeon-cta {
    margin-top: 0;
    padding: 4px 14px 16px;
  }

  .hero-stats {
    padding-bottom: 76px;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    margin-top: 28px;
  }

  .stat {
    padding: 16px 10px 14px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .stat:nth-child(2n) {
    border-right: 0;
  }

  .stat:nth-child(n + 3) {
    border-bottom: 0;
  }

  .stat strong {
    margin-top: 6px;
    font-size: 30px;
  }

  .cta-band,
  .legal,
  .panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    min-height: 100svh;
    padding-top: 0;
  }

  .hero-bg {
    object-position: 50% 32%;
    filter: saturate(0.86) brightness(0.28) contrast(1.18);
  }

  .hero-cast {
    object-position: 50% 38%;
    opacity: 0.78;
    filter: saturate(1.08) contrast(1.08) brightness(0.86);
  }

  .hero-shade {
    background:
      linear-gradient(180deg, rgba(6, 8, 16, 0.5) 0%, rgba(6, 8, 16, 0.28) 28%, rgba(6, 8, 16, 0.72) 64%, rgba(6, 8, 16, 0.96) 100%),
      linear-gradient(90deg, rgba(6, 8, 16, 0.55) 0%, rgba(6, 8, 16, 0.22) 100%);
  }

  .hero-inner {
    padding-top: 96px;
    max-width: 100%;
    text-align: center;
  }

  .hero-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .hero h1 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(28px, 7.4vw, 42px);
    line-height: 1.22;
    text-align: center;
  }

  .hero .lede,
  .page-hero .lede {
    font-size: 18px;
    max-width: none;
  }

  .faction-card,
  .class-splash {
    min-height: 340px;
  }
}

.dungeon-cinematic {
  position: relative;
  isolation: isolate;
}

.dungeon-cinematic-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
  z-index: -2;
}

.dungeon-cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10, 14, 32, 0.7) 12%, rgba(8, 12, 26, 0.68) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgba(7, 9, 16, 0.28), transparent 40%);
}

.dungeon-cinematic .section-head .display,
.dungeon-cinematic .section-head .lede {
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.65);
}

.dungeon-cinematic .stack > .section-head {
  margin-bottom: 10px;
}

.faction-card,
.class-splash {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #0c111b;
  transition: border-color 0.2s ease;
}

.faction-card:hover,
.class-splash:hover {
  border-color: rgba(255, 216, 106, 0.4);
}

.faction-card .faction-art,
.class-splash > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.faction-card .faction-art {
  filter: blur(1.5px) saturate(1.06) brightness(0.92);
  transform: scale(1.03);
  transform-origin: center top;
}

.faction-mark {
  position: absolute;
  inset: 8% 0 30% 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  transform: none;
  pointer-events: none;
}

.faction-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(168px, 44%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7, 9, 16, 0.28) 0%, rgba(7, 9, 16, 0.08) 55%, transparent 74%);
  filter: blur(10px);
  transform: translate(-50%, -50%);
  z-index: 0;
}

.faction-crest {
  position: relative;
  z-index: 1;
  width: min(210px, 58%);
  height: auto;
  max-height: 78%;
  display: block;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.faction-card-body,
.class-splash > div {
  position: absolute;
  inset: auto 0 0;
  padding: 26px 22px 22px;
  background: linear-gradient(180deg, transparent, rgba(7, 9, 18, 0.94) 42%);
}

.faction-card h3,
.class-splash h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.08em;
}

.faction-card p,
.class-splash p {
  margin: 0;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
}

.class-splash small {
  display: block;
  margin-top: 8px;
  color: var(--gold-2);
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@property --split {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 50%;
}

/* Each faction image is wider than its half so that sliding the split open reveals more of it
   instead of rescaling it; the text stays on the container grid while the backgrounds run edge to edge.
   Crests are placed in band coordinates and clamped against the divider so they can never cross it. */
.faction-band {
  --fb-h: clamp(440px, 34vw, 560px);
  --fb-cut: clamp(14px, 2.4vw, 44px);
  --fb-skew: clamp(14px, 1.8vw, 36px);
  --fb-cw: min(1180px, 100% - 40px);
  --fb-crest: 180px;
  --fb-gap: 24px;
  --fb-shift: min(11%, 240px);
  --split: 50%;
  position: relative;
  height: var(--fb-h);
  transition: --split 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.faction-band:has(.valorian:hover, .valorian:focus-within) {
  --split: calc(50% + var(--fb-shift));
}

.faction-band:has(.derion:hover, .derion:focus-within) {
  --split: calc(50% - var(--fb-shift));
}

.faction-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0c111b;
  clip-path: polygon(0 0, 100% var(--fb-cut), 100% 100%, 0 calc(100% - var(--fb-cut)));
}

.faction-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 9, 18, 0.45) 0%, transparent 24%, rgba(7, 9, 18, 0.18) 38%, rgba(7, 9, 18, 0.78) 62%, rgba(7, 9, 18, 0.94) 100%),
    linear-gradient(90deg, rgba(7, 9, 18, 0.4) 0%, transparent 14%, transparent 86%, rgba(7, 9, 18, 0.4) 100%);
}

.faction-side {
  position: absolute;
  inset: 0;
}

.faction-side.valorian {
  clip-path: polygon(0 0, calc(var(--split) + var(--fb-skew)) 0, calc(var(--split) - var(--fb-skew)) 100%, 0 100%);
}

.faction-side.derion {
  clip-path: polygon(calc(var(--split) + var(--fb-skew)) 0, 100% 0, 100% 100%, calc(var(--split) - var(--fb-skew)) 100%);
}

.faction-side img {
  position: absolute;
  top: 0;
  width: 68%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

.faction-side.valorian img {
  left: 0;
  object-position: 62% 42%;
  transform-origin: 30% 50%;
  filter: brightness(0.84) saturate(1.04);
}

.faction-side.derion img {
  right: 0;
  object-position: 45% 38%;
  transform-origin: 70% 50%;
  filter: brightness(0.95) saturate(1.06);
}

.faction-band:has(.valorian:hover, .valorian:focus-within) .faction-side.valorian img,
.faction-band:has(.derion:hover, .derion:focus-within) .faction-side.derion img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1.1);
}

.faction-band:has(.derion:hover, .derion:focus-within) .faction-side.valorian img,
.faction-band:has(.valorian:hover, .valorian:focus-within) .faction-side.derion img {
  filter: brightness(0.5) saturate(0.75);
}

/* Derion: the crystal shrine (assets/faction-derion-crystal.webp, 1360 x 752). The scene keeps the image's own shape so
   the crystal, at (51.7%, 21.7%) of it, can be placed exactly. It is placed so the crystal lands between the divider and the Derion crest
   (--dx), and sized so it still fills the Derion half when Derion is hovered and the split opens. */
.faction-side.derion .derion-scene {
  --dx: calc(50% + (var(--fb-skew) + var(--fb-cw) / 4 - var(--fb-crest) / 2) / 2);
  --dw: max(calc(var(--fb-h) * 2.52), calc((100% - var(--dx)) * 2.07));
  position: absolute;
  left: calc(var(--dx) - var(--dw) * 0.517);
  top: calc(var(--fb-cut) + 16% - var(--dw) * 0.553 * 0.217);
  width: var(--dw);
  aspect-ratio: 1360 / 752;
  transform-origin: 52% 22%;
  filter: brightness(0.92) saturate(1.06);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

.faction-band:has(.derion:hover, .derion:focus-within) .faction-side.derion .derion-scene {
  transform: scale(1.04);
  filter: brightness(1.04) saturate(1.12);
}

.faction-band:has(.valorian:hover, .valorian:focus-within) .faction-side.derion .derion-scene {
  filter: brightness(0.5) saturate(0.75);
}

.faction-side.derion .derion-scene img {
  inset: 0;
  right: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none !important;
  transform: none !important;
}



/* Valorian: the statue court (build-valorian-art.cjs cut its sky out) over a daylight sky with clouds drifting
   behind the towers, a soft sun and slow shafts of light falling on the statue. The scene takes the box the plain
   image had, and carries the hover zoom and dimming instead of the image. */
.faction-side.valorian .valorian-scene {
  position: absolute;
  top: 0;
  /* The statue stands in the middle of the shot, here a little right of the text block's crest. */
  left: 0;
  width: 70%;
  height: 100%;
  overflow: hidden;
  transform-origin: 30% 50%;
  filter: brightness(0.9) saturate(1.04);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

.faction-band:has(.valorian:hover, .valorian:focus-within) .faction-side.valorian .valorian-scene {
  transform: scale(1.04);
  filter: brightness(1.02) saturate(1.1);
}

.faction-band:has(.derion:hover, .derion:focus-within) .faction-side.valorian .valorian-scene {
  filter: brightness(0.5) saturate(0.75);
}

.valorian-sky {
  position: absolute;
  inset: 0 0 45%;
  overflow: hidden;
  background: linear-gradient(180deg, #5d93cf 0%, #8fb8e2 55%, #c9dcef 100%);
}

.valorian-sky i {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: 0 0 / 50% 100% repeat-x;
  filter: saturate(0.15) brightness(1.25);
  will-change: transform;
  animation: sky-drift linear infinite;
}

.valorian-sky .sky-far {
  background-image: url("../assets/sky-clouds-far.webp?v=1");
  opacity: 0.75;
  animation-duration: 120s;
}

.valorian-sky .sky-near {
  top: 10%;
  height: 100%;
  background-image: url("../assets/sky-clouds-near.webp?v=1");
  opacity: 0.95;
  animation-duration: 55s;
}

.valorian-sun {
  position: absolute;
  left: 72%;
  top: 4%;
  width: 40%;
  aspect-ratio: 1.6;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 225, 0.95), rgba(255, 236, 190, 0.35) 45%, transparent);
  animation: sky-sun 9s ease-in-out infinite;
}

.faction-side.valorian .valorian-scene img {
  left: 0;
  width: 100%;
  object-position: 50% 0%;
  filter: none !important;
  transform-origin: 50% 40%;
  animation: valorian-breathe 22s ease-in-out infinite alternate;
}

/* Shafts of sunlight from the upper right, swaying a little and fading up and down. */
.valorian-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    linear-gradient(112deg, transparent 38%, rgba(255, 238, 196, 0.16) 44%, transparent 50%),
    linear-gradient(118deg, transparent 50%, rgba(255, 238, 196, 0.12) 55%, transparent 60%),
    linear-gradient(106deg, transparent 58%, rgba(255, 238, 196, 0.1) 62%, transparent 66%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 85%);
  transform-origin: 80% 0;
  animation: valorian-rays 11s ease-in-out infinite alternate;
}

@keyframes valorian-breathe {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

@keyframes valorian-rays {
  0% { opacity: 0.55; transform: rotate(-1.5deg); }
  100% { opacity: 1; transform: rotate(1.5deg); }
}

.faction-divider {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 216, 106, 0.95) 24%, rgba(255, 216, 106, 0.95) 76%, transparent 100%);
  clip-path: polygon(calc(var(--split) + var(--fb-skew) - 1px) 0, calc(var(--split) + var(--fb-skew) + 1px) 0, calc(var(--split) - var(--fb-skew) + 1px) 100%, calc(var(--split) - var(--fb-skew) - 1px) 100%);
}

.faction-band::before,
.faction-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(240, 193, 75, 0.75) 22%, rgba(255, 216, 106, 0.95) 50%, rgba(240, 193, 75, 0.75) 78%, transparent 100%);
}

.faction-band::before {
  clip-path: polygon(0 0, 100% var(--fb-cut), 100% calc(var(--fb-cut) + 1.5px), 0 1.5px);
}

.faction-band::after {
  clip-path: polygon(0 calc(100% - var(--fb-cut) - 1.5px), 100% calc(100% - 1.5px), 100% 100%, 0 calc(100% - var(--fb-cut)));
}

.faction-panes {
  display: contents;
}

.faction-pane {
  transition: opacity 0.4s ease;
}

.faction-band:has(.derion:hover, .derion:focus-within) .faction-pane.valorian,
.faction-band:has(.valorian:hover, .valorian:focus-within) .faction-pane.derion {
  opacity: 0.6;
}

/* The faction crest (build-crest-art.cjs) heads its text block: a halo in the faction's colour breathing behind it
   and a glint running across the metal now and then, masked to the crest's own shape. */
.faction-emblem {
  --emblem: clamp(96px, 9vw, 136px);
  position: relative;
  display: inline-block;
  width: var(--emblem);
  margin-bottom: 6px;
  vertical-align: bottom;
  transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.faction-emblem::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--halo), 0.55), rgba(var(--halo), 0.18) 55%, transparent);
  filter: blur(6px);
  animation: emblem-halo 5s ease-in-out infinite;
}

.faction-pane.valorian .faction-emblem {
  --halo: 255, 196, 90;
  --crest: url("../assets/crest-valorian.webp?v=3");
  transform-origin: 30% 100%;
}

.faction-pane.derion .faction-emblem {
  --halo: 255, 206, 120;
  --crest: url("../assets/crest-derion.webp?v=3");
  transform-origin: 70% 100%;
}

.faction-emblem img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7));
}

.faction-emblem i {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 250, 225, 0.75) 50%, transparent 62%) -160% 0 / 260% 100% no-repeat;
  -webkit-mask: var(--crest) center / contain no-repeat;
  mask: var(--crest) center / contain no-repeat;
  animation: emblem-glint 6s ease-in-out infinite;
}

.faction-pane.derion .faction-emblem i {
  animation-delay: -3s;
}

.faction-band:has(.valorian:hover, .valorian:focus-within) .faction-pane.valorian .faction-emblem,
.faction-band:has(.derion:hover, .derion:focus-within) .faction-pane.derion .faction-emblem {
  scale: 1.08;
}

@keyframes emblem-halo {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes emblem-glint {
  0%, 60% { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}

.faction-pane-body {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--fb-cut) + 26px);
  max-width: min(470px, var(--fb-cw) / 2);
  padding: 0 28px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
}

.faction-pane.valorian .faction-pane-body {
  left: calc(50% - var(--fb-cw) / 2);
}

.faction-pane.derion .faction-pane-body {
  right: calc(50% - var(--fb-cw) / 2);
  text-align: right;
}

.faction-pane-body > p:not(.kicker) {
  transition: opacity 0.4s ease;
}

.faction-band:has(.derion:hover, .derion:focus-within) .faction-pane.valorian .faction-pane-body > p:not(.kicker),
.faction-band:has(.valorian:hover, .valorian:focus-within) .faction-pane.derion .faction-pane-body > p:not(.kicker) {
  opacity: 0;
}

.faction-pane h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 0.08em;
}

.faction-pane p {
  margin: 0;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
}

.faction-pane .kicker {
  color: var(--accent, var(--gold-2));
}

.faction-pane.valorian { --accent: var(--valorian); }
.faction-pane.derion { --accent: var(--derion); }

.faction-pane-cta {
  overflow: hidden;
  max-height: 0;
  margin: 0 -14px;
  padding: 0 14px;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.faction-band:has(.valorian:hover, .valorian:focus-within) .faction-pane.valorian .faction-pane-cta,
.faction-band:has(.derion:hover, .derion:focus-within) .faction-pane.derion .faction-pane-cta {
  max-height: 96px;
  padding-top: 18px;
  padding-bottom: 14px;
  margin-bottom: -14px;
  opacity: 1;
}

.faction-cta-touch {
  display: none !important;
}

@media (hover: none), (max-width: 720px) {
  .faction-band {
    --fb-shift: 0px;
  }

  .faction-pane-cta {
    max-height: none;
    padding-top: 14px;
    padding-bottom: 14px;
    margin-bottom: -14px;
    opacity: 1;
  }

  .faction-cta-desk {
    display: none !important;
  }

  .faction-cta-touch {
    display: inline-flex !important;
  }

  /* Both factions' buttons one size: left alone they took the width of the name above them (Valorian vs Derion). */
  .faction-pane .faction-cta-touch {
    width: 9.5em;
    max-width: none;
    justify-content: center;
  }

  .faction-pane-body {
    max-width: none;
  }
}

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

.class-select {
  margin-top: 8px;
}

/* Full-width band like the armor/faction/mount sections. The background and every character layer
   share one 2160x720 canvas, so under identical object-fit/position they always line up. */
.class-select-stage {
  --cs-cut: clamp(14px, 2.4vw, 44px);
  position: relative;
  overflow: hidden;
  height: min(68vh, 740px);
  min-height: 520px;
  background: #070910;
  clip-path: polygon(0 0, 100% var(--cs-cut), 100% 100%, 0 calc(100% - var(--cs-cut)));
  container-type: size;
  touch-action: pan-y;
}

.class-select-stage::before,
.class-select-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(240, 193, 75, 0.75) 22%, rgba(255, 216, 106, 0.95) 50%, rgba(240, 193, 75, 0.75) 78%, transparent 100%);
}

.class-select-stage::before {
  clip-path: polygon(0 0, 100% var(--cs-cut), 100% calc(var(--cs-cut) + 1.5px), 0 1.5px);
}

.class-select-stage::after {
  clip-path: polygon(0 calc(100% - var(--cs-cut) - 1.5px), 100% calc(100% - 1.5px), 100% 100%, 0 calc(100% - var(--cs-cut)));
}

.class-select-bg,
.class-select-slide > img,
.class-select-slide > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 70%;
}

/* Drifting clouds over the painted sky. The box reproduces the bg's cover crop (3:1 art, object-position 50% 70%)
   so the mask lines up with the cliffs at any stage size; it covers the top 46% of the art. It lives outside the
   slides, so switching class never restarts it. Two tiling layers at different speeds give the depth. */
.class-select-sky {
  --sky-w: max(100cqw, 300cqh);
  position: absolute;
  left: calc((100cqw - var(--sky-w)) * 0.5);
  top: calc((100cqh - var(--sky-w) / 3) * 0.7);
  width: var(--sky-w);
  height: calc(var(--sky-w) / 3 * 0.46);
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 221' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cmask id='m'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill='%23fff' d='M372 -10L395 60L410 105L432 150L470 160L510 150L560 140L620 165L700 190L760 205L830 195L900 170L960 150L1005 165L1025 120L1050 70L1075 30L1098 -10Z'/%3E%3Cpath fill='%23fff' d='M-10 -10L135 -10L128 40L100 75L60 95L20 110L-10 120Z'/%3E%3Cellipse fill='%23000' cx='565' cy='45' rx='34' ry='48'/%3E%3Cellipse fill='%23000' cx='506' cy='98' rx='28' ry='36'/%3E%3C/g%3E%3C/mask%3E%3Crect width='1440' height='221' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 221' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cmask id='m'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill='%23fff' d='M372 -10L395 60L410 105L432 150L470 160L510 150L560 140L620 165L700 190L760 205L830 195L900 170L960 150L1005 165L1025 120L1050 70L1075 30L1098 -10Z'/%3E%3Cpath fill='%23fff' d='M-10 -10L135 -10L128 40L100 75L60 95L20 110L-10 120Z'/%3E%3Cellipse fill='%23000' cx='565' cy='45' rx='34' ry='48'/%3E%3Cellipse fill='%23000' cx='506' cy='98' rx='28' ry='36'/%3E%3C/g%3E%3C/mask%3E%3Crect width='1440' height='221' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.class-select-sky i {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: 0 0 / 50% 100% repeat-x;
  will-change: transform;
  animation: sky-drift linear infinite;
}

.class-select-sky .sky-far {
  background-image: url("../assets/sky-clouds-far.webp?v=1");
  opacity: 0.62;
  animation-duration: 150s;
}

.class-select-sky .sky-near {
  top: 8%;
  height: 92%;
  background-image: url("../assets/sky-clouds-near.webp?v=1");
  opacity: 0.72;
  animation-duration: 75s;
}

/* The sunset breathes behind the ridge (the sun sits at x 67%, y 69% of this box). */
.class-select-sky .sky-sun {
  position: absolute;
  left: 67%;
  top: 69%;
  width: 30%;
  aspect-ratio: 2.2;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 150, 0.5), rgba(255, 168, 110, 0.16) 55%, transparent);
  animation: sky-sun 9s ease-in-out infinite;
}

@keyframes sky-drift {
  to { transform: translateX(-50%); }
}

@keyframes sky-sun {
  0%, 100% { opacity: 0.5; scale: 0.92; }
  50% { opacity: 1; scale: 1.06; }
}

.class-select:focus {
  outline: none;
}

.class-select-slides {
  position: absolute;
  inset: 0;
}

.class-select-slides::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 9, 18, 0.5) 0%, transparent 16%, transparent 84%, rgba(7, 9, 18, 0.5) 100%);
}

.class-select-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.62s ease;
}

.class-select-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.class-select-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 84px 88px calc(var(--cs-cut) + 22px) max(36px, (100% - 1180px) / 2);
  background: linear-gradient(180deg, transparent 0%, rgba(6, 8, 16, 0.18) 28%, rgba(6, 8, 16, 0.82) 100%);
}

.class-select-copy .eyebrow {
  color: var(--gold-2);
}

.class-select-copy h3 {
  margin: 8px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.class-select-copy p {
  margin: 0;
  max-width: 46ch;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
}

.class-select-nav {
  position: absolute;
  top: 46%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 216, 106, 0.4);
  border-radius: 50%;
  background: rgba(8, 12, 22, 0.72);
  color: var(--gold-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.class-select-nav:hover {
  border-color: var(--gold-2);
  background: rgba(18, 16, 28, 0.9);
  color: var(--gold-3);
}

.class-select-nav.prev {
  left: 16px;
}

.class-select-nav.next {
  right: 16px;
}

.class-select-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.class-select-legend button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.class-select-legend button:hover,
.class-select-legend button.is-active {
  color: var(--gold-2);
  border-color: rgba(240, 193, 75, 0.35);
  background: rgba(240, 193, 75, 0.08);
}

/* Both clips are cut from one locked-camera 1280x720 shot: hero = x 0–662, portal = x 640–1280.
   The hero layer fades out over its last 16px (x 646–662), a strip that is static in every recording. */
/* The band spans the page but stays short; the 16:9 scene is never cropped, so it sits centred
   at the band's height and the blurred backdrop carries the same shot out to the edges. */
.armor-stage {
  --armor-h: min(56.25vw, max(340px, 62vh), 620px);
  --armor-w: calc(var(--armor-h) * 16 / 9);
  --armor-cut: clamp(14px, 2.4vw, 44px);
  --armor-clip: polygon(0 var(--armor-cut), 100% 0, 100% calc(100% - var(--armor-cut)), 0 100%);
  position: relative;
  height: var(--armor-h);
  touch-action: pan-y;
}

.armor-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1a1612;
  clip-path: var(--armor-clip);
}

/* extend.jpg is the shot outpainted sideways at the clip's 720px height; the original frame sits
   at x 615–1895 of 2408 (Markut: 578–1858 of 2360), so the panorama is placed to land under the videos. */
.armor-backdrop {
  --pano-w: 3.3444;
  --pano-x: 0.8542;
  position: absolute;
  top: 0;
  left: calc(50% - var(--armor-w) / 2 - var(--armor-h) * var(--pano-x));
  width: calc(var(--armor-h) * var(--pano-w));
  height: 100%;
  background: 0 0 / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.is-near .armor-backdrop {
  background-image: url("../assets/armor/extend.webp?v=2");
}

.armor-backdrop.is-markut {
  --pano-w: 3.2778;
  --pano-x: 0.8028;
}

.is-near .armor-backdrop.is-markut {
  background-image: url("../assets/armor/markut/extend.webp?v=2");
}

.armor-backdrop.is-arriving {
  --realm-at: calc(var(--armor-h) * var(--pano-x) + var(--armor-w) * 0.67) 33%;
  -webkit-mask-image:
    radial-gradient(circle var(--realm-r) at var(--realm-at), #000 62%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle var(--realm-r) at var(--realm-at), #000 62%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
  animation: realm-reveal 1.3s cubic-bezier(0.45, 0.05, 0.25, 1) both;
}

.armor-scene {
  position: absolute;
  top: 0;
  left: calc(50% - var(--armor-w) / 2);
  width: var(--armor-w);
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.armor-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 75% at 0% 100%, rgba(6, 8, 16, 0.82), transparent 72%),
    linear-gradient(90deg, rgba(6, 8, 16, 0.45) 0%, transparent 14%, transparent 86%, rgba(6, 8, 16, 0.45) 100%),
    linear-gradient(180deg, rgba(6, 8, 16, 0.4), transparent 22%, transparent 72%, rgba(6, 8, 16, 0.5));
}

.armor-stage::before,
.armor-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(240, 193, 75, 0.75) 22%, rgba(255, 216, 106, 0.95) 50%, rgba(240, 193, 75, 0.75) 78%, transparent 100%);
}

.armor-stage::before {
  clip-path: polygon(0 var(--armor-cut), 100% 0, 100% 1.5px, 0 calc(var(--armor-cut) + 1.5px));
}

.armor-stage::after {
  clip-path: polygon(0 calc(100% - 1.5px), 100% calc(100% - var(--armor-cut) - 1.5px), 100% calc(100% - var(--armor-cut)), 0 100%);
}

.armor-stage video {
  position: absolute;
  top: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.armor-portal {
  left: 50%;
  width: 50%;
}

/* Every hero clip shares the same static background, so the incoming clip fades in on top
   of the outgoing one (kept fully opaque underneath) through a mask around the character only. */
.armor-hero {
  left: 0;
  z-index: 0;
  width: 51.7188%;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 97.58%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 97.58%, transparent 100%);
}

.armor-hero.is-leaving {
  z-index: 1;
  opacity: 1;
}

.armor-hero.is-active {
  z-index: 2;
  opacity: 1;
}

.armor-hero.is-entering {
  -webkit-mask-image: radial-gradient(ellipse 26% 52% at 72% 55%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 26% 52% at 72% 55%, #000 55%, transparent 100%);
  animation: armor-fade 0.6s ease-in-out both;
}

@keyframes armor-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.armor-controls {
  position: absolute;
  left: max(28px, calc(50% - 590px));
  bottom: 30px;
  z-index: 4;
  text-align: left;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.armor-controls .eyebrow {
  margin: 0;
  color: var(--gold-2);
}

.armor-controls h3 {
  margin: 6px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.armor-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 216, 106, 0.45);
  border-radius: 999px;
  background: rgba(8, 12, 22, 0.72);
  color: var(--gold-2);
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.armor-switch:hover,
.armor-switch:focus-visible {
  border-color: var(--gold-2);
  color: var(--gold-3);
  box-shadow: 0 0 22px rgba(255, 216, 106, 0.28), 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* Portal clip is 640x720 at x 50–100% of the stage: ring ≈ x 52–87%, y 4–60%; pedestal ≈ x 57–80%, y 68–96%.
   The box stops at the ring's right tip so the floor beyond it is walkable; floor clicks inside it are
   routed to walking in js/main.js (onPortalArt). */
.armor-portal-hit {
  position: absolute;
  left: 52%;
  top: 3%;
  z-index: 3;
  width: 35.5%;
  height: 90%;
  border-radius: 40% 40% 24% 24%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.armor-portal-hint {
  position: absolute;
  left: 50%;
  bottom: 2%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid rgba(182, 160, 255, 0.35);
  border-radius: 999px;
  background: rgba(8, 10, 22, 0.66);
  color: #d9d0ff;
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.armor-portal-hint::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9a6ff;
  box-shadow: 0 0 0 3px rgba(185, 166, 255, 0.18), 0 0 10px rgba(185, 166, 255, 0.9);
  animation: pip-pulse 1.8s ease-in-out infinite;
}

.armor-portal-hit:hover .armor-portal-hint,
.armor-portal-hit:focus-visible .armor-portal-hint {
  border-color: rgba(200, 184, 255, 0.75);
  color: #fff;
  box-shadow: 0 0 22px rgba(160, 136, 255, 0.4);
}

/* Click-to-walk (desktop): the patch is the standing hero painted out of the shot (x 326–646,
   y 120–676 of 1280x720) and covers him on the live clip while the sprite walks the floor.
   Sprite frames are 400x560 with the feet at y 554 and the body 533px tall (0.654 of the shot at home). */
.armor-patch {
  position: absolute;
  left: 25.4688%;
  top: 16.6667%;
  z-index: 3;
  width: 25%;
  height: 77.2222%;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Holds the walker and the click marks. While the hero is further back than the pedestal's centre it is masked
   by the portal art in scene coordinates (1600x900 = the 16:9 scene). Layer 1: pedestal, crystal and both beams.
   Layer 2, subtracted from it: the ring band (its opening stays see-through), which spins about x 70.12% of the
   scene, so js/main.js squeezes it each frame to the clip's |cos| (--ring-k) and re-centres it (--ring-p). */
.armor-walk-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.armor-walk-layer.is-behind {
  --ring-k: 1;
  --ring-p: 79.16%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cmask id='m'%3E%3Crect width='1600' height='900' fill='%23fff'/%3E%3Cg fill='%23000' filter='url(%23f)'%3E%3Cpath d='M957 634L915 720L906 837Q1088 900 1272 837L1264 720L1219 634Z'/%3E%3Cellipse cx='1088' cy='634' rx='133' ry='27'/%3E%3Cellipse cx='1072' cy='319' rx='53' ry='69'/%3E%3Crect x='1037' y='495' width='75' height='140'/%3E%3Crect x='1000' y='0' width='88' height='95'/%3E%3C/g%3E%3C/mask%3E%3Crect width='1600' height='900' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 450' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 225a248 225 0 1 0 496 0a248 225 0 1 0 -496 0ZM83 222a137 141 0 1 0 274 0a137 141 0 1 0 -274 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cfilter id='f'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Cmask id='m'%3E%3Crect width='1600' height='900' fill='%23fff'/%3E%3Cg fill='%23000' filter='url(%23f)'%3E%3Cpath d='M957 634L915 720L906 837Q1088 900 1272 837L1264 720L1219 634Z'/%3E%3Cellipse cx='1088' cy='634' rx='133' ry='27'/%3E%3Cellipse cx='1072' cy='319' rx='53' ry='69'/%3E%3Crect x='1037' y='495' width='75' height='140'/%3E%3Crect x='1000' y='0' width='88' height='95'/%3E%3C/g%3E%3C/mask%3E%3Crect width='1600' height='900' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 450' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 225a248 225 0 1 0 496 0a248 225 0 1 0 -496 0ZM83 222a137 141 0 1 0 274 0a137 141 0 1 0 -274 0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%, calc(31% * var(--ring-k)) 50%;
  mask-size: 100% 100%, calc(31% * var(--ring-k)) 50%;
  -webkit-mask-position: 0 0, var(--ring-p) 15.28%;
  mask-position: 0 0, var(--ring-p) 15.28%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}
.armor-walker {
  position: absolute;
  left: calc(var(--wx, 0.3672) * 100%);
  top: calc(var(--wy, 0.8861) * 100%);
  z-index: 3;
  height: calc(var(--ws, 1) * 68.71%);
  aspect-ratio: 400 / 560;
  translate: -50% -98.93%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.armor-walker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 98.93%;
  width: 66%;
  height: 8%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(12, 9, 6, 0.6), rgba(12, 9, 6, 0.28) 55%, transparent);
}

.armor-walker-body {
  position: absolute;
  inset: 0;
  /* hero.webp: a row per view, the standing pose then 8 stride frames across. */
  background: 0 0 / 900% 700% no-repeat;
  background-position: calc(var(--wc, 0) * 100% / 8) calc(var(--wf, 0) * 100% / 6);
  transform-origin: 50% 98.93%;
}

.walk-ready .armor-walker-body {
  background-image: url("../assets/armor/walk/hero.webp?v=2");
}

.armor-walker.is-flipped .armor-walker-body {
  scale: -1 1;
}

.armor-stage.is-walking .armor-patch,
.armor-stage.is-walking .armor-walker {
  opacity: 1;
}

.armor-stage.can-walk .armor-frame {
  cursor: pointer;
}

.armor-walk-mark {
  position: absolute;
  z-index: 3;
  width: calc(var(--ms) * 8%);
  aspect-ratio: 3.2;
  translate: -50% -50%;
  border: 2px solid rgba(255, 216, 106, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 216, 106, 0.7), inset 0 0 8px rgba(255, 216, 106, 0.5);
  pointer-events: none;
  animation: walk-mark 0.7s ease-out both;
}

@keyframes walk-mark {
  from { opacity: 1; scale: 0.35; }
  to { opacity: 0; scale: 1.2; }
}

.armor-walk-hint {
  position: absolute;
  left: 36.72%;
  top: 92%;
  z-index: 3;
  display: none;
  padding: 6px 13px;
  border: 1px solid rgba(255, 216, 106, 0.35);
  border-radius: 999px;
  background: rgba(8, 12, 22, 0.66);
  color: var(--gold-2);
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% 0;
  pointer-events: none;
  opacity: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 0.25s ease;
}

.can-walk .armor-walk-hint {
  display: block;
}

.can-walk:not(.has-walked) .armor-frame:hover .armor-walk-hint {
  opacity: 1;
}

@property --realm-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 1px;
}

/* The incoming realm grows out of the portal crystal, which sits at ≈ (67%, 33%) of the stage:
   x 33.6% of the portal clip and x 129.5% of the hero clip (the hero box is 51.72% of the stage wide). */
.armor-stage video.is-pending,
.armor-backdrop.is-pending {
  visibility: hidden;
}

.armor-portal.is-arriving,
.armor-hero.is-arriving {
  z-index: 3;
  opacity: 1;
  animation: realm-reveal 1.3s cubic-bezier(0.45, 0.05, 0.25, 1) both;
}

.armor-portal.is-arriving {
  -webkit-mask-image: radial-gradient(circle var(--realm-r) at 33.6% 33%, #000 62%, transparent 100%);
  mask-image: radial-gradient(circle var(--realm-r) at 33.6% 33%, #000 62%, transparent 100%);
}

.armor-hero.is-arriving {
  -webkit-mask-image:
    radial-gradient(circle var(--realm-r) at 129.5% 33%, #000 62%, transparent 100%),
    linear-gradient(90deg, #000 97.58%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle var(--realm-r) at 129.5% 33%, #000 62%, transparent 100%),
    linear-gradient(90deg, #000 97.58%, transparent 100%);
  mask-composite: intersect;
}

@keyframes realm-reveal {
  from { --realm-r: 1px; }
  to { --realm-r: 2200px; }
}

.armor-warp {
  position: absolute;
  left: 67%;
  top: 33%;
  z-index: 4;
  width: 34%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(240, 234, 255, 0.85) 0%, rgba(168, 140, 255, 0.45) 30%, transparent 70%);
  mix-blend-mode: screen;
}

.armor-warp.is-on {
  animation: realm-glow 1.3s ease-out both;
}

@keyframes realm-glow {
  0% { opacity: 0; scale: 0.4; }
  30% { opacity: 0.85; scale: 1; }
  100% { opacity: 0; scale: 1.7; }
}

.portal-modal {
  position: absolute;
  inset: 0;
  z-index: 6;
}

.portal-modal[hidden] {
  display: none;
}

.portal-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at calc(50% + var(--armor-w) / 4) 50%, rgba(2, 3, 8, 0.25), rgba(2, 3, 8, 0.55));
  clip-path: var(--armor-clip);
  animation: portal-fade 0.2s ease both;
}

.portal-win {
  position: absolute;
  left: calc(50% + var(--armor-w) / 4);
  top: 50%;
  display: flex;
  flex-direction: column;
  width: min(var(--armor-w) * 0.44, 420px);
  height: 86%;
  max-height: 420px;
  translate: -50% -50%;
  padding: 4px;
  border: 1px solid #1c1708;
  border-radius: 6px;
  background: linear-gradient(180deg, #8d7a3c 0%, #4c4119 18%, #2b250e 50%, #4c4119 82%, #8d7a3c 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 233, 160, 0.25);
  color: #e9dfb8;
  font-family: Tahoma, Verdana, var(--font-ui), sans-serif;
  animation: portal-pop 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.portal-win-bar {
  position: relative;
  display: grid;
  place-items: center;
  height: 34px;
  border: 1px solid #0d0b04;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #5d5226 0%, #3a3215 48%, #241f0b 52%, #322b12 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, 0.28);
}

.portal-win-bar h3 {
  margin: 0;
  color: #f6d66a;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 #000;
}

.portal-win-x {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  translate: 0 -50%;
  color: #8d8152;
  font-size: 20px;
  line-height: 1;
}

.portal-win-x:hover {
  color: #f6d66a;
}

.portal-win-body {
  position: relative;
  flex: 1;
  margin-top: 4px;
  padding: 18px 40px 18px 18px;
  border: 1px solid #0d0b04;
  background: #020202;
  box-shadow: inset 0 0 0 1px #3b3317;
}

.portal-win-body::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  bottom: 10px;
  width: 12px;
  border-left: 1px solid #2a2410;
  background:
    linear-gradient(180deg, #4a4020, #26200c) top / 12px 10px no-repeat,
    linear-gradient(0deg, #4a4020, #26200c) bottom / 12px 10px no-repeat;
}

.portal-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 10px;
  color: #f6d66a;
  font-size: 16px;
  cursor: default;
  user-select: none;
}

.portal-group-icon {
  width: 12px;
  height: 12px;
  border: 1px solid #a99451;
  background: linear-gradient(135deg, #e8d48b, #5b4c1d);
  rotate: 45deg;
  box-shadow: 0 0 0 2px #1a1608;
}

.portal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 4px 6px 4px;
  border-bottom: 1px solid #3b2f17;
  color: #efe2a8;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  user-select: none;
}

.portal-row:hover,
.portal-row.is-selected {
  background: linear-gradient(90deg, rgba(246, 214, 106, 0.16), rgba(246, 214, 106, 0.04));
}

.portal-cost {
  display: flex;
  gap: 22px;
  color: #b9b29a;
  font-weight: 400;
}

.portal-cost i {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
}

.portal-cost i::after {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset -2px -2px 0 rgba(0, 0, 0, 0.25);
}

.portal-cost .c-gold::after { background: radial-gradient(circle at 35% 30%, #ffe9a0, #d79b1e 60%, #7a4f08); }
.portal-cost .c-silver::after { background: radial-gradient(circle at 35% 30%, #ffffff, #a9b3b8 60%, #4f5a60); }
.portal-cost .c-copper::after { background: radial-gradient(circle at 35% 30%, #ffc18a, #c4621e 60%, #5f2a08); }

.portal-win-foot {
  display: flex;
  justify-content: center;
  gap: 38px;
  margin-top: 4px;
  padding: 14px 0 12px;
  border: 1px solid #0d0b04;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #2c2611 0%, #1a160a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, 0.12);
}

.portal-btn {
  min-width: 118px;
  padding: 8px 18px;
  border: 1px solid #0d0b04;
  border-radius: 6px;
  background: linear-gradient(180deg, #5b5130 0%, #3a3219 50%, #2a2410 51%, #3f3619 100%);
  box-shadow: inset 0 0 0 1px #8f7d40, inset 0 2px 0 rgba(255, 236, 170, 0.18), 0 2px 6px rgba(0, 0, 0, 0.6);
  color: #f3ead0;
  font: inherit;
  font-size: 15px;
  text-shadow: 0 1px 0 #000;
}

.portal-btn:hover,
.portal-btn:focus-visible {
  box-shadow: inset 0 0 0 1px #d8bd62, inset 0 2px 0 rgba(255, 236, 170, 0.3), 0 0 14px rgba(246, 214, 106, 0.3);
  color: #fff6d6;
}

@keyframes portal-fade {
  from { opacity: 0; }
}

@keyframes portal-pop {
  from { opacity: 0; scale: 0.96; }
}

/* The hall panorama is the original 1152x864 hall (x 448-1600 of 2022) with outpainted sides, so
   its sizes are expressed in stage widths: the stage keeps its exact old crop and the mount layout. */
.mount-band {
  --mb-w: min(1180px, 100cqw - 40px);
  --mb-top: calc(var(--mb-w) * -0.14986);
  --mb-cut: clamp(12px, 2vw, 36px);
  position: relative;
  container-type: inline-size;
  clip-path: polygon(0 var(--mb-cut), 100% 0, 100% calc(100% - var(--mb-cut)), 0 100%);
}

.mount-band.is-near {
  --mh-img: url("../assets/mount-hall-wide.webp?v=3");
}

.mount-band::before,
.mount-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(240, 193, 75, 0.75) 22%, rgba(255, 216, 106, 0.95) 50%, rgba(240, 193, 75, 0.75) 78%, transparent 100%);
}

.mount-band::before {
  clip-path: polygon(0 var(--mb-cut), 100% 0, 100% 1.5px, 0 calc(var(--mb-cut) + 1.5px));
}

.mount-band::after {
  clip-path: polygon(0 calc(100% - 1.5px), 100% calc(100% - var(--mb-cut) - 1.5px), 100% calc(100% - var(--mb-cut)), 0 100%);
}

.mount-hall {
  --mh-pos: calc(50% - var(--mb-w) * 0.021701) var(--mb-top);
  --mh-size: calc(var(--mb-w) * 2.21701) calc(var(--mb-w) * 0.75);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 9, 16, 0.4) 0%, transparent 18%, transparent 80%, rgba(7, 9, 16, 0.62) 100%),
    radial-gradient(ellipse 72% 96% at 50% 46%, transparent 60%, rgba(5, 4, 8, 0.45) 100%),
    var(--mh-img, none) var(--mh-pos) / var(--mh-size) no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) var(--mh-pos) / var(--mh-size) no-repeat;
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent) var(--mh-pos) / var(--mh-size) no-repeat;
}

.mount-stage {
  --floor: 23.5%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 79 / 40;
  isolation: isolate;
}

.mount-row {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.mount {
  position: absolute;
  left: var(--x);
  bottom: var(--floor);
  width: var(--w);
  margin: 0;
  transform: translateX(-50%);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.mount-rhino { --x: 15%; --w: 25%; }
.mount-warhorse { --x: 38.5%; --w: 16%; }
.mount-dragon { --x: 62%; --w: 28%; }
.mount-behemoth { --x: 87%; --w: 23.5%; }

.mount::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -4%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 70%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;
}

.mount::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 70%, rgba(255, 196, 110, 0.32), rgba(255, 150, 60, 0.1) 40%, transparent 68%);
  opacity: 0;
  transform: translate(-50%, 30%) scale(0.8);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.mount-art {
  position: relative;
  transform-origin: 50% 100%;
  filter: brightness(0.92) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease;
  will-change: transform;
}

.mount-art img {
  display: block;
  width: 100%;
  height: auto;
}

.mount figcaption {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border: 1px solid rgba(240, 193, 75, 0.22);
  border-radius: 999px;
  background: rgba(10, 8, 6, 0.62);
  color: var(--cream-2);
  font-family: var(--font-display);
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-transform: uppercase;
  transition: color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mount-row.has-active .mount:not(.is-active) .mount-art {
  filter: brightness(0.7) saturate(0.85) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
}

.mount:focus-visible,
.mount.is-active {
  z-index: 5;
}

.mount:focus-visible .mount-art,
.mount.is-active .mount-art {
  transform: translateY(3%) scale(1.1);
  filter:
    brightness(1.1)
    drop-shadow(0 0 10px rgba(255, 214, 140, 0.55))
    drop-shadow(0 0 26px rgba(255, 160, 70, 0.3))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
}

.mount:focus-visible::before,
.mount.is-active::before {
  transform: translateY(40%) scale(1.18);
  opacity: 0.85;
}

.mount:focus-visible::after,
.mount.is-active::after {
  opacity: 1;
  transform: translate(-50%, 30%) scale(1);
}

.mount:focus-visible figcaption,
.mount.is-active figcaption {
  color: var(--gold-3);
  border-color: var(--line-strong);
  box-shadow: 0 0 18px rgba(240, 193, 75, 0.25);
  transform: translate(-50%, 6px);
}

@media (hover: hover) {
  .mount-row:has(.mount:hover) .mount:not(:hover) .mount-art,
  .mount-reflection.has-hover .mount:not(.is-hover) .mount-art {
    filter: brightness(0.7) saturate(0.85) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
  }

  .mount:hover {
    z-index: 5;
  }

  .mount:hover .mount-art,
  .mount-reflection .mount.is-hover .mount-art {
    transform: translateY(3%) scale(1.1);
    filter:
      brightness(1.1)
      drop-shadow(0 0 10px rgba(255, 214, 140, 0.55))
      drop-shadow(0 0 26px rgba(255, 160, 70, 0.3))
      drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
  }

  .mount:hover::before {
    transform: translateY(40%) scale(1.18);
    opacity: 0.85;
  }

  .mount:hover::after,
  .mount-reflection .mount.is-hover::after {
    opacity: 1;
    transform: translate(-50%, 30%) scale(1);
  }

  .mount:hover figcaption {
    color: var(--gold-3);
    border-color: var(--line-strong);
    box-shadow: 0 0 18px rgba(240, 193, 75, 0.25);
    transform: translate(-50%, 6px);
  }
}

/* Effect layers sit inside .mount-art, so they scale, dim and mirror with the sprite. Positions are
   percentages of the sprite image. */
.mount-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fx-hooves i,
.fx-eyes i,
.fx-breath i {
  position: absolute;
  mix-blend-mode: screen;
}

.fx-hooves i {
  bottom: 0;
  left: var(--x);
  width: var(--w);
  height: 15%;
  translate: -50% 0;
  transform-origin: 50% 100%;
  background: radial-gradient(ellipse 50% 75% at 50% 100%, rgba(255, 196, 120, 0.7), rgba(255, 80, 30, 0.45) 45%, transparent 75%);
  animation: hoof-flicker 0.9s ease-in-out var(--d) infinite alternate;
}

.fx-hooves i::before,
.fx-hooves i::after,
.fx-eyes i::after {
  content: "";
  position: absolute;
  border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse 50% 50% at 50% 80%, rgba(255, 236, 170, 0.95), rgba(255, 110, 40, 0.75) 45%, rgba(220, 30, 10, 0) 75%);
  filter: blur(1px);
  transform-origin: 50% 100%;
}

.fx-hooves i::before,
.fx-hooves i::after {
  bottom: 30%;
  left: 22%;
  width: 34%;
  height: 80%;
  animation: flame-lick 1.3s ease-out var(--d) infinite;
}

.fx-hooves i::after {
  left: 48%;
  width: 26%;
  animation-duration: 1.05s;
  animation-delay: calc(var(--d) - 0.5s);
}

.fx-hooves i:nth-child(1) { --x: 12.4%; --w: 22.4%; --d: -0.2s; }
.fx-hooves i:nth-child(2) { --x: 39.9%; --w: 18%; --d: -0.7s; }
.fx-hooves i:nth-child(3) { --x: 55.2%; --w: 11.3%; --d: -0.45s; }
.fx-hooves i:nth-child(4) { --x: 70.6%; --w: 19.3%; --d: -1s; }

.fx-eyes i {
  left: var(--x);
  top: var(--y);
  width: var(--w, 11%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 210, 0.95) 0, rgba(255, 90, 50, 0.65) 22%, rgba(255, 20, 0, 0.2) 48%, transparent 70%);
  animation: eye-burn 1.7s ease-in-out var(--d) infinite;
}

.fx-eyes i::after {
  left: 30%;
  bottom: 45%;
  width: 40%;
  height: 90%;
  animation: eye-wisp 1.2s ease-out var(--d) infinite;
}

.fx-eyes i:nth-child(1) { --x: 76%; --y: 23.1%; --d: 0s; }
.fx-eyes i:nth-child(2) { --x: 97.2%; --y: 22.5%; --w: 8%; --d: -0.6s; }

/* Dragon: a short burst of fire from the open mouth every few seconds. */
.fx-breath {
  inset: auto;
  top: 40.6%;
  right: 70.4%;
  width: 36%;
  height: 17%;
  translate: 0 -50%;
  rotate: -20deg;
  transform-origin: 100% 50%;
  animation: breath-burst 7s ease-in-out infinite;
}

.fx-breath::before {
  content: "";
  position: absolute;
  inset: 10% 0;
  background: radial-gradient(ellipse 100% 50% at 100% 50%, rgba(255, 250, 220, 0.95), rgba(255, 190, 80, 0.75) 25%, rgba(240, 90, 20, 0.35) 55%, rgba(200, 40, 10, 0) 80%);
  filter: blur(2px);
  mix-blend-mode: screen;
  transform-origin: 100% 50%;
  animation: breath-core 0.24s ease-in-out infinite alternate;
}

.fx-breath i {
  top: var(--y, 0%);
  right: 0;
  width: 34%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 248, 210, 1), rgba(255, 186, 80, 0.95) 28%, rgba(245, 90, 25, 0.7) 52%, rgba(160, 20, 10, 0) 74%);
  filter: blur(1.5px);
  transform-origin: 100% 50%;
  animation: breath-puff 0.7s linear var(--d) infinite;
}

.fx-breath i:nth-child(1) { --d: 0s; }
.fx-breath i:nth-child(2) { --d: -0.14s; --y: -8%; }
.fx-breath i:nth-child(3) { --d: -0.28s; --y: 6%; }
.fx-breath i:nth-child(4) { --d: -0.42s; --y: -4%; }
.fx-breath i:nth-child(5) { --d: -0.56s; --y: 9%; }

/* Behemoth: the tail is its own layer, swaying around the rump. */
.mount-art .fx-tail {
  height: 100%;
  transform-origin: 67.1% 51%;
  animation: tail-sway 3.8s ease-in-out infinite;
}

@keyframes hoof-flicker {
  0% { opacity: 0.65; transform: scale(1, 0.85); }
  50% { opacity: 1; transform: scale(1.04, 1.1); }
  100% { opacity: 0.8; transform: scale(0.97, 0.95); }
}

@keyframes flame-lick {
  0% { opacity: 0; transform: translateY(20%) scale(0.7, 0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70%) scale(0.35, 1.15); }
}

@keyframes eye-burn {
  0%, 100% { opacity: 0.75; transform: scale(0.9); }
  45% { opacity: 1; transform: scale(1.12); }
  70% { opacity: 0.85; transform: scale(1); }
}

@keyframes eye-wisp {
  0% { opacity: 0; transform: translate(0, 10%) rotate(-25deg) scale(0.6, 0.4); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-60%, -60%) rotate(-35deg) scale(0.3, 1); }
}

@keyframes breath-burst {
  0%, 58% { opacity: 0; transform: scale(0.25, 0.5); }
  63% { opacity: 0.95; transform: scale(0.9); }
  70%, 80% { opacity: 0.95; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(1.05, 1.1); }
}

@keyframes breath-puff {
  0% { opacity: 0; transform: translateX(0) scale(0.3); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-190%) scale(1.3, 1.6); }
}

@keyframes breath-core {
  from { transform: scale(1, 0.85); opacity: 0.85; }
  to { transform: scale(1.04, 1.1); opacity: 1; }
}

@keyframes tail-sway {
  0%, 100% { rotate: 1deg; }
  40% { rotate: -5deg; }
  70% { rotate: 3deg; }
}

/* Water in front of the hall floor. js/main.js clones .mount-row into it as .mount-reflection, flipped
   at each mount's feet, so the reflection follows every animation and hover state.
   --puddles masks it into scattered rain puddles: clustered ellipses merged, thresholded and roughened by noise.
   The mask also does the clipping (no-repeat leaves everything above --water-top transparent); a clip-path on top of
   it leaked a 1px row of reflection at the floor line. Shapes keep a margin from the mask's edges for the same reason. */
.mount-water {
  --water-top: calc(100% - var(--floor) + 2%);
  --puddles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 110' preserveAspectRatio='none'%3E%3Cfilter id='p' x='0' y='0' width='1000' height='110' filterUnits='userSpaceOnUse'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeColorMatrix result='g' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 18 -7'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .09' numOctaves='2' seed='3' result='n'/%3E%3CfeDisplacementMap in='g' in2='n' scale='9' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='1.8'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='%23fff' transform='translate(0 2) scale(1 .85)'%3E%3Cellipse cx='170' cy='40' rx='118' ry='19'/%3E%3Cellipse cx='252' cy='50' rx='88' ry='16'/%3E%3Cellipse cx='105' cy='52' rx='52' ry='12'/%3E%3Cellipse cx='212' cy='28' rx='58' ry='9'/%3E%3Cellipse cx='600' cy='32' rx='92' ry='14'/%3E%3Cellipse cx='668' cy='40' rx='68' ry='13'/%3E%3Cellipse cx='556' cy='42' rx='38' ry='8'/%3E%3Cellipse cx='858' cy='80' rx='108' ry='17'/%3E%3Cellipse cx='786' cy='88' rx='58' ry='12'/%3E%3Cellipse cx='930' cy='71' rx='44' ry='11'/%3E%3Cellipse cx='430' cy='84' rx='54' ry='10'/%3E%3Cellipse cx='468' cy='91' rx='30' ry='7'/%3E%3Cellipse cx='392' cy='30' rx='42' ry='8'/%3E%3Cellipse cx='356' cy='37' rx='24' ry='6'/%3E%3Cellipse cx='494' cy='31' rx='36' ry='7'/%3E%3Cellipse cx='506' cy='63' rx='17' ry='4'/%3E%3Cellipse cx='60' cy='92' rx='26' ry='6'/%3E%3Cellipse cx='950' cy='32' rx='19' ry='5'/%3E%3Cellipse cx='318' cy='97' rx='38' ry='7'/%3E%3Cellipse cx='722' cy='96' rx='22' ry='5'/%3E%3Cellipse cx='746' cy='62' rx='11' ry='3.5'/%3E%3C/g%3E%3C/svg%3E");
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask: var(--puddles) 0 100% / 100% calc(var(--floor) - 2%) no-repeat;
  mask: var(--puddles) 0 100% / 100% calc(var(--floor) - 2%) no-repeat;
}

.mount-water::before,
.mount-water::after {
  content: "";
  position: absolute;
  top: var(--water-top);
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.mount-water::before {
  background:
    linear-gradient(180deg, rgba(255, 222, 150, 0.55), rgba(255, 222, 150, 0.12) 1px, rgba(255, 222, 150, 0) 5px),
    linear-gradient(180deg, rgba(4, 8, 12, 0.7), rgba(4, 8, 12, 0) 12px),
    linear-gradient(180deg, rgba(12, 30, 42, 0.62), rgba(5, 12, 20, 0.9));
}

.mount-water::after {
  z-index: 3;
  background:
    radial-gradient(ellipse 9% 7% at 18% 22%, rgba(255, 222, 160, 0.16), transparent 70%),
    radial-gradient(ellipse 12% 5% at 46% 48%, rgba(255, 222, 160, 0.12), transparent 70%),
    radial-gradient(ellipse 8% 6% at 74% 30%, rgba(255, 222, 160, 0.14), transparent 70%),
    radial-gradient(ellipse 14% 5% at 90% 70%, rgba(170, 210, 255, 0.08), transparent 70%);
  background-size: 200% 100%;
  mix-blend-mode: screen;
  animation: water-glint 26s linear infinite;
}

.mount-water-defs {
  position: absolute;
}

.mount-reflection {
  opacity: 0.7;
  filter: blur(0.4px);
  -webkit-mask:
    linear-gradient(180deg, #000 calc(100% - var(--floor)), transparent 100%),
    repeating-linear-gradient(180deg, #000 0 5px, rgba(0, 0, 0, 0.5) 5px 7px, #000 7px 12px, rgba(0, 0, 0, 0.65) 12px 14px);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(180deg, #000 calc(100% - var(--floor)), transparent 100%),
    repeating-linear-gradient(180deg, #000 0 5px, rgba(0, 0, 0, 0.5) 5px 7px, #000 7px 12px, rgba(0, 0, 0, 0.65) 12px 14px);
  mask-composite: intersect;
  animation: water-bands 5s linear infinite;
}

/* The ripple filter blanks the reflection inside the sticky phone carousel, so phones keep the bands only. */
@media (min-width: 721px) {
  .mount-reflection {
    filter: url(#mount-ripple) blur(0.4px);
  }
}

.mount-reflection .mount {
  transform: translateX(-50%) scaleY(-1);
  transform-origin: 50% 100%;
}

.mount-reflection .mount::before {
  display: none;
}

.mount-reflection .fx-tail {
  animation: none;
}

@keyframes water-glint {
  to { background-position: -200% 0; }
}

@keyframes water-bands {
  to { -webkit-mask-position: 0 0, 0 28px; mask-position: 0 0, 0 28px; }
}

.mount-title,
.mount-dots {
  display: none;
}

.mount-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mount-motes-back { z-index: 1; }
.mount-motes-front { z-index: 3; }

.mount-motes i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff3d6 0%, rgba(255, 206, 130, 0.7) 45%, transparent 75%);
  opacity: 0;
  animation: mount-mote var(--t, 16s) linear infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}

.mount-motes-front i {
  filter: blur(2px);
  --peak: 0.35;
}

.mount-motes-back i:nth-child(1) { --x: 6%; --y: 70%; --s: 2px; --t: 18s; --d: -2s; --dx: 30px; }
.mount-motes-back i:nth-child(2) { --x: 14%; --y: 40%; --s: 3px; --t: 22s; --d: -9s; --dx: -24px; }
.mount-motes-back i:nth-child(3) { --x: 22%; --y: 62%; --s: 2px; --t: 16s; --d: -5s; --dx: 18px; }
.mount-motes-back i:nth-child(4) { --x: 29%; --y: 28%; --s: 2px; --t: 20s; --d: -14s; --dx: 36px; }
.mount-motes-back i:nth-child(5) { --x: 35%; --y: 74%; --s: 3px; --t: 24s; --d: -3s; --dx: -30px; }
.mount-motes-back i:nth-child(6) { --x: 43%; --y: 48%; --s: 2px; --t: 17s; --d: -11s; --dx: 22px; }
.mount-motes-back i:nth-child(7) { --x: 49%; --y: 20%; --s: 2px; --t: 21s; --d: -7s; --dx: -18px; }
.mount-motes-back i:nth-child(8) { --x: 55%; --y: 66%; --s: 3px; --t: 19s; --d: -16s; --dx: 28px; }
.mount-motes-back i:nth-child(9) { --x: 61%; --y: 36%; --s: 2px; --t: 23s; --d: -1s; --dx: -26px; }
.mount-motes-back i:nth-child(10) { --x: 68%; --y: 78%; --s: 2px; --t: 18s; --d: -12s; --dx: 20px; }
.mount-motes-back i:nth-child(11) { --x: 74%; --y: 30%; --s: 3px; --t: 25s; --d: -6s; --dx: -34px; }
.mount-motes-back i:nth-child(12) { --x: 80%; --y: 56%; --s: 2px; --t: 16s; --d: -10s; --dx: 16px; }
.mount-motes-back i:nth-child(13) { --x: 86%; --y: 22%; --s: 2px; --t: 20s; --d: -4s; --dx: -20px; }
.mount-motes-back i:nth-child(14) { --x: 92%; --y: 68%; --s: 3px; --t: 22s; --d: -15s; --dx: 26px; }
.mount-motes-back i:nth-child(15) { --x: 10%; --y: 18%; --s: 2px; --t: 26s; --d: -8s; --dx: 24px; }
.mount-motes-back i:nth-child(16) { --x: 96%; --y: 42%; --s: 2px; --t: 19s; --d: -13s; --dx: -28px; }

.mount-motes-front i:nth-child(1) { --x: 8%; --y: 82%; --s: 7px; --t: 14s; --d: -3s; --dx: 40px; }
.mount-motes-front i:nth-child(2) { --x: 24%; --y: 54%; --s: 5px; --t: 17s; --d: -9s; --dx: -36px; }
.mount-motes-front i:nth-child(3) { --x: 41%; --y: 88%; --s: 8px; --t: 15s; --d: -6s; --dx: 30px; }
.mount-motes-front i:nth-child(4) { --x: 52%; --y: 46%; --s: 6px; --t: 19s; --d: -12s; --dx: -40px; }
.mount-motes-front i:nth-child(5) { --x: 66%; --y: 84%; --s: 7px; --t: 16s; --d: -1s; --dx: 34px; }
.mount-motes-front i:nth-child(6) { --x: 78%; --y: 60%; --s: 5px; --t: 18s; --d: -14s; --dx: -30px; }
.mount-motes-front i:nth-child(7) { --x: 90%; --y: 86%; --s: 8px; --t: 13s; --d: -7s; --dx: 36px; }
.mount-motes-front i:nth-child(8) { --x: 33%; --y: 30%; --s: 6px; --t: 20s; --d: -10s; --dx: 28px; }

@keyframes mount-mote {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15% { opacity: var(--peak, 0.7); }
  85% { opacity: var(--peak, 0.7); }
  100% { opacity: 0; transform: translate3d(var(--dx, 20px), -110px, 0); }
}

@media (max-width: 720px) {
  .mount-band {
    --mb-w: min(1180px, 100cqw - 28px);
    --mb-top: 0px;
  }

  .mount-stage {
    --floor: 30%;
    aspect-ratio: 4 / 3;
  }

  .mount-pin .section-head {
    margin-bottom: 20px;
  }

  .mount-rhino { --x: 14%; --w: 25%; }
  .mount-warhorse { --x: 38%; --w: 16%; }
  .mount-dragon { --x: 62%; --w: 27%; }
  .mount-behemoth { --x: 87%; --w: 24%; }

  .mount figcaption {
    top: calc(100% + 8px);
    padding: 3px 8px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .mount-scroll.is-scrolly {
    height: calc(var(--pin-h, 420px) + 180svh);
  }

  .mount-scroll.is-scrolly .mount-pin {
    position: sticky;
    top: max(calc(var(--nav-h) + 8px), calc(var(--nav-h) + (100svh - var(--nav-h) - var(--pin-h, 420px) + var(--head-h, 130px)) / 2 - var(--head-h, 130px)));
  }

  .mount-scroll.is-scrolly .mount figcaption {
    display: none;
  }

  .mount-scroll.is-scrolly .mount-stage {
    --floor: 17%;
  }

  .mount-scroll.is-scrolly .mount {
    --x: 50%;
    transition:
      translate 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      scale 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.5s ease;
  }

  .mount-scroll.is-scrolly .mount-rhino { --w: 48%; }
  .mount-scroll.is-scrolly .mount-warhorse { --w: 36%; }
  .mount-scroll.is-scrolly .mount-dragon { --w: 54%; }
  .mount-scroll.is-scrolly .mount-behemoth { --w: 46%; }

  .mount-scroll.is-scrolly .mount.is-before,
  .mount-scroll.is-scrolly .mount.is-after {
    opacity: 0;
    scale: 0.8;
    pointer-events: none;
  }

  .mount-scroll.is-scrolly .mount.is-before {
    translate: -70vw 0;
  }

  .mount-scroll.is-scrolly .mount.is-after {
    translate: 70vw 0;
  }

  .mount-scroll.is-scrolly .mount::after {
    display: none;
  }

  .mount-scroll.is-scrolly .mount-title,
  .mount-scroll.is-scrolly .mount-dots {
    display: flex;
  }

  .mount-title {
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    z-index: 5;
    justify-content: center;
    margin: 0;
    color: var(--gold-3);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(255, 190, 90, 0.55), 0 2px 10px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
  }

  .mount-title.is-shown {
    opacity: 1;
    transform: none;
  }

  .mount-dots {
    position: absolute;
    top: calc(5% + 32px);
    left: 0;
    right: 0;
    z-index: 5;
    justify-content: center;
    gap: 8px;
  }

  .mount-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 233, 168, 0.28);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  }

  .mount-dots i.is-on {
    background: var(--gold-2);
    box-shadow: 0 0 8px rgba(255, 216, 106, 0.8);
    transform: scale(1.3);
  }
}

.cta-cinematic {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(10, 14, 26, 0.92), rgba(18, 12, 32, 0.72)),
    url("../assets/hero-iberia.webp?v=1") center / cover;
}

.tab,
.account-switch button,
.kicker,
.panel-title {
  font-family: var(--font-cond);
}

@media (max-width: 980px) {
  .class-grid {
    grid-template-columns: 1fr;
  }

  .class-splash,
  .faction-card {
    min-height: 360px;
  }

  .class-select-stage {
    height: min(54vh, 520px);
    min-height: 400px;
  }

  .class-select-copy {
    padding: 78px 72px 24px 22px;
  }
}

@media (max-width: 720px) {
  .container,
  .wide {
    width: min(1180px, calc(100% - 28px));
  }

  .kicker,
  .eyebrow,
  .panel-title,
  .live-pill,
  .site-footer h4 {
    letter-spacing: 0.08em;
    font-size: 12px;
    line-height: 1.45;
  }

  .section-head .kicker {
    font-size: 15px;
    letter-spacing: 0.1em;
  }

  .display,
  .section-head .display {
    font-size: clamp(26px, 7.6vw, 36px);
    line-height: 1.24;
    letter-spacing: 0.02em;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(28px, 8.4vw, 36px);
    line-height: 1.24;
    max-width: none;
    text-align: center;
  }

  .lede,
  .hero .lede,
  .page-hero .lede,
  .get-in .lede,
  .panel .lede,
  .tab-panel p:not(.kicker),
  .faction p,
  .faction-card p,
  .class-splash p,
  .class-card p,
  .shop-card p,
  .step p,
  .faq details p,
  .cta-band p,
  .footer-brand p {
    font-family: var(--font-ui);
    font-size: 16.5px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: #d8deea;
    max-width: none;
  }

  .class-card p {
    font-size: 15px;
  }

  .note,
  .muted {
    font-size: 14px;
    line-height: 1.6;
    color: #b7c0d2;
  }

  .linkish {
    font-size: 13px;
    letter-spacing: 0.06em;
    line-height: 1.5;
  }

  .btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 14px;
    letter-spacing: 0.08em;
    line-height: 1.25;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 24px;
  }

  .hero-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 18px 24px;
    width: 100%;
  }

  .hero-actions .linkish {
    justify-content: center;
    width: auto;
    white-space: nowrap;
  }

  .panel {
    padding: 22px 16px 22px 18px;
  }

  .panel-head {
    gap: 8px;
    margin-bottom: 14px;
  }

  .get-in {
    gap: 20px;
  }

  .get-in .lede {
    margin-top: 6px;
  }

  .get-in-links {
    gap: 12px;
    margin-top: 16px;
  }

  .tab-panel h2 {
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 8px;
  }

  .tab-panel p.dungeon-blurb {
    display: none;
  }

  .tab-panel p.dungeon-blurb-sm {
    display: block;
    max-width: 16ch;
    font-size: 11.5px;
    line-height: 1.32;
  }

  .dungeon-board .tab-panel.panel {
    overflow: hidden;
    padding: 16px 12px 16px 16px;
  }

  .dungeon-board .tab-panels .tab-panel.active {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: 10px 8px;
  }

  .dungeon-board .meta {
    min-width: 0;
  }

  .dungeon-board .meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
    font-size: 11px;
    letter-spacing: 0.03em;
  }

  .dungeon-board .meta-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dungeon-board .meta-row b {
    color: var(--cream);
    white-space: nowrap;
  }

  .cta-band {
    padding: 22px 18px;
  }

  .cta-band h2 {
    font-size: 24px;
    line-height: 1.3;
  }

  .faction-card h3,
  .class-splash h3 {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.04em;
  }

  .faction-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .faction-card {
    min-height: 320px;
  }

  .faction-mark {
    inset: 6% 0 28% 0;
  }

  .faction-crest {
    width: min(176px, 78%);
  }

  .faction-card h3 {
    font-size: 18px;
  }

  .faction-card-body,
  .class-splash > div {
    padding: 28px 18px 20px;
  }

  .faction-card-body {
    padding: 14px 10px 12px;
    text-align: center;
  }

  .faction-card-body .kicker {
    text-align: center;
  }

  .faction-card p {
    font-size: 13px;
    line-height: 1.35;
  }

  .faction-card-body > p:not(.kicker) {
    display: none;
  }

  .faction-band {
    --fb-h: 360px;
    --fb-cw: calc(100% - 28px);
    --fb-crest: min(112px, 27vw);
    --fb-gap: 14px;
  }

  .faction-pane-body {
    bottom: calc(var(--fb-cut) + 14px);
    padding: 0 6px;
  }

  .faction-pane h3 {
    font-size: 20px;
  }

  .faction-pane-body > p:not(.kicker) {
    display: none;
  }

  .faction-pane .btn {
    min-height: 38px;
    padding: 8px 16px;
    font-size: 12px;
  }

  .faction-pane-cta {
    max-height: none;
    padding-top: 12px;
    padding-bottom: 14px;
    margin-bottom: -14px;
    opacity: 1;
  }

  .class-splash small {
    letter-spacing: 0.08em;
    line-height: 1.45;
  }

  .meta-row {
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1.45;
    gap: 10px;
  }

  .faq summary {
    font-size: 17px;
    line-height: 1.35;
  }

  .page-hero {
    padding: 108px 0 36px;
  }

  .section {
    padding: 64px 0;
  }

  .stat span {
    letter-spacing: 0.08em;
    line-height: 1.4;
  }

  .nav-links a {
    letter-spacing: 0.1em;
    line-height: 1.4;
  }

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

  .tab {
    letter-spacing: 0.06em;
  }

  /* Matches the 800x810 phone roster canvas, so the stage ends just above the line-up instead of in open sky. */
  .class-select-stage {
    --cs-cut: 0px;
    height: min(101.25vw, 500px);
    min-height: 0;
  }

  /* The shorter stage shrinks the 2160x720 single-class art; scale it back up around the feet (676/720). */
  .class-select-slide > img {
    transform: scale(1.22);
    transform-origin: 50% 93.9%;
  }

  .class-select-copy {
    padding: 90px 18px 18px;
  }

  .class-select-copy h3 {
    font-size: 26px;
    letter-spacing: 0.04em;
  }

  .class-select-copy p {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.55;
  }

  /* Below the faces: the sky above them is taken by the Discord isle on the right. */
  .class-select-nav {
    width: 46px;
    height: 46px;
    top: 64%;
  }

  .class-select-nav.prev {
    left: 8px;
  }

  .class-select-nav.next {
    right: 8px;
  }

  .class-select-legend {
    display: none;
  }

  .armor-controls {
    left: 12px;
    bottom: 12px;
  }

  .armor-controls .eyebrow,
  .armor-controls h3 {
    display: none;
  }

  .armor-switch {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }

  .armor-portal-hint {
    padding: 5px 10px 5px 8px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .portal-modal {
    position: fixed;
    z-index: 80;
  }

  .portal-backdrop {
    background: rgba(2, 3, 8, 0.6);
    clip-path: none;
  }

  .portal-win {
    left: 50%;
    width: min(calc(100% - 32px), 420px);
    height: min(calc(100% - 40px), 380px);
  }

  .portal-win-body {
    padding: 14px 32px 14px 12px;
  }

  .portal-cost {
    gap: 12px;
  }

  .portal-win-foot {
    gap: 14px;
  }
}

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

html.js main > section:not(.hero):not(.page-hero) {
  opacity: 0;
  transform: translateY(26px);
}

html.js main > section:not(.hero):not(.page-hero).is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-inner,
.hero-stats {
  z-index: 2;
}

.hero-feathers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.feather {
  --feather-rest: url("../assets/feather-a-rest.webp?v=1");
  --feather-peak: url("../assets/feather-a-peak.webp?v=1");
  position: absolute;
  bottom: 14%;
  width: 20px;
  height: 52px;
  animation: feather-drift var(--drift, 26s) linear infinite;
  will-change: transform, opacity;
  transform-origin: 50% 15%;
}

/* The glow is baked into two images (build-feather-glow.cjs): resting and peak. Animating filter: drop-shadow
   had the GPU re-blur every moving feather each frame; now only the peak image fades in and out. The images
   carry 44px of glow round a 20x52 feather, hence the insets (44/52 of the height, 44/20 of the width). */
.feather::before,
.feather::after {
  content: "";
  position: absolute;
  inset: -84.615% -220%;
  background: var(--feather-rest) center / 100% 100% no-repeat;
}

.feather::after {
  background-image: var(--feather-peak);
  opacity: 0;
  animation: feather-glow var(--glow, 10s) ease-in-out var(--glow-d, 0s) infinite;
}

.feather:nth-child(even) {
  --feather-rest: url("../assets/feather-b-rest.webp?v=1");
  --feather-peak: url("../assets/feather-b-peak.webp?v=1");
}

.feather:nth-child(1) { left: 5%; --drift: 27s; --glow: 11s; animation-delay: -6s; --glow-d: -1s; }
.feather:nth-child(2) { left: 12%; width: 14px; height: 38px; --drift: 31s; --glow: 9s; animation-delay: -14s; --glow-d: -4s; }
.feather:nth-child(3) { left: 20%; width: 22px; height: 58px; --drift: 23s; --glow: 12s; animation-delay: -9s; --glow-d: -7s; }
.feather:nth-child(4) { left: 28%; width: 16px; height: 43px; --drift: 29s; --glow: 10s; animation-delay: -18s; --glow-d: -2s; }
.feather:nth-child(5) { left: 36%; width: 18px; height: 49px; --drift: 25s; --glow: 13s; animation-delay: -4s; --glow-d: -8s; }
.feather:nth-child(6) { left: 44%; width: 23px; height: 61px; --drift: 33s; --glow: 9.5s; animation-delay: -21s; --glow-d: -3s; }
.feather:nth-child(7) { left: 52%; width: 14px; height: 36px; --drift: 22s; --glow: 11s; animation-delay: -11s; --glow-d: -6s; }
.feather:nth-child(8) { left: 59%; width: 19px; height: 50px; --drift: 28s; --glow: 10s; animation-delay: -7s; --glow-d: -9s; }
.feather:nth-child(9) { left: 67%; width: 15px; height: 41px; --drift: 24s; --glow: 12s; animation-delay: -16s; --glow-d: -1s; }
.feather:nth-child(10) { left: 74%; width: 21px; height: 56px; --drift: 30s; --glow: 8.5s; animation-delay: -3s; --glow-d: -5s; }
.feather:nth-child(11) { left: 81%; width: 14px; height: 40px; --drift: 26s; --glow: 11s; animation-delay: -19s; --glow-d: -8s; }
.feather:nth-child(12) { left: 88%; width: 18px; height: 47px; --drift: 32s; --glow: 10s; animation-delay: -12s; --glow-d: -2s; }
.feather:nth-child(13) { left: 93%; width: 13px; height: 34px; --drift: 21s; --glow: 13s; animation-delay: -8s; --glow-d: -6s; }
.feather:nth-child(14) { left: 97%; width: 16px; height: 43px; --drift: 27s; --glow: 9s; animation-delay: -22s; --glow-d: -4s; }

@keyframes feather-drift {
  0% {
    transform: translate3d(0, 12vh, 0) rotate(-22deg);
    opacity: 0;
  }
  12% { opacity: 0.82; }
  28% {
    transform: translate3d(18px, -8vh, 0) rotate(10deg);
  }
  52% {
    transform: translate3d(-14px, -30vh, 0) rotate(-14deg);
    opacity: 0.7;
  }
  76% {
    transform: translate3d(12px, -52vh, 0) rotate(8deg);
    opacity: 0.42;
  }
  100% {
    transform: translate3d(-8px, -78vh, 0) rotate(-12deg);
    opacity: 0;
  }
}

@keyframes feather-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.loot-table {
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 14px;
  margin-top: 2px;
  border-top: 1px solid rgba(186, 204, 255, 0.12);
}

.loot-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loot-slot {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 3px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08), transparent 55%),
    #0a0d16;
  border: 1px solid rgba(186, 204, 255, 0.18);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.loot-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.loot-slot.is-uncommon {
  border-color: rgba(94, 234, 212, 0.7);
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.18), 0 8px 18px rgba(0, 0, 0, 0.4);
}

.loot-slot.is-rare {
  border-color: rgba(110, 168, 255, 0.78);
  box-shadow: 0 0 0 1px rgba(110, 168, 255, 0.2), 0 8px 18px rgba(0, 0, 0, 0.4);
}

.loot-slot.is-epic {
  border-color: rgba(179, 136, 255, 0.82);
  box-shadow: 0 0 0 1px rgba(139, 124, 255, 0.28), 0 8px 18px rgba(0, 0, 0, 0.4);
}

.loot-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 6;
  width: max-content;
  max-width: 160px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 14, 24, 0.96);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.loot-tip em,
.loot-tip strong {
  display: block;
}

.loot-tip em {
  color: var(--muted);
  font-family: var(--font-cond);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.loot-slot.is-uncommon .loot-tip em { color: var(--cyan); }
.loot-slot.is-rare .loot-tip em { color: #8bb7ff; }
.loot-slot.is-epic .loot-tip em { color: #cbb4ff; }

.loot-tip strong {
  margin-top: 2px;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.loot-slot:hover .loot-tip,
.loot-slot:focus .loot-tip,
.loot-slot:focus-visible .loot-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.patch-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 36;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  border: 1px solid rgba(240, 193, 75, 0.22);
  border-radius: 999px;
  background: rgba(8, 11, 20, 0.78);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.2s ease, background 0.2s ease;
}

.patch-fab:hover {
  border-color: rgba(240, 193, 75, 0.48);
  background: rgba(12, 16, 28, 0.9);
}

.patch-fab-pip {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow:
    0 0 0 4px rgba(240, 193, 75, 0.16),
    0 0 12px rgba(240, 193, 75, 0.75);
  animation: pip-pulse 1.8s ease-in-out infinite;
}

.patch-fab.is-unread .patch-fab-pip {
  box-shadow:
    0 0 0 5px rgba(240, 193, 75, 0.22),
    0 0 16px rgba(240, 193, 75, 0.95);
}

.patch-fab-title {
  color: var(--gold-3);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.patch-fab:hover .patch-fab-title {
  color: var(--gold-2);
}

.battle-fab {
  right: auto;
  left: 22px;
}

.battle-fab .patch-fab-pip {
  background: #ff8a2a;
  box-shadow:
    0 0 0 4px rgba(255, 138, 42, 0.18),
    0 0 12px rgba(255, 138, 42, 0.8);
}

@keyframes pip-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.82); opacity: 0.7; }
}

.toast {
  right: 22px;
  bottom: 92px;
}

.patch-hero {
  padding-top: 122px;
  padding-bottom: 52px;
}

.patch-hero::before {
  background-image: url("../assets/hero-iberia.webp?v=1");
  background-position: center 30%;
}

.patch-hero::after {
  background:
    radial-gradient(ellipse 46% 54% at 80% 28%, rgba(240, 193, 75, 0.16), transparent 68%),
    linear-gradient(180deg, rgba(7, 9, 16, 0.42) 0%, rgba(7, 9, 16, 0.74) 52%, var(--bg) 100%);
}

.patch-hero-ver {
  margin: 0 0 6px;
  color: var(--gold-2);
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.patch-hero h1 {
  font-size: clamp(48px, 8vw, 92px);
  letter-spacing: 0.06em;
}

.patch-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 22px;
  color: var(--muted);
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.patch-hero-meta span:not(:first-child)::before {
  content: "◆";
  display: inline-block;
  margin: 0 14px;
  color: var(--gold-dim);
}

.patch-section {
  padding-top: 8px;
}

.patch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(250px, 0.78fr);
  gap: 22px;
  align-items: start;
}

.patch-issue {
  position: relative;
  overflow: hidden;
  padding: 30px 30px 26px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(28, 38, 62, 0.94), rgba(8, 12, 22, 0.97));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.patch-issue::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gold-2), var(--accent), var(--cyan));
  box-shadow: 0 0 16px rgba(94, 234, 212, 0.35);
}

.patch-seal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 14px;
}

.patch-seal {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(240, 193, 75, 0.42);
  border-radius: 999px;
  color: #1a1206;
  background: linear-gradient(180deg, #f3d06a, #d4a017);
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.patch-issue-date {
  color: var(--muted);
  font-family: var(--font-cond);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.patch-issue-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.patch-issue-head p {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.55;
}

.patch-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 6px;
}

.patch-hl {
  min-width: 0;
  padding: 18px 16px 16px;
  border: 1px solid rgba(186, 204, 255, 0.12);
  border-radius: 12px;
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(240, 193, 75, 0.08), transparent 70%),
    rgba(7, 10, 20, 0.5);
}

.patch-hl span {
  display: block;
  margin-bottom: 10px;
  color: var(--gold-2);
  font-family: var(--font-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.patch-hl h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.05em;
}

.patch-hl p {
  margin: 0;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
}

.patch-ledger {
  display: grid;
  gap: 26px;
  margin-top: 28px;
}

.patch-block h3 {
  margin: 0 0 4px;
  color: var(--gold-3);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.08em;
}

.patch-block[data-tone="cyan"] h3 { color: var(--cyan); }
.patch-block[data-tone="violet"] h3 { color: #cbb4ff; }
.patch-block[data-tone="ember"] h3 { color: #ffb08a; }

.patch-block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.patch-block li {
  position: relative;
  padding: 13px 0 13px 28px;
  border-bottom: 1px solid rgba(186, 204, 255, 0.1);
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
}

.patch-block li:last-child {
  border-bottom: 0;
}

.patch-block li::before {
  position: absolute;
  left: 0;
  top: 13px;
  font-family: var(--font-cond);
  font-size: 14px;
  font-weight: 700;
}

.patch-block li[data-mark="add"]::before { content: "+"; color: var(--cyan); }
.patch-block li[data-mark="chg"]::before { content: "~"; color: var(--gold-2); }
.patch-block li[data-mark="keep"]::before { content: "◆"; color: var(--accent); }
.patch-block li[data-mark="note"]::before { content: "!"; color: var(--ember); }

.patch-block li b {
  color: var(--cream);
  font-weight: 600;
}

.patch-issue-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(186, 204, 255, 0.12);
}

.patch-issue-foot p {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
}

.patch-issue-foot .btn {
  width: auto;
  min-width: 220px;
}

.patch-rail {
  display: grid;
  gap: 16px;
}

.patch-archive-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.patch-archive-list a {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(186, 204, 255, 0.1);
}

.patch-archive-list span {
  color: var(--gold-2);
  font-family: var(--font-cond);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.patch-archive-list b {
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.patch-archive-list time {
  color: var(--muted);
  font-size: 12px;
}

.patch-archive-list li.is-current a {
  color: inherit;
}

@media (max-width: 980px) {
  .patch-layout,
  .patch-highlights {
    grid-template-columns: 1fr;
  }

  .patch-issue {
    padding: 24px 18px 20px 20px;
  }

  .patch-hero h1 {
    font-size: clamp(40px, 14vw, 64px);
  }
}

@media (max-width: 720px) {
  .feather:nth-child(n + 9) {
    display: none;
  }

  .patch-fab:not(.is-revealed) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
  }

  .loot-slot {
    width: 44px;
    height: 44px;
  }

  .patch-fab {
    right: 12px;
    bottom: 14px;
    padding: 8px 12px 8px 10px;
    gap: 8px;
  }

  .battle-fab {
    right: auto;
    left: 12px;
  }

  .patch-fab-title {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .footer-grid {
    gap: 20px 10px;
    padding-bottom: 24px;
  }

  .site-footer h4 {
    margin-bottom: 10px;
  }

  .site-footer ul,
  .site-footer li,
  .site-footer a {
    font-size: 13px;
    line-height: 1.4;
  }

  .site-footer li + li {
    margin-top: 6px;
  }

  .legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .site-footer {
    padding-bottom: 96px;
  }

  .toast {
    left: 12px;
    right: 12px;
    bottom: 78px;
  }

  .patch-hero {
    padding-top: 108px;
    padding-bottom: 36px;
  }

  .patch-hero-ver {
    letter-spacing: 0.22em;
  }

  .patch-hero-meta {
    gap: 6px 0;
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .patch-hero-meta span:not(:first-child)::before {
    margin: 0 8px;
  }

  .patch-issue-head p,
  .patch-hl p,
  .patch-block li,
  .patch-issue-foot p {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.55;
  }

  .patch-block li {
    padding-left: 22px;
  }

  .patch-issue-foot .btn,
  .patch-rail .btn {
    width: 100%;
    min-width: 0;
  }

  .news-empty {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Events calendar */

.is-idol { --ev: #f0c14b; }
.is-deathmatch { --ev: #8b7cff; }
.is-royale { --ev: #5eead4; }
.is-invasion { --ev: #ff6a3d; }
.is-frontline { --ev: #ff4d5e; }
.is-siege { --ev: #ffa94d; }
.is-hunt { --ev: #7bd96b; }
.is-territory { --ev: #4da3ff; }
.is-domination { --ev: #e05bff; }
.is-mission { --ev: #f0c14b; }
.is-boss { --ev: #7bd96b; }

.page-hero-events {
  padding-bottom: 34px;
}

.page-hero-events::before {
  background-position: center 30%;
  opacity: 0.55;
}

.events-head {
  display: grid;
  gap: 18px;
}

.events-head-copy {
  min-width: 0;
}

.events-next-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--gold-3);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.events-next-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.events-next-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ev) 26%, transparent);
  border-left: 3px solid var(--ev);
  border-radius: 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ev) 16%, transparent), transparent 75%),
    #141a28;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.events-next-card::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ev), transparent);
  opacity: 0.32;
}

.events-next-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ev);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ev) 55%, transparent));
}

.events-next-icon svg {
  width: 28px;
  height: 28px;
}

.events-next-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.events-next-copy strong {
  overflow: hidden;
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.events-next-copy small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1;
}

.events-next-card time {
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.events-next-card time.is-starting {
  color: #ff7c96;
  font-weight: 600;
}

.events-pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 10px var(--gold);
}

.events-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--gold-2);
  animation: ecal-ping 2.2s ease-out infinite;
}

@keyframes ecal-ping {
  from { transform: scale(0.5); opacity: 0.9; }
  to { transform: scale(1.9); opacity: 0; }
}

.events-legend {
  display: flex;
  flex-wrap: wrap;
  justify-self: end;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(12, 17, 27, 0.78);
  backdrop-filter: blur(8px);
}

.events-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(186, 204, 255, 0.08);
  border-radius: 8px;
  background: rgba(19, 26, 40, 0.9);
  color: var(--cream-2);
  font: 500 12.5px/1 var(--font-ui);
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s, background 0.2s;
}

.events-legend-item i {
  width: 8px;
  height: 8px;
  background: var(--ev);
  box-shadow: 0 0 8px var(--ev);
  transform: rotate(45deg);
}

.events-legend-item:hover {
  border-color: color-mix(in srgb, var(--ev) 45%, transparent);
}

.events-legend-item[aria-pressed="false"] {
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-color: var(--muted-2);
}

.events-legend-item[aria-pressed="false"] i {
  box-shadow: none;
  background: var(--muted-2);
}

.events-section {
  padding-top: 8px;
}

.ecal {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(9, 12, 20, 0.92);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ecal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  opacity: 0.6;
  z-index: 6;
}

.ecal-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(24, 32, 51, 0.7), rgba(12, 17, 27, 0.7));
}

.ecal-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--cream-2);
  font-size: 13.5px;
}

.ecal-status b {
  color: var(--gold-2);
  font-family: var(--font-cond);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ecal-status time {
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ecal-status-sep {
  color: var(--muted-2);
}

.ecal-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold);
}

.ecal-status-dot.is-live {
  background: var(--live);
  box-shadow: 0 0 10px var(--live);
  animation: ecal-blink 1.4s ease-in-out infinite;
}

.ecal-status-dot.is-live + b {
  color: var(--live);
}

@keyframes ecal-blink {
  50% { opacity: 0.35; }
}

.ecal-jump {
  flex: none;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(240, 193, 75, 0.08);
  color: var(--gold-2);
  font: 600 12px/1 var(--font-cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}

.ecal-jump:hover {
  background: rgba(240, 193, 75, 0.18);
}

.ecal-scroll {
  max-height: min(780px, calc(100vh - 190px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(186, 204, 255, 0.18) transparent;
}

.ecal-grid {
  display: grid;
  grid-template-columns: 72px repeat(7, minmax(132px, 1fr));
  min-width: 996px;
}

.ecal-corner,
.ecal-day {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 58px;
  border-bottom: 1px solid var(--line);
  background: #0e1320;
  color: var(--muted);
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ecal-corner {
  left: 0;
  z-index: 4;
  color: var(--muted-2);
  font-size: 11px;
}

.ecal-day + .ecal-day {
  border-left: 1px solid rgba(186, 204, 255, 0.06);
}

.ecal-day small {
  color: var(--muted-2);
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.ecal-day.is-today {
  background: linear-gradient(180deg, #1b2131, #151a27);
  color: var(--cream);
}

.ecal-day.is-today small {
  color: var(--gold-2);
}

.ecal-day.is-today::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-2);
  box-shadow: 0 0 12px var(--gold), 0 0 2px var(--gold-2);
}

.ecal-time {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-bottom: 1px solid rgba(186, 204, 255, 0.05);
  border-right: 1px solid rgba(186, 204, 255, 0.07);
  background: #0b0f19;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ecal-time.is-now {
  color: var(--gold-2);
  font-weight: 600;
}

.ecal-cell {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 5px;
  border-bottom: 1px solid rgba(186, 204, 255, 0.05);
  border-left: 1px solid rgba(186, 204, 255, 0.04);
}

.ecal-cell.is-today {
  background: rgba(240, 193, 75, 0.055);
  box-shadow: inset 1px 0 0 rgba(240, 193, 75, 0.14), inset -1px 0 0 rgba(240, 193, 75, 0.14);
}

.ecal-cell.is-today .ecal-chip:not(.is-filtered) {
  opacity: 1;
  filter: saturate(1.12) brightness(1.08);
  border-color: color-mix(in srgb, var(--ev) 48%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ev) 28%, transparent), transparent 82%),
    #1a2131;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ev) 18%, transparent),
    0 0 16px color-mix(in srgb, var(--ev) 18%, transparent);
}

.ecal-now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(90deg, var(--gold-2), rgba(255, 216, 106, 0.25));
  box-shadow: 0 0 10px rgba(240, 193, 75, 0.6);
  pointer-events: none;
}

.ecal-now::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold);
}

.ecal-chip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--ev) 26%, transparent);
  border-left: 3px solid var(--ev);
  border-radius: 6px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ev) 16%, transparent), transparent 75%),
    #141a28;
  color: var(--cream);
  font: 600 12px/1 var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.25s, filter 0.25s;
}

.ecal-chip svg {
  flex: none;
  color: var(--ev);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ev) 60%, transparent));
}

.ecal-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecal-chip:hover,
.ecal-chip:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--ev) 50%, transparent), 0 0 18px color-mix(in srgb, var(--ev) 22%, transparent);
}

.ecal-badge {
  display: none;
  position: absolute;
  top: -8px;
  right: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--gold-2);
  color: #1a1204;
  font: 700 9.5px/1 var(--font-cond);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 0 12px rgba(240, 193, 75, 0.55);
}

.ecal-chip.is-next .ecal-badge,
.ecal-chip.is-live .ecal-badge {
  display: block;
}

.ecal-chip.is-next {
  box-shadow: 0 0 0 1px rgba(255, 216, 106, 0.55), 0 0 18px rgba(240, 193, 75, 0.22);
}

.ecal-chip.is-live {
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.6), 0 0 20px rgba(74, 222, 128, 0.25);
}

.ecal-chip.is-live .ecal-badge {
  background: var(--live);
  color: #04200f;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
  animation: ecal-blink 1.4s ease-in-out infinite;
}

.ecal-chip.is-past {
  opacity: 0.45;
  filter: saturate(0.5);
}

.ecal-chip.is-filtered {
  opacity: 0.08;
  filter: grayscale(1);
  pointer-events: none;
}

.ecal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #0c111b;
  color: var(--muted);
  font-size: 12px;
}

.ecal-foot p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.ecal-foot b {
  color: var(--gold-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ecal-foot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 8px var(--live);
}

.ecal-tip {
  position: fixed;
  z-index: 200;
  width: 260px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ev) 40%, transparent);
  border-radius: 10px;
  background: rgba(14, 19, 32, 0.97);
  box-shadow: var(--shadow), 0 0 24px color-mix(in srgb, var(--ev) 14%, transparent);
  color: var(--cream-2);
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.ecal-tip em {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ev);
  font: 600 12px/1 var(--font-cond);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ecal-tip strong {
  display: block;
  margin-top: 8px;
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
}

.ecal-tip p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.ecal-tip-when {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 600;
}

.ecal-tip-when .is-live {
  color: var(--live);
}

@media (max-width: 720px) {
  .page-hero-events {
    padding-bottom: 24px;
  }

  .events-next-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .events-next-card {
    min-height: 62px;
    padding: 9px 11px;
  }

  .events-legend {
    width: 100%;
    justify-self: stretch;
  }

  .events-legend-item {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    padding: 9px 8px;
    font-size: 12px;
  }

  .ecal-bar {
    padding: 10px 12px;
  }

  .ecal-grid {
    grid-template-columns: 56px minmax(0, 1fr);
    min-width: 0;
  }

  .ecal-scroll {
    max-height: none;
    overflow: visible;
  }

  .ecal-corner,
  .ecal-day,
  .ecal-time {
    position: static;
  }

  .ecal-day:not(.is-today),
  .ecal-cell:not(.is-today) {
    display: none;
  }

  .ecal-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Phone art swaps ride on <picture>; the wrapper must not become a box between the img and its sizing parent. */
.class-select-slide picture {
  display: contents;
}

/* Pinned to a spot in the 2160x720 roster art (sky between Archer and Evocator): --k is the cover scale.
   The 440x427 rock is stretched sideways (--isle-stretch) into a longer island; its right edge stays where the
   old round one ended (k * 545), so the extra length grows to the left. Every percentage below is a share of
   the stretched box, which keeps the pedestal (x 51.4%) and the waterfall (x 29-37%) where the art has them. */
.discord-isle {
  --k: max(100cqw / 2160, 100cqh / 720);
  --isle-w: calc(var(--k) * 190);
  --isle-stretch: 1.45;
  --isle-box: calc(var(--isle-w) * var(--isle-stretch));
  --blurple: 88, 101, 242;
  position: absolute;
  z-index: 3;
  top: max(var(--cs-cut) + 52px, (100cqh - var(--k) * 720) * 0.7 + var(--k) * 100);
  left: calc(50% + var(--k) * 545 - var(--isle-box) / 2);
  width: var(--isle-box);
  translate: -50% 0;
  border-radius: 50%;
  animation: isle-float 7s ease-in-out infinite, isle-aura 3.5s ease-in-out infinite;
  transition: scale 0.35s ease;
}

.discord-isle::before {
  content: "";
  position: absolute;
  left: 51%;
  bottom: 80%;
  width: calc(var(--isle-w) * 0.78);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--blurple), 0.45) 0%, rgba(var(--blurple), 0.16) 42%, transparent 70%);
  pointer-events: none;
  animation: isle-pulse 3.5s ease-in-out infinite;
}

.discord-isle-rock {
  display: block;
  width: 100%;
  height: calc(var(--isle-w) * 0.88);
  max-width: none;
}

/* A crisp light rim plus a tight blurple edge, so the silhouette reads against any sky. */
.discord-isle-rock {
  position: relative;
  filter:
    drop-shadow(0 0 0.7px rgba(226, 230, 255, 0.95))
    drop-shadow(0 0 0.7px rgba(226, 230, 255, 0.95))
    drop-shadow(0 0 2.5px rgba(var(--blurple), 1))
    drop-shadow(0 0 7px rgba(var(--blurple), 0.75));
}

/* Live waterfall over the painted one (stream ≈ x 29–36%, from the lip at y 33% to the rock's underside at
   ≈ 78%, then falling free and thinning out). It sits under the sign, so the letters stay on top. Two copies of
   the vertically tiling streak texture scroll down at different speeds; ::before is the foam on the lip and
   <b> the spray where the water leaves the rock. */
.discord-isle-water {
  --fall-tile: calc(var(--isle-w) * 0.42);
  position: absolute;
  left: 28.6%;
  top: 33%;
  width: 8.4%;
  height: 60%;
  pointer-events: none;
  clip-path: polygon(30% 0, 85% 0, 93% 54%, 100% 100%, 0 100%, 3% 54%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  mix-blend-mode: screen;
}

.discord-isle-water i {
  position: absolute;
  inset: 0;
  background:
    url("../assets/isle-water.webp?v=1") 0 0 / 100% var(--fall-tile) repeat-y,
    url("../assets/isle-water.webp?v=1") 35% 0 / 80% calc(var(--fall-tile) * 0.7) repeat-y;
  opacity: 0.85;
  animation: isle-fall 0.9s linear infinite;
}

.discord-isle-water::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 6%;
  top: -2%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 248, 255, 0.95), rgba(200, 225, 255, 0.35) 60%, transparent);
  z-index: 1;
  animation: isle-foam 0.6s ease-in-out infinite alternate;
}

.discord-isle-water b {
  position: absolute;
  left: -40%;
  right: -40%;
  top: 66%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(220, 235, 255, 0.55), rgba(180, 205, 255, 0.18) 55%, transparent);
  filter: blur(1px);
  animation: isle-spray 1.4s ease-in-out infinite;
}

@keyframes isle-fall {
  to { background-position: 0 var(--fall-tile), 35% calc(var(--fall-tile) * 1.4); }
}

@keyframes isle-foam {
  from { opacity: 0.7; transform: scaleX(0.9); }
  to { opacity: 1; transform: scaleX(1.08); }
}

@keyframes isle-spray {
  0%, 100% { opacity: 0.55; transform: scale(0.85, 0.8); }
  50% { opacity: 1; transform: scale(1.1, 1.15); }
}

.discord-isle-logo {
  position: absolute;
  left: 51.4%;
  bottom: 96%;
  width: calc(var(--isle-w) * 0.4);
  height: auto;
  translate: -50% 0;
  color: #fff;
  filter:
    drop-shadow(0 0 4px rgba(var(--blurple), 0.95))
    drop-shadow(0 0 14px rgba(var(--blurple), 0.7));
  animation: isle-logo 3.5s ease-in-out infinite;
}

/* "Join Discord" cut into the long left cliff: skewed to the wall's slope (≈ 20° once stretched).
   ::before is the dark carved groove that stays when the neon (the inner span) flickers out. */
.discord-isle-sign {
  position: absolute;
  left: 3%;
  top: 52%;
  width: 50%;
  translate: 0 -50%;
  transform: skewY(20.5deg);
  font-family: var(--font-cond);
  font-size: max(9px, calc(var(--isle-w) * 0.078));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.discord-isle-sign::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: rgba(16, 14, 30, 0.82);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7), 0 1px 0 rgba(190, 200, 255, 0.22);
}

.discord-isle-sign span {
  position: relative;
  display: block;
  color: #eef0ff;
  text-shadow:
    0 0 1px #fff,
    0 0 4px rgba(var(--blurple), 1),
    0 0 9px rgba(var(--blurple), 0.95),
    0 0 18px rgba(var(--blurple), 0.7);
  animation: isle-neon 5.2s linear infinite;
}

.discord-isle:hover,
.discord-isle:focus-visible {
  scale: 1.05;
}

.discord-isle:hover .discord-isle-sign span,
.discord-isle:focus-visible .discord-isle-sign span {
  animation: none;
  opacity: 1;
}

.discord-isle:focus-visible {
  outline: none;
}

.discord-isle:focus-visible .discord-isle-rock {
  outline: 2px solid rgba(var(--blurple), 0.9);
  outline-offset: 6px;
  border-radius: 18px;
}

@keyframes isle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes isle-logo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes isle-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes isle-aura {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(var(--blurple), 0.5)) drop-shadow(0 0 26px rgba(var(--blurple), 0.25)); }
  50% { filter: drop-shadow(0 0 16px rgba(var(--blurple), 0.75)) drop-shadow(0 0 42px rgba(var(--blurple), 0.4)); }
}

/* Neon on a bad transformer: steady, a stutter, a long dark spell, then it buzzes back. */
@keyframes isle-neon {
  0%, 30%, 32.5%, 34%, 61%, 82%, 84%, 100% { opacity: 1; }
  31%, 33% { opacity: 0.12; }
  62%, 79% { opacity: 0; }
  80%, 83% { opacity: 0.7; }
  81% { opacity: 0.08; }
}

@media (max-width: 720px) {
  .discord-isle {
    --isle-w: clamp(80px, 24vw, 104px);
    top: 54px;
    left: auto;
    right: 10px;
    translate: none;
  }
}

/* Battle Modes: a full-width slanted band like the armor/mount sections, with gameplay filling it edge to edge.
   --accent (an "r, g, b" triple) is set per tab in the HTML and copied onto .battle for the active mode. */
.battle {
  --accent: 255, 184, 77;
}

.battle-stage {
  --bt-h: min(56.25vw, max(400px, 74vh), 720px);
  --bt-cut: clamp(14px, 2.4vw, 44px);
  position: relative;
  height: var(--bt-h);
}

.battle-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #07090f;
  clip-path: polygon(0 var(--bt-cut), 100% 0, 100% calc(100% - var(--bt-cut)), 0 100%);
}

.battle-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.battle-clip.is-active {
  z-index: 1;
  opacity: 1;
  transform: none;
}

.battle-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 8, 16, 0.9) 0%, rgba(6, 8, 16, 0.6) 28%, rgba(6, 8, 16, 0.12) 56%, transparent 74%),
    linear-gradient(180deg, rgba(6, 8, 16, 0.55) 0%, transparent 24%, transparent 62%, rgba(6, 8, 16, 0.8) 100%),
    radial-gradient(ellipse 62% 75% at 0% 100%, rgba(var(--accent), 0.24), transparent 70%);
  transition: background 0.6s ease;
}

/* Faint broadcast scanlines over the footage. */
.battle-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
  opacity: 0.55;
}

/* A slanted light bar that wipes across the footage whenever the mode changes. */
.battle-sweep {
  position: absolute;
  inset: -10% -30%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(var(--accent), 0.32) 47%, rgba(255, 248, 230, 0.6) 50%, rgba(var(--accent), 0.32) 53%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-70%);
}

.battle-stage.is-sweeping .battle-sweep {
  animation: battle-sweep 0.95s cubic-bezier(0.6, 0, 0.3, 1);
}

.battle-stage::before,
.battle-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(240, 193, 75, 0.75) 22%, rgba(255, 216, 106, 0.95) 50%, rgba(240, 193, 75, 0.75) 78%, transparent 100%);
}

.battle-stage::before {
  clip-path: polygon(0 var(--bt-cut), 100% 0, 100% 1.5px, 0 calc(var(--bt-cut) + 1.5px));
}

.battle-stage::after {
  clip-path: polygon(0 calc(100% - 1.5px), 100% calc(100% - var(--bt-cut) - 1.5px), 100% calc(100% - var(--bt-cut)), 0 100%);
}

.battle-hud {
  position: absolute;
  top: calc(var(--bt-cut) * 0.5 + 22px);
  right: max(20px, (100% - 1180px) / 2);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(238, 240, 250, 0.82);
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.battle-hud > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(6, 8, 16, 0.5);
  backdrop-filter: blur(6px);
}

.battle-hud-rec i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d5e;
  box-shadow: 0 0 8px rgba(255, 77, 94, 0.9);
  animation: battle-rec 1.6s ease-in-out infinite;
}

.battle-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--bt-cut) + clamp(26px, 6vh, 64px));
  z-index: 4;
  margin-inline: auto;
}

.battle-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-family: var(--font-cond);
  letter-spacing: 0.14em;
}

.battle-count b {
  color: rgb(var(--accent));
  font-size: 22px;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(var(--accent), 0.6);
}

.battle-count span {
  color: rgba(238, 240, 250, 0.5);
  font-size: 14px;
  font-weight: 600;
}

.battle-name {
  max-width: 16ch;
  margin: 0;
  color: #fff7e6;
  font-family: var(--font-display);
  font-size: clamp(34px, 5.2vw, 72px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 28px rgba(var(--accent), 0.45),
    0 4px 26px rgba(0, 0, 0, 0.85);
}

.battle-blurb {
  max-width: 46ch;
  margin: 14px 0 0;
  color: #dbe1ee;
  font-size: 17px;
  line-height: 1.6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

.battle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.battle-tags li {
  display: grid;
  gap: 2px;
  padding: 8px 14px 9px;
  border: 1px solid rgba(var(--accent), 0.42);
  border-left-width: 3px;
  background: rgba(8, 10, 18, 0.6);
  backdrop-filter: blur(6px);
}

.battle-tags span {
  color: rgba(238, 240, 250, 0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.battle-tags b {
  color: #fff;
  font-family: var(--font-cond);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.battle-copy.is-in > * {
  animation: battle-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.battle-copy.is-in > :nth-child(2) { animation-delay: 0.06s; }
.battle-copy.is-in > :nth-child(3) { animation-delay: 0.13s; }
.battle-copy.is-in > :nth-child(4) { animation-delay: 0.2s; }

/* Slanted tabs echo the band's cuts; children are skewed back upright. */
.battle-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  padding-inline: 8px;
}

/* Battle Modes has four modes; phones take them two by two (see the 720px block). */
.battle-tabs.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.battle-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(22, 26, 40, 0.92), rgba(10, 12, 20, 0.92));
  color: var(--cream-2);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transform: skewX(-12deg);
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

.battle-tab > * {
  transform: skewX(12deg);
}

.battle-tab:hover {
  translate: 0 -2px;
  border-color: rgba(var(--accent), 0.45);
}

.battle-tab:focus-visible {
  outline: 2px solid rgba(var(--accent), 0.9);
  outline-offset: 3px;
}

.battle-tab.is-active {
  border-color: rgba(var(--accent), 0.75);
  background:
    radial-gradient(ellipse 80% 120% at 0% 100%, rgba(var(--accent), 0.22), transparent 70%),
    linear-gradient(180deg, rgba(26, 28, 42, 0.96), rgba(12, 12, 20, 0.96));
  box-shadow: 0 0 26px rgba(var(--accent), 0.18), inset 0 0 0 1px rgba(var(--accent), 0.12);
}

.battle-tab-num {
  flex: none;
  color: rgba(255, 255, 255, 0.22);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

.battle-tab.is-active .battle-tab-num {
  color: rgb(var(--accent));
  text-shadow: 0 0 16px rgba(var(--accent), 0.6);
}

.battle-tab-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.battle-tab-copy b {
  font-family: var(--font-cond);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.battle-tab-copy small {
  color: rgba(238, 240, 250, 0.5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.battle-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
}

.battle-tab-bar i {
  display: block;
  height: 100%;
  background: rgb(var(--accent));
  box-shadow: 0 0 10px rgba(var(--accent), 0.8);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.battle.is-still .battle-tab-bar {
  display: none;
}

@keyframes battle-sweep {
  0% { opacity: 0; transform: translateX(-70%); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateX(70%); }
}

@keyframes battle-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
}

@keyframes battle-rec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@media (max-width: 720px) {
  .battle-stage {
    --bt-h: min(128vw, 600px);
  }

  .battle-shade {
    background:
      linear-gradient(180deg, rgba(6, 8, 16, 0.5) 0%, transparent 22%, rgba(6, 8, 16, 0.25) 46%, rgba(6, 8, 16, 0.92) 82%),
      radial-gradient(ellipse 90% 60% at 0% 100%, rgba(var(--accent), 0.24), transparent 70%);
  }

  .battle-hud {
    right: 14px;
    font-size: 11px;
  }

  .battle-hud-clip {
    display: none !important;
  }

  .battle-copy {
    bottom: calc(var(--bt-cut) + 18px);
  }

  .battle-name {
    font-size: clamp(30px, 9vw, 40px);
  }

  .battle-blurb {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.55;
  }

  .battle-tags {
    gap: 8px;
    margin-top: 14px;
  }

  .battle-tags li {
    padding: 5px 10px 6px;
    border-left-width: 2px;
  }

  .battle-tags span {
    display: none;
  }

  .battle-tags b {
    font-size: 14px;
  }

  .battle-tabs {
    gap: 8px;
    margin-top: 16px;
    padding-inline: 4px;
  }

  .battle-tabs.is-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .battle-tab {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 12px 14px;
    transform: skewX(-8deg);
  }

  .battle-tab > * {
    transform: skewX(8deg);
  }

  .battle-tab-num {
    font-size: 20px;
  }

  .battle-tab-copy b {
    font-size: 14px;
    letter-spacing: 0.04em;
  }

  .battle-tab-copy small {
    display: none;
  }
}

/* Five-man dungeons on the home page: the same slanted band as Battle Modes, the tier's art filling it, its copy
   over the art and the three tiers as tabs underneath. js/main.js (bindDungeons) swaps tier on tab click and copies
   the tab's --accent onto .dungeon. dungeons.html keeps the older card (.dungeon-board). */
.dungeon {
  --accent: 120, 214, 140;
}

.dungeon-stage {
  --bt-h: min(56.25vw, max(400px, 70vh), 680px);
  --bt-cut: clamp(14px, 2.4vw, 44px);
  position: relative;
  height: var(--bt-h);
}

.dungeon-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #07090f;
  clip-path: polygon(0 var(--bt-cut), 100% 0, 100% calc(100% - var(--bt-cut)), 0 100%);
}

.dungeon-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.dungeon-art.is-active {
  z-index: 1;
  opacity: 1;
  transform: none;
}

/* Embers drift up only over the Mythic art. */
.dungeon-sparks {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.dungeon.is-mythic .dungeon-sparks {
  opacity: 1;
}

.dungeon-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 8, 16, 0.9) 0%, rgba(6, 8, 16, 0.6) 30%, rgba(6, 8, 16, 0.12) 58%, transparent 76%),
    linear-gradient(180deg, rgba(6, 8, 16, 0.5) 0%, transparent 24%, transparent 62%, rgba(6, 8, 16, 0.8) 100%),
    radial-gradient(ellipse 62% 75% at 0% 100%, rgba(var(--accent), 0.22), transparent 70%);
  transition: background 0.6s ease;
}

.dungeon-stage::before,
.dungeon-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(240, 193, 75, 0.75) 22%, rgba(255, 216, 106, 0.95) 50%, rgba(240, 193, 75, 0.75) 78%, transparent 100%);
}

.dungeon-stage::before {
  clip-path: polygon(0 var(--bt-cut), 100% 0, 100% 1.5px, 0 calc(var(--bt-cut) + 1.5px));
}

.dungeon-stage::after {
  clip-path: polygon(0 calc(100% - 1.5px), 100% calc(100% - var(--bt-cut) - 1.5px), 100% calc(100% - var(--bt-cut)), 0 100%);
}

.dungeon-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--bt-cut) + clamp(26px, 6vh, 64px));
  z-index: 4;
  margin-inline: auto;
}

.dungeon-text.is-in > * {
  animation: battle-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dungeon-text.is-in > :nth-child(2) { animation-delay: 0.06s; }
.dungeon-text.is-in > :nth-child(3) { animation-delay: 0.13s; }
.dungeon-text.is-in > :nth-child(4) { animation-delay: 0.2s; }
.dungeon-text.is-in > :nth-child(5) { animation-delay: 0.27s; }

.dungeon-loot {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* A drop shows as in the game's tooltip: the icon in its slot, the name beside it in pale gold with a black edge. */
.dungeon-drop {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dungeon-drop > span {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #efe6c8;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 6px rgba(0, 0, 0, 0.6);
}

.loot-slot.is-mythic {
  border-color: rgba(255, 96, 70, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 96, 70, 0.28), 0 0 14px rgba(255, 70, 50, 0.25), 0 8px 18px rgba(0, 0, 0, 0.4);
}

.dungeon-tab-icon {
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: grayscale(0.55) brightness(0.8);
  transition: filter 0.35s ease, transform 0.35s ease;
}

.dungeon-tab.is-active .dungeon-tab-icon {
  filter: drop-shadow(0 0 10px rgba(var(--accent), 0.7));
  transform: skewX(12deg) scale(1.06);
}

@media (max-width: 720px) {
  .dungeon-stage {
    --bt-h: min(128vw, 600px);
  }

  .dungeon-shade {
    background:
      linear-gradient(180deg, rgba(6, 8, 16, 0.5) 0%, transparent 22%, rgba(6, 8, 16, 0.25) 46%, rgba(6, 8, 16, 0.92) 82%),
      radial-gradient(ellipse 90% 60% at 0% 100%, rgba(var(--accent), 0.22), transparent 70%);
  }

  .dungeon-text {
    bottom: calc(var(--bt-cut) + 18px);
  }

  .dungeon-loot {
    margin-top: 12px;
  }

  .dungeon-tab-icon {
    width: 36px;
    height: 36px;
  }

  .dungeon-tab.is-active .dungeon-tab-icon {
    transform: skewX(8deg) scale(1.06);
  }
}

/* ---------------------------------------------------------------------------------------------------------------
   The PvP Ring: an in-game village (assets/pvp/village.webp) across the band, the human kneeling and the dwarf
   standing in the grass either side, and between them the ring's in-game icon in a highlighted item slot, marked
   New, with its tooltip beside it: the game's colours, straight on the scene with no panel behind.
   --------------------------------------------------------------------------------------------------------------- */
.pvp-band {
  --pvp-h: clamp(540px, 47vw, 780px);
  --pvp-cut: clamp(14px, 2.4vw, 44px);
  position: relative;
  height: var(--pvp-h);
  overflow: hidden;
  isolation: isolate;
  background: #123f38;
  clip-path: polygon(0 var(--pvp-cut), 100% 0, 100% calc(100% - var(--pvp-cut)), 0 100%);
}

.pvp-band::before,
.pvp-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(240, 193, 75, 0.75) 22%, rgba(255, 216, 106, 0.95) 50%, rgba(240, 193, 75, 0.75) 78%, transparent 100%);
}

.pvp-band::before {
  clip-path: polygon(0 var(--pvp-cut), 100% 0, 100% 1.5px, 0 calc(var(--pvp-cut) + 1.5px));
}

.pvp-band::after {
  clip-path: polygon(0 calc(100% - 1.5px), 100% calc(100% - var(--pvp-cut) - 1.5px), 100% calc(100% - var(--pvp-cut)), 0 100%);
}

.pvp-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 62%;
}

/* Darker edges and a dimmer centre, so the slot and the two heroes carry the band. */
.pvp-band .pvp-cast::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 34% 46% at 50% 48%, rgba(6, 10, 14, 0.5), transparent 75%),
    linear-gradient(90deg, rgba(6, 8, 16, 0.5) 0%, transparent 18%, transparent 82%, rgba(6, 8, 16, 0.5) 100%),
    linear-gradient(180deg, rgba(6, 8, 16, 0.35), transparent 22%, transparent 78%, rgba(6, 8, 16, 0.45));
}

.pvp-cast {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The front of the meadow again, over the heroes' feet, so they stand in the grass rather than on it. */
.pvp-grass {
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 7%, transparent 13%);
  mask-image: linear-gradient(0deg, #000 0%, #000 7%, transparent 13%);
}

/* Once bindPvpGrass has drawn the meadow in the wind, its canvases stand in for both images. */
.pvp-band.has-wind img.pvp-backdrop {
  visibility: hidden;
}

/* Feet on the grass line; each figure is sized by height and keeps its sprite's aspect. */
.pvp-hero {
  position: absolute;
  bottom: 7%;
  margin: 0;
  transform-origin: 50% 100%;
  animation: pvp-idle 4.8s ease-in-out infinite;
}

.pvp-hero img {
  position: relative;
  height: 100%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 0 1px rgba(10, 30, 26, 0.6)) saturate(1.04);
}

.pvp-human {
  left: 7%;
  height: 80%;
}

.pvp-dwarf {
  right: 11%;
  height: 62%;
  animation-delay: -2.4s;
}

.pvp-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -3%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(4, 18, 10, 0.7), rgba(4, 18, 10, 0.3) 60%, transparent);
}

@keyframes pvp-idle {
  0%, 100% { transform: none; }
  50% { transform: scaleY(1.008); }
}

/* The ring and its description in one box, as the game draws an item window: dark translucent slate, a thin grey
   rim with a lighter inner line, the scene softly blurred behind it. */
.pvp-showcase {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  padding: clamp(16px, 1.6vw, 24px) clamp(18px, 2vw, 30px);
  border: 1px solid rgba(118, 126, 142, 0.85);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(34, 39, 50, 0.8), rgba(20, 23, 31, 0.82));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transform: translate(-50%, -50%);
}

.pvp-slot-col {
  position: relative;
  display: grid;
  align-self: stretch;
  align-content: center;
  justify-items: center;
  gap: 14px;
}

/* "New Item" in the 4Story logo's manner: Almendra SC (wedge serifs, rising capitals), cast gold over an orange
   bevel and a thin amber rim, with a glint running across it. Four stacked copies of the text, painted in order. */
.pvp-new-item {
  --rule: clamp(26px, 3vw, 54px);
  position: absolute;
  left: 50%;
  bottom: calc(100% + clamp(16px, 1.6vw, 24px) + 12px);
  display: inline-grid;
  margin: 0;
  translate: -50% 0;
  /* Room for the rules, so they count towards the column's width and never run into the tooltip. */
  padding: 0 calc(var(--rule) + 12px);
  font-family: "Almendra SC", var(--font-display);
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.pvp-new-item > span {
  position: relative;
  grid-area: 1 / 1;
}

.pvp-new-item .o {
  color: #6b2f05;
  -webkit-text-stroke: 0.15em #6b2f05;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(255, 170, 40, 0.35));
}

.pvp-new-item .e {
  color: #d9480f;
  -webkit-text-stroke: 0.08em #e8590c;
}

.pvp-new-item .f {
  color: transparent;
  background: linear-gradient(180deg, #fff9c4 0%, #ffe45c 24%, #f8b51e 46%, #e2621a 58%, #ffc83a 74%, #fff0a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.02em #f59f00;
}

.pvp-new-item .s {
  color: transparent;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
  animation: pvp-glint 3.8s ease-in-out infinite;
}

/* Gold rules either side, each ending in a small diamond. */
.pvp-new-item::before,
.pvp-new-item::after {
  content: "";
  position: absolute;
  top: 55%;
  width: var(--rule);
  height: 7px;
  translate: 0 -50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%23ffd54a'/%3E%3C/svg%3E") var(--tip) 50% / 7px 7px no-repeat,
    linear-gradient(var(--dir), transparent, #f0c14b) 0 50% / calc(100% - 9px) 1.5px no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 190, 60, 0.6));
}

.pvp-new-item::before {
  --dir: 90deg;
  --tip: 100%;
  left: 0;
}

.pvp-new-item::after {
  --dir: 270deg;
  --tip: 0%;
  right: 0;
  background-position: 0 50%, 9px 50%;
}

@keyframes pvp-glint {
  0%, 45% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* The item slot: a dark well in a gold frame, the highlight breathing round it and a sweep of light across. */
.pvp-slot {
  --s: clamp(112px, 10vw, 168px);
  position: relative;
  width: var(--s);
  height: var(--s);
  padding: calc(var(--s) * 0.1);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 120, 80, 0.22), transparent 62%),
    linear-gradient(180deg, #1b1610, #0c0a07);
  box-shadow:
    inset 0 0 0 2px #e9b84a,
    inset 0 0 0 4px #4a3410,
    inset 0 0 0 5px rgba(255, 226, 150, 0.5),
    inset 0 0 26px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.55);
}

.pvp-slot::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 22px;
  background: radial-gradient(closest-side, rgba(255, 206, 102, 0.85), rgba(255, 170, 60, 0.35) 55%, transparent);
  filter: blur(8px);
  animation: pvp-breathe 2.6s ease-in-out infinite;
}

.pvp-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 248, 220, 0.38) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat;
  animation: pvp-sweep 4.2s ease-in-out infinite;
}

.pvp-slot-icon {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: contain;
}

/* The tooltip, as the game draws it: Tahoma, a hard black outline, gold for the name and options, red for the
   rolled stats with their caps in grey. No panel: it sits straight on the scene. */
.pvp-tip {
  width: clamp(250px, 21vw, 320px);
  color: #f2f2f2;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.34;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 0 6px rgba(0, 0, 0, 0.85);
}

.pvp-tip p,
.pvp-tip ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pvp-tip-name {
  margin-bottom: 0.7em !important;
  color: #f5a623;
  font-size: 1.15em;
  font-weight: 700;
}

.pvp-tip-lore {
  margin: 0.9em 0 !important;
}

.pvp-tip .is-gold {
  color: #f5a623;
}

/* The ring's selling point, picked out in bright yellow. */
.pvp-tip .is-hl {
  color: #ffe23a;
  font-weight: 700;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 0 10px rgba(255, 220, 40, 0.55);
}

.pvp-tip b {
  color: #ff3a2e;
  font-weight: 400;
}

.pvp-tip i {
  color: #c9c9c9;
  font-style: normal;
}

.pvp-slot-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 14px 7px 18px;
  border: 1px solid rgba(240, 193, 75, 0.45);
  border-radius: 999px;
  background: rgba(8, 10, 16, 0.78);
  color: var(--gold-3);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.pvp-new {
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff7a4a, #d8381c);
  color: #fff6ea;
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  box-shadow: 0 0 14px rgba(255, 106, 61, 0.65);
  animation: pvp-breathe 1.8s ease-in-out infinite;
}

@keyframes pvp-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes pvp-sweep {
  0%, 55% { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}

@media (max-width: 720px) {
  .pvp-band {
    --pvp-h: clamp(720px, 196vw, 800px);
  }

  .pvp-backdrop {
    object-position: 46% 70%;
  }

  .pvp-human {
    left: -6%;
    height: 42%;
  }

  .pvp-dwarf {
    right: -6%;
    height: 33%;
  }

  .pvp-showcase {
    top: 12%;
    flex-direction: column;
    gap: 14px;
    width: min(340px, calc(100% - 32px));
    transform: translateX(-50%);
  }

  .pvp-items {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------------------------------------------
   Site footer (footerHTML in js/main.js): opens with the same slanted gold edge as the section bands, a warm glow
   behind the logo row, then the links and the server's numbers as small tiles.
   --------------------------------------------------------------------------------------------------------------- */
.gx-footer {
  --gf-cut: clamp(14px, 2.4vw, 44px);
  position: relative;
  z-index: 2;
  padding: calc(var(--gf-cut) + 44px) 0 26px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(240, 193, 75, 0.1), transparent 70%),
    radial-gradient(ellipse 40% 60% at 0% 100%, rgba(139, 124, 255, 0.08), transparent 70%),
    linear-gradient(180deg, #0b0e18 0%, #06080e 100%);
  clip-path: polygon(0 var(--gf-cut), 100% 0, 100% 100%, 0 100%);
}

.gx-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(240, 193, 75, 0.75) 22%, rgba(255, 216, 106, 0.95) 50%, rgba(240, 193, 75, 0.75) 78%, transparent 100%);
  clip-path: polygon(0 var(--gf-cut), 100% 0, 100% 1.5px, 0 calc(var(--gf-cut) + 1.5px));
}

.gx-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(240, 193, 75, 0.16);
}

.gx-footer-logo img {
  height: 46px;
  width: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
}

.gx-footer-tag {
  flex: 1 1 260px;
  margin: 0;
  color: var(--cream-2);
  font-family: var(--font-serif);
  font-size: 18px;
}

.gx-footer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.gx-footer-cta .btn {
  min-height: 46px;
  padding: 0 24px;
}

/* Discord in its own colour, framed like the ghost buttons. */
.gx-discord {
  border: 1px solid rgba(124, 136, 255, 0.55);
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.32), rgba(48, 56, 150, 0.32));
  color: #e6e8ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 22px rgba(60, 70, 200, 0.22);
}

.gx-discord:hover,
.gx-discord:focus-visible {
  border-color: rgba(160, 170, 255, 0.9);
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.55), rgba(60, 70, 190, 0.5));
  color: #fff;
}

.gx-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 28px;
  padding: 30px 0;
}

.gx-footer h4 {
  margin: 0 0 14px;
  color: var(--gold-2);
  font-family: var(--font-cond);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.gx-footer ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gx-footer ul a {
  color: var(--muted);
  font-size: 15px;
  transition: color 0.2s ease;
}

.gx-footer ul a:hover,
.gx-footer ul a:focus-visible {
  color: var(--gold-3);
}

.gx-footer-stats dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.gx-footer-stats dl > div {
  padding: 12px 14px;
  border: 1px solid rgba(240, 193, 75, 0.22);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(24, 28, 42, 0.9), rgba(12, 14, 22, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 233, 168, 0.06);
}

.gx-footer-stats dt {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gx-footer-stats dd {
  margin: 4px 0 0;
  color: var(--gold-3);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.gx-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(186, 204, 255, 0.1);
  color: var(--muted-2);
  font-size: 12px;
}

@media (max-width: 900px) {
  .gx-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .gx-footer-stats {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .gx-footer {
    padding-bottom: 96px;
  }

  .gx-footer-top {
    justify-content: center;
    text-align: center;
  }

  .gx-footer-cta {
    width: 100%;
  }

  .gx-footer-cta .btn {
    flex: 1 1 0;
  }

  .gx-footer-stats dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gx-legal {
    justify-content: center;
    text-align: center;
  }
}

/* dungeons.html: a lockout note and the download button under the band. */
.dungeon-page-foot {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 30px;
}

.dungeon-page-foot .note {
  margin: 0;
}

/* Phones: the statue a little right of the crest in the text block. */
@media (max-width: 720px) {
  .faction-side.valorian .valorian-scene {
    left: -8%;
    width: 100%;
  }

  .faction-emblem {
    --emblem: 78px;
  }
}

/* Phones: frame the hero art on the Priest and the Magician (x 0.38-0.51 of hero-roster.webp) instead of its middle. */
@media (max-width: 720px) {
  .hero-bg {
    object-position: 43% 32%;
  }

  .hero-cast {
    object-position: 43% 38%;
  }
}

@media (max-width: 720px) {
  .faction-side.derion .derion-scene {
    --dx: 56%;
  }
}

/* ---------------------------------------------------------------------------------------------------------------
   Section titles in Mephisto, the face of the "Story" in the 4Story logo (assets/fonts/mephisto.ttf, from
   Desktop\grafy\czcionka.psd). Shareware by David F. Nalle, 1994: see WORKSPACE.md about registering it.
   --------------------------------------------------------------------------------------------------------------- */
@font-face {
  font-family: "Mephisto";
  src: url("../assets/fonts/mephisto.ttf?v=2") format("truetype");
  font-display: swap;
}

.section-head .kicker {
  font-family: "Mephisto", var(--font-display);
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-transform: none;
  text-shadow: 0 2px 0 rgba(60, 30, 4, 0.8), 0 0 18px rgba(240, 160, 50, 0.35);
}

@media (max-width: 720px) {
  .section-head .kicker {
    font-size: 25px;
    letter-spacing: 0.02em;
  }
}

/* The PvP jewellery list: each piece as the game shows it, framed icon and its name in the item-name orange. */
.pvp-items {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pvp-items li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pvp-items img {
  flex: none;
  width: clamp(38px, 3.2vw, 46px);
  height: auto;
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
}

.pvp-items span {
  color: #f5a623;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 700;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.85);
}

/* Discord island: 5% smaller, 2 px lower. */
.discord-isle {
  --isle-w: calc(var(--k) * 180.5);
  top: max(var(--cs-cut) + 54px, (100cqh - var(--k) * 720) * 0.7 + var(--k) * 100 + 2px);
}

@media (max-width: 720px) {
  .discord-isle {
    --isle-w: clamp(76px, 22.8vw, 98.8px);
    top: 56px;
  }
}

/* Six classes: the PvP balance note under the roster title, on one line on desktop, with a gold rule before it. */
.class-select-note {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 8px 16px 8px 14px;
  border-left: 2px solid var(--gold-2);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, rgba(10, 8, 6, 0.72), rgba(10, 8, 6, 0.28));
  color: var(--gold-3);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

@media (max-width: 1100px) {
  .class-select-note {
    white-space: normal;
    max-width: 34ch;
  }
}

@media (max-width: 720px) {
  /* Arrows above the copy block, which grew with the PvP note. */
  .class-select-nav {
    top: 29%;
  }

  .class-select .class-select-note {
    max-width: none;
    margin-top: 6px;
    padding: 5px 10px 5px 9px;
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.3;
  }
}


/* The dragon takes off on hover: a short crouch, a leap with the nose lifting, then it hangs on its wingbeats. The
   rise is a transition (so it also settles back down when the pointer leaves); the dip comes from the easing's
   negative start. The wingbeat bob runs on the inner .dragon-flight once it is up. */
.dragon-flight {
  position: relative;
}

.mount-dragon .mount-art {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.45s ease,
    translate 1.1s cubic-bezier(0.45, 0, 0.25, 1),
    rotate 1.1s cubic-bezier(0.45, 0, 0.25, 1);
}

.mount-dragon::before {
  transition: transform 1.1s cubic-bezier(0.45, 0, 0.25, 1), opacity 1.1s ease;
}

.mount-dragon.is-active .mount-art {
  translate: -2% -17%;
  rotate: 3deg;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.45s ease,
    translate 1.5s cubic-bezier(0.5, -0.45, 0.25, 1),
    rotate 1.5s cubic-bezier(0.5, -0.7, 0.3, 1);
}

.mount-dragon.is-active .dragon-flight {
  animation: dragon-wingbeat 2.4s ease-in-out 1.3s infinite;
}

.mount-dragon.is-active::before {
  transform: translateY(40%) scale(0.68);
  opacity: 0.3;
}

@media (hover: hover) {
  .mount-dragon:hover .mount-art,
  .mount-reflection .mount-dragon.is-hover .mount-art {
    translate: -2% -17%;
    rotate: 3deg;
    transition:
      transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 0.45s ease,
      translate 1.5s cubic-bezier(0.5, -0.45, 0.25, 1),
      rotate 1.5s cubic-bezier(0.5, -0.7, 0.3, 1);
  }

  .mount-dragon:hover .dragon-flight,
  .mount-reflection .mount-dragon.is-hover .dragon-flight {
    animation: dragon-wingbeat 2.4s ease-in-out 1.3s infinite;
  }

  .mount-dragon:hover::before {
    transform: translateY(40%) scale(0.68);
    opacity: 0.3;
  }
}

@keyframes dragon-wingbeat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-3.2%) rotate(0.8deg); }
  58% { transform: translateY(-0.6%) rotate(-0.3deg); }
}

/* Hero stats bar: glassier panel, a gold rim of light along the top, a small diamond on each divider, and
   gold-gradient figures. */
.stats {
  border-color: rgba(240, 193, 75, 0.28);
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(240, 193, 75, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(24, 30, 50, 0.9), rgba(8, 11, 20, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 168, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 40px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.stats::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2) 20%, #fff2c4 50%, var(--gold-2) 80%, transparent);
  box-shadow: 0 0 12px rgba(255, 216, 106, 0.7);
}

.stat {
  border-right-color: rgba(240, 193, 75, 0.14);
}

.stat::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4px;
  z-index: 1;
  width: 7px;
  height: 7px;
  translate: 0 -50%;
  rotate: 45deg;
  background: var(--gold-2);
  box-shadow: 0 0 8px rgba(255, 216, 106, 0.6);
}

.stat:last-child::after {
  display: none;
}

.stat span {
  color: var(--gold-3);
  opacity: 0.72;
}

.stat strong {
  background: linear-gradient(180deg, #fff3c4 0%, #ffd86a 45%, #d99a2b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(240, 160, 50, 0.3));
}

@media (max-width: 980px) {
  .stat {
    border-bottom-color: rgba(240, 193, 75, 0.14);
  }

  .stat::after {
    display: none;
  }
}

/* The jewellery case fills the slot a little past its padding, centred on the well; its open lid puts the visual
   weight right of the image's middle, so it sits a touch left to look centred. */
.pvp-slot-icon.is-box {
  position: absolute;
  inset: 3%;
  width: 94%;
  height: 94%;
  max-width: none;
  margin: 0;
  translate: -2.4% 0.8%;
  border-radius: 0;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

/* Art and clips: not draggable or selectable, and no long-press "Save image" sheet on iPhone (links that wrap
   a picture keep their long-press menu). bindArtGuard() in main.js blocks the right-click menu. */
img,
video {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

:where(img, video):not(a *) {
  -webkit-touch-callout: none;
}
/* ---------------------------------------------------------------------------------------------------------------
   Integration overrides (added when the design was wired to the live site).

   Status markers lose their outer glow. A small filled dot with a blurred halo floats on the surface like a
   sticker; a dark seat ring and an inner highlight make it read as a lens set into the pill instead.
   --------------------------------------------------------------------------------------------------------------- */
.live-dot {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35);
}

.patch-fab-pip,
.patch-fab.is-unread .patch-fab-pip,
.battle-fab .patch-fab-pip {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35);
  animation: none;
}

.meta-row a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq details p a.linkish {
  display: inline;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.armor-portal-hint::before {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35);
  animation: none;
}

/* Release countdown in the home page hero (markup in index.html, clock in bindLaunchCountdown). */
.launch {
  margin-top: 26px;
}

.launch-label {
  margin: 0;
  color: var(--cream-2);
  font-family: var(--font-cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}

.launch-label b {
  color: var(--gold-2);
  font-weight: 700;
}

.launch-clock {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(72px, 96px));
  margin-top: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(7, 9, 16, 0.78);
}

.launch-clock[hidden] {
  display: none;
}

.launch-cell {
  padding: 14px 8px 12px;
  text-align: center;
}

.launch-cell + .launch-cell {
  border-left: 1px solid var(--line);
}

.launch-cell strong {
  display: block;
  color: var(--gold-2);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}

.launch-cell span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-family: var(--font-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.launch-local {
  margin: 10px 0 0;
  color: var(--cream-2);
  font-size: 13px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
}

.launch.is-open .launch-label {
  font-size: 17px;
}

@media (max-width: 720px) {
  .launch {
    margin-top: 20px;
  }

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

  .launch-cell {
    padding: 12px 4px 10px;
  }

  .launch-cell span {
    font-size: 11px;
    letter-spacing: 0.1em;
  }
}