/* ============================================================
   ASHEN THRONE - homepage section styles
   Tokens, fonts, header, footer, buttons, and shared
   primitives live in theme.css (loaded FIRST on every page -
   the single source of truth). This file holds ONLY the
   homepage's section layouts (hero, pillars, zones, combat,
   features, chronicle, faq, …). seo.css extends for sub-pages.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button { font-family: inherit; cursor: pointer; }

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

/* Button tints (.btn-primary-tinted / .btn-gold-tinted) live in theme.css
   with the rest of the chamfered .btn family. */

/* ============================================================
   Hero - pure-graphic backdrop (no video: layered ember/ash
   gradients + hex grid + scanlines) + dual CTA + value props
   ============================================================ */

.hero {
  position: relative;
  min-height: min(680px, 90vh);
  overflow: hidden;
  background:
    radial-gradient(1100px 420px at 50% 118%, rgba(198, 40, 40, 0.30), transparent 62%),
    radial-gradient(900px 380px at 88% 110%, rgba(255, 152, 0, 0.10), transparent 60%),
    radial-gradient(760px 320px at 12% -12%, rgba(79, 195, 247, 0.12), transparent 60%),
    linear-gradient(180deg, #08101c 0%, var(--bg) 68%);
}

/* Faint tactical grid over the gradients */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(79, 195, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(900px 520px at 50% 32%, rgba(0,0,0,0.9), transparent 78%);
  -webkit-mask-image: radial-gradient(900px 520px at 50% 32%, rgba(0,0,0,0.9), transparent 78%);
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(720px 360px at 50% 42%, rgba(6, 6, 16, 0.55), transparent 72%),
    linear-gradient(180deg,
      rgba(6, 6, 16, 0.10) 0%,
      rgba(6, 6, 16, 0.25) 55%,
      rgba(6, 6, 16, 1.00) 100%);
}

.hero-scanline {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.14;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(255, 255, 255, 0.04) 2px 3px);
}

