:root {
  --void: #020506;
  --panel: #071012;
  --panel-soft: rgba(7, 16, 18, 0.9);
  --bone: #e4ded2;
  --muted: #89928e;
  --gold: #bd9556;
  --gold-light: #e0c58e;
  --teal: #55d6cd;
  --line: rgba(186, 150, 88, 0.22);
}

* { box-sizing: border-box; }

html {
  background: var(--void);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--bone);
  background: var(--void);
  font-family: "Noto Serif SC", "Songti SC", serif;
}

button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible {
  outline: 1px solid var(--gold-light);
  outline-offset: 4px;
}

.site-shell {
  position: relative;
  height: 100dvh;
  min-height: 680px;
  display: grid;
  grid-template-rows: 62px minmax(464px, 1fr) 154px;
  overflow: hidden;
  isolation: isolate;
  background: #030708;
}

.site-shell::after {
  content: "";
  position: fixed;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header */
.site-header {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 0 clamp(30px, 4vw, 70px);
  border-bottom: 1px solid rgba(157, 176, 170, 0.12);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(3, 8, 9, 0.76));
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--gold-light);
  text-decoration: none;
}

.brand-crest {
  position: relative;
  width: 33px;
  height: 40px;
  display: block;
  clip-path: polygon(50% 0, 95% 18%, 86% 72%, 50% 100%, 14% 72%, 5% 18%);
  background: linear-gradient(132deg, #6e5732, #d9ba7b 48%, #49361d);
  filter: drop-shadow(0 0 8px rgba(195, 151, 80, 0.28));
}

.brand-crest i {
  position: absolute;
  top: 6px;
  left: 15px;
  width: 3px;
  height: 27px;
  background: #11191b;
  transform: rotate(30deg);
}

.brand-crest i:nth-child(2) { transform: rotate(-30deg); }
.brand-crest i:nth-child(3) { top: 3px; height: 34px; transform: none; }

.brand-copy strong {
  display: block;
  font-size: 20px;
  line-height: 19px;
  font-weight: 600;
  letter-spacing: 1px;
}

.brand-copy small {
  display: block;
  margin-top: 4px;
  color: #bd965b;
  font: 700 8px/1 Cinzel, serif;
  letter-spacing: 1.55px;
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}

nav a {
  position: relative;
  padding: 21px 0;
  color: #bcb8ae;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}

nav a:hover,
nav a.is-current { color: var(--gold-light); }

nav a.is-current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 29px;
  height: 1px;
  transform: translateX(-50%);
  background: var(--gold);
  box-shadow: 0 0 9px var(--gold);
}

.nav-glyph {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  color: #c19a5d;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

/* Hero art */
.hero {
  position: relative;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(177, 141, 77, 0.2);
  background:
    radial-gradient(ellipse at 77% 38%, rgba(21, 95, 92, 0.34), transparent 24%),
    linear-gradient(100deg, #020607, #071214 50%, #061012);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.33), transparent 38%, rgba(0, 0, 0, 0.06)),
    linear-gradient(0deg, rgba(1, 4, 5, 0.96), transparent 36%);
}

.hero-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-position: center 48%;
  background-size: cover;
  filter: saturate(0.84) contrast(1.04);
  transition: opacity 0.55s ease, filter 0.55s ease;
}

.site-shell.has-hero-image .hero-art {
  opacity: 1;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.54), transparent 57%, rgba(0, 0, 0, 0.06)),
    linear-gradient(0deg, rgba(1, 4, 5, 0.88), transparent 45%),
    var(--selected-hero-image);
}

.site-shell.scene-changing .hero-art {
  opacity: 0.42;
  filter: saturate(0.45) blur(2px);
}

.hero-atmosphere { position: absolute; z-index: 1; inset: 0; }
.hero-atmosphere > * { position: absolute; }

.rune-disc {
  width: min(51vw, 660px);
  aspect-ratio: 1;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(185, 139, 64, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 27px rgba(170, 126, 56, 0.025),
    inset 0 0 0 36px rgba(170, 126, 56, 0.025);
  opacity: 0.45;
}

.rune-disc::before,
.rune-disc::after {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px dashed rgba(188, 143, 70, 0.13);
  border-radius: 50%;
}

.rune-disc::after {
  inset: 76px;
  border-style: solid;
}

.left-ruin,
.right-warrior { transition: opacity 0.4s ease; }

.site-shell.has-hero-image .left-ruin,
.site-shell.has-hero-image .right-warrior { opacity: 0; }

.left-ruin {
  left: 0;
  bottom: 0;
  width: 36%;
  height: 60%;
  background:
    radial-gradient(circle at 37% 25%, rgba(48, 218, 207, 0.52), transparent 4%, rgba(10, 76, 75, 0.42) 12%, transparent 30%),
    #071112;
  clip-path: polygon(0 47%, 14% 34%, 19% 10%, 25% 33%, 31% 18%, 37% 47%, 48% 57%, 56% 44%, 63% 70%, 75% 55%, 89% 74%, 100% 63%, 100% 100%, 0 100%);
}

.right-warrior {
  right: 6vw;
  bottom: -36px;
  width: 310px;
  height: 475px;
  filter: drop-shadow(-24px 18px 18px #000);
  animation: warrior-breathe 7s ease-in-out infinite;
}

.right-warrior i,
.right-warrior b,
.right-warrior em {
  display: block;
  position: absolute;
  border: 1px solid #476260;
  background: linear-gradient(130deg, #385052, #0b1214 43%, #142223 70%, #020506);
}

.warrior-cloak {
  width: 278px;
  height: 271px;
  left: 0;
  top: 195px;
  opacity: 0.78;
  clip-path: polygon(34% 0, 66% 0, 96% 19%, 100% 100%, 0 100%, 7% 34%);
}

.warrior-helm {
  width: 109px;
  height: 124px;
  top: 5px;
  left: 99px;
  clip-path: polygon(50% 0, 77% 24%, 89% 89%, 50% 100%, 11% 89%, 23% 24%);
}

.warrior-helm::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 63px;
  width: 45px;
  height: 4px;
  background: #67efe4;
  box-shadow: 0 0 12px 5px #23c2b7;
}

.warrior-shoulder {
  width: 220px;
  height: 104px;
  top: 110px;
  left: 38px;
  clip-path: polygon(7% 19%, 42% 2%, 61% 15%, 86% 0, 100% 50%, 79% 100%, 14% 94%, 0 51%);
}

.warrior-body {
  width: 199px;
  height: 260px;
  top: 166px;
  left: 54px;
  clip-path: polygon(11% 0, 39% 10%, 67% 0, 96% 19%, 100% 82%, 74% 100%, 19% 94%, 0 48%);
}

.warrior-arm {
  width: 100px;
  height: 270px;
  right: 1px;
  top: 155px;
  transform: rotate(-17deg);
  clip-path: polygon(27% 0, 78% 8%, 100% 67%, 72% 100%, 0 82%, 7% 35%);
}

.right-warrior b {
  left: 126px;
  top: 286px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #5af0e3;
  box-shadow: 0 0 14px 7px #2fd4c7, 0 0 55px 25px rgba(28, 186, 177, 0.65);
  animation: energy-pulse 2.6s ease-in-out infinite;
}

.right-warrior em {
  right: 2px;
  bottom: 7px;
  width: 22px;
  height: 123px;
  transform: rotate(-46deg);
  border: 0;
  opacity: 0.7;
  filter: blur(2px);
  background: linear-gradient(180deg, transparent, #54e1d5 45%, transparent);
}

.mote {
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4cd7cc;
  box-shadow: 0 0 16px 6px rgba(32, 205, 194, 0.58), 0 0 60px 16px rgba(16, 154, 148, 0.25);
  animation: mote-drift 5s ease-in-out infinite;
}

.mote-a { left: 14%; top: 22%; }
.mote-b { right: 20%; top: 34%; width: 7px; height: 7px; animation-delay: -2s; }
.mote-c { right: 31%; top: 18%; width: 3px; height: 3px; animation-delay: -3.6s; }

/* Central title */
.intro-copy {
  position: absolute;
  z-index: 4;
  top: 44px;
  left: 47%;
  width: min(680px, 76vw);
  transform: translateX(-50%);
  text-align: center;
}

.lab-name {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 250px;
  color: var(--gold-light);
}

.lab-name strong {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 2px;
  text-shadow: 0 2px 16px #000;
}

.lab-name span {
  margin-top: 5px;
  color: #c69e60;
  font: 600 10px/1 Cinzel, serif;
  letter-spacing: 2.7px;
}

.lab-name i {
  width: 48px;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, transparent, #bd9557, transparent);
}

.lab-name i::after {
  content: "◇";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  color: #b78e50;
  font-size: 9px;
}

.intro-copy h1 {
  margin: 22px 0 4px;
  color: #e8e3da;
  font: 500 clamp(40px, 4.1vw, 52px)/1.1 Cinzel, serif;
  letter-spacing: clamp(5px, 0.65vw, 8px);
  white-space: nowrap;
  text-shadow: 0 4px 25px #000, 0 0 1px #fff;
}

.research-label,
.current-label {
  margin: 0;
  color: #c39a5c;
  font: 600 10px/1.4 Cinzel, "Noto Serif SC", serif;
  letter-spacing: 4px;
}

.ornament {
  display: block;
  height: 14px;
  margin: 3px 0 0;
  color: #bf9558;
  font-size: 13px;
  text-shadow: 0 0 11px rgba(190, 144, 69, 0.56);
}

.mission {
  margin: 2px 0 0;
  color: #d0cdc4;
  font-size: 14px;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px #000;
}

/* Season rail */
.season-switcher {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 217px;
  width: min(690px, 82vw);
  transform: translateX(-50%);
  text-align: center;
}

.season-switcher > p {
  display: none;
}

.season-rail {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 31px;
}

.season-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 5px 11px;
  border: 1px solid rgba(184, 148, 88, 0.18);
  border-radius: 2px;
  color: #7d8985;
  background: rgba(3, 10, 11, 0.56);
  font-family: "Noto Serif SC", serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: 0.25s ease;
}

.season-tab b {
  color: #b88e50;
  font: 600 10px Cinzel, serif;
  letter-spacing: 0.7px;
}

.season-tab span {
  font-size: 11px;
  letter-spacing: 0.5px;
}

.season-tab small {
  padding-left: 8px;
  border-left: 1px solid rgba(131, 150, 145, 0.22);
  color: #5d6966;
  font: 9px Cinzel, serif;
}

.season-tab:hover,
.season-tab.is-active {
  color: #ead6ac;
  border-color: rgba(203, 161, 93, 0.42);
  background: linear-gradient(90deg, rgba(90, 64, 27, 0.2), rgba(9, 43, 42, 0.55));
  box-shadow: inset 0 0 15px rgba(188, 143, 70, 0.08), 0 0 18px rgba(23, 161, 151, 0.06);
}

.season-empty {
  color: #687470;
  font-size: 11px;
}

/* Build card deck */
.featured-build {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 40px;
  width: min(570px, 72vw);
  transform: translateX(-50%);
  text-align: center;
}

.current-label {
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 2.2px;
}

.deck-frame {
  position: relative;
  height: 158px;
  perspective: 1000px;
}

.build-deck {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.build-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 45% 55%;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(70, 200, 188, 0.48);
  border-radius: 5px;
  background: linear-gradient(104deg, rgba(7, 25, 27, 0.95), rgba(3, 9, 10, 0.97));
  box-shadow:
    inset 0 1px rgba(201, 244, 237, 0.08),
    inset 0 0 42px rgba(13, 99, 93, 0.12),
    0 13px 34px rgba(0, 0, 0, 0.52),
    0 0 24px rgba(24, 169, 157, 0.08);
  transform-origin: center bottom;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s, filter 0.4s;
}

.build-card::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(187, 151, 89, 0.1);
  border-radius: 2px;
}

.build-card.is-active {
  z-index: 3;
  opacity: 1;
  transform: translateX(0) translateZ(0) rotateY(0);
  animation: card-arrive 0.5s cubic-bezier(0.19, 0.88, 0.31, 1);
}

.build-card.is-next {
  z-index: 2;
  opacity: 0.72;
  filter: brightness(0.55);
  cursor: pointer;
  transform: translateX(18%) translateZ(-90px) rotateY(-14deg) scale(0.91);
}

.build-card.is-prev {
  z-index: 2;
  opacity: 0.72;
  filter: brightness(0.55);
  cursor: pointer;
  transform: translateX(-18%) translateZ(-90px) rotateY(14deg) scale(0.91);
}

.build-card.is-hidden {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(-180px) scale(0.82);
}

.card-art {
  --card-glow: #52e4d6;
  --card-shadow: rgba(26, 191, 180, 0.75);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 59% 51%, var(--card-glow) 0 3%, #0b4b4b 4%, transparent 17%),
    linear-gradient(130deg, #041013, #173334 48%, #020607);
}

.card-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.27), transparent),
    linear-gradient(0deg, rgba(0, 0, 0, 0.48), transparent 58%);
}

.card-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
  opacity: 0.96;
  filter: brightness(1.14) contrast(1.05) saturate(0.9);
}

.card-arch,
.card-exile,
.card-energy,
.card-art > i,
.card-art > b { position: absolute; }

.card-arch {
  left: 12%;
  top: 10%;
  width: 92px;
  height: 180px;
  border: 10px solid #172e2d;
  border-bottom: 0;
  border-radius: 60px 60px 0 0;
  opacity: 0.7;
}

.card-exile {
  z-index: 1;
  width: 80px;
  height: 139px;
  left: 39%;
  top: 14px;
  background: linear-gradient(130deg, #365354, #05090a 53%, #182d2e);
  clip-path: polygon(50% 0, 77% 20%, 89% 42%, 82% 53%, 100% 100%, 9% 100%, 21% 52%, 11% 40%, 23% 20%);
}

.card-energy {
  z-index: 3;
  left: 64%;
  top: 42%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0.72;
  background: var(--card-glow);
  box-shadow: 0 0 8px 5px rgba(42, 205, 192, 0.7), 0 0 30px 13px var(--card-shadow);
  animation: energy-pulse 2.6s ease-in-out infinite;
}

.card-art > i {
  z-index: 3;
  left: 47%;
  top: 52px;
  width: 34px;
  height: 3px;
  background: #75ebe2;
  box-shadow: 0 0 11px 5px rgba(38, 201, 189, 0.72);
}

.card-art > b {
  z-index: 3;
  left: 17px;
  bottom: 12px;
  color: #d2aa68;
  font-size: 14px;
  text-shadow: 0 0 14px #c69a58;
}

.card-art:has(.card-image) .card-arch,
.card-art:has(.card-image) .card-exile { display: none; }

.card-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 18px 26px;
}

.card-meta {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid rgba(91, 180, 169, 0.17);
  border-radius: 2px;
  color: #9ed1c9;
  background: rgba(23, 92, 85, 0.32);
  font: 9px Cinzel, "Noto Serif SC", serif;
}

.card-copy h3 {
  margin: 7px 0 3px;
  color: #ead9b8;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-shadow: 0 2px 10px #000;
}

.card-copy p {
  margin: 0 0 10px;
  color: #93d0c7;
  font-size: 12px;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 5px 13px;
  border: 1px solid #aa874f;
  border-radius: 2px;
  color: #ddbb7c;
  text-decoration: none;
  font-size: 11px;
  background: rgba(99, 70, 28, 0.06);
  transition: 0.2s ease;
}

.card-link:hover {
  color: #f0d398;
  background: rgba(178, 139, 78, 0.13);
  box-shadow: 0 0 14px rgba(196, 151, 80, 0.14);
}

.card-link b {
  font: 15px Arial, sans-serif;
  transition: transform 0.2s;
}

.card-link:hover b { transform: translateX(4px); }

