:root {
  --bg: #0a081d;
  --bg-2: #121033;
  --surface: #171542;
  --surface-2: #201d57;
  --surface-3: #efeef7;
  --text: #f5f7ff;
  --muted: #c9cef2;
  --dark-text: #1b1c3c;
  --accent: #46d7ff;
  --accent-2: #ff51c8;
  --accent-3: #ffe15a;
  --line: rgba(255,255,255,.12);
  --shadow: 0 24px 70px rgba(0,0,0,.35);
  --radius: 24px;
  --container: min(1180px, calc(100% - 32px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.container { width: var(--container); margin: 0 auto; }
.sr-only, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; left: 12px; top: 12px; z-index: 9999; background: #fff; color: #000; padding: 10px 14px; border-radius: 8px;
}
.site-header {
  position: sticky; top: 0; z-index: 40; backdrop-filter: blur(18px);
  background: rgba(8,7,23,.78); border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 82px;
}
.brand img { height: 44px; width: auto; }
.site-nav { display: flex; gap: 28px; font-weight: 700; letter-spacing: .03em; }
.site-nav a { opacity: .9; }
.site-nav a:hover { color: var(--accent); }
.nav-toggle {
  display: none; border: 0; background: transparent; padding: 0; width: 44px; height: 44px; position: relative;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: #fff; margin: 5px auto; border-radius: 999px;
}
.hero {
  position: relative; overflow: clip; padding: 64px 0 72px;
  min-height: min(100svh, 900px);
  display: flex; align-items: center;
}
.hero-bg, .hero-overlay {
  position: absolute; inset: 0;
}
.hero-bg {
  background: url('assets/hero-bg.jpg') center / cover no-repeat;
  transform: scale(1.03);
}
.hero-overlay {
  background:
    radial-gradient(circle at 10% 20%, rgba(70,215,255,.18), transparent 28%),
    radial-gradient(circle at 92% 14%, rgba(255,81,200,.22), transparent 22%),
    linear-gradient(90deg, rgba(8,6,22,.96) 0%, rgba(8,6,22,.78) 44%, rgba(8,6,22,.25) 100%);
}
.hero-grid {
  position: relative; z-index: 1; display: grid; gap: 40px; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: center;
}
.eyebrow {
  color: var(--accent-3); text-transform: uppercase; letter-spacing: .16em; font-weight: 900; font-size: .85rem; margin: 0 0 10px;
}
.hero-logo { width: min(580px, 100%); margin-bottom: 10px; }
h1,h2,h3 { margin: 0 0 14px; line-height: 1.02; }
h1 { font-size: clamp(2.5rem, 6vw, 5.1rem); max-width: 11ch; text-transform: uppercase; }
.hero-text { max-width: 56ch; color: var(--muted); font-size: 1.08rem; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; font-weight: 900; letter-spacing: .03em; border: 2px solid transparent;
  box-shadow: var(--shadow);
}
.btn-primary { background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: #fff; }
.btn-secondary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.btn-disabled { background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); border: 2px solid rgba(255,255,255,.08); cursor: default; }
.platform-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.platform-strip img { height: 44px; width: auto; }
.hero-side { justify-self: end; width: min(430px, 100%); }
.hero-keyart { width: 100%; filter: drop-shadow(0 24px 44px rgba(0,0,0,.5)); }
.section { padding: 92px 0; }
.section-heading { max-width: 760px; margin-bottom: 34px; }
.section-heading h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); text-transform: uppercase; }
.section-heading p:last-child { color: var(--muted); margin: 0; }
.media-section { background: linear-gradient(180deg, #0a081d 0%, #0d0a26 100%); }
.media-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 28px; align-items: start; }
.trailer-card, .feature-card, .feature-lead, .edition-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.video-wrap { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screenshot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.screenshot-grid button {
  border: 0; padding: 0; background: #05040f; position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 256 / 240;
  box-shadow: var(--shadow);
}
.screenshot-grid img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.feature-story { background: linear-gradient(180deg, #0d0a26 0%, #120f34 100%); }
.feature-lead { display: grid; grid-template-columns: 1.02fr .98fr; align-items: stretch; margin-bottom: 26px; }
.feature-lead img { width: 100%; height: 100%; object-fit: cover; }
.feature-lead-copy { padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.feature-lead-copy h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; }
.feature-lead-copy p:last-child { color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; }
.feature-card h3 { font-size: 1.2rem; padding: 18px 18px 0; text-transform: uppercase; }
.feature-card p { padding: 0 18px 22px; color: var(--muted); margin: 0; }
.characters-section { padding-top: 0; }
.characters-title-band { background: linear-gradient(90deg, #ff5eb7, #ff6cd0); color: #fff; padding: 22px 0; }
.characters-title-band h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); font-style: italic; letter-spacing: .04em; }
.characters-bg {
  background:
    repeating-linear-gradient(-45deg, rgba(70,215,255,.12) 0 24px, rgba(255,255,255,.9) 24px 48px),
    linear-gradient(180deg, #f7f8fc 0%, #eceef8 100%);
  color: var(--dark-text);
  padding: 42px 0 84px;
}
.characters-layout { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 38px; align-items: start; }
.character-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.character-grid button {
  border: 0; background: transparent; padding: 0; border-radius: 20px; overflow: hidden;
  box-shadow: 0 12px 26px rgba(40,43,99,.18); position: relative; transition: transform .2s ease, box-shadow .2s ease;
}
.character-grid button:hover, .character-grid button.active { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(40,43,99,.28); }
.character-grid button.active::after {
  content: ''; position: absolute; inset: 0; border: 5px solid #fff; border-radius: 20px; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(255,81,200,.95);
}
.character-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.character-showcase { display: grid; gap: 18px; }
.character-hero-frame {
  background: #fff; border: 2px solid rgba(40,43,99,.18); box-shadow: 0 18px 34px rgba(40,43,99,.18); border-radius: 0; padding: 18px; min-height: 600px;
  display: grid; place-items: center;
}
.character-hero-frame img { max-height: 560px; width: auto; object-fit: contain; }
.character-copy {
  background: linear-gradient(90deg, rgba(149,100,252,.95), rgba(190,113,255,.95)); color: #fff; padding: 24px 26px 28px;
  box-shadow: 0 18px 34px rgba(40,43,99,.16);
}
.character-copy .eyebrow { color: #fff59b; margin-bottom: 10px; }
.character-copy h3 { font-size: clamp(2rem, 5vw, 3.3rem); margin-bottom: 12px; }
.editions-section { background: linear-gradient(180deg, #120f34 0%, #0b0a1e 100%); }
.edition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.edition-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.07)); }
.edition-body { padding: 22px 22px 26px; }
.edition-body h3 { font-size: 1.5rem; text-transform: uppercase; }
.edition-body ul { margin: 0 0 22px 1.2rem; padding: 0; color: var(--muted); }
.site-footer { padding: 38px 0 52px; background: #080715; border-top: 1px solid rgba(255,255,255,.08); }
.footer-grid { display: grid; align-items: center; gap: 24px; grid-template-columns: auto 1fr auto; }
.footer-grid img { height: 54px; width: auto; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; font-weight: 700; }
.footer-grid p { margin: 0; color: rgba(255,255,255,.68); text-align: right; }
.lightbox {
  position: fixed; inset: 0; display: none; place-items: center; padding: 20px; background: rgba(6,6,16,.92); z-index: 100;
}
.lightbox.is-open { display: grid; }
.lightbox img { width: min(1100px, 100%); border-radius: 18px; box-shadow: var(--shadow); image-rendering: pixelated; }
.lightbox-close {
  position: absolute; top: 18px; right: 20px; width: 48px; height: 48px; border: 0; border-radius: 999px; font-size: 2rem; line-height: 1; background: rgba(255,255,255,.1); color: #fff;
}
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1080px) {
  .hero-grid, .media-layout, .feature-lead, .characters-layout, .edition-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .characters-layout { gap: 28px; }
  .character-grid-panel { order: 2; }
  .character-showcase { order: 1; }
  .hero-side { justify-self: center; width: min(420px, 70vw); }
}
@media (max-width: 760px) {
  .site-nav {
    position: absolute; left: 16px; right: 16px; top: calc(100% + 10px); flex-direction: column; gap: 0;
    background: rgba(11,10,31,.98); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; overflow: hidden; display: none;
  }
  .site-nav a { padding: 16px 18px; border-top: 1px solid rgba(255,255,255,.08); }
  .site-nav a:first-child { border-top: 0; }
  .site-nav.open { display: flex; }
  .nav-toggle { display: block; }
  .hero { padding-top: 28px; min-height: auto; }
  h1 { max-width: 13ch; }
  .section { padding: 72px 0; }
  .screenshot-grid, .feature-grid, .character-grid, .edition-grid { grid-template-columns: 1fr 1fr; }
  .characters-title-band h2 { font-size: 2.5rem; }
  .characters-layout { grid-template-columns: 1fr; }
  .character-hero-frame { min-height: 440px; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-grid p { text-align: center; }
}
@media (max-width: 520px) {
  .screenshot-grid, .feature-grid, .character-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .platform-strip img { height: 38px; }
  .character-hero-frame { padding: 12px; min-height: 380px; }
  .character-hero-frame img { max-height: 360px; }
  .character-copy h3 { font-size: 2.2rem; }
}


/* V2 fixes: trailer popup + Miku-like character selector */
.trailer-open-card {
  position: relative;
  width: 100%;
  border: 0;
  padding: 0;
  text-align: center;
  min-height: 0;
  background: rgba(20, 18, 58, .96);
}
.trailer-open-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.trailer-open-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.12), transparent 28%),
              linear-gradient(180deg, transparent 45%, rgba(8,7,24,.78) 100%);
  pointer-events: none;
}
.trailer-play {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: clamp(72px, 10vw, 116px);
  height: clamp(72px, 10vw, 116px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.92);
  color: #141033;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  padding-left: .12em;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.trailer-cta {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex;
  min-width: min(320px, calc(100% - 40px));
  justify-content: center;
  padding: 13px 24px;
  border: 3px double rgba(255,255,255,.85);
  background: linear-gradient(90deg, rgba(255,81,200,.92), rgba(70,215,255,.92));
  color: #fff;
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: .04em;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.trailer-modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 22px;
  background: rgba(6,6,16,.88);
  z-index: 110;
}
.trailer-modal.is-open { display: grid; }
.trailer-modal-backdrop {
  position: absolute;
  inset: 0;
}
.trailer-modal-box {
  position: relative;
  width: min(1120px, 96vw);
  background: #05040f;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.modal-close {
  position: absolute;
  right: -12px;
  top: -12px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #161337;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.characters-bg {
  padding: clamp(26px, 4vw, 52px) 0 clamp(46px, 6vw, 90px);
}
.characters-layout {
  display: grid;
  grid-template-columns: minmax(320px, 480px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}
.character-grid-panel {
  background: rgba(255,255,255,.78);
  border: 2px solid rgba(19,16,51,.15);
  padding: clamp(12px, 2vw, 18px);
  box-shadow: 0 18px 34px rgba(40,43,99,.16);
}
.character-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
}
.character-grid button {
  background: #11103a;
  border-radius: 0;
  border: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.character-grid button:hover,
.character-grid button.active {
  transform: translateY(-3px);
}
.character-grid button.active::after {
  border-radius: 0;
  border-width: 4px;
  box-shadow: inset 0 0 0 3px #ff51c8;
}
.character-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.character-showcase {
  display: grid;
  gap: 0;
}
.character-hero-frame {
  min-height: clamp(520px, 58vw, 760px);
  background:
    linear-gradient(90deg, #28255b 0 14%, transparent 14% 86%, #28255b 86% 100%),
    linear-gradient(180deg, #f7f8ff, #ebeef8);
  border: 2px solid rgba(18,16,50,.22);
  padding: clamp(18px, 3vw, 34px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.character-hero-frame img {
  max-height: clamp(480px, 54vw, 710px);
  width: auto;
  max-width: 94%;
  object-fit: contain;
  filter: drop-shadow(0 22px 22px rgba(0,0,0,.18));
}
.character-copy {
  margin-top: clamp(16px, 2.4vw, 26px);
  justify-self: start;
  width: min(100%, 680px);
}
@media (min-width: 901px) and (max-width: 1080px) {
  .characters-layout {
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  }
  .character-grid-panel { order: 0 !important; }
  .character-showcase { order: 0 !important; }
}
@media (max-width: 900px) {
  .characters-layout { grid-template-columns: 1fr; }
  .character-grid-panel, .character-showcase { order: initial; }
  .character-grid { grid-template-columns: repeat(3, 1fr); }
  .character-hero-frame { min-height: 520px; }
}
@media (max-width: 560px) {
  .character-grid { grid-template-columns: repeat(2, 1fr); }
  .character-hero-frame { min-height: 420px; }
  .character-hero-frame img { max-height: 390px; }
  .trailer-cta {
    bottom: 14px;
    min-width: min(280px, calc(100% - 24px));
    font-size: .84rem;
  }
}


/* V3: character description moves under the icon selector */
.character-left {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-content: start;
}
.character-left .character-copy {
  width: 100%;
  justify-self: stretch;
  margin-top: 0;
}
.character-left .character-copy h3 {
  font-size: clamp(2rem, 4vw, 3.1rem);
}
.character-left .character-copy p:last-child {
  font-size: .98rem;
}
.character-showcase .character-copy {
  display: none;
}
@media (max-width: 900px) {
  .character-left {
    order: 1;
  }
  .character-showcase {
    order: 2;
  }
}


/* V4: right character art fits the height of the left icon+text column, with transparent character image */
.characters-layout {
  align-items: stretch;
}
.character-left {
  align-self: stretch;
}
.character-showcase {
  align-self: stretch;
  min-height: 0;
  height: 100%;
}
.character-hero-frame {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: 0;
  background:
    linear-gradient(90deg, #29275d 0 14%, transparent 14% 86%, #29275d 86% 100%);
  border: 0;
  box-shadow: none;
}
.character-hero-frame img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: calc(100% - 28px);
  max-height: calc(100% - 28px);
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 22px 22px rgba(0,0,0,.18));
}
.character-grid-panel {
  z-index: 1;
}
.character-left .character-copy {
  z-index: 1;
}
@media (max-width: 900px) {
  .character-hero-frame {
    height: min(74vh, 580px);
    min-height: 430px;
  }
  .character-hero-frame img {
    max-height: calc(100% - 24px);
  }
}
@media (max-width: 560px) {
  .character-hero-frame {
    height: 430px;
    min-height: 380px;
  }
}


/* V5: exact character panel fit + truly transparent full-body display */
.characters-layout {
  align-items: stretch !important;
  grid-template-columns: minmax(320px, 480px) minmax(0, 1fr) !important;
}

.character-left {
  display: grid !important;
  gap: clamp(16px, 2vw, 24px) !important;
  align-content: start !important;
  align-self: start !important;
}

.character-showcase {
  align-self: start !important;
  height: var(--character-panel-height, auto);
  min-height: 0 !important;
  display: block !important;
}

.character-hero-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.character-hero-frame::before,
.character-hero-frame::after {
  display: none !important;
}

.character-hero-frame img {
  position: static !important;
  transform: none !important;
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.18)) !important;
}

/* Keep the description under the icons */
.character-left .character-copy {
  width: 100% !important;
  justify-self: stretch !important;
  margin-top: 0 !important;
}

.character-showcase .character-copy {
  display: none !important;
}

/* Tablet/mobile: stack naturally and give the character a sane fixed visual area */
@media (max-width: 900px) {
  .characters-layout {
    grid-template-columns: 1fr !important;
  }

  .character-showcase {
    height: min(72vh, 620px) !important;
  }

  .character-hero-frame img {
    height: 100% !important;
  }
}

@media (max-width: 560px) {
  .character-showcase {
    height: 430px !important;
  }
}


/* V6 Step 1: Hero revision */
.hero {
  min-height: min(92svh, 900px);
  padding: clamp(44px, 7vw, 86px) 0 clamp(54px, 7vw, 92px);
}

.hero-bg {
  background: url('assets/hero-bg.jpg') center / cover no-repeat !important;
  transform: none !important;
}

.hero-overlay {
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 81, 200, .18), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(70, 215, 255, .16), transparent 26%),
    linear-gradient(90deg, rgba(6, 5, 18, .96) 0%, rgba(6, 5, 18, .86) 46%, rgba(6, 5, 18, .48) 100%) !important;
}

.hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(340px, .9fr);
  gap: clamp(32px, 5vw, 74px);
}

.hero-copy {
  max-width: 640px;
}

.hero-logo {
  width: min(460px, 88%);
  margin-bottom: clamp(16px, 3vw, 26px);
  filter: drop-shadow(0 0 18px rgba(126, 255, 255, .22));
}

.hero h1 {
  font-size: clamp(2.65rem, 5.8vw, 5.45rem);
  max-width: 11.5ch;
  letter-spacing: -.045em;
}

.hero-text {
  max-width: 62ch;
  font-size: clamp(1rem, 1.45vw, 1.16rem);
  color: rgba(245, 247, 255, .88);
}

.hero-actions {
  margin-top: 30px;
}

.hero-actions .btn-primary {
  background: linear-gradient(90deg, #ff51c8, #46d7ff);
}

.hero-side {
  justify-self: center;
  width: min(430px, 86vw);
}

.hero-poster {
  width: 100%;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow:
    0 28px 80px rgba(0,0,0,.5),
    0 0 0 10px rgba(255,255,255,.035);
  transform: rotate(.75deg);
}

.platform-strip-logos {
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.platform-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(8px);
}

.platform-logo-badge-nes img {
  width: min(220px, 40vw);
  height: auto;
}

.platform-logo-badge-steam {
  width: 60px;
  height: 60px;
  padding: 8px;
  border-radius: 999px;
}

.platform-logo-badge-steam img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

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

  .hero-copy {
    max-width: 760px;
  }

  .hero h1 {
    max-width: 13ch;
  }

  .hero-side {
    width: min(420px, 76vw);
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 34px;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 15vw, 4.1rem);
  }

  .hero-logo {
    width: min(340px, 92%);
  }

  .platform-logo-badge-nes img {
    width: min(190px, 68vw);
  }

  .platform-strip-logos {
    align-items: flex-start;
  }
}


/* V7 Step1 redo + Step2 cleanup */
.hero .eyebrow {
  display: none !important;
}

.hero-logo {
  display: none !important;
}

.hero h1 {
  font-size: clamp(2rem, 4.1vw, 4rem) !important;
  line-height: .94 !important;
  max-width: 12.5ch !important;
}

.hero-text {
  margin-top: 18px !important;
  max-width: 58ch !important;
}

.hero-copy {
  padding-top: 10px;
}

.platform-strip-logos {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 18px !important;
}

.platform-logo-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  overflow: visible !important;
}

.platform-logo-badge img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.platform-logo-badge-nes {
  padding: 10px 16px !important;
}

.platform-logo-badge-nes img {
  width: min(210px, 44vw) !important;
  height: auto !important;
}

.platform-logo-badge-steam {
  width: 64px !important;
  height: 64px !important;
  padding: 6px !important;
  border-radius: 999px !important;
}

.platform-logo-badge-steam img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.hero-actions {
  margin-top: 26px !important;
}

.hero-side {
  width: min(390px, 82vw) !important;
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.7rem) !important;
  }
  .platform-logo-badge-nes img {
    width: min(180px, 60vw) !important;
  }
}


/* V8: Step 1 redo final + Step 2 header cleanup */
.brand img {
  height: 52px !important;
  width: auto !important;
}

.header-inner {
  min-height: 74px;
}