.hero-content {
  position: relative;
  z-index: 2;
  min-height: min(720px, 92vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 32px 48px;
  text-align: center;
}

/* The wordmark uses the REGAL brand face (--font-brand = Cinzel) with a warm
   white→gold gradient fill + drop-shadow glow - monumental, throne-like. */
.hero-wordmark {
  font-family: var(--font-brand);
  font-size: min(112px, 10vw);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 0.98;
  margin: 6px 0 20px;
  background: linear-gradient(180deg, #fff8ec 0%, #ffe3a8 46%, #d99b3c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 2px 18px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 46px rgba(255, 190, 90, 0.35));
}

.hero-subhead {
  max-width: 720px;
  font-size: clamp(15px, 1.6vw, 18px);
  color: #d4d6dc;
  line-height: 1.6;
  margin: 0 0 14px;
  font-weight: 500;
}
.hero-subhead strong { color: #fff; font-weight: 700; }

.hero-class-strip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 36px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}
.hero-class-strip .sep { color: var(--text-mute); margin: 0 14px; }
.hero-class-strip .k { color: var(--kinetic); }
.hero-class-strip .e { color: var(--electric); }
.hero-class-strip .p { color: var(--psionic); }

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-disclaimer {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.hero-disclaimer a { color: var(--accent); text-decoration: none; }
.hero-disclaimer a:hover { filter: brightness(1.18); }

.hero-value-props {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 760px;
  width: 100%;
}

.glass-card {
  padding: 18px 20px;
  border: 1px solid var(--border2);
  background: rgba(13, 21, 32, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: left;
}

.glass-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.glass-card-eyebrow.accent { color: var(--accent); }
.glass-card-eyebrow.gold   { color: var(--gold); }

.glass-card-body {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* Hero text panel - transparent layout wrapper on desktop,
   semi-opaque readability box on mobile portrait */
.hero-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Hero - mobile portrait: fit the wordmark + class strip on one line,
   and back the text with a box so it stays legible over the video */
@media (max-width: 720px) {
  .hero-content { padding: 56px 16px 40px; }

  .hero-panel {
    max-width: 460px;
    padding: 24px 16px 20px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .hero-wordmark {
    font-size: clamp(32px, 9.5vw, 58px);
    letter-spacing: 0.03em;
    margin-bottom: 14px;
  }

  .hero-class-strip {
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-bottom: 26px;
  }
  .hero-class-strip .sep { margin: 0 5px; }
}

/* ============================================================
   Pillars
   ============================================================ */

.pillars {
  background: var(--bg2);
  padding: var(--section-padding);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.pillar-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.pillar-card.gold    { border-top-color: var(--gold); }
.pillar-card.kinetic { border-top-color: var(--kinetic); }

.pillar-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.pillar-card.gold    .pillar-num { color: var(--gold); }
.pillar-card.kinetic .pillar-num { color: var(--kinetic); }

.pillar-card h3 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #fff;
  line-height: 1.2;
}

.pillar-card p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0 0 20px;
}

.pillar-kicker {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ============================================================
   Guide discovery
   ============================================================ */

.learn-guides {
  background: var(--bg2);
  padding: var(--section-padding);
}

.learn-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.learn-guide-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 30px 28px;
  color: var(--text);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  transition: background 0.15s, border-color 0.15s;
}

.learn-guide-card.gold { border-top-color: var(--gold); }
.learn-guide-card.kinetic { border-top-color: var(--kinetic); }

.learn-guide-card:hover {
  color: var(--text);
  background: var(--bg3);
  border-color: var(--accent);
}
.learn-guide-card.gold:hover { border-color: var(--gold); }
.learn-guide-card.kinetic:hover { border-color: var(--kinetic); }

.learn-guide-num,
.learn-guide-link {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
}
.learn-guide-card.gold .learn-guide-num,
.learn-guide-card.gold .learn-guide-link { color: var(--gold); }
.learn-guide-card.kinetic .learn-guide-num,
.learn-guide-card.kinetic .learn-guide-link { color: var(--kinetic); }

.learn-guide-card h3 {
  margin: 18px 0 12px;
  color: #fff;
  font-family: var(--font-chrome);
  font-size: 22px;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-transform: uppercase;
}

.learn-guide-card p {
  margin: 0 0 24px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.7;
}

.learn-guide-link {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

.learn-guides-all {
  margin-top: 24px;
  text-align: center;
}

/* ============================================================
   Two Worlds
   ============================================================ */

.two-worlds {
  background: var(--bg);
  padding: var(--section-padding);
}

.two-worlds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.world-card {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
}

.world-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.world-card-bg.frontier { background-image: url('assets/terrain_frontier.jpg'); }
.world-card-bg.wastes   { background-image: url('assets/terrain_wastes.jpg'); }

.world-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 6, 16, 0.30) 0%, rgba(6, 6, 16, 0.92) 100%);
}

.world-card-content {
  position: relative;
  z-index: 2;
}

.world-card h3 {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
}
.world-card.frontier h3 { color: var(--ok); }
.world-card.wastes h3   { color: var(--kinetic); }

.world-card-bullets {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.world-card-bullets li {
  padding: 10px 0;
  font-size: 13px;
  color: #d4d6dc;
  border-top: 1px dashed var(--border);
  line-height: 1.5;
}
.world-card-bullets li::before {
  content: '▸  ';
  font-weight: 900;
}
.world-card.frontier .world-card-bullets li::before { color: var(--ok); }
.world-card.wastes   .world-card-bullets li::before { color: var(--kinetic); }

.world-card .btn-ghost.frontier { border-color: var(--ok);     color: var(--ok); }
.world-card .btn-ghost.wastes   { border-color: var(--kinetic); color: var(--kinetic); }

/* ============================================================
   Combat - three class cards + counter loop
   ============================================================ */

.combat {
  background: var(--bg2);
  padding: var(--section-padding);
}

.combat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto 40px;
}

.combat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.combat-card.kinetic  { border-top-color: var(--kinetic); }
.combat-card.electric { border-top-color: var(--electric); }
.combat-card.psionic  { border-top-color: var(--psionic); }

.combat-card-header {
  position: relative;
  height: 200px;
  background-size: cover;
  background-position: center 22%;
}
.combat-card.kinetic  .combat-card-header { background-image: url('assets/unit_t2_kinetic.jpg'); }
.combat-card.electric .combat-card-header { background-image: url('assets/unit_t2_electric.jpg'); }
.combat-card.psionic  .combat-card-header { background-image: url('assets/unit_t2_psionic.jpg'); }

.combat-card-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--panel) 100%);
}