.deck-control {
  position: absolute;
  z-index: 6;
  top: 50%;
  width: 31px;
  height: 31px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(198, 158, 92, 0.36);
  border-radius: 50%;
  color: #c9a463;
  background: rgba(3, 8, 9, 0.82);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.deck-frame:hover .deck-control { opacity: 1; }
.deck-prev { left: -49px; }
.deck-next { right: -49px; }

.deck-dots {
  height: 7px;
  margin-top: 7px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.deck-dots:empty { display: none; }

.deck-dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #4b5553;
  cursor: pointer;
}

.deck-dot.is-active {
  background: #c29b5e;
  box-shadow: 0 0 7px #c29b5e;
}

.empty-build {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(181, 149, 90, 0.31);
  border-radius: 5px;
  background: linear-gradient(105deg, rgba(8, 18, 20, 0.94), rgba(4, 9, 10, 0.97));
}

.empty-build span {
  color: #b99053;
  font-size: 24px;
}

.empty-build h3 {
  margin: 3px 0 2px;
  color: #d7c7aa;
  font-size: 17px;
  font-weight: 500;
}

.empty-build p {
  margin: 0;
  color: #6d7a76;
  font-size: 11px;
}

/* Footer */
.site-footer {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  align-items: start;
  gap: 30px;
  padding: 22px max(30px, calc((100vw - 720px) / 2)) 30px;
  border-top: 1px solid rgba(139, 176, 165, 0.08);
  background:
    radial-gradient(ellipse at 50% -25%, rgba(32, 72, 68, 0.14), transparent 46%),
    linear-gradient(90deg, #030708, #071012 50%, #030708);
}

.author-note p,
.build-history > p {
  margin: 0 0 5px;
  color: #c39b5b;
  font: 600 10px Cinzel, "Noto Serif SC", serif;
  letter-spacing: 1.4px;
}

.author-note h2 {
  margin: 0 0 3px;
  color: #d5cec0;
  font-size: 16px;
  font-weight: 500;
}

.author-note span {
  display: block;
  color: #858b86;
  font-size: 10px;
  line-height: 1.6;
}

.footer-mark {
  position: relative;
  place-self: center;
  width: 58px;
  height: 72px;
  color: transparent;
  opacity: 0.5;
}

.footer-mark::before,
.footer-mark::after {
  content: "";
  position: absolute;
  inset: 7px 16px;
  border: 1px solid #263432;
  transform: rotate(45deg);
}

.footer-mark::after {
  inset: 18px 7px;
  opacity: 0.55;
}

.build-history {
  justify-self: end;
  min-width: 160px;
}

.history-entry {
  display: grid;
  grid-template-columns: 35px 10px 1fr;
  gap: 7px;
  align-items: start;
  font-size: 11px;
}

.history-entry > b {
  color: #c6c1b6;
  font-family: Cinzel, serif;
  font-weight: 500;
}

.history-entry > i {
  position: relative;
  width: 5px;
  height: 5px;
  margin-top: 5px;
  border-radius: 50%;
  background: #bd9656;
}

.history-entry > i::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 1px;
  height: 25px;
  background: #6e552e;
}

.history-entry > span { color: #c7c0b2; }

.history-entry small {
  display: block;
  margin-top: 2px;
  color: #687572;
  font: 9px Cinzel, serif;
}

.copyright {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  color: #53605d;
  text-align: center;
  font: 9px Cinzel, serif;
  letter-spacing: 0.4px;
}

/* Scene variants */
.site-shell[data-scene="poe2"] .hero {
  background:
    radial-gradient(ellipse at 82% 38%, rgba(112, 42, 22, 0.34), transparent 25%),
    linear-gradient(100deg, #070403, #17100c 49%, #110806);
}

.site-shell[data-scene="poe2"] .right-warrior {
  filter: drop-shadow(-25px 19px 18px #000) sepia(0.6) hue-rotate(330deg);
}

.site-shell[data-scene="poe2"] .left-ruin {
  filter: sepia(0.8) hue-rotate(320deg);
}

.site-shell[data-scene="poe2"] .intro-copy h1 {
  font-size: clamp(37px, 4.2vw, 54px);
  letter-spacing: clamp(3px, 0.65vw, 8px);
}

.site-shell[data-scene="poe2"] .mission {
  font-size: 0;
  opacity: 0.65;
}

.site-shell[data-scene="poe2"] .mission::after {
  content: "赛季与 BD 的档案，会在这里逐步展开。";
  font-size: 14px;
}

body.low-glow .mote,
body.low-glow .right-warrior b,
body.low-glow .card-energy {
  animation-play-state: paused;
  filter: brightness(0.45);
}

body.low-glow .hero { filter: saturate(0.66); }

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

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

@keyframes mote-drift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.4; }
  50% { transform: translate3d(8px, -17px, 0); opacity: 1; }
}

@keyframes warrior-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes card-arrive {
  from { filter: brightness(0.68); transform: translateY(7px) scale(0.99); }
  to { filter: brightness(1); transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
  .site-shell {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: 58px minmax(610px, 1fr) auto;
    overflow: auto;
  }

  .site-header { min-height: 58px; padding: 0 18px; }
  .brand-crest { width: 28px; height: 35px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy small { font-size: 7px; }
  nav { gap: 18px; }
  nav a { padding: 19px 0; font-size: 12px; }

  .hero { min-height: 610px; }
  .hero-art { background-position: 65% center; }
  .rune-disc { width: 460px; top: 39%; }

  .intro-copy {
    top: 40px;
    left: 50%;
    width: 94vw;
  }

  .lab-name strong { font-size: 20px; }
  .lab-name span { font-size: 8px; }

  .intro-copy h1 {
    margin-top: 19px;
    font-size: 36px;
    letter-spacing: 4px;
  }

  .mission {
    padding: 0 20px;
    font-size: 12px;
    line-height: 1.7;
  }

  .season-switcher {
    bottom: 212px;
    width: 94vw;
  }

  .season-rail {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 4px 4px;
  }

  .season-tab { flex: none; }

  .featured-build {
    bottom: 24px;
    width: 91vw;
  }

  .deck-frame { height: 166px; }
  .build-card { grid-template-columns: 40% 60%; }
  .card-copy { padding: 17px 15px; }
  .card-copy h3 { font-size: 20px; }
  .deck-control { display: none; }

  .site-footer {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 21px 24px 34px;
  }

  .footer-mark { display: none; }
  .build-history { justify-self: start; min-width: 0; }
  .copyright { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* POE 2 archive layout */
.site-shell {
  grid-template-rows: 62px minmax(500px, 1fr) 94px;
}

.edition-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #9a9d97;
  font: 600 10px Cinzel, serif;
  letter-spacing: 2px;
}

.edition-mark i {
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a9844c);
}

.intro-copy {
  top: 34px;
}

.site-shell[data-scene="titan"] .intro-copy h1,
.site-shell[data-scene="poe2"] .intro-copy h1 {
  font-size: clamp(36px, 4vw, 52px);
  letter-spacing: clamp(3px, 0.58vw, 7px);
}

.season-switcher {
  z-index: 8;
  top: 52%;
  bottom: auto;
  left: max(34px, calc((100vw - 1180px) / 2));
  width: 210px;
  transform: translateY(-50%);
  text-align: left;
}

.season-switcher > p {
  display: block;
  margin: 0 0 16px 48px;
  color: #8e6e3e;
  font: 600 10px Cinzel, "Noto Serif SC", serif;
  letter-spacing: 2px;
}

.season-switcher > p::after {
  content: "SEASON ARCHIVE";
  display: block;
  margin-top: 4px;
  color: #53605d;
  font: 8px Cinzel, serif;
  letter-spacing: 1.7px;
}

.season-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  max-height: 290px;
  padding: 2px 0;
  overflow-y: auto;
}

.season-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(188, 148, 82, 0.38) 14%, rgba(74, 113, 108, 0.36) 86%, transparent);
}

.season-tab {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  padding: 10px 6px 10px 0;
  border: 0;
  color: #737e7a;
  background: transparent;
  backdrop-filter: none;
  text-align: left;
}

.season-tab::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 27px;
  left: 13px;
  width: 7px;
  height: 7px;
  border: 1px solid #765d36;
  border-radius: 50%;
  background: #071011;
  box-shadow: 0 0 0 4px rgba(5, 12, 13, 0.92);
}

.season-tab b {
  align-self: center;
  color: #79633e;
  font: 600 10px Cinzel, serif;
  letter-spacing: 0.8px;
}

.season-tab > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.season-tab span strong {
  overflow: hidden;
  color: #8c948f;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-tab span small {
  padding: 0;
  border: 0;
  color: #4f5c59;
  font: 8px Cinzel, "Noto Serif SC", serif;
}

.season-tab:hover,
.season-tab.is-active {
  border: 0;
  color: #d8c39a;
  background: linear-gradient(90deg, transparent, rgba(17, 50, 47, 0.22), transparent);
  box-shadow: none;
}

.season-tab.is-active::before {
  border-color: #d0a45d;
  background: #d0a45d;
  box-shadow: 0 0 0 4px rgba(5, 12, 13, 0.92), 0 0 12px rgba(208, 164, 93, 0.68);
}

