/* ===================================================================
   ROYAL FLUSH — Royal Red & Gold theme
   =================================================================== */

:root {
  /* Reds */
  --red-900: #2a0508;
  --red-800: #45070d;
  --red-700: #6e0d16;
  --red-600: #8c1320;
  --red-500: #a51a2a;
  --red-card: #7a121d;

  /* Golds */
  --gold-100: #fff3cf;
  --gold-300: #f4d58a;
  --gold-400: #e8be63;
  --gold-500: #d4a437;
  --gold-600: #b3852a;

  --cream: #f6ecd4;
  --ink: #1a0306;

  --bg: #1a0306;
  --bg-soft: #240509;

  /* Gold values taken directly from Card_MasterMaskable.shader */
  --gold-primary: #88622a;   /* _GoldPrimary (0.533, 0.384, 0.161) */
  --gold-glare:   #ffef89;   /* _GoldGlare   (1, 0.937, 0.539)     */
  --gold-mid:     #d4a437;

  --gold-grad: linear-gradient(135deg, #f9e8b0 0%, #e8be63 35%, #c9962f 65%, #f4d58a 100%);

  /* Per-suit accent values taken directly from Base.asset (DeckData) */
  --foil-spade:   linear-gradient(100deg, #e4572e 0%, #f17957 22%, #ff9c80 42%, #ffe9e0 50%, #ff9c80 58%, #f17957 78%, #e4572e 100%);
  --foil-heart:   linear-gradient(100deg, #c1121f 0%, #e04954 22%, #ff8089 42%, #ffe6e8 50%, #ff8089 58%, #e04954 78%, #c1121f 100%);
  --foil-diamond: linear-gradient(100deg, #2d6cdf 0%, #568cef 22%, #80adff 42%, #e6f0ff 50%, #80adff 58%, #568cef 78%, #2d6cdf 100%);
  --foil-club:    linear-gradient(100deg, #6a4c93 0%, #9772c9 22%, #c499ff 42%, #f0e6ff 50%, #c499ff 58%, #9772c9 78%, #6a4c93 100%);

  /* Foil gradient mimicking the shader's primary -> glare -> glint sweep */
  --gold-foil: linear-gradient(100deg,
      var(--gold-primary) 0%,
      var(--gold-mid) 22%,
      var(--gold-glare) 42%,
      #fffdf0 50%,
      var(--gold-glare) 58%,
      var(--gold-mid) 78%,
      var(--gold-primary) 100%);

  /* default accent foil; overridden per-suit on each card */
  --accent-foil: var(--foil-club);

  /* Fonts */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --maxw: 1180px;

  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 0 0 1px rgba(212, 164, 55, 0.35), 0 8px 30px rgba(0, 0, 0, 0.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--cream);
  /* Text is not selectable/highlightable across the site */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(74, 8, 16, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #120204 100%);
  background-attachment: fixed;
  line-height: 1.65;
  overflow-x: hidden;
}

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

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

.gold-text,
em { color: var(--gold-300); font-style: normal; }

/* ---- Gold "shader": animated foil mimicking Card_MasterMaskable ---- */
.gold-foil {
  background-image: var(--gold-foil);
  background-size: 250% auto;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: goldSweep 7s linear infinite;
}
@keyframes goldSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -60% 0; }
}

/* ---- Card shader: base art + gold-mask foil + accent-mask foil ----
   Mirrors Card_MasterMaskable: _MainTex base, _FrontGold & _FrontAccent
   masks are white-on-black, so we LUMINANCE-mask the animated foils. */
.rfcard {
  position: relative;
  display: inline-block;
  line-height: 0;
  /* card-dark-overlay silhouette clips the whole card stack to the card shape */
  -webkit-mask: url('assets/cards/dark-overlay.png') center / 100% 100% no-repeat;
          mask: url('assets/cards/dark-overlay.png') center / 100% 100% no-repeat;
}
.rfcard__base { display: block; width: 100%; height: auto; }
.rfcard__gold,
.rfcard__accent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 250% auto;
  /* masks are alpha-baked (white = opaque, black = transparent), so standard
     alpha masking reveals the scrolling gradient only on the white parts and
     lets the layer beneath show through the black parts */
  -webkit-mask: var(--mask) center / 100% 100% no-repeat;
          mask: var(--mask) center / 100% 100% no-repeat;
}
/* Pass 1: accent gradient over the base (white = accent, black = base).
   Each suit sets its own --accent-foil from Base.asset (DeckData). */
.rfcard--spade   { --accent-foil: var(--foil-spade); }
.rfcard--heart   { --accent-foil: var(--foil-heart); }
.rfcard--diamond { --accent-foil: var(--foil-diamond); }
.rfcard--club    { --accent-foil: var(--foil-club); }
.rfcard__accent {
  z-index: 1;
  background-image: var(--accent-foil);
  animation: goldSweep 9s linear infinite reverse;
}
/* Final: gold gradient over pass 1 (white = gold, black = pass-1 result) */
.rfcard__gold {
  z-index: 2;
  background-image: var(--gold-foil);
  animation: goldSweep 7s linear infinite;
}

/* ---- CardStatic prefab reference ----
   RectTransform z-rotation: -30deg, PreserveAspect, Shadow rgba(0,0,0,.5)
   EffectDistance (24.45, -30.5) on a ~270px-tall card  -> ratio ~ (.09, .113) */
.card-static {
  transform: rotate(-30deg);
  filter: drop-shadow(18px 23px 6px rgba(0, 0, 0, 0.5));
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  cursor: pointer;
}
.btn--gold {
  background: var(--gold-grad);
  color: #3a2606;
  box-shadow: 0 8px 22px rgba(201, 150, 47, 0.35);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201, 150, 47, 0.5); }
.btn--ghost {
  border: 1px solid rgba(212, 164, 55, 0.55);
  color: var(--gold-300);
}
.btn--ghost:hover { background: rgba(212, 164, 55, 0.12); transform: translateY(-2px); }

/* ===================================================================
   NAV
   =================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(18, 2, 4, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 164, 55, 0.18);
}
.nav__brand { display: flex; align-items: center; gap: 0.7rem; }
.nav__crest { width: 38px; height: 38px; }
.nav__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav__links { display: flex; align-items: center; gap: clamp(0.8rem, 2.5vw, 2rem); }
.nav__links a { font-size: 0.92rem; color: var(--cream); opacity: 0.85; transition: color 0.15s, opacity 0.15s; }
.nav__links a:hover { opacity: 1; color: var(--gold-300); }
.nav__cta {
  border: 1px solid rgba(212, 164, 55, 0.55);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  color: var(--gold-300) !important;
  opacity: 1 !important;
}
.nav__cta:hover { background: rgba(212, 164, 55, 0.14); }

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 1.5rem 5rem;
  overflow: hidden;
  /* Royal damask multiplied with #CC293F, fixed for a parallax scroll */
  background:
    linear-gradient(180deg, transparent 55%, rgba(18, 2, 4, 0.9) 100%),
    linear-gradient(#cc293f, #cc293f),
    url('assets/background.webp') center center / cover no-repeat fixed,
    #2a0508;
  background-blend-mode: normal, multiply, normal, normal;
}
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(680px 420px at 50% 38%, rgba(140, 19, 32, 0.55), transparent 70%);
  pointer-events: none;
}

/* radial shadow behind the text — sits above the cards, below the content,
   so the title/buttons separate cleanly from the fanned deck behind */
.hero__textshadow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(52% 46% at 50% 44%,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.42) 38%,
    rgba(0, 0, 0, 0.12) 60%,
    transparent 74%);
}

