:root {
  --bg: #080b0f;
  --panel: #12161c;
  --panel2: #191e26;
  --gold: #d8a94b;
  --gold2: #8d5d1f;
  --red: #8d120d;
  --red2: #5a0c09;
  --blue: #17345d;
  --blue2: #0f223f;
  --text: #f4ead4;
  --muted: #b8ab93;
  --line: rgba(217,169,75,.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(72, 47, 20, .35), transparent 35%),
    linear-gradient(180deg, #10151c, #06080b 55%);
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
}

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

.site-header {
  height: 104px;
  display: grid;
  grid-template-columns: 390px 1fr 170px;
  align-items: stretch;
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, #10151b, #07090c);
  border-bottom: 2px solid #3e2a13;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}

.logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 34px;
  z-index: 3;
}

.logo-wrap img {
  width: 320px;
  max-height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.8));
}

.top-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  border-left: 1px solid rgba(255,255,255,.06);
}

.top-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  color: #bda879;
  text-transform: uppercase;
  letter-spacing: .045em;
  font-weight: bold;
  border-right: 1px solid rgba(255,255,255,.055);
}

.top-nav a span {
  color: var(--gold);
  font-size: 1.15rem;
}

.top-nav a.active,
.top-nav a:hover {
  color: #ffe6a7;
  background:
    linear-gradient(180deg, rgba(216,169,75,.16), rgba(99,58,18,.16)),
    linear-gradient(180deg, #171c25, #0d1016);
  box-shadow: inset 0 -3px 0 var(--gold2);
}

.discord-top {
  align-self: center;
  justify-self: center;
  min-width: 130px;
  text-align: center;
  padding: 12px 18px;
  color: #d9e5ff;
  text-transform: uppercase;
  letter-spacing: .055em;
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  border: 1px solid #5370a0;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.5), 0 0 20px rgba(20,54,106,.25);
}

.hero {
  position: relative;
  min-height: 630px;
  background:
    linear-gradient(90deg, rgba(3,5,8,.94) 0%, rgba(3,5,8,.78) 31%, rgba(3,5,8,.24) 64%, rgba(3,5,8,.08) 100%),
    url("assets/hero-bg.jpg") center right / cover no-repeat;
  border-bottom: 1px solid #312412;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 74%, #07090c 100%),
    radial-gradient(circle at 72% 22%, rgba(245,177,61,.22), transparent 30%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 112px 0 0 78px;
}

h1, h2, h3, p { margin-top: 0; }

.hero h1 {
  font-size: clamp(2.5rem, 4vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow:
    0 2px 0 #000,
    0 0 14px rgba(0,0,0,.9);
}

.divider {
  width: 360px;
  height: 18px;
  margin: 20px 0 24px;
  background: linear-gradient(90deg, transparent, var(--gold2), var(--gold), var(--gold2), transparent);
  clip-path: polygon(0 45%, 45% 45%, 50% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 50% 100%, 45% 55%, 0 55%);
}

.hero p {
  max-width: 520px;
  color: #e5d7bb;
  font-size: 1.26rem;
  line-height: 1.45;
  text-shadow: 0 2px 6px #000;
}

.hero-buttons {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 0 38px;
  color: #ffe6a7;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: bold;
  border: 1px solid rgba(255,218,128,.58);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.55);
}

.btn.red { background: linear-gradient(180deg, var(--red), var(--red2)); }
.btn.blue { background: linear-gradient(180deg, var(--blue), var(--blue2)); }
.btn.disabled { opacity: .7; cursor: not-allowed; }

.status-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  color: #c7a76c;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.status-row strong {
  color: #a7ea34;
}

.green-dot {
  width: 16px;
  height: 16px;
  background: #75c914;
  border-radius: 50%;
  box-shadow: 0 0 12px #75c914;
}

.pipe {
  height: 18px;
  width: 1px;
  background: rgba(255,255,255,.4);
  margin: 0 12px;
}

.dashboard {
  display: grid;
  grid-template-columns: 1.05fr 1.8fr 1.25fr;
  gap: 20px;
  padding: 22px 52px 20px;
  margin-top: -2px;
}

.panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    var(--panel);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 18px 40px rgba(0,0,0,.38);
}

.panel header {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1f2329, #0d1014);
  border-bottom: 1px solid #4b371d;
}

.panel h2 {
  margin: 0;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 1.25rem;
}

.news-item {
  position: relative;
  display: block;
  padding: 17px 54px 16px 30px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.news-item:hover,
.feature-row:hover {
  background: rgba(216,169,75,.05);
}

.news-item time {
  display: block;
  color: #c39754;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 4px;
}

.news-item strong {
  display: block;
  color: #f2e2bf;
  font-size: 1.06rem;
}

.news-item span {
  color: var(--muted);
  display: block;
  line-height: 1.35;
}

.news-item b {
  position: absolute;
  right: 28px;
  top: 42%;
  color: var(--gold);
  font-size: 2rem;
}

.panel footer {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel footer a {
  color: var(--gold);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .04em;
}

.screenshot-frame {
  position: relative;
  height: 280px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.screenshot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,.72);
  color: var(--gold);
  border: 1px solid var(--gold2);
  font-size: 2rem;
  z-index: 2;
}

.arrow.left { left: 20px; }
.arrow.right { right: 20px; }

.thumbs {
  display: flex;
  gap: 10px;
  padding: 14px 22px 16px;
}

.thumb {
  flex: 1;
  height: 54px;
  background: linear-gradient(135deg, #2b342b, #81541d);
  border: 1px solid #3f321d;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.45);
}

.thumb.active {
  border-color: var(--gold);
}

.feature-row {
  display: flex;
  gap: 16px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.feature-icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: radial-gradient(circle, #352111, #0b0d10);
  border: 1px solid #5b421e;
  font-size: 1.35rem;
}

.feature-row strong {
  display: block;
  color: var(--gold);
  text-transform: uppercase;
  font-size: .94rem;
}

.feature-row p {
  margin: 3px 0 0;
  color: var(--muted);
  line-height: 1.3;
}

.site-footer {
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 52px;
  color: #8f8067;
  background: #080b0f;
  border-top: 1px solid #3c2a15;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .04em;
}

.site-footer div,
.socials {
  display: flex;
  gap: 16px;
}

.site-footer p {
  margin: 0;
}

.socials {
  justify-self: end;
}

.subpage {
  min-height: calc(100vh - 170px);
}

.page-banner {
  padding: 78px 52px;
  background:
    linear-gradient(90deg, rgba(3,5,8,.94), rgba(3,5,8,.45)),
    url("assets/hero-bg.jpg") center / cover no-repeat;
  border-bottom: 1px solid #4b371d;
}

.page-banner h1 {
  color: var(--gold);
  text-transform: uppercase;
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  letter-spacing: .05em;
  text-shadow: 0 3px 0 #000;
  margin: 0;
}

.content-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 28px 70px;
}

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

.grid-cards.two {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cards article,
.post-list article,
.download-box,
.steps-box,
.faq-list details {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)), var(--panel);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f;
  padding: 28px;
}

.grid-cards h2,
.post-list h2,
.download-box h2,
.steps-box h2 {
  color: var(--gold);
}

.grid-cards p,
.post-list p,
.download-box p,
.steps-box,
.faq-list p {
  color: var(--muted);
}

.post-list {
  display: grid;
  gap: 18px;
}

.post-list time {
  color: #c39754;
  text-transform: uppercase;
}

.download-box,
.steps-box {
  margin-bottom: 22px;
}

.faq-list details {
  margin-bottom: 14px;
}

.faq-list summary {
  cursor: pointer;
  color: var(--gold);
  font-size: 1.18rem;
  font-weight: bold;
}

@media (max-width: 1150px) {
  .site-header {
    grid-template-columns: 280px 1fr;
    height: auto;
  }

  .logo-wrap img { width: 230px; }
  .discord-top { display: none; }
  .top-nav { overflow-x: auto; justify-content: flex-start; }
  .top-nav a { min-height: 86px; white-space: nowrap; }
  .dashboard { grid-template-columns: 1fr; padding: 22px; }
}

@media (max-width: 760px) {
  .site-header {
    display: block;
  }

  .logo-wrap {
    justify-content: center;
    padding: 12px;
  }

  .hero-content {
    padding: 76px 28px 60px;
  }

  .dashboard {
    padding: 18px;
  }

  .grid-cards,
  .grid-cards.two {
    grid-template-columns: 1fr;
  }

  .site-footer {
    display: block;
    padding: 22px;
    line-height: 2;
  }

  .site-footer div,
  .socials {
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* Expanded Features Page */
.banner-copy {
  max-width: 760px;
  margin: 16px 0 0;
  color: #d9c9aa;
  font-size: 1.16rem;
  text-shadow: 0 2px 8px #000;
}

.features-expanded {
  max-width: 1280px;
}

.feature-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #c39754;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .78rem;
  font-weight: bold;
}

.prestige-hero {
  display: grid;
  grid-template-columns: 1.55fr .85fr;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 24px;
  padding: 36px;
  background:
    radial-gradient(circle at 82% 18%, rgba(216,169,75,.2), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.12)),
    #131820;
  border: 1px solid #6d4b20;
  box-shadow: inset 0 0 0 2px #080a0d, 0 22px 55px rgba(0,0,0,.36);
}

.prestige-hero h2,
.wide-feature h2 {
  color: var(--gold);
  font-size: clamp(2.3rem, 4vw, 4.1rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-shadow: 0 2px 0 #000;
}

.large-copy {
  color: #eadbbf;
  font-size: 1.18rem;
  line-height: 1.55;
}

.prestige-hero p,
.wide-feature p {
  color: var(--muted);
  font-size: 1.05rem;
}

.reward-panel,
.mini-rewards,
.prestige-details section,
.supporting-features article {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    var(--panel);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f;
}

.reward-panel {
  padding: 28px;
  background:
    radial-gradient(circle at top, rgba(216,169,75,.16), transparent 36%),
    linear-gradient(180deg, #1b2029, #11151b);
}

.reward-panel h3,
.mini-rewards h3,
.prestige-details h3 {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .045em;
}

.reward-panel ul,
.mini-rewards ul,
.prestige-details ul {
  color: var(--muted);
  padding-left: 20px;
}

.reward-panel li,
.mini-rewards li,
.prestige-details li {
  margin-bottom: 10px;
}

.reward-panel strong {
  color: #f1d08b;
}

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

.prestige-details section {
  padding: 26px;
}

.wide-feature {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 28px;
  margin-bottom: 28px;
  padding: 32px;
  background:
    radial-gradient(circle at 12% 20%, rgba(69,96,146,.18), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.1)),
    #111720;
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 18px 45px rgba(0,0,0,.28);
}

.mini-rewards {
  padding: 26px;
}

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

.supporting-features article {
  padding: 26px;
  min-height: 225px;
}

.supporting-features h2 {
  color: var(--gold);
  font-size: 1.55rem;
}

.supporting-features p {
  color: var(--muted);
}

@media (max-width: 980px) {
  .prestige-hero,
  .wide-feature,
  .prestige-details,
  .supporting-features {
    grid-template-columns: 1fr;
  }
}

/* Homepage Development Progress Panel */
.progress-content {
  padding: 18px 22px 20px;
}

.progress-feature {
  padding: 18px;
  margin-bottom: 14px;
  background:
    radial-gradient(circle at top right, rgba(216,169,75,.16), transparent 42%),
    linear-gradient(180deg, #1b2029, #10141a);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f;
}

.progress-feature span {
  display: block;
  color: #c39754;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .78rem;
  margin-bottom: 7px;
}

.progress-feature strong {
  display: block;
  color: var(--gold);
  font-size: 1.18rem;
}

.progress-feature p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.35;
}

.milestone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: var(--muted);
}

.milestone b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #4b371d;
  background: #0b0d10;
  color: var(--gold);
}

.milestone.done b {
  color: #84d84b;
}

.milestone.active b {
  color: #e2bd63;
}

.milestone.pending {
  opacity: .75;
}

/* Donate Page */
.donate-page {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 24px;
  max-width: 1240px;
}

.donate-main,
.donate-side,
.donate-transparency {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    var(--panel);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 18px 45px rgba(0,0,0,.24);
  padding: 32px;
}