.season-tab.is-active b { color: #d0a45d; }
.season-tab.is-active span strong { color: #e2d3b4; }
.season-tab.is-active span small { color: #71827d; }

.featured-build {
  z-index: 7;
  bottom: 80px;
  width: min(620px, 67vw);
}

.deck-frame {
  height: 195px;
}

.build-card {
  grid-template-columns: 46% 54%;
  border-color: rgba(73, 202, 190, 0.54);
  box-shadow:
    inset 0 1px rgba(201, 244, 237, 0.09),
    inset 0 0 48px rgba(13, 99, 93, 0.14),
    0 18px 44px rgba(0, 0, 0, 0.62),
    0 0 31px rgba(24, 169, 157, 0.1);
}

.build-card.is-active {
  z-index: 5;
}

.build-card.is-next {
  z-index: 3;
  opacity: 0.8;
  filter: brightness(0.6) saturate(0.82);
  transform: translateX(47%) translateY(7px) translateZ(-155px) rotateY(-31deg) rotateZ(0.6deg) scale(0.81);
}

.build-card.is-prev {
  z-index: 3;
  opacity: 0.8;
  filter: brightness(0.6) saturate(0.82);
  transform: translateX(-47%) translateY(7px) translateZ(-155px) rotateY(31deg) rotateZ(-0.6deg) scale(0.81);
}

.build-card.is-next:hover,
.build-card.is-prev:hover {
  opacity: 0.96;
  filter: brightness(0.74) saturate(0.96);
}

.build-card.is-next::after,
.build-card.is-prev::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 54%, rgba(91, 205, 192, 0.1));
}

.build-card.is-prev::after {
  background: linear-gradient(270deg, transparent 54%, rgba(196, 151, 82, 0.1));
}

.card-copy {
  padding: 22px 28px;
}

.card-copy h3 {
  font-size: 25px;
}

.card-state {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 11px;
  border: 1px solid rgba(140, 124, 92, 0.24);
  border-radius: 2px;
  color: #776f5f;
  background: rgba(65, 55, 36, 0.08);
  font-size: 10px;
  letter-spacing: 1px;
}

.is-placeholder-card .card-copy h3 {
  color: #9f998c;
}

.is-placeholder-card .card-copy p {
  color: #65716d;
}

.card-art[data-art="vacant-cyan"] {
  background:
    radial-gradient(circle at 57% 48%, rgba(75, 152, 193, 0.62), transparent 5%, rgba(25, 66, 88, 0.42) 12%, transparent 30%),
    linear-gradient(135deg, #03090d, #11222b 50%, #020507);
}

.card-art[data-art="vacant-gold"] {
  background:
    radial-gradient(circle at 55% 50%, rgba(185, 137, 73, 0.58), transparent 5%, rgba(82, 52, 23, 0.44) 13%, transparent 31%),
    linear-gradient(135deg, #0b0804, #2a1d0e 50%, #050403);
}

.site-shell[data-scene="vacant-cyan"] .hero-art {
  filter: hue-rotate(18deg) saturate(0.68) contrast(1.12) brightness(0.66);
}

.site-shell[data-scene="vacant-gold"] .hero-art {
  filter: sepia(0.48) hue-rotate(344deg) saturate(0.72) contrast(1.12) brightness(0.58);
}

.deck-prev { left: -84px; }
.deck-next { right: -84px; }

.site-footer {
  display: flex;
  align-items: center;
  padding: 0 clamp(30px, 5vw, 76px);
  background:
    radial-gradient(ellipse at 50% -80%, rgba(38, 88, 82, 0.18), transparent 55%),
    linear-gradient(90deg, #030708, #071012 48%, #030708);
}

.author-strip {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto 52px minmax(260px, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.author-kicker {
  color: #9b7743;
  font: 600 8px Cinzel, serif;
  letter-spacing: 1.8px;
}

.author-strip > strong {
  color: #e0d4bd;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(198, 153, 82, 0.15);
}

.author-strip > i {
  height: 1px;
  background: linear-gradient(90deg, #9c7740, transparent);
}

.author-strip > p {
  margin: 0;
  color: #77827e;
  font-size: 10px;
  letter-spacing: 0.35px;
}

.author-strip > small {
  color: #46514f;
  font: 8px Cinzel, serif;
  letter-spacing: 0.5px;
}

@media (max-width: 720px) {
  .site-shell {
    grid-template-rows: 58px minmax(680px, 1fr) auto;
  }

  .edition-mark {
    display: none;
  }

  .intro-copy {
    top: 34px;
  }

  .site-shell[data-scene="titan"] .intro-copy h1,
  .site-shell[data-scene="poe2"] .intro-copy h1 {
    font-size: 32px;
    letter-spacing: 3px;
  }

  .season-switcher {
    top: 245px;
    left: 50%;
    width: 92vw;
    transform: translateX(-50%);
  }

  .season-switcher > p {
    margin: 0 0 7px 5px;
  }

  .season-rail {
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .season-rail::before {
    top: 17px;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }

  .season-tab {
    flex: 0 0 180px;
    min-height: 58px;
    grid-template-columns: 34px 1fr;
  }

  .season-tab::before {
    top: 14px;
    left: 12px;
  }

  .featured-build {
    bottom: 58px;
    width: 88vw;
  }

  .deck-frame {
    height: 205px;
  }

  .build-card {
    grid-template-columns: 41% 59%;
  }

  .build-card.is-next {
    transform: translateX(29%) translateZ(-120px) rotateY(-24deg) scale(0.82);
  }

  .build-card.is-prev {
    transform: translateX(-29%) translateZ(-120px) rotateY(24deg) scale(0.82);
  }

  .card-copy {
    padding: 18px 14px;
  }

  .card-copy h3 {
    font-size: 19px;
  }

  .site-footer {
    min-height: 118px;
    padding: 20px 24px;
  }

  .author-strip {
    grid-template-columns: auto 1fr;
    gap: 7px 14px;
  }

  .author-strip > i,
  .author-strip > small {
    display: none;
  }

  .author-strip > p {
    grid-column: 1 / -1;
    line-height: 1.65;
  }
}

/* =========================================================
   Dungeon archive — responsive art direction
   ========================================================= */
:root {
  --font-display: "Cinzel Decorative", "Cinzel", serif;
  --font-inscription: "ZCOOL XiaoWei", "Noto Serif SC", "Songti SC", serif;
  --font-body: "Noto Serif SC", "Songti SC", serif;
  --abyss: #020607;
  --iron: #10191a;
  --verdigris: #4fd4c6;
  --relic-gold: #c89b57;
  --old-bone: #e3d8c2;
}

body {
  font-family: var(--font-body);
  font-kerning: normal;
}

.site-shell {
  min-height: 640px;
  grid-template-rows: clamp(58px, 6.4vh, 68px) minmax(500px, 1fr) clamp(92px, 10.2vh, 112px);
}

.brand-copy strong,
.lab-name strong,
.season-tab span strong,
.card-copy h3,
.author-heading strong {
  font-family: var(--font-inscription);
}

.brand-copy strong {
  font-size: clamp(19px, 1.15vw, 23px);
  letter-spacing: 1.8px;
}

.brand-copy small,
.edition-mark,
.lab-name span,
.research-label,
.season-switcher > p,
.season-tab b,
.card-meta,
.author-kicker,
.author-strip > small {
  font-family: var(--font-display);
}

.intro-copy {
  top: clamp(26px, 3.7vh, 42px);
}

.lab-name strong {
  color: #dfc48e;
  font-size: clamp(22px, 1.45vw, 28px);
  letter-spacing: 3px;
  text-shadow: 0 2px 20px #000, 0 0 18px rgba(201, 155, 84, 0.18);
}

.lab-name span {
  color: #ac7e40;
  letter-spacing: 3.2px;
}

.intro-copy h1,
.site-shell[data-scene="titan"] .intro-copy h1,
.site-shell[data-scene="poe2"] .intro-copy h1,
.site-shell[data-scene="vacant-cyan"] .intro-copy h1,
.site-shell[data-scene="vacant-gold"] .intro-copy h1 {
  margin-top: clamp(18px, 2.2vh, 25px);
  color: #e9e2d6;
  font-family: var(--font-display);
  font-size: clamp(41px, 3.8vw, 64px);
  font-weight: 400;
  letter-spacing: clamp(4px, 0.56vw, 9px);
  text-shadow:
    0 4px 28px #000,
    0 0 1px #fff,
    0 0 38px rgba(74, 189, 178, 0.07);
}

.research-label {
  color: #b68643;
  font-size: clamp(9px, 0.6vw, 11px);
  letter-spacing: clamp(3px, 0.32vw, 5px);
}

.mission {
  color: #c7c0b4;
  font-family: var(--font-inscription);
  font-size: clamp(13px, 0.83vw, 16px);
  letter-spacing: 1.35px;
}

/* Season timeline remains useful even when many seasons are added. */
.season-switcher {
  top: 52%;
  left: clamp(26px, 3vw, 66px);
  width: clamp(230px, 14vw, 286px);
}

.season-switcher > p {
  margin: 0 0 20px 50px;
  color: #a67d43;
  font-size: clamp(10px, 0.62vw, 12px);
  letter-spacing: 2.7px;
  text-shadow: 0 0 18px rgba(190, 143, 69, 0.18);
}

.season-switcher > p::after {
  margin-top: 6px;
  color: #596965;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 2.25px;
}

.season-rail {
  max-height: min(42vh, 420px);
}

.season-rail::before {
  left: 20px;
  background: linear-gradient(180deg, transparent, rgba(206, 161, 88, 0.58) 12%, rgba(63, 156, 145, 0.42) 88%, transparent);
  box-shadow: 0 0 12px rgba(190, 143, 69, 0.08);
}

.season-tab {
  grid-template-columns: 44px 1fr;
  min-height: clamp(72px, 7.5vh, 88px);
  gap: 12px;
}

.season-tab::before {
  top: calc(50% - 5px);
  left: 15px;
  width: 9px;
  height: 9px;
}

.season-tab b {
  font-size: clamp(11px, 0.68vw, 13px);
}

.season-tab span strong {
  color: #999c94;
  font-size: clamp(15px, 0.88vw, 18px);
  letter-spacing: 1.2px;
  text-shadow: 0 2px 12px #000;
}

.season-tab span small {
  color: #55645f;
  font-size: clamp(8px, 0.5vw, 10px);
  letter-spacing: 0.7px;
}

.season-tab:hover,
.season-tab.is-active {
  background:
    linear-gradient(90deg, transparent 3%, rgba(39, 84, 76, 0.18) 34%, rgba(91, 63, 28, 0.08) 70%, transparent);
}

/* The card deck is the page's visual centre, not a footer attachment. */
.featured-build {
  bottom: clamp(190px, 26vh, 390px);
  width: clamp(620px, 42vw, 860px);
}

.deck-frame {
  height: clamp(200px, 12.5vw, 246px);
  perspective: 1350px;
}

.build-card {
  grid-template-columns: 47% 53%;
  border-radius: 2px;
  border-color: rgba(71, 207, 193, 0.6);
  background:
    linear-gradient(118deg, rgba(13, 38, 38, 0.96), rgba(3, 9, 10, 0.985) 48%, rgba(10, 22, 21, 0.97)),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.012) 12px 13px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.72),
    inset 0 0 0 7px rgba(194, 151, 83, 0.035),
    inset 0 0 65px rgba(25, 115, 106, 0.13),
    0 26px 60px rgba(0, 0, 0, 0.74),
    0 0 36px rgba(35, 191, 178, 0.12);
}

.build-card::before {
  inset: 8px;
  border-color: rgba(204, 161, 91, 0.17);
  box-shadow: inset 0 0 24px rgba(196, 151, 80, 0.035);
}

.build-card.is-active::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -45%;
  bottom: -45%;
  left: -22%;
  width: 14%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(14deg);
  background: linear-gradient(90deg, transparent, rgba(160, 238, 228, 0.13), transparent);
  animation: relic-sweep 5.8s ease-in-out 1.1s infinite;
}

@keyframes relic-sweep {
  0%, 66% { left: -22%; opacity: 0; }
  72% { opacity: 0.82; }
  88% { left: 112%; opacity: 0; }
  100% { left: 112%; opacity: 0; }
}

.card-corner {
  position: absolute;
  z-index: 7;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0.72;
  filter: drop-shadow(0 0 5px rgba(202, 157, 83, 0.28));
}

.card-corner::before,
.card-corner::after {
  content: "";
  position: absolute;
  background: #b2874c;
}

.card-corner::before { width: 18px; height: 1px; }
.card-corner::after { width: 1px; height: 18px; }
.card-corner-tl { top: 5px; left: 5px; }
.card-corner-tr { top: 5px; right: 5px; transform: rotate(90deg); }
.card-corner-br { right: 5px; bottom: 5px; transform: rotate(180deg); }
.card-corner-bl { left: 5px; bottom: 5px; transform: rotate(270deg); }

.card-art {
  border-right: 1px solid rgba(188, 151, 88, 0.15);
}

.card-art::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 42%, rgba(1, 5, 6, 0.18)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent 62%),
    repeating-linear-gradient(115deg, transparent 0 24px, rgba(193, 154, 88, 0.025) 24px 25px);
}

.card-image {
  filter: brightness(1.07) contrast(1.12) saturate(0.84);
  transition: transform 0.8s cubic-bezier(0.18, 0.8, 0.22, 1), filter 0.8s ease;
}

.build-card.is-active:hover .card-image {
  transform: scale(1.035);
  filter: brightness(1.14) contrast(1.12) saturate(0.94);
}

.card-copy {
  padding: clamp(22px, 1.8vw, 34px);
}

.card-meta {
  border-color: rgba(93, 190, 177, 0.28);
  border-radius: 0;
  color: #a6d5cd;
  background: linear-gradient(90deg, rgba(34, 113, 103, 0.34), rgba(26, 66, 61, 0.12));
  font-size: clamp(9px, 0.55vw, 11px);
  letter-spacing: 0.8px;
}

.card-copy h3 {
  margin: 9px 0 5px;
  color: var(--old-bone);
  font-size: clamp(26px, 1.7vw, 34px);
  font-weight: 400;
  letter-spacing: 2px;
  text-shadow: 0 3px 14px #000, 0 0 22px rgba(200, 155, 84, 0.1);
}

.card-copy p {
  margin-bottom: 14px;
  color: #8fc5bc;
  font-size: clamp(12px, 0.72vw, 14px);
  letter-spacing: 0.7px;
}

.card-link,
.card-state {
  min-height: 32px;
  padding: 7px 15px;
  border-color: rgba(201, 157, 83, 0.72);
  border-radius: 0;
  font-family: var(--font-inscription);
  letter-spacing: 0.8px;
  background:
    linear-gradient(90deg, rgba(138, 96, 37, 0.1), transparent),
    rgba(1, 5, 6, 0.42);
  box-shadow: inset 0 0 14px rgba(198, 151, 79, 0.04);
}

.card-link:hover {
  box-shadow: inset 0 0 18px rgba(205, 157, 81, 0.09), 0 0 18px rgba(196, 151, 80, 0.17);
}

.build-card.is-next {
  transform: translateX(49%) translateY(10px) translateZ(-180px) rotateY(-33deg) rotateZ(0.55deg) scale(0.8);
}

.build-card.is-prev {
  transform: translateX(-49%) translateY(10px) translateZ(-180px) rotateY(33deg) rotateZ(-0.55deg) scale(0.8);
}

.deck-control {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  font-size: 16px;
  font-family: serif;
  backdrop-filter: blur(8px);
}

.deck-prev { left: -96px; }
.deck-next { right: -96px; }

.deck-dot {
  width: 18px;
  height: 2px;
  border-radius: 0;
  background: #424d4a;
  transition: width 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.deck-dot.is-active {
  width: 34px;
  background: linear-gradient(90deg, #a77a3e, #58d7ca);
  box-shadow: 0 0 10px rgba(82, 210, 198, 0.34);
}

/* Author inscription bar */
.site-footer {
  padding: 0 clamp(32px, 4vw, 84px);
  border-top-color: rgba(193, 153, 85, 0.32);
}

.author-strip {
  grid-template-columns: 44px auto clamp(48px, 5vw, 88px) minmax(330px, 1fr) auto;
  gap: clamp(13px, 1.25vw, 25px);
}

.author-seal {
  position: relative;
  width: 38px;
  height: 44px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0, 92% 18%, 83% 76%, 50% 100%, 17% 76%, 8% 18%);
  color: #152021;
  background: linear-gradient(145deg, #705331, #c79c59 48%, #4c3822);
  filter: drop-shadow(0 0 10px rgba(193, 146, 75, 0.18));
}

.author-seal b {
  font: 700 17px var(--font-display);
}

.author-seal i {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(17, 25, 26, 0.5);
  clip-path: inherit;
}

.author-heading {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}

.author-kicker {
  color: #8f6938;
  font-size: 8px;
  letter-spacing: 2.1px;
}

.author-heading strong {
  color: #dfd2bb;
  font-size: clamp(20px, 1.35vw, 26px);
  font-weight: 400;
  letter-spacing: 2.2px;
  text-shadow: 0 0 18px rgba(198, 153, 82, 0.13);
}

.author-strip > i {
  height: 1px;
  background: linear-gradient(90deg, #9c7740, rgba(67, 139, 130, 0.22), transparent);
}

.author-strip > p {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(10px, 0.62vw, 12px);
  letter-spacing: 0.45px;
}

.author-strip > p b {
  color: #a78e64;
  font-family: var(--font-inscription);
  font-weight: 400;
  letter-spacing: 1.4px;
  white-space: nowrap;
}

.author-strip > p span {
  color: #64736f;
}

.author-strip > small {
  color: #43514e;
  font-size: 8px;
  letter-spacing: 0.75px;
  white-space: nowrap;
}

/* Common notebook widths. */
@media (min-width: 1025px) and (max-width: 1500px) {
  .site-header {
    padding-inline: clamp(28px, 3vw, 48px);
  }

  .featured-build {
    width: clamp(600px, 48vw, 690px);
  }

  .deck-frame {
    height: clamp(190px, 14vw, 214px);
  }

  .season-switcher {
    left: clamp(22px, 2.2vw, 34px);
    width: 220px;
  }

  .season-tab span strong { font-size: 15px; }
  .author-strip { grid-template-columns: 38px auto 38px minmax(270px, 1fr) auto; }
}

/* Short notebook screens need a tighter vertical rhythm. */
@media (min-width: 721px) and (max-height: 800px) {
  .site-shell {
    grid-template-rows: 58px minmax(492px, 1fr) 86px;
  }

  .intro-copy { top: 22px; }
  .lab-name strong { font-size: 20px; }
  .lab-name i { margin-top: 7px; }

  .intro-copy h1,
  .site-shell[data-scene="titan"] .intro-copy h1,
  .site-shell[data-scene="poe2"] .intro-copy h1,
  .site-shell[data-scene="vacant-cyan"] .intro-copy h1,
  .site-shell[data-scene="vacant-gold"] .intro-copy h1 {
    margin-top: 14px;
    font-size: clamp(36px, 3.7vw, 48px);
  }

  .mission { font-size: 12px; }

  .featured-build {
    bottom: clamp(126px, 18vh, 148px);
  }

  .deck-frame {
    height: clamp(184px, 14vw, 202px);
  }

  .season-switcher {
    top: 55%;
  }

  .season-switcher > p { margin-bottom: 10px; }
  .season-tab { min-height: 65px; }
}

/* Tablet: seasons become a horizontal archive rail. */
@media (min-width: 721px) and (max-width: 1024px) {
  .site-shell {
    grid-template-rows: 60px minmax(700px, 1fr) 104px;
  }

  .intro-copy {
    top: 30px;
    width: 90vw;
  }

  .season-switcher {
    top: 245px;
    left: 50%;
    width: 90vw;
    transform: translateX(-50%);
  }

  .season-switcher > p {
    margin: 0 0 8px 4px;
  }

  .season-rail {
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 5px;
  }

  .season-rail::before {
    top: 20px;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }

  .season-tab {
    flex: 0 0 210px;
    min-height: 67px;
    grid-template-columns: 42px 1fr;
  }

  .season-tab::before {
    top: 16px;
  }

  .featured-build {
    bottom: clamp(150px, 18vh, 190px);
    width: min(700px, 78vw);
  }

  .deck-frame { height: 218px; }
  .deck-prev { left: -54px; }
  .deck-next { right: -54px; }

  .author-strip {
    grid-template-columns: 40px auto 36px 1fr;
  }

  .author-strip > small { display: none; }
  .author-strip > p { gap: 8px; }
}

/* Dedicated phone composition. */
@media (max-width: 720px) {
  .site-shell {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: 58px minmax(770px, 1fr) auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .site-header {
    min-height: 58px;
    padding: 0 17px;
  }

  .brand { gap: 8px; }
  .brand-crest { width: 27px; height: 34px; }
  .brand-crest i { top: 5px; left: 12px; height: 23px; }
  .brand-crest i:nth-child(3) { top: 3px; height: 28px; }
  .brand-copy strong { font-size: 17px; line-height: 17px; }
  .brand-copy small { font-size: 6px; letter-spacing: 1.2px; }
  .edition-mark { display: none; }

  .hero {
    min-height: 770px;
  }

  .hero-art {
    background-position: 68% center;
  }

  .hero::after {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.46), transparent 45%, rgba(0, 0, 0, 0.14)),
      linear-gradient(0deg, rgba(1, 4, 5, 0.98), transparent 48%);
  }

  .intro-copy {
    top: 25px;
    left: 50%;
    width: 94vw;
  }

  .lab-name {
    min-width: 190px;
  }

  .lab-name strong { font-size: 19px; letter-spacing: 2.4px; }
  .lab-name span { font-size: 7px; letter-spacing: 2.3px; }
  .lab-name i { margin-top: 7px; }

  .intro-copy h1,
  .site-shell[data-scene="titan"] .intro-copy h1,
  .site-shell[data-scene="poe2"] .intro-copy h1,
  .site-shell[data-scene="vacant-cyan"] .intro-copy h1,
  .site-shell[data-scene="vacant-gold"] .intro-copy h1 {
    margin-top: 15px;
    font-size: clamp(27px, 8vw, 35px);
    letter-spacing: clamp(2px, 1.1vw, 4px);
  }

  .research-label {
    font-size: 8px;
    letter-spacing: 2.8px;
  }

  .ornament { margin-top: 1px; }

  .mission {
    max-width: 340px;
    margin: 0 auto;
    padding: 0 8px;
    font-size: 11px;
    line-height: 1.65;
    letter-spacing: 0.5px;
  }

  .season-switcher {
    top: 216px;
    left: 16px;
    width: calc(100vw - 32px);
    transform: none;
  }

  .season-switcher > p {
    margin: 0 0 8px 3px;
    font-size: 9px;
  }

  .season-switcher > p::after {
    display: inline;
    margin-left: 9px;
    font-size: 7px;
  }

  .season-rail {
    gap: 8px;
    padding-bottom: 5px;
    scrollbar-width: none;
  }

  .season-rail::-webkit-scrollbar { display: none; }

  .season-tab {
    flex: 0 0 184px;
    min-height: 63px;
    grid-template-columns: 38px 1fr;
  }

  .season-tab::before { top: 15px; left: 12px; }
  .season-tab span strong { font-size: 14px; }

  .featured-build {
    top: 325px;
    bottom: auto;
    width: 86vw;
  }

  .deck-frame {
    height: 330px;
    perspective: 1100px;
  }

  .build-card {
    grid-template-columns: 1fr;
    grid-template-rows: 54% 46%;
  }

  .card-art {
    border-right: 0;
    border-bottom: 1px solid rgba(188, 151, 88, 0.16);
  }

  .card-image {
    object-position: 68% 45%;
  }

  .card-copy {
    align-self: stretch;
    padding: 14px 19px 16px;
  }

  .card-copy h3 {
    margin: 7px 0 3px;
    font-size: clamp(21px, 6.3vw, 25px);
  }

  .card-copy p {
    margin-bottom: 9px;
    font-size: 11px;
  }

  .card-link,
  .card-state {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 10px;
  }

  .build-card.is-next {
    opacity: 0.66;
    transform: translateX(32%) translateY(8px) translateZ(-170px) rotateY(-28deg) scale(0.84);
  }

  .build-card.is-prev {
    opacity: 0.66;
    transform: translateX(-32%) translateY(8px) translateZ(-170px) rotateY(28deg) scale(0.84);
  }

  .deck-control {
    display: block;
    top: 50%;
    width: 34px;
    height: 42px;
    opacity: 0.88;
    border-color: rgba(198, 158, 92, 0.44);
    background: rgba(2, 7, 8, 0.88);
  }

  .deck-prev { left: -24px; }
  .deck-next { right: -24px; }

  .deck-dots {
    height: 10px;
    margin-top: 11px;
  }

  .site-footer {
    min-height: 150px;
    padding: 22px 20px 24px;
  }

  .author-strip {
    grid-template-columns: 38px 1fr;
    gap: 11px 13px;
  }

  .author-seal {
    grid-row: 1 / span 2;
    width: 36px;
    height: 42px;
  }

  .author-heading {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .author-heading strong {
    font-size: 22px;
  }

  .author-strip > i {
    display: none;
  }

  .author-strip > p {
    grid-column: 1 / -1;
    display: grid;
    gap: 5px;
    padding-top: 10px;
    border-top: 1px solid rgba(183, 142, 75, 0.16);
    line-height: 1.65;
  }

  .author-strip > small {
    display: block;
    grid-column: 1 / -1;
    margin-top: 2px;
  }
}

@media (max-width: 390px) {
  .site-shell {
    grid-template-rows: 56px minmax(748px, 1fr) auto;
  }

  .hero { min-height: 748px; }
  .intro-copy { top: 22px; }
  .season-switcher { top: 207px; }
  .featured-build { top: 312px; width: 87vw; }
  .deck-frame { height: 322px; }
  .card-copy { padding-inline: 16px; }
}

/* Identity, readable type hierarchy, and restrained ambient motion */
.brand-crest {
  width: clamp(37px, 2.45vw, 47px);
  height: clamp(45px, 3vw, 57px);
  clip-path: none;
  background: none;
  filter: drop-shadow(0 0 10px rgba(195, 151, 80, 0.3));
}

.brand-crest img,
.author-seal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-crest i {
  display: none;
}

.author-seal {
  width: 42px;
  height: 50px;
  display: block;
  clip-path: none;
  background: none;
  filter: drop-shadow(0 0 11px rgba(193, 146, 75, 0.24));
}

.author-seal b,
.author-seal > i {
  display: none;
}

/* Display faces are reserved for names; information uses clearer families. */
.intro-copy h1,
.research-label,
.lab-name span {
  font-family: var(--font-display);
}

.edition-mark,
.season-tab b,
.card-meta,
.author-kicker,
.author-strip > small,
.brand-copy small {
  font-family: "Cinzel", serif;
}

.mission,
.season-tab span strong,
.season-tab span small,
.card-copy p,
.author-strip > p,
.card-link,
.card-state {
  font-family: var(--font-body);
}

.brand-copy strong,
.lab-name strong,
.card-copy h3,
.author-heading strong {
  font-family: var(--font-inscription);
}

.mission {
  color: #d2ccc0;
  font-weight: 500;
  text-shadow: 0 2px 10px #000, 0 0 20px rgba(0, 0, 0, 0.74);
}

.season-tab span strong {
  color: #a8aaa1;
  font-weight: 600;
}

.season-tab.is-active span strong {
  color: #e4d4b4;
}

.season-tab span small {
  color: #687771;
  font-weight: 500;
}

.card-copy h3 {
  color: #eadfc9;
  font-weight: 400;
}

.card-copy p {
  color: #a8d7cf;
  font-weight: 500;
  line-height: 1.55;
}

.author-kicker {
  font-size: 9px;
  letter-spacing: 2.3px;
}

.author-heading strong {
  font-size: clamp(23px, 1.5vw, 29px);
}

.author-strip > p {
  gap: clamp(12px, 1vw, 20px);
  color: #83908b;
  font-size: clamp(12px, 0.76vw, 15px);
  line-height: 1.55;
}

.author-strip > p b {
  color: #b69b6d;
  font-family: var(--font-inscription);
  font-size: 1.02em;
  font-weight: 400;
}

.author-strip > p span {
  color: #778580;
}

/* A slow rune mechanism and drifting ash keep the background alive. */
.hero-atmosphere::before,
.hero-atmosphere::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.hero-atmosphere::before {
  opacity: 0.28;
  background:
    radial-gradient(ellipse at 56% 58%, transparent 0 24%, rgba(71, 203, 190, 0.08) 34%, transparent 48%),
    conic-gradient(from 200deg at 52% 54%, transparent 0 31%, rgba(195, 150, 79, 0.055) 38%, transparent 46% 100%);
  filter: blur(10px);
  animation: abyss-current 16s ease-in-out infinite alternate;
}

.hero-atmosphere::after {
  opacity: 0.46;
  background-image:
    radial-gradient(circle, rgba(129, 255, 239, 0.9) 0 1.25px, transparent 2.4px),
    radial-gradient(circle, rgba(222, 171, 91, 0.72) 0 0.95px, transparent 2px),
    radial-gradient(circle, rgba(204, 235, 228, 0.5) 0 0.72px, transparent 1.65px),
    radial-gradient(circle, rgba(84, 231, 217, 0.64) 0 1.65px, rgba(84, 231, 217, 0.16) 2.8px, transparent 4.6px),
    radial-gradient(circle, rgba(239, 198, 122, 0.45) 0 0.62px, transparent 1.45px);
  background-position: 12px -160px, 92px -260px, -40px -100px, 120px -340px, -80px -200px;
  background-size: 104px 126px, 171px 203px, 73px 93px, 337px 281px, 247px 319px;
  mask-image: radial-gradient(ellipse at 52% 48%, #000 0 66%, rgba(0, 0, 0, 0.76) 82%, transparent 100%);
  filter: drop-shadow(0 0 2px rgba(70, 220, 205, 0.34));
  animation: cathedral-ash-drift 22s linear infinite;
}

.rune-disc {
  animation: rune-turn 52s linear infinite;
}

.rune-disc::before {
  animation: rune-counterturn 38s linear infinite;
}

.rune-disc::after {
  box-shadow: 0 0 34px rgba(74, 186, 175, 0.035);
  animation: rune-breathe 7s ease-in-out infinite;
}

.site-shell.has-hero-image .hero-art {
  transform-origin: 72% 44%;
  animation: hero-breathe 18s ease-in-out infinite alternate;
}

.build-card.is-active {
  animation:
    card-arrive 0.5s cubic-bezier(0.19, 0.88, 0.31, 1),
    card-aura 6.5s ease-in-out 0.5s infinite;
}

.card-art .card-energy {
  animation: energy-heartbeat 4.8s ease-in-out infinite;
}

@keyframes abyss-current {
  from { transform: translate3d(-2%, 1%, 0) scale(1); opacity: 0.18; }
  to { transform: translate3d(3%, -1.5%, 0) scale(1.05); opacity: 0.34; }
}

@keyframes ash-fall {
  from { background-position: 0 -220px, 80px -310px, 20px -180px; }
  to { background-position: 40px 520px, 30px 620px, 75px 460px; }
}

@keyframes cathedral-ash-drift {
  from { background-position: 12px -160px, 92px -260px, -40px -100px, 120px -340px, -80px -200px; }
  to { background-position: 48px 760px, 30px 650px, 16px 690px, 80px 560px, -25px 720px; }
}

@keyframes rune-turn {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rune-counterturn {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes rune-breathe {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.75; }
}

@keyframes hero-breathe {
  from { transform: scale(1.005) translate3d(0, 0, 0); }
  to { transform: scale(1.025) translate3d(-0.35%, -0.25%, 0); }
}

@keyframes card-aura {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.72),
      inset 0 0 0 7px rgba(194, 151, 83, 0.035),
      inset 0 0 65px rgba(25, 115, 106, 0.13),
      0 26px 60px rgba(0, 0, 0, 0.74),
      0 0 30px rgba(35, 191, 178, 0.09);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.72),
      inset 0 0 0 7px rgba(194, 151, 83, 0.05),
      inset 0 0 72px rgba(25, 115, 106, 0.17),
      0 28px 65px rgba(0, 0, 0, 0.76),
      0 0 42px rgba(35, 191, 178, 0.16);
  }
}

@keyframes energy-heartbeat {
  0%, 100% { transform: scale(0.92); opacity: 0.68; }
  48% { transform: scale(1.08); opacity: 1; }
  56% { transform: scale(1); opacity: 0.82; }
}

body.low-glow .hero-atmosphere::before,
body.low-glow .hero-atmosphere::after,
body.low-glow .rune-disc,
body.low-glow .rune-disc::before,
body.low-glow .rune-disc::after,
body.low-glow .site-shell.has-hero-image .hero-art,
body.low-glow .build-card.is-active,
body.low-glow .card-art .card-energy {
  animation-play-state: paused;
}

@media (max-width: 720px) {
  .brand-crest {
    width: 33px;
    height: 40px;
  }

  .author-seal {
    width: 39px;
    height: 47px;
  }

  .author-strip > p {
    font-size: 12px;
  }

  .hero-atmosphere::after {
    opacity: 0.28;
  }
}

/* Localized light redraw for the generated battlefield background. */
.scene-lights {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 72% 44%;
  animation: hero-breathe 18s ease-in-out infinite alternate;
  transition: opacity 0.45s ease;
}

.scene-light {
  position: absolute;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
}

.light-hand {
  top: 19%;
  left: 81.5%;
  width: clamp(72px, 8vw, 138px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.32;
  background:
    conic-gradient(from 18deg, transparent 0 7%, rgba(100, 245, 235, 0.42) 8% 9%, transparent 10% 24%, rgba(89, 221, 213, 0.34) 25% 26%, transparent 27% 67%, rgba(137, 255, 247, 0.32) 68% 69%, transparent 70%),
    radial-gradient(circle, rgba(128, 255, 246, 0.72), rgba(46, 206, 195, 0.2) 24%, transparent 66%);
  filter: blur(2px);
  animation: hand-surge 4.6s ease-in-out infinite;
}

.light-hand::before,
.light-hand::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -54%;
  width: 2px;
  height: 72%;
  opacity: 0.58;
  transform: rotate(-18deg);
  transform-origin: bottom;
  background: linear-gradient(transparent, rgba(122, 251, 241, 0.84), transparent);
  box-shadow: 8px 12px 7px rgba(68, 218, 208, 0.28);
  filter: blur(0.4px);
}

.light-hand::after {
  top: -34%;
  transform: rotate(23deg) scaleY(0.72);
  opacity: 0.4;
}

.light-core {
  top: 41.5%;
  left: 71.2%;
  width: clamp(28px, 3vw, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.42;
  background: radial-gradient(circle, #c6fff8 0 5%, #56e4d5 13%, rgba(31, 171, 162, 0.28) 38%, transparent 72%);
  filter: blur(1px);
  animation: core-beat 3.8s ease-in-out infinite;
}

.light-portal {
  left: 64%;
  bottom: 6.5%;
  width: clamp(180px, 22vw, 390px);
  height: clamp(42px, 5vw, 86px);
  border: 1px solid rgba(77, 224, 213, 0.36);
  border-radius: 50%;
  opacity: 0.28;
  background: radial-gradient(ellipse, rgba(93, 239, 228, 0.28), rgba(29, 169, 162, 0.06) 42%, transparent 69%);
  box-shadow:
    inset 0 0 20px rgba(69, 226, 214, 0.2),
    0 0 24px rgba(42, 191, 183, 0.12);
  transform: rotate(-1deg);
  animation: portal-breathe 6.8s ease-in-out infinite;
}

.light-portal::before,
.light-portal::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px dashed rgba(113, 241, 230, 0.42);
  border-radius: 50%;
  animation: portal-turn 13s linear infinite;
}

.light-portal::after {
  inset: 29%;
  border-style: solid;
  border-color: rgba(166, 255, 248, 0.34);
  animation-direction: reverse;
  animation-duration: 9s;
}

.light-beacon {
  top: 24%;
  right: 3.45%;
  width: clamp(12px, 1.2vw, 22px);
  height: 28%;
  opacity: 0.22;
  background: linear-gradient(180deg, rgba(116, 255, 244, 0.08), rgba(62, 229, 218, 0.65) 65%, transparent);
  filter: blur(3px);
  transform-origin: bottom;
  animation: beacon-flicker 5.4s ease-in-out infinite;
}

.site-shell.scene-changing .scene-lights {
  opacity: 0.16;
}

@keyframes hand-surge {
  0%, 100% { transform: scale(0.92) rotate(-2deg); opacity: 0.24; filter: blur(2.6px); }
  47% { transform: scale(1.06) rotate(2deg); opacity: 0.38; filter: blur(1.4px); }
  54% { transform: scale(0.98); opacity: 0.31; }
}

@keyframes core-beat {
  0%, 100% { transform: scale(0.82); opacity: 0.32; }
  44% { transform: scale(1.14); opacity: 0.5; }
  54% { transform: scale(0.96); opacity: 0.4; }
}

@keyframes portal-breathe {
  0%, 100% { transform: rotate(-1deg) scale(0.96); opacity: 0.2; }
  50% { transform: rotate(-1deg) scale(1.035); opacity: 0.34; }
}

@keyframes portal-turn {
  to { transform: rotate(360deg); }
}

@keyframes beacon-flicker {
  0%, 100% { transform: scaleY(0.92); opacity: 0.16; }
  35% { transform: scaleY(1.05); opacity: 0.26; }
  43% { opacity: 0.18; }
  68% { opacity: 0.24; }
}

body.low-glow .scene-lights,
body.low-glow .scene-light,
body.low-glow .scene-light::before,
body.low-glow .scene-light::after {
  animation-play-state: paused;
}

@media (max-width: 1024px) {
  .light-hand,
  .light-core,
  .light-beacon {
    opacity: 0.18;
  }

  .light-portal {
    opacity: 0.16;
  }
}

@media (max-width: 720px) {
  .hero-art {
    background-position: 66% center;
  }

  .scene-lights {
    display: none;
  }
}

/* Relic-card silhouette and restrained page interaction */
.hero {
  --cursor-x: 50%;
  --cursor-y: 45%;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle 150px at var(--cursor-x) var(--cursor-y), rgba(79, 211, 199, 0.055), transparent 68%),
    radial-gradient(circle 42px at var(--cursor-x) var(--cursor-y), rgba(208, 161, 87, 0.035), transparent 72%);
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}

.hero.has-cursor-light::before {
  opacity: 1;
}

.build-deck {
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.36));
}

.build-deck::before,
.build-deck::after {
  content: "◆";
  position: absolute;
  z-index: 8;
  left: 50%;
  width: 58px;
  height: 11px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  color: #a27b43;
  font-size: 6px;
  line-height: 1;
  text-shadow: 0 0 9px rgba(195, 148, 76, 0.35);
  background: linear-gradient(90deg, transparent, rgba(181, 138, 71, 0.46), transparent) center / 100% 1px no-repeat;
  pointer-events: none;
}

.build-deck::before { top: -8px; }
.build-deck::after { bottom: -8px; transform: translateX(-50%) rotate(180deg); }

.build-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  border-radius: 0;
  clip-path: polygon(
    0 16px,
    11px 16px,
    11px 7px,
    31% 7px,
    calc(31% + 8px) 0,
    calc(100% - 21px) 0,
    calc(100% - 21px) 8px,
    100% 8px,
    100% calc(100% - 18px),
    calc(100% - 12px) calc(100% - 18px),
    calc(100% - 12px) calc(100% - 7px),
    69% calc(100% - 7px),
    calc(69% - 8px) 100%,
    20px 100%,
    20px calc(100% - 8px),
    0 calc(100% - 8px)
  );
}

.build-card.is-active {
  transform:
    translateX(0)
    translateZ(0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  filter:
    drop-shadow(0 2px 0 rgba(197, 151, 79, 0.22))
    drop-shadow(0 20px 24px rgba(0, 0, 0, 0.54));
  transition:
    transform 0.28s cubic-bezier(0.2, 0.75, 0.24, 1),
    opacity 0.4s,
    filter 0.4s;
}

.build-card::before {
  inset: 8px 10px;
  border-color: rgba(206, 161, 90, 0.2);
  clip-path: polygon(
    0 9px, 8px 9px, 8px 2px,
    28% 2px, calc(28% + 6px) 0,
    100% 0, 100% calc(100% - 9px),
    calc(100% - 8px) calc(100% - 9px),
    calc(100% - 8px) 100%, 0 100%
  );
}

.card-art {
  z-index: 3;
  margin-right: -24px;
  border-right: 0;
  clip-path: polygon(
    0 0,
    94% 0,
    100% 14%,
    96% 48%,
    100% 86%,
    94% 100%,
    0 100%
  );
  filter: drop-shadow(8px 0 12px rgba(0, 0, 0, 0.42));
}

.card-copy {
  padding-left: clamp(34px, 2.5vw, 48px);
}

.card-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 10%;
  bottom: 10%;
  left: 10px;
  width: 1px;
  opacity: 0.48;
  background: linear-gradient(transparent, #6cd6cb 28%, #98703e 72%, transparent);
  box-shadow: 0 0 8px rgba(73, 199, 187, 0.18);
  transform: rotate(2deg);
}

.card-corner {
  width: 15px;
  height: 15px;
  opacity: 0.62;
}

.card-corner::before { width: 15px; }
.card-corner::after { height: 15px; }
.card-corner-tl { top: 13px; left: 6px; transform: rotate(-8deg); }
.card-corner-tr { top: 7px; right: 17px; transform: rotate(97deg); }
.card-corner-br { right: 8px; bottom: 16px; transform: rotate(174deg); }
.card-corner-bl { left: 16px; bottom: 7px; transform: rotate(263deg); }

.is-placeholder-card .card-art {
  filter: brightness(0.88) saturate(0.72) drop-shadow(8px 0 12px rgba(0, 0, 0, 0.42));
}

/* One orchestrated entrance instead of many continuous flashes. */
.intro-copy {
  animation: relic-reveal 0.9s cubic-bezier(0.18, 0.78, 0.24, 1) both;
}

.season-rail {
  animation: rail-reveal 0.95s cubic-bezier(0.18, 0.78, 0.24, 1) 0.16s both;
}

.featured-build {
  animation: deck-reveal 1.05s cubic-bezier(0.18, 0.78, 0.24, 1) 0.25s both;
}

.site-footer {
  animation: footer-reveal 0.8s ease 0.42s both;
}

@keyframes relic-reveal {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); filter: blur(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); }
}

@keyframes rail-reveal {
  from { opacity: 0; transform: translateX(-13px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes deck-reveal {
  from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.975); filter: blur(3px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); filter: blur(0); }
}

@keyframes footer-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.low-glow .hero::before {
  display: none;
}

@media (max-width: 1024px) {
  .hero::before {
    display: none;
  }

  .build-card.is-active {
    transform: translateX(0) translateZ(0);
  }
}

@media (max-width: 720px) {
  .build-card {
    clip-path: polygon(
      0 14px, 10px 14px, 10px 6px,
      38% 6px, calc(38% + 7px) 0,
      calc(100% - 18px) 0, calc(100% - 18px) 7px,
      100% 7px, 100% calc(100% - 16px),
      calc(100% - 11px) calc(100% - 16px),
      calc(100% - 11px) calc(100% - 6px),
      65% calc(100% - 6px), calc(65% - 7px) 100%,
      18px 100%, 18px calc(100% - 7px),
      0 calc(100% - 7px)
    );
  }

  .card-art {
    margin-right: 0;
    margin-bottom: -14px;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 88%, 84% 100%, 46% 94%, 0 100%);
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
  }

  .card-copy {
    padding-top: 28px;
    padding-left: 19px;
  }

  .card-copy::before {
    top: 5px;
    right: 12%;
    bottom: auto;
    left: 12%;
    width: auto;
    height: 1px;
    transform: rotate(-1deg);
    background: linear-gradient(90deg, transparent, #6cd6cb 38%, #98703e 70%, transparent);
  }

  .build-deck::before,
  .build-deck::after {
    display: none;
  }
}

/* =========================================================
   Build roundtable: each BD owns its own presentation grammar
   ========================================================= */
.hero {
  overflow: clip;
}

.featured-build {
  width: clamp(690px, 50vw, 920px);
}

.deck-frame {
  height: clamp(220px, 14vw, 270px);
  perspective: 1500px;
}

.build-deck {
  filter: none;
}

.build-deck::before,
.build-deck::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: auto;
  left: 50%;
  display: block;
  pointer-events: none;
  color: transparent;
  border-radius: 50%;
  background: none;
  transform: translateX(-50%);
}

.build-deck::before {
  bottom: -86px;
  width: 78%;
  height: 102px;
  border: 1px solid rgba(83, 198, 186, 0.24);
  box-shadow:
    inset 0 9px 24px rgba(22, 139, 132, 0.05),
    0 -1px 12px rgba(194, 149, 78, 0.05);
}

.build-deck::after {
  bottom: -68px;
  width: 52%;
  height: 68px;
  border: 1px dashed rgba(193, 149, 80, 0.22);
  animation: roundtable-turn 28s linear infinite;
}

@keyframes roundtable-turn {
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Active BD is a composition, not a mandatory card. */
.build-card.is-active {
  inset: 0;
  display: grid;
  overflow: visible;
  clip-path: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 24px 26px rgba(0, 0, 0, 0.42));
}

.build-card.is-active::before,
.build-card.is-active > .card-corner {
  display: none;
}

.build-card.is-active::after {
  display: none;
}

.build-card.is-active .card-art {
  margin: 0;
  border: 0;
}

.build-card.is-active .card-copy {
  position: relative;
  z-index: 5;
  align-self: center;
  min-width: 0;
}

.build-card.is-active .card-copy::before {
  z-index: 1;
}

.build-card.is-active .card-copy > * {
  position: relative;
  z-index: 2;
}

/* Rift portrait — artwork shard with a floating inscription. */
.build-card.is-active.presentation-rift {
  grid-template-columns: 56% 44%;
}

.build-card.is-active.presentation-rift .card-art {
  align-self: center;
  height: 94%;
  clip-path: polygon(3% 7%, 77% 3%, 96% 13%, 91% 42%, 100% 58%, 88% 94%, 8% 99%, 0 77%, 5% 43%, 0 18%);
  mask-image: linear-gradient(90deg, #000 0 76%, rgba(0, 0, 0, 0.82) 88%, transparent 100%);
  filter:
    drop-shadow(12px 0 18px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 16px rgba(45, 192, 180, 0.08));
}

.build-card.is-active.presentation-rift .card-copy {
  min-height: 68%;
  margin-left: -34px;
  padding: clamp(22px, 1.7vw, 32px) clamp(28px, 2.4vw, 46px);
  clip-path: polygon(7% 0, 94% 4%, 100% 18%, 97% 82%, 88% 100%, 3% 96%, 0 72%, 3% 22%);
  background:
    linear-gradient(104deg, rgba(10, 29, 29, 0.93), rgba(3, 9, 10, 0.82) 72%, rgba(8, 18, 17, 0.55)),
    repeating-linear-gradient(115deg, transparent 0 24px, rgba(187, 149, 85, 0.022) 24px 25px);
  box-shadow:
    inset 1px 0 rgba(83, 213, 201, 0.26),
    inset -1px 0 rgba(190, 145, 77, 0.16),
    0 20px 44px rgba(0, 0, 0, 0.38);
}

.build-card.is-active.presentation-rift .card-copy::before {
  top: 12%;
  bottom: 12%;
  left: 14px;
}

/* Reliquary — a round rune object with text orbiting beside it. */
.build-card.is-active.presentation-reliquary {
  grid-template-columns: 43% 57%;
}

.build-card.is-active.presentation-reliquary .card-art {
  width: clamp(168px, 12vw, 218px);
  aspect-ratio: 1;
  place-self: center;
  clip-path: circle(47%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 56% 46%, rgba(112, 228, 219, 0.72), transparent 5%, rgba(28, 115, 125, 0.36) 21%, transparent 43%),
    repeating-radial-gradient(circle, rgba(98, 210, 200, 0.14) 0 1px, transparent 2px 17px),
    #061014;
  box-shadow:
    0 0 0 1px rgba(105, 220, 209, 0.36),
    0 0 0 9px rgba(6, 22, 24, 0.7),
    0 0 0 10px rgba(187, 146, 79, 0.16),
    0 0 36px rgba(62, 201, 190, 0.15);
}

.build-card.is-active.presentation-reliquary .card-copy {
  padding: 30px 46px 30px 32px;
  border-left: 1px solid rgba(92, 203, 192, 0.22);
  background: linear-gradient(90deg, rgba(7, 22, 23, 0.72), transparent 92%);
}

.build-card.is-active.presentation-reliquary .card-copy::before {
  display: none;
}

/* Monolith — inscription first, vertical relic on the right. */
.build-card.is-active.presentation-monolith {
  grid-template-columns: 58% 42%;
}

.build-card.is-active.presentation-monolith .card-art {
  order: 2;
  width: clamp(148px, 11vw, 198px);
  height: 96%;
  place-self: center;
  clip-path: polygon(33% 0, 67% 0, 84% 13%, 88% 75%, 70% 100%, 30% 100%, 12% 75%, 16% 13%);
  background:
    radial-gradient(circle at 50% 43%, rgba(207, 157, 84, 0.7), transparent 5%, rgba(95, 57, 23, 0.36) 19%, transparent 42%),
    linear-gradient(90deg, #080704, #2b1d0d 47%, #090704);
  box-shadow:
    inset 0 0 28px rgba(204, 154, 79, 0.13),
    0 0 0 1px rgba(198, 151, 80, 0.25),
    0 24px 40px rgba(0, 0, 0, 0.42);
}

.build-card.is-active.presentation-monolith .card-copy {
  order: 1;
  margin-right: -10px;
  padding: 34px 28px 34px 54px;
  text-align: right;
  background: linear-gradient(270deg, rgba(45, 31, 14, 0.38), transparent 86%);
}

.build-card.is-active.presentation-monolith .card-copy::before {
  right: 7px;
  left: auto;
  background: linear-gradient(transparent, #ae7e3e 24%, #55b9af 80%, transparent);
}

/* Non-active BDs become distinct nodes on the same circular table. */
.build-card.is-next,
.build-card.is-prev {
  inset: auto;
  top: auto;
  bottom: -94px;
  left: 50%;
  width: 126px;
  height: 142px;
  display: block;
  overflow: visible;
  clip-path: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: brightness(0.82) saturate(0.84);
  opacity: 0.9;
}

.build-card.is-prev {
  transform: translateX(-340px) translateY(5px) translateZ(-90px) rotateY(17deg) scale(0.9);
}

.build-card.is-next {
  transform: translateX(214px) translateY(5px) translateZ(-90px) rotateY(-17deg) scale(0.9);
}

.build-card.is-next:hover,
.build-card.is-prev:hover {
  opacity: 1;
  filter: brightness(0.92) saturate(0.94);
  margin-bottom: 5px;
}

.build-card.is-next::before,
.build-card.is-prev::before {
  display: block;
  z-index: 1;
  inset: 0 5px 21px;
  border: 1px solid rgba(91, 206, 195, 0.32);
  border-radius: 50%;
  clip-path: none;
  background:
    conic-gradient(from 30deg, transparent, rgba(190, 147, 79, 0.12), transparent 32% 68%, rgba(78, 187, 176, 0.1), transparent);
  box-shadow: 0 0 18px rgba(38, 169, 159, 0.08);
  animation: node-ring 16s linear infinite;
}

.build-card.is-prev::before {
  border-color: rgba(194, 148, 77, 0.3);
  animation-direction: reverse;
}

@keyframes node-ring {
  to { transform: rotate(360deg); }
}

.build-card.is-next::after,
.build-card.is-prev::after {
  display: none;
}

.build-card.is-next .card-art,
.build-card.is-prev .card-art {
  position: absolute;
  z-index: 2;
  inset: 10px 15px 31px;
  width: auto;
  height: auto;
  margin: 0;
  clip-path: circle(48%);
  border: 0;
  border-radius: 50%;
  filter: none;
}

.build-card.is-next .card-copy,
.build-card.is-prev .card-copy {
  position: absolute;
  z-index: 3;
  top: 111px;
  left: 50%;
  width: 190px;
  padding: 0;
  transform: translateX(-50%);
  text-align: center;
  background: none;
  box-shadow: none;
}

.build-card.is-next .card-copy::before,
.build-card.is-prev .card-copy::before,
.build-card.is-next .card-meta,
.build-card.is-prev .card-meta,
.build-card.is-next .card-copy p,
.build-card.is-prev .card-copy p,
.build-card.is-next .card-link,
.build-card.is-prev .card-link,
.build-card.is-next .card-state,
.build-card.is-prev .card-state,
.build-card.is-next > .card-corner,
.build-card.is-prev > .card-corner {
  display: none;
}

.build-card.is-next .card-copy h3,
.build-card.is-prev .card-copy h3 {
  margin: 0;
  color: #b7ad9a;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  white-space: nowrap;
}

.deck-control {
  top: auto;
  bottom: -53px;
  opacity: 0.88;
}

.deck-frame:hover .deck-control {
  opacity: 1;
}

.deck-prev {
  left: calc(50% - 116px);
}

.deck-next {
  right: calc(50% - 116px);
}

.deck-dots {
  position: relative;
  z-index: 9;
  margin-top: 19px;
}

@media (min-width: 721px) and (max-height: 800px) {
  .featured-build {
    width: clamp(680px, 52vw, 760px);
  }

  .deck-frame {
    height: 220px;
  }

  .build-card.is-prev {
    transform: translateX(-310px) translateY(6px) translateZ(-90px) rotateY(17deg) scale(0.84);
  }

  .build-card.is-next {
    transform: translateX(184px) translateY(6px) translateZ(-90px) rotateY(-17deg) scale(0.84);
  }
}

@media (max-width: 1024px) {
  .featured-build {
    width: min(720px, 86vw);
  }

  .build-card.is-active {
    filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.38));
  }

  .build-card.is-prev {
    transform: translateX(-285px) translateY(7px) translateZ(-80px) scale(0.82);
  }

  .build-card.is-next {
    transform: translateX(159px) translateY(7px) translateZ(-80px) scale(0.82);
  }
}

@media (max-width: 720px) {
  .featured-build {
    width: 88vw;
  }

  .deck-frame {
    height: 366px;
  }

  .build-deck::before {
    bottom: -1px;
    width: 90%;
    height: 68px;
  }

  .build-deck::after {
    display: block;
    bottom: 11px;
    width: 58%;
    height: 42px;
  }

  .build-card.is-active,
  .build-card.is-active.presentation-rift,
  .build-card.is-active.presentation-reliquary,
  .build-card.is-active.presentation-monolith {
    inset: 0 0 56px;
    grid-template-columns: 1fr;
    grid-template-rows: 55% 45%;
  }

  .build-card.is-active .card-art,
  .build-card.is-active.presentation-rift .card-art,
  .build-card.is-active.presentation-reliquary .card-art,
  .build-card.is-active.presentation-monolith .card-art {
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    place-self: stretch;
    margin: 0;
    border-radius: 0;
    clip-path: polygon(2% 4%, 96% 0, 100% 18%, 94% 83%, 82% 100%, 8% 95%, 0 77%, 3% 28%);
    mask-image: linear-gradient(180deg, #000 0 80%, transparent 100%);
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.46));
  }

  .build-card.is-active .card-copy,
  .build-card.is-active.presentation-rift .card-copy,
  .build-card.is-active.presentation-reliquary .card-copy,
  .build-card.is-active.presentation-monolith .card-copy {
    order: 2;
    align-self: stretch;
    margin: -8px 0 0;
    padding: 20px 20px 16px;
    text-align: left;
    clip-path: polygon(0 8%, 90% 0, 100% 18%, 97% 100%, 4% 96%);
    border: 0;
    background: linear-gradient(105deg, rgba(8, 28, 29, 0.93), rgba(4, 10, 11, 0.84));
  }

  .build-card.is-active .card-copy::before {
    top: 7px;
    right: 16%;
    bottom: auto;
    left: 8%;
    width: auto;
    height: 1px;
    display: block;
    transform: none;
    background: linear-gradient(90deg, #5dd2c6, #a87d43, transparent);
  }

  .build-card.is-prev,
  .build-card.is-next {
    bottom: -2px;
    width: 68px;
    height: 76px;
    opacity: 0.82;
    filter: brightness(0.78) saturate(0.82);
  }

  .build-card.is-prev {
    transform: translateX(-118px) translateY(0) translateZ(-40px) scale(1);
  }

  .build-card.is-next {
    transform: translateX(50px) translateY(0) translateZ(-40px) scale(1);
  }

  .build-card.is-next::before,
  .build-card.is-prev::before {
    inset: 2px 2px 8px;
  }

  .build-card.is-next .card-art,
  .build-card.is-prev .card-art {
    inset: 8px 8px 14px;
  }

  .build-card.is-next .card-copy,
  .build-card.is-prev .card-copy {
    display: none;
  }

  .deck-control {
    top: 45%;
    bottom: auto;
  }

  .deck-prev { left: -25px; }
  .deck-next { right: -25px; }

  .deck-dots {
    margin-top: 13px;
  }
}

/* 2026-07 desktop polish: a wider author inscription and a Warcraft-like
   hanging season sigil. The whole row remains clickable without looking
   like a conventional rectangular web button. */
@media (min-width: 1025px) {
  .author-strip {
    width: min(1500px, 100%);
    grid-template-columns: 44px auto minmax(28px, 1fr) auto auto;
    gap: clamp(14px, 1.15vw, 24px);
  }

  .author-strip > p {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .author-strip > p span {
    white-space: nowrap;
  }

  .season-switcher {
    top: 43%;
    left: clamp(14px, 1.45vw, 30px);
    width: clamp(250px, 15vw, 306px);
  }

  .season-switcher > p {
    margin: 0 0 17px 7px;
    padding-left: 14px;
    font-size: clamp(10px, 0.6vw, 12px);
    letter-spacing: 3px;
  }

  .season-switcher > p::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    margin: 2px 0 0 -17px;
    transform: rotate(45deg);
    border: 1px solid rgba(203, 157, 82, 0.72);
    background: #071011;
    box-shadow: 0 0 10px rgba(188, 141, 68, 0.2);
  }

  .season-switcher > p::after {
    margin-top: 7px;
    color: #61706c;
    letter-spacing: 2.5px;
  }

  .season-rail {
    max-height: min(44vh, 440px);
    padding: 4px 0 6px;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  .season-rail::before {
    top: 0;
    bottom: 0;
    left: 21px;
    background:
      linear-gradient(180deg,
        transparent,
        rgba(210, 162, 85, 0.7) 10%,
        rgba(117, 94, 55, 0.5) 50%,
        rgba(57, 145, 136, 0.45) 90%,
        transparent);
    box-shadow:
      0 0 9px rgba(202, 151, 76, 0.12),
      0 0 24px rgba(57, 159, 148, 0.05);
  }

  .season-rail::-webkit-scrollbar {
    display: none;
  }

  .season-tab {
    grid-template-columns: 44px 1fr;
    gap: 17px;
    min-height: 82px;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition:
      transform 0.28s ease,
      filter 0.28s ease;
  }

  .season-tab::before {
    top: 50%;
    left: 38px;
    width: 28px;
    height: 1px;
    border: 0;
    border-radius: 0;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #9d753e, rgba(88, 174, 164, 0.18));
    box-shadow: none;
  }

  .season-tab b {
    position: relative;
    z-index: 2;
    align-self: center;
    width: 43px;
    height: 51px;
    display: grid;
    place-items: center;
    color: #9a7846;
    font-family: var(--font-display);
    font-size: clamp(11px, 0.66vw, 13px);
    letter-spacing: 0.5px;
    clip-path: polygon(50% 0, 91% 18%, 84% 72%, 50% 100%, 16% 72%, 9% 18%);
    background:
      linear-gradient(135deg, rgba(205, 157, 79, 0.25), transparent 31%),
      linear-gradient(180deg, #182122 0 47%, #090e0f 48% 100%);
    box-shadow: none;
    filter:
      drop-shadow(0 0 1px rgba(220, 174, 96, 0.78))
      drop-shadow(0 7px 10px rgba(0, 0, 0, 0.5));
  }

  .season-tab b::before {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: -1;
    clip-path: inherit;
    background:
      radial-gradient(circle at 50% 38%, rgba(61, 196, 184, 0.14), transparent 35%),
      linear-gradient(180deg, rgba(164, 121, 62, 0.16), rgba(4, 10, 11, 0.68));
  }

  .season-tab b::after {
    content: "";
    position: absolute;
    right: 7px;
    bottom: 8px;
    left: 7px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(195, 148, 74, 0.62), transparent);
  }

  .season-tab > span {
    gap: 6px;
    padding-bottom: 1px;
  }

  .season-tab span strong {
    color: #a7a69d;
    font-family: var(--font-inscription);
    font-size: clamp(16px, 0.92vw, 19px);
    font-weight: 500;
    letter-spacing: 1.15px;
  }

  .season-tab span small {
    color: #5e6b67;
    font-family: var(--font-body);
    font-size: clamp(8px, 0.5vw, 10px);
    letter-spacing: 0.8px;
  }

  .season-tab:hover,
  .season-tab.is-active {
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: translateX(5px);
  }

  .season-tab:hover b,
  .season-tab.is-active b {
    color: #e3bd76;
    background:
      linear-gradient(135deg, rgba(228, 181, 99, 0.42), transparent 31%),
      linear-gradient(180deg, #203133 0 47%, #0a1213 48% 100%);
    filter:
      drop-shadow(0 0 1px rgba(240, 192, 107, 0.94))
      drop-shadow(0 0 13px rgba(60, 187, 175, 0.2))
      drop-shadow(0 8px 12px rgba(0, 0, 0, 0.56));
  }

  .season-tab.is-active::before {
    border: 0;
    background: linear-gradient(90deg, #d2a257, rgba(85, 202, 190, 0.42), transparent);
    box-shadow: 0 0 8px rgba(67, 190, 178, 0.22);
  }

  .season-tab:hover span strong,
  .season-tab.is-active span strong {
    color: #e5d7bd;
    text-shadow:
      0 2px 12px #000,
      0 0 15px rgba(194, 151, 78, 0.15);
  }

  .season-tab:focus-visible {
    outline: 1px solid rgba(205, 160, 84, 0.66);
    outline-offset: 6px;
  }
}

@media (min-width: 1025px) and (max-height: 800px) {
  .season-switcher {
    top: 46%;
  }
}

/* Spherical build carousel: the current build sits in front while the
   adjacent builds travel on the far side of one shared, glassy orbit. */
@media (min-width: 721px) {
  .featured-build {
    isolation: isolate;
  }

  .deck-frame {
    height: clamp(270px, 18vw, 330px);
    perspective: 1800px;
    perspective-origin: 50% 42%;
  }

  .build-deck {
    overflow: visible;
    filter: none;
  }

  .build-deck::before,
  .build-deck::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 51%;
    left: 50%;
    display: block;
    pointer-events: none;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }

  .build-deck::before {
    width: min(122%, 970px);
    height: 76%;
    border: 1px solid rgba(99, 211, 199, 0.2);
    background:
      radial-gradient(ellipse at center, rgba(33, 151, 143, 0.08), transparent 63%),
      linear-gradient(90deg, transparent 0 12%, rgba(197, 153, 82, 0.07) 50%, transparent 88%);
    box-shadow:
      inset 0 0 50px rgba(11, 90, 87, 0.1),
      0 0 32px rgba(41, 184, 171, 0.06);
  }

  .build-deck::after {
    width: min(104%, 820px);
    height: 58%;
    border: 1px dashed rgba(204, 159, 85, 0.22);
    opacity: 0.78;
    animation: orbit-drift 22s linear infinite;
  }

  .build-card.is-active,
  .build-card.is-active.presentation-rift,
  .build-card.is-active.presentation-reliquary,
  .build-card.is-active.presentation-monolith {
    z-index: 5;
    inset: 14px 7% 28px;
  }

  .build-card.is-prev,
  .build-card.is-next {
    z-index: 2;
    bottom: 27px;
    width: clamp(238px, 24vw, 350px);
    height: clamp(150px, 11vw, 190px);
    display: grid;
    grid-template-columns: 42% 58%;
    overflow: hidden;
    clip-path: polygon(0 8%, 7% 0, 93% 0, 100% 8%, 100% 92%, 93% 100%, 7% 100%, 0 92%);
    border: 1px solid rgba(119, 212, 202, 0.34);
    border-radius: 0;
    background: linear-gradient(135deg, rgba(8, 35, 37, 0.7), rgba(12, 20, 25, 0.46));
    box-shadow:
      inset 0 1px rgba(214, 246, 240, 0.08),
      0 18px 42px rgba(0, 0, 0, 0.34),
      0 0 26px rgba(48, 191, 178, 0.09);
    opacity: 0.54;
    filter: saturate(0.72) brightness(0.72) blur(0.15px);
    backdrop-filter: blur(7px);
  }

  .build-card.is-prev {
    transform: translateX(calc(-50% - clamp(360px, 34vw, 510px))) translateY(4px) translateZ(-180px) rotateY(37deg) rotateZ(-2deg) scale(0.9);
  }

  .build-card.is-next {
    transform: translateX(calc(-50% + clamp(360px, 34vw, 510px))) translateY(4px) translateZ(-180px) rotateY(-37deg) rotateZ(2deg) scale(0.9);
  }

  .build-card.is-next::before,
  .build-card.is-prev::before {
    display: block;
    z-index: 1;
    inset: 7px;
    border: 1px solid rgba(214, 171, 98, 0.22);
    border-radius: 0;
    animation: none;
  }

  .build-card.is-next .card-art,
  .build-card.is-prev .card-art {
    position: relative;
    z-index: 2;
    inset: auto;
    width: auto;
    height: auto;
    min-height: 100%;
    clip-path: none;
    border-radius: 0;
    opacity: 0.78;
    filter: none;
  }

  .build-card.is-next .card-copy,
  .build-card.is-prev .card-copy {
    position: relative;
    z-index: 3;
    top: auto;
    left: auto;
    display: flex;
    width: auto;
    padding: 20px 18px;
    transform: none;
    text-align: left;
    background: linear-gradient(90deg, rgba(5, 20, 22, 0.34), rgba(5, 13, 16, 0.68));
  }

  .build-card.is-next .card-copy h3,
  .build-card.is-prev .card-copy h3 {
    color: #d5c6a7;
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.35;
    text-shadow: 0 2px 10px #000;
  }

  .build-card.is-next:hover,
  .build-card.is-prev:hover {
    z-index: 4;
    margin-bottom: 0;
    opacity: 0.78;
    filter: saturate(0.9) brightness(0.88);
  }
}

@keyframes orbit-drift {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .build-deck::after { animation: none; }
}

/* =========================================================
   Astral archive carousel
   A flat astrolabe orbit replaces the old flipping screens.
   ========================================================= */
.season-mark {
  position: relative;
  width: 42px;
  height: 52px;
  display: grid !important;
  place-items: center;
  flex: none !important;
}

.season-mark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.48));
}

.season-mark .sigil-frame {
  fill: rgba(7, 15, 16, 0.92);
  stroke: rgba(157, 116, 59, 0.88);
  stroke-width: 1.25;
}

.season-mark .sigil-blade {
  fill: rgba(17, 31, 32, 0.94);
  stroke: rgba(191, 147, 76, 0.72);
  stroke-width: 1;
}

.season-mark .sigil-core {
  fill: rgba(61, 181, 171, 0.34);
  stroke: rgba(104, 226, 214, 0.82);
  stroke-width: 0.9;
}

.season-mark b {
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
  display: block;
  padding-top: 1px;
  clip-path: none;
  color: #c89b52;
  background: none;
  filter: none;
  font: 600 9px var(--font-display);
  letter-spacing: 0.35px;
  text-shadow: 0 1px 6px #000;
}

.season-copy {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.deck-control {
  display: none !important;
}

.build-card.is-active {
  opacity: 1;
  transform: translateX(0) translateZ(0) !important;
  box-shadow: none !important;
  animation: relic-focus 0.58s cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.build-card.is-active::before,
.build-card.is-active::after,
.build-card.is-active > .card-corner,
.build-card.is-prev > .card-corner,
.build-card.is-next > .card-corner {
  display: none !important;
}

@keyframes relic-focus {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.975);
    filter: blur(2px) drop-shadow(0 24px 28px rgba(0, 0, 0, 0.34));
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) drop-shadow(0 26px 30px rgba(0, 0, 0, 0.48));
  }
}