.site-nav {
  gap: 38px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

.site-nav a {
  opacity: .96 !important;
}

.hero .eyebrow,
.hero-logo {
  display: none !important;
}

.hero h1 {
  font-size: clamp(2.05rem, 4.4vw, 4.15rem) !important;
  line-height: .96 !important;
  max-width: 11.8ch !important;
}

.hero-text {
  font-size: clamp(1rem, 1.25vw, 1.16rem) !important;
  max-width: 35ch !important;
}

.hero-actions {
  margin-top: 24px !important;
  gap: 14px !important;
}

.hero-actions .btn-primary {
  background: linear-gradient(90deg, #ff51c8, #46d7ff) !important;
}

.platform-strip.platform-strip-logos {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 18px !important;
  align-items: center !important;
}

.platform-logo-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  padding: 10px 14px !important;
  min-height: 56px !important;
}

.platform-logo-badge img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.platform-logo-badge-nes img {
  width: min(210px, 42vw) !important;
  height: auto !important;
}

.platform-logo-badge-steam {
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  padding: 8px !important;
}

.platform-logo-badge-steam img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Hide legacy placeholder boxes if any remain */
.platform-strip:not(.platform-strip-logos) {
  display: none !important;
}

@media (max-width: 900px) {
  .brand img {
    height: 48px !important;
  }
  .site-nav {
    font-size: 1.02rem !important;
    gap: 30px !important;
  }
}

@media (max-width: 560px) {
  .brand img {
    height: 42px !important;
  }
  .hero h1 {
    font-size: clamp(1.9rem, 11vw, 3rem) !important;
    max-width: 11ch !important;
  }
  .site-nav a {
    font-size: 1.05rem !important;
  }
  .platform-logo-badge-nes img {
    width: min(175px, 62vw) !important;
  }
}


/* V9: platform logo sizing + media section simplification */
.platform-strip.platform-strip-logos {
  gap: 14px !important;
}

.platform-logo-badge {
  min-height: 58px !important;
  padding: 10px 14px !important;
}

.platform-logo-badge-nes {
  min-width: 210px !important;
}

.platform-logo-badge-nes img {
  width: min(180px, 36vw) !important; /* slightly smaller than Steam */
  height: auto !important;
}

.platform-logo-badge-steam {
  min-width: 210px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
}

.platform-logo-badge-steam img {
  width: min(190px, 38vw) !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Media section */
.media-section .eyebrow,
.media-section .section-lead {
  display: none !important;
}

.media-section h2 {
  font-size: clamp(2.5rem, 5vw, 4.4rem) !important;
  margin-bottom: 28px !important;
  letter-spacing: -.03em;
}

@media (max-width: 560px) {
  .platform-logo-badge-nes,
  .platform-logo-badge-steam {
    min-width: 180px !important;
  }
  .platform-logo-badge-nes img {
    width: min(150px, 50vw) !important;
  }
  .platform-logo-badge-steam img {
    width: min(160px, 52vw) !important;
  }
}


/* V10: Media title forced + remove subtitle block + smaller Steam platform logo */
.media-section .section-heading,
.media-section .eyebrow,
.media-section .section-lead {
  display: none !important;
}

.media-title {
  display: block !important;
  margin: 0 0 34px !important;
  font-size: clamp(2.7rem, 5vw, 4.6rem) !important;
  line-height: .95 !important;
  letter-spacing: -.035em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}

/* Platform logo final tuning */
.platform-logo-badge-steam img {
  width: min(165px, 34vw) !important;
}

.platform-logo-badge-steam {
  min-width: 195px !important;
}

.platform-logo-badge-nes img {
  width: min(175px, 35vw) !important;
}

.platform-logo-badge-nes {
  min-width: 195px !important;
}

@media (max-width: 560px) {
  .media-title {
    font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
    margin-bottom: 24px !important;
  }

  .platform-logo-badge-steam img {
    width: min(145px, 52vw) !important;
  }

  .platform-logo-badge-nes img {
    width: min(150px, 52vw) !important;
  }
}


/* V11: Media removed, merged into a single Miku-style Features section */
.features-section-merged {
  position: relative;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.12), transparent 22%),
    radial-gradient(circle at 86% 68%, rgba(255, 117, 208, .12), transparent 28%),
    linear-gradient(135deg, rgba(74, 226, 255, .22), rgba(255, 80, 194, .16)),
    linear-gradient(180deg, #070528 0%, #100b49 100%);
  overflow: hidden;
}

.features-section-merged::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.06) 75%, transparent 75%, transparent);
  background-size: 28px 28px;
  opacity: .18;
  pointer-events: none;
}

.features-section-merged > .container {
  position: relative;
  z-index: 1;
}

.features-title-banner {
  display: block;
  margin: 0 0 28px;
  padding: 14px 18px;
  background: linear-gradient(90deg, #ff6cc4, #ff78c8);
  color: #fff;
  text-transform: uppercase;
  font-style: italic;
  font-size: clamp(2.3rem, 4vw, 3.7rem);
  line-height: .95;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}

.feature-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .95fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 28px;
}

.feature-spotlight-media {
  position: relative;
  min-height: 360px;
  border: 3px solid #cf93ff;
  background: linear-gradient(135deg, rgba(26, 16, 77, .9), rgba(64, 17, 103, .76));
  overflow: hidden;
}

.feature-cartridge {
  position: absolute;
  inset: 22px auto 18px 14px;
  max-width: 62%;
  max-height: calc(100% - 40px);
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.42));
}

.feature-console {
  position: absolute;
  right: -2%;
  bottom: -2%;
  width: 54%;
  max-width: 430px;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.45));
}

.feature-spotlight-copy {
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(188, 122, 255, .95), rgba(132, 107, 255, .86));
  color: #fff;
}

.feature-spotlight-copy h3 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  line-height: .95;
  text-transform: uppercase;
}

.feature-spotlight-copy p {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,.96);
}

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

.feature-card {
  background: linear-gradient(180deg, rgba(181, 117, 255, .94), rgba(123, 104, 248, .76));
  border: 1px solid rgba(255,255,255,.18);
  min-height: 100%;
  color: #fff;
}

.feature-card img {
  display: block;
  width: calc(100% - 16px);
  margin: 8px auto 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.22);
  background: #111;
}

.feature-card h4 {
  margin: 12px 14px 8px;
  font-size: 1.45rem;
  line-height: .98;
  text-transform: uppercase;
}

.feature-card p {
  margin: 0 14px 16px;
  font-size: .96rem;
  line-height: 1.48;
  color: rgba(255,255,255,.94);
}

@media (max-width: 1100px) {
  .feature-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .feature-spotlight-media {
    min-height: 420px;
  }

  .feature-console {
    width: 48%;
  }
}

@media (max-width: 640px) {
  .features-title-banner {
    font-size: clamp(1.9rem, 10vw, 2.8rem);
  }

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

  .feature-spotlight-media {
    min-height: 280px;
  }

  .feature-cartridge {
    max-width: 72%;
  }

  .feature-console {
    width: 54%;
    right: -12%;
  }

  .feature-card h4 {
    font-size: 1.2rem;
  }
}


/* V12 screenshot + layout fixes */
.feature-spotlight-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
  min-height: 360px !important;
}

.feature-spotlight-device-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.feature-cartridge,
.feature-console {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

.feature-cartridge {
  flex: 0 0 38%;
  max-width: 250px !important;
  max-height: 290px !important;
}

.feature-console {
  flex: 0 0 50%;
  max-width: 320px !important;
  max-height: 220px !important;
}

@media (max-width: 900px) {
  .feature-spotlight-device-row {
    gap: 16px;
  }
  .feature-cartridge {
    max-width: 210px !important;
    max-height: 250px !important;
  }
  .feature-console {
    max-width: 260px !important;
    max-height: 180px !important;
  }
}

@media (max-width: 640px) {
  .feature-spotlight-device-row {
    flex-direction: column;
  }
  .feature-cartridge {
    max-width: 60% !important;
    max-height: 210px !important;
  }
  .feature-console {
    max-width: 72% !important;
    max-height: 160px !important;
  }
}


/* V14: Physical cartridge headline formatting */
.feature-spotlight-copy h3 {
  line-height: .92 !important;
}


/* V15: force "PHYSICAL CARTRIDGE." to stay on one line */
.feature-spotlight-copy h3 {
  font-size: clamp(1.7rem, 2.5vw, 2.65rem) !important;
}

.feature-spotlight-copy .headline-nowrap {
  white-space: nowrap;
  display: inline-block;
}


/* V16: clickable feature screenshots */
.feature-card img[data-lightbox] {
  cursor: zoom-in;
  transition: transform .18s ease, filter .18s ease;
}

.feature-card img[data-lightbox]:hover,
.feature-card img[data-lightbox]:focus {
  transform: translateY(-2px);
  filter: brightness(1.08);
  outline: 3px solid rgba(70, 215, 255, .65);
  outline-offset: 2px;
}

.lightbox {
  cursor: zoom-out;
}

.lightbox img {
  max-height: 92vh;
  object-fit: contain;
}


/* V17: Features polish, NES ratio images, tighter copy layout */

/* Make the physical headline always stay in three intended lines */
.feature-spotlight-copy h3 {
  font-size: clamp(1.48rem, 2.05vw, 2.22rem) !important;
  line-height: .94 !important;
  letter-spacing: -.025em !important;
}

.feature-spotlight-copy .headline-nowrap {
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Give the text column slightly more breathing room so PHYSICAL CARTRIDGE fits */
.feature-spotlight {
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, 1fr) !important;
}

/* Screenshots must preserve NES 256x240 ratio and never crop */
.feature-card img {
  aspect-ratio: 256 / 240 !important;
  object-fit: contain !important;
  background: #05040f !important;
  image-rendering: pixelated !important;
}

/* Popup image should respect full image, not crop */
.lightbox img {
  object-fit: contain !important;
  max-height: 92vh !important;
  width: auto !important;
  max-width: 96vw !important;
  image-rendering: pixelated !important;
}

/* Card typography */
.feature-card h4 {
  text-align: center !important;
  font-size: clamp(1.08rem, 1.55vw, 1.28rem) !important;
  line-height: .98 !important;
  margin: 12px 12px 8px !important;
  min-height: 2.05em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-card p {
  font-size: .92rem !important;
  line-height: 1.42 !important;
  margin: 0 14px 16px !important;
}

/* Keep the spotlight product image centered and less floaty */
.feature-spotlight-device-row {
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 32px) !important;
}

.feature-cartridge {
  max-width: 270px !important;
  max-height: 310px !important;
}

.feature-console {
  max-width: 350px !important;
  max-height: 230px !important;
}

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

  .feature-spotlight-copy h3 {
    font-size: clamp(1.9rem, 5vw, 3rem) !important;
  }
}

@media (max-width: 640px) {
  .feature-spotlight-copy h3 {
    font-size: clamp(1.55rem, 8vw, 2.2rem) !important;
  }

  .feature-card h4 {
    min-height: 0;
  }

  .feature-card p {
    font-size: .96rem !important;
  }
}


/* V18: cleaner product-shot styling for the top Features visual */
.feature-spotlight-media {
  position: relative !important;
  min-height: 410px !important;
  padding: 26px 24px !important;
  border: 2px solid rgba(230, 180, 255, .75) !important;
  background:
    radial-gradient(circle at 30% 50%, rgba(255,255,255,.15) 0 23%, rgba(255,255,255,0) 23.5%),
    radial-gradient(circle at 69% 38%, rgba(255,255,255,.08) 0 16%, rgba(255,255,255,0) 16.5%),
    linear-gradient(135deg, rgba(34, 18, 85, .98), rgba(73, 20, 115, .95)) !important;
  overflow: hidden;
}

.feature-spotlight-media::before,
.feature-spotlight-media::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* soft product-ad circle */
.feature-spotlight-media::before {
  width: 290px;
  height: 290px;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 18px rgba(255,255,255,.03), 0 0 0 44px rgba(255,255,255,.02);
}

/* simple starburst placeholder */
.feature-spotlight-media::after {
  width: 130px;
  height: 130px;
  right: 34px;
  top: 30px;
  background:
    linear-gradient(transparent 49%, rgba(255,255,255,.12) 49%, rgba(255,255,255,.12) 51%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.12) 49%, rgba(255,255,255,.12) 51%, transparent 51%);
  opacity: .55;
}

.feature-spotlight-device-row {
  position: relative !important;
  min-height: 350px;
  width: 100%;
}

.feature-cartridge,
.feature-console {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.feature-cartridge {
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 46% !important;
  max-height: 365px !important;
  z-index: 2;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.42));
}

.feature-console {
  right: 2%;
  bottom: 2%;
  max-width: 55% !important;
  max-height: 245px !important;
  z-index: 3;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.45));
}

@media (max-width: 1100px) {
  .feature-spotlight-media {
    min-height: 380px !important;
  }
  .feature-spotlight-device-row {
    min-height: 320px;
  }
  .feature-cartridge {
    max-width: 44% !important;
    max-height: 320px !important;
  }
  .feature-console {
    max-width: 54% !important;
    max-height: 215px !important;
  }
}

@media (max-width: 740px) {
  .feature-spotlight-media {
    min-height: 470px !important;
    padding: 20px !important;
  }
  .feature-spotlight-device-row {
    min-height: 420px;
  }
  .feature-spotlight-media::before {
    left: 50%;
    top: 28%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 240px;
  }
  .feature-spotlight-media::after {
    right: 50%;
    top: auto;
    bottom: 18px;
    transform: translateX(50%);
    width: 100px;
    height: 100px;
  }
  .feature-cartridge {
    left: 50%;
    top: 28%;
    transform: translate(-50%, -50%);
    max-width: 63% !important;
    max-height: 260px !important;
  }
  .feature-console {
    left: 50%;
    right: auto;
    bottom: 8px;
    transform: translateX(-50%);
    max-width: 82% !important;
    max-height: 190px !important;
  }
}


/* V20: Features iteration 1, cleaner product shot and tighter feature copy */
.feature-spotlight {
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, .9fr) !important;
  gap: 24px !important;
}

.feature-spotlight-media {
  position: relative !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: 2px solid rgba(230, 180, 255, .78) !important;
  background: #1a124e !important;
  overflow: hidden !important;
  display: block !important;
}

.feature-product-shot {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.feature-spotlight-device-row,
.feature-cartridge,
.feature-console {
  display: none !important;
}

.feature-spotlight-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(18px, 2.5vw, 28px) !important;
}

.feature-spotlight-copy h3 {
  font-size: clamp(1.62rem, 2.05vw, 2.28rem) !important;
  line-height: .93 !important;
  margin-bottom: 16px !important;
}

.feature-spotlight-copy p {
  font-size: .96rem !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
}

/* Improve rhythm in the cards without changing the color pass yet */
.feature-card h4 {
  letter-spacing: -.015em !important;
}

.feature-card p {
  max-width: 92%;
  margin-left: auto !important;
  margin-right: auto !important;
}

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

  .feature-spotlight-copy h3 {
    font-size: clamp(1.9rem, 5vw, 3rem) !important;
  }
}

@media (max-width: 640px) {
  .feature-product-shot {
    aspect-ratio: 16 / 10;
  }
}


/* V21 Features iteration 2 */
.feature-card h4 {
  text-align: center !important;
  font-size: clamp(1.18rem, 1.6vw, 1.38rem) !important;
  line-height: 1.05 !important;
  min-height: 2.12em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
}

.feature-card p {
  text-align: left !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: .965rem !important;
  line-height: 1.45 !important;
}

.feature-card {
  padding-top: 10px !important;
}

.feature-card img {
  background: #060516 !important;
  object-fit: contain !important;
}

.feature-spotlight-copy h3 {
  line-height: .92 !important;
  letter-spacing: -.02em !important;
}

.feature-spotlight-copy p {
  font-size: 1rem !important;
  line-height: 1.46 !important;
}


/* V22 Features iteration 3 */
.feature-spotlight {
  align-items: stretch !important;
  gap: 18px !important;
}

.feature-spotlight-media {
  padding: 0 !important;
}

.feature-product-shot {
  object-fit: cover !important;
}

.feature-spotlight-copy {
  padding: 26px 26px 24px !important;
}

.feature-spotlight-copy h3 {
  margin-bottom: 16px !important;
  font-size: clamp(2.3rem, 3.15vw, 3.7rem) !important;
}

.feature-spotlight-copy p {
  max-width: 32ch !important;
}

.feature-card {
  padding: 10px 14px 18px !important;
}

.feature-card h4 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.feature-card p {
  font-size: 0.96rem !important;
}


/* V23 Features iteration 4 */
.feature-spotlight {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
  align-items: stretch !important;
  gap: 16px !important;
}

.feature-spotlight-copy {
  min-width: 0 !important;
  padding: 24px 22px 22px !important;
}

.feature-spotlight-copy h3 {
  font-size: clamp(1.7rem, 2.45vw, 3rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.04em !important;
  max-width: 8.8ch !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  margin-bottom: 14px !important;
}

.feature-spotlight-copy .headline-nowrap {
  display: block !important;
  white-space: nowrap !important;
}

.feature-spotlight-copy p {
  max-width: 31ch !important;
  font-size: 0.98rem !important;
  line-height: 1.5 !important;
}

.feature-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 10px 18px !important;
}

.feature-card img {
  width: 100% !important;
  aspect-ratio: 256 / 240 !important;
  object-fit: contain !important;
  background: #090816 !important;
}

.feature-card h4 {
  text-align: center !important;
  font-size: 1.03rem !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  margin: 12px 8px 12px !important;
}

.feature-card p {
  padding: 0 12px 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.44 !important;
}

@media (max-width: 980px) {
  .feature-spotlight {
    grid-template-columns: 1fr !important;
  }
  .feature-spotlight-copy {
    padding: 22px 20px 20px !important;
  }
  .feature-spotlight-copy h3 {
    font-size: clamp(1.6rem, 5.2vw, 2.45rem) !important;
    max-width: none !important;
  }
  .feature-spotlight-copy p {
    max-width: none !important;
  }
}


/* V24: targeted Features fixes after screenshot review */

/* The product-shot image must not crop the console or cartridge */
.feature-spotlight-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: #171050 !important;
}

.feature-product-shot {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
}

/* Stop PHYSICAL CARTRIDGE from overflowing the purple text panel */
.feature-spotlight {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap: 16px !important;
}

.feature-spotlight-copy {
  overflow: hidden !important;
  padding: 22px 22px 20px !important;
}

.feature-spotlight-copy h3 {
  max-width: none !important;
  width: 100% !important;
  font-size: clamp(1.42rem, 2.15vw, 2.05rem) !important;
  line-height: .92 !important;
  letter-spacing: -.035em !important;
  margin-bottom: 14px !important;
  overflow: visible !important;
}

.feature-spotlight-copy .headline-nowrap {
  white-space: nowrap !important;
  display: block !important;
}

.feature-spotlight-copy p {
  max-width: 35ch !important;
  font-size: .94rem !important;
  line-height: 1.48 !important;
}

/* Give cards slightly more air so the text reads less cramped */
.feature-card {
  padding: 10px 12px 20px !important;
}

.feature-card h4 {
  font-size: clamp(.98rem, 1.18vw, 1.12rem) !important;
  line-height: 1.03 !important;
  min-height: 2.1em !important;
}

.feature-card p {
  font-size: .91rem !important;
  line-height: 1.43 !important;
  padding: 0 10px !important;
}

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

  .feature-spotlight-copy h3 {
    font-size: clamp(1.8rem, 6vw, 2.8rem) !important;
  }
}

@media (max-width: 520px) {
  .feature-spotlight-copy h3 {
    font-size: clamp(1.42rem, 8.4vw, 2.2rem) !important;
  }

  .feature-spotlight-copy .headline-nowrap {
    white-space: normal !important;
  }
}