/* fanned cards behind hero */
.hero__cards {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -42%);
  width: min(720px, 90vw);
  height: 460px;
  pointer-events: none;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.6));
  opacity: 0.9;
}
.fan {
  position: absolute;
  bottom: 0; left: 50%;
  width: 168px;
  border-radius: 12px;
  transform-origin: bottom center;
  animation: floaty 6s ease-in-out infinite;
}
.fan--1 { transform: translateX(-50%) rotate(-28deg) translateY(20px); margin-left: -210px; animation-delay: 0s; }
.fan--2 { transform: translateX(-50%) rotate(-14deg) translateY(-10px); margin-left: -105px; animation-delay: 0.4s; }
.fan--3 { transform: translateX(-50%) rotate(0deg)   translateY(-26px); margin-left: 0;     animation-delay: 0.8s; }
.fan--4 { transform: translateX(-50%) rotate(14deg)  translateY(-10px); margin-left: 105px;  animation-delay: 1.2s; }
.fan--5 { transform: translateX(-50%) rotate(28deg)  translateY(20px);  margin-left: 210px;  animation-delay: 1.6s; }

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  will-change: transform;
}
.hero__crest {
  width: 116px; height: 116px;
  margin: 0 auto 1.2rem;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
  animation: floaty 5s ease-in-out infinite;
}
.hero__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
  /* Subtle outer glow from the container */
  filter: drop-shadow(0 0 20px rgba(212, 164, 55, 0.2));
}