.deck-dots {
  position: relative;
  z-index: 12;
  width: max-content;
  height: 28px;
  margin: 4px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 0 22px;
}

.deck-dots::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(162, 121, 62, 0.48) 22%, rgba(75, 145, 137, 0.34) 50%, rgba(162, 121, 62, 0.48) 78%, transparent);
}

.deck-dot,
.deck-dot.is-active {
  position: relative;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #050b0c;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.deck-dot i {
  position: relative;
  width: 8px;
  height: 8px;
  display: block;
  transform: rotate(45deg);
  border: 1px solid #6e5937;
  background: #0a1111;
}

.deck-dot i::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #3f514d;
}

.deck-dot:hover {
  transform: scale(1.12);
}

.deck-dot.is-active {
  transform: scale(1.13);
  filter: drop-shadow(0 0 7px rgba(80, 207, 194, 0.28));
}

.deck-dot.is-active i {
  border-color: #d0a05a;
  background: #11201f;
  box-shadow: 0 0 0 3px rgba(153, 111, 55, 0.1);
}

.deck-dot.is-active i::after {
  background: #68d8cc;
  box-shadow: 0 0 8px rgba(74, 214, 200, 0.7);
}

@media (min-width: 1025px) {
  .season-switcher {
    top: clamp(84px, 11vh, 112px);
    left: clamp(12px, 1.3vw, 27px);
    width: clamp(270px, 15.5vw, 318px);
    transform: none;
  }

  .season-switcher > p {
    margin: 0 0 14px 11px;
    padding-left: 18px;
  }

  .season-switcher > p::before {
    margin-left: -21px;
  }

  .season-rail {
    max-height: min(54vh, 520px);
    padding: 0 0 10px;
  }

  .season-rail::before {
    top: 5px;
    bottom: 0;
    left: 29px;
  }

  .season-tab {
    grid-template-columns: 58px 1fr;
    gap: 18px;
    min-height: 88px;
    padding: 4px 0;
  }

  .season-tab::before {
    top: 50%;
    left: 50px;
    width: 31px;
  }

  .season-mark {
    width: 58px;
    height: 70px;
  }

  .season-mark b {
    font-size: 10px;
  }

  .season-tab:hover .season-mark svg,
  .season-tab.is-active .season-mark svg {
    filter:
      drop-shadow(0 0 6px rgba(69, 200, 188, 0.22))
      drop-shadow(0 8px 10px rgba(0, 0, 0, 0.56));
  }

  .season-tab:hover .sigil-frame,
  .season-tab.is-active .sigil-frame {
    fill: rgba(10, 22, 23, 0.98);
    stroke: rgba(218, 169, 88, 0.96);
  }

  .season-tab:hover .sigil-core,
  .season-tab.is-active .sigil-core {
    fill: rgba(71, 217, 203, 0.52);
    stroke: rgba(143, 245, 234, 0.96);
  }

  .season-tab:hover,
  .season-tab.is-active {
    transform: translateX(3px);
  }

  .featured-build {
    width: clamp(780px, 56vw, 1080px);
    bottom: clamp(62px, 10vh, 110px);
  }

  .deck-frame {
    height: clamp(285px, 18vw, 342px);
    perspective: 1600px;
    perspective-origin: 50% 50%;
  }

  .build-deck {
    overflow: visible;
    transform-style: preserve-3d;
  }

  .build-deck::before,
  .build-deck::after {
    content: "";
    position: absolute;
    top: 51%;
    left: 50%;
    width: min(118%, 1050px);
    height: min(118%, 400px);
    display: block;
    border-radius: 50%;
    pointer-events: none;
    transform-style: preserve-3d;
  }

  .build-deck::before {
    z-index: 0;
    border: 1px solid rgba(94, 211, 199, 0.2);
    background:
      radial-gradient(ellipse at center, rgba(44, 171, 161, 0.07), transparent 63%),
      linear-gradient(90deg, transparent 4%, rgba(192, 147, 74, 0.06) 50%, transparent 96%);
    box-shadow:
      inset 0 0 40px rgba(45, 183, 171, 0.055),
      0 0 28px rgba(48, 191, 179, 0.05);
    transform: translate(-50%, -50%) rotateX(68deg);
  }

  .build-deck::after {
    z-index: 1;
    border: 1px dashed rgba(203, 159, 85, 0.5);
    background:
      conic-gradient(from 30deg, transparent 0 8%, rgba(110, 235, 222, 0.16) 9% 10%, transparent 11% 47%, rgba(213, 166, 88, 0.16) 48% 49%, transparent 50%);
    box-shadow:
      0 0 12px rgba(46, 197, 184, 0.08),
      inset 0 0 22px rgba(191, 146, 73, 0.04);
    transform: translate(-50%, -50%) rotateX(68deg) rotateZ(0);
    animation: flat-astrolabe-turn 18s linear infinite;
  }

  .build-card.is-active,
  .build-card.is-active.presentation-rift,
  .build-card.is-active.presentation-reliquary,
  .build-card.is-active.presentation-monolith {
    z-index: 6;
    inset: 9px 8% 44px;
    opacity: 1;
    overflow: visible;
    border: 0;
    clip-path: none;
    background:
      radial-gradient(ellipse at 48% 51%, rgba(22, 88, 83, 0.16), transparent 69%),
      radial-gradient(ellipse at 61% 50%, rgba(5, 10, 11, 0.76), transparent 76%);
    box-shadow: none !important;
  }

  .build-card.is-active.presentation-rift {
    grid-template-columns: 45% 55%;
  }

  .build-card.is-active.presentation-rift .card-art {
    width: clamp(250px, 18vw, 340px);
    height: clamp(220px, 15vw, 286px);
    place-self: center;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    clip-path: ellipse(47% 45% at 50% 50%);
    mask-image: none;
    opacity: 1;
    filter:
      drop-shadow(0 0 1px rgba(135, 232, 220, 0.78))
      drop-shadow(0 0 18px rgba(42, 183, 171, 0.14))
      drop-shadow(16px 20px 24px rgba(0, 0, 0, 0.52));
  }

  .build-card.is-active.presentation-rift .card-art::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 7%;
    border: 1px solid rgba(201, 157, 85, 0.46);
    border-radius: 50%;
    box-shadow:
      0 0 0 8px rgba(3, 11, 12, 0.24),
      0 0 0 9px rgba(76, 185, 175, 0.11);
    pointer-events: none;
  }

  .build-card.is-active.presentation-rift .card-image {
    opacity: 1;
    object-position: 73% 42%;
    filter: brightness(1.17) contrast(1.11) saturate(0.95);
  }

  .build-card.is-active.presentation-rift:hover .card-image {
    transform: scale(1.018);
  }

  .build-card.is-active.presentation-rift .card-copy {
    min-height: 0;
    margin: 0 0 0 -16px;
    padding: clamp(28px, 2vw, 38px) clamp(18px, 1.7vw, 32px) clamp(26px, 1.8vw, 34px) clamp(36px, 2.4vw, 50px);
    clip-path: none;
    border: 0;
    opacity: 1;
    background:
      linear-gradient(90deg, rgba(7, 27, 28, 0.98), rgba(3, 11, 12, 0.94) 64%, rgba(3, 10, 11, 0.68) 84%, transparent),
      repeating-linear-gradient(0deg, transparent 0 27px, rgba(189, 149, 82, 0.022) 27px 28px);
    box-shadow: none;
  }

  .build-card.is-active.presentation-rift .card-copy::before {
    top: 8%;
    bottom: 8%;
    left: 7px;
    width: 1px;
    opacity: 0.68;
    background: linear-gradient(transparent, #c19550 18%, #64d4c8 52%, #8a6538 84%, transparent);
    box-shadow: 0 0 10px rgba(70, 205, 192, 0.17);
    transform: none;
  }

  .build-card.is-active.presentation-rift .card-copy::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 18%;
    left: 44px;
    height: 1px;
    opacity: 0.66;
    background: linear-gradient(90deg, #a97c40, rgba(85, 199, 188, 0.5), transparent);
  }

  .build-card.is-active .card-meta {
    border: 0;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    color: #a8d7cf;
    background: linear-gradient(90deg, rgba(29, 105, 98, 0.5), rgba(19, 53, 51, 0.08));
    letter-spacing: 1.1px;
  }

  .build-card.is-active .card-copy h3 {
    margin-top: 11px;
    color: #eadfc9;
    font-size: clamp(28px, 2vw, 39px);
    letter-spacing: 2.4px;
  }

  .build-card.is-active .card-copy p {
    margin-bottom: 17px;
    color: #9dd4cb;
    font-size: clamp(13px, 0.78vw, 15px);
  }

  .build-card.is-active .card-link {
    gap: 13px;
    border-color: rgba(195, 149, 76, 0.62);
    background: linear-gradient(90deg, rgba(119, 81, 31, 0.12), rgba(8, 18, 18, 0.2));
  }

  .build-card.is-active .card-link b {
    color: #77cfc5;
    font-size: 11px;
  }

  .build-card.is-prev,
  .build-card.is-next {
    z-index: 2;
    top: 50%;
    bottom: auto;
    left: 50%;
    width: clamp(210px, 17vw, 310px);
    height: clamp(150px, 11vw, 205px);
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 48% 18% 18% 48% / 50% 16% 16% 50%;
    clip-path: none;
    background: linear-gradient(90deg, rgba(17, 54, 53, 0.2), rgba(4, 13, 14, 0.05));
    box-shadow: none;
    opacity: 0.13;
    filter: saturate(0.55) brightness(0.7);
    backdrop-filter: blur(2px);
    transition: opacity 0.32s ease, filter 0.32s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .build-card.is-prev {
    transform: translate(-156%, -50%) translateZ(-80px) scale(0.84);
  }

  .build-card.is-next {
    border-radius: 18% 48% 48% 18% / 16% 50% 50% 16%;
    transform: translate(56%, -50%) translateZ(-80px) scale(0.84);
  }

  .build-card.is-prev::before,
  .build-card.is-next::before,
  .build-card.is-prev::after,
  .build-card.is-next::after {
    display: none;
  }

  .build-card.is-prev .card-art,
  .build-card.is-next .card-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: inherit;
    clip-path: none;
    opacity: 0.62;
    filter: none;
  }

  .build-card.is-prev .card-copy,
  .build-card.is-next .card-copy {
    display: none;
  }

  .build-card.is-prev:hover,
  .build-card.is-next:hover {
    opacity: 0.26;
    filter: saturate(0.72) brightness(0.84);
  }

  .build-card.is-prev:hover {
    transform: translate(-156%, -50%) translateZ(-70px) scale(0.87);
  }

  .build-card.is-next:hover {
    transform: translate(56%, -50%) translateZ(-70px) scale(0.87);
  }
}