/* V25: characters iteration 2.02 */
.characters-layout {
  grid-template-columns: minmax(320px, 430px) minmax(280px, 430px) !important;
  justify-content: space-between !important;
  align-items: start !important;
  gap: clamp(28px, 4vw, 56px) !important;
}
.characters-bg {
  padding: clamp(18px, 4vw, 36px) 0 clamp(38px, 5vw, 56px);
}
.character-left {
  max-width: 430px;
}
.character-grid-panel {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(54, 63, 112, .12) !important;
  box-shadow: 0 18px 34px rgba(39, 43, 93, .14) !important;
  padding: 18px !important;
}
.character-grid {
  gap: 12px !important;
}
.character-grid button {
  background: #fff !important;
  border: 2px solid rgba(118, 128, 184, .35) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.character-grid button::after { display: none !important; }
.character-grid button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(40,43,99,.16) !important;
}
.character-grid button.active {
  border-color: #ff5fb8 !important;
  box-shadow: 0 0 0 3px rgba(255, 95, 184, .22), 0 12px 28px rgba(40,43,99,.18) !important;
}
.character-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.character-copy {
  background: linear-gradient(135deg, #a474f2 0%, #b269ff 100%) !important;
  color: #fff;
  border-radius: 0 !important;
  padding: 18px 20px 20px !important;
  min-height: 210px !important;
  box-shadow: 0 18px 30px rgba(77, 53, 137, .16) !important;
}
.character-copy .eyebrow {
  color: #fff59b !important;
  margin-bottom: 8px !important;
  letter-spacing: .16em !important;
}
.character-copy h3 {
  font-size: clamp(2rem, 4.2vw, 3rem) !important;
  line-height: .96 !important;
  margin-bottom: 6px !important;
}
.character-jp {
  margin: 0 0 12px;
  font-size: .98rem;
  color: rgba(255,255,255,.92);
  letter-spacing: .06em;
}
.character-quote {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff2a6;
  line-height: 1.35;
}
.character-copy [data-character-description] {
  margin: 0;
  font-size: .98rem;
  line-height: 1.52;
  max-width: 34ch;
}
.character-showcase {
  width: min(100%, 420px) !important;
  justify-self: start !important;
  align-self: start !important;
  height: auto !important;
  padding-left: 0 !important;
}
.character-hero-frame {
  height: clamp(540px, 58vw, 700px) !important;
  width: 100% !important;
  overflow: hidden !important;
  justify-content: flex-start !important;
  background: transparent !important;
}
.character-hero-frame img {
  height: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  max-width: none !important;
  margin-left: -10px !important;
}
@media (max-width: 980px) {
  .characters-layout {
    grid-template-columns: 1fr !important;
    justify-content: initial !important;
  }
  .character-left, .character-showcase {
    max-width: none;
    width: 100% !important;
  }
  .character-showcase { justify-self: center !important; }
  .character-hero-frame {
    justify-content: center !important;
    height: min(72vh, 640px) !important;
  }
  .character-hero-frame img { margin-left: 0 !important; }
}
@media (max-width: 560px) {
  .character-grid-panel { padding: 12px !important; }
  .character-grid { gap: 10px !important; }
  .character-copy { min-height: 0 !important; }
  .character-copy h3 { font-size: 2rem !important; }
  .character-hero-frame { height: 420px !important; }
}


/* V26 hotfix: if JS fails in the future, do not hide whole sections forever */
html:not(.js-ready) .reveal {
  opacity: 1 !important;
  transform: none !important;
}


/* V27: Characters iteration 2.03 */
:root {
  --character-accent: #9b6dff;
}

/* More compact and connected character layout */
.characters-layout {
  grid-template-columns: minmax(330px, 430px) minmax(300px, 410px) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: clamp(18px, 3.2vw, 42px) !important;
}

.characters-bg {
  padding: clamp(18px, 4vw, 34px) 0 clamp(38px, 5vw, 56px) !important;
}

.character-left {
  max-width: 430px !important;
  width: 100% !important;
}

/* Taller, cleaner character selector cards */
.character-grid-panel {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(54, 63, 112, .12) !important;
  box-shadow: 0 18px 34px rgba(39, 43, 93, .14) !important;
  padding: 18px !important;
}

.character-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

.character-grid button {
  background: #fff !important;
  border: 2px solid rgba(118, 128, 184, .35) !important;
  border-radius: 5px !important;
  overflow: visible !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.character-grid button::after {
  display: none !important;
}

.character-grid button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 20px rgba(40,43,99,.16) !important;
}

.character-grid button.active {
  border-color: #fff !important;
  box-shadow:
    0 0 0 4px #ff5eb7,
    0 0 0 7px rgba(255,255,255,.95),
    0 14px 28px rgba(40,43,99,.26) !important;
  z-index: 2;
}

.character-grid img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  border-radius: 3px !important;
}

/* Description card: no displayed resona label, full name on one line */
.character-copy {
  background: linear-gradient(135deg, #a474f2 0%, #b269ff 100%) !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 19px 22px 22px !important;
  min-height: 218px !important;
  box-shadow: 0 18px 30px rgba(77, 53, 137, .16) !important;
}

.character-copy .eyebrow {
  display: none !important;
}

.character-copy h3 {
  font-size: clamp(1.52rem, 3.35vw, 2.65rem) !important;
  line-height: .96 !important;
  letter-spacing: -.035em !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important;
}

.character-jp {
  margin: 0 0 12px !important;
  font-size: .98rem !important;
  color: rgba(255,255,255,.92) !important;
  letter-spacing: .06em !important;
}

.character-quote {
  margin: 0 0 13px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #fff2a6 !important;
  line-height: 1.35 !important;
}

.character-copy [data-character-description] {
  margin: 0 !important;
  font-size: .98rem !important;
  line-height: 1.52 !important;
  max-width: 36ch !important;
}

/* Full-body showcase: safe area, no left clipping, closer to selector */
.character-showcase {
  width: min(100%, 410px) !important;
  justify-self: center !important;
  align-self: start !important;
  height: auto !important;
  padding-left: 0 !important;
  overflow: visible !important;
}

.character-hero-frame {
  position: relative !important;
  height: clamp(520px, 56vw, 690px) !important;
  width: 100% !important;
  overflow: visible !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
  display: flex !important;
}

/* resona glow behind the character */
.character-hero-frame::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 47% !important;
  width: min(78%, 300px) !important;
  height: 74% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 48% !important;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--character-accent) 36%, transparent) 0%, transparent 68%) !important;
  filter: blur(1px) !important;
  opacity: .62 !important;
  z-index: 0 !important;
}

/* resona floor shadow */
.character-hero-frame::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 7% !important;
  width: min(74%, 300px) !important;
  height: 48px !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--character-accent) 58%, transparent) 0%, transparent 72%) !important;
  filter: blur(6px) !important;
  opacity: .72 !important;
  z-index: 0 !important;
}

.character-hero-frame img {
  position: relative !important;
  z-index: 1 !important;
  height: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.20)) !important;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .character-hero-frame::before,
  .character-hero-frame::after {
    background: radial-gradient(ellipse at center, rgba(155,109,255,.35) 0%, transparent 70%) !important;
  }
}

@media (max-width: 980px) {
  .characters-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .character-left,
  .character-showcase {
    max-width: none !important;
    width: 100% !important;
  }

  .character-showcase {
    justify-self: center !important;
  }

  .character-hero-frame {
    height: min(72vh, 640px) !important;
  }

  .character-hero-frame img {
    margin-left: 0 !important;
  }
}

@media (max-width: 560px) {
  .character-grid-panel {
    padding: 12px !important;
  }

  .character-grid {
    gap: 10px !important;
  }

  .character-copy {
    min-height: 0 !important;
    padding: 18px 18px 20px !important;
  }

  .character-copy h3 {
    font-size: clamp(1.35rem, 8vw, 2rem) !important;
  }

  .character-hero-frame {
    height: 430px !important;
  }
}


/* V28: Characters layout fix after screenshot review */

/* Keep Characters side-by-side on tablet/desktop.
   The previous 980px breakpoint stacked too early and made the full-body overlap the Buy section. */
@media (min-width: 761px) {
  .characters-layout {
    grid-template-columns: minmax(360px, 470px) minmax(340px, 430px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(18px, 3vw, 38px) !important;
  }

  .character-left {
    width: 100% !important;
    max-width: 470px !important;
    justify-self: end !important;
  }

  .character-showcase {
    width: 100% !important;
    max-width: 430px !important;
    min-height: 540px !important;
    justify-self: start !important;
    align-self: center !important;
    overflow: visible !important;
  }

  .character-hero-frame {
    height: clamp(520px, 54vw, 660px) !important;
    min-height: 520px !important;
    width: 100% !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  .character-hero-frame img {
    height: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Make the selector more readable at the size shown in the screenshot */
.character-grid-panel {
  padding: 18px !important;
}

.character-grid {
  gap: 14px !important;
}

.character-grid img {
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}

/* Keep section height honest so the full-body never bleeds into Get Flow */
.characters-bg {
  overflow: hidden !important;
  padding-bottom: clamp(44px, 6vw, 72px) !important;
}

.character-showcase,
.character-hero-frame {
  contain: layout !important;
}

/* Stronger active frame */
.character-grid button.active {
  box-shadow:
    0 0 0 5px #ff5eb7,
    0 0 0 9px rgba(255,255,255,.98),
    0 18px 32px rgba(40,43,99,.30) !important;
}

/* Text panel refinement */
.character-copy {
  min-height: 218px !important;
}

.character-copy h3 {
  white-space: nowrap !important;
  font-size: clamp(1.45rem, 3vw, 2.55rem) !important;
  letter-spacing: -.045em !important;
}

/* Only stack on actual mobile. */
@media (max-width: 760px) {
  .characters-layout {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .character-left {
    width: 100% !important;
    max-width: 480px !important;
    justify-self: center !important;
  }

  .character-showcase {
    width: 100% !important;
    max-width: 420px !important;
    min-height: 520px !important;
    justify-self: center !important;
  }

  .character-hero-frame {
    height: 520px !important;
    min-height: 520px !important;
  }
}

@media (max-width: 520px) {
  .character-showcase {
    min-height: 430px !important;
  }

  .character-hero-frame {
    height: 430px !important;
    min-height: 430px !important;
  }

  .character-copy h3 {
    font-size: clamp(1.2rem, 7.2vw, 1.85rem) !important;
  }
}

/* V29: character thumbnails wider + centered, full-body safer framing */

/* Keep the character panel on the same row longer and reduce giant gap feeling */
@media (min-width: 761px) {
  .characters-layout {
    grid-template-columns: minmax(380px, 470px) minmax(320px, 400px) !important;
    gap: clamp(14px, 2.2vw, 26px) !important;
    align-items: center !important;
  }

  .character-showcase {
    max-width: 400px !important;
    min-height: 560px !important;
    overflow: visible !important;
  }

  .character-hero-frame {
    height: clamp(540px, 56vw, 670px) !important;
    min-height: 540px !important;
    padding: 18px 34px 26px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .character-hero-frame img {
    display: block !important;
    margin: 0 auto !important;
    max-width: calc(100% - 10px) !important;
    max-height: calc(100% - 6px) !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: translateX(-6px) !important;
  }
}

/* Wider thumbnail cards, less vertical cropping */
.character-grid {
  gap: 12px !important;
}

.character-grid button {
  aspect-ratio: 6 / 5 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 2px !important;
}

.character-grid img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center 40% !important;
  display: block !important;
}

/* Make active state thicker and more obvious */
.character-grid button.active {
  box-shadow:
    0 0 0 4px #ff5eb7,
    0 0 0 7px rgba(255,255,255,.98),
    0 12px 24px rgba(40,43,99,.24) !important;
}

/* Reduce left-side clipping risks from the section wrapper */
.characters-bg {
  overflow: visible !important;
  padding-bottom: clamp(52px, 7vw, 84px) !important;
}

/* Mobile still stacks, but keep thumbs readable */
@media (max-width: 760px) {
  .character-grid button {
    aspect-ratio: 6 / 5 !important;
  }

  .character-hero-frame {
    padding: 14px 20px 18px !important;
    overflow: visible !important;
  }

  .character-hero-frame img {
    max-width: calc(100% - 8px) !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
}

/* V30: rebalance characters thumbnails + safer full-body framing */
@media (min-width: 761px) {
  .characters-bg {
    padding-top: 34px !important;
    padding-bottom: 110px !important;
  }

  .characters-layout {
    grid-template-columns: minmax(420px, 500px) minmax(340px, 390px) !important;
    gap: clamp(12px, 1.8vw, 20px) !important;
    align-items: start !important;
    justify-content: center !important;
  }

  .character-grid-panel {
    max-width: 500px !important;
  }

  .character-showcase {
    max-width: 390px !important;
    width: 100% !important;
    align-self: end !important;
  }

  .character-hero-frame {
    height: 650px !important;
    min-height: 650px !important;
    padding: 26px 22px 42px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .character-hero-frame img {
    width: auto !important;
    height: auto !important;
    max-width: 102% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: translateX(-14px) !important;
    margin: 0 auto !important;
  }
}

/* Thumbnail rebalance: wider cards, more headroom, more even centering */
.character-grid {
  gap: 10px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.character-grid button {
  aspect-ratio: 1.28 / 1 !important;
  padding: 6px 9px 2px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.character-grid img {
  width: auto !important;
  height: calc(100% - 2px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  display: block !important;
}

/* Per-character thumbnail balancing */
.character-grid button:nth-child(1) img { transform: translateX(4px) scale(0.94) !important; }
.character-grid button:nth-child(2) img { transform: translateX(2px) scale(0.95) !important; }
.character-grid button:nth-child(3) img { transform: translateX(0px) scale(0.95) !important; }
.character-grid button:nth-child(4) img { transform: translateX(0px) scale(0.94) !important; }
.character-grid button:nth-child(5) img { transform: translateX(0px) scale(0.95) !important; }
.character-grid button:nth-child(6) img { transform: translateX(1px) scale(0.94) !important; }

.character-grid button.active {
  box-shadow:
    0 0 0 4px #ff5eb7,
    0 0 0 8px rgba(255,255,255,0.95),
    0 10px 26px rgba(40,43,99,.28) !important;
}

/* Tighten the relationship between thumbs and copy */
.character-copy {
  margin-top: 16px !important;
}

@media (max-width: 760px) {
  .characters-bg {
    padding-bottom: 42px !important;
  }

  .character-grid {
    gap: 9px !important;
  }

  .character-grid button {
    aspect-ratio: 1.18 / 1 !important;
    padding: 5px 7px 2px !important;
  }

  .character-grid img {
    width: auto !important;
    height: 100% !important;
  }

  .character-grid button:nth-child(1) img,
  .character-grid button:nth-child(2) img,
  .character-grid button:nth-child(3) img,
  .character-grid button:nth-child(4) img,
  .character-grid button:nth-child(5) img,
  .character-grid button:nth-child(6) img { transform: scale(0.93) !important; }

  .character-hero-frame {
    height: 480px !important;
    min-height: 480px !important;
    padding: 18px 16px 24px !important;
    overflow: hidden !important;
  }

  .character-hero-frame img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-position: center bottom !important;
    transform: none !important;
  }
}

/* V31: character section recrop and layout stabilization */
#characters {
  overflow: hidden;
}
#characters .characters-bg {
  padding: clamp(26px, 4vw, 44px) 0 clamp(42px, 6vw, 68px);
}
#characters .characters-layout {
  display: grid !important;
  grid-template-columns: minmax(340px, 430px) minmax(300px, 1fr) !important;
  gap: clamp(18px, 2.6vw, 32px) !important;
  align-items: start !important;
}
#characters .character-left {
  display: grid !important;
  gap: 16px !important;
  align-content: start !important;
  min-width: 0;
}
#characters .character-grid-panel {
  width: 100%;
  background: rgba(255,255,255,.82);
  border: 2px solid rgba(31, 35, 88, .14);
  box-shadow: 0 10px 22px rgba(36,40,88,.12);
  padding: 14px;
}
#characters .character-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#characters .character-grid button {
  aspect-ratio: 1.26 / 1;
  border-radius: 0;
  background: #f7f8fd;
  border: 2px solid rgba(35,39,95,.18);
  box-shadow: none;
  transform: none !important;
  padding: 0;
  overflow: hidden;
}
#characters .character-grid button:hover {
  border-color: rgba(35,39,95,.30);
}
#characters .character-grid button.active {
  border-color: #ff68c9;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #ff68c9;
}
#characters .character-grid button.active::after {
  display: none !important;
}
#characters .character-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: auto;
}
#characters .character-copy {
  margin-top: 0 !important;
  width: 100% !important;
  justify-self: stretch !important;
  padding: 20px 20px 22px;
}
#characters [data-character-role] {
  display: none !important;
}
#characters .character-copy h3 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3vw, 2.5rem) !important;
  line-height: 1.02;
  white-space: nowrap;
  letter-spacing: -.02em;
}
#characters .character-jp {
  margin: 0 0 10px;
  opacity: .96;
  font-size: 1rem;
}
#characters .character-quote {
  margin: 0 0 10px;
  color: #fff59b;
  font-weight: 800;
}
#characters [data-character-description] {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}
#characters .character-showcase {
  min-width: 0;
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
}
#characters .character-hero-frame {
  position: relative;
  width: 100%;
  height: clamp(540px, 60vw, 700px) !important;
  min-height: 540px !important;
  padding: 0 14px 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#characters .character-hero-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: min(72%, 320px);
  height: 26px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--character-accent, #9b6dff) 55%, transparent);
  filter: blur(16px);
  opacity: .55;
  border-radius: 999px;
  pointer-events: none;
}
#characters .character-hero-frame img {
  position: static !important;
  transform: none !important;
  height: auto !important;
  width: auto !important;
  max-height: min(100%, 660px) !important;
  max-width: min(100%, 380px) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.18));
}

@media (max-width: 980px) {
  #characters .characters-layout {
    grid-template-columns: minmax(300px, 390px) minmax(260px, 1fr) !important;
    gap: 18px !important;
  }
  #characters .character-hero-frame {
    height: clamp(480px, 56vw, 620px) !important;
    min-height: 480px !important;
  }
  #characters .character-copy h3 {
    font-size: clamp(1.55rem, 2.6vw, 2.1rem) !important;
  }
}

@media (max-width: 760px) {
  #characters .characters-layout {
    grid-template-columns: 1fr !important;
  }
  #characters .character-left,
  #characters .character-showcase {
    width: min(100%, 460px);
    margin-inline: auto;
  }
  #characters .character-showcase {
    order: 2;
  }
  #characters .character-hero-frame {
    height: 500px !important;
    min-height: 500px !important;
  }
}

@media (max-width: 520px) {
  #characters .character-grid {
    gap: 8px;
  }
  #characters .character-grid-panel {
    padding: 10px;
  }
  #characters .character-copy {
    padding: 16px 16px 18px;
  }
  #characters .character-copy h3 {
    font-size: clamp(1.42rem, 7vw, 1.9rem) !important;
  }
  #characters .character-hero-frame {
    height: 430px !important;
    min-height: 430px !important;
  }
  #characters .character-hero-frame img {
    max-width: min(100%, 300px) !important;
  }
}


/* V32: character selector rebalance, fixed copy height, vertical portraits */
.characters-section {
  --char-grid-bg: rgba(255,255,255,.84);
}

.characters-layout {
  grid-template-columns: minmax(360px, 470px) minmax(320px, 460px) !important;
  justify-content: space-between;
  align-items: start !important;
  gap: clamp(24px, 4vw, 52px) !important;
}

.character-left {
  gap: 16px !important;
}

.character-grid-panel {
  padding: 14px !important;
  background: var(--char-grid-bg) !important;
  border: 2px solid rgba(27, 26, 66, .14) !important;
  box-shadow: 0 12px 26px rgba(30, 32, 86, .10) !important;
}

.character-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.character-grid button {
  position: relative;
  aspect-ratio: 4 / 5 !important;
  border: 2px solid rgba(45, 43, 95, .18) !important;
  background: #9b6dff !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.character-grid button:nth-child(1) { background: #9b6dff !important; }
.character-grid button:nth-child(2) { background: #d76876 !important; }
.character-grid button:nth-child(3) { background: #e0ab28 !important; }
.character-grid button:nth-child(4) { background: #73a3f1 !important; }
.character-grid button:nth-child(5) { background: #9ec76e !important; }
.character-grid button:nth-child(6) { background: #73a3f1 !important; }

.character-grid button:hover,
.character-grid button.active {
  transform: translateY(-2px) !important;
}

.character-grid button.active {
  border-color: #ff5ccf !important;
  box-shadow: 0 0 0 4px rgba(255, 92, 207, .95), inset 0 0 0 2px rgba(255,255,255,.65) !important;
}

.character-grid button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
  display: block !important;
  transform-origin: center top !important;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.18));
}
.character-grid button:nth-child(1) img { transform: scale(1.20) translateY(2%); }
.character-grid button:nth-child(2) img { transform: scale(1.22) translateY(2%); }
.character-grid button:nth-child(3) img { transform: scale(1.18) translateY(2%); }
.character-grid button:nth-child(4) img { transform: scale(1.14) translateY(2%); }
.character-grid button:nth-child(5) img { transform: scale(1.18) translateY(2%); }
.character-grid button:nth-child(6) img { transform: scale(1.10) translateY(2%); }

.character-left .character-copy {
  min-height: 248px;
  padding: 22px 20px 20px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.character-left .character-copy .eyebrow {
  display: none !important;
}

.character-left .character-copy h3 {
  font-size: clamp(1.95rem, 3.2vw, 3rem) !important;
  line-height: .94 !important;
  white-space: nowrap !important;
  letter-spacing: -.035em;
  margin-bottom: 10px !important;
}

.character-jp {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

.character-quote {
  margin-bottom: 14px !important;
}

.character-showcase {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  align-self: end !important;
}

.character-hero-frame {
  width: min(100%, 440px) !important;
  height: clamp(520px, 60vw, 690px) !important;
  min-height: 520px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  background: transparent !important;
}

.character-hero-frame::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  width: 72%;
  height: 24px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(177, 108, 255, .42) 0%, rgba(177, 108, 255, .18) 50%, rgba(177, 108, 255, 0) 80%);
  filter: blur(2px);
}

.character-hero-frame img {
  position: relative !important;
  z-index: 1;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.18));
}

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

  .character-left {
    max-width: 520px;
    margin: 0 auto;
  }

  .character-left .character-copy {
    min-height: 230px;
  }

  .character-left .character-copy h3 {
    font-size: clamp(1.7rem, 7vw, 2.55rem) !important;
  }

  .character-showcase {
    width: 100%;
    min-height: 420px;
  }

  .character-hero-frame {
    width: min(100%, 420px) !important;
    height: 470px !important;
    min-height: 470px !important;
  }
}