.hero__logo-img {
  max-width: clamp(280px, 50vw, 600px);
  height: auto;
  display: block;
  /* SVG duotone filter remaps black->maroon, white->gold
     Then add subtle bloom glow with gold highlights */
  filter:
    url(#logoDuotone)
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 12px rgba(212, 164, 55, 0.3));
}

.hero__logo-royal {
  animation: logoPulse 4s linear infinite;
}

.hero__logo-flush {
  animation: logoPulse 4s linear infinite 0.2s;
}

@keyframes logoPulse {
  0%, 100% {
    filter:
      url(#logoDuotone)
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 12px rgba(212, 164, 55, 0.3));
  }
  50% {
    filter:
      url(#logoDuotone)
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 20px rgba(212, 164, 55, 0.5));
  }
}

.hero__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 6rem);
  letter-spacing: 0.08em;
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 30px rgba(212, 164, 55, 0.25);
  display: none;
}
.hero__tag {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  letter-spacing: 0.06em;
  margin-top: 0.7rem;
  color: var(--cream);
}
.hero__sub { margin-top: 1rem; color: rgba(246, 236, 212, 0.78); font-size: 1.05rem; }
.hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.hero__scroll {
  position: absolute;
  bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--gold-400);
  opacity: 0.7;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0);} 50% { transform: translate(-50%,6px);} }

/* ===================================================================
   STRIP (intro quote)
   =================================================================== */
.strip {
  border-top: 1px solid rgba(212, 164, 55, 0.18);
  border-bottom: 1px solid rgba(212, 164, 55, 0.18);
  background: linear-gradient(180deg, rgba(110,13,22,0.25), rgba(110,13,22,0.05));
  padding: 3.2rem 1.5rem;
}
.strip__text {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 400;
  color: var(--gold-100);
  line-height: 1.7;
}

/* ===================================================================
   SECTIONS
   =================================================================== */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.2rem, 4vw, 2rem);
}
.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.1rem);
  text-align: center;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.04em;
}
.section__title::after {
  content: "";
  display: block;
  width: 78px; height: 3px;
  margin: 1rem auto 0;
  border-radius: 3px;
  background: var(--gold-grad);
  opacity: 0.85;
}
.section__lead {
  text-align: center;
  max-width: 640px;
  margin: 1.1rem auto 0;
  color: rgba(246, 236, 212, 0.75);
  font-size: 1.05rem;
}