@keyframes flat-astrolabe-turn {
  to {
    transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg);
  }
}

@media (max-width: 1024px) {
  .season-mark {
    width: 40px;
    height: 49px;
  }

  .season-tab {
    grid-template-columns: 42px 1fr;
  }

  .build-card.is-active {
    opacity: 1;
    box-shadow: none !important;
  }

  .build-card.is-prev,
  .build-card.is-next {
    opacity: 0.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .build-deck::after {
    animation: none !important;
  }

  .build-card.is-active {
    animation: none;
  }
}

/* =========================================================
   Build card restoration — cards remain cards; the orbit is
   an independent horizontal stage behind them.
   ========================================================= */
.season-mark .sigil-orbit {
  fill: none;
  stroke: rgba(191, 148, 78, 0.68);
  stroke-width: 1;
}

.season-copy em {
  display: block;
  margin: 0 0 1px;
  color: #d0a158;
  font: 700 11px var(--font-display);
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(196, 148, 74, 0.16);
}

@media (min-width: 1025px) {
  .season-mark {
    width: 52px;
    height: 64px;
  }

  .season-copy {
    gap: 4px;
  }

  .season-copy em {
    font-size: 12px;
    letter-spacing: 2.6px;
  }

  .season-tab span strong {
    font-size: clamp(15px, 0.84vw, 18px);
    letter-spacing: 1.05px;
  }

  .deck-frame {
    height: clamp(242px, 15.5vw, 292px);
    perspective: 1550px;
    perspective-origin: 50% 55%;
  }

  .build-deck::before,
  .build-deck::after {
    top: 55%;
    width: min(112%, 930px);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .build-deck::before {
    border: 1px solid rgba(85, 193, 183, 0.17);
    background: none;
    box-shadow:
      inset 0 0 42px rgba(43, 170, 159, 0.045),
      0 0 24px rgba(50, 185, 173, 0.045);
    transform: translate(-50%, -50%) rotateX(70deg);
  }

  .build-deck::after {
    z-index: 4;
    width: 14px;
    height: 14px;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    opacity: 0.96;
    background: linear-gradient(135deg, #f2cf84 0 30%, #63dfd0 32% 68%, #b98744 70%);
    box-shadow:
      0 0 10px rgba(107, 233, 220, 0.96),
      0 0 26px rgba(199, 151, 76, 0.56);
    -webkit-mask: none;
    mask: none;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transform: translate(-50%, -50%) translateX(var(--orbit-x)) rotate(45deg);
    animation: horizontal-orbit-spark 8.5s linear infinite;
  }

  .build-deck {
    --orbit-x: min(36vw, 430px);
    --orbit-y: clamp(58px, 5vw, 88px);
  }

  .build-card.is-active,
  .build-card.is-active.presentation-rift,
  .build-card.is-active.presentation-reliquary,
  .build-card.is-active.presentation-monolith {
    inset: 9px 7% 24px;
    opacity: 1;
    background: transparent;
  }

  .build-card.is-active.presentation-rift {
    grid-template-columns: 56% 44%;
  }

  .build-card.is-active.presentation-rift .card-art {
    width: auto;
    height: 94%;
    place-self: center stretch;
    margin: 0;
    border: 0;
    border-radius: 0;
    clip-path: polygon(3% 7%, 77% 3%, 96% 13%, 91% 42%, 100% 58%, 88% 94%, 8% 99%, 0 77%, 5% 43%, 0 18%);
    mask-image: linear-gradient(90deg, #000 0 76%, rgba(0, 0, 0, 0.82) 88%, transparent 100%);
    filter:
      drop-shadow(12px 0 18px rgba(0, 0, 0, 0.62))
      drop-shadow(0 0 16px rgba(45, 192, 180, 0.08));
  }

  .build-card.is-active.presentation-rift .card-art::after {
    display: none;
  }

  .build-card.is-active.presentation-rift .card-image {
    object-position: 75% center;
    opacity: 1;
    filter: brightness(1.08) contrast(1.12) saturate(0.84);
  }

  .build-card.is-active.presentation-rift:hover .card-image {
    transform: scale(1.025);
  }

  .build-card.is-active.presentation-rift .card-copy {
    min-height: 68%;
    margin-left: -34px;
    padding: clamp(22px, 1.7vw, 32px) clamp(28px, 2.4vw, 46px);
    clip-path: polygon(7% 0, 94% 4%, 100% 18%, 97% 82%, 88% 100%, 3% 96%, 0 72%, 3% 22%);
    border: 0;
    background:
      linear-gradient(104deg, rgba(10, 29, 29, 0.98), rgba(3, 9, 10, 0.94) 72%, rgba(8, 18, 17, 0.7)),
      repeating-linear-gradient(115deg, transparent 0 24px, rgba(187, 149, 85, 0.022) 24px 25px);
    box-shadow:
      inset 1px 0 rgba(83, 213, 201, 0.26),
      inset -1px 0 rgba(190, 145, 77, 0.16),
      0 20px 44px rgba(0, 0, 0, 0.38);
  }

  .build-card.is-active.presentation-rift .card-copy::before {
    top: 12%;
    right: auto;
    bottom: 12%;
    left: 14px;
    width: 1px;
    height: auto;
    opacity: 0.48;
    transform: rotate(2deg);
  }

  .build-card.is-active.presentation-rift .card-copy::after {
    display: none;
  }

  .build-card.is-active .card-copy h3 {
    margin: 9px 0 5px;
    font-size: clamp(26px, 1.7vw, 34px);
    letter-spacing: 2px;
  }

  .build-card.is-active .card-copy p {
    margin-bottom: 14px;
  }

  .build-card.is-prev,
  .build-card.is-next {
    z-index: 2;
    top: auto;
    bottom: 25px;
    left: 50%;
    width: clamp(238px, 24vw, 350px);
    height: clamp(150px, 11vw, 190px);
    display: grid;
    grid-template-columns: 42% 58%;
    overflow: hidden;
    clip-path: polygon(0 8%, 7% 0, 93% 0, 100% 8%, 100% 92%, 93% 100%, 7% 100%, 0 92%);
    border: 1px solid rgba(119, 212, 202, 0.3);
    border-radius: 0;
    background: linear-gradient(135deg, rgba(8, 35, 37, 0.64), rgba(12, 20, 25, 0.42));
    box-shadow:
      inset 0 1px rgba(214, 246, 240, 0.06),
      0 18px 42px rgba(0, 0, 0, 0.34),
      0 0 26px rgba(48, 191, 178, 0.07);
    opacity: 0.46;
    filter: saturate(0.68) brightness(0.66) blur(0.35px);
    backdrop-filter: blur(6px);
  }

  .build-card.is-prev {
    transform: translateX(calc(-50% - clamp(280px, 28vw, 390px))) translateY(6px) translateZ(-180px) rotateY(32deg) rotateZ(-1.5deg) scale(0.88);
  }

  .build-card.is-next {
    transform: translateX(calc(-50% + clamp(280px, 28vw, 390px))) translateY(6px) translateZ(-180px) rotateY(-32deg) rotateZ(1.5deg) scale(0.88);
  }

  .build-card.is-next::before,
  .build-card.is-prev::before {
    display: block;
    z-index: 1;
    inset: 7px;
    border: 1px solid rgba(214, 171, 98, 0.2);
    border-radius: 0;
    animation: none;
  }

  .build-card.is-next .card-art,
  .build-card.is-prev .card-art {
    position: relative;
    z-index: 2;
    inset: auto;
    width: auto;
    height: auto;
    min-height: 100%;
    clip-path: none;
    border: 0;
    border-radius: 0;
    opacity: 0.72;
    filter: none;
  }

  .build-card.is-next .card-copy,
  .build-card.is-prev .card-copy {
    position: relative;
    z-index: 3;
    top: auto;
    left: auto;
    display: flex;
    width: auto;
    padding: 20px 18px;
    transform: none;
    text-align: left;
    background: linear-gradient(90deg, rgba(5, 20, 22, 0.4), rgba(5, 13, 16, 0.74));
  }

  .build-card.is-next .card-copy h3,
  .build-card.is-prev .card-copy h3 {
    color: #d5c6a7;
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.35;
    text-shadow: 0 2px 10px #000;
  }

  .build-card.is-next:hover,
  .build-card.is-prev:hover {
    z-index: 4;
    margin-bottom: 0;
    opacity: 0.64;
    filter: saturate(0.86) brightness(0.82) blur(0);
  }

  .build-card.is-prev:hover {
    transform: translateX(calc(-50% - clamp(280px, 28vw, 390px))) translateY(3px) translateZ(-150px) rotateY(31deg) rotateZ(-1deg) scale(0.91);
  }

  .build-card.is-next:hover {
    transform: translateX(calc(-50% + clamp(280px, 28vw, 390px))) translateY(3px) translateZ(-150px) rotateY(-31deg) rotateZ(1deg) scale(0.91);
  }
}

@keyframes horizontal-orbit-spark {
  0% { transform: translate(-50%, -50%) translateX(var(--orbit-x)) translateY(0) rotate(45deg); }
  25% { transform: translate(-50%, -50%) translateX(0) translateY(var(--orbit-y)) rotate(135deg); }
  50% { transform: translate(-50%, -50%) translateX(calc(0px - var(--orbit-x))) translateY(0) rotate(225deg); }
  75% { transform: translate(-50%, -50%) translateX(0) translateY(calc(0px - var(--orbit-y))) rotate(315deg); }
  100% { transform: translate(-50%, -50%) translateX(var(--orbit-x)) translateY(0) rotate(405deg); }
}

@media (prefers-reduced-motion: reduce) {
  .build-deck::after {
    animation: none !important;
  }
}

/* =========================================================
   Compact build relic: the subject portrait and copy share one
   asymmetric composition, while inactive builds become glass arcs.
   ========================================================= */
@media (min-width: 1025px) {
  .deck-frame {
    height: clamp(236px, 15vw, 278px);
  }

  .build-card.is-active,
  .build-card.is-active.presentation-rift,
  .build-card.is-active.presentation-reliquary,
  .build-card.is-active.presentation-monolith {
    inset: 9px 9% 30px;
  }

  .build-card.is-active.presentation-rift {
    display: block;
    overflow: visible;
  }

  .build-card.is-active.presentation-rift .card-art {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 65%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    clip-path: polygon(2% 9%, 17% 2%, 73% 0, 95% 9%, 100% 34%, 92% 63%, 98% 89%, 80% 100%, 18% 96%, 0 80%, 6% 47%, 0 22%);
    mask-image: linear-gradient(90deg, #000 0 76%, rgba(0, 0, 0, 0.94) 89%, transparent 100%);
    filter:
      drop-shadow(12px 9px 16px rgba(0, 0, 0, 0.58))
      drop-shadow(0 0 14px rgba(49, 196, 183, 0.12));
  }

  .build-card.is-active.presentation-rift .card-image {
    right: auto;
    left: -68%;
    width: 166%;
    max-width: none;
    object-position: 76% 44%;
    filter: brightness(1.42) contrast(1.17) saturate(0.98);
  }

  .build-card.is-active.presentation-rift .card-art::before {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 46%, rgba(2, 7, 8, 0.18)),
      linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent 67%);
  }

  .build-card.is-active.presentation-rift .card-copy {
    position: absolute;
    z-index: 5;
    top: 10%;
    right: -1%;
    bottom: 9%;
    width: 59%;
    min-height: 0;
    margin: 0;
    padding: clamp(20px, 1.45vw, 27px) clamp(19px, 1.45vw, 27px) 17px clamp(54px, 4.3vw, 79px);
    clip-path: polygon(8% 0, 94% 4%, 100% 22%, 96% 80%, 84% 100%, 2% 94%, 0 67%, 5% 29%);
    background:
      linear-gradient(100deg, rgba(5, 18, 19, 0.04), rgba(5, 15, 16, 0.82) 28%, rgba(3, 9, 10, 0.96) 76%, rgba(3, 8, 9, 0.7)),
      radial-gradient(ellipse at 4% 52%, rgba(67, 205, 193, 0.19), transparent 46%);
    box-shadow:
      inset 1px 0 rgba(90, 210, 198, 0.16),
      12px 16px 28px rgba(0, 0, 0, 0.22);
  }

  .build-card.is-active.presentation-rift .card-copy::before {
    top: 15%;
    bottom: 17%;
    left: 11%;
    opacity: 0.56;
    background: linear-gradient(transparent, #65d6ca 32%, #be9050 72%, transparent);
  }

  .build-card.is-active .card-meta {
    padding: 2px 7px;
    font-size: clamp(8px, 0.5vw, 10px);
  }

  .build-card.is-active .card-copy h3 {
    margin: 7px 0 3px;
    font-size: clamp(22px, 1.46vw, 29px);
    letter-spacing: 1.65px;
  }

  .build-card.is-active .card-copy p {
    margin-bottom: 10px;
    font-size: clamp(11px, 0.66vw, 13px);
    letter-spacing: 0.42px;
  }

  .build-card.is-active .card-link {
    min-height: 28px;
    padding: 5px 11px;
    font-size: 10px;
  }

  .build-card.is-prev,
  .build-card.is-next {
    z-index: 2;
    top: 50%;
    bottom: auto;
    width: clamp(235px, 20vw, 306px);
    height: clamp(150px, 10.5vw, 184px);
    display: block;
    overflow: hidden;
    border: 1px solid rgba(104, 202, 192, 0.28);
    background:
      linear-gradient(135deg, rgba(54, 183, 172, 0.3), rgba(8, 41, 45, 0.22) 42%, rgba(7, 10, 14, 0.44)),
      radial-gradient(circle at 76% 26%, rgba(223, 177, 94, 0.16), transparent 34%);
    box-shadow:
      inset 1px 1px rgba(205, 248, 241, 0.16),
      inset -1px -1px rgba(10, 40, 42, 0.42),
      0 24px 42px rgba(0, 0, 0, 0.34),
      0 0 25px rgba(50, 191, 179, 0.09);
    opacity: 0.43;
    filter: saturate(0.78) brightness(0.8) blur(0.38px);
    backdrop-filter: blur(10px);
    transition: opacity 0.38s ease, filter 0.38s ease, transform 0.68s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .build-card.is-prev {
    transform-origin: right center;
    border-radius: 48% 11% 11% 48% / 42% 16% 16% 42%;
    clip-path: polygon(12% 7%, 89% 0, 100% 12%, 97% 86%, 83% 100%, 10% 94%, 0 73%, 2% 25%);
    transform: translateX(calc(-50% - clamp(205px, 20vw, 288px))) translateY(5px) translateZ(-250px) rotateY(48deg) rotateZ(-3deg) scale(0.87);
  }

  .build-card.is-next {
    transform-origin: left center;
    border-radius: 11% 48% 48% 11% / 16% 42% 42% 16%;
    clip-path: polygon(11% 0, 88% 7%, 98% 25%, 100% 73%, 90% 94%, 17% 100%, 3% 86%, 0 12%);
    transform: translateX(calc(-50% + clamp(205px, 20vw, 288px))) translateY(5px) translateZ(-250px) rotateY(-48deg) rotateZ(3deg) scale(0.87);
  }

  .build-card.is-prev::before,
  .build-card.is-next::before {
    inset: 8px;
    border-color: rgba(202, 165, 95, 0.24);
    border-radius: inherit;
  }

  .build-card.is-prev::after,
  .build-card.is-next::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    display: block;
    pointer-events: none;
    background: linear-gradient(112deg, rgba(220, 255, 247, 0.15), transparent 23% 68%, rgba(213, 166, 86, 0.11));
    mix-blend-mode: screen;
  }

  .build-card.is-prev .card-art,
  .build-card.is-next .card-art {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    opacity: 0.52;
    filter: blur(0.5px) contrast(0.92) saturate(0.66);
  }

  .build-card.is-prev .card-copy,
  .build-card.is-next .card-copy {
    display: none;
  }

  .build-card.is-prev:hover,
  .build-card.is-next:hover {
    opacity: 0.58;
    filter: saturate(0.92) brightness(0.9) blur(0);
  }

  .build-card.is-prev:hover {
    transform: translateX(calc(-50% - clamp(205px, 20vw, 288px))) translateY(2px) translateZ(-220px) rotateY(44deg) rotateZ(-2deg) scale(0.9);
  }

  .build-card.is-next:hover {
    transform: translateX(calc(-50% + clamp(205px, 20vw, 288px))) translateY(2px) translateZ(-220px) rotateY(-44deg) rotateZ(2deg) scale(0.9);
  }
}

/* =========================================================
   Single-build altar — one tall featured relic at a time.
   ========================================================= */
@media (min-width: 1025px) {
  .featured-build {
    width: clamp(680px, 54vw, 820px);
    bottom: clamp(10px, 2.4vh, 28px);
  }

  .deck-frame {
    height: clamp(400px, 33vw, 468px);
    perspective: none;
  }

  .build-deck::before,
  .build-deck::after,
  .deck-dots {
    display: none !important;
  }

  .build-card.is-prev,
  .build-card.is-next,
  .build-card.is-hidden {
    display: none !important;
  }

  .build-card.is-active,
  .build-card.is-active.presentation-rift,
  .build-card.is-active.presentation-reliquary,
  .build-card.is-active.presentation-monolith {
    inset: 6px 14% 36px;
    overflow: visible;
    background: none;
  }

  .build-card.is-active.presentation-rift {
    display: block;
  }

  /* One painted relic surface: the art, broken glass edge, and copy field share a single image. */
  .build-card.is-active.presentation-rift.has-card-surface {
    isolation: isolate;
    clip-path: polygon(0 12%, 7% 3%, 32% 0, 51% 5%, 72% 1%, 94% 8%, 100% 22%, 96% 46%, 100% 71%, 91% 97%, 62% 100%, 32% 96%, 9% 100%, 0 85%, 3% 61%, 0 38%);
    filter:
      drop-shadow(0 22px 28px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 16px rgba(71, 218, 204, 0.1));
  }

  .build-card.is-active.presentation-rift.has-card-surface::before {
    display: none !important;
  }

  .build-card.is-active.presentation-rift.has-card-surface .card-art {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: none;
    -webkit-mask-image: none;
    mask-image: none;
    filter: none;
  }

  .build-card.is-active.presentation-rift.has-card-surface .card-image {
    position: absolute;
    inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    filter: none;
  }

  .build-card.is-active.presentation-rift.has-card-surface .card-art > :not(.card-image) {
    display: none !important;
  }

  .build-card.is-active.presentation-rift.has-card-surface .card-copy {
    z-index: 4;
    top: 38%;
    right: 7%;
    bottom: auto;
    width: 40%;
    padding: 0;
    clip-path: none;
    background: none;
    box-shadow: none;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.84);
  }

  .build-card.is-active.presentation-rift.has-card-surface .card-copy::before {
    display: none;
  }

  .build-card.is-active.presentation-rift.has-card-surface .card-copy h3 {
    margin: 8px 0 5px;
    font-size: clamp(24px, 1.72vw, 34px);
    line-height: 1.08;
    letter-spacing: 1px;
  }

  .build-card.is-active.presentation-rift.has-card-surface .card-copy p {
    max-width: 18em;
    margin-bottom: 13px;
    color: rgba(184, 243, 232, 0.9);
    font-size: clamp(12px, 0.76vw, 14px);
  }

  .build-card.is-active.presentation-rift.has-card-surface .card-link {
    padding: 8px 13px;
    border-color: rgba(224, 239, 229, 0.63);
    background: rgba(5, 17, 18, 0.32);
    box-shadow: 0 0 11px rgba(91, 224, 210, 0.08), inset 0 0 12px rgba(235, 247, 241, 0.04);
  }

  /* A pale relic seam traces the whole BD composition, not a rectangle. */
  .build-card.is-active.presentation-rift::before {
    content: "";
    position: absolute;
    z-index: 9;
    inset: -5px -9px -7px;
    display: block !important;
    pointer-events: none;
    opacity: 0.78;
    background: linear-gradient(132deg, rgba(246, 255, 250, 0.92), rgba(196, 235, 228, 0.7) 42%, rgba(255, 249, 230, 0.7));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M24 238 15 788 111 944 454 985 860 966 968 777 983 278M24 238 147 126M853 126 983 278' fill='none' stroke='black' stroke-width='2.7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M24 238 15 788 111 944 454 985 860 966 968 777 983 278M24 238 147 126M853 126 983 278' fill='none' stroke='black' stroke-width='2.7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 / 100% 100% no-repeat;
    filter:
      drop-shadow(0 0 1px rgba(244, 255, 250, 0.95))
      drop-shadow(0 0 6px rgba(80, 218, 206, 0.2));
  }

  .build-card.is-active.presentation-rift .card-art {
    top: 0;
    bottom: 0;
    left: 0;
    width: 59%;
    height: 100%;
    clip-path: polygon(3% 5%, 19% 0, 74% 4%, 96% 14%, 100% 36%, 91% 61%, 98% 84%, 82% 100%, 14% 96%, 0 79%, 6% 48%, 0 20%);
    mask-image: linear-gradient(90deg, #000 0 78%, rgba(0, 0, 0, 0.88) 91%, transparent 100%);
    filter:
      drop-shadow(14px 16px 20px rgba(0, 0, 0, 0.6))
      drop-shadow(0 0 19px rgba(45, 198, 184, 0.13));
  }

  .build-card.is-active.presentation-rift .card-image {
    left: -85%;
    width: 194%;
    height: 100%;
    max-width: none;
    object-position: 78% 43%;
    filter: brightness(1.26) contrast(1.15) saturate(0.94);
  }

  .build-card.is-active.presentation-rift .card-copy {
    top: 28%;
    right: -2%;
    bottom: 12%;
    width: 64%;
    padding: clamp(23px, 1.75vw, 32px) clamp(20px, 1.55vw, 29px) clamp(18px, 1.3vw, 24px) clamp(58px, 4.9vw, 88px);
    clip-path: polygon(9% 0, 95% 5%, 100% 19%, 96% 83%, 85% 100%, 3% 95%, 0 71%, 6% 25%);
    background:
      linear-gradient(103deg, rgba(5, 19, 20, 0.12), rgba(4, 13, 14, 0.86) 29%, rgba(3, 9, 10, 0.97) 76%, rgba(3, 8, 9, 0.7)),
      radial-gradient(ellipse at 5% 48%, rgba(61, 204, 191, 0.2), transparent 44%);
    box-shadow:
      inset 1px 0 rgba(93, 214, 202, 0.19),
      15px 18px 32px rgba(0, 0, 0, 0.28);
  }

  .build-card.is-active.presentation-rift .card-copy::before {
    top: 13%;
    bottom: 13%;
    left: 12%;
  }

  .build-card.is-active .card-copy h3 {
    margin: 9px 0 5px;
    font-size: clamp(25px, 1.68vw, 33px);
    letter-spacing: 2px;
  }

  .build-card.is-active .card-copy p {
    margin-bottom: 14px;
    font-size: clamp(12px, 0.74vw, 14px);
  }

  .deck-control,
  .deck-control[hidden] {
    position: absolute;
    z-index: 12;
    top: 51%;
    bottom: auto;
    width: 52px;
    height: 68px;
    display: grid !important;
    place-items: center;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 0;
    color: inherit;
    background: none;
    box-shadow: none;
    cursor: pointer;
    opacity: 0.82;
    transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
  }

  .deck-control[hidden] {
    display: none !important;
  }

  .deck-prev { left: 2.2%; }
  .deck-next { right: 2.2%; }

  .deck-control svg {
    width: 48px;
    height: 62px;
    overflow: visible;
    filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.58));
  }

  .nav-rune-frame {
    fill: rgba(4, 12, 13, 0.64);
    stroke: rgba(183, 142, 76, 0.78);
    stroke-width: 1.2;
  }

  .nav-rune-mark {
    fill: rgba(191, 148, 77, 0.88);
    stroke: rgba(230, 194, 124, 0.74);
    stroke-width: 0.55;
  }

  .nav-rune-core {
    fill: rgba(78, 213, 200, 0.88);
    filter: drop-shadow(0 0 4px rgba(87, 223, 209, 0.86));
  }

  .deck-control:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.07);
    filter: drop-shadow(0 0 12px rgba(77, 208, 195, 0.24));
  }

  .deck-control:hover .nav-rune-frame {
    fill: rgba(8, 27, 28, 0.9);
    stroke: #d5a85f;
  }

  .deck-control:hover .nav-rune-mark {
    fill: #e5c27f;
  }

  .deck-control:focus-visible {
    outline: 1px solid rgba(111, 229, 216, 0.88);
    outline-offset: 4px;
  }
}