.donate-main h2,
.donate-side h2,
.donate-transparency h2 {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.donate-main {
  background:
    radial-gradient(circle at top right, rgba(141,18,13,.24), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12)),
    #131820;
}

.donate-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 26px 0 28px;
}

.donate-rules div {
  padding: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(217,169,75,.24);
}

.donate-rules strong {
  display: block;
  color: #f1d08b;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.donate-rules span,
.donate-side li,
.donate-transparency p {
  color: var(--muted);
}

.donate-side ul {
  padding-left: 20px;
}

.donate-side li {
  margin-bottom: 12px;
}

.donate-transparency {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .donate-page,
  .donate-rules {
    grid-template-columns: 1fr;
  }
}

/* Real DBC Talent Calculator */
.wow-talent-page {
  max-width: 1180px;
  padding-top: 34px;
}

.class-icons {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.class-icon {
  width: 72px;
  height: 66px;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle at 35% 25%, #3c4a5d, #07090c 68%);
  border: 2px solid #343434;
  box-shadow: inset 0 0 0 3px #090909, 0 2px 7px rgba(0,0,0,.7);
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
}

.class-icon span {
  display: block;
  color: var(--gold);
  font-size: 1.45rem;
  line-height: 1.4;
  text-shadow: 0 2px 3px #000;
}

.class-icon small {
  display: block;
  font-size: .68rem;
  color: #d9c9aa;
}

.class-icon.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 3px #090909, 0 0 16px rgba(216,169,75,.45);
}

.talent-title-bar {
  min-height: 43px;
  display: grid;
  grid-template-columns: 1fr 190px 170px 110px;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 10px;
  color: #fff;
  background: #07090c;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.talent-title-bar strong {
  font-size: 1.15rem;
  color: #fff;
}

.talent-title-bar button,
.import-row button {
  color: #8ab7ff;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .98rem;
  text-decoration: underline;
}

.wow-talent-trees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #333;
  background: #08090b;
}

.wow-tree {
  position: relative;
  min-height: 646px;
  overflow: visible;
  border-right: 1px solid #343434;
  background: #111;
}

.wow-tree:last-child {
  border-right: 0;
}

.tree-bg {
  position: absolute;
  inset: 0 0 43px 0;
  opacity: .76;
  background:
    radial-gradient(circle at 50% 20%, rgba(245,216,124,.30), transparent 22%),
    radial-gradient(circle at 20% 70%, rgba(74,42,17,.68), transparent 36%),
    linear-gradient(135deg, #2a1d12, #0b0f13 70%);
}

.tree-1 .tree-bg {
  background:
    radial-gradient(circle at 52% 20%, rgba(255,246,175,.36), transparent 22%),
    radial-gradient(circle at 48% 63%, rgba(151,116,30,.55), transparent 34%),
    linear-gradient(135deg, #2e2612, #12170d 70%);
}

.tree-2 .tree-bg {
  background:
    radial-gradient(circle at 52% 20%, rgba(72,224,204,.22), transparent 23%),
    radial-gradient(circle at 60% 70%, rgba(21,62,75,.66), transparent 38%),
    linear-gradient(135deg, #0b1820, #0b0d13 70%);
}

.wow-tree-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 64px);
  grid-template-rows: repeat(7, 74px);
  justify-content: center;
  gap: 8px 10px;
  padding-top: 18px;
}

.talent-icon-slot {
  position: relative;
  width: 54px;
  height: 54px;
  justify-self: center;
  align-self: center;
  padding: 0;
  cursor: pointer;
  background: #151515;
  border: 2px solid #777;
  box-shadow: inset 0 0 0 3px #050505, 0 0 0 1px #000, 0 4px 8px rgba(0,0,0,.6);
}

.talent-icon-slot.locked {
  border-color: #444;
}

.talent-icon-slot.learned {
  border-color: #21d11d;
  box-shadow: inset 0 0 0 3px #050505, 0 0 0 1px #0a0, 0 0 9px rgba(36,255,30,.6);
}

.talent-real-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.55);
}

.talent-icon-slot.learned .talent-real-icon,
.talent-icon-slot:not(.locked):hover .talent-real-icon {
  filter: none;
}

.rank {
  position: absolute;
  right: -10px;
  bottom: -8px;
  z-index: 4;
  min-width: 25px;
  height: 20px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  color: #00ff00;
  background: #020202;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: .86rem;
  font-weight: bold;
  text-shadow: 1px 1px 0 #000;
}

.locked .rank {
  color: #777;
}

.tooltip {
  display: none;
  position: absolute;
  left: 63px;
  top: -8px;
  z-index: 100;
  width: 315px;
  padding: 12px;
  text-align: left;
  pointer-events: none;
  color: #fff;
  background: rgba(4,5,10,.97);
  border: 1px solid #6d57b8;
  box-shadow: 0 0 0 1px #000, 0 8px 22px rgba(0,0,0,.85);
  font-family: Arial, sans-serif;
}

.talent-icon-slot:hover .tooltip {
  display: block;
}

.tooltip strong {
  display: block;
  color: #ffd100;
  font-size: 1rem;
  margin-bottom: 4px;
}

.tooltip em {
  display: block;
  color: #fff;
  font-style: normal;
  margin-bottom: 8px;
}

.tooltip span {
  display: block;
  color: #d8d8d8;
  line-height: 1.35;
  margin-bottom: 8px;
}

.tooltip small {
  display: block;
  color: #9d9d9d;
  margin-top: 5px;
}

.talent-arrow.vertical {
  width: 18px;
  justify-self: center;
  align-self: stretch;
  margin: 18px 0;
  border-left: 3px solid rgba(196, 150, 65, .75);
  position: relative;
  z-index: 1;
}

.talent-arrow.vertical::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: -8px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid rgba(196, 150, 65, .9);
}

.wow-tree footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  z-index: 3;
  background: #101010;
  border-top: 1px solid #333;
}

.tree-orb {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle, #356a9e, #08101a);
  border: 1px solid #aaa;
}

.wow-tree footer strong {
  flex: 1;
  color: #fff;
  font-size: 1rem;
}

.wow-tree footer button {
  color: #782424;
  font-weight: bold;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1.3rem;
}

.import-row {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.import-row input {
  flex: 1;
  min-height: 38px;
  color: #ddd;
  background: #080b0f;
  border: 1px solid #333;
  padding: 0 10px;
}

@media (max-width: 1180px) {
  .wow-talent-trees {
    grid-template-columns: 1fr;
  }

  .wow-tree {
    min-height: 646px;
    border-right: 0;
    border-bottom: 1px solid #343434;
  }

  .talent-title-bar {
    grid-template-columns: 1fr;
    height: auto;
    gap: 7px;
  }
}


/* v10 real class icon fixes */
.class-icon img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  display: block;
  margin: 5px auto 2px;
  border: 1px solid #222;
  box-shadow: inset 0 0 0 2px #050505;
}
.class-icon.active img {
  border-color: var(--gold);
}
.tree-orb img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 50%;
}


/* v11 tooltip overlap fix */
.wow-talent-trees,
.wow-tree,
.wow-tree-grid {
  overflow: visible;
}

.wow-tree {
  z-index: 1;
}

.wow-tree:hover {
  z-index: 50;
}

.talent-icon-slot {
  z-index: 5;
}

.talent-icon-slot:hover {
  z-index: 999;
}

.tooltip {
  z-index: 99999;
  width: 340px;
  max-width: 340px;
  white-space: normal;
}

.tree-2 .talent-icon-slot .tooltip {
  left: auto;
  right: 63px;
}

@media (max-width: 1180px) {
  .tree-2 .talent-icon-slot .tooltip {
    left: 63px;
    right: auto;
  }
}


/* v12 real code tooltip fix: hide local tooltip, use global floating tooltip */
.talent-icon-slot .tooltip {
  display: none !important;
}

.global-talent-tooltip {
  display: none;
  position: fixed;
  z-index: 2147483647;
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  pointer-events: none;
  color: #fff;
  background: rgba(4, 5, 10, .985);
  border: 1px solid #6d57b8;
  box-shadow: 0 0 0 1px #000, 0 8px 22px rgba(0,0,0,.9);
  font-family: Arial, sans-serif;
  text-align: left;
}

.global-talent-tooltip strong {
  display: block;
  color: #ffd100;
  font-size: 1rem;
  margin-bottom: 4px;
}

.global-talent-tooltip em {
  display: block;
  color: #fff;
  font-style: normal;
  margin-bottom: 8px;
}

.global-talent-tooltip span {
  display: block;
  color: #d8d8d8;
  line-height: 1.35;
  margin-bottom: 8px;
}

.global-talent-tooltip small {
  display: block;
  color: #9d9d9d;
  margin-top: 5px;
}


/* v13 class ability notes on talent calculator */
.class-change-panel {
  margin: 0 0 14px;
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    var(--panel);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 12px 30px rgba(0,0,0,.22);
}

.class-change-panel header {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  background: linear-gradient(180deg, #1f2329, #0d1014);
  border-bottom: 1px solid #4b371d;
}

.class-change-panel h2 {
  margin: 0;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .045em;
  font-size: 1.05rem;
}

.class-change-panel header span {
  color: var(--muted);
  font-size: .9rem;
}

.class-change-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.class-change-card {
  display: flex;
  gap: 15px;
  padding: 18px;
  border-right: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.class-change-card:nth-child(2n) {
  border-right: 0;
}

.class-change-card img {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  object-fit: cover;
  border: 2px solid #333;
  box-shadow: inset 0 0 0 2px #050505, 0 3px 10px rgba(0,0,0,.45);
}

.class-change-card small {
  display: block;
  color: #c39754;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  margin-bottom: 3px;
}

.class-change-card strong {
  display: block;
  color: #f2d18a;
  font-size: 1.05rem;
  margin-bottom: 5px;
}

.class-change-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: .95rem;
}

@media (max-width: 760px) {
  .class-change-grid {
    grid-template-columns: 1fr;
  }
  .class-change-card {
    border-right: 0;
  }
}


/* v14 class selector icon polish */
.class-icons {
  gap: 8px;
}

.class-icon {
  width: 50px;
  height: 50px;
  padding: 0;
  position: relative;
  background: #050607;
  border: 2px solid #2a2a2a;
  box-shadow: inset 0 0 0 2px #0a0a0a, 0 2px 7px rgba(0,0,0,.75);
}

.class-icon img {
  width: 40px !important;
  height: 40px !important;
  margin: 3px auto 0 !important;
  display: block;
  object-fit: cover;
  border: 1px solid #111;
}

.class-icon small {
  position: absolute;
  left: 50%;
  bottom: -23px;
  transform: translateX(-50%);
  color: #e8d6ac;
  font-size: .72rem;
  white-space: nowrap;
  text-shadow: 0 2px 2px #000;
}

.class-icon.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 2px #0a0a0a, 0 0 12px rgba(216,169,75,.55);
}

.class-icon.active img {
  border-color: var(--gold);
}


/* v15 Icon Gallery */
.icon-gallery-page {
  max-width: 1500px;
  padding-top: 34px;
}

.icon-gallery-toolbar {
  position: sticky;
  top: 104px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  margin-bottom: 22px;
  background: rgba(8, 11, 15, .96);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 14px 32px rgba(0,0,0,.3);
}

.icon-gallery-toolbar input {
  flex: 1;
  min-height: 46px;
  padding: 0 16px;
  color: var(--text);
  background: #080b0f;
  border: 1px solid #4b371d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

.icon-gallery-toolbar span {
  color: var(--gold);
  white-space: nowrap;
}

.icon-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
}

.icon-gallery-card {
  min-height: 132px;
  padding: 12px 8px;
  cursor: pointer;
  color: var(--muted);
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    var(--panel);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f;
  font-family: Georgia, "Times New Roman", serif;
}

.icon-gallery-card:hover {
  border-color: var(--gold);
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.18), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.08)),
    var(--panel);
}

.icon-gallery-card img {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 10px;
  object-fit: cover;
  border: 2px solid #333;
  box-shadow: inset 0 0 0 2px #050505;
}

.icon-gallery-card span {
  display: block;
  word-break: break-word;
  font-size: .78rem;
  line-height: 1.2;
}

.copy-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  padding: 12px 16px;
  color: #111;
  background: var(--gold);
  border: 1px solid #7a5524;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(12px);
  transition: .18s ease;
  pointer-events: none;
  font-weight: bold;
}