/* ---- Features ---- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
  margin-top: 3rem;
}
.feature {
  background: linear-gradient(160deg, rgba(69,7,13,0.7), rgba(26,3,6,0.6));
  border: 1px solid rgba(212, 164, 55, 0.22);
  border-radius: 16px;
  padding: 1.8rem 1.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 164, 55, 0.6);
  box-shadow: var(--shadow-gold);
}
.feature__icon {
  font-size: 2rem;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 12px;
  margin-bottom: 1rem;
  background: radial-gradient(circle at 30% 25%, rgba(244,213,138,0.22), rgba(140,19,32,0.35));
  border: 1px solid rgba(212,164,55,0.35);
  color: var(--gold-300);
}
.feature h3 { font-family: var(--font-display); font-size: 1.12rem; margin-bottom: 0.5rem; color: var(--gold-100); letter-spacing: 0.02em; }
.feature p { color: rgba(246, 236, 212, 0.72); font-size: 0.96rem; }

/* ===================================================================
   THE DECK
   =================================================================== */
.section--deck { position: relative; }
.deck-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: 3.5rem;
}
.deck-showcase__cards {
  display: flex;
  padding-left: 56px; /* offset for overlap */
}
.show-card {
  width: clamp(96px, 14vw, 150px);
  border-radius: 10px;
  margin-left: -56px;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55));
  /* transition transform AND margin so the spread eases together, with a
     smooth no-overshoot curve (easeOutQuint) */
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              margin-left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: bottom center;
}
.deck-showcase__cards .show-card:nth-child(odd)  { transform: rotate(-4deg) translateY(6px); }
.deck-showcase__cards .show-card:nth-child(even) { transform: rotate(4deg); }
.deck-showcase__cards:hover .show-card { transform: none; margin-left: 8px; }
.deck-showcase__cards .show-card:first-child { margin-left: 0; }

.deck-showcase__back {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* gentler tilt + a centered shadow so the back reads balanced, not dropped
   (overrides the harder -30deg / offset shadow from .card-static here) */
.show-card--back {
  width: clamp(150px, 20vw, 200px);
  margin: 0;
  border-radius: 12px;
  border: 2px solid rgba(212,164,55,0.45);
  transform: none;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.6));
  animation: floaty 5.5s ease-in-out infinite;
}
.deck-showcase__caption {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  color: var(--gold-300);
  font-size: 1.3rem;
}

/* ===================================================================
   PRESS KIT
   =================================================================== */
.section--press {
  background:
    radial-gradient(700px 360px at 80% 0%, rgba(140,19,32,0.18), transparent 70%);
}
.press__header { text-align: center; }
.press__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.6rem;
}
.press__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}
.press__card {
  background: linear-gradient(160deg, rgba(42,5,8,0.85), rgba(26,3,6,0.7));
  border: 1px solid rgba(212, 164, 55, 0.22);
  border-radius: 16px;
  padding: 1.9rem;
}
.press__card--wide { grid-column: 1 / -1; }
.press__h {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold-200, var(--gold-300));
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.press__h::before {
  content: "♦";
  color: var(--gold-500);
  font-size: 0.85em;
}
.press__card p { color: rgba(246, 236, 212, 0.8); margin-bottom: 0.8rem; }
.press__card p:last-child { margin-bottom: 0; }

/* factsheet */
.factsheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 2rem;
}
.factsheet > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(212,164,55,0.2);
}
.factsheet dt { color: var(--gold-300); font-weight: 600; font-size: 0.92rem; }
.factsheet dd { color: var(--cream); text-align: right; font-size: 0.92rem; }

.press__list { list-style: none; }
.press__list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.5rem;
  color: rgba(246, 236, 212, 0.85);
  border-bottom: 1px dashed rgba(212,164,55,0.15);
}
.press__list li::before {
  content: "♠";
  position: absolute; left: 0;
  color: var(--gold-500);
  font-size: 0.85rem;
}

.press__studio-logo {
  width: 130px;
  margin-top: 1rem;
  opacity: 0.95;
}