@media (max-width: 560px) {
  .character-grid-panel {
    padding: 12px !important;
  }

  .character-grid {
    gap: 8px !important;
  }

  .character-grid button {
    aspect-ratio: 4 / 5 !important;
  }

  .character-left .character-copy {
    min-height: 220px;
    padding: 18px 16px 16px !important;
  }

  .character-left .character-copy h3 {
    font-size: 1.7rem !important;
  }
}

/* V34: thumbnails shifted upward and zoomed in a bit more */
.character-grid button img {
  object-position: center top !important;
}
.character-grid button:nth-child(1) img { transform: scale(2.30) translateY(-4%) !important; }
.character-grid button:nth-child(2) img { transform: scale(2.36) translateY(-4%) !important; }
.character-grid button:nth-child(3) img { transform: scale(2.28) translateY(-4%) !important; }
.character-grid button:nth-child(4) img { transform: scale(2.18) translateY(-3%) !important; }
.character-grid button:nth-child(5) img { transform: scale(2.24) translateY(-3%) !important; }
.character-grid button:nth-child(6) img { transform: scale(2.14) translateY(-3%) !important; }


/* V35 emergency visibility hotfix.
   The site must never appear blank if reveal JS fails, is blocked, or loads late. */
.reveal,
.reveal.is-visible,
html:not(.js-ready) .reveal,
html.js-ready .reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

body,
main,
section,
.hero,
.features,
.characters-section,
.buy-section,
.footer {
  visibility: visible !important;
}

/* Keep the V34 bust-up thumbnail intent, but avoid JS-dependent visibility side effects. */
.character-grid button img {
  object-position: center top !important;
}
.character-grid button:nth-child(1) img { transform: scale(2.30) translateY(-4%) !important; }
.character-grid button:nth-child(2) img { transform: scale(2.36) translateY(-4%) !important; }
.character-grid button:nth-child(3) img { transform: scale(2.28) translateY(-4%) !important; }
.character-grid button:nth-child(4) img { transform: scale(2.18) translateY(-3%) !important; }
.character-grid button:nth-child(5) img { transform: scale(2.24) translateY(-3%) !important; }
.character-grid button:nth-child(6) img { transform: scale(2.14) translateY(-3%) !important; }


/* Structural navigation polish */
html { scroll-padding-top: 92px; }


/* V36: Characters centering and stable selection panel */
#characters .characters-bg {
  padding-inline: 0 !important;
}

#characters .characters-layout {
  grid-template-columns: minmax(380px, 470px) minmax(340px, 440px) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: clamp(28px, 4vw, 54px) !important;
  max-width: 1060px !important;
  margin-inline: auto !important;
}

#characters .character-left {
  width: 100% !important;
  max-width: 470px !important;
  justify-self: end !important;
}

#characters .character-grid-panel {
  width: 100% !important;
}

#characters .character-copy,
#characters .character-left .character-copy {
  width: 100% !important;
  height: 264px !important;
  min-height: 264px !important;
  max-height: 264px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#characters .character-copy h3,
#characters .character-left .character-copy h3 {
  font-size: clamp(1.7rem, 2.75vw, 2.72rem) !important;
  line-height: .96 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#characters .character-showcase {
  width: 100% !important;
  max-width: 440px !important;
  justify-self: start !important;
  align-self: start !important;
}

#characters .character-hero-frame {
  width: 100% !important;
  height: 664px !important;
  min-height: 664px !important;
  max-height: 664px !important;
}

@media (max-width: 900px) {
  #characters .characters-layout {
    grid-template-columns: minmax(0, 520px) !important;
    justify-content: center !important;
    max-width: 560px !important;
  }

  #characters .character-left,
  #characters .character-showcase {
    justify-self: center !important;
    max-width: 520px !important;
  }

  #characters .character-copy,
  #characters .character-left .character-copy {
    height: 244px !important;
    min-height: 244px !important;
    max-height: 244px !important;
  }

  #characters .character-hero-frame {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }
}

@media (max-width: 560px) {
  #characters .character-copy,
  #characters .character-left .character-copy {
    height: 238px !important;
    min-height: 238px !important;
    max-height: 238px !important;
  }

  #characters .character-copy h3,
  #characters .character-left .character-copy h3 {
    font-size: clamp(1.35rem, 6.5vw, 1.7rem) !important;
  }

  #characters .character-hero-frame {
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
  }
}


/* V37: Get the Game newsletter CTA */
.newsletter-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(26px, 4vw, 42px);
}

.newsletter-button {
  width: 100%;
  min-height: 58px;
  text-transform: uppercase;
}

.newsletter-button[aria-disabled="true"] {
  cursor: default;
}

.newsletter-form {
  width: min(100%, 680px);
  display: grid;
  gap: 14px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid rgba(255, 184, 218, .18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 138, 184, .08), transparent 38%),
    linear-gradient(180deg, rgba(39, 18, 55, .78), rgba(14, 7, 27, .7));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.newsletter-form[hidden] {
  display: none !important;
}

.newsletter-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .42fr);
  gap: 14px;
  align-items: end;
}

.newsletter-field {
  display: grid;
  gap: 6px;
}

.newsletter-email {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .055);
  color: var(--text);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.newsletter-email::placeholder {
  color: rgba(255, 247, 238, .52);
}

.newsletter-email:focus {
  border-color: rgba(255, 132, 185, .62);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 3px rgba(255, 132, 185, .14);
}

.newsletter-language-label {
  display: block;
  margin-left: 2px;
  color: rgba(255, 247, 238, .72);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
}

.newsletter-select-wrap {
  position: relative;
  display: block;
}

.newsletter-language-select {
  width: 100%;
  min-height: 46px;
  padding: 0 44px 0 14px;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  color: var(--text);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.newsletter-language-select:focus {
  border-color: rgba(255, 132, 185, .62);
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 3px rgba(255, 132, 185, .14);
}

.newsletter-language-select option {
  background: #fff7ee;
  color: #220b28;
}

.newsletter-language-select option:checked {
  background: #f6c4d9;
  color: #220b28;
}

.newsletter-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 3px solid rgba(255, 247, 238, .62);
  border-bottom: 3px solid rgba(255, 247, 238, .62);
  transform: translateY(-68%) rotate(45deg);
  pointer-events: none;
}

.newsletter-consent input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: #f67baa;
}

.newsletter-consent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
}

.newsletter-status {
  min-height: 1.2em;
  margin: -2px 0 0;
  color: rgba(255, 247, 238, .76);
  font-weight: 800;
  text-align: left;
}

.newsletter-status[data-state="success"] {
  color: #91f1c8;
}

.newsletter-status[data-state="error"] {
  color: #ff9db9;
}

.newsletter-status[data-state="pending"] {
  color: #ffe2a7;
}

.newsletter-alt-link {
  margin: -4px 0 0;
  color: rgba(255, 247, 238, .64);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}

.newsletter-alt-link a {
  color: rgba(255, 247, 238, .68);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.newsletter-alt-link a:hover {
  color: var(--accent);
}

.newsletter-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.newsletter-button:disabled,
.unsubscribe-button:disabled {
  cursor: progress;
  filter: saturate(.7) brightness(.9);
}

@media (max-width: 560px) {
  .newsletter-form {
    padding: 14px;
  }

  .newsletter-form-row {
    grid-template-columns: 1fr;
  }
}


/* V39: Social buttons under newsletter CTA */
.newsletter-cta {
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: min(100%, 680px);
}

.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  min-width: 136px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
}

.social-button:hover {
  border-color: rgba(70,215,255,.5);
  background: rgba(255,255,255,.13);
  transform: translateY(-1px);
}

.social-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  font-size: 1rem;
  line-height: 1;
}

.social-icon-x {
  font-weight: 950;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

@media (max-width: 520px) {
  .social-links {
    flex-direction: column;
    align-items: stretch;
  }

  .social-button {
    width: 100%;
  }
}


/* V40: Compact follow-us social logo row */
.follow-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 2px;
  color: rgba(255,255,255,.86);
}

.follow-label {
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .9rem;
}

.follow-socials .social-links {
  width: auto;
  gap: 10px;
}

.social-logo {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
  transition: transform .18s ease, filter .18s ease;
}

.social-logo:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.social-logo svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
}

.social-logo-x {
  background: #111;
  font-weight: 950;
  font-size: 1.05rem;
}

.social-logo-bluesky {
  background: linear-gradient(135deg, #1185fe, #5bbcff);
}

.social-logo-instagram {
  background: radial-gradient(circle at 30% 105%, #feda75 0 18%, #fa7e1e 32%, #d62976 55%, #962fbf 76%, #4f5bd5 100%);
}

@media (max-width: 520px) {
  .follow-socials {
    flex-direction: column;
    gap: 10px;
  }

  .follow-socials .social-links {
    flex-direction: row;
    align-items: center;
  }

  .social-logo {
    width: 46px;
    height: 46px;
  }
}


/* V41: Follow us label above centered social logos */
.follow-socials {
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.follow-socials .social-links {
  justify-content: center;
}


/* V42: Lavenstar Games legal footer */
.footer-grid-legal {
  grid-template-columns: auto 1fr auto;
}

.footer-company-logo {
  width: 66px;
  height: 66px !important;
  object-fit: contain;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.footer-legal {
  color: rgba(255,255,255,.72);
  text-align: right;
  max-width: 430px;
}

.footer-legal p {
  margin: 0;
}

.footer-legal p:first-child {
  color: rgba(255,255,255,.88);
  font-weight: 800;
}

.footer-legal p + p {
  margin-top: 5px;
  font-size: .88rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .footer-grid-legal {
    grid-template-columns: 1fr;
  }

  .footer-company-logo {
    margin-inline: auto;
  }

  .footer-legal {
    text-align: center;
    margin-inline: auto;
  }
}


/* V43: Minimal legal footer */
.footer-legal-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.footer-legal-row .footer-legal {
  max-width: none;
  text-align: right;
}

.footer-legal-row .footer-company-logo {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .footer-legal-row {
    justify-content: center;
    flex-direction: column-reverse;
    gap: 14px;
  }

  .footer-legal-row .footer-legal {
    text-align: center;
  }
}


/* V44: Footer resource links and static subpages */
.footer-main {
  display: grid;
  gap: 12px;
  justify-items: end;
}

.footer-resource-links {
  display: flex;
  justify-content: flex-end;
  gap: 14px 18px;
  flex-wrap: wrap;
  font-weight: 800;
  font-size: .9rem;
  color: rgba(255,255,255,.82);
}

.footer-resource-links a:hover {
  color: var(--accent);
}

.subpage-body {
  min-height: 100vh;
}

.subpage-main {
  background: linear-gradient(180deg, #0a081d 0%, #120f34 100%);
}

.subpage-hero {
  padding: clamp(64px, 9vw, 110px) 0 34px;
}

.subpage-hero h1 {
  max-width: none;
  font-size: clamp(2.3rem, 5vw, 4rem);
  letter-spacing: 0;
}

.subpage-hero p:last-child {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.05rem;
}

.subpage-content {
  display: grid;
  gap: 18px;
  padding-bottom: clamp(70px, 8vw, 110px);
}

.subpage-panel {
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: clamp(20px, 3vw, 30px);
}

.subpage-panel h2 {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  text-transform: uppercase;
}

.subpage-panel p {
  color: rgba(245,247,255,.86);
  margin-bottom: 0;
}

.subpage-panel a {
  color: var(--accent);
  font-weight: 800;
}

.unsubscribe-panel {
  max-width: 760px;
  margin: 0 auto;
}

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

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

.unsubscribe-field label {
  color: var(--text);
  font-weight: 900;
}

.unsubscribe-status {
  min-height: 1.2em;
  margin: 0;
  color: rgba(255, 247, 238, .76);
  font-weight: 800;
}

.unsubscribe-status[data-state="success"] {
  color: #91f1c8;
}

.unsubscribe-status[data-state="error"] {
  color: #ff9db9;
}

.unsubscribe-status[data-state="pending"] {
  color: #ffe2a7;
}

.unsubscribe-note {
  margin-top: 16px;
  color: rgba(245,247,255,.76);
}

.unsubscribe-button {
  width: 100%;
  min-height: 58px;
  text-transform: uppercase;
}

.subpage-back {
  margin: 16px 0 0;
}

.subpage-nav {
  display: flex;
}

@media (max-width: 760px) {
  .footer-main {
    justify-items: center;
  }

  .footer-resource-links {
    justify-content: center;
  }

  .subpage-nav {
    display: none;
  }
}


/* V45: Footer resource links in two left-aligned rows */
.footer-main {
  justify-items: start;
}

.footer-resource-links {
  display: grid;
  justify-content: start;
  justify-items: start;
  gap: 7px;
  text-align: left;
}

.footer-resource-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.footer-legal-row .footer-legal {
  text-align: left;
}

@media (max-width: 760px) {
  .footer-main,
  .footer-resource-links {
    justify-items: center;
    text-align: center;
  }

  .footer-resource-line {
    justify-content: center;
  }

  .footer-legal-row .footer-legal {
    text-align: center;
  }
}


/* V46: Three-zone footer composition */
.site-footer {
  padding: 62px 0 66px;
}

.footer-legal-row {
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) minmax(360px, auto) auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(28px, 5vw, 72px) !important;
}

.footer-resource-links {
  display: grid !important;
  justify-content: start !important;
  justify-items: start !important;
  align-content: center !important;
  gap: 13px !important;
  text-align: left !important;
  font-size: .94rem !important;
  line-height: 1 !important;
}

.footer-resource-line {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 20px !important;
}

.footer-resource-links a {
  color: rgba(255,255,255,.9) !important;
  font-weight: 900 !important;
}

.footer-legal-row .footer-legal {
  text-align: left !important;
  max-width: none !important;
  justify-self: start !important;
}

.footer-legal-row .footer-legal p:first-child {
  font-size: 1rem !important;
  letter-spacing: .01em !important;
}

.footer-legal-row .footer-legal p + p {
  margin-top: 8px !important;
  white-space: nowrap !important;
}

.footer-legal-row .footer-company-logo {
  justify-self: end !important;
  width: 66px !important;
  height: 66px !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .footer-legal-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "links logo"
      "legal logo";
    gap: 18px 28px !important;
  }

  .footer-resource-links {
    grid-area: links;
  }

  .footer-legal-row .footer-legal {
    grid-area: legal;
  }

  .footer-legal-row .footer-company-logo {
    grid-area: logo;
  }
}

@media (max-width: 640px) {
  .footer-legal-row {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "links"
      "legal"
      "logo";
    justify-items: center !important;
    text-align: center !important;
  }

  .footer-resource-links,
  .footer-legal-row .footer-legal,
  .footer-legal-row .footer-company-logo {
    justify-self: center !important;
  }

  .footer-resource-links {
    justify-items: center !important;
    text-align: center !important;
  }

  .footer-resource-line {
    justify-content: center !important;
  }

  .footer-legal-row .footer-legal {
    text-align: center !important;
  }

  .footer-legal-row .footer-legal p + p {
    white-space: normal !important;
  }
}


/* V47: Footer resource link spacing */
.footer-resource-links {
  gap: 16px !important;
}

.footer-resource-line {
  gap: 14px 28px !important;
}

@media (max-width: 640px) {
  .footer-resource-links {
    gap: 12px !important;
  }

  .footer-resource-line {
    gap: 12px 20px !important;
  }
}

/* V48: Hero concept copy tuning */
.hero h1 {
  font-size: clamp(1.15rem, 4.15vw, 2.85rem) !important;
  line-height: 1.07 !important;
  max-width: none !important;
  letter-spacing: 0 !important;
}

.hero-title-line {
  display: block;
  white-space: nowrap;
}

.hero-text {
  max-width: 52ch !important;
  font-size: 1.08rem !important;
}

@media (max-width: 1080px) {
  .hero h1 {
    font-size: clamp(1.1rem, 5.35vw, 2.55rem) !important;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(.92rem, 4.95vw, 1.62rem) !important;
    line-height: 1.12 !important;
    max-width: 100% !important;
  }

  .hero-text {
    font-size: 1rem !important;
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: clamp(.84rem, 4.7vw, 1.02rem) !important;
  }
}

/* V49: Solar Bloom Horizon art direction */
:root {
  --bg: #12071d;
  --bg-2: #2a1439;
  --surface: rgba(38, 20, 51, .9);
  --surface-2: rgba(56, 29, 69, .9);
  --surface-3: #fff2db;
  --text: #fff7ee;
  --muted: #ead0dc;
  --dark-text: #24101d;
  --accent: #ff8ab8;
  --accent-2: #70dcff;
  --accent-3: #ffd876;
  --line: rgba(255, 171, 206, .22);
  --shadow: 0 28px 78px rgba(20, 5, 28, .42);
  --radius: 8px;
}

html {
  background: #0b0612;
}

body {
  background:
    radial-gradient(ellipse at 22% 8%, rgba(255, 138, 184, .18), transparent 35%),
    radial-gradient(ellipse at 82% 18%, rgba(255, 216, 118, .13), transparent 34%),
    linear-gradient(180deg, #0b0612 0%, #170a24 42%, #0d0716 100%) !important;
  color: var(--text) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

h1,
h2,
h3,
.section-heading h2,
.edition-body h3,
.character-name,
.subpage-title {
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: 0 !important;
}

.site-header {
  background: rgba(16, 7, 24, .84) !important;
  border-bottom-color: rgba(255, 171, 206, .16) !important;
  box-shadow: 0 10px 34px rgba(13, 5, 22, .28);
}

.site-nav a:hover,
.footer-links a:hover,
.footer-resource-links a:hover {
  color: var(--accent) !important;
}

.hero {
  background: #130720 !important;
  isolation: isolate;
}

.hero-bg {
  background-image: url('assets/hero-bg.jpg') !important;
  opacity: .72;
  filter: saturate(1.16) hue-rotate(-6deg) brightness(1.06);
}

.hero-overlay {
  background:
    radial-gradient(ellipse at 68% 20%, rgba(255, 216, 118, .22), transparent 16%),
    radial-gradient(ellipse at 80% 30%, rgba(255, 138, 184, .26), transparent 34%),
    radial-gradient(ellipse at 52% 76%, rgba(112, 220, 255, .12), transparent 38%),
    linear-gradient(90deg, rgba(15, 6, 24, .96) 0%, rgba(28, 11, 39, .76) 48%, rgba(64, 31, 76, .26) 100%) !important;
}

.hero::before {
  content: "";
  position: absolute;
  right: min(11vw, 150px);
  top: min(16vw, 140px);
  width: 250px;
  max-width: 32vw;
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle, #090611 0 28%, transparent 29%),
    radial-gradient(circle, rgba(255,255,255,.78) 31%, rgba(255, 216, 118, .16) 35%, transparent 41%),
    conic-gradient(from 20deg, #ff8ab8, #ffb966, #70dcff, #ff8ab8, #ffd876, #ff8ab8);
  box-shadow: 0 0 54px rgba(255, 138, 184, .28), 0 0 120px rgba(255, 216, 118, .18);
  opacity: .62;
  transform: rotate(-12deg);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 58%, rgba(255, 138, 184, .13) 58% 60%, transparent 60%),
    linear-gradient(128deg, transparent 0 68%, rgba(112, 220, 255, .11) 68% 69%, transparent 69%),
    radial-gradient(ellipse 90px 26px at 13% 24%, rgba(255, 168, 204, .24), transparent 70%),
    radial-gradient(ellipse 120px 34px at 87% 65%, rgba(255, 216, 118, .16), transparent 70%);
  opacity: .9;
}

.hero-grid {
  z-index: 2 !important;
}

.hero h1 {
  color: #fff9ed !important;
  font-size: 2.05rem !important;
  line-height: 1.08 !important;
  text-shadow: 0 18px 40px rgba(0,0,0,.42), 0 0 28px rgba(255, 138, 184, .18);
}

.hero-title-line {
  white-space: nowrap !important;
}

.hero-text {
  color: #f0d5df !important;
}

.btn,
.newsletter-button,
.back-button,
.legal-back-button {
  border-radius: 8px !important;
  letter-spacing: .04em !important;
}

.btn-primary,
.hero-actions .btn-primary,
.newsletter-button {
  background: linear-gradient(90deg, #ff8ab8, #ffb966) !important;
  color: #230817 !important;
  border-color: transparent !important;
  box-shadow: 0 14px 34px rgba(255, 138, 184, .24);
}

.btn-secondary,
.back-button,
.legal-back-button {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255, 171, 206, .24) !important;
  color: #fff7ee !important;
}

.platform-logo-badge,
.trailer-card,
.feature-card,
.feature-lead,
.edition-card,
.character-grid-panel,
.character-hero-frame,
.subpage-card,
.legal-card,
.press-card,
.guideline-card {
  background: linear-gradient(180deg, rgba(48, 24, 62, .88), rgba(31, 15, 45, .88)) !important;
  border-color: rgba(255, 171, 206, .22) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
}

.section {
  position: relative;
  overflow: hidden;
}

.section > .container {
  position: relative;
  z-index: 1;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 63%, rgba(255, 138, 184, .08) 63% 64%, transparent 64%),
    linear-gradient(128deg, transparent 0 74%, rgba(255, 216, 118, .075) 74% 75%, transparent 75%),
    radial-gradient(ellipse 150px 42px at 10% 20%, rgba(255, 138, 184, .12), transparent 72%),
    radial-gradient(ellipse 120px 34px at 88% 80%, rgba(112, 220, 255, .09), transparent 72%);
  opacity: .9;
}

.features-section,
.features-section-merged,
.media-section {
  background: linear-gradient(180deg, #170a24 0%, #201034 100%) !important;
}

.characters-section {
  background:
    radial-gradient(ellipse at 78% 14%, rgba(255, 138, 184, .16), transparent 30%),
    linear-gradient(180deg, #201034 0%, #140a25 100%) !important;
}

.editions-section {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 216, 118, .13), transparent 32%),
    linear-gradient(180deg, #140a25 0%, #0b0612 100%) !important;
}

.section-heading h2,
.features-title-banner h2,
.characters-title-band h2 {
  color: #fff7ee !important;
  text-shadow: 0 14px 34px rgba(0,0,0,.28), 0 0 26px rgba(255, 138, 184, .12);
}

.section-heading p,
.section-heading p:last-child,
.feature-card p,
.feature-spotlight-copy p,
.character-copy p,
.character-quote,
.edition-body ul,
.footer-grid p,
.footer-legal p {
  color: #ead0dc !important;
}

.feature-card img,
.feature-lead img,
.edition-card img,
.character-hero-frame img,
.screenshot-grid button,
.screenshot-grid img {
  border-radius: 8px !important;
}

.feature-card,
.edition-card,
.character-grid-panel {
  backdrop-filter: blur(10px);
}

.feature-card h3,
.feature-spotlight-copy h3,
.edition-body h3,
.character-name {
  color: #fff9ed !important;
}

.character-thumb,
.character-thumb.is-active {
  border-radius: 8px !important;
}

.character-thumb.is-active {
  border-color: #ff8ab8 !important;
  box-shadow: 0 0 0 2px rgba(255, 138, 184, .18), 0 14px 36px rgba(255, 138, 184, .18) !important;
}

.follow-socials,
.newsletter-cta {
  position: relative;
  z-index: 1;
}

.social-logo {
  box-shadow: 0 12px 28px rgba(0,0,0,.25) !important;
}

.site-footer {
  background:
    linear-gradient(120deg, rgba(255, 138, 184, .08), transparent 42%),
    #090611 !important;
  border-top-color: rgba(255, 171, 206, .14) !important;
}

.footer-resource-links a,
.footer-legal strong {
  color: #fff7ee !important;
}

.footer-company-logo {
  filter: drop-shadow(0 10px 18px rgba(255, 138, 184, .16));
}

.lightbox {
  background: rgba(11, 6, 18, .94) !important;
}

@media (max-width: 1080px) {
  .hero h1 {
    font-size: 2rem !important;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 1.05rem !important;
    line-height: 1.16 !important;
  }

  .hero::before {
    right: -44px;
    top: 104px;
    width: 170px;
    max-width: none;
    opacity: .34;
  }

  .hero::after {
    opacity: .55;
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: .96rem !important;
  }
}

/* V50: Unified Solar Bloom starry night correction */
:root {
  --night-0: #090611;
  --night-1: #12081d;
  --night-2: #1a0c28;
  --bloom-pink: #ff8ab8;
  --bloom-gold: #ffd876;
  --bloom-sky: #70dcff;
  --bloom-line: rgba(255, 190, 214, .18);
  --bloom-panel: rgba(24, 12, 35, .84);
  --bloom-panel-2: rgba(36, 18, 49, .86);
}

body {
  background:
    radial-gradient(circle at 9% 16%, rgba(255,255,255,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 42%, rgba(255,216,118,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 34% 11%, rgba(112,220,255,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 22%, rgba(255,255,255,.62) 0 1px, transparent 1.6px),
    radial-gradient(circle at 77% 15%, rgba(255,138,184,.54) 0 1px, transparent 1.6px),
    radial-gradient(circle at 91% 36%, rgba(255,255,255,.55) 0 1px, transparent 1.5px),
    linear-gradient(180deg, var(--night-0) 0%, var(--night-1) 42%, #07050d 100%) !important;
  background-attachment: fixed;
}

.site-header,
.site-footer {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 32%, rgba(255,216,118,.16) 0 1px, transparent 1.6px),
    rgba(9, 6, 17, .9) !important;
}

.hero-overlay {
  background:
    radial-gradient(circle at 11% 18%, rgba(255,255,255,.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 24% 62%, rgba(255,216,118,.34) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 20%, rgba(112,220,255,.32) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 70% 24%, rgba(255, 216, 118, .18), transparent 20%),
    radial-gradient(ellipse at 80% 36%, rgba(255, 138, 184, .2), transparent 36%),
    linear-gradient(90deg, rgba(9, 6, 17, .96) 0%, rgba(20, 9, 30, .82) 48%, rgba(45, 23, 55, .34) 100%) !important;
}

.hero::after {
  background:
    radial-gradient(circle at 16% 26%, rgba(255,255,255,.42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 38% 12%, rgba(255,216,118,.28) 0 1px, transparent 1.6px),
    radial-gradient(circle at 66% 70%, rgba(112,220,255,.24) 0 1px, transparent 1.5px),
    linear-gradient(112deg, transparent 0 60%, rgba(255, 138, 184, .09) 60% 61%, transparent 61%),
    linear-gradient(128deg, transparent 0 72%, rgba(112, 220, 255, .08) 72% 73%, transparent 73%) !important;
}

#features.features-section-merged,
#features.features-section,
.media-section,
#characters.characters-section,
#buy.editions-section {
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 26% 74%, rgba(255,216,118,.28) 0 1px, transparent 1.6px),
    radial-gradient(circle at 48% 18%, rgba(112,220,255,.24) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 40%, rgba(255,138,184,.28) 0 1px, transparent 1.6px),
    radial-gradient(circle at 92% 78%, rgba(255,255,255,.38) 0 1px, transparent 1.5px),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 45%, var(--night-0) 100%) !important;
}

.section::before,
.features-section-merged::before,
.characters-section::before,
.editions-section::before {
  background:
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.48) 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% 8%, rgba(255,216,118,.26) 0 1px, transparent 1.6px),
    radial-gradient(circle at 54% 34%, rgba(112,220,255,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 86% 18%, rgba(255,138,184,.24) 0 1px, transparent 1.6px),
    linear-gradient(118deg, transparent 0 64%, rgba(255, 138, 184, .055) 64% 65%, transparent 65%),
    linear-gradient(130deg, transparent 0 76%, rgba(112, 220, 255, .05) 76% 77%, transparent 77%) !important;
  background-size: auto !important;
  opacity: .75 !important;
}

.features-title-banner {
  display: block !important;
  margin: 0 0 30px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #fff7ee !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

.characters-title-band {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.52) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 44%, rgba(255,216,118,.22) 0 1px, transparent 1.6px),
    linear-gradient(180deg, var(--night-2) 0%, var(--night-1) 100%) !important;
  color: #fff7ee !important;
  padding: clamp(56px, 7vw, 86px) 0 clamp(18px, 3vw, 28px) !important;
  border-top: 1px solid rgba(255,255,255,.06);
}

.characters-title-band h2,
.features-title-banner,
.features-title-banner h2 {
  color: #fff7ee !important;
  text-shadow: 0 16px 38px rgba(0,0,0,.34), 0 0 22px rgba(255,138,184,.12) !important;
}

.characters-bg {
  background:
    radial-gradient(circle at 12% 26%, rgba(255,255,255,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 32% 82%, rgba(255,216,118,.24) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 16%, rgba(112,220,255,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 70%, rgba(255,138,184,.22) 0 1px, transparent 1.6px),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-0) 100%) !important;
  color: var(--text) !important;
}

.character-grid-panel,
#characters .character-grid-panel,
.character-copy,
.character-left .character-copy,
.character-hero-frame,
.feature-spotlight-copy,
.feature-card,
.feature-lead,
.edition-card,
.trailer-card {
  background:
    linear-gradient(180deg, var(--bloom-panel-2), var(--bloom-panel)) !important;
  border-color: var(--bloom-line) !important;
  color: #fff7ee !important;
}

.character-grid button,
#characters .character-grid button,
.character-thumb {
  background:
    linear-gradient(180deg, rgba(36,18,49,.92), rgba(16,8,26,.94)) !important;
  border: 1px solid rgba(255,190,214,.18) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.2) !important;
}

.character-grid button.active,
#characters .character-grid button.active,
.character-thumb.is-active {
  border-color: rgba(255, 216, 118, .72) !important;
  box-shadow:
    0 0 0 2px rgba(255, 138, 184, .28),
    0 0 22px rgba(255, 216, 118, .18),
    0 14px 32px rgba(0,0,0,.28) !important;
}

.character-grid button.active::after,
#characters .character-grid button.active::after {
  border-color: rgba(255, 247, 238, .76) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 138, 184, .58) !important;
}

.character-copy .eyebrow,
.feature-spotlight-copy .eyebrow,
.eyebrow {
  color: var(--bloom-gold) !important;
}

.character-copy h3,
.character-name,
.feature-spotlight-copy h3,
.feature-card h4,
.feature-card h3,
.edition-body h3 {
  color: #fff7ee !important;
}

.character-copy p,
.character-quote,
.feature-spotlight-copy p,
.feature-card p,
.edition-body li,
.edition-body ul {
  color: #ead0dc !important;
}

.character-hero-frame {
  box-shadow: none !important;
  overflow: visible !important;
}

.character-hero-frame::before {
  content: "";
  position: absolute;
  inset: 10% 4% 8%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,216,118,.18), transparent 34%),
    radial-gradient(circle at 65% 34%, rgba(255,138,184,.14), transparent 34%);
  filter: blur(1px);
}