.combat-card-body { padding: 24px 24px 28px; }

.combat-card h3 {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 6px;
  line-height: 1.05;
}
.combat-card.kinetic  h3 { color: var(--kinetic);  text-shadow: 0 0 20px rgba(239, 83, 80, 0.33); }
.combat-card.electric h3 { color: var(--electric); text-shadow: 0 0 20px rgba(255, 152, 0, 0.33); }
.combat-card.psionic  h3 { color: var(--psionic);  text-shadow: 0 0 20px rgba(38, 198, 218, 0.33); }

.combat-card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 14px;
}

.combat-card-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
  margin: 0 0 20px;
}

.combat-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  gap: 12px;
}

.combat-metric-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
}

.combat-metric-value {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.combat-metric-value.up   { color: var(--ok); }
.combat-metric-value.down { color: var(--danger); }

.combat-loop {
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 24px;
  border: 1px solid var(--border2);
  background: var(--panel);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.combat-loop-label {
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.combat-loop .k { color: var(--kinetic); font-weight: 800; }
.combat-loop .e { color: var(--electric); font-weight: 800; }
.combat-loop .p { color: var(--psionic); font-weight: 800; }
.combat-loop .chev { color: var(--text-mute); margin: 0 10px; }

/* Combat loop - the term run has no spaces to break on; shrink it on small
   screens so it fits, and let it wrap as a fallback to avoid page-wide scroll */
@media (max-width: 600px) {
  .combat-loop {
    font-size: 11px;
    letter-spacing: 1px;
    padding: 16px;
    overflow-wrap: anywhere;
  }
  .combat-loop .chev { margin: 0 6px; }
}

/* ============================================================
   Features - 4-up grid with hairline trick
   ============================================================ */

.features {
  background: var(--bg);
  padding: var(--section-padding);
}

.features-grid {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--border);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}

@media (max-width: 880px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; }
}

.feature-cell {
  background: var(--bg);
  padding: 32px 28px;
}

.feature-glyph {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border2);
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 18px;
}

.feature-cell h3 {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #fff;
}

.feature-cell p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   Gameplay - three tiles
   ============================================================ */

.gameplay {
  background: var(--bg2);
  padding: var(--section-padding);
}

.gameplay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.gameplay-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  display: block;
  text-decoration: none;
  color: inherit;
}

.gameplay-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 6, 16, 0.95) 100%);
}

.gameplay-tile-num {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--accent);
  padding: 4px 8px;
  border: 1px solid var(--accent);
  background: rgba(6, 6, 16, 0.7);
}

.gameplay-tile-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
}

.gameplay-tile-text h4 {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: #fff;
}

.gameplay-tile-text small {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.gameplay-cta {
  text-align: center;
  margin-top: 32px;
}

/* ============================================================
   Chronicle - debrief + leaderboard mocks
   ============================================================ */

.chronicle {
  background: var(--bg);
  padding: var(--section-padding);
}

.chronicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto 32px;
}

.chronicle-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  padding: 24px 28px;
}
.chronicle-card.leaderboard { border-top-color: var(--accent); }

.chronicle-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 14px;
}
.chronicle-card-head .live-chip {
  background: rgba(102, 187, 106, 0.13);
  color: var(--ok);
  border: 1px solid var(--ok);
  padding: 2px 8px;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.chronicle-card h3 {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}

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

.chronicle-stat {
  border-left: 2px solid var(--gold);
  padding-left: 12px;
}
.chronicle-card.leaderboard .chronicle-stat { border-left-color: var(--accent); }

.chronicle-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
}