/* Additional atmosphere lives inside the painted relic, never above the site copy. */
  .build-card.is-active.presentation-rift.has-card-surface::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block !important;
    pointer-events: none;
    opacity: 0.72;
    background-image:
      radial-gradient(circle, rgba(137, 255, 240, 0.94) 0 1.2px, transparent 2.3px),
      radial-gradient(circle, rgba(233, 205, 142, 0.7) 0 0.9px, transparent 1.9px),
      radial-gradient(circle, rgba(187, 246, 237, 0.56) 0 0.72px, transparent 1.6px),
      radial-gradient(circle, rgba(84, 231, 217, 0.72) 0 1.55px, rgba(84, 231, 217, 0.18) 2.7px, transparent 4.2px);
    background-size: 93px 111px, 141px 163px, 67px 89px, 229px 181px;
    background-position: 16px -74px, 112px 146px, -32px 36px, 72px -121px;
    mix-blend-mode: screen;
    animation: relic-mote-current 13s linear infinite;
  }

  .build-card.is-active.presentation-rift.has-card-surface::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: -16%;
    right: auto;
    bottom: -16%;
    left: -10%;
    width: 6%;
    display: block !important;
    pointer-events: none;
    opacity: 0;
    clip-path: polygon(
      42% 0,
      58% 0,
      66% 13%,
      52% 27%,
      72% 40%,
      55% 53%,
      66% 67%,
      48% 81%,
      57% 100%,
      37% 100%,
      29% 82%,
      43% 67%,
      28% 52%,
      45% 37%,
      33% 20%
    );
    background: linear-gradient(
      106deg,
      transparent 4%,
      rgba(255, 255, 255, 0.04) 24%,
      rgba(255, 255, 255, 0.2) 39%,
      rgba(255, 255, 255, 0.74) 48%,
      rgba(255, 255, 255, 0.92) 51%,
      rgba(255, 255, 255, 0.3) 57%,
      rgba(255, 255, 255, 0.06) 72%,
      transparent 96%
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.18));
    transform: translateX(0) skewX(-12deg);
    animation: relic-glass-sheen 16s linear infinite;
  }