.character-hero-frame img {
  position: relative !important;
  z-index: 1 !important;
}

.feature-spotlight-media {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.42) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 20%, rgba(112,220,255,.2) 0 1px, transparent 1.5px),
    linear-gradient(135deg, rgba(36, 18, 49, .96), rgba(16, 8, 26, .94)) !important;
  border-color: rgba(255,190,214,.18) !important;
}

.feature-card img,
.feature-lead img,
.edition-card img,
.character-grid img {
  border-color: rgba(255,190,214,.16) !important;
}

@media (max-width: 760px) {
  .characters-title-band {
    padding-top: 52px !important;
  }
}

/* V51: Ubisoft-like typography only */
:root {
  --font-display: "Ubisoft Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Ubisoft Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body,
button,
input,
.btn,
.site-nav,
.footer-resource-links,
.edition-body,
.character-copy,
.feature-card,
.feature-spotlight-copy,
.newsletter-cta,
.follow-socials {
  font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
.section-heading h2,
.features-title-banner,
.features-title-banner h2,
.characters-title-band h2,
.edition-body h3,
.character-name,
.character-copy h3,
.feature-spotlight-copy h3,
.feature-card h3,
.feature-card h4,
.subpage-title,
.legal-card h1,
.legal-card h2,
.press-card h1,
.press-card h2,
.guideline-card h1,
.guideline-card h2 {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  letter-spacing: .01em !important;
}

.hero h1,
.section-heading h2,
.features-title-banner,
.features-title-banner h2,
.characters-title-band h2 {
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.features-title-banner,
.characters-title-band h2 {
  transform: none !important;
  skew: none !important;
}

.section-heading h2,
.features-title-banner,
.features-title-banner h2,
.characters-title-band h2 {
  line-height: .98 !important;
}

/* V52: Character V50 base without halo */
#characters .character-hero-frame::before,
.character-hero-frame::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

#characters .character-hero-frame::after,
.character-hero-frame::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 250px !important;
  height: 500px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at center,
      color-mix(in srgb, var(--character-accent, #9b6dff) 92%, transparent) 0%,
      color-mix(in srgb, var(--character-accent, #9b6dff) 56%, transparent) 42%,
      color-mix(in srgb, var(--character-accent, #9b6dff) 18%, transparent) 66%,
      transparent 88%) !important;
  filter: blur(30px) !important;
  opacity: .50 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}


/* V53: per-character image placement tweaks */
.character-hero-frame img[data-character-feature] {
  transform: translateX(var(--character-image-offset-x, 0px)) scale(var(--character-image-scale, 1)) !important;
  transform-origin: center center !important;
}


/* V54: tighter section starts and anchor landings */
html {
  scroll-padding-top: 70px !important;
}

#features.features-section-merged,
#features.features-section,
.media-section,
#buy.editions-section {
  padding-top: clamp(34px, 4.5vw, 50px) !important;
}

#characters.characters-section .characters-title-band {
  padding-top: clamp(28px, 4vw, 40px) !important;
}


/* V55: hero platform logos are informational, not button-like */
.platform-strip.platform-strip-logos {
  align-items: flex-start !important;
  gap: clamp(20px, 3vw, 34px) !important;
}

.platform-logo-badge,
.platform-logo-badge-nes,
.platform-logo-badge-steam {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.platform-logo-badge-nintendo-family {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

.platform-logo-badge img {
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}

.platform-logo-badge-nes img.platform-logo-nes {
  width: min(175px, 35vw) !important;
  height: auto !important;
}

.platform-logo-badge-nes img.platform-logo-famicom {
  width: min(210px, 42vw) !important;
  height: auto !important;
}

.platform-logo-badge-steam img {
  width: min(165px, 34vw) !important;
  height: auto !important;
}

@media (max-width: 560px) {
  .platform-strip.platform-strip-logos {
    gap: 18px !important;
  }

  .platform-logo-badge-nes img.platform-logo-nes {
    width: min(150px, 52vw) !important;
  }

  .platform-logo-badge-nes img.platform-logo-famicom {
    width: min(180px, 62vw) !important;
  }

  .platform-logo-badge-steam img {
    width: min(145px, 52vw) !important;
  }
}


/* V56: platform logo sizing for Famicom, Steam, GOG, and itch */
.platform-logo-badge-nes img.platform-logo-nes,
.platform-logo-badge-nes img.platform-logo-famicom {
  width: min(175px, 35vw) !important;
  height: auto !important;
}

.platform-logo-badge-store {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 auto !important;
}

.platform-logo-badge-store img,
.platform-logo-badge-steam img,
.platform-logo-badge-gog img,
.platform-logo-badge-itch img {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
}

.platform-logo-badge-gog img {
  width: 60px !important;
  height: 60px !important;
}

.platform-logo-badge-itch img {
  width: 56px !important;
  height: 56px !important;
}

@media (max-width: 560px) {
  .platform-logo-badge-nes img.platform-logo-nes,
  .platform-logo-badge-nes img.platform-logo-famicom {
    width: min(150px, 52vw) !important;
  }

  .platform-logo-badge-store {
    width: 48px !important;
    height: 48px !important;
  }

  .platform-logo-badge-store img,
  .platform-logo-badge-steam img,
  .platform-logo-badge-gog img,
  .platform-logo-badge-itch img {
    width: 48px !important;
    height: 48px !important;
  }
}


/* V57: two centered platform logo rows */
.platform-strip.platform-strip-logos {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  gap: 12px !important;
}

.platform-logo-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.platform-logo-row-hardware {
  gap: clamp(16px, 2.4vw, 28px) !important;
}

.platform-logo-row-stores {
  gap: clamp(18px, 2.2vw, 26px) !important;
}

.platform-logo-badge-nes img.platform-logo-nes,
.platform-logo-badge-famicom img.platform-logo-famicom {
  width: min(175px, 34vw) !important;
  max-width: 175px !important;
  height: auto !important;
}

.platform-logo-badge-store,
.platform-logo-badge-steam,
.platform-logo-badge-gog,
.platform-logo-badge-itch {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
}

.platform-logo-badge-store img,
.platform-logo-badge-steam img,
.platform-logo-badge-gog img,
.platform-logo-badge-itch img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
}

.platform-logo-badge-gog img {
  width: 56px !important;
  height: 56px !important;
}

.platform-logo-badge-itch img {
  width: 52px !important;
  height: 52px !important;
}

@media (max-width: 560px) {
  .platform-strip.platform-strip-logos {
    gap: 10px !important;
  }

  .platform-logo-row-hardware {
    gap: 14px !important;
  }

  .platform-logo-badge-nes img.platform-logo-nes,
  .platform-logo-badge-famicom img.platform-logo-famicom {
    width: min(140px, 42vw) !important;
    max-width: 140px !important;
  }

  .platform-logo-badge-store,
  .platform-logo-badge-steam,
  .platform-logo-badge-gog,
  .platform-logo-badge-itch {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  .platform-logo-badge-store img,
  .platform-logo-badge-steam img,
  .platform-logo-badge-gog img,
  .platform-logo-badge-itch img {
    width: 46px !important;
    height: 46px !important;
  }
}


/* V58: Get the Game edition status layout */
.edition-status-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.edition-status-grid-physical {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edition-status-grid-digital {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.edition-status-item {
  display: flex;
  min-height: 84px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 14px 12px;
  border-top: 1px solid rgba(255, 216, 118, .26);
  border-bottom: 1px solid rgba(255, 190, 214, .14);
  color: #fff7ee;
  text-align: center;
  text-decoration: none;
}

.edition-status-item strong {
  display: block;
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.edition-status-item span {
  display: block;
  color: #ead0dc;
  font-size: .94rem;
  line-height: 1.15;
}

.edition-status-link {
  transition: transform .2s ease, border-color .2s ease;
}

.edition-status-link:hover,
.edition-status-link:focus-visible {
  transform: translateY(-2px);
  border-top-color: rgba(255, 216, 118, .72);
}

@media (max-width: 720px) {
  .edition-status-grid-physical,
  .edition-status-grid-digital {
    grid-template-columns: 1fr;
  }
}


/* V59: Get the Game edition descriptions */
.edition-description {
  margin: 8px 0 0;
  color: #ead0dc;
  font-size: .98rem;
  line-height: 1.42;
}

.edition-description + .edition-status-grid {
  margin-top: 18px;
}


/* V60: Get the Game status items behave like CTA buttons */
.edition-status-item {
  min-height: 78px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255, 216, 118, .2) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .065) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}

.edition-status-link {
  cursor: pointer;
  background: linear-gradient(90deg, rgba(255, 138, 184, .96), rgba(255, 216, 118, .92)) !important;
  border-color: rgba(255, 247, 238, .42) !important;
  color: #180c23 !important;
  box-shadow: 0 16px 34px rgba(255, 138, 184, .2) !important;
}

.edition-status-link strong,
.edition-status-link span {
  color: #180c23 !important;
}

.edition-status-disabled {
  cursor: not-allowed;
  opacity: .58;
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
}

.edition-status-disabled strong,
.edition-status-disabled span {
  color: rgba(234, 208, 220, .82) !important;
}

.edition-status-link:hover,
.edition-status-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 247, 238, .66) !important;
  box-shadow: 0 18px 38px rgba(255, 138, 184, .26) !important;
}


/* V61: character thumbnail micro-positioning */
#characters .character-grid button:nth-child(3) img {
  transform: scale(2.28) translateX(-5px) translateY(-4%) !important;
}

#characters .character-grid button:nth-child(6) img {
  transform: scale(2.14) translateX(5px) translateY(-3%) !important;
}


/* V62: email social button */
.social-logo-email {
  background: linear-gradient(135deg, #fff7ee, #ffd876) !important;
  color: #180c23 !important;
}

.social-logo-email svg {
  width: 22px;
  height: 22px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* V64: replace hero stone texture with abstract starry eclipse background */
.hero-bg {
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 247, 238, .18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 22%, rgba(255, 216, 118, .22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 12%, rgba(112, 220, 255, .2) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 68%, rgba(255, 138, 184, .18) 0 1px, transparent 1.6px),
    radial-gradient(ellipse 540px 420px at 78% 34%, rgba(255, 216, 118, .18), transparent 54%),
    radial-gradient(ellipse 620px 520px at 86% 46%, rgba(255, 138, 184, .14), transparent 62%),
    radial-gradient(circle at 82% 40%, rgba(7, 5, 13, .92) 0 12%, rgba(7, 5, 13, .66) 13% 19%, transparent 30%),
    linear-gradient(115deg, transparent 0 58%, rgba(255, 138, 184, .08) 58% 59%, transparent 59%),
    linear-gradient(128deg, transparent 0 72%, rgba(112, 220, 255, .07) 72% 73%, transparent 73%),
    linear-gradient(180deg, #090611 0%, #12081d 46%, #07050d 100%) !important;
  background-image:
    radial-gradient(circle at 72% 24%, rgba(255, 247, 238, .18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 22%, rgba(255, 216, 118, .22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 12%, rgba(112, 220, 255, .2) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 68%, rgba(255, 138, 184, .18) 0 1px, transparent 1.6px),
    radial-gradient(ellipse 540px 420px at 78% 34%, rgba(255, 216, 118, .18), transparent 54%),
    radial-gradient(ellipse 620px 520px at 86% 46%, rgba(255, 138, 184, .14), transparent 62%),
    radial-gradient(circle at 82% 40%, rgba(7, 5, 13, .92) 0 12%, rgba(7, 5, 13, .66) 13% 19%, transparent 30%),
    linear-gradient(115deg, transparent 0 58%, rgba(255, 138, 184, .08) 58% 59%, transparent 59%),
    linear-gradient(128deg, transparent 0 72%, rgba(112, 220, 255, .07) 72% 73%, transparent 73%),
    linear-gradient(180deg, #090611 0%, #12081d 46%, #07050d 100%) !important;
  filter: none !important;
}

.hero-overlay {
  background:
    radial-gradient(ellipse at 74% 34%, rgba(255, 216, 118, .16), transparent 34%),
    radial-gradient(ellipse at 82% 46%, rgba(255, 138, 184, .16), transparent 42%),
    linear-gradient(90deg, rgba(9, 6, 17, .96) 0%, rgba(18, 8, 29, .84) 48%, rgba(9, 6, 17, .18) 100%) !important;
}


/* V65: larger cropped header logo without increasing header height */
.site-header {
  overflow: visible !important;
}

.header-inner {
  min-height: 58px !important;
  height: 58px !important;
}

.brand {
  display: flex !important;
  align-items: center !important;
  width: clamp(148px, 17vw, 220px) !important;
  height: 48px !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

.brand img {
  width: 100% !important;
  height: 74px !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: translateY(-1px) scale(1.08) !important;
  transform-origin: left center !important;
}

@media (max-width: 760px) {
  .brand {
    width: clamp(126px, 38vw, 170px) !important;
    height: 44px !important;
  }

  .brand img {
    height: 66px !important;
    transform: translateY(-1px) scale(1.06) !important;
  }
}


/* V66: soften header logo crop so subtitle remains visible */
.brand {
  width: clamp(158px, 18vw, 230px) !important;
  height: 54px !important;
  overflow: hidden !important;
}

.brand img {
  width: 100% !important;
  height: 56px !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: translateY(0) scale(1.02) !important;
  transform-origin: left center !important;
}

@media (max-width: 760px) {
  .brand {
    width: clamp(134px, 40vw, 182px) !important;
    height: 48px !important;
  }

  .brand img {
    height: 50px !important;
    transform: translateY(0) scale(1.01) !important;
  }
}


/* V67: abstract product-shot stage for transparent Features image */
.feature-spotlight-media {
  position: relative !important;
  isolation: isolate;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 247, 238, .45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 30% 76%, rgba(255, 216, 118, .28) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 20%, rgba(112, 220, 255, .24) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 66%, rgba(255, 138, 184, .28) 0 1px, transparent 1.6px),
    radial-gradient(ellipse 420px 260px at 50% 58%, rgba(255, 216, 118, .18), transparent 58%),
    radial-gradient(ellipse 560px 360px at 50% 48%, rgba(255, 138, 184, .12), transparent 64%),
    radial-gradient(circle at 50% 42%, rgba(8, 5, 14, .9) 0 16%, rgba(8, 5, 14, .58) 17% 24%, transparent 38%),
    linear-gradient(125deg, transparent 0 62%, rgba(255, 138, 184, .09) 62% 63%, transparent 63%),
    linear-gradient(138deg, transparent 0 72%, rgba(112, 220, 255, .075) 72% 73%, transparent 73%),
    linear-gradient(180deg, rgba(22, 9, 34, .98), rgba(9, 6, 17, .98)) !important;
  border-color: rgba(255, 216, 118, .22) !important;
}

.feature-spotlight-media::before,
.feature-spotlight-media::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
}

.feature-spotlight-media::before {
  inset: 9% 11% 14% !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(ellipse at center, rgba(255, 247, 238, .22), rgba(255, 216, 118, .12) 26%, rgba(255, 138, 184, .08) 44%, transparent 68%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 247, 238, .08),
    0 0 44px rgba(255, 216, 118, .12),
    0 0 92px rgba(255, 138, 184, .08) !important;
  filter: blur(.2px) !important;
}

.feature-spotlight-media::after {
  left: 12% !important;
  right: 12% !important;
  bottom: 7% !important;
  z-index: 1 !important;
  height: 18% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at center, rgba(255, 216, 118, .2), rgba(255, 138, 184, .12) 42%, transparent 72%) !important;
  filter: blur(16px) !important;
  opacity: .82 !important;
}

.feature-product-shot {
  position: relative !important;
  z-index: 2 !important;
  filter:
    drop-shadow(0 22px 34px rgba(0, 0, 0, .42))
    drop-shadow(0 0 18px rgba(255, 216, 118, .08)) !important;
}


/* V68: tighter hero text-to-art spacing */
@media (min-width: 981px) {
  .hero-grid {
    grid-template-columns: minmax(0, .98fr) minmax(320px, .88fr) !important;
    gap: clamp(12px, 2vw, 28px) !important;
  }

  .hero-side {
    justify-self: start !important;
    transform: translateX(-10px) !important;
  }
}

@media (max-width: 980px) {
  .hero-side {
    transform: none !important;
  }
}


/* V69: blue-only product-shot stage */
.feature-spotlight-media {
  background:
    radial-gradient(circle at 14% 18%, rgba(230, 247, 255, .48) 0 1px, transparent 1.5px),
    radial-gradient(circle at 30% 76%, rgba(112, 220, 255, .28) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 20%, rgba(142, 166, 255, .26) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 66%, rgba(87, 190, 255, .22) 0 1px, transparent 1.6px),
    radial-gradient(ellipse 420px 260px at 50% 58%, rgba(112, 220, 255, .18), transparent 58%),
    radial-gradient(ellipse 560px 360px at 50% 48%, rgba(102, 128, 255, .14), transparent 64%),
    radial-gradient(circle at 50% 42%, rgba(8, 7, 22, .92) 0 16%, rgba(8, 7, 22, .58) 17% 24%, transparent 38%),
    linear-gradient(125deg, transparent 0 62%, rgba(112, 220, 255, .08) 62% 63%, transparent 63%),
    linear-gradient(138deg, transparent 0 72%, rgba(142, 166, 255, .08) 72% 73%, transparent 73%),
    linear-gradient(180deg, rgba(9, 14, 37, .98), rgba(5, 7, 18, .98)) !important;
  border-color: rgba(112, 220, 255, .26) !important;
}

.feature-spotlight-media::before {
  background:
    radial-gradient(ellipse at center, rgba(230, 247, 255, .18), rgba(112, 220, 255, .14) 28%, rgba(102, 128, 255, .1) 46%, transparent 68%) !important;
  box-shadow:
    0 0 0 1px rgba(230, 247, 255, .08),
    0 0 44px rgba(112, 220, 255, .14),
    0 0 92px rgba(102, 128, 255, .1) !important;
}

.feature-spotlight-media::after {
  background:
    radial-gradient(ellipse at center, rgba(112, 220, 255, .22), rgba(102, 128, 255, .14) 42%, transparent 72%) !important;
}

.feature-product-shot {
  filter:
    drop-shadow(0 22px 34px rgba(0, 0, 0, .42))
    drop-shadow(0 0 18px rgba(112, 220, 255, .12)) !important;
}


/* V70: branded starry-sky preloader */
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(38, 18, 58, .92), transparent 44%),
    linear-gradient(180deg, #07050d 0%, #13091d 48%, #080610 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .72s ease, visibility .72s ease;
}

.site-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-sky,
.preloader-sky::before,
.preloader-sky::after,
.preloader-halo {
  position: absolute;
  inset: -18%;
  pointer-events: none;
}

.preloader-sky {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.82) 0 1px, transparent 1.5px),
    radial-gradient(circle at 22% 68%, rgba(112,220,255,.56) 0 1px, transparent 1.6px),
    radial-gradient(circle at 38% 24%, rgba(255,247,238,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 76%, rgba(142,166,255,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 18%, rgba(255,138,184,.42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 88% 58%, rgba(112,220,255,.55) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(9, 6, 17, .2), rgba(9, 6, 17, .78));
  background-size: 260px 260px, 340px 340px, 410px 410px, 300px 300px, 460px 460px, 380px 380px, auto;
  animation: preloader-camera-rise 2.35s cubic-bezier(.2,.72,.18,1) both;
}

.preloader-sky::before,
.preloader-sky::after {
  content: "";
  opacity: .74;
  background:
    radial-gradient(circle at 16% 34%, rgba(255,255,255,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 16%, rgba(112,220,255,.38) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 28%, rgba(255,247,238,.54) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 76%, rgba(142,166,255,.42) 0 1px, transparent 1.5px);
  background-size: 520px 520px, 440px 440px, 620px 620px, 500px 500px;
  animation: preloader-camera-rise-deep 2.55s cubic-bezier(.2,.72,.18,1) both;
}

.preloader-sky::after {
  opacity: .36;
  filter: blur(.2px);
  transform: scale(1.24);
  animation-duration: 2.9s;
}

.preloader-halo {
  z-index: 1;
  inset: auto auto 50% 50%;
  width: min(640px, 86vw);
  height: min(210px, 34vw);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(185,226,255,.42), rgba(112,220,255,.24) 28%, rgba(142,166,255,.14) 48%, transparent 70%);
  filter: blur(18px);
  opacity: 0;
  transform: translate(-110%, 72%) rotate(-5deg) scale(.72);
  animation: preloader-halo-pass 2.15s cubic-bezier(.18,.72,.22,1) .2s both;
}

.preloader-logo {
  position: relative;
  z-index: 2;
  width: min(520px, 78vw);
  height: auto;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  filter:
    drop-shadow(0 0 10px rgba(112,220,255,.34))
    drop-shadow(0 18px 34px rgba(0,0,0,.36));
  animation: preloader-logo-in 1.55s ease .34s both;
}

@keyframes preloader-camera-rise {
  0% { transform: translateY(10%) scale(1.08); opacity: .64; }
  100% { transform: translateY(-10%) scale(1); opacity: 1; }
}

@keyframes preloader-camera-rise-deep {
  0% { transform: translateY(18%) scale(1.16); opacity: .22; }
  100% { transform: translateY(-14%) scale(1.05); opacity: .78; }
}

@keyframes preloader-logo-in {
  0% { opacity: 0; transform: translateY(14px) scale(.96); }
  45% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes preloader-halo-pass {
  0% { opacity: 0; transform: translate(-120%, 72%) rotate(-5deg) scale(.7); }
  28% { opacity: .86; }
  74% { opacity: .68; }
  100% { opacity: 0; transform: translate(-2%, 72%) rotate(-5deg) scale(1.08); }
}

@media (max-width: 640px) {
  .preloader-logo {
    width: min(380px, 84vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-sky,
  .preloader-sky::before,
  .preloader-sky::after,
  .preloader-halo,
  .preloader-logo {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* V71: tighter vector logo treatment for the opening loader */
.preloader-logo {
  width: min(420px, 68vw);
  transform-origin: center;
}

@media (max-width: 640px) {
  .preloader-logo {
    width: min(330px, 78vw);
  }
}


/* V72: compact centered loader mark */
.preloader-logo {
  width: min(390px, 64vw);
}

@media (max-width: 640px) {
  .preloader-logo {
    width: min(310px, 76vw);
  }
}


/* V73: faithful cropped loading mark from the original artwork */
.preloader-logo {
  width: min(414px, 68vw);
}

@media (max-width: 640px) {
  .preloader-logo {
    width: min(320px, 78vw);
  }
}


/* V74: loading sequence without halo, then ECG-style logo reveal */
.preloader-halo {
  display: none !important;
}

.preloader-sky {
  animation: preloader-camera-rise-v74 1.85s cubic-bezier(.18,.78,.18,1) both;
}

.preloader-sky::before {
  animation: preloader-camera-rise-deep-v74 2.05s cubic-bezier(.18,.78,.18,1) both;
}

.preloader-sky::after {
  animation: preloader-camera-rise-far-v74 2.2s cubic-bezier(.18,.78,.18,1) both;
}

.preloader-logo-stage {
  position: relative;
  z-index: 2;
  width: min(414px, 68vw);
  opacity: 0;
  transform: translateY(8px);
  animation: preloader-logo-stage-v74 2.35s ease 1.68s both;
}

.preloader-logo-stage .preloader-logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  filter:
    drop-shadow(0 0 9px rgba(112,220,255,.34))
    drop-shadow(0 14px 28px rgba(0,0,0,.34));
  animation: preloader-ecg-reveal-v74 1.18s steps(28, end) 1.86s both;
}

.preloader-logo-scan {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(233,248,255,.96) 18%, rgba(185,226,255,1) 50%, rgba(233,248,255,.96) 82%, transparent);
  box-shadow:
    0 0 10px rgba(185,226,255,.72),
    0 0 22px rgba(112,220,255,.46);
  opacity: 0;
  transform: translateX(-3px);
  animation: preloader-ecg-scan-v74 1.18s steps(28, end) 1.86s both;
}

@keyframes preloader-camera-rise-v74 {
  0% { transform: translateY(18%) scale(1.1); opacity: .44; }
  72% { transform: translateY(-10%) scale(1.02); opacity: 1; }
  100% { transform: translateY(-10%) scale(1.02); opacity: 1; }
}

@keyframes preloader-camera-rise-deep-v74 {
  0% { transform: translateY(24%) scale(1.18); opacity: .18; }
  75% { transform: translateY(-16%) scale(1.06); opacity: .76; }
  100% { transform: translateY(-16%) scale(1.06); opacity: .76; }
}

@keyframes preloader-camera-rise-far-v74 {
  0% { transform: translateY(30%) scale(1.3); opacity: .1; }
  76% { transform: translateY(-18%) scale(1.14); opacity: .36; }
  100% { transform: translateY(-18%) scale(1.14); opacity: .36; }
}

@keyframes preloader-logo-stage-v74 {
  0%, 10% { opacity: 0; transform: translateY(8px); }
  20%, 72% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

@keyframes preloader-ecg-reveal-v74 {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes preloader-ecg-scan-v74 {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  86% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (max-width: 640px) {
  .preloader-logo-stage {
    width: min(320px, 78vw);
  }
}


/* V75: logo reveal starts after the sky settles */
.preloader-sky {
  animation-duration: 1.85s;
}

.preloader-sky::before {
  animation-duration: 1.95s;
}

.preloader-sky::after {
  animation-duration: 2s;
}

.preloader-logo-stage {
  animation: preloader-logo-stage-v74 2.35s ease 2.02s both;
}

.preloader-logo-stage .preloader-logo,
.preloader-logo-scan {
  animation-delay: 2.18s;
}

@media (prefers-reduced-motion: reduce) {
  .preloader-logo-stage,
  .preloader-logo-scan {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* V76: remove scan cursor, keep only a small spark under the left logo star */
.preloader-logo-scan {
  display: none !important;
}

.preloader-logo-spark {
  position: absolute;
  left: 10.2%;
  top: 61%;
  width: 20px;
  height: 20px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.28) rotate(45deg);
  animation: preloader-logo-spark-v76 .72s ease 2.14s both;
}

.preloader-logo-spark::before,
.preloader-logo-spark::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  border-radius: 999px;
  background: rgba(232, 248, 255, .98);
  box-shadow:
    0 0 8px rgba(185, 226, 255, .82),
    0 0 18px rgba(112, 220, 255, .5);
  transform: translate(-50%, -50%);
}

.preloader-logo-spark::before {
  width: 18px;
  height: 3px;
}

.preloader-logo-spark::after {
  width: 3px;
  height: 18px;
}

@keyframes preloader-logo-spark-v76 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.22) rotate(45deg); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); }
  58% { opacity: .86; transform: translate(-50%, -50%) scale(.72) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.16) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-logo-spark {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* V77: earlier, larger spark flash at the start of the logo reveal */
.preloader-logo-spark {
  width: 32px;
  height: 32px;
  animation: preloader-logo-spark-v77 .82s ease 1.98s both;
}

.preloader-logo-spark::before {
  width: 30px;
  height: 4px;
}

.preloader-logo-spark::after {
  width: 4px;
  height: 30px;
}

.preloader-logo-spark::before,
.preloader-logo-spark::after {
  box-shadow:
    0 0 12px rgba(232, 248, 255, .92),
    0 0 26px rgba(185, 226, 255, .72),
    0 0 42px rgba(112, 220, 255, .36);
}

@keyframes preloader-logo-spark-v77 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18) rotate(45deg); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(45deg); }
  48% { opacity: .95; transform: translate(-50%, -50%) scale(.82) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.14) rotate(45deg); }
}


/* V78: earlier, larger, slightly lower loading spark */
.preloader-logo-spark {
  top: calc(61% + 5px);
  width: 48px;
  height: 48px;
  animation: preloader-logo-spark-v78 .88s ease 1.82s both;
}

.preloader-logo-spark::before {
  width: 45px;
  height: 6px;
}

.preloader-logo-spark::after {
  width: 6px;
  height: 45px;
}

.preloader-logo-spark::before,
.preloader-logo-spark::after {
  box-shadow:
    0 0 16px rgba(232, 248, 255, .98),
    0 0 34px rgba(185, 226, 255, .78),
    0 0 56px rgba(112, 220, 255, .42);
}

@keyframes preloader-logo-spark-v78 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.14) rotate(45deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(45deg); }
  46% { opacity: .92; transform: translate(-50%, -50%) scale(.86) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.12) rotate(45deg); }
}


/* V79: spark comes .3s earlier and a touch larger */
.preloader-logo-spark {
  width: 54px;
  height: 54px;
  animation: preloader-logo-spark-v79 .9s ease 1.52s both;
}

.preloader-logo-spark::before {
  width: 51px;
  height: 7px;
}

.preloader-logo-spark::after {
  width: 7px;
  height: 51px;
}

@keyframes preloader-logo-spark-v79 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.12) rotate(45deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(45deg); }
  46% { opacity: .9; transform: translate(-50%, -50%) scale(.84) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.1) rotate(45deg); }
}


/* V80: keep early spark visible and reverse star movement for upward camera feel */
.preloader-sky {
  animation: preloader-camera-rise-v80 1.85s cubic-bezier(.18,.78,.18,1) both;
}

.preloader-sky::before {
  animation: preloader-camera-rise-deep-v80 1.95s cubic-bezier(.18,.78,.18,1) both;
}

.preloader-sky::after {
  animation: preloader-camera-rise-far-v80 2s cubic-bezier(.18,.78,.18,1) both;
}

.preloader-logo-stage {
  opacity: 1;
  animation: preloader-logo-stage-v80 3.18s ease 1.42s both;
}

@keyframes preloader-camera-rise-v80 {
  0% { transform: translateY(-18%) scale(1.1); opacity: .44; }
  72% { transform: translateY(10%) scale(1.02); opacity: 1; }
  100% { transform: translateY(10%) scale(1.02); opacity: 1; }
}

@keyframes preloader-camera-rise-deep-v80 {
  0% { transform: translateY(-24%) scale(1.18); opacity: .18; }
  75% { transform: translateY(16%) scale(1.06); opacity: .76; }
  100% { transform: translateY(16%) scale(1.06); opacity: .76; }
}

@keyframes preloader-camera-rise-far-v80 {
  0% { transform: translateY(-30%) scale(1.3); opacity: .1; }
  76% { transform: translateY(18%) scale(1.14); opacity: .36; }
  100% { transform: translateY(18%) scale(1.14); opacity: .36; }
}

@keyframes preloader-logo-stage-v80 {
  0%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}


/* V81: soft bloom flash instead of an X-shaped sparkle */
.preloader-logo-spark {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,1) 0 7%, rgba(220,244,255,.95) 8% 18%, rgba(185,226,255,.58) 19% 34%, rgba(112,220,255,.2) 35% 54%, transparent 55%);
  box-shadow:
    0 0 18px rgba(232, 248, 255, .88),
    0 0 38px rgba(185, 226, 255, .58),
    0 0 62px rgba(112, 220, 255, .34);
  animation: preloader-logo-bloom-v81 .9s ease 1.52s both;
}