.chronicle-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.chronicle-timeline {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.85;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.chronicle-leaderboard {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.chronicle-leaderboard li {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  align-items: center;
  font-size: 13px;
}
.chronicle-leaderboard li:first-child { border-top: none; }
.chronicle-rank {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--accent);
}
.chronicle-rank-1 { color: var(--gold); }
.chronicle-name { color: #fff; font-weight: 700; }
.chronicle-kp,
.chronicle-wins {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.chronicle-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  display: inline-block;
  margin-top: 6px;
}
.chronicle-card.leaderboard .chronicle-link { color: var(--accent); }
.chronicle-link:hover { filter: brightness(1.18); }

.chronicle-cta {
  text-align: center;
}

.chronicle-cta-sub {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-mute);
  text-transform: uppercase;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq-section {
  background: var(--bg2);
  padding: var(--section-padding);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-list details {
  border-top: 1px solid var(--border);
}
.faq-list details:last-of-type { border-bottom: 1px solid var(--border); }

.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 40px 1fr 30px;
  gap: 16px;
  align-items: start;
  padding: 20px 4px;
  color: #fff;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::marker { display: none; }

.faq-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-mute);
  font-weight: 700;
  padding-top: 4px;
}

.faq-q {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  line-height: 1.4;
}

.faq-toggle {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  transition: transform 0.2s;
  line-height: 1;
}
.faq-list details[open] .faq-toggle { transform: rotate(45deg); }

.faq-a {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.75;
  margin: 0;
  padding: 0 34px 24px 60px;
}
.faq-a a { color: var(--accent); text-decoration: underline; }

/* ============================================================
   Play CTA (open beta) - citadel banner backdrop
   ============================================================ */

.play-cta {
  position: relative;
  padding: 104px 24px;
  background: url('assets/banner_citadel.jpg') center 28% / cover;
  text-align: center;
  overflow: hidden;
}

.play-cta-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 360px at 50% 118%, rgba(217, 155, 60, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(6, 6, 16, 0.86) 0%, rgba(6, 6, 16, 0.70) 45%, rgba(6, 6, 16, 0.95) 100%);
}

.play-cta-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
}

.play-cta-content h2 {
  font-family: var(--font-brand);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 10px 0 16px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8);
}

.play-cta-content p {
  font-size: 15px;
  color: #d4d6dc;
  margin: 0 0 30px;
  line-height: 1.7;
}

.play-cta-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.play-cta-sub {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.play-cta-sub a { color: var(--accent); }
.play-cta-sub a:hover { filter: brightness(1.2); }
.play-cta-sub span { margin: 0 8px; color: var(--border2); }

/* Footer styles live in theme.css (shared across every page). */

/* ============================================================
   Mobile section padding
   ============================================================ */

@media (max-width: 720px) {
  :root { --section-padding: 64px 20px; }
  .pillar-card,
  .world-card,
  .feature-cell,
  .combat-card-body,
  .chronicle-card { padding: 24px 20px; }
  .learn-guides-grid { grid-template-columns: 1fr; }
  .learn-guide-card { min-height: 0; padding: 24px 20px; }
}


/* ============================================================
   Type-system retoken - card headings use the chrome face
   (Rajdhani), matching theme.css. Appended by the design-system
   unification so section blocks above stay untouched.
   ============================================================ */
.pillar-card h3,
.world-card h3,
.combat-card h3,
.feature-cell h3,
.gameplay-tile h3,
.chronicle-card h3,
.faq-item summary,
.play-cta-content h3 {
  font-family: var(--font-chrome);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ============================================================
   V3 - cinematic hero image, store badges, showcase carousel,
   and atmospheric section backdrops (open-beta redesign)
   ============================================================ */

/* Hero - key-art crawler behind the gradient glows, masked so the
   ember/tactical layers still read at the edges. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Raw feature art (logo-free) - show the whole Crawler, centered. */
  background: url('assets/marketing/keyart_crawler.png') center center / cover no-repeat;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 64%, transparent 97%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 64%, transparent 97%);
}
@media (max-width: 720px) {
  .hero-bg { opacity: 0.58; }
}