.copy-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .icon-gallery-toolbar {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }
}

/* Project Legacy v22 Homepage Restore */
.home-sections {
  padding: 28px 52px 42px;
  display: grid;
  gap: 24px;
  max-width: 1500px;
  margin: 0 auto;
}

.full-features-panel,
.latest-news-wide {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    var(--panel);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 18px 45px rgba(0,0,0,.24);
  overflow: hidden;
}

.full-features-panel > header,
.latest-news-wide > header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1f2329, #0d1014);
  border-bottom: 1px solid #4b371d;
}

.full-features-panel > header h2,
.latest-news-wide > header h2 {
  margin: 0;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1.55rem;
}

.feature-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.feature-showcase-card {
  min-height: 188px;
  display: flex;
  gap: 18px;
  padding: 26px 24px;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.09), transparent 42%),
    rgba(0,0,0,.04);
  transition: background .15s ease, transform .15s ease;
}

.feature-showcase-card:nth-child(4n) {
  border-right: 0;
}

.feature-showcase-card:hover {
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.18), transparent 48%),
    rgba(255,255,255,.025);
  transform: translateY(-1px);
}

.feature-showcase-card.spotlight {
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.22), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08));
}

.feature-showcase-card > span {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: radial-gradient(circle, #352111, #0b0d10);
  border: 1px solid #5b421e;
  border-radius: 50%;
  font-size: 1.45rem;
  box-shadow: inset 0 0 0 2px #07090c;
}

.feature-showcase-card strong {
  display: block;
  color: var(--gold);
  text-transform: uppercase;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.feature-showcase-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 1.02rem;
}

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

.news-tile {
  display: block;
  min-height: 160px;
  padding: 28px;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.08), transparent 42%),
    rgba(0,0,0,.04);
}

.news-tile:nth-child(3n) {
  border-right: 0;
}

.news-tile:hover {
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.16), transparent 45%),
    rgba(255,255,255,.025);
}

.news-tile time {
  display: block;
  color: #c39754;
  text-transform: uppercase;
  font-size: .82rem;
  margin-bottom: 8px;
}

.news-tile strong {
  display: block;
  color: #f2e2bf;
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.news-tile p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.latest-news-wide footer,
.full-features-panel footer {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.14);
  border-top: 1px solid rgba(255,255,255,.06);
}

.latest-news-wide footer a,
.full-features-panel footer a {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: bold;
  text-decoration: none;
}

@media (max-width: 1250px) {
  .feature-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-showcase-card:nth-child(2n) {
    border-right: 0;
  }

  .wide-news-grid {
    grid-template-columns: 1fr;
  }

  .news-tile {
    border-right: 0;
  }
}

@media (max-width: 700px) {
  .home-sections {
    padding: 18px;
  }

  .feature-showcase-grid {
    grid-template-columns: 1fr;
  }

  .feature-showcase-card {
    min-height: auto;
    border-right: 0;
  }
}

/* Project Legacy v23 Expandable Features */
.expandable-features-page {
  max-width: 1380px;
  padding-top: 46px;
}

.expandable-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}

.expand-card {
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.12), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    var(--panel);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 18px 45px rgba(0,0,0,.24);
  overflow: hidden;
}

.expand-head {
  width: 100%;
  min-height: 210px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  background: transparent;
  border: 0;
  font-family: Georgia, "Times New Roman", serif;
}

.expand-head span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: radial-gradient(circle, #352111, #0b0d10);
  border: 1px solid #5b421e;
  border-radius: 50%;
  font-size: 1.55rem;
  box-shadow: inset 0 0 0 2px #07090c;
}

.expand-head strong {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.45rem;
  line-height: 1.1;
}

.expand-head em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.35;
  font-size: 1.02rem;
}

.expand-card:hover {
  border-color: #7a5524;
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.19), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.09)),
    var(--panel);
}

.expand-card.open {
  border-color: #7a5524;
}

.expand-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  border-top: 1px solid transparent;
  transition: max-height .22s ease, padding .22s ease, border-color .22s ease;
}

.expand-card.open .expand-body {
  max-height: 360px;
  padding: 0 24px 26px;
  border-top-color: rgba(255,255,255,.07);
}

.expand-body p {
  margin: 20px 0 16px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.45;
}

.expand-body ul {
  margin: 0;
  padding-left: 20px;
  color: #d9c9aa;
}

.expand-body li {
  margin-bottom: 7px;
}

@media (max-width: 1150px) {
  .expandable-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .expandable-feature-grid {
    grid-template-columns: 1fr;
  }

  .expand-head {
    min-height: 170px;
  }
}

/* Project Legacy v24 Feature Content Updates */
.expand-card.open .expand-body {
  max-height: 760px;
}

.expand-body h3 {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .95rem;
  margin: 18px 0 8px;
}

.expand-body strong {
  color: #f2d18a;
}

.boss-card {
  grid-column: span 2;
}

.boss-feature-image {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  object-position: center 42%;
  margin: 20px 0 18px;
  border: 1px solid #5b421e;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 14px 30px rgba(0,0,0,.35);
}

.boss-card .expand-head {
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.20), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.12));
}

@media (max-width: 1150px) {
  .boss-card {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .boss-card {
    grid-column: span 1;
  }
}


/* v25 Guardian hero tweaks */
.boss-feature-image{
 display:block;
 width:100%;
 max-height:340px;
 object-fit:cover;
 object-position:center 28%;
 border-radius:10px;
}


/* v26 Features grid + Guardian image fixes */
.expandable-feature-grid {
  grid-auto-flow: dense;
  align-items: start;
}

.expand-card {
  min-height: 300px;
}

.expand-head {
  min-height: 300px;
}

.expand-card:not(.open) .expand-head {
  min-height: 300px;
}

.expand-card:not(.open) .expand-body {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-color: transparent !important;
}

.boss-card {
  grid-column: auto !important;
}

.boss-card.open {
  grid-column: 1 / -1 !important;
}

.boss-card.open .expand-head {
  min-height: 190px;
}

.boss-feature-image {
  max-height: 360px !important;
  object-position: center 34% !important;
  border-radius: 8px;
  margin-top: 20px;
}

/* Make expanded cards feel intentional rather than causing awkward masonry gaps */
.expand-card.open {
  min-height: auto;
}

.expand-card.open .expand-head {
  min-height: 190px;
}

@media (max-width: 1150px) {
  .boss-card.open {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 720px) {
  .expand-card,
  .expand-head,
  .expand-card:not(.open) .expand-head {
    min-height: 220px;
  }

  .boss-card.open {
    grid-column: auto !important;
  }
}


/* v27 guardian banner */
.boss-feature-image{
width:100%;
height:420px!important;
object-fit:cover;
object-position:center center!important;
border-radius:12px;
border:1px solid #7a5524;
box-shadow:0 12px 35px rgba(0,0,0,.45);
margin:22px 0;
}


/* v29 Donate page PayPal profile */
.donate-page {
  max-width: 1050px;
  padding-top: 46px;
}

.donate-hero-panel {
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.16), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    var(--panel);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 18px 45px rgba(0,0,0,.24);
  overflow: hidden;
}

.donate-brand {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 34px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.06)),
    #11161d;
  border-bottom: 1px solid #4b371d;
}

.donate-brand img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}

.donate-brand h2 {
  margin: 0 0 8px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 2rem;
}

.donate-brand p {
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.donate-copy {
  padding: 34px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.5;
}

.donate-copy ul {
  margin: 20px 0;
  padding-left: 22px;
  color: #e4d2ad;
}

.donate-copy li {
  margin-bottom: 7px;
}

.donate-note {
  color: #f2d18a;
  font-weight: bold;
}

.donate-paypal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  min-width: 245px;
  min-height: 58px;
  padding: 0 28px;
  background: #0d376b;
  border: 1px solid #6f9ed8;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: bold;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
}

.donate-paypal-button:hover {
  background: #154983;
}

.donate-small {
  margin-top: 14px;
  font-size: .92rem;
  color: #b9a98c;
}

@media (max-width: 700px) {
  .donate-brand {
    flex-direction: column;
    text-align: center;
  }
}


/* v31 Crypto donation modal */
.donate-button-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.donate-crypto-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 245px;
  min-height: 58px;
  padding: 0 28px;
  cursor: pointer;
  background: #161b22;
  border: 1px solid #7a5524;
  color: var(--gold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
}

.donate-crypto-button:hover {
  background: #202630;
}

.crypto-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.crypto-modal.open {
  display: block;
}

.crypto-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
}

.crypto-modal-card {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100vw - 36px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: 24px auto;
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.16), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    var(--panel);
  border: 1px solid #7a5524;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 25px 70px rgba(0,0,0,.7);
}

.crypto-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  border: 1px solid #7a5524;
  background: #0b0e13;
  color: var(--gold);
  font-size: 1.8rem;
  line-height: 1;
}

.crypto-modal-card > header {
  padding: 30px 76px 22px 30px;
  border-bottom: 1px solid #4b371d;
  background: linear-gradient(180deg, #1f2329, #0d1014);
}

.crypto-modal-card > header h2 {
  margin: 0 0 8px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 1.7rem;
}

.crypto-modal-card > header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.crypto-warning {
  margin: 24px 30px 0;
  padding: 14px 16px;
  color: #f2d18a;
  background: rgba(216,169,75,.08);
  border: 1px solid #4b371d;
}

.crypto-layout {
  display: grid;
  grid-template-columns: 285px 1fr;
  gap: 24px;
  padding: 30px;
}

.crypto-options {
  display: grid;
  gap: 12px;
  align-content: start;
}

.crypto-option {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-areas:
    "icon title"
    "icon network";
  gap: 2px 12px;
  align-items: center;
  min-height: 76px;
  padding: 12px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  background: #10151b;
  border: 1px solid #303845;
  font-family: Georgia, "Times New Roman", serif;
}

.crypto-option span {
  grid-area: icon;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold);
  background: radial-gradient(circle, #352111, #0b0d10);
  border: 1px solid #5b421e;
  font-weight: bold;
  font-size: 1.2rem;
}

.crypto-option strong {
  grid-area: title;
  color: var(--gold);
  font-size: 1.05rem;
}

.crypto-option em {
  grid-area: network;
  color: var(--muted);
  font-style: normal;
  font-size: .85rem;
}

.crypto-option.active,
.crypto-option:hover {
  border-color: var(--gold);
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.14), transparent 45%),
    #151a22;
}

.crypto-panel {
  display: none;
}

.crypto-panel.active {
  display: block;
}

.crypto-panel-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.crypto-panel-head > span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold);
  background: radial-gradient(circle, #352111, #0b0d10);
  border: 1px solid #5b421e;
  font-weight: bold;
  font-size: 1.55rem;
}