.preloader-logo-spark::before,
.preloader-logo-spark::after {
  inset: 50% auto auto 50%;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 2px rgba(218, 244, 255, .52);
  transform: translate(-50%, -50%) scale(.15);
}

.preloader-logo-spark::after {
  width: 42%;
  height: 42%;
  background: radial-gradient(circle, rgba(255,255,255,.98), rgba(185,226,255,.72) 38%, transparent 68%);
  box-shadow: 0 0 16px rgba(232,248,255,.92);
}

@keyframes preloader-logo-bloom-v81 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.16); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  45% { opacity: .78; transform: translate(-50%, -50%) scale(.82); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
}


/* V82: smaller bloom, slightly later */
.preloader-logo-spark {
  width: 29px;
  height: 29px;
  box-shadow:
    0 0 9px rgba(232, 248, 255, .84),
    0 0 19px rgba(185, 226, 255, .5),
    0 0 31px rgba(112, 220, 255, .28);
  animation: preloader-logo-bloom-v81 .9s ease 1.62s both;
}

.preloader-logo-spark::after {
  box-shadow: 0 0 8px rgba(232,248,255,.86);
}


/* V83: bloom reduced by half again */
.preloader-logo-spark {
  width: 14.5px;
  height: 14.5px;
  box-shadow:
    0 0 5px rgba(232, 248, 255, .78),
    0 0 10px rgba(185, 226, 255, .44),
    0 0 16px rgba(112, 220, 255, .24);
}