.hero-play { box-shadow: 0 0 22px rgba(79, 195, 247, 0.4); }

/* Official store badges (Google Play + Apple App Store). Both are shipped
   vendor art under their own brand guidelines: scale uniformly, never
   restyle, recolour, border or add chrome.

   The two files are NOT interchangeable at the same CSS height. Google's PNG
   is 646x250 with 41px of transparent padding baked into every side, so only
   168/250 (67.2%) of its box is visible artwork. Apple's SVG is 119.66x40
   edge to edge. Setting both to one height renders Apple ~49% taller. The
   heights below are picked so the VISIBLE artwork matches at ~40px:
   Play 60px x 0.672 = 40.3px, Apple 40px. Change one, recompute the other. */
.store-badge { display: inline-flex; align-items: center; }
.store-badge img { display: block; height: 60px; width: auto; }
.store-badge--apple img { height: 40px; }
.store-badge:hover { transform: translateY(-2px); transition: transform 0.15s; }

/* ── Showcase carousel - screenshots + centered autoplay short ── */
.showcase {
  position: relative;
  padding: 72px 0 88px;
  background: var(--bg2);
  overflow: hidden;
}
.showcase-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('assets/banner_deep_wastes.jpg') center / cover;
  opacity: 0.14;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000, transparent 78%);
}
.showcase > .section-header,
.showcase > .showcase-rail { position: relative; z-index: 1; }

.showcase-rail {
  display: flex;
  gap: 18px;
  align-items: center;
  /* fit-content + max-width:100% = centered when the row fits (desktop),
     a real horizontal SCROLL viewport when it doesn't (mobile portrait).
     Do NOT use width:max-content here - that sizes the rail to all 5 cards,
     so it overflows the overflow:hidden .showcase and gets clipped instead of
     scrolling (the video card becomes unreachable on phones). */
  width: fit-content;
  max-width: 100%;
  margin: 44px auto 0;
  padding: 12px 20px 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 50%;
  scrollbar-width: none;
  position: relative;
}
.showcase-rail::-webkit-scrollbar { display: none; }

.shot-card {
  flex: 0 0 auto;
  width: 196px;
  margin: 0;
  scroll-snap-align: center;
  position: relative;
  border: 1px solid var(--border2);
  border-radius: 0;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, border-color 0.2s;
}
.shot-card img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}
.shot-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 12px 12px;
  font-family: var(--font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(6, 6, 16, 0.92));
}
.shot-card figcaption.gold { color: var(--gold-hot); }
.shot-card:hover { transform: translateY(-4px); border-color: var(--accent); }

/* Center video card - larger + gold-highlighted */
.shot-card--video {
  width: 250px;
  border-color: var(--gold);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.6), 0 0 34px rgba(255, 215, 0, 0.22);
  z-index: 2;
}
.shot-video {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
}
.shot-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 560px) {
  .shot-card { width: 168px; }
  .shot-card--video { width: 210px; }
}

/* ── Atmospheric section backdrops (cinematic banners, faded) ── */
.pillars, .combat, .chronicle { position: relative; overflow: hidden; }
.pillars > *, .combat > *, .chronicle > * { position: relative; z-index: 1; }
.pillars::before, .combat::before, .chronicle::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}
.pillars::before   { background-image: url('assets/banner_deep_wastes.jpg'); opacity: 0.13; }
.combat::before    { background-image: url('assets/banner_warlord.jpg'); }
.chronicle::before { background-image: url('assets/banner_citadel.jpg'); opacity: 0.12; }

/* ============================================================
   CHAMFER CONVERSION (2026-09-04) - the house plate from
   theme.css (PLATE GEOMETRY) applied to this sheet's rounded
   components. Appended so it wins the cascade over the rules
   above: each converted component maps its old border /
   background / box-shadow onto --plate-edge / --plate-fill /
   drop-shadow filters. Add a component here, never a
   border-radius above.
   ============================================================ */