@keyframes relic-mote-current {
  from { background-position: 16px -74px, 112px 146px, -32px 36px, 72px -121px; }
  to { background-position: 51px 466px, 76px 618px, -7px 499px, 35px 552px; }
}

@keyframes relic-glass-sheen {
  0%, 8% { opacity: 0; transform: translateX(0) skewX(-12deg); }
  8.6% { opacity: 0.14; transform: translateX(80%) skewX(-12deg); }
  9.4% { opacity: 0.72; transform: translateX(230%) skewX(-12deg); }
  13% { opacity: 0.54; transform: translateX(1760%) skewX(-12deg); }
  13.8%, 100% { opacity: 0; transform: translateX(1950%) skewX(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .build-card.is-active.presentation-rift.has-card-surface::before,
  .build-card.is-active.presentation-rift.has-card-surface::after {
    animation: none !important;
  }

  .build-card.is-active.presentation-rift.has-card-surface::after {
    opacity: 0 !important;
  }
}

/* =========================================================
   REVERSIBLE CARD DEPTH STUDY
   Remove this block to restore the previous card treatment.
   ========================================================= */
@media (min-width: 1025px) {
  /* A local shadow field makes the world recede without drawing a new panel. */
  .build-deck::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 51%;
    left: 50%;
    width: 91%;
    height: 78%;
    display: block !important;
    aspect-ratio: auto;
    pointer-events: none;
    opacity: 0.96;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(
      ellipse at center,
      rgba(0, 1, 2, 0.9) 0%,
      rgba(1, 4, 5, 0.76) 42%,
      rgba(0, 2, 3, 0.48) 64%,
      rgba(0, 0, 0, 0.16) 78%,
      transparent 100%
    );
    box-shadow: none;
    filter: blur(14px);
    transform: translate(-50%, -50%);
    animation: none;
  }

  /* Directional silver catches the existing irregular silhouette. */
  .build-card.is-active.presentation-rift.has-card-surface {
    animation: relic-depth-focus 0.58s cubic-bezier(0.18, 0.82, 0.22, 1) both;
    filter:
      drop-shadow(0 30px 38px rgba(0, 0, 0, 0.82))
      drop-shadow(0 9px 12px rgba(0, 0, 0, 0.62))
      drop-shadow(-1px -1px 0 rgba(245, 248, 246, 0.34))
      drop-shadow(1px 2px 0 rgba(164, 181, 177, 0.1))
      drop-shadow(0 0 20px rgba(232, 239, 236, 0.055));
  }

  .build-card.is-active.presentation-rift.has-card-surface .card-image {
    filter: brightness(1.075) contrast(1.12) saturate(0.94);
  }

  /* An edgeless obsidian pool keeps the copy readable over the painted surface. */
  .build-card.is-active.presentation-rift.has-card-surface .card-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40px -48px -34px -62px;
    width: auto;
    height: auto;
    display: block !important;
    pointer-events: none;
    opacity: 0.92;
    border: 0;
    clip-path: none;
    background: radial-gradient(
      ellipse at 58% 50%,
      rgba(0, 2, 3, 0.88) 0%,
      rgba(1, 5, 6, 0.68) 43%,
      rgba(0, 3, 4, 0.28) 70%,
      transparent 88%
    );
    box-shadow: none;
    filter: blur(7px);
    transform: none;
  }

  .build-card.is-active.presentation-rift.has-card-surface .card-copy h3 {
    color: rgba(248, 242, 226, 0.98);
    text-shadow:
      0 2px 5px rgba(0, 0, 0, 0.96),
      0 0 18px rgba(255, 255, 255, 0.07);
  }
}