.preloader-logo-spark::after {
  box-shadow: 0 0 4px rgba(232,248,255,.78);
}


/* V84: logo sweep 30 percent faster */
.preloader-logo-stage .preloader-logo {
  animation-duration: .83s;
}


/* V85: fade out immediately after faster sweep */
.preloader-logo-stage {
  animation: preloader-logo-stage-v85 2s ease 1.42s both;
}

@keyframes preloader-logo-stage-v85 {
  0%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}


/* V86: purple-pink spark tint */
.preloader-logo-spark {
  background:
    radial-gradient(circle, rgba(255,244,255,1) 0 8%, rgba(242,188,255,.92) 9% 21%, rgba(205,138,255,.5) 22% 38%, rgba(150,126,255,.18) 39% 56%, transparent 57%);
  box-shadow:
    0 0 5px rgba(255, 226, 255, .82),
    0 0 11px rgba(222, 150, 255, .5),
    0 0 17px rgba(139, 124, 255, .28);
}

.preloader-logo-spark::before {
  box-shadow: 0 0 0 1px rgba(236, 170, 255, .42);
}

.preloader-logo-spark::after {
  background: radial-gradient(circle, rgba(255,246,255,.98), rgba(232,166,255,.68) 38%, transparent 68%);
  box-shadow: 0 0 5px rgba(246,210,255,.78);
}


/* V87: single moving star layer to avoid stars overlapping between parallax layers */
.preloader-sky {
  background:
    radial-gradient(circle at 9% 14%, rgba(255,255,255,.78) 0 1px, transparent 1.6px),
    radial-gradient(circle at 18% 72%, rgba(112,220,255,.48) 0 1px, transparent 1.7px),
    radial-gradient(circle at 31% 28%, rgba(255,247,238,.66) 0 1px, transparent 1.6px),
    radial-gradient(circle at 43% 84%, rgba(142,166,255,.44) 0 1px, transparent 1.7px),
    radial-gradient(circle at 57% 18%, rgba(255,138,184,.34) 0 1px, transparent 1.7px),
    radial-gradient(circle at 69% 64%, rgba(112,220,255,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 31%, rgba(255,255,255,.62) 0 1px, transparent 1.7px),
    radial-gradient(circle at 92% 78%, rgba(142,166,255,.38) 0 1px, transparent 1.7px),
    linear-gradient(180deg, rgba(9, 6, 17, .18), rgba(9, 6, 17, .78));
  background-size: 100% 100%;
}

.preloader-sky::before,
.preloader-sky::after {
  background:
    radial-gradient(ellipse at 28% 32%, rgba(112,220,255,.08), transparent 32%),
    radial-gradient(ellipse at 72% 68%, rgba(208,142,255,.1), transparent 36%),
    linear-gradient(180deg, transparent, rgba(13, 8, 24, .2));
}

.preloader-sky::before {
  opacity: .55;
}

.preloader-sky::after {
  opacity: .28;
}


/* V88: denser single-layer star field without layer overlap */
.preloader-sky {
  background:
    radial-gradient(circle at 6% 10%, rgba(255,255,255,.72) 0 1px, transparent 1.55px),
    radial-gradient(circle at 9% 14%, rgba(255,255,255,.78) 0 1px, transparent 1.6px),
    radial-gradient(circle at 13% 45%, rgba(142,166,255,.42) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 18% 72%, rgba(112,220,255,.48) 0 1px, transparent 1.7px),
    radial-gradient(circle at 23% 23%, rgba(255,247,238,.5) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 29% 58%, rgba(255,138,184,.32) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 31% 28%, rgba(255,247,238,.66) 0 1px, transparent 1.6px),
    radial-gradient(circle at 37% 12%, rgba(112,220,255,.38) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 43% 84%, rgba(142,166,255,.44) 0 1px, transparent 1.7px),
    radial-gradient(circle at 49% 42%, rgba(255,255,255,.5) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 57% 18%, rgba(255,138,184,.34) 0 1px, transparent 1.7px),
    radial-gradient(circle at 62% 88%, rgba(112,220,255,.35) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 69% 64%, rgba(112,220,255,.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 73% 9%, rgba(255,247,238,.46) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 78% 48%, rgba(142,166,255,.36) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 82% 31%, rgba(255,255,255,.62) 0 1px, transparent 1.7px),
    radial-gradient(circle at 88% 15%, rgba(112,220,255,.34) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 92% 78%, rgba(142,166,255,.38) 0 1px, transparent 1.7px),
    radial-gradient(circle at 96% 52%, rgba(255,247,238,.45) 0 .9px, transparent 1.45px),
    linear-gradient(180deg, rgba(9, 6, 17, .18), rgba(9, 6, 17, .78));
  background-size: 100% 100%;
}


/* V89: visibly pink-purple loader spark */
.preloader-logo-spark {
  background:
    radial-gradient(circle, rgba(255,154,239,1) 0 14%, rgba(232,96,255,.88) 15% 34%, rgba(160,96,255,.48) 35% 58%, rgba(112,84,220,.18) 59% 72%, transparent 73%);
  box-shadow:
    0 0 5px rgba(255, 154, 239, .9),
    0 0 11px rgba(232, 96, 255, .62),
    0 0 18px rgba(160, 96, 255, .34);
}

.preloader-logo-spark::before {
  box-shadow: 0 0 0 1px rgba(232, 96, 255, .55);
}

.preloader-logo-spark::after {
  background: radial-gradient(circle, rgba(255,174,245,.98), rgba(232,96,255,.72) 42%, transparent 70%);
  box-shadow: 0 0 5px rgba(255,154,239,.86);
}


/* V90: slower ascent into the stars, logo waits for the sky to settle */
.preloader-sky {
  animation: preloader-camera-rise-v80 3s cubic-bezier(.22,.68,.18,1) both;
}

.preloader-sky::before {
  animation: preloader-camera-rise-deep-v80 3.18s cubic-bezier(.22,.68,.18,1) both;
}

.preloader-sky::after {
  animation: preloader-camera-rise-far-v80 3.32s cubic-bezier(.22,.68,.18,1) both;
}

.preloader-logo-stage {
  animation: preloader-logo-stage-v90 1.55s ease 3.05s both;
}

.preloader-logo-stage .preloader-logo {
  animation-delay: 3.22s;
  animation-duration: .83s;
}

.preloader-logo-spark {
  animation-delay: 2.95s;
}

@keyframes preloader-logo-stage-v90 {
  0%, 74% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}


/* V91: one extra second at the start of the loader */
.preloader-sky {
  animation: preloader-camera-rise-v80 4s cubic-bezier(.22,.68,.18,1) both;
}

.preloader-sky::before {
  animation: preloader-camera-rise-deep-v80 4.18s cubic-bezier(.22,.68,.18,1) both;
}

.preloader-sky::after {
  animation: preloader-camera-rise-far-v80 4.32s cubic-bezier(.22,.68,.18,1) both;
}

.preloader-logo-stage {
  animation: preloader-logo-stage-v90 1.55s ease 4.05s both;
}

.preloader-logo-stage .preloader-logo {
  animation-delay: 4.22s;
  animation-duration: .83s;
}

.preloader-logo-spark {
  animation-delay: 3.95s;
}


/* V92: half-second hold before the slow sky ascent */
.preloader-sky {
  animation: preloader-camera-hold-rise-v92 5.4s cubic-bezier(.25,.62,.2,1) both;
}

.preloader-sky::before {
  animation: preloader-camera-hold-rise-deep-v92 5.62s cubic-bezier(.25,.62,.2,1) both;
}

.preloader-sky::after {
  animation: preloader-camera-hold-rise-far-v92 5.78s cubic-bezier(.25,.62,.2,1) both;
}

.preloader-logo-stage {
  animation: preloader-logo-stage-v90 1.55s ease 5.5s both;
}

.preloader-logo-stage .preloader-logo {
  animation-delay: 5.68s;
  animation-duration: .83s;
}

.preloader-logo-spark {
  animation-delay: 5.4s;
}

@keyframes preloader-camera-hold-rise-v92 {
  0%, 9% { transform: translateY(-18%) scale(1.1); opacity: .44; }
  72% { transform: translateY(10%) scale(1.02); opacity: 1; }
  100% { transform: translateY(10%) scale(1.02); opacity: 1; }
}

@keyframes preloader-camera-hold-rise-deep-v92 {
  0%, 9% { transform: translateY(-24%) scale(1.18); opacity: .18; }
  75% { transform: translateY(16%) scale(1.06); opacity: .76; }
  100% { transform: translateY(16%) scale(1.06); opacity: .76; }
}

@keyframes preloader-camera-hold-rise-far-v92 {
  0%, 9% { transform: translateY(-30%) scale(1.3); opacity: .1; }
  76% { transform: translateY(18%) scale(1.14); opacity: .36; }
  100% { transform: translateY(18%) scale(1.14); opacity: .36; }
}


/* V93: no pause between sky stop and logo */
.preloader-sky {
  animation: preloader-camera-hold-rise-nogap-v93 5.4s cubic-bezier(.25,.62,.2,1) both;
}

.preloader-sky::before {
  animation: preloader-camera-hold-rise-deep-nogap-v93 5.62s cubic-bezier(.25,.62,.2,1) both;
}

.preloader-sky::after {
  animation: preloader-camera-hold-rise-far-nogap-v93 5.78s cubic-bezier(.25,.62,.2,1) both;
}

.preloader-logo-stage {
  animation: preloader-logo-stage-v90 1.55s ease 5.82s both;
}

.preloader-logo-stage .preloader-logo {
  animation-delay: 6s;
  animation-duration: .83s;
}

.preloader-logo-spark {
  animation-delay: 5.78s;
}

@keyframes preloader-camera-hold-rise-nogap-v93 {
  0%, 9% { transform: translateY(-18%) scale(1.1); opacity: .44; }
  100% { transform: translateY(10%) scale(1.02); opacity: 1; }
}

@keyframes preloader-camera-hold-rise-deep-nogap-v93 {
  0%, 9% { transform: translateY(-24%) scale(1.18); opacity: .18; }
  100% { transform: translateY(16%) scale(1.06); opacity: .76; }
}

@keyframes preloader-camera-hold-rise-far-nogap-v93 {
  0%, 9% { transform: translateY(-30%) scale(1.3); opacity: .1; }
  100% { transform: translateY(18%) scale(1.14); opacity: .36; }
}


/* V94: logo starts before the sky fully stops */
.preloader-logo-stage {
  animation: preloader-logo-stage-v90 1.7s ease 5.35s both;
}

.preloader-logo-stage .preloader-logo {
  animation-delay: 5.5s;
  animation-duration: .83s;
}

.preloader-logo-spark {
  animation-delay: 5.48s;
}


/* V95: spark and logo start .4s earlier */
.preloader-logo-stage {
  animation: preloader-logo-stage-v90 1.7s ease 4.95s both;
}

.preloader-logo-stage .preloader-logo {
  animation-delay: 5.1s;
  animation-duration: .83s;
}

.preloader-logo-spark {
  animation-delay: 5.08s;
}


/* V96: spark and logo start another .4s earlier */
.preloader-logo-stage {
  animation: preloader-logo-stage-v90 1.7s ease 4.55s both;
}

.preloader-logo-stage .preloader-logo {
  animation-delay: 4.7s;
  animation-duration: .83s;
}

.preloader-logo-spark {
  animation-delay: 4.68s;
}


/* V97: spark and logo start another .5s earlier */
.preloader-logo-stage {
  animation: preloader-logo-stage-v90 1.7s ease 4.05s both;
}

.preloader-logo-stage .preloader-logo {
  animation-delay: 4.2s;
  animation-duration: .83s;
}

.preloader-logo-spark {
  animation-delay: 4.18s;
}


/* V98: one-second still sky, one-second gentle ascent, then spark-to-logo sequence */
.preloader-sky {
  animation: preloader-camera-hold-rise-v98 2s linear both;
}

.preloader-sky::before {
  animation: preloader-camera-hold-rise-deep-v98 2s linear both;
}

.preloader-sky::after {
  animation: preloader-camera-hold-rise-far-v98 2s linear both;
}

.preloader-logo-stage {
  animation: preloader-logo-stage-v98 1.62s ease 2.02s both;
}

.preloader-logo-stage .preloader-logo {
  animation-delay: 2.12s;
  animation-duration: .83s;
}

.preloader-logo-spark {
  animation-delay: 2s;
}

@keyframes preloader-camera-hold-rise-v98 {
  0%, 50% { transform: translateY(-10%) scale(1.06); opacity: .58; }
  100% { transform: translateY(2%) scale(1.02); opacity: 1; }
}

@keyframes preloader-camera-hold-rise-deep-v98 {
  0%, 50% { transform: translateY(-14%) scale(1.12); opacity: .22; }
  100% { transform: translateY(5%) scale(1.05); opacity: .68; }
}

@keyframes preloader-camera-hold-rise-far-v98 {
  0%, 50% { transform: translateY(-18%) scale(1.2); opacity: .12; }
  100% { transform: translateY(7%) scale(1.1); opacity: .32; }
}

@keyframes preloader-logo-stage-v98 {
  0%, 75% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}


/* V99: double the still pause and the gentle star ascent */
.preloader-sky {
  animation: preloader-camera-hold-rise-v99 4s linear both;
}

.preloader-sky::before {
  animation: preloader-camera-hold-rise-deep-v99 4s linear both;
}

.preloader-sky::after {
  animation: preloader-camera-hold-rise-far-v99 4s linear both;
}

.preloader-logo-stage {
  animation: preloader-logo-stage-v99 1.62s ease 4.02s both;
}

.preloader-logo-stage .preloader-logo {
  animation-delay: 4.12s;
  animation-duration: .83s;
}

.preloader-logo-spark {
  animation-delay: 4s;
}

@keyframes preloader-camera-hold-rise-v99 {
  0%, 50% { transform: translateY(-10%) scale(1.06); opacity: .58; }
  100% { transform: translateY(2%) scale(1.02); opacity: 1; }
}

@keyframes preloader-camera-hold-rise-deep-v99 {
  0%, 50% { transform: translateY(-14%) scale(1.12); opacity: .22; }
  100% { transform: translateY(5%) scale(1.05); opacity: .68; }
}

@keyframes preloader-camera-hold-rise-far-v99 {
  0%, 50% { transform: translateY(-18%) scale(1.2); opacity: .12; }
  100% { transform: translateY(7%) scale(1.1); opacity: .32; }
}

@keyframes preloader-logo-stage-v99 {
  0%, 75% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}


/* V100: subtle star flicker while preserving the V99 loader timing */
.preloader-sky {
  animation:
    preloader-camera-hold-rise-v99 4s linear both,
    preloader-star-flicker-v100 1.65s ease-in-out .18s infinite;
}

.preloader-sky::before {
  animation:
    preloader-camera-hold-rise-deep-v99 4s linear both,
    preloader-star-flicker-soft-v100 2.25s ease-in-out .42s infinite;
}

.preloader-sky::after {
  animation:
    preloader-camera-hold-rise-far-v99 4s linear both,
    preloader-star-flicker-soft-v100 1.95s ease-in-out .82s infinite;
}

@keyframes preloader-star-flicker-v100 {
  0%, 100% { filter: brightness(1) saturate(1); }
  22% { filter: brightness(1.05) saturate(1.04); }
  39% { filter: brightness(.96) saturate(.98); }
  58% { filter: brightness(1.1) saturate(1.08); }
  76% { filter: brightness(.99) saturate(1.02); }
}

@keyframes preloader-star-flicker-soft-v100 {
  0%, 100% { filter: brightness(1); }
  34% { filter: brightness(1.08); }
  64% { filter: brightness(.96); }
}


/* V101: stronger star brightness variation and earlier logo spark */
.preloader-sky {
  animation:
    preloader-camera-hold-rise-v99 4s linear both,
    preloader-star-flicker-v101 1.18s ease-in-out .08s infinite;
}

.preloader-sky::before {
  animation:
    preloader-camera-hold-rise-deep-v99 4s linear both,
    preloader-star-flicker-soft-v101 1.72s ease-in-out .28s infinite;
}

.preloader-sky::after {
  animation:
    preloader-camera-hold-rise-far-v99 4s linear both,
    preloader-star-flicker-soft-v101 1.44s ease-in-out .58s infinite;
}

.preloader-logo-spark {
  animation-delay: 3.8s;
}

@keyframes preloader-star-flicker-v101 {
  0%, 100% { filter: brightness(1) contrast(1) saturate(1); }
  16% { filter: brightness(1.42) contrast(1.16) saturate(1.14); }
  34% { filter: brightness(.78) contrast(.98) saturate(.96); }
  55% { filter: brightness(1.62) contrast(1.22) saturate(1.2); }
  76% { filter: brightness(.86) contrast(1.04) saturate(1.02); }
}

@keyframes preloader-star-flicker-soft-v101 {
  0%, 100% { filter: brightness(1) contrast(1); }
  28% { filter: brightness(1.32) contrast(1.1); }
  57% { filter: brightness(.82) contrast(.98); }
  78% { filter: brightness(1.48) contrast(1.16); }
}


/* V102: separate star flicker from the mist/cloud layer */
.preloader-sky {
  z-index: 0;
  background:
    radial-gradient(ellipse at 28% 24%, rgba(112,220,255,.09), transparent 36%),
    radial-gradient(ellipse at 72% 70%, rgba(208,142,255,.1), transparent 40%),
    linear-gradient(180deg, rgba(9, 6, 17, .2), rgba(9, 6, 17, .78));
  background-size: 100% 100%;
  animation: preloader-camera-hold-rise-v99 4s linear both;
  filter: none;
}

.preloader-sky::before,
.preloader-sky::after {
  background:
    radial-gradient(ellipse at 28% 32%, rgba(112,220,255,.08), transparent 32%),
    radial-gradient(ellipse at 72% 68%, rgba(208,142,255,.1), transparent 36%),
    linear-gradient(180deg, transparent, rgba(13, 8, 24, .2));
  background-size: 100% 100%;
  animation: preloader-camera-hold-rise-deep-v99 4s linear both;
  filter: none;
}

.preloader-sky::after {
  animation: preloader-camera-hold-rise-far-v99 4s linear both;
  filter: blur(.2px);
}

.preloader-star-layer,
.preloader-star-layer::before,
.preloader-star-layer::after {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background-size: 100% 100%;
}

.preloader-star-layer {
  z-index: 1;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 6% 10%, rgba(255,255,255,.82) 0 1px, transparent 1.55px),
    radial-gradient(circle at 18% 72%, rgba(112,220,255,.58) 0 1px, transparent 1.7px),
    radial-gradient(circle at 31% 28%, rgba(255,247,238,.76) 0 1px, transparent 1.6px),
    radial-gradient(circle at 43% 84%, rgba(142,166,255,.54) 0 1px, transparent 1.7px),
    radial-gradient(circle at 57% 18%, rgba(255,138,184,.44) 0 1px, transparent 1.7px),
    radial-gradient(circle at 69% 64%, rgba(112,220,255,.62) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 31%, rgba(255,255,255,.74) 0 1px, transparent 1.7px),
    radial-gradient(circle at 92% 78%, rgba(142,166,255,.48) 0 1px, transparent 1.7px);
  animation:
    preloader-camera-hold-rise-v99 4s linear both,
    preloader-star-layer-flicker-v102 1.36s ease-in-out .12s infinite;
  will-change: transform, filter;
}

.preloader-star-layer::before,
.preloader-star-layer::after {
  content: "";
  opacity: .62;
}

.preloader-star-layer::before {
  background:
    radial-gradient(circle at 13% 45%, rgba(142,166,255,.7) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 23% 23%, rgba(255,247,238,.72) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 37% 12%, rgba(112,220,255,.62) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 49% 42%, rgba(255,255,255,.72) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 62% 88%, rgba(112,220,255,.56) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 73% 9%, rgba(255,247,238,.68) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 88% 15%, rgba(112,220,255,.58) 0 .9px, transparent 1.45px);
  animation: preloader-star-subflicker-v102 1.08s ease-in-out .22s infinite;
}

.preloader-star-layer::after {
  background:
    radial-gradient(circle at 9% 14%, rgba(255,255,255,.78) 0 1px, transparent 1.6px),
    radial-gradient(circle at 29% 58%, rgba(255,138,184,.48) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 78% 48%, rgba(142,166,255,.58) 0 .9px, transparent 1.45px),
    radial-gradient(circle at 96% 52%, rgba(255,247,238,.66) 0 .9px, transparent 1.45px);
  animation: preloader-star-subflicker-v102 1.42s ease-in-out .54s infinite reverse;
}

.preloader-logo-stage {
  z-index: 2;
}

.preloader-logo-spark {
  animation-delay: 3.8s;
}

@keyframes preloader-star-layer-flicker-v102 {
  0%, 100% { filter: brightness(1) contrast(1) saturate(1); }
  18% { filter: brightness(1.45) contrast(1.16) saturate(1.12); }
  36% { filter: brightness(.72) contrast(.98) saturate(.96); }
  58% { filter: brightness(1.68) contrast(1.24) saturate(1.18); }
  80% { filter: brightness(.9) contrast(1.04) saturate(1.02); }
}

@keyframes preloader-star-subflicker-v102 {
  0%, 100% { opacity: .42; filter: brightness(.9); }
  24% { opacity: .9; filter: brightness(1.55); }
  48% { opacity: .28; filter: brightness(.72); }
  72% { opacity: .78; filter: brightness(1.35); }
}


/* V103: soft luminous edge pass for the low-resolution loading logo */
.preloader-logo-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("assets/loading-lip-logo-faithful.png?v=20260715-faithful") center / contain no-repeat;
  opacity: .72;
  clip-path: inset(0 100% 0 0);
  filter:
    blur(2.5px)
    brightness(1.28)
    drop-shadow(0 0 2px rgba(186, 226, 255, .62))
    drop-shadow(0 0 5px rgba(210, 136, 255, .28));
  animation: preloader-ecg-reveal-v74 .83s steps(28, end) 4.12s both;
}