/* asset downloads */
.asset-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1.1rem;
  margin-top: 1.4rem;
}
.asset { text-align: center; }
.asset__thumb {
  height: 130px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(160deg, #f6ecd4, #e6d4ab);
  border: 1px solid rgba(212,164,55,0.4);
  padding: 0.8rem;
  overflow: hidden;
}
.asset__thumb--dark { background: linear-gradient(160deg, #3a060c, #1a0306); }
.asset__thumb img { max-height: 100%; width: auto; object-fit: contain; }
.asset figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--gold-100); font-weight: 500; }
.asset__dl {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--gold-400);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.asset__dl:hover { color: var(--gold-300); border-color: var(--gold-400); }

/* Logo & Icon: two centered tiles + a single archive download */
.asset-row--brand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.asset-row--brand .asset { width: clamp(170px, 30%, 240px); }
.asset-row--brand .asset__thumb { height: 256px; }
.asset-row--brand figcaption {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  font-size: 1.05rem;
}
.press__download {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 1.8rem auto 0.2rem;
}

.press__card--contact { text-align: center; }
.press__email {
  display: inline-block;
  max-width: 100%;
  margin: 0.4rem 0;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* keep the press contact email selectable so it can be copied */
.press__email {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.press__email:hover { text-decoration: underline; text-decoration-color: var(--gold-500); }
.press__by { color: rgba(246,236,212,0.6) !important; font-size: 0.9rem; }

/* ---- Social buttons ---- */
.socials { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0 0.4rem; }
.socials--cta { margin-top: 1.6rem; }
.social {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 164, 55, 0.4);
  color: var(--gold-300);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.social svg { width: 18px; height: 18px; fill: currentColor; }
.social:hover {
  transform: translateY(-2px);
  background: rgba(212, 164, 55, 0.12);
  border-color: var(--gold-400);
  color: var(--gold-100);
}

/* ===================================================================
   SCREENSHOTS
   =================================================================== */
.section--shots {
  background:
    radial-gradient(700px 360px at 20% 0%, rgba(140,19,32,0.18), transparent 70%);
}
.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.shot {
  /* reset button styling */
  appearance: none;
  border: 1px solid rgba(212, 164, 55, 0.22);
  background: var(--red-900);
  padding: 0;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 16 / 9;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.shot::after {
  /* subtle gold "expand" affordance, appears on hover */
  content: "⤢";
  position: absolute;
  top: 0.6rem; right: 0.7rem;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(18, 2, 4, 0.7);
  border: 1px solid rgba(212, 164, 55, 0.5);
  color: var(--gold-300);
  font-size: 1rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.shot:hover, .shot:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(212, 164, 55, 0.65);
  box-shadow: var(--shadow-gold);
  outline: none;
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.06); }
.shot:hover::after, .shot:focus-visible::after { opacity: 1; transform: none; }
/* hero shot spans two columns + two rows for an editorial layout */
.shot--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 1, 2, 0.92);
  backdrop-filter: blur(6px);
  animation: lbFade 0.25s ease;
}
.lightbox__stage {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  animation: lbPop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(212, 164, 55, 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
.lightbox__count {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  color: var(--gold-300);
  font-size: 1rem;
}
.lightbox__btn {
  position: absolute;
  z-index: 2;
  appearance: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(212, 164, 55, 0.45);
  background: rgba(18, 2, 4, 0.72);
  color: var(--gold-300);
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.lightbox__btn:hover { background: rgba(212, 164, 55, 0.16); color: var(--gold-100); }
.lightbox__close {
  top: clamp(0.8rem, 3vw, 1.6rem);
  right: clamp(0.8rem, 3vw, 1.6rem);
  width: 46px; height: 46px;
  font-size: 1.1rem;
}
.lightbox__prev, .lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  font-size: 2rem;
  line-height: 1;
}
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__prev { left: clamp(0.6rem, 2vw, 1.6rem); }
.lightbox__next { right: clamp(0.6rem, 2vw, 1.6rem); }

@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbPop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* ===================================================================
   CTA
   =================================================================== */
.cta {
  border-top: 1px solid rgba(212, 164, 55, 0.18);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(140,19,32,0.4), transparent 70%);
  padding: clamp(4rem, 9vw, 6.5rem) 1.5rem;
  text-align: center;
}
.cta__inner { max-width: 620px; margin: 0 auto; }
.cta__crest { width: 92px; margin: 0 auto 1.2rem; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6)); }
.cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta__text { margin: 1rem 0 0.5rem; color: rgba(246,236,212,0.8); }