@keyframes relic-depth-focus {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.975);
    filter:
      blur(2px)
      drop-shadow(0 24px 28px rgba(0, 0, 0, 0.42));
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 30px 38px rgba(0, 0, 0, 0.82))
      drop-shadow(0 9px 12px rgba(0, 0, 0, 0.62))
      drop-shadow(-1px -1px 0 rgba(245, 248, 246, 0.34))
      drop-shadow(1px 2px 0 rgba(164, 181, 177, 0.1))
      drop-shadow(0 0 20px rgba(232, 239, 236, 0.055));
  }
}

/* Inline emblem fallback: avoids a separate SVG request on static hosts. */
.logo-fallback {
  position: relative;
  display: block;
  overflow: hidden;
  clip-path: polygon(50% 0, 70% 12%, 92% 10%, 82% 31%, 100% 45%, 84% 59%, 80% 82%, 60% 96%, 50% 100%, 40% 96%, 20% 82%, 16% 59%, 0 45%, 18% 31%, 8% 10%, 30% 12%);
  background: linear-gradient(145deg, #30261d, #c39a5e 45%, #60482d 62%, #111719);
  box-shadow: inset 0 0 0 2px #d0aa69, inset 0 0 0 5px #0b1011;
}

.logo-fallback span {
  position: absolute;
  display: block;
  width: 4px;
  height: 64%;
  top: 18%;
  left: calc(50% - 2px);
  border-radius: 999px;
  background: linear-gradient(#b9fff5, #57d8c9 44%, #1f736d);
  box-shadow: 0 0 7px rgba(87, 216, 201, 0.82);
}

.logo-fallback span:nth-child(1) { transform: rotate(31deg); }
.logo-fallback span:nth-child(2) { transform: rotate(-31deg); }
.logo-fallback span:nth-child(3) { transform: none; }