.crypto-panel-head h3 {
  margin: 0 0 5px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.crypto-panel-head small {
  color: #e4d2ad;
  font-size: .85rem;
}

.crypto-panel-head p {
  margin: 0;
  color: var(--muted);
}

.crypto-qr {
  display: block;
  width: 220px;
  height: 220px;
  padding: 12px;
  margin: 0 0 22px;
  background: #fff;
  border: 1px solid #7a5524;
  box-shadow: 0 12px 28px rgba(0,0,0,.38);
}

.crypto-panel label {
  display: block;
  color: #c39754;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  margin-bottom: 8px;
}

.crypto-address-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.crypto-address-row code {
  display: block;
  padding: 15px;
  color: #f2d18a;
  background: #080b0f;
  border: 1px solid #303845;
  overflow-wrap: anywhere;
  font-size: .96rem;
}

.copy-crypto-address {
  min-width: 98px;
  cursor: pointer;
  color: #111;
  background: var(--gold);
  border: 1px solid #7a5524;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width: 850px) {
  .crypto-layout {
    grid-template-columns: 1fr;
  }

  .crypto-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .crypto-address-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .crypto-options {
    grid-template-columns: 1fr;
  }

  .crypto-qr {
    width: 190px;
    height: 190px;
  }
}

/* v33 Registration page */
.register-page{max-width:860px;padding-top:46px}
.register-panel{background:radial-gradient(circle at top left,rgba(216,169,75,.16),transparent 45%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.08)),var(--panel);border:1px solid #4b371d;box-shadow:inset 0 0 0 2px #0a0c0f,0 18px 45px rgba(0,0,0,.24);overflow:hidden}
.register-panel>header{padding:32px 36px 26px;border-bottom:1px solid #4b371d;background:linear-gradient(180deg,#1f2329,#0d1014)}
.register-panel h2{margin:0 0 10px;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;font-size:2rem}
.register-panel header p{margin:0;color:var(--muted);line-height:1.45}
.register-form{padding:34px 36px 38px;display:grid;gap:20px}
.register-form label{display:grid;gap:8px;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;font-weight:bold;font-size:.86rem}
.register-form input{min-height:52px;padding:0 16px;background:#080b0f;border:1px solid #303845;color:#f2e2bf;font-size:1.05rem;font-family:Georgia,"Times New Roman",serif}
.register-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(216,169,75,.12)}
.register-note{padding:18px 20px;background:rgba(216,169,75,.08);border:1px solid #4b371d;color:var(--muted)}
.register-note strong{display:block;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.register-note p{margin:0;line-height:1.45}
.register-submit{min-height:58px;cursor:pointer;background:#8f120c;border:1px solid #d45b43;color:#fff;text-transform:uppercase;letter-spacing:.08em;font-family:Georgia,"Times New Roman",serif;font-weight:bold;font-size:1rem;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.35)}
.register-submit:hover{background:#a41911}
.register-small{margin:0;color:#b9a98c;font-size:.92rem}
.register-success{padding:36px;color:var(--muted)}
.register-success h3{margin:0 0 10px;color:var(--gold);text-transform:uppercase;letter-spacing:.06em}
@media(max-width:700px){.register-panel>header,.register-form,.register-success{padding-left:22px;padding-right:22px}}

/* v34 Register page/header fixes */
.main-nav a[href="register.php"] {
  color: var(--gold);
}

.hero-btn,
.hero-button,
.cta,
.btn-red,
.btn-blue {
  text-decoration: none;
}

.hero-btn-blue,
.btn-blue,
.hero-button.secondary,
.cta.secondary {
  background: #113866;
  border: 1px solid #6f9ed8;
  color: #fff;
}

.register-subpage .page-banner,
.register-banner {
  min-height: 260px !important;
  padding-top: 74px !important;
  padding-bottom: 54px !important;
  overflow: hidden;
}

.register-subpage .page-banner h1,
.register-banner h1 {
  font-size: clamp(3rem, 6vw, 5.8rem) !important;
  line-height: .9 !important;
  margin: 0 0 22px !important;
}

.register-subpage .page-banner .banner-copy {
  max-width: 720px;
}

.register-page {
  max-width: 860px;
  padding-top: 46px;
  padding-bottom: 70px;
}

.register-panel {
  background:
    radial-gradient(circle at top left, rgba(216,169,75,.16), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    var(--panel);
  border: 1px solid #4b371d;
  box-shadow: inset 0 0 0 2px #0a0c0f, 0 18px 45px rgba(0,0,0,.24);
  overflow: hidden;
}

.register-panel > header {
  padding: 32px 36px 26px;
  border-bottom: 1px solid #4b371d;
  background: linear-gradient(180deg, #1f2329, #0d1014);
}

.register-panel h2 {
  margin: 0 0 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 2rem;
}

.register-panel header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.register-form {
  padding: 34px 36px 38px;
  display: grid;
  gap: 20px;
}

.register-form label {
  display: grid;
  gap: 8px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: bold;
  font-size: .86rem;
}

.register-form input {
  min-height: 52px;
  padding: 0 16px;
  background: #080b0f;
  border: 1px solid #303845;
  color: #f2e2bf;
  font-size: 1.05rem;
  font-family: Georgia, "Times New Roman", serif;
}

.register-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216,169,75,.12);
}

.register-note {
  padding: 18px 20px;
  background: rgba(216,169,75,.08);
  border: 1px solid #4b371d;
  color: var(--muted);
}

.register-note strong {
  display: block;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.register-note p {
  margin: 0;
  line-height: 1.45;
}

.register-submit {
  min-height: 58px;
  cursor: pointer;
  background: #8f120c;
  border: 1px solid #d45b43;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
}

.register-submit:hover {
  background: #a41911;
}

.register-small {
  margin: 0;
  color: #b9a98c;
  font-size: .92rem;
}

.register-success {
  padding: 36px;
  color: var(--muted);
}

.register-success h3 {
  margin: 0 0 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width: 700px) {
  .register-panel > header,
  .register-form,
  .register-success {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* v35 Real registration support */
.register-error {
  margin: 30px 36px 0;
  padding: 16px 18px;
  background: rgba(143, 18, 12, .16);
  border: 1px solid #8f120c;
  color: #ffd6cf;
  font-weight: bold;
}

.register-inline-link {
  color: var(--gold);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .06em;
}


/* v37 account, forgot password, login, and dynamic news */
.account-grid {
  padding: 34px 36px 38px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.account-grid div {
  background: rgba(0,0,0,.18);
  border: 1px solid #303845;
  padding: 16px;
}

.account-grid strong,
.character-row strong,
.admin-post-row strong {
  color: var(--gold);
  display: block;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.account-grid span,
.character-row span,
.admin-post-row span {
  color: var(--muted);
}

.account-spaced {
  margin-top: 28px;
}

.account-list {
  padding: 30px 36px;
}

.character-row,
.admin-post-row {
  border-bottom: 1px solid rgba(216,169,75,.18);
  padding: 16px 0;
}

.character-row:first-child,
.admin-post-row:first-child {
  padding-top: 0;
}

.news-body {
  padding: 30px 36px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1.08rem;
}

.register-form textarea {
  padding: 16px;
  background: #080b0f;
  border: 1px solid #303845;
  color: #f2e2bf;
  font-size: 1.05rem;
  font-family: Georgia, "Times New Roman", serif;
  resize: vertical;
}

.register-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216,169,75,.12);
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
}

.checkbox-label input {
  min-height: auto !important;
  width: 18px;
  height: 18px;
}

.admin-post-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.admin-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-actions form {
  margin: 0;
}

.admin-actions button {
  cursor: pointer;
  border: 1px solid #8f120c;
  background: rgba(143,18,12,.2);
  color: #ffd6cf;
  padding: 8px 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold;
}

.hero-btn-blue,
.btn-blue,
.hero-button.secondary,
.cta.secondary {
  background: #113866;
  border: 1px solid #6f9ed8;
  color: #fff;
}

@media (max-width: 700px) {
  .account-grid {
    grid-template-columns: 1fr;
    padding-left: 22px;
    padding-right: 22px;
  }

  .account-list,
  .news-body {
    padding-left: 22px;
    padding-right: 22px;
  }

  .admin-post-row {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* v38 GM + character label polish */
.account-grid span {
  display: block;
  margin-top: 4px;
}

.register-panel header .register-inline-link {
  color: var(--gold);
}

/* v39 nav/account buttons + hero CTA fixes */
.nav-account-actions{display:inline-flex;align-items:center;gap:10px}.nav-auth-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border:1px solid rgba(216,169,75,.55);background:rgba(216,169,75,.08);color:var(--gold);text-transform:uppercase;letter-spacing:.06em;font-weight:bold;text-decoration:none}.nav-auth-primary{background:#113866;border-color:#6f9ed8;color:#fff}.hero-register-cta,.hero-btn-blue,.btn-blue,.hero-button.secondary,.cta.secondary{display:inline-flex!important;align-items:center;justify-content:center;min-height:64px;padding:0 44px!important;margin-left:18px;background:#113866!important;border:1px solid #6f9ed8!important;color:#fff!important;text-transform:uppercase;letter-spacing:.06em;font-weight:bold;text-decoration:none;box-sizing:border-box}.account-tools{padding:30px 36px;display:flex;flex-wrap:wrap;gap:14px}.account-tool-button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;background:#113866;border:1px solid #6f9ed8;color:#fff;text-transform:uppercase;letter-spacing:.06em;font-weight:bold;text-decoration:none}.news-inline-admin{margin-top:14px;display:flex;gap:14px;align-items:center}.news-inline-admin form{margin:0}.news-inline-admin button{cursor:pointer;border:1px solid #8f120c;background:rgba(143,18,12,.2);color:#ffd6cf;padding:8px 12px;font-family:Georgia,"Times New Roman",serif;font-weight:bold}.news-admin-strip{margin-bottom:28px}@media(max-width:900px){.hero-register-cta,.hero-btn-blue{margin-left:0;margin-top:14px}.nav-account-actions{width:100%;justify-content:center;padding:8px 0}}


/* v40 top nav + hero register fix */
.main-nav .nav-account-actions,
.nav-account-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
}

.main-nav .nav-auth-button,
.nav-auth-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  min-width: 96px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(216,169,75,.6) !important;
  background: rgba(216,169,75,.08) !important;
  color: #e7b84d !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.main-nav .nav-auth-primary,
.nav-auth-primary {
  background: #113866 !important;
  border-color: #6f9ed8 !important;
  color: #ffffff !important;
}

.hero .hero-register-cta,
.hero-register-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 66px !important;
  min-width: 265px !important;
  padding: 0 34px !important;
  margin: 0 0 0 22px !important;
  background: #113866 !important;
  border: 2px solid #6f9ed8 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

.hero .hero-register-cta:hover,
.hero-register-cta:hover {
  filter: brightness(1.12);
}

@media (max-width: 900px) {
  .hero .hero-register-cta,
  .hero-register-cta {
    margin-left: 0 !important;
    margin-top: 14px !important;
  }
}


/* v41 no horizontal scroll + compact account nav */
html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}

.site-header,
.main-header,
header {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.main-nav,
nav {
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

.main-nav a,
nav a {
  white-space: nowrap !important;
}

.nav-account-actions {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  padding: 0 8px !important;
}

.main-nav .nav-auth-button,
.nav-auth-button {
  min-width: 74px !important;
  height: 42px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}

.discord-button {
  min-width: 100px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

@media (max-width: 1450px) {
  .main-nav a,
  nav a {
    font-size: 14px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .main-nav .nav-auth-button,
  .nav-auth-button {
    min-width: 66px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }

  .discord-button {
    min-width: 82px !important;
  }
}

@media (max-width: 1200px) {
  .nav-account-actions {
    gap: 5px !important;
    padding: 0 4px !important;
  }

  .main-nav a,
  nav a {
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* v41 dynamic home news cards */
.latest-news-section {
  max-width: 1480px;
  margin: 42px auto;
  border: 1px solid rgba(216,169,75,.35);
  background: rgba(16, 20, 26, .96);
}

.latest-news-section .section-title {
  text-align: center;
  color: var(--gold);
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: .12em;
  padding: 20px;
  border-bottom: 1px solid rgba(216,169,75,.3);
}

.latest-news-section .news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.latest-news-section .news-card {
  padding: 30px;
  border-right: 1px solid rgba(216,169,75,.18);
  min-height: 165px;
}

.latest-news-section .news-card:last-child {
  border-right: 0;
}

.latest-news-section .news-card span {
  color: var(--gold);
  font-size: .8rem;
  text-transform: uppercase;
  font-weight: bold;
}

.latest-news-section .news-card h3 {
  color: #f2e2bf;
  margin: 12px 0;
  font-size: 1.35rem;
}

.latest-news-section .news-card p {
  color: var(--muted);
  line-height: 1.45;
}

.latest-news-section .section-footer {
  text-align: center;
  padding: 18px;
  border-top: 1px solid rgba(216,169,75,.22);
}

.latest-news-section .section-footer a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .1em;
}

@media (max-width: 900px) {
  .latest-news-section .news-grid {
    grid-template-columns: 1fr;
  }

  .latest-news-section .news-card {
    border-right: 0;
    border-bottom: 1px solid rgba(216,169,75,.18);
  }
}


/* v42 hard no-horizontal-scroll fix */
* {
  box-sizing: border-box;
}

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body > * {
  max-width: 100vw !important;
}

.site-header,
.main-header,
header {
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

.logo,
.site-logo {
  flex: 0 0 240px !important;
  max-width: 240px !important;
  overflow: hidden !important;
}

.logo img,
.site-logo img,
header img {
  max-width: 230px !important;
  height: auto !important;
}

.main-nav,
header nav,
nav {
  min-width: 0 !important;
  max-width: calc(100vw - 240px) !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
}

.main-nav a,
header nav a,
nav a {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  padding-left: clamp(6px, .75vw, 16px) !important;
  padding-right: clamp(6px, .75vw, 16px) !important;
  font-size: clamp(11px, .85vw, 16px) !important;
}

.nav-account-actions {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
  padding: 0 6px !important;
}

.nav-auth-button {
  min-width: auto !important;
  height: 38px !important;
  padding: 0 10px !important;
  font-size: clamp(11px, .8vw, 14px) !important;
}

.discord-button {
  min-width: auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

@media (max-width: 1250px) {
  .logo,
  .site-logo {
    flex-basis: 190px !important;
    max-width: 190px !important;
  }

  .logo img,
  .site-logo img,
  header img {
    max-width: 180px !important;
  }

  .main-nav,
  header nav,
  nav {
    max-width: calc(100vw - 190px) !important;
  }

  .main-nav a,
  header nav a,
  nav a {
    font-size: 11px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* v42 clean homepage dynamic news */
.news-section {
  max-width: 1480px;
  margin: 42px auto;
  border: 1px solid rgba(216,169,75,.35);
  background: rgba(16, 20, 26, .96);
}

.news-section > h2 {
  text-align: center;
  color: var(--gold);
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: .12em;
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid rgba(216,169,75,.3);
  text-transform: uppercase;
}

.news-section .news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.news-section .news-card {
  padding: 30px;
  border-right: 1px solid rgba(216,169,75,.18);
  min-height: 165px;
}

.news-section .news-card:last-child {
  border-right: 0;
}

.news-section .news-card span {
  color: var(--gold);
  font-size: .8rem;
  text-transform: uppercase;
  font-weight: bold;
}

.news-section .news-card h3 {
  color: #f2e2bf;
  margin: 12px 0;
  font-size: 1.35rem;
}

.news-section .news-card p {
  color: var(--muted);
  line-height: 1.45;
}

.news-section .feature-footer {
  text-align: center;
  padding: 18px;
  border-top: 1px solid rgba(216,169,75,.22);
}

.news-section .feature-footer a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* v42 talent import/share */
.talent-share-panel {
  max-width: 1320px;
  margin: 28px auto 60px;
  display: grid;
  grid-template-columns: auto minmax(300px, 1fr) auto auto;
  gap: 14px;
  align-items: center;
}

.talent-import-box {
  width: 100% !important;
  min-height: 48px;
  background: #080b0f !important;
  border: 1px solid #303845 !important;
  color: #f2e2bf !important;
  padding: 12px 14px !important;
  resize: vertical;
  font-family: Consolas, monospace;
}

.talent-action-button {
  cursor: pointer;
  min-height: 48px;
  padding: 0 18px;
  background: #113866;
  border: 1px solid #6f9ed8;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .05em;
}

.talent-share-status {
  color: var(--gold);
  font-weight: bold;
}

@media (max-width: 900px) {
  .news-section .news-grid {
    grid-template-columns: 1fr;
  }

  .news-section .news-card {
    border-right: 0;
    border-bottom: 1px solid rgba(216,169,75,.18);
  }

  .talent-share-panel {
    grid-template-columns: 1fr;
    padding: 0 18px;
  }
}


/* v43 compact top bar fix */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

.site-header,
.main-header,
header {
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

header {
  display: flex !important;
  align-items: stretch !important;
}

.logo,
.site-logo,
.header-logo {
  flex: 0 0 225px !important;
  width: 225px !important;
  max-width: 225px !important;
  overflow: hidden !important;
}

.logo img,
.site-logo img,
.header-logo img,
header img {
  max-width: 205px !important;
  height: auto !important;
}

.main-nav,
header nav,
nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 225px) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
}

.main-nav > a,
header nav > a,
nav > a {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 14px !important;
  letter-spacing: .045em !important;
}

.nav-account-actions {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 8px !important;
  max-width: 190px !important;
  overflow: hidden !important;
}

.nav-account-actions .nav-auth-button {
  flex: 0 0 auto !important;
  height: 40px !important;
  min-width: 78px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: 1px solid rgba(216,169,75,.55) !important;
  background: rgba(216,169,75,.08) !important;
  color: #e7b84d !important;
}

.nav-account-actions .nav-auth-primary {
  background: #113866 !important;
  border-color: #6f9ed8 !important;
  color: #fff !important;
}

/* Hide any old topbar Discord button, to keep the header fitting cleanly.
   The Discord CTA still exists on the page itself. */
header .discord-button,
.main-header .discord-button,
.site-header .discord-button {
  display: none !important;
}

@media (max-width: 1350px) {
  .logo,
  .site-logo,
  .header-logo {
    flex-basis: 185px !important;
    width: 185px !important;
    max-width: 185px !important;
  }

  .logo img,
  .site-logo img,
  .header-logo img,
  header img {
    max-width: 170px !important;
  }

  .main-nav,
  header nav,
  nav {
    max-width: calc(100vw - 185px) !important;
  }

  .main-nav > a,
  header nav > a,
  nav > a {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 12px !important;
    letter-spacing: .025em !important;
  }

  .nav-account-actions {
    gap: 4px !important;
    padding: 0 5px !important;
    max-width: 155px !important;
  }

  .nav-account-actions .nav-auth-button {
    min-width: 64px !important;
    height: 36px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
}


/* v44 final top bar layout reset */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}

header,
.site-header,
.main-header {
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 92px !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

/* Fix the huge blank space: logo block is only as wide as the logo. */
header .logo,
header .site-logo,
header .header-logo,
.site-header .logo,
.main-header .logo {
  flex: 0 0 255px !important;
  width: 255px !important;
  max-width: 255px !important;
  min-width: 255px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

header .logo img,
header .site-logo img,
header .header-logo img,
.site-header .logo img,
.main-header .logo img,
header img {
  max-width: 220px !important;
  max-height: 82px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Nav takes remaining space and shrinks its text/buttons instead of overflowing. */
header nav,
.main-nav,
.site-nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 255px) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
}

header nav > a,
.main-nav > a,
.site-nav > a {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: clamp(7px, .65vw, 14px) !important;
  padding-right: clamp(7px, .65vw, 14px) !important;
  font-size: clamp(11px, .78vw, 15px) !important;
  letter-spacing: .035em !important;
}

/* Account/Login/Register compact and always inside the nav. */
.nav-account-actions {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 8px !important;
  max-width: 178px !important;
  overflow: hidden !important;
}

.nav-account-actions .nav-auth-button {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-width: 68px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(216,169,75,.55) !important;
  background: rgba(216,169,75,.08) !important;
  color: #e7b84d !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.nav-account-actions .nav-auth-primary {
  min-width: 78px !important;
  background: #113866 !important;
  border-color: #6f9ed8 !important;
  color: #fff !important;
}

/* No topbar Discord button. The big Join Discord button remains on home. */
header .discord-button,
.site-header .discord-button,
.main-header .discord-button {
  display: none !important;
}

/* Prevent old oversized header rules from creating a phantom horizontal page. */
body > *,
main,
section {
  max-width: 100vw;
}

/* Medium screens: compress logo and nav more. */
@media (max-width: 1400px) {
  header .logo,
  header .site-logo,
  header .header-logo,
  .site-header .logo,
  .main-header .logo {
    flex-basis: 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
  }

  header .logo img,
  header .site-logo img,
  header .header-logo img,
  .site-header .logo img,
  .main-header .logo img,
  header img {
    max-width: 190px !important;
  }

  header nav,
  .main-nav,
  .site-nav {
    max-width: calc(100vw - 220px) !important;
  }

  header nav > a,
  .main-nav > a,
  .site-nav > a {
    font-size: 11px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    letter-spacing: .02em !important;
  }

  .nav-account-actions {
    gap: 4px !important;
    padding: 0 5px !important;
    max-width: 145px !important;
  }

  .nav-account-actions .nav-auth-button {
    min-width: 56px !important;
    height: 34px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  .nav-account-actions .nav-auth-primary {
    min-width: 66px !important;
  }
}


/* v45 FINAL shared PHP nav: no .html links, no overlap */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}

.site-header {
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 86px !important;
  height: 86px !important;
  display: flex !important;
  align-items: stretch !important;
  background: #080c12 !important;
  border-bottom: 1px solid rgba(216,169,75,.35) !important;
  overflow: hidden !important;
  position: relative;
  z-index: 50;
}

.site-logo {
  flex: 0 0 245px !important;
  width: 245px !important;
  max-width: 245px !important;
  min-width: 245px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 16px !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

.site-logo img {
  max-width: 210px !important;
  max-height: 74px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.main-nav {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 245px) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
}

.main-nav > a {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  height: 86px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding: 0 clamp(7px, .62vw, 15px) !important;
  border-left: 1px solid rgba(255,255,255,.06) !important;
  color: #e7c16c !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  font-size: clamp(11px, .78vw, 15px) !important;
  letter-spacing: .035em !important;
  font-weight: 900 !important;
}

.nav-account-actions {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border-left: 1px solid rgba(255,255,255,.06) !important;
  max-width: 180px !important;
  overflow: hidden !important;
}

.nav-auth-button {
  height: 38px !important;
  min-width: 66px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  border: 1px solid rgba(216,169,75,.6) !important;
  background: rgba(216,169,75,.08) !important;
  color: #e7c16c !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.nav-auth-primary {
  min-width: 76px !important;
  background: #123d70 !important;
  border-color: #75a5dc !important;
  color: #fff !important;
}

/* Ensure any old discord topbar button is hidden, only page CTA remains */
.site-header .discord-button,
.main-header .discord-button,
header .discord-button {
  display: none !important;
}

@media (max-width: 1360px) {
  .site-logo {
    flex-basis: 210px !important;
    width: 210px !important;
    max-width: 210px !important;
    min-width: 210px !important;
  }

  .site-logo img {
    max-width: 180px !important;
  }

  .main-nav {
    max-width: calc(100vw - 210px) !important;
  }

  .main-nav > a {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 11px !important;
    letter-spacing: .015em !important;
  }

  .nav-account-actions {
    max-width: 148px !important;
    gap: 4px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .nav-auth-button {
    min-width: 55px !important;
    height: 34px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  .nav-auth-primary {
    min-width: 66px !important;
  }
}


/* v46 CLEAN SINGLE TOPBAR - ignores old broken header rules */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}

.pl-topbar {
  width: 100% !important;
  max-width: 100vw !important;
  height: 96px !important;
  min-height: 96px !important;
  display: grid !important;
  grid-template-columns: 285px minmax(0, 1fr) !important;
  align-items: stretch !important;
  background: #070b10 !important;
  border-bottom: 1px solid rgba(216,169,75,.42) !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 100 !important;
}

.pl-topbar-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 285px !important;
  height: 96px !important;
  padding: 6px 18px !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

.pl-topbar-logo img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 235px !important;
  max-height: 84px !important;
  object-fit: contain !important;
}

.pl-topbar-nav {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 96px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
}

.pl-topbar-nav > a {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding: 0 clamp(8px, .72vw, 17px) !important;
  border-left: 1px solid rgba(255,255,255,.07) !important;
  color: #e9c46d !important;
  background: transparent !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  font-size: clamp(12px, .86vw, 16px) !important;
  letter-spacing: .035em !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.pl-topbar-nav > a:hover {
  background: rgba(216,169,75,.08) !important;
}

.pl-topbar-nav > .pl-topbar-auth {
  align-self: center !important;
  height: 42px !important;
  margin: 0 0 0 8px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(216,169,75,.65) !important;
  background: rgba(216,169,75,.08) !important;
  color: #e9c46d !important;
  font-size: 12px !important;
  min-width: 78px !important;
}

.pl-topbar-nav > .pl-topbar-auth-primary {
  background: #123d70 !important;
  border-color: #75a5dc !important;
  color: #fff !important;
  margin-right: 14px !important;
}

/* kill all old header rules/buttons that were causing duplicated/overlapping nav */
header:not(.pl-topbar) {
  display: none !important;
}

.site-header:not(.pl-topbar),
.main-header:not(.pl-topbar) {
  display: none !important;
}

.discord-button {
  /* this only hides topbar discord if any old one survived; home CTA uses different styling */
}

@media (max-width: 1450px) {
  .pl-topbar {
    grid-template-columns: 245px minmax(0, 1fr) !important;
  }

  .pl-topbar-logo {
    width: 245px !important;
  }

  .pl-topbar-logo img {
    max-width: 210px !important;
    max-height: 78px !important;
  }

  .pl-topbar-nav > a {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 12px !important;
    letter-spacing: .015em !important;
  }

  .pl-topbar-nav > .pl-topbar-auth {
    min-width: 64px !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    margin-left: 5px !important;
  }

  .pl-topbar-nav > .pl-topbar-auth-primary {
    min-width: 74px !important;
    margin-right: 8px !important;
  }
}

@media (max-width: 1150px) {
  .pl-topbar {
    grid-template-columns: 205px minmax(0, 1fr) !important;
  }

  .pl-topbar-logo {
    width: 205px !important;
  }

  .pl-topbar-logo img {
    max-width: 175px !important;
  }

  .pl-topbar-nav > a {
    font-size: 10px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}


/* v47 topbar polish */
.pl-topbar {
  height: 102px !important;
  min-height: 102px !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  background: #070b10 !important;
}

.pl-topbar-logo {
  width: 300px !important;
  height: 102px !important;
  padding: 8px 22px !important;
}

.pl-topbar-logo img {
  max-width: 255px !important;
  max-height: 90px !important;
}

.pl-topbar-nav {
  height: 102px !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

.pl-topbar-nav > a {
  height: 102px !important;
  flex: 1 1 auto !important;
  padding: 0 8px !important;
  font-size: clamp(13px, .92vw, 17px) !important;
  letter-spacing: .04em !important;
}

.pl-topbar-nav > .pl-topbar-auth {
  flex: 0 0 auto !important;
  align-self: center !important;
  height: 48px !important;
  min-width: 94px !important;
  margin-left: 10px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}

.pl-topbar-nav > .pl-topbar-auth-primary {
  min-width: 108px !important;
  margin-right: 18px !important;
}

@media (max-width: 1450px) {
  .pl-topbar {
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }

  .pl-topbar-logo {
    width: 260px !important;
  }

  .pl-topbar-logo img {
    max-width: 225px !important;
  }

  .pl-topbar-nav > a {
    font-size: 12px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .pl-topbar-nav > .pl-topbar-auth {
    min-width: 76px !important;
    height: 40px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    margin-left: 5px !important;
  }

  .pl-topbar-nav > .pl-topbar-auth-primary {
    min-width: 88px !important;
    margin-right: 8px !important;
  }
}

/* Hide hero register CTA once logged in by PHP, but keep layout clean */
.hero-register-cta {
  vertical-align: middle !important;
}

/* remove old tacked-on talent panel if cached anywhere */
.talent-share-panel {
  display: none !important;
}

#originalTalentImport {
  background: #080b0f !important;
  border: 1px solid #303845 !important;
  color: #f2e2bf !important;
  padding: 12px 14px !important;
  min-height: 44px !important;
  font-family: Consolas, monospace !important;
}

.talent-small-button {
  cursor: pointer;
  min-height: 44px;
  margin-left: 10px;
  padding: 0 16px;
  background: #113866;
  border: 1px solid #6f9ed8;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .05em;
}

.talent-share-status {
  margin-left: 10px;
  color: var(--gold);
  font-weight: bold;
}

.account-tool-danger,
.delete-submit {
  background: #8f120c !important;
  border-color: #d16d61 !important;
  color: #fff !important;
}
.delete-warning {
  margin: 28px 36px !important;
}


/* v53 delete-account + remove homepage news */
.account-tool-danger,
.delete-submit {
  background: #8f120c !important;
  border-color: #d16d61 !important;
  color: #fff !important;
}

.delete-warning {
  margin: 28px 36px !important;
}


/* v54 footer cleanup + Open Beta countdown */
.site-footer a[href*="terms"],
.site-footer a[href*="privacy"],
.site-footer a[href*="youtube"],
.site-footer a[href*="mail"],
footer a[href*="terms"],
footer a[href*="privacy"],
footer a[href*="youtube"],
footer a[href*="mail"] {
  display: none !important;
}

.open-beta-countdown {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  vertical-align: top;
  margin-left: 34px;
  min-width: 360px;
  max-width: 440px;
  padding: 18px 24px;
  border: 1px solid rgba(216, 169, 75, .55);
  background: rgba(8, 12, 18, .78);
  box-shadow: 0 0 28px rgba(0,0,0,.35);
}

.countdown-kicker {
  color: #e7b84d;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 18px;
  margin-bottom: 6px;
}

.countdown-local-label {
  color: #bca56f;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 11px;
  margin-bottom: 4px;
}

.countdown-local-time {
  color: #f2e2bf;
  font-size: 16px;
  margin-bottom: 14px;
}

.countdown-timer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.countdown-timer span {
  min-width: 72px;
  padding: 10px 12px;
  border: 1px solid rgba(111, 158, 216, .55);
  background: rgba(17, 56, 102, .72);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  line-height: 1;
}

.countdown-timer small {
  display: block;
  margin-top: 6px;
  color: #e7b84d;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 1100px) {
  .open-beta-countdown {
    display: flex;
    margin: 22px 0 0 0;
    max-width: 520px;
  }
}


/* v55 hero countdown: large panel to the right of the CTA buttons */
.hero .hero-actions,
.hero-actions,
.hero-cta,
.hero-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 22px 34px !important;
  max-width: 1120px !important;
}

.hero .hero-actions .open-beta-countdown,
.hero-actions .open-beta-countdown,
.hero-cta .open-beta-countdown,
.hero-buttons .open-beta-countdown {
  flex: 1 1 520px !important;
  min-width: 460px !important;
  max-width: 680px !important;
  margin: 0 0 0 18px !important;
}

.open-beta-countdown {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 150px !important;
  padding: 24px 30px !important;
  border: 1px solid rgba(216, 169, 75, .65) !important;
  background:
    linear-gradient(135deg, rgba(37, 31, 22, .88), rgba(9, 14, 21, .9)) !important;
  box-shadow: inset 0 0 32px rgba(216,169,75,.06), 0 0 32px rgba(0,0,0,.35) !important;
}

.countdown-kicker {
  color: #e7b84d !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.countdown-local-label {
  color: #bca56f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}

.countdown-local-time {
  color: #f2e2bf !important;
  font-size: 18px !important;
  margin-bottom: 16px !important;
}

.countdown-timer {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(74px, 1fr)) !important;
  gap: 10px !important;
}

.countdown-timer span {
  display: block !important;
  min-width: 0 !important;
  padding: 12px 10px !important;
  border: 1px solid rgba(111, 158, 216, .65) !important;
  background: rgba(17, 56, 102, .76) !important;
  color: #fff !important;
  text-align: center !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.countdown-timer small {
  display: block !important;
  margin-top: 7px !important;
  color: #e7b84d !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

@media (max-width: 1100px) {
  .hero .hero-actions .open-beta-countdown,
  .hero-actions .open-beta-countdown,
  .hero-cta .open-beta-countdown,
  .hero-buttons .open-beta-countdown,
  .open-beta-countdown {
    flex-basis: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 8px 0 0 0 !important;
  }
}

/* v55 feature card plus/minus indicators */
.feature-card {
  position: relative !important;
  cursor: pointer;
}

.feature-toggle-indicator {
  position: absolute;
  top: 24px;
  right: 26px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(216, 169, 75, .65);
  border-radius: 50%;
  background: rgba(6, 9, 14, .78);
  color: #e7b84d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(0,0,0,.25);
  transition: transform .18s ease, background .18s ease, color .18s ease;
  pointer-events: none;
}

.feature-card:hover .feature-toggle-indicator {
  transform: scale(1.06);
  background: rgba(216, 169, 75, .12);
}

.feature-card.open .feature-toggle-indicator,
.feature-card.active .feature-toggle-indicator,
.feature-card.expanded .feature-toggle-indicator,
.feature-card[aria-expanded="true"] .feature-toggle-indicator {
  color: #fff;
  background: rgba(143, 18, 12, .55);
}


/* v56: countdown beside buttons, filling the empty right side */
.hero-countdown-layout {
  display: grid !important;
  grid-template-columns: minmax(390px, 470px) minmax(520px, 1fr) !important;
  align-items: stretch !important;
  gap: 34px !important;
  max-width: 1180px !important;
  width: min(1180px, calc(100vw - 120px)) !important;
  margin-top: 24px !important;
}

.hero-button-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  align-items: flex-start !important;
}

.hero-button-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 22px !important;
  align-items: center !important;
}

.hero-discord-row {
  margin-top: 0 !important;
}

.hero-countdown-layout .open-beta-countdown {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

.open-beta-countdown {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 170px !important;
  padding: 28px 34px !important;
  border: 1px solid rgba(216, 169, 75, .7) !important;
  background: linear-gradient(135deg, rgba(37, 31, 22, .88), rgba(9, 14, 21, .92)) !important;
  box-shadow: inset 0 0 34px rgba(216,169,75,.07), 0 0 32px rgba(0,0,0,.35) !important;
}

.countdown-kicker {
  color: #e7b84d !important;
  font-size: 26px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.countdown-local-label {
  color: #bca56f !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 5px !important;
}

.countdown-local-time {
  color: #f2e2bf !important;
  font-size: 18px !important;
  margin-bottom: 18px !important;
}

.countdown-timer {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(72px, 1fr)) !important;
  gap: 12px !important;
}

.countdown-timer span {
  display: block !important;
  padding: 13px 10px !important;
  border: 1px solid rgba(111, 158, 216, .65) !important;
  background: rgba(17, 56, 102, .76) !important;
  color: #fff !important;
  text-align: center !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.countdown-timer small {
  display: block !important;
  margin-top: 7px !important;
  color: #e7b84d !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

@media (max-width: 1150px) {
  .hero-countdown-layout {
    grid-template-columns: 1fr !important;
    width: min(760px, calc(100vw - 60px)) !important;
  }
  .hero-countdown-layout .open-beta-countdown {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* v56: feature card plus/minus indicators, robust against unknown card class names */
.feature-card,
.feature-card-plus-ready,
.feature-tile,
.feature-panel,
.features-grid > article,
.features-grid > div,
.feature-grid > article,
.feature-grid > div {
  position: relative !important;
  cursor: pointer;
}

.feature-toggle-indicator {
  position: absolute !important;
  top: 24px !important;
  right: 26px !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(216, 169, 75, .7) !important;
  border-radius: 50% !important;
  background: rgba(6, 9, 14, .82) !important;
  color: #e7b84d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 18px rgba(0,0,0,.28) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

.feature-card:hover .feature-toggle-indicator,
.feature-card-plus-ready:hover .feature-toggle-indicator,
.feature-tile:hover .feature-toggle-indicator,
.feature-panel:hover .feature-toggle-indicator {
  background: rgba(216, 169, 75, .14) !important;
}

.feature-card.open .feature-toggle-indicator,
.feature-card.active .feature-toggle-indicator,
.feature-card.expanded .feature-toggle-indicator,
.feature-card.is-open .feature-toggle-indicator,
.feature-card[aria-expanded="true"] .feature-toggle-indicator,
.feature-card-plus-ready.open .feature-toggle-indicator,
.feature-card-plus-ready.active .feature-toggle-indicator,
.feature-card-plus-ready.expanded .feature-toggle-indicator,
.feature-card-plus-ready.is-open .feature-toggle-indicator,
.feature-card-plus-ready[aria-expanded="true"] .feature-toggle-indicator {
  color: #fff !important;
  background: rgba(143, 18, 12, .62) !important;
}


/* v57 — FINAL hero countdown placement: actual two-column hero layout */
.hero-content-wide {
  max-width: none !important;
  width: 100% !important;
  padding: 96px 86px 70px 78px !important;
}

.hero-main-layout {
  display: grid !important;
  grid-template-columns: minmax(560px, 720px) minmax(480px, 650px) !important;
  gap: 54px !important;
  align-items: end !important;
  width: 100% !important;
}

.hero-left-col {
  min-width: 0 !important;
}

.hero-left-col .hero-buttons {
  max-width: 620px !important;
}

.hero-main-layout .open-beta-countdown {
  align-self: end !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0 8px 0 !important;
  min-height: 220px !important;
  padding: 34px 36px !important;
  border: 1px solid rgba(216, 169, 75, .72) !important;
  background:
    radial-gradient(circle at top right, rgba(216,169,75,.18), transparent 42%),
    linear-gradient(135deg, rgba(38, 31, 22, .92), rgba(8, 12, 18, .94)) !important;
  box-shadow: inset 0 0 36px rgba(216,169,75,.06), 0 18px 42px rgba(0,0,0,.35) !important;
}

.hero-main-layout .countdown-kicker {
  color: #e7b84d !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.hero-main-layout .countdown-local-label {
  color: #bca56f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.hero-main-layout .countdown-local-time {
  color: #f2e2bf !important;
  font-size: 20px !important;
  margin-bottom: 22px !important;
}

.hero-main-layout .countdown-timer {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(78px, 1fr)) !important;
  gap: 13px !important;
}

.hero-main-layout .countdown-timer span {
  display: block !important;
  padding: 16px 10px !important;
  border: 1px solid rgba(111, 158, 216, .70) !important;
  background: rgba(17, 56, 102, .80) !important;
  color: #fff !important;
  text-align: center !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.hero-main-layout .countdown-timer small {
  display: block !important;
  margin-top: 8px !important;
  color: #e7b84d !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

@media (max-width: 1280px) {
  .hero-main-layout {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    max-width: 760px !important;
  }

  .hero-main-layout .open-beta-countdown {
    max-width: 720px !important;
  }
}

@media (max-width: 760px) {
  .hero-content-wide {
    padding: 76px 28px 60px !important;
  }
}

/* v57 — actual expandable feature card +/- indicators */
.expand-card {
  position: relative !important;
}

.expand-head {
  position: relative !important;
  padding-right: 82px !important;
}

.expand-toggle {
  position: absolute !important;
  top: 28px !important;
  right: 28px !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(216, 169, 75, .75) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #352111, #0b0d10) !important;
  color: #e7b84d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 2px #07090c, 0 0 18px rgba(0,0,0,.35) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.expand-card.open .expand-toggle {
  content: "−" !important;
  color: #fff !important;
  background: radial-gradient(circle, #7e1a13, #170606) !important;
}


/* v58: force Open Beta countdown into the empty right side of the hero */
.hero,
.hero-section,
.home-hero {
  position: relative !important;
}

.hero .open-beta-countdown,
.hero-section .open-beta-countdown,
.home-hero .open-beta-countdown,
.open-beta-countdown {
  position: absolute !important;
  left: 48% !important;
  right: 7% !important;
  top: 430px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  z-index: 3 !important;
  min-height: 220px !important;
  padding: 34px 38px !important;
  border: 1px solid rgba(216, 169, 75, .72) !important;
  background:
    radial-gradient(circle at top right, rgba(216,169,75,.18), transparent 42%),
    linear-gradient(135deg, rgba(38, 31, 22, .92), rgba(8, 12, 18, .94)) !important;
  box-shadow: inset 0 0 36px rgba(216,169,75,.06), 0 18px 42px rgba(0,0,0,.35) !important;
}

.hero .countdown-kicker,
.open-beta-countdown .countdown-kicker {
  font-size: 30px !important;
}

.hero .countdown-local-time,
.open-beta-countdown .countdown-local-time {
  font-size: 20px !important;
}

.hero .countdown-timer,
.open-beta-countdown .countdown-timer {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(80px, 1fr)) !important;
  gap: 14px !important;
}

.hero .countdown-timer span,
.open-beta-countdown .countdown-timer span {
  font-size: 34px !important;
  padding: 16px 10px !important;
}

@media (max-width: 1200px) {
  .hero .open-beta-countdown,
  .hero-section .open-beta-countdown,
  .home-hero .open-beta-countdown,
  .open-beta-countdown {
    position: static !important;
    margin: 26px 0 0 0 !important;
    max-width: 720px !important;
  }
}

/* v58: Code of Conduct page */
.conduct-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 40px 96px;
}

.conduct-panel {
  border: 1px solid rgba(216, 169, 75, .45);
  background: linear-gradient(135deg, rgba(35, 30, 23, .88), rgba(12, 17, 24, .94));
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
  padding: 42px 48px;
}

.conduct-panel h2 {
  color: #e7b84d;
  font-size: 34px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.conduct-panel h3 {
  color: #e7b84d;
  font-size: 22px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 34px 0 12px;
}

.conduct-panel p,
.conduct-panel li {
  color: #f2e2bf;
  font-size: 18px;
  line-height: 1.55;
}

.conduct-panel ul {
  margin: 10px 0 0 24px;
  padding: 0;
}

.conduct-warning {
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px solid rgba(143, 18, 12, .8);
  background: rgba(143, 18, 12, .18);
  color: #fff;
  font-weight: 700;
}


/* v59: Countdown placed in the circled empty hero area */
.hero,
.hero-section,
.home-hero,
section.hero {
  position: relative !important;
  min-height: 790px !important;
  overflow: hidden !important;
}

.hero .open-beta-countdown,
section.hero .open-beta-countdown,
.home-hero .open-beta-countdown {
  position: absolute !important;
  left: 46% !important;
  right: 8% !important;
  top: 365px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  z-index: 6 !important;
  min-height: 235px !important;
  padding: 36px 42px !important;
  border: 1px solid rgba(216, 169, 75, .76) !important;
  background:
    radial-gradient(circle at top right, rgba(216,169,75,.20), transparent 44%),
    linear-gradient(135deg, rgba(38, 31, 22, .92), rgba(8, 12, 18, .95)) !important;
  box-shadow: inset 0 0 36px rgba(216,169,75,.07), 0 20px 46px rgba(0,0,0,.38) !important;
}

.open-beta-countdown .countdown-kicker {
  color: #e7b84d !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.open-beta-countdown .countdown-local-label {
  color: #bca56f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.open-beta-countdown .countdown-local-time {
  color: #f2e2bf !important;
  font-size: 20px !important;
  margin-bottom: 24px !important;
}

.open-beta-countdown .countdown-timer {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(80px, 1fr)) !important;
  gap: 14px !important;
}

.open-beta-countdown .countdown-timer span {
  display: block !important;
  padding: 16px 10px !important;
  border: 1px solid rgba(111, 158, 216, .72) !important;
  background: rgba(17, 56, 102, .82) !important;
  color: #fff !important;
  text-align: center !important;
  line-height: 1 !important;
}

.open-beta-countdown .countdown-timer b {
  display: block !important;
  font-size: 38px !important;
  font-weight: 900 !important;
}

.open-beta-countdown .countdown-timer small {
  display: block !important;
  margin-top: 8px !important;
  color: #e7b84d !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

@media (max-width: 1200px) {
  .hero .open-beta-countdown,
  section.hero .open-beta-countdown,
  .home-hero .open-beta-countdown {
    position: static !important;
    max-width: 720px !important;
    margin: 28px 0 0 0 !important;
  }

  .hero,
  .hero-section,
  .home-hero,
  section.hero {
    min-height: auto !important;
    overflow: visible !important;
  }
}

/* v59: Code of Conduct polished page */
.conduct-page {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 72px 40px 96px !important;
}

.conduct-panel {
  border: 1px solid rgba(216, 169, 75, .48) !important;
  background: linear-gradient(135deg, rgba(35, 30, 23, .9), rgba(12, 17, 24, .96)) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.30) !important;
  padding: 46px 50px !important;
}

.conduct-intro h2,
.conduct-panel h2 {
  color: #e7b84d !important;
  font-size: 38px !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  margin: 0 0 18px !important;
}

.conduct-intro p,
.conduct-panel p,
.conduct-panel li {
  color: #f2e2bf !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}

.conduct-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
  margin-top: 34px !important;
}

.conduct-rule-card {
  border: 1px solid rgba(216, 169, 75, .32) !important;
  background: rgba(8, 12, 18, .62) !important;
  padding: 26px 28px !important;
}

.conduct-rule-card h3 {
  color: #e7b84d !important;
  font-size: 22px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  margin: 0 0 14px !important;
}

.conduct-rule-card ul {
  margin: 12px 0 0 22px !important;
  padding: 0 !important;
}

.conduct-warning {
  margin-top: 28px !important;
  padding: 20px 24px !important;
  border: 1px solid rgba(143, 18, 12, .85) !important;
  background: rgba(143, 18, 12, .20) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
}

@media (max-width: 900px) {
  .conduct-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v59: Make footer Code of Conduct an obvious real link */
.site-footer a[href="code-of-conduct.php"],
footer a[href="code-of-conduct.php"] {
  color: #bca56f !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.site-footer a[href="code-of-conduct.php"]:hover,
footer a[href="code-of-conduct.php"]:hover {
  color: #e7b84d !important;
}

/* v59: Plus/minus indicators on expandable features */
.expand-card,
.feature-card,
.feature-tile,
.feature-panel,
.feature-plus-ready {
  position: relative !important;
}

.expand-head,
.feature-plus-ready h2,
.feature-plus-ready h3 {
  position: relative !important;
}

.expand-toggle,
.feature-toggle-indicator {
  position: absolute !important;
  top: 24px !important;
  right: 26px !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(216, 169, 75, .76) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #352111, #0b0d10) !important;
  color: #e7b84d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 2px #07090c, 0 0 18px rgba(0,0,0,.35) !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.expand-card.open .expand-toggle,
.feature-plus-ready.open .expand-toggle,
.feature-plus-ready.active .expand-toggle,
.feature-plus-ready.expanded .expand-toggle {
  color: #fff !important;
  background: radial-gradient(circle, #7e1a13, #170606) !important;
}


/* v62: restore proper FAQ card styling */
.faq-list {
  max-width: 1320px !important;
  width: calc(100% - 160px) !important;
  margin: 70px auto 110px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}

.faq-item {
  display: block !important;
  border: 1px solid rgba(216,169,75,.45) !important;
  background: linear-gradient(135deg, rgba(35, 30, 23, .86), rgba(12, 17, 24, .96)) !important;
  box-shadow: inset 0 0 28px rgba(216,169,75,.035), 0 12px 28px rgba(0,0,0,.25) !important;
  padding: 0 !important;
}

.faq-item summary {
  list-style: none !important;
  cursor: pointer !important;
  padding: 30px 36px !important;
  color: #e7b84d !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
}

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

.faq-item summary::before {
  content: "▸" !important;
  display: inline-block !important;
  margin-right: 12px !important;
  color: #e7b84d !important;
  transform: translateY(-1px) !important;
}

.faq-item[open] summary::before {
  content: "▾" !important;
}

.faq-answer {
  border-top: 1px solid rgba(216,169,75,.22) !important;
  padding: 0 36px 30px 65px !important;
}

.faq-answer p {
  margin: 0 !important;
  color: #f2e2bf !important;
  font-size: 21px !important;
  line-height: 1.45 !important;
}

.faq-answer a {
  color: #e7b84d !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.faq-answer a:hover {
  text-decoration: underline !important;
}

@media (max-width: 900px) {
  .faq-list {
    width: calc(100% - 40px) !important;
    margin-top: 40px !important;
  }
  .faq-item summary {
    font-size: 22px !important;
    padding: 24px 26px !important;
  }
  .faq-answer {
    padding: 0 26px 26px 52px !important;
  }
  .faq-answer p {
    font-size: 18px !important;
  }
}


/* v64 footer: Code of Conduct + Discord on every page */
.site-footer {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 28px 54px !important;
  border-top: 1px solid rgba(216,169,75,.35) !important;
  background: #070b10 !important;
  color: #bca56f !important;
}

.site-footer a {
  color: #bca56f !important;
  text-decoration: none !important;
  letter-spacing: .04em !important;
  font-weight: 700 !important;
}

.site-footer a:hover {
  color: #e7b84d !important;
}

.site-footer .footer-right {
  justify-self: end !important;
}

.site-footer .footer-copy {
  text-align: center !important;
}



/* v68 launch switch/news admin */
.setting-status {
  margin: 20px 0;
  padding: 18px 20px;
  border: 1px solid rgba(216,169,75,.45);
  color: #f2e2bf;
  background: rgba(8,12,18,.65);
  font-size: 20px;
}
.setting-status.is-on strong { color: #76ff6a; }
.setting-status.is-off strong { color: #e7b84d; }
.setting-toggle {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 20px 0 !important;
  color: #f2e2bf !important;
  font-weight: 700 !important;
}
.setting-toggle input {
  width: 22px !important;
  height: 22px !important;
}


/* v76 mobile friendly pass */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

@media (max-width: 1100px) {
  .hero .open-beta-countdown,
  section.hero .open-beta-countdown,
  .home-hero .open-beta-countdown,
  .open-beta-countdown {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 28px 22px 0 !important;
  }

  .hero,
  .hero-section,
  .home-hero,
  section.hero {
    min-height: auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 900px) {
  body { font-size: 16px; }

  .site-header,
  .topbar,
  .main-nav,
  .nav-wrap,
  header {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
  }

  .site-header,
  .topbar,
  .main-nav {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .site-header a,
  .topbar a,
  .main-nav a,
  nav a {
    font-size: 12px !important;
    padding: 8px 9px !important;
    white-space: nowrap;
  }

  .brand,
  .logo,
  .site-logo { max-width: 190px !important; }

  .brand img,
  .logo img,
  .site-logo img {
    max-height: 58px !important;
    width: auto !important;
  }

  .hero,
  .home-hero,
  section.hero,
  .page-banner {
    padding: 48px 18px !important;
    min-height: auto !important;
  }

  .hero h1,
  .page-banner h1 {
    font-size: clamp(34px, 11vw, 56px) !important;
    line-height: 0.95 !important;
  }

  .hero p,
  .banner-copy,
  .page-banner p {
    font-size: 17px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }

  .hero-buttons,
  .hero-actions,
  .cta-row,
  .button-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .btn,
  .button,
  .download-button,
  .register-submit,
  .account-tool-button,
  .hero-buttons a,
  .hero-actions a {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .content-shell,
  .register-page,
  .conduct-page,
  .faq-list,
  .wow-talent-page {
    width: auto !important;
    max-width: none !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .download-box,
  .steps-box,
  .register-panel,
  .conduct-panel,
  .news-card,
  .faq-item,
  .account-panel,
  .donate-box {
    padding: 24px 20px !important;
    box-sizing: border-box !important;
  }

  .download-box h2,
  .steps-box h2,
  .register-panel h2,
  .conduct-panel h2,
  .news-card h2 {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  .steps-box ol,
  .conduct-panel ul { padding-left: 22px !important; }

  .register-form label,
  .register-form input,
  .register-form textarea,
  .register-form select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .open-beta-countdown {
    padding: 24px 18px !important;
    min-height: auto !important;
  }

  .open-beta-countdown .countdown-kicker { font-size: 24px !important; }
  .open-beta-countdown .countdown-local-time { font-size: 16px !important; }

  .open-beta-countdown .countdown-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .open-beta-countdown .countdown-timer span {
    padding: 14px 8px !important;
    font-size: 28px !important;
  }

  .open-beta-countdown .countdown-timer b {
    font-size: 28px !important;
  }

  .features-grid,
  .feature-grid,
  .conduct-grid,
  .class-change-grid,
  .news-list,
  .account-grid,
  .donate-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .feature-card,
  .feature-tile,
  .feature-panel,
  .expand-card { min-width: 0 !important; }

  .expand-head { padding-right: 64px !important; }

  .expand-toggle,
  .feature-toggle-indicator {
    top: 18px !important;
    right: 18px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 26px !important;
  }

  .faq-item summary {
    font-size: 20px !important;
    padding: 22px 22px !important;
  }

  .faq-answer { padding: 0 22px 24px 44px !important; }
  .faq-answer p { font-size: 17px !important; }

  .site-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: center !important;
    padding: 24px 18px !important;
  }

  .site-footer .footer-right { justify-self: center !important; }
  .site-footer .footer-copy {
    order: 3;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .wow-talent-trees {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px !important;
  }

  .wow-tree { min-width: 320px !important; }

  .class-icons {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    padding-bottom: 10px !important;
  }

  .class-icon { flex: 0 0 auto !important; }

  .talent-title-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    text-align: center !important;
  }
}

@media (max-width: 520px) {
  .site-header a,
  .topbar a,
  .main-nav a,
  nav a {
    font-size: 11px !important;
    padding: 7px 7px !important;
  }

  .hero,
  .home-hero,
  section.hero,
  .page-banner {
    padding: 38px 14px !important;
  }

  .content-shell,
  .register-page,
  .conduct-page,
  .faq-list,
  .wow-talent-page {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .download-box,
  .steps-box,
  .register-panel,
  .conduct-panel,
  .news-card,
  .faq-item,
  .account-panel,
  .donate-box {
    padding: 20px 16px !important;
  }

  .open-beta-countdown {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .open-beta-countdown .countdown-timer {
    grid-template-columns: 1fr 1fr !important;
  }

  .btn,
  .button,
  .download-button,
  .register-submit,
  .account-tool-button {
    font-size: 14px !important;
    padding: 14px 16px !important;
  }
}



/* v77 REAL mobile fix - overrides the desktop layout properly */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

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

  /* Header: stop desktop nav from crushing/overflowing */
  .site-header {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .header-inner,
  .nav-shell,
  .topbar,
  .nav-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .logo-wrap,
  .site-logo,
  .brand,
  .logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 86px !important;
    padding: 10px 0 !important;
    border-right: 0 !important;
  }

  .logo-wrap img,
  .site-logo img,
  .brand img,
  .logo img,
  .site-header img {
    max-width: 210px !important;
    max-height: 72px !important;
    object-fit: contain !important;
  }

  .main-nav,
  .site-nav,
  nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    border-top: 1px solid rgba(197, 151, 63, .25) !important;
    border-bottom: 1px solid rgba(197, 151, 63, .4) !important;
  }

  .main-nav a,
  .site-nav a,
  nav a,
  .nav-link,
  .login-link,
  .register-link {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-width: auto !important;
    width: auto !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    border-left: 1px solid rgba(255,255,255,.06) !important;
  }

  /* Hero: remove fixed desktop widths and prevent cut-off */
  .hero,
  .home-hero,
  .hero-section,
  .front-hero,
  section.hero {
    display: block !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    padding: 46px 18px 34px !important;
    overflow: hidden !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  .hero-content,
  .hero-copy,
  .home-hero-content,
  .front-hero-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero h1,
  .home-hero h1,
  .front-hero h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 14vw, 64px) !important;
    line-height: .92 !important;
    letter-spacing: .045em !important;
    word-spacing: normal !important;
    overflow-wrap: normal !important;
    margin: 0 0 26px !important;
  }

  .hero p,
  .home-hero p,
  .front-hero p,
  .hero-copy p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 18px !important;
    line-height: 1.38 !important;
    margin: 22px 0 26px !important;
  }

  .hero-divider,
  .divider,
  .ornament-line {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 !important;
  }

  /* Buttons: force proper stacking regardless of original class */
  .hero-buttons,
  .hero-actions,
  .home-actions,
  .button-row,
  .cta-row,
  .hero-cta,
  .hero .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
  }

  .hero-buttons .btn,
  .hero-actions .btn,
  .home-actions .btn,
  .button-row .btn,
  .cta-row .btn,
  .hero-cta .btn,
  .hero .actions .btn,
  .hero a.btn,
  .home-hero a.btn,
  .front-hero a.btn,
  .btn.red,
  .btn.blue {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.05 !important;
    font-size: 17px !important;
  }

  /* Countdown sits below buttons on small screens */
  .open-beta-countdown,
  .countdown-box,
  .beta-countdown {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 22px 16px !important;
  }

  .countdown-timer,
  .countdown-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .countdown-timer > *,
  .countdown-grid > * {
    min-width: 0 !important;
  }

  /* Normal page content */
  .content-shell,
  .page-shell,
  .register-page,
  .faq-list,
  .conduct-page,
  .account-page,
  .donate-page {
    width: auto !important;
    max-width: none !important;
    margin: 24px 12px !important;
    padding: 0 !important;
  }

  .page-banner {
    padding: 44px 18px !important;
    overflow: hidden !important;
  }

  .page-banner h1 {
    font-size: clamp(44px, 16vw, 72px) !important;
    line-height: .9 !important;
    max-width: 100% !important;
  }

  .download-box,
  .steps-box,
  .register-panel,
  .faq-item,
  .conduct-panel,
  .account-panel,
  .donate-box,
  .news-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 16px !important;
  }

  .features-grid,
  .feature-grid,
  .news-grid,
  .account-grid,
  .donate-grid {
    grid-template-columns: 1fr !important;
  }

  .site-footer {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 20px 12px !important;
  }
}

@media (max-width: 430px) {
  .hero h1,
  .home-hero h1,
  .front-hero h1 {
    font-size: clamp(38px, 13vw, 54px) !important;
    letter-spacing: .035em !important;
  }

  .hero,
  .home-hero,
  .hero-section,
  .front-hero,
  section.hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero p,
  .home-hero p,
  .front-hero p {
    font-size: 17px !important;
  }

  .main-nav a,
  .site-nav a,
  nav a {
    font-size: 11px !important;
    padding: 0 10px !important;
  }
}


/* v78 mobile header fix - hide overflowing desktop nav behind horizontal scroll */
@media (max-width: 760px) {
  .site-header,
  .header-inner,
  .nav-shell,
  .topbar,
  .nav-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .site-header {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .site-header .logo-wrap,
  .site-header .site-logo,
  .site-header .brand,
  .site-header .logo {
    width: 100% !important;
    max-width: 100% !important;
    border-right: 0 !important;
    border-left: 0 !important;
  }

  .site-header .main-nav,
  .site-header .site-nav,
  .site-header nav,
  .main-nav,
  .site-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    white-space: nowrap !important;
  }

  .site-header .main-nav > *,
  .site-header .site-nav > *,
  .site-header nav > *,
  .main-nav > *,
  .site-nav > * {
    flex: 0 0 auto !important;
  }

  .site-header .main-nav a,
  .site-header .site-nav a,
  .site-header nav a,
  .main-nav a,
  .site-nav a {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    height: 42px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 42px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* If the desktop layout has account buttons in a separate right column, hide overflow instead of letting it draw off-screen */
  .nav-actions,
  .header-actions,
  .account-nav,
  .login-register {
    display: flex !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 520px) {
  .site-header .main-nav a,
  .site-header .site-nav a,
  .site-header nav a,
  .main-nav a,
  .site-nav a {
    font-size: 10px !important;
    padding: 0 10px !important;
  }
}



/* FINAL mobile hamburger nav */
.pl-mobile-nav-button {
    display: none;
}

@media (max-width: 760px) {
    .pl-topbar {
        display: grid !important;
        grid-template-columns: 1fr 58px !important;
        grid-template-rows: 92px auto !important;
    }

    .pl-topbar-logo {
        grid-column: 1;
        grid-row: 1;
        height: 92px !important;
    }

    .pl-mobile-nav-button {
        appearance: none !important;
        -webkit-appearance: none !important;
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        width: 58px !important;
        height: 92px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #070b10 !important;
        border: 0 !important;
        border-left: 1px solid rgba(255,255,255,.12) !important;
        cursor: pointer !important;
    }

        .pl-mobile-nav-button span {
            display: block !important;
            width: 26px !important;
            height: 3px !important;
            background: #e9c46d !important;
        }

    .pl-topbar-nav {
        grid-column: 1 / 3;
        grid-row: 2;
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        background: #070b10 !important;
    }

    .pl-topbar.mobile-nav-open .pl-topbar-nav {
        display: flex !important;
    }

    .pl-topbar-nav a {
        width: 100% !important;
        height: 48px !important;
        padding: 0 20px !important;
        justify-content: flex-start !important;
        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }
}

/* FINAL FIX - let mobile dropdown expand */
@media (max-width: 760px) {
    .pl-topbar {
        overflow: visible !important;
        height: auto !important;
        min-height: 92px !important;
        align-items: start !important;
    }

        .pl-topbar.mobile-nav-open {
            grid-template-rows: 92px auto !important;
        }

    .pl-topbar-nav {
        overflow: hidden !important;
    }

    .pl-topbar.mobile-nav-open .pl-topbar-nav {
        display: flex !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 600px !important;
        overflow: visible !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 99999 !important;
    }

        .pl-topbar.mobile-nav-open .pl-topbar-nav a {
            display: flex !important;
            height: 48px !important;
            min-height: 48px !important;
            flex: 0 0 48px !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
}