.hero-panel, .glass-card, .pillar-card, .combat-card, .chronicle-card, .shot-card, .feature-glyph, .combat-loop, .gameplay-tile-num, .live-chip {
  position: relative;
  z-index: 0;
  border: none;
  border-radius: 0;
  clip-path: var(--plate-cut);
  background: var(--plate-fill);
}
.hero-panel::after, .glass-card::after, .pillar-card::after, .combat-card::after, .chronicle-card::after, .shot-card::after, .feature-glyph::after, .combat-loop::after, .gameplay-tile-num::after, .live-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  clip-path: var(--plate-ring);
  background: var(--plate-edge);
  pointer-events: none;
}

.hero-panel { --bc: 12px; --plate-edge: transparent; --plate-fill: transparent; }
@media (max-width: 720px) {
  .hero-panel {
    --plate-edge: var(--border2);
    --plate-fill: rgba(6, 6, 16, 0.55);
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45));
  }
}
.glass-card { --bc: 8px; --plate-edge: var(--border2); --plate-fill: rgba(13, 21, 32, 0.55); }

/* Accent-topped cards: the old 2px accent border-top is now a stripe
   inside the fill, under the hairline edge. */
.pillar-card { --bc: 10px; --plate-edge: var(--border); --plate-fill: linear-gradient(180deg, var(--accent) 0 2px, var(--panel) 2px); }
.pillar-card.gold    { --plate-fill: linear-gradient(180deg, var(--gold) 0 2px, var(--panel) 2px); }
.pillar-card.kinetic { --plate-fill: linear-gradient(180deg, var(--kinetic) 0 2px, var(--panel) 2px); }

.combat-card { --bc: 10px; --plate-edge: var(--border); --plate-fill: linear-gradient(180deg, var(--accent) 0 2px, var(--panel) 2px); }
.combat-card.kinetic  { --plate-fill: linear-gradient(180deg, var(--kinetic) 0 2px, var(--panel) 2px); }
.combat-card.electric { --plate-fill: linear-gradient(180deg, var(--electric) 0 2px, var(--panel) 2px); }
.combat-card.psionic  { --plate-fill: linear-gradient(180deg, var(--psionic) 0 2px, var(--panel) 2px); }

.chronicle-card { --bc: 10px; --plate-edge: var(--border); --plate-fill: linear-gradient(180deg, var(--gold) 0 2px, var(--panel) 2px); }
.chronicle-card.leaderboard { --plate-fill: linear-gradient(180deg, var(--accent) 0 2px, var(--panel) 2px); }

.shot-card {
  --bc: 12px;
  --plate-edge: var(--border2);
  --plate-fill: var(--panel);
  box-shadow: none;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5));
}
.shot-card:hover { --plate-edge: var(--accent); }
.shot-card--video {
  --plate-edge: var(--gold);
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 18px rgba(255, 215, 0, 0.22));
}
.shot-card--video:hover { --plate-edge: var(--gold-hot); }

.feature-glyph { --bc: 5px; --plate-edge: var(--border2); --plate-fill: transparent; }
.combat-loop { --bc: 8px; --plate-edge: var(--border2); --plate-fill: var(--panel); }
.gameplay-tile-num { --bc: 3px; --plate-edge: var(--accent); --plate-fill: rgba(6, 6, 16, 0.7); }
.chronicle-card-head .live-chip { --bc: 3px; --plate-edge: var(--ok); --plate-fill: rgba(102, 187, 106, 0.13); }

.world-card .btn-ghost.frontier { --plate-edge: var(--ok);      color: var(--ok); }
.world-card .btn-ghost.wastes   { --plate-edge: var(--kinetic); color: var(--kinetic); }
.hero-play { box-shadow: none; }
/* The header art is full-bleed; a hair of margin keeps the accent stripe of the fill visible under the ring. */
.combat-card-header { margin-top: 3px; }