.preloader-logo-stage .preloader-logo {
  position: relative;
  z-index: 2;
  image-rendering: auto;
  filter:
    drop-shadow(0 0 2px rgba(186, 226, 255, .55))
    drop-shadow(0 0 3px rgba(210, 136, 255, .22))
    drop-shadow(0 14px 28px rgba(0, 0, 0, .34));
}

.preloader-logo-spark {
  z-index: 3;
}


/* V104: mobile hero shows the game-title key art before the explanatory copy */
@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(22px, 4vw, 34px) !important;
  }

  .hero-side {
    order: 1 !important;
    justify-self: center !important;
    width: min(480px, 84vw) !important;
    transform: none !important;
  }

  .hero-copy {
    order: 2 !important;
    justify-self: center !important;
    width: min(760px, 100%) !important;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 24px !important;
  }

  .hero-grid {
    gap: 22px !important;
  }

  .hero-side {
    width: min(390px, 92vw) !important;
  }

  .hero-poster {
    transform: none !important;
  }
}


/* V105: fullscreen image gallery navigation */
.lightbox {
  grid-template-areas: "stage" !important;
}

.lightbox img[data-lightbox-image] {
  grid-area: stage;
  z-index: 2;
  cursor: default;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: clamp(46px, 6vw, 68px);
  height: clamp(46px, 6vw, 68px);
  border: 1px solid rgba(255, 247, 238, .26);
  border-radius: 999px;
  background: rgba(11, 6, 18, .58);
  color: #fff7ee;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0,0,0,.26), 0 0 24px rgba(112, 220, 255, .12);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.lightbox-nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  border-top: 3px solid currentColor;
  border-left: 3px solid currentColor;
}

.lightbox-nav-prev {
  left: clamp(14px, 4vw, 42px);
}

.lightbox-nav-prev::before {
  transform: translate(-36%, -50%) rotate(-45deg);
}

.lightbox-nav-next {
  right: clamp(14px, 4vw, 42px);
}

.lightbox-nav-next::before {
  transform: translate(-64%, -50%) rotate(135deg);
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: rgba(255, 138, 184, .2);
  border-color: rgba(255, 247, 238, .6);
  transform: translateY(-50%) scale(1.06);
  outline: none;
}

.lightbox-nav[hidden] {
  display: none !important;
}

.lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 4vw, 30px);
  z-index: 4;
  transform: translateX(-50%);
  padding: 7px 12px;
  border: 1px solid rgba(255, 247, 238, .18);
  border-radius: 999px;
  background: rgba(11, 6, 18, .62);
  color: rgba(255, 247, 238, .88);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
}

@media (max-width: 640px) {
  .lightbox {
    padding: 14px 58px !important;
  }

  .lightbox-close {
    top: 12px !important;
    right: 12px !important;
  }

  .lightbox-nav {
    width: 42px;
    height: 42px;
  }

  .lightbox-nav::before {
    width: 13px;
    height: 13px;
    border-width: 2px;
  }
}


/* V106: language selector */
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(255, 247, 238, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 10px 26px rgba(0,0,0,.22);
}

.language-switch button {
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 247, 238, .16);
  border-radius: 50%;
  overflow: hidden;
  background: rgba(10, 7, 18, .72);
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 4px 12px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.language-switch button::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.18),
    inset 0 0 8px rgba(255,255,255,.18);
}

.language-switch button[data-language="en"]::before {
  background: #fff url("assets/icons/uk-flag-circle.png") center / cover no-repeat;
}

.language-switch button[data-language="fr"]::before {
  background: linear-gradient(90deg, #0055a4 0 33.333%, #fff 33.333% 66.666%, #ef4135 66.666% 100%);
}

.language-switch button[data-language="jp"]::before {
  background: radial-gradient(circle at center, #bc002d 0 34%, transparent 35%), #fff;
}

.language-switch button.is-active {
  background: rgba(255, 247, 238, .08);
  border-color: rgba(255, 247, 238, .62);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(255, 247, 238, .16),
    0 5px 14px rgba(0,0,0,.24);
}

.language-switch button:disabled {
  cursor: not-allowed;
  opacity: .38;
}

.language-switch button:not(:disabled):hover,
.language-switch button:not(:disabled):focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 247, 238, .52);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 16px rgba(255, 247, 238, .18);
  outline: none;
}

.language-switch button.is-active:hover,
.language-switch button.is-active:focus-visible {
  border-color: rgba(255, 247, 238, .78);
}

@media (min-width: 761px) {
  .language-switch {
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  .header-inner {
    gap: 10px !important;
  }

  .language-switch {
    margin-left: auto;
    order: 2;
  }

  .nav-toggle {
    order: 3;
  }

  .site-nav {
    order: 4;
  }

  .language-switch {
    gap: 6px;
    padding: 4px;
  }

  .language-switch button {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  .language-switch button::before {
    inset: 5px;
  }
}


/* V107: French character copy needs extra room without clipping the name. */
#characters .character-copy,
#characters .character-left .character-copy {
  height: auto !important;
  min-height: 286px !important;
  max-height: none !important;
  overflow: visible !important;
}

#characters .character-copy h3,
#characters .character-left .character-copy h3 {
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 900px) {
  #characters .character-copy,
  #characters .character-left .character-copy {
    min-height: 272px !important;
  }
}

@media (max-width: 560px) {
  #characters .character-copy,
  #characters .character-left .character-copy {
    min-height: 260px !important;
  }
}


/* V110: Fit long French Lyra quote without changing the character card. */
#characters .character-quote {
  font-size: .985rem !important;
  letter-spacing: 0 !important;
}


/* V111: Keep feature spotlight headline subordinate on tablet/mobile. */
@media (max-width: 900px) {
  .feature-spotlight-copy h3 {
    font-size: clamp(1.45rem, 4.2vw, 1.9rem) !important;
    line-height: 1.03 !important;
    margin-bottom: 14px !important;
  }
}

@media (max-width: 760px) {
  .feature-spotlight-copy h3 {
    font-size: clamp(1.35rem, 5vw, 1.65rem) !important;
    line-height: 1.04 !important;
  }
}

@media (max-width: 520px) {
  .feature-spotlight-copy h3 {
    font-size: clamp(1.22rem, 6.2vw, 1.48rem) !important;
  }
}


/* V113: Keep long French Features title fully visible on narrow iPhone widths. */
@media (max-width: 430px) {
  #features .features-title-banner {
    font-size: clamp(1.55rem, 7.7vw, 1.92rem) !important;
    line-height: 1.04 !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 370px) {
  #features .features-title-banner {
    font-size: clamp(1.42rem, 7.4vw, 1.72rem) !important;
  }
}


/* V116: First Japanese draft visual switching. */
html[data-language="jp"] .platform-logo-badge-famicom {
  order: -1;
}

html[data-language="jp"] .platform-logo-badge-nes {
  order: 2;
}

html[data-language="jp"] #characters .character-copy h3,
html[data-language="jp"] #characters .character-left .character-copy h3 {
  font-size: clamp(2.08rem, 3.35vw, 3.05rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

html[data-language="jp"] #characters .character-jp {
  font-size: clamp(.95rem, 1.35vw, 1.12rem) !important;
  letter-spacing: 0 !important;
  opacity: .88 !important;
}

html[data-language="jp"] .hero-title-line {
  letter-spacing: 0 !important;
}

html[data-language="jp"] .edition-physical-image,
html[data-language="jp"] .edition-digital-image {
  background: radial-gradient(circle at 50% 42%, rgba(112, 220, 255, .14), rgba(25, 11, 34, .92) 66%) !important;
}

@media (max-width: 560px) {
  html[data-language="jp"] #characters .character-copy h3,
  html[data-language="jp"] #characters .character-left .character-copy h3 {
    font-size: clamp(1.72rem, 9vw, 2.18rem) !important;
  }
}

/* V127: keep Japanese store labels in natural case. */
html[data-language="jp"] .edition-status-item strong {
  text-transform: none;
}

/* V130: intro animation restored for launch testing. */
.site-preloader {
  display: grid;
}

/* V133: clean language-switch loader state with no default-logo fallback. */
.site-preloader.is-language-switch {
  display: grid;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .44s ease, visibility .44s ease;
}

.site-preloader.is-language-switch.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-preloader.is-language-switch .preloader-sky {
  transform: translateY(2%) scale(1.02);
  opacity: 1;
  animation: none !important;
}

.site-preloader.is-language-switch .preloader-sky::before {
  transform: translateY(5%) scale(1.05);
  opacity: .68;
  animation: none !important;
}

.site-preloader.is-language-switch .preloader-sky::after {
  transform: translateY(7%) scale(1.1);
  opacity: .32;
  animation: none !important;
}

.site-preloader.is-language-switch .preloader-star-layer {
  transform: translateY(2%) scale(1.02);
  opacity: 1;
  animation: preloader-star-layer-flicker-v102 1.36s ease-in-out .12s infinite !important;
}

.site-preloader.is-language-switch .preloader-logo-stage {
  opacity: 0;
  transform: translateY(0);
  animation: none !important;
}

.site-preloader.is-language-switch .preloader-logo-stage::before,
.site-preloader.is-language-switch .preloader-logo-stage .preloader-logo {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: none !important;
}

.site-preloader.is-language-switch .preloader-logo-spark {
  opacity: 0;
  animation: none !important;
}

.site-preloader.is-language-switch.is-language-running .preloader-sky {
  animation: preloader-language-mist-breathe-v133 1.95s ease-in-out both !important;
}

.site-preloader.is-language-switch.is-language-running .preloader-sky::before {
  animation: preloader-language-mist-breathe-v133 2s ease-in-out .06s both !important;
}

.site-preloader.is-language-switch.is-language-running .preloader-sky::after {
  animation: preloader-language-mist-breathe-v133 2.08s ease-in-out .12s both !important;
}

.site-preloader.is-language-switch.is-language-running .preloader-logo-stage {
  animation: preloader-logo-stage-language-v133 1.62s ease .3s both !important;
}

.site-preloader.is-language-switch.is-language-running .preloader-logo-stage::before {
  animation: preloader-ecg-reveal-v74 .83s steps(28, end) .48s both !important;
}

.site-preloader.is-language-switch.is-language-running .preloader-logo-stage .preloader-logo {
  animation: preloader-ecg-reveal-v74 .83s steps(28, end) .48s both !important;
}

.site-preloader.is-language-switch.is-language-running .preloader-logo-spark {
  animation: preloader-logo-bloom-v81 .9s ease .28s both !important;
}

.site-preloader.is-hidden .preloader-logo-stage,
.site-preloader.is-hidden .preloader-logo-stage::before,
.site-preloader.is-hidden .preloader-logo-stage .preloader-logo,
.site-preloader.is-hidden .preloader-logo-spark {
  opacity: 0 !important;
  animation: none !important;
}

@keyframes preloader-language-mist-breathe-v133 {
  0%, 100% { filter: brightness(1) saturate(1); }
  46% { filter: brightness(1.08) saturate(1.08); }
}

@keyframes preloader-logo-stage-language-v133 {
  0%, 12% { opacity: 0; transform: translateY(0); }
  22%, 74% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* V136: keep language swaps away from the logo sweep so the reveal stays smooth. */
.site-preloader.is-language-switch .preloader-logo-stage {
  contain: paint;
  will-change: opacity;
}

.site-preloader.is-language-switch .preloader-logo-stage::before,
.site-preloader.is-language-switch .preloader-logo-stage .preloader-logo {
  backface-visibility: hidden;
  will-change: clip-path, opacity;
}

/* V137: language swap waits until the overlay is opaque, then the logo sequence starts. */
.site-preloader.is-language-switch {
  transition: opacity .42s ease, visibility .42s ease;
}

.site-preloader.is-language-switch.is-language-running .preloader-logo-stage {
  animation: preloader-logo-stage-language-v133 1.7s ease .64s both !important;
}

.site-preloader.is-language-switch.is-language-running .preloader-logo-stage::before {
  animation: preloader-ecg-reveal-v74 .83s steps(28, end) .78s both !important;
}

.site-preloader.is-language-switch.is-language-running .preloader-logo-stage .preloader-logo {
  animation: preloader-ecg-reveal-v74 .83s steps(28, end) .78s both !important;
}

.site-preloader.is-language-switch.is-language-running .preloader-logo-spark {
  animation: preloader-logo-bloom-v81 .9s ease .6s both !important;
}

/* V138: skip the opening intro when returning from a legal/credit subpage. */
html.skip-opening-preloader .site-preloader {
  display: none !important;
}


/* V141: play the short return loader on index after Back from subpages. */
html.return-short-preloader .site-preloader {
  display: grid;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-sky,
html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-sky::before,
html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-sky::after,
html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-star-layer,
html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-logo-stage,
html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-logo-stage::before,
html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-logo-stage .preloader-logo,
html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-logo-spark {
  animation: none !important;
}

html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-logo-stage {
  opacity: 0;
}

html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-logo-stage::before,
html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-logo-stage .preloader-logo {
  clip-path: inset(0 100% 0 0);
}

html.return-short-preloader .site-preloader:not(.is-language-running) .preloader-logo-spark {
  opacity: 0;
}

/* V156: Crystal Facets 05 site-wide background. */
html {
  background: #060817 !important;
}

body {
  position: relative;
  background: #060817 !important;
}

.flow-site-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #060817 0%, #10172f 48%, #080610 100%);
}

.flow-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: none;
  mix-blend-mode: normal;
}

.flow-bg-lines {
  inset: -50%;
  background:
    linear-gradient(26deg, transparent 0 62%, rgba(255, 247, 238, .18) 62.05% 62.25%, transparent 62.5%),
    linear-gradient(121deg, transparent 0 28%, rgba(112, 220, 255, .18) 28.05% 28.25%, transparent 28.5%),
    linear-gradient(80deg, transparent 0 82%, rgba(159, 255, 208, .14) 82.05% 82.25%, transparent 82.5%);
  opacity: .72;
  animation: flow-crystal-line-drift-v156 38s ease-in-out infinite alternate;
}

.flow-bg-facets {
  background:
    conic-gradient(from 20deg at 18% 74%, transparent 0 8%, rgba(112, 220, 255, .16) 8% 10%, transparent 10% 100%),
    conic-gradient(from 116deg at 86% 42%, transparent 0 8%, rgba(159, 255, 208, .12) 8% 10%, transparent 10% 100%);
  opacity: .82;
}

.flow-bg-stars-static {
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 247, 238, .48) 0 1px, transparent 1.7px),
    radial-gradient(circle at 52% 86%, rgba(255, 138, 184, .46) 0 .9px, transparent 1.6px),
    radial-gradient(circle at 88% 22%, rgba(112, 220, 255, .42) 0 .9px, transparent 1.6px);
  opacity: .68;
}

.flow-bg-stars-a {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 247, 238, .98) 0 1.05px, transparent 1.8px),
    radial-gradient(circle at 31% 68%, rgba(112, 220, 255, .9) 0 .9px, transparent 1.65px),
    radial-gradient(circle at 57% 28%, rgba(255, 138, 184, .92) 0 1px, transparent 1.75px),
    radial-gradient(circle at 84% 82%, rgba(255, 247, 238, .96) 0 .95px, transparent 1.7px);
  opacity: .03;
  animation: flow-star-fade-a-v156 9s ease-in-out infinite;
}

.flow-bg-stars-b {
  background:
    radial-gradient(circle at 21% 78%, rgba(159, 255, 208, .86) 0 .85px, transparent 1.55px),
    radial-gradient(circle at 44% 18%, rgba(255, 247, 238, .95) 0 .9px, transparent 1.65px),
    radial-gradient(circle at 70% 46%, rgba(112, 220, 255, .9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 92% 34%, rgba(255, 138, 184, .88) 0 .85px, transparent 1.55px);
  opacity: .035;
  animation: flow-star-fade-b-v156 13s ease-in-out infinite;
}

.flow-bg-stars-c {
  background:
    radial-gradient(circle at 16% 45%, rgba(255, 138, 184, .86) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 39% 86%, rgba(255, 247, 238, .94) 0 .95px, transparent 1.7px),
    radial-gradient(circle at 62% 72%, rgba(159, 255, 208, .78) 0 .85px, transparent 1.55px),
    radial-gradient(circle at 78% 18%, rgba(112, 220, 255, .88) 0 .9px, transparent 1.65px);
  opacity: .03;
  animation: flow-star-fade-c-v156 17s ease-in-out infinite;
}

.site-header,
main,
.site-footer,
.trailer-modal,
.lightbox {
  position: relative;
  z-index: 1;
}

.site-preloader {
  z-index: 99999;
}

.hero,
#features.features-section-merged,
#features.features-section,
#characters.characters-section,
#characters .characters-title-band,
#characters .characters-bg,
#buy.editions-section,
.media-section,
.site-footer {
  background: transparent !important;
}

.hero-bg,
.hero-overlay,
.hero::before,
.hero::after,
.section::before,
.features-section-merged::before,
.characters-section::before,
.editions-section::before {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

@keyframes flow-crystal-line-drift-v156 {
  from { transform: translate3d(-8.4%, 3.9%, 0); }
  to { transform: translate3d(8.4%, -3.9%, 0); }
}

@keyframes flow-star-fade-a-v156 {
  0%, 100% { opacity: .03; }
  28%, 46% { opacity: 1; }
  70% { opacity: .03; }
}

@keyframes flow-star-fade-b-v156 {
  0%, 100% { opacity: .035; }
  42%, 62% { opacity: .9; }
  82% { opacity: .035; }
}

@keyframes flow-star-fade-c-v156 {
  0%, 18%, 100% { opacity: .03; }
  64%, 84% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-bg-lines,
  .flow-bg-stars-a,
  .flow-bg-stars-b,
  .flow-bg-stars-c {
    animation: none !important;
  }

  .flow-bg-stars-a,
  .flow-bg-stars-b,
  .flow-bg-stars-c {
    opacity: .28;
  }
}