/* Live wishlist count stat (fed by assets/wishlist.json) */
.wl-stat {
  margin: 1.8rem auto 0.4rem;
  padding: 1.2rem 1.6rem 1.05rem;
  max-width: 320px;
  border-radius: 12px;
  border: 1px solid rgba(212, 164, 55, 0.28);
  background: linear-gradient(180deg, rgba(140, 19, 32, 0.32), rgba(20, 3, 6, 0.5));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.wl-stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.wl-stat__label {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.wl-stat__meta {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: rgba(246, 236, 212, 0.45);
}

/* Official Steam wishlist widget */
.steam-widget {
  margin: 1.8rem auto 0.4rem;
  width: 100%;
  max-width: 646px;
}
.steam-widget__frame {
  display: block;
  width: 100%;
  max-width: 646px;
  height: 190px;
  margin: 0 auto;
  border: 0;
  border-radius: 6px;
  /* gold frame to seat the Steam dark UI into the page theme */
  box-shadow: 0 0 0 1px rgba(212, 164, 55, 0.3), 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 2rem clamp(1.2rem, 4vw, 3rem);
  border-top: 1px solid rgba(212, 164, 55, 0.18);
  background: rgba(12, 1, 3, 0.6);
}
.footer__left { display: flex; align-items: center; gap: 0.9rem; font-size: 0.86rem; color: rgba(246,236,212,0.6); }
.footer__logo { width: 52px; opacity: 0.85; }
.footer__nav { display: flex; gap: 1.4rem; }
.footer__nav a { font-size: 0.88rem; color: rgba(246,236,212,0.7); transition: color 0.15s; }
.footer__nav a:hover { color: var(--gold-300); }

/* ===================================================================
   GOLD SHADER OVERRIDE — animate the foil sweep on all gold display text
   (placed late so it overrides the static --gold-grad backgrounds above)
   =================================================================== */
.hero__heading,
.nav__title,
.section__title,
.cta__title,
.wl-stat__num,
.press__email {
  background-image: var(--gold-foil);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: goldSweep 7s linear infinite;
}
.hero__heading { animation-duration: 8s; }
.nav__title    { animation-duration: 9s; }

/* ===================================================================
   SCROLL REVEAL
   =================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 760px) {
  .nav__title { display: none; }
  .press__grid { grid-template-columns: 1fr; }
  .factsheet { grid-template-columns: 1fr; }
  .hero__cards { opacity: 0.35; }
  .fan { width: 120px; }
  .fan--1 { margin-left: -150px; } .fan--2 { margin-left: -75px; }
  .fan--4 { margin-left: 75px; }   .fan--5 { margin-left: 150px; }
  .deck-showcase__cards { padding-left: 40px; }
  .show-card { margin-left: -40px; }
  .hero__logo-img { max-width: 140px; }
  .shots { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  /* keep the feature shot full-width but normal height on small screens */
  .shot--feature { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .fan, .hero__crest, .show-card--back, .hero__scroll,
  .hero__heading, .nav__title, .section__title, .cta__title, .wl-stat__num, .press__email {
    animation: none;
  }
  .reveal { transition: none; }
  .shot img, .shot, .lightbox__backdrop, .lightbox__stage { transition: none; animation: none; }
}