/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · genre: atmospheric · tone: official Kuwaiti studio / cinematic western · anchor hues: studio-gold / hn-red · macrostructure: Photographic Fold / Focused Studio Index · theme: bespoke dual-system · design-system: design.md · nav: N9 compact studio index · footer: Ft5 concise statement/index · enrichment: existing Mishref Studio and HN Gunslinger art only · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */
@import url("tokens.css?v=studio-system-11");

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: var(--rule-hair);
  height: var(--rule-hair);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-padding-top: calc(var(--header-height) + var(--space-lg));
}

body {
  background: var(--studio-black);
  color: var(--studio-white);
}

.skip-link {
  position: fixed;
  inset: var(--space-xs) auto auto var(--space-xs);
  z-index: var(--z-tooltip);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-fine) solid var(--color-focus);
  border-radius: var(--radius-sm);
  background: var(--studio-white);
  color: var(--studio-black);
  font-size: var(--text-sm);
  font-weight: 800;
  opacity: 0;
  transform: translateY(-150%);
}

.skip-link:focus-visible {
  opacity: 1;
  transform: none;
}

body.nav-open {
  overflow: clip;
}

img {
  max-width: 100%;
}

.loader-card img {
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

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

a,
button,
.btn,
.text-link,
.site-nav a,
.footer-column a {
  white-space: nowrap;
}

:focus-visible {
  outline: var(--rule-fine) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

/* Official studio header — full width, never a rounded nav container. */
.site-header.studio-header,
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky);
  display: flex;
  width: 100%;
  max-width: none;
  min-height: var(--header-height);
  align-items: center;
  gap: var(--space-xs);
  padding: max(var(--space-2xs), env(safe-area-inset-top)) var(--page-gutter) var(--space-2xs);
  border: 0;
  border-block-end: var(--rule-hair) solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
  backdrop-filter: none;
}

.site-header.is-scrolled,
body.nav-open .site-header {
  border-block-end-color: color-mix(in oklch, var(--studio-gold) 24%, var(--color-rule));
  background: color-mix(in oklch, var(--studio-black) 92%, transparent);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.site-header .brand {
  order: 1;
  display: inline-flex;
  width: auto;
  height: auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-xs);
  margin-inline-end: auto;
  border-radius: 0;
}

.site-header .brand img {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  object-fit: contain;
}

.brand-wordmark {
  display: none;
  line-height: 1;
}

.brand-wordmark strong,
.brand-wordmark small {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
}

.brand-wordmark strong {
  color: var(--studio-white);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.brand-wordmark small {
  margin-block-start: var(--space-3xs);
  color: var(--studio-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
}

.site-header .nav-toggle {
  order: 4;
  display: grid;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  border: var(--rule-hair) solid color-mix(in oklch, var(--studio-gold) 34%, var(--color-rule));
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--studio-dark) 92%, transparent);
}

.site-header .site-nav {
  position: fixed;
  inset: var(--header-height) 0 auto;
  z-index: var(--z-dropdown);
  order: 2;
  display: grid;
  width: 100%;
  max-height: calc(100dvh - var(--header-height));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin: 0;
  padding: var(--space-xs) var(--page-gutter) max(var(--space-lg), env(safe-area-inset-bottom));
  overflow-y: auto;
  border: 0;
  border-block-end: var(--rule-hair) solid var(--color-rule);
  border-radius: 0;
  background: var(--studio-dark);
  box-shadow: var(--shadow-deep);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}

body.nav-open .site-header .site-nav {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.site-header .site-nav a {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-2xs);
  border: var(--rule-hair) solid var(--color-rule);
  color: var(--studio-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color var(--dur-micro) var(--ease-out);
}

.site-header .site-nav a::after {
  display: none;
}

.site-header .site-nav a:is(:hover, :focus-visible, .is-active) {
  color: var(--studio-white);
}

.site-header .site-nav a.is-active {
  border-color: color-mix(in oklch, var(--studio-gold) 48%, var(--color-rule));
  box-shadow: inset 0 calc(var(--rule-fine) * -1) 0 var(--studio-gold);
}

.site-header .site-nav .mobile-download-link {
  grid-column: auto;
  margin-block-start: 0;
  justify-content: center;
  border: var(--rule-hair) solid var(--studio-gold);
  background: var(--studio-gold);
  color: var(--studio-black);
}

.header-actions {
  display: none;
}

.header-download {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--studio-gold);
  border-radius: var(--radius-sm);
  background: var(--studio-gold);
  color: var(--studio-black);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.header-download:active {
  transform: translateY(1px);
}

.site-header .language-switcher {
  position: relative;
  inset: auto;
  order: 3;
  margin: 0;
}

.site-header .language-toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--studio-dark) 92%, transparent);
}

.site-header .language-menu {
  inset: calc(100% + var(--space-2xs)) 0 auto auto;
  border-radius: var(--radius-sm);
  background: var(--studio-dark);
}

/* Shared buttons and headings. */
.btn,
.preorder-btn,
.header-download {
  min-height: 2.875rem;
  border-radius: var(--radius-sm);
}

.btn {
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.btn::after,
.header-download::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, color-mix(in oklch, var(--studio-white) 18%, transparent) 48%, transparent 72%);
  opacity: 0.65;
  transform: translateX(-100%);
  transition: transform var(--dur-short) var(--ease-out);
  pointer-events: none;
}

.btn-primary {
  border-color: var(--hn-red);
  background: var(--hn-red);
  color: var(--color-accent-ink);
}

.section--studio .btn-primary,
.route-page:not(.game-route) .btn-primary {
  border-color: var(--studio-gold);
  background: var(--studio-gold);
  color: var(--studio-black);
}

.btn-secondary,
.btn-text {
  border-color: color-mix(in oklch, var(--hn-brass) 52%, var(--color-rule));
  background: color-mix(in oklch, var(--hn-gunmetal) 94%, transparent);
  color: var(--hn-ivory);
}

.btn-text {
  border-color: transparent;
  background: transparent;
}

.btn:active {
  transform: translateY(1px);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.text-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-xs);
  border-block-end: var(--rule-hair) solid var(--studio-gold);
  color: var(--studio-white);
  font-size: var(--text-sm);
  font-weight: 700;
  transition:
    color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.section-head {
  display: grid;
  max-width: 44rem;
  gap: var(--space-xs);
  min-width: 0;
}

.section-head--wide {
  max-width: 60rem;
  margin-block-end: var(--space-2xl);
}

.section-index,
.section-kicker,
.game-overline {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  line-height: 1.3;
  text-transform: uppercase;
}

.section-index {
  color: var(--studio-gold);
  font-variant-numeric: tabular-nums;
}

.section-kicker,
.game-overline {
  color: var(--studio-muted);
}

.section--hn .section-index {
  color: var(--hn-brass);
}

.section--hn .section-kicker {
  color: color-mix(in oklch, var(--hn-ivory) 72%, var(--hn-brass));
}

.section-head h2,
.route-hero h1,
.download-cta h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: inherit;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 0.98;
  text-wrap: balance;
}

.section-head h2 {
  font-size: var(--text-display-s);
}

.section-head > p:last-child,
.section-lede {
  max-width: 64ch;
  color: var(--studio-muted);
  font-size: var(--text-md);
  line-height: 1.7;
}

/* Approved character hero: preserve composition, refine only its chrome. */
.character-hero {
  border-block-end: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 24%, var(--color-rule));
}

.loader::before {
  background-image: image-set(
    url("assets/optimized/hn-gunslinger-loading.avif") type("image/avif"),
    url("assets/optimized/hn-gunslinger-loading.webp") type("image/webp"),
    url("assets/hn-gunslinger-loading.jpg") type("image/jpeg")
  );
}

.character-hero .hero-bg-layer::before {
  background-image: image-set(
    url("assets/optimized/hn-gunslinger-collage.avif") type("image/avif"),
    url("assets/optimized/hn-gunslinger-collage.webp") type("image/webp"),
    url("assets/hn-gunslinger-collage.jpg") type("image/jpeg")
  );
}

.character-hero .hero-grain {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: soft-light;
}

.character-hero .hero-vignette {
  background: radial-gradient(circle at 60% 45%, transparent 20%, color-mix(in oklch, var(--hn-black) 72%, transparent) 94%);
}

.character-card.is-active img {
  filter: drop-shadow(0 0 1.1rem color-mix(in oklch, var(--hero-accent) 34%, transparent));
}

.character-mode-toggle,
.character-controls,
.carousel-arrow {
  border-radius: var(--radius-sm);
}

[data-character-name],
.character-copy :is(h1, [data-character-name]),
.download-copy :is(h1, [data-character-name]),
.preorder-page-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-character-count] {
  direction: ltr;
  unicode-bidi: isolate;
}

.hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xs);
}

.hero-actions .btn-primary {
  grid-column: 1 / -1;
}

.hero-actions .btn {
  min-width: 0;
}

/* Home — formal studio layer. */
.section--studio {
  background: var(--studio-black);
  color: var(--studio-white);
}

.studio-section {
  position: relative;
  padding-block: var(--space-3xl) var(--space-4xl);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.studio-intro-grid {
  display: grid;
  gap: var(--space-2xl);
}

.studio-emblem {
  position: relative;
  display: grid;
  min-height: 20rem;
  place-items: center;
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--studio-navy);
}

.studio-emblem::before {
  content: "";
  position: absolute;
  inset: var(--space-md);
  border: var(--rule-hair) solid color-mix(in oklch, var(--studio-gold) 30%, transparent);
}

.studio-emblem img {
  width: min(60%, 17rem);
  opacity: 0.92;
}

.studio-emblem span {
  position: absolute;
  inset: auto var(--space-md) var(--space-md);
  color: var(--studio-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
}

.studio-intro-copy {
  display: grid;
  align-content: start;
  gap: var(--space-md);
}

.studio-intro-copy > p {
  max-width: 66ch;
  margin: 0;
  color: var(--studio-muted);
}

.studio-stats {
  display: grid;
  margin: var(--space-lg) 0;
  border-block: var(--rule-hair) solid var(--color-rule);
}

.studio-stats--two {
  grid-template-columns: minmax(0, 1fr);
}

.studio-stats div {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.studio-stats div:last-child {
  border-block-end: 0;
}

.studio-stats dt,
.studio-stats dd {
  margin: 0;
}

.studio-stats dt {
  color: var(--studio-white);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.studio-stats dd {
  color: var(--studio-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.games-section {
  padding-block: var(--space-4xl);
}

.featured-game {
  display: grid;
  overflow: hidden;
  border: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 30%, var(--color-rule));
  background: var(--hn-gunmetal);
}

.featured-game-art {
  min-height: 22rem;
  margin: 0;
  overflow: hidden;
}

.featured-game-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.05) brightness(0.75);
  transition: transform var(--dur-long) var(--ease-out);
}

.featured-game-copy {
  display: grid;
  align-content: center;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.featured-game-copy h3 {
  margin: 0;
  color: var(--hn-ivory);
  font-size: clamp(2.75rem, 10vw, 5.25rem);
  line-height: 0.9;
}

.featured-game-copy > p:not(.game-overline) {
  max-width: 52ch;
  margin: 0;
  color: color-mix(in oklch, var(--hn-ivory) 76%, var(--hn-brass));
}

.game-overline {
  color: var(--hn-brass);
}

.game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  padding: var(--space-sm) 0;
  border-block: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 28%, var(--color-rule));
  list-style: none;
}

.game-meta li {
  color: var(--hn-ivory);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Home — HN game layer. */
.section--hn {
  background: var(--hn-black);
  color: var(--hn-ivory);
}

.hn-feature-section {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-4xl);
  overflow: hidden;
}

.hn-feature-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--hn-black), color-mix(in oklch, var(--hn-black) 78%, transparent)),
    image-set(
      url("assets/optimized/hn-gunslinger-scene.avif") type("image/avif"),
      url("assets/optimized/hn-gunslinger-scene.webp") type("image/webp"),
      url("assets/hn-gunslinger-scene.png") type("image/png")
    ) center / cover no-repeat;
  filter: saturate(0.7) contrast(1.06);
  opacity: 0.54;
}

.hn-feature-layout {
  display: grid;
  gap: var(--space-2xl);
}

.hn-feature-head > p:last-child,
.duel-head > p:last-child {
  color: color-mix(in oklch, var(--hn-ivory) 70%, var(--hn-brass));
}

.feature-ledger {
  display: grid;
  border-block-start: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 36%, var(--color-rule));
}

.feature-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 28%, var(--color-rule));
}

.feature-panel > span {
  grid-row: 1 / span 2;
  color: var(--hn-brass);
  font-size: var(--text-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.feature-panel h3,
.feature-panel p {
  margin: 0;
}

.feature-panel h3 {
  color: var(--hn-ivory);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1.15;
}

.feature-panel p {
  color: color-mix(in oklch, var(--hn-ivory) 68%, var(--hn-brass));
}

.duel-section {
  padding-block: var(--space-4xl);
  border-block: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 24%, var(--color-rule));
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--hn-red-dark) 22%, var(--hn-black)), var(--hn-black) 40%),
    var(--hn-black);
}

.duel-layout {
  display: grid;
  gap: var(--space-2xl);
}

.duel-sequence {
  display: grid;
  margin: 0;
  padding: 0;
  border-block-start: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 34%, var(--color-rule));
  list-style: none;
}

.duel-sequence li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 28%, var(--color-rule));
}

.duel-sequence span {
  grid-row: 1 / span 2;
  color: var(--hn-brass);
  font-size: var(--text-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.duel-sequence strong {
  color: var(--hn-ivory);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 9vw, 4.25rem);
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.duel-sequence small {
  color: color-mix(in oklch, var(--hn-ivory) 66%, var(--hn-brass));
  font-size: var(--text-sm);
}

.home-characters {
  padding-block: var(--space-4xl);
}

.character-editorial-grid {
  display: grid;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}

.character-profile {
  --character-tone: var(--hn-brass);
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: var(--rule-hair) solid color-mix(in oklch, var(--character-tone) 42%, var(--color-rule));
  background: color-mix(in oklch, var(--character-tone) 16%, var(--hn-gunmetal));
}

.character-profile--rook {
  --character-tone: var(--hn-red);
}

.character-profile--malahi {
  --character-tone: var(--hn-gold);
}

.character-profile--pipe {
  --character-tone: var(--hn-ivory);
}

.character-profile-art {
  position: relative;
  display: grid;
  height: 27rem;
  place-items: end center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 65%, color-mix(in oklch, var(--character-tone) 34%, transparent), transparent 62%);
}

.character-profile-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.character-profile > div:last-child {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border-block-start: var(--rule-hair) solid color-mix(in oklch, var(--character-tone) 34%, var(--color-rule));
}

.character-profile span,
.character-profile h3,
.character-profile p {
  margin: 0;
}

.character-profile span,
.character-profile p {
  color: color-mix(in oklch, var(--character-tone) 72%, var(--hn-ivory));
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.character-profile h3 {
  color: var(--character-tone);
  font-size: clamp(2.6rem, 10vw, 4.6rem);
  line-height: 0.9;
}

.download-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 34rem;
  align-items: end;
  padding-block: var(--space-3xl);
  overflow: hidden;
}

.download-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--hn-black), color-mix(in oklch, var(--hn-black) 64%, transparent));
}

.download-cta-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05) brightness(0.72);
}

.download-cta-content {
  display: grid;
  max-width: var(--page-max);
  gap: var(--space-md);
}

.download-cta h2 {
  font-size: var(--text-display);
}

/* Shared internal route composition. */
.route-page main {
  min-height: 70dvh;
}

.route-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(34rem, 72dvh, 52rem);
  align-items: end;
  padding-block: calc(var(--header-height) + var(--space-3xl)) var(--space-3xl);
  overflow: hidden;
  background: var(--studio-navy);
}

.route-hero--hn {
  background: var(--hn-black);
  color: var(--hn-ivory);
}

.route-hero__media,
.route-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.route-hero__media {
  object-fit: cover;
  filter: saturate(0.72) contrast(1.06) brightness(0.62);
}

.route-hero__shade {
  z-index: -1;
  background: linear-gradient(90deg, var(--studio-black), color-mix(in oklch, var(--studio-black) 58%, transparent));
}

.route-hero--hn .route-hero__shade {
  background:
    linear-gradient(90deg, var(--hn-black), color-mix(in oklch, var(--hn-black) 58%, transparent)),
    linear-gradient(0deg, var(--hn-black), transparent 56%);
}

.route-hero__content {
  display: grid;
  max-width: 48rem;
  gap: var(--space-md);
}

.route-hero h1 {
  font-size: var(--text-display);
}

.route-hero__content > p:not(.section-index, .section-kicker) {
  max-width: 62ch;
  margin: 0;
  color: var(--studio-muted);
  font-size: var(--text-md);
  line-height: 1.7;
}

.route-hero--hn .route-hero__content > p:not(.section-index, .section-kicker) {
  color: color-mix(in oklch, var(--hn-ivory) 72%, var(--hn-brass));
}

.game-subnav {
  position: sticky;
  inset-block-start: var(--header-height);
  z-index: calc(var(--z-sticky) - 1);
  overflow-x: auto;
  border-block: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 28%, var(--color-rule));
  background: color-mix(in oklch, var(--hn-black) 94%, transparent);
  scrollbar-width: none;
  backdrop-filter: blur(8px);
}

.game-overview-page main > .game-subnav:first-child {
  margin-block-start: var(--header-height);
}

.game-subnav::-webkit-scrollbar {
  display: none;
}

.game-subnav__inner {
  display: flex;
  min-width: max-content;
  gap: var(--space-md);
  align-items: center;
  min-height: 3.25rem;
}

.game-subnav a {
  color: color-mix(in oklch, var(--hn-ivory) 68%, var(--hn-brass));
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-subnav a:is(:hover, :focus-visible, .is-active) {
  color: var(--hn-ivory);
}

.route-section {
  padding-block: var(--space-3xl);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.route-section--hn {
  border-block-end-color: color-mix(in oklch, var(--hn-brass) 24%, var(--color-rule));
  background: var(--hn-black);
  color: var(--hn-ivory);
}

.split-proof {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.split-proof__copy {
  display: grid;
  gap: var(--space-md);
}

.split-proof__copy :is(h1, h2) {
  margin: 0;
  font-size: var(--text-display-s);
  line-height: 0.98;
}

.split-proof__copy p {
  max-width: 64ch;
  margin: 0;
  color: var(--studio-muted);
}

.route-section--hn .split-proof__copy p {
  color: color-mix(in oklch, var(--hn-ivory) 70%, var(--hn-brass));
}

.split-proof__media {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--studio-navy);
}

.route-section--hn .split-proof__media {
  border-color: color-mix(in oklch, var(--hn-brass) 30%, var(--color-rule));
  background: var(--hn-gunmetal);
}

.split-proof__media img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
}

.studio-logo-proof img,
.support-icon-proof img,
.character-proof img {
  object-fit: contain;
  background: var(--studio-navy);
}

.character-proof img {
  max-height: 36rem;
  background: var(--hn-gunmetal);
}

.studio-route-hero::before {
  content: "MISHREF";
  position: absolute;
  inset: auto 0 -0.1em;
  z-index: -1;
  color: color-mix(in oklch, var(--studio-white) 4%, transparent);
  font-family: var(--font-display);
  font-size: clamp(7rem, 24vw, 22rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.72;
  text-align: center;
  white-space: nowrap;
}

.arsenal-hero-media {
  object-position: 78% center;
}

.studio-principles,
.press-assets,
.legal-index,
.support-quick-grid {
  display: grid;
  gap: var(--space-md);
}

.principle-row,
.press-asset,
.support-quick-item {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.principle-row h3,
.principle-row p,
.press-asset h3,
.press-asset p,
.support-quick-item h3,
.support-quick-item p {
  margin: 0;
}

.principle-row h3,
.press-asset h3,
.support-quick-item h3 {
  font-size: var(--text-xl);
}

.principle-row p,
.press-asset p,
.support-quick-item p {
  color: var(--studio-muted);
}

.roster-grid {
  display: grid;
  gap: var(--space-md);
}

.roster-filter {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(7rem, 1fr));
  width: min(100%, 22rem);
  margin-block-end: var(--space-xl);
  border: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 36%, var(--color-rule));
}

.roster-filter button {
  min-height: 3rem;
  border: 0;
  border-inline-end: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 28%, var(--color-rule));
  background: var(--hn-gunmetal);
  color: color-mix(in oklch, var(--hn-ivory) 64%, var(--hn-brass));
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.09em;
}

.roster-filter button:last-child {
  border-inline-end: 0;
}

.roster-filter button.is-active {
  background: var(--hn-brass);
  color: var(--hn-black);
}

.roster-card {
  --character-tone: var(--hn-brass);
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: var(--rule-hair) solid color-mix(in oklch, var(--character-tone) 38%, var(--color-rule));
  background: color-mix(in oklch, var(--character-tone) 14%, var(--hn-gunmetal));
}

.roster-card--rook { --character-tone: var(--character-rook); }
.roster-card--malahi { --character-tone: var(--character-malahi); }
.roster-card--black-pipe { --character-tone: var(--character-black-pipe); }
.roster-card--masked-nomad { --character-tone: var(--character-masked-nomad); }
.roster-card--star-sheriff { --character-tone: var(--character-star-sheriff); }
.roster-card--ivory-split { --character-tone: var(--character-ivory-split); }
.roster-card--midnight-lynx { --character-tone: var(--character-midnight-lynx); }
.roster-card--prairie-belle { --character-tone: var(--character-prairie-belle); }
.roster-card--shahaden { --character-tone: var(--character-shahaden); }

.roster-card__art {
  position: relative;
  display: grid;
  height: 29rem;
  place-items: end center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 64%, color-mix(in oklch, var(--character-tone) 34%, transparent), transparent 64%);
}

.roster-card__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.roster-card__copy {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border-block-start: var(--rule-hair) solid color-mix(in oklch, var(--character-tone) 34%, var(--color-rule));
}

.roster-card__copy h2,
.roster-card__copy p {
  margin: 0;
}

.roster-card__copy h2 {
  color: var(--character-tone);
  font-size: var(--text-2xl);
}

.roster-card__copy p {
  color: color-mix(in oklch, var(--character-tone) 68%, var(--hn-ivory));
}

.arsenal-ledger {
  display: grid;
  border-block-start: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 34%, var(--color-rule));
}

.arsenal-row {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-xl);
  border-block-end: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 28%, var(--color-rule));
}

.arsenal-row span {
  color: var(--hn-brass);
  font-size: var(--text-xs);
  font-weight: 800;
}

.arsenal-row h2,
.arsenal-row p {
  margin: 0;
}

.arsenal-row h2 {
  font-size: var(--text-2xl);
}

.arsenal-row p {
  color: color-mix(in oklch, var(--hn-ivory) 68%, var(--hn-brass));
}

.world-scroll,
.media-gallery {
  display: grid;
  gap: var(--space-lg);
}

.world-plate,
.media-item {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 26%, var(--color-rule));
  background: var(--hn-gunmetal);
}

.world-plate img,
.media-item img {
  display: block;
  width: 100%;
  height: clamp(22rem, 62dvh, 44rem);
  object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out);
}

.world-plate figcaption,
.media-item figcaption {
  position: absolute;
  inset: auto var(--space-md) var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 34%, var(--color-rule));
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--hn-black) 90%, transparent);
  color: var(--hn-ivory);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.media-item button {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.media-dialog {
  position: fixed;
  inset: 0;
  width: min(calc(100% - (var(--space-md) * 2)), 80rem);
  height: fit-content;
  max-height: calc(100dvh - (var(--space-md) * 2));
  margin: auto;
  padding: 0;
  overflow: visible;
  border: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 36%, var(--color-rule));
  border-radius: var(--radius-sm);
  background: var(--hn-black);
  color: var(--hn-ivory);
}

.media-dialog::backdrop {
  background: color-mix(in oklch, var(--studio-black) 88%, transparent);
  backdrop-filter: blur(4px);
}

.media-dialog img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - (var(--space-2xl) * 2));
  object-fit: contain;
}

.media-dialog__close {
  position: absolute;
  inset: var(--space-xs) var(--space-xs) auto auto;
  z-index: var(--z-raised);
  width: 2.75rem;
  height: 2.75rem;
  border: var(--rule-hair) solid var(--hn-brass);
  border-radius: var(--radius-sm);
  background: var(--hn-black);
  color: var(--hn-ivory);
}

.empty-news {
  display: grid;
  max-width: 54rem;
  gap: var(--space-md);
  padding-block: var(--space-3xl);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.empty-news h2,
.empty-news p {
  margin: 0;
}

.empty-news h2 {
  font-size: var(--text-2xl);
}

.empty-news p {
  color: var(--studio-muted);
}

.press-asset {
  grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr);
  align-items: center;
}

.press-asset img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--studio-navy);
}

.press-asset .text-link {
  justify-self: start;
}

.legal-document {
  display: grid;
  gap: var(--space-xl);
}

.legal-document section {
  display: grid;
  max-width: 70ch;
  gap: var(--space-sm);
}

.legal-document h2,
.legal-document h3,
.legal-document p,
.legal-document ul {
  margin: 0;
}

.legal-document h2 {
  font-size: var(--text-xl);
}

.legal-document p,
.legal-document li {
  color: var(--studio-muted);
}

/* Download and support keep their original logic and data. */
.download-page .download-hero {
  min-height: 100dvh;
  padding-block: calc(var(--header-height) + var(--space-3xl)) var(--space-3xl);
}

.download-hero::before {
  background-image: image-set(
    url("assets/optimized/download/download-showcase.webp") type("image/webp"),
    url("assets/download/download-showcase.png") type("image/png")
  );
}

.download-page .download-shell {
  gap: var(--space-2xl);
}

.download-page .download-copy h1 {
  font-size: var(--text-display);
}

.download-page .download-copy h2 {
  margin: 0;
  color: var(--hn-ivory);
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.download-status {
  display: inline-flex;
  flex: none;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  padding-inline: var(--space-xs);
  border: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 40%, var(--color-rule));
  border-radius: var(--radius-sm);
  color: var(--hn-brass);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.support-page {
  background: var(--studio-black);
}

.support-page .page-hero {
  min-height: 32rem;
  background: var(--studio-navy);
}

.support-page .page-hero::before {
  background-image: image-set(
    url("assets/optimized/hn-gunslinger-saloon.avif") type("image/avif"),
    url("assets/optimized/hn-gunslinger-saloon.webp") type("image/webp"),
    url("assets/hn-gunslinger-saloon.jpeg") type("image/jpeg")
  );
}

.support-page .page-shell {
  padding-block: var(--space-3xl);
}

.support-page .page-shell > .container {
  display: grid;
  gap: var(--space-3xl);
}

.support-page .support-contact {
  padding-block: var(--space-xl);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.support-page .support-form {
  max-width: 58rem;
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--studio-dark);
}

.support-quick-grid {
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.support-form form {
  gap: var(--space-md);
}

.support-form label {
  gap: var(--space-2xs);
  color: var(--studio-white);
  font-size: var(--text-sm);
}

.support-form input,
.support-form textarea {
  border-width: var(--rule-hair);
  border-color: var(--color-rule-2);
  border-radius: var(--radius-input);
  outline: var(--rule-fine) solid transparent;
  outline-offset: var(--rule-hair);
  background: var(--studio-dark);
  color: var(--studio-white);
}

.support-form input {
  min-height: 3rem;
}

.support-form textarea {
  min-height: 9rem;
  resize: vertical;
}

.support-form :is(input, textarea):focus-visible {
  border-width: var(--rule-hair);
  border-color: var(--studio-gold);
  outline-color: var(--color-focus);
}

/* Global footer — the requested site map is real, not filler. */
.site-footer.global-footer,
.global-footer {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-3xl) max(var(--space-lg), env(safe-area-inset-bottom));
  overflow: hidden;
  border-block-start: var(--rule-hair) solid var(--color-rule);
  background: var(--studio-black);
  color: var(--studio-white);
}

.global-footer::before {
  display: none;
}

.footer-word {
  position: absolute;
  inset: auto 0 -0.18em;
  z-index: -1;
  overflow: hidden;
  color: color-mix(in oklch, var(--studio-white) 4%, transparent);
  font-family: var(--font-display);
  font-size: clamp(7rem, 23vw, 22rem);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.72;
  text-align: center;
  white-space: nowrap;
}

.footer-grid {
  display: grid;
  gap: var(--space-xl);
}

.footer-intro {
  display: grid;
  align-content: start;
  gap: var(--space-md);
}

.footer-intro .footer-brand {
  width: 4rem;
  height: 4rem;
  border-radius: 0;
}

.footer-intro .footer-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-intro > p {
  max-width: 46ch;
  margin: 0;
  color: var(--studio-muted);
}

.footer-social-text {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.footer-social-text a {
  color: var(--studio-white);
  font-size: var(--text-xs);
  font-weight: 700;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}

.footer-column h2 {
  margin: 0 0 var(--space-2xs);
  color: var(--studio-gold);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-column .footer-subheading {
  margin-block-start: var(--space-md);
}

.footer-column a {
  min-height: 2rem;
  color: var(--studio-muted);
  font-size: var(--text-sm);
  transition: color var(--dur-micro) var(--ease-out);
}

.footer-column a:is(:hover, :focus-visible) {
  color: var(--studio-white);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  color: var(--studio-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.footer-bottom p {
  margin: 0;
  color: inherit;
}

.footer-language {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
}

.footer-language button {
  min-width: 2.75rem;
  min-height: 2.875rem;
  border: 0;
  background: transparent;
  color: var(--studio-muted);
  font: inherit;
}

.footer-language button:is(:hover, :focus-visible) {
  color: var(--studio-white);
}

.footer-language button.is-active {
  color: var(--studio-gold);
}

.site-header .language-menu button,
.footer-social-text a,
.footer-column a {
  display: inline-flex;
  min-height: 2.875rem;
  align-items: center;
}

/* Compact mobile composition: sibling content stays side-by-side inside safe rails. */
.section-index {
  display: none;
}

.route-hero__content > .section-index,
.download-copy > .section-index,
.preorder-copy > .section-index {
  display: block;
}

.studio-home-hero {
  min-height: 0;
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-2xl);
}

.studio-home-hero .studio-intro-grid {
  grid-template-columns: minmax(5.75rem, 0.42fr) minmax(0, 1.58fr);
  gap: var(--space-sm);
  align-items: stretch;
}

.studio-home-hero .studio-emblem {
  min-height: 0;
  align-self: stretch;
}

.studio-home-hero .studio-emblem::before {
  inset: var(--space-xs);
}

.studio-home-hero .studio-emblem img {
  width: min(70%, 4.5rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.studio-home-hero .studio-emblem span {
  inset: auto var(--space-2xs) var(--space-xs) auto;
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
}

.studio-intro-copy :is(h1, h2) {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--studio-white);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 9.5vw, 3.25rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 0.98;
}

.studio-home-hero .studio-intro-copy {
  gap: var(--space-xs);
}

.studio-home-hero .section-lede {
  font-size: var(--text-base);
  line-height: 1.55;
}

.studio-stats,
.studio-stats--two {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-sm) 0;
}

.studio-stats--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-stats div {
  min-width: 0;
  padding: var(--space-xs) var(--space-2xs);
  border-block-end: 0;
  border-inline-end: var(--rule-hair) solid var(--color-rule);
}

.studio-stats div:first-child {
  padding-inline-start: 0;
}

.studio-stats div:last-child {
  border-inline-end: 0;
}

.studio-stats dt {
  font-size: clamp(1rem, 5vw, var(--text-2xl));
  overflow-wrap: anywhere;
}

.studio-stats dd {
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
}

.studio-home-hero .button-row,
.featured-game .button-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.studio-home-hero .btn,
.featured-game .btn {
  min-width: 0;
  padding-inline: var(--space-2xs);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}

.games-section {
  padding-block: var(--space-2xl);
}

.games-section .section-head--wide {
  margin-block-end: var(--space-lg);
}

.featured-game {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  min-height: 21rem;
}

.featured-game-art {
  display: block;
  min-height: 0;
}

.featured-game-copy {
  gap: var(--space-xs);
  padding: var(--space-sm);
}

.featured-game-copy h3 {
  font-size: clamp(1.85rem, 8vw, 3rem);
  overflow-wrap: anywhere;
}

.featured-game-copy > p:not(.game-overline) {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.game-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
  padding-block: var(--space-xs);
}

.game-meta li {
  min-width: 0;
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.game-overview-page .character-hero,
.game-overview-page .hero-content {
  min-height: 47rem;
}

.game-overview-page .hero-content {
  padding-block: calc(var(--header-height) + var(--space-md)) var(--space-xl);
}

.game-overview-page .character-copy,
html[dir="rtl"] .game-overview-page .character-copy {
  width: calc(100% - (var(--page-gutter) * 2));
  margin-inline: auto;
}

.game-overview-page [data-character-name] {
  max-width: 8ch;
  margin: 0;
  color: var(--hero-accent);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 14vw, 3.8rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 0.92;
  overflow-wrap: anywhere;
}

.game-overview-page .character-stage,
html[dir="rtl"] .game-overview-page .character-stage {
  inset: 6.25rem 0 auto;
  width: 100%;
  height: var(--mobile-character-height);
}

.game-overview-page .character-ring,
.game-overview-page .character-card img {
  height: var(--mobile-character-height);
}

.game-overview-page .character-card {
  width: clamp(7.5rem, 35vw, 9.5rem);
}

.game-overview-page .character-card.is-prev {
  --x: -6.75rem;
  --y: 1.75rem;
}

.game-overview-page .character-card.is-next {
  --x: 6.75rem;
  --y: 1.75rem;
}

.game-overview-page .character-mobile-space {
  height: calc(var(--mobile-character-height) + var(--space-sm));
}

.game-overview-page .character-controls {
  inset: 14.5rem var(--page-gutter) auto;
}

.game-overview-page .hero-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-page .hero-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.game-overview-page .hero-actions .btn-primary {
  grid-column: auto;
}

.game-overview-page .hero-actions .btn {
  padding-inline: var(--space-2xs);
  font-size: 0.625rem;
  letter-spacing: 0.035em;
}

.route-hero {
  min-height: var(--mobile-route-height);
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-xl);
}

.route-hero h1 {
  font-size: clamp(2.6rem, 12vw, 3.75rem);
}

.route-section {
  padding-block: var(--space-2xl);
}

.split-proof {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--space-sm);
}

.split-proof__copy {
  gap: var(--space-xs);
}

.split-proof__copy :is(h1, h2) {
  font-size: clamp(1.75rem, 8vw, 2.6rem);
}

.split-proof__copy p {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.split-proof__media img {
  min-height: 16rem;
}

.game-system-grid {
  display: grid;
  max-width: 100%;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: var(--mobile-rail-md);
  gap: var(--space-sm);
  padding-block-end: var(--space-xs);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.game-system-panel {
  min-width: 0;
  scroll-snap-align: start;
}

.game-system-panel .section-head {
  margin-block-end: var(--space-md);
}

.feature-ledger,
.duel-sequence,
.roster-grid,
.world-scroll,
.media-gallery,
.studio-principles,
.press-assets,
.support-quick-grid {
  max-width: 100%;
  min-width: 0;
  grid-template-columns: none;
  grid-auto-flow: column;
  gap: var(--space-xs);
  padding-block-end: var(--space-xs);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--space-2xs);
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.feature-ledger,
.duel-sequence {
  grid-auto-columns: var(--mobile-rail-sm);
}

.roster-grid,
.studio-principles,
.press-assets,
.support-quick-grid {
  grid-auto-columns: var(--mobile-rail-md);
}

.world-scroll,
.media-gallery {
  grid-auto-columns: var(--mobile-rail-lg);
}

.feature-ledger::-webkit-scrollbar,
.duel-sequence::-webkit-scrollbar,
.roster-grid::-webkit-scrollbar,
.world-scroll::-webkit-scrollbar,
.media-gallery::-webkit-scrollbar,
.studio-principles::-webkit-scrollbar,
.press-assets::-webkit-scrollbar,
.support-quick-grid::-webkit-scrollbar,
.footer-grid::-webkit-scrollbar,
.download-shell::-webkit-scrollbar {
  display: none;
}

.feature-panel,
.duel-sequence li,
.roster-card,
.world-plate,
.media-item,
.principle-row,
.press-asset,
.support-quick-item {
  scroll-snap-align: start;
}

.feature-panel,
.duel-sequence li {
  padding: var(--space-md);
  border: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 28%, var(--color-rule));
}

.duel-sequence strong {
  font-size: clamp(1.7rem, 8vw, 2.6rem);
}

.roster-card__art {
  height: var(--mobile-roster-height);
}

.world-plate img,
.media-item img {
  height: 20rem;
}

.media-gallery .media-item:first-child {
  grid-column: auto;
}

.download-page .download-hero {
  min-height: auto;
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-xl);
}

.download-page .download-shell {
  max-width: 100%;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: var(--mobile-rail-md);
  gap: var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.download-page .download-shell > * {
  scroll-snap-align: start;
}

.download-page .download-copy h1 {
  font-size: clamp(2.6rem, 13vw, 3.8rem);
}

.download-page .download-copy h2 {
  font-size: var(--text-base);
}

.download-platforms {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
}

.download-platform {
  width: auto;
  min-height: 7.5rem;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-2xs);
  padding: var(--space-xs);
}

.download-platform .platform-icon--art {
  width: 2.75rem;
  height: 2.75rem;
}

.download-platform strong {
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
}

.download-status {
  grid-column: 1 / -1;
  min-height: 1.75rem;
  margin-inline-start: 0;
  font-size: 0.5625rem;
}

.support-page .page-hero {
  min-height: 24rem;
  padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-xl);
}

.support-page .page-hero h1 {
  font-size: clamp(2.5rem, 11vw, 3.5rem);
  line-height: 1.08;
}

.support-page .page-shell > .container {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
  max-width: var(--page-max);
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.support-page .page-shell > .container > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.download-cta {
  min-height: 24rem;
  padding-block: var(--space-xl);
}

.support-page .page-shell,
.page-shell {
  padding-block: var(--space-2xl);
}

.footer-grid {
  max-width: 100%;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: var(--mobile-rail-md);
  gap: var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.footer-intro,
.footer-column {
  min-width: 0;
  scroll-snap-align: start;
}

.footer-bottom {
  gap: var(--space-xs);
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea {
  font-family: var(--font-arabic);
}

html[lang="ar"] :is(:is(h1, [data-character-name]), h2, h3, .character-name-wall) {
  font-family: var(--font-arabic);
  letter-spacing: 0;
  line-height: 1.16;
}

html[dir="rtl"] .site-header .site-nav a.is-active {
  box-shadow: inset 0 calc(var(--rule-fine) * -1) 0 var(--studio-gold);
}

html[dir="rtl"] .route-hero__shade,
html[dir="rtl"] .download-cta::after {
  transform: scaleX(-1);
}

@media (min-width: 40rem) {
  .studio-home-hero {
    min-height: 38rem;
    padding-block: calc(var(--header-height) + var(--space-2xl)) var(--space-3xl);
  }

  .studio-home-hero .studio-intro-grid {
    grid-template-columns: minmax(10rem, 0.65fr) minmax(0, 1.35fr);
    gap: var(--space-lg);
  }

  .studio-home-hero .studio-emblem span {
    inset: auto var(--space-md) var(--space-md);
    writing-mode: horizontal-tb;
  }

  .studio-intro-copy :is(h1, h2) {
    font-size: var(--text-display-s);
  }

  .featured-game-copy {
    padding: var(--space-lg);
  }

  .game-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    padding-block-end: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .game-overview-page .character-hero,
  .game-overview-page .hero-content {
    min-height: 50rem;
  }

  .game-overview-page .character-stage,
  html[dir="rtl"] .game-overview-page .character-stage {
    inset: 7rem 0 auto;
    height: 27rem;
  }

  .game-overview-page .character-ring,
  .game-overview-page .character-card img {
    height: 27rem;
  }

  .game-overview-page .character-mobile-space {
    height: 28rem;
  }

  .game-overview-page .character-controls {
    inset-block-start: 18.5rem;
  }

  .route-hero {
    min-height: 31rem;
  }

  .character-editorial-grid,
  .roster-grid,
  .media-gallery,
  .footer-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    padding-block-end: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .studio-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .studio-stats--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-stats div {
    padding-inline: var(--space-md);
    border-block-end: 0;
    border-inline-end: var(--rule-hair) solid var(--color-rule);
  }

  .studio-stats div:first-child {
    padding-inline-start: 0;
  }

  .studio-stats div:last-child {
    border-inline-end: 0;
  }

  .character-editorial-grid,
  .roster-grid,
  .media-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .character-editorial-grid .character-profile:first-child,
  .media-gallery .media-item:first-child {
    grid-column: 1 / -1;
  }

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

  .footer-intro {
    grid-column: 1 / -1;
  }
}

@media (min-width: 60rem) {
  .game-overview-page .character-hero,
  .game-overview-page .hero-content {
    min-height: max(48rem, 100svh);
  }

  .game-overview-page .hero-content {
    padding-block: 9rem 5rem;
  }

  .game-overview-page .character-copy,
  html[dir="rtl"] .game-overview-page .character-copy {
    width: min(39vw, 34rem);
    max-width: 34rem;
    margin-inline: max(var(--page-gutter), calc((100vw - var(--page-max)) / 2)) auto;
  }

  .game-overview-page [data-character-name] {
    max-width: 7ch;
    font-size: clamp(4.75rem, 8.7vw, 8.25rem);
    line-height: 0.82;
  }

  .game-overview-page .character-stage,
  html[dir="rtl"] .game-overview-page .character-stage {
    inset: 15vh max(var(--page-gutter), calc((100vw - var(--page-max)) / 2)) 3vh auto;
    width: min(57vw, 49rem);
    height: auto;
  }

  .game-overview-page .character-ring {
    height: min(75vh, 46rem);
  }

  .game-overview-page .character-card {
    width: clamp(9rem, 16.5vw, 15.5rem);
  }

  .game-overview-page .character-card img {
    height: min(69vh, 43rem);
  }

  .game-overview-page .character-card.is-prev {
    --x: -13rem;
    --y: 2.75rem;
  }

  .game-overview-page .character-card.is-next {
    --x: 13rem;
    --y: 2.75rem;
  }

  .game-overview-page .character-mobile-space {
    height: 0;
  }

  .game-overview-page .character-controls {
    inset: auto;
  }

  .feature-ledger,
  .duel-sequence,
  .roster-grid,
  .world-scroll,
  .media-gallery,
  .studio-principles,
  .press-assets,
  .support-quick-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
    padding-block-end: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .roster-grid,
  .media-gallery,
  .studio-principles,
  .press-assets,
  .support-quick-grid {
    gap: var(--space-md);
  }

  .world-scroll {
    gap: var(--space-2xl);
  }

  .feature-panel,
  .duel-sequence li {
    padding: var(--space-lg) 0;
    border: 0;
    border-block-end: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 28%, var(--color-rule));
  }

  .feature-ledger,
  .duel-sequence {
    border-block-start: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 34%, var(--color-rule));
  }

  .roster-card__art {
    height: 29rem;
  }

  .world-plate img,
  .media-item img {
    height: clamp(22rem, 62dvh, 44rem);
  }

  .download-page .download-hero {
    min-height: 100dvh;
    padding-block: calc(var(--header-height) + var(--space-3xl)) var(--space-3xl);
  }

  .download-cta {
    min-height: 34rem;
    padding-block: var(--space-3xl);
  }

  .download-page .download-shell {
    grid-template-columns: minmax(0, 0.94fr) minmax(20rem, 0.78fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--space-2xl);
    overflow: visible;
    scroll-snap-type: none;
  }

  .download-platform {
    min-height: 6rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: var(--space-sm);
  }

  .download-platform .platform-icon--art {
    width: 4rem;
    height: 4rem;
  }

  .download-status {
    grid-column: auto;
    margin-inline-start: auto;
  }

  .site-header.studio-header,
  .site-header {
    display: grid;
    grid-template-areas: "brand nav action language";
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--space-md);
  }

  .site-header .brand {
    grid-area: brand;
    margin-inline-end: 0;
  }

  .brand-wordmark {
    display: block;
  }

  .site-header .nav-toggle {
    display: none;
  }

  .site-header .site-nav {
    grid-area: nav;
    position: static;
    display: flex;
    width: auto;
    max-height: none;
    min-width: 0;
    justify-content: center;
    gap: clamp(var(--space-xs), 1.5vw, var(--space-md));
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-header .site-nav a {
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    box-shadow: none;
    font-size: 0.65625rem;
  }

  .site-header .site-nav a.is-active {
    box-shadow: inset 0 calc(var(--rule-fine) * -1) 0 var(--studio-gold);
  }

  .site-header .site-nav .mobile-download-link {
    display: none;
  }

  .header-actions {
    grid-area: action;
    display: block;
  }

  .site-header .language-switcher {
    grid-area: language;
    order: 4;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .hero-actions .btn-primary {
    grid-column: auto;
  }

  .character-controls {
    position: static;
    display: grid;
    grid-template-columns: 2.75rem auto minmax(7rem, 1fr) 2.75rem;
    width: min(100%, 31rem);
    padding: var(--space-2xs);
    border: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 44%, var(--color-rule));
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--hn-gunmetal) 94%, transparent);
    box-shadow: inset 0 0 0 var(--rule-hair) color-mix(in oklch, var(--hn-brass) 12%, transparent);
    pointer-events: auto;
  }

  .character-controls span,
  .character-controls strong {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-inline-end: var(--rule-hair) solid color-mix(in oklch, var(--hn-brass) 24%, var(--color-rule));
  }

  .character-controls strong {
    border-inline-end: 0;
  }

  .studio-intro-grid,
  .hn-feature-layout,
  .duel-layout,
  .split-proof {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }

  .studio-emblem {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-xl));
    min-height: 34rem;
    align-self: start;
  }

  .featured-game {
    grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 0.65fr);
    min-height: 40rem;
  }

  .featured-game-copy {
    padding: var(--space-2xl);
  }

  .feature-ledger,
  .duel-sequence {
    align-self: start;
  }

  .duel-head,
  .hn-feature-head {
    position: sticky;
    inset-block-start: calc(var(--header-height) + var(--space-xl));
    align-self: start;
  }

  .character-editorial-grid {
    grid-template-columns: 1.15fr 0.85fr 0.85fr;
    align-items: end;
  }

  .character-editorial-grid .character-profile:first-child {
    grid-column: auto;
  }

  .character-profile:nth-child(2) .character-profile-art,
  .character-profile:nth-child(3) .character-profile-art {
    height: 23rem;
  }

  .split-proof--reverse .split-proof__copy {
    order: 2;
  }

  .split-proof--reverse .split-proof__media {
    order: 1;
  }

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

  .world-scroll {
    gap: var(--space-2xl);
  }

  .world-plate:nth-child(even) {
    margin-inline-start: 12%;
  }

  .world-plate:nth-child(odd) {
    margin-inline-end: 12%;
  }

  .media-gallery {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .media-gallery .media-item:first-child {
    grid-column: 1 / -1;
  }

  .studio-principles,
  .press-assets,
  .support-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: minmax(18rem, 1.5fr) repeat(2, minmax(10rem, 0.75fr));
  }

  .footer-intro {
    grid-column: auto;
  }
}

@media (min-width: 90rem) {
  .site-header .site-nav {
    gap: var(--space-lg);
  }

  .site-header .site-nav a {
    font-size: 0.6875rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::after,
  .header-download:hover::after {
    transform: translateX(100%);
  }

  .featured-game:hover .featured-game-art img {
    transform: scale(1.02);
  }
}

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

  .btn::after,
  .header-download::after {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   AAA refinement pass — unified premium UI system
   Keeps layout order while upgrading buttons, navigation, cards, support page,
   footer, micro-interactions, and the homepage loader.
   -------------------------------------------------------------------------- */

:root {
  --aaa-panel: linear-gradient(180deg, color-mix(in oklch, var(--studio-white) 5%, transparent), transparent 55%), color-mix(in oklch, var(--studio-navy) 78%, var(--studio-black));
  --aaa-panel-soft: linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), color-mix(in oklch, var(--studio-black) 90%, var(--studio-navy));
  --aaa-ring: color-mix(in oklch, var(--studio-gold) 32%, var(--color-rule));
  --aaa-ring-strong: color-mix(in oklch, var(--studio-gold) 52%, var(--color-rule));
  --aaa-highlight: color-mix(in oklch, var(--studio-gold) 30%, transparent);
  --aaa-shadow: 0 1.75rem 4rem rgba(0,0,0,.36);
  --aaa-shadow-deep: 0 2.4rem 5rem rgba(0,0,0,.48);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in oklch, var(--hn-red) 14%, transparent), transparent 30rem),
    radial-gradient(circle at 85% 6%, color-mix(in oklch, var(--studio-gold) 10%, transparent), transparent 24rem),
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.035), transparent 30rem);
}

.route-page main,
.home-page main {
  position: relative;
  isolation: isolate;
}

.site-header.studio-header,
.site-header {
  padding-block-end: var(--space-xs);
}

.site-header.is-scrolled,
body.nav-open .site-header {
  background:
    linear-gradient(180deg, rgba(7, 8, 11, .94), rgba(7, 8, 11, .84));
  box-shadow: 0 0.75rem 2rem rgba(0,0,0,.25);
}

.site-header .brand {
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

.site-header .brand:hover {
  transform: translateY(-1px);
}

.site-header .nav-toggle,
.site-header .language-toggle {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.site-header .nav-toggle::before,
.site-header .language-toggle::before,
.site-header .site-nav a::before,
.header-download::before,
.btn::before,
.support-quick-item::before,
.principle-row::before,
.press-asset::before,
.game-card::before,
.empty-news::before,
.support-form::before,
.split-proof__media::before,
.media-item::before,
.world-plate::before,
.roster-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 26%);
  opacity: .55;
}

.site-header .nav-toggle span {
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.site-header .site-nav {
  gap: var(--space-xs);
  background:
    linear-gradient(180deg, rgba(10, 12, 18, .98), rgba(9, 10, 13, .96));
  box-shadow: var(--aaa-shadow-deep);
}

.site-header .site-nav a {
  position: relative;
  overflow: hidden;
  min-height: 3.15rem;
  border-color: var(--aaa-ring);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)), rgba(255,255,255,.01);
  transition:
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}

.site-header .site-nav a:is(:hover, :focus-visible, .is-active) {
  border-color: var(--aaa-ring-strong);
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,0)), rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 .5rem 1.2rem rgba(0,0,0,.18);
  transform: translateY(-1px);
}

.site-header .site-nav a::after,
.btn::after,
.header-download::after {
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.2) 47%, transparent 70%);
}

.header-actions {
  display: none;
}

.btn,
.header-download,
.site-header .site-nav .mobile-download-link {
  position: relative;
  overflow: hidden;
  box-shadow: var(--aaa-shadow);
}

.btn,
.header-download {
  border-width: var(--rule-hair);
  letter-spacing: .11em;
}

.btn-primary,
.header-download,
.site-header .site-nav .mobile-download-link {
  border-color: color-mix(in oklch, var(--studio-gold) 78%, var(--studio-white));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--studio-white) 18%, var(--studio-gold)), var(--studio-gold) 34%, color-mix(in oklch, var(--studio-gold) 86%, black));
  color: #130f08;
}

.home-page .btn-primary {
  border-color: color-mix(in oklch, var(--hn-red) 84%, var(--studio-white));
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--studio-white) 8%, var(--hn-red)), var(--hn-red) 36%, color-mix(in oklch, var(--hn-red) 78%, black));
  color: #fff7ef;
}

.btn-secondary,
.btn-text {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), rgba(11,14,20,.72);
  border-color: color-mix(in oklch, var(--studio-gold) 28%, var(--color-rule));
}

.btn:hover,
.btn:focus-visible,
.header-download:hover,
.header-download:focus-visible,
.text-link:hover,
.text-link:focus-visible {
  transform: translateY(-2px);
}

.text-link {
  gap: .55rem;
  border-block-end-color: color-mix(in oklch, var(--studio-gold) 44%, var(--color-rule));
}

.text-link span[aria-hidden="true"] {
  transition: transform var(--dur-short) var(--ease-out);
}

.text-link:hover span[aria-hidden="true"],
.text-link:focus-visible span[aria-hidden="true"] {
  transform: translateX(.2rem);
}

.route-hero,
.support-page .page-hero {
  position: relative;
  overflow: clip;
  min-height: clamp(30rem, 72vh, 44rem);
  border-block-end: var(--rule-hair) solid color-mix(in oklch, var(--studio-gold) 20%, var(--color-rule));
  background: linear-gradient(180deg, rgba(5,6,10,.58), rgba(5,6,10,.88)), var(--studio-navy);
}

.route-hero::before,
.support-page .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in oklch, var(--studio-gold) 14%, transparent), transparent 20rem),
    linear-gradient(90deg, rgba(0,0,0,.54), transparent 45%, rgba(0,0,0,.5));
}

.route-hero__content,
.support-page .page-hero .container {
  position: relative;
  z-index: 1;
}

.route-hero__content > p:not(.section-index, .section-kicker),
.support-page .page-hero p:not(.eyebrow) {
  max-width: 42rem;
  color: color-mix(in oklch, var(--studio-white) 76%, var(--studio-muted));
}

.route-hero h1,
.support-page .page-hero h1 {
  max-width: 13ch;
  text-wrap: balance;
  text-shadow: 0 .9rem 3rem rgba(0,0,0,.42);
}

.route-section,
.support-page .page-shell {
  position: relative;
}

.route-section + .route-section,
.support-page .page-shell > .container > section + section,
.support-page .page-shell > .container > .empty-news + .support-form,
.support-page .page-shell > .container > .support-form + .empty-news {
  margin-block-start: clamp(1.5rem, 3vw, 2rem);
}

.section-head--wide,
.route-section .section-head,
.support-page .page-shell .section-head {
  margin-block-end: var(--space-xl);
}

.split-proof,
.game-card,
.empty-news,
.support-page .support-form,
.support-page .support-contact,
.principle-row,
.press-asset,
.support-quick-item,
.feature-panel,
.duel-sequence li,
.roster-card,
.world-plate,
.media-item {
  position: relative;
  overflow: hidden;
  border: var(--rule-hair) solid var(--aaa-ring);
  background: var(--aaa-panel-soft);
  box-shadow: var(--aaa-shadow);
  transition:
    transform var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out);
}

.split-proof,
.empty-news,
.support-page .support-form,
.support-page .support-contact,
.feature-panel,
.duel-sequence li,
.roster-card,
.world-plate,
.media-item {
  border-radius: var(--radius-card);
}

.split-proof,
.game-card,
.empty-news,
.support-page .support-contact {
  padding: clamp(1.2rem, 2vw, 1.75rem);
}

.principle-row,
.press-asset,
.support-quick-item,
.feature-panel,
.duel-sequence li {
  padding: clamp(1.05rem, 1.8vw, 1.4rem);
}

.support-quick-item,
.principle-row,
.press-asset,
.feature-panel,
.duel-sequence li,
.media-item,
.world-plate,
.roster-card,
.game-card,
.empty-news,
.support-page .support-form,
.support-page .support-contact,
.split-proof {
  will-change: transform;
}

@media (hover: hover) {
  .support-quick-item:hover,
  .principle-row:hover,
  .press-asset:hover,
  .feature-panel:hover,
  .duel-sequence li:hover,
  .media-item:hover,
  .world-plate:hover,
  .roster-card:hover,
  .game-card:hover,
  .empty-news:hover,
  .support-page .support-form:hover,
  .support-page .support-contact:hover,
  .split-proof:hover {
    transform: translateY(-4px);
    border-color: var(--aaa-ring-strong);
    box-shadow: var(--aaa-shadow-deep);
  }
}

.split-proof__media,
.world-plate,
.media-item,
.roster-card,
.game-card__art {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), color-mix(in oklch, var(--studio-black) 70%, var(--studio-navy));
}

.split-proof__media img,
.game-card__art img,
.media-item img,
.world-plate img {
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}

@media (hover: hover) {
  .split-proof:hover .split-proof__media img,
  .game-card:hover .game-card__art img,
  .media-item:hover img,
  .world-plate:hover img {
    transform: scale(1.03);
    filter: saturate(1.04);
  }
}

.game-card {
  border-radius: calc(var(--radius-card) + .1rem);
}

.game-card__body,
.support-page .support-form form,
.empty-news,
.split-proof__copy {
  display: grid;
  gap: var(--space-sm);
}

.support-page .page-shell > .container {
  gap: var(--space-2xl);
}

.support-quick-grid {
  border: 0;
  gap: var(--space-md);
}

.support-quick-item {
  min-height: 100%;
  align-content: start;
  border-block-end: 0;
  border-radius: var(--radius-card);
  background: var(--aaa-panel);
}

.support-quick-item h3,
.principle-row h3,
.press-asset h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.support-page .support-contact {
  align-items: stretch;
  gap: var(--space-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 55%), color-mix(in oklch, var(--studio-black) 84%, var(--studio-navy));
}

.support-icon-proof {
  min-height: 100%;
}

.support-page .support-contact .text-link {
  width: fit-content;
}

.support-page .support-form {
  max-width: none;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 58%), color-mix(in oklch, var(--studio-black) 80%, var(--studio-navy));
}

.support-form label {
  font-weight: 700;
}

.support-form :is(input, textarea) {
  width: 100%;
  padding: .95rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.support-form :is(input, textarea):focus-visible {
  box-shadow: 0 0 0 .18rem color-mix(in oklch, var(--studio-gold) 18%, transparent), inset 0 1px 0 rgba(255,255,255,.02);
  background: rgba(13,16,23,.92);
}

.empty-news {
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 56%), color-mix(in oklch, var(--studio-black) 86%, var(--studio-navy));
}

.empty-news > :is(h2, p, a) {
  max-width: 56rem;
}

.game-meta li {
  border-color: color-mix(in oklch, var(--studio-gold) 28%, var(--color-rule));
  background: rgba(255,255,255,.02);
}

.site-footer.global-footer,
.global-footer {
  border-block-start-color: color-mix(in oklch, var(--studio-gold) 24%, var(--color-rule));
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.04), transparent 28rem),
    linear-gradient(180deg, rgba(5,6,9,.96), rgba(4,4,6,1));
}

.footer-grid {
  gap: var(--space-lg);
}

.footer-intro,
.footer-column {
  position: relative;
  padding: var(--space-md);
  border: var(--rule-hair) solid color-mix(in oklch, var(--studio-gold) 18%, var(--color-rule));
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 62%), rgba(255,255,255,.01);
}

.footer-social-text a,
.footer-column a {
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.footer-social-text a:hover,
.footer-column a:hover,
.footer-social-text a:focus-visible,
.footer-column a:focus-visible {
  color: var(--studio-gold);
  transform: translateX(.16rem);
}

.footer-bottom {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid color-mix(in oklch, var(--studio-gold) 18%, var(--color-rule));
}

/* Logo-only loader */
.loader.loader--logo-only {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.04), transparent 16rem),
    linear-gradient(180deg, rgba(4,4,5,.86), rgba(4,4,5,.96));
}

.loader.loader--logo-only::before {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4,4,5,.58), rgba(4,4,5,.96)),
    image-set(
      url("assets/optimized/hn-gunslinger-loading.avif") type("image/avif"),
      url("assets/optimized/hn-gunslinger-loading.webp") type("image/webp"),
      url("assets/hn-gunslinger-loading.jpg") type("image/jpeg")
    ) center / cover;
  filter: blur(2px) saturate(.9) brightness(.56);
  transform: scale(1.04);
}

.loader.loader--logo-only::after {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in oklch, var(--studio-gold) 14%, transparent), transparent 12rem),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.72));
}

.loader-card.loader-card--logo-only {
  width: min(76vw, 19rem);
  gap: 1rem;
  padding: 1.8rem 1.5rem 1.25rem;
  border-color: color-mix(in oklch, var(--studio-gold) 32%, var(--color-rule));
  border-radius: clamp(1.15rem, 2vw, 1.4rem);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 48%),
    rgba(8, 9, 12, .72);
  box-shadow: 0 2rem 4rem rgba(0,0,0,.44);
}

.loader-card.loader-card--logo-only::after {
  animation-duration: 3.2s;
}

.loader-card.loader-card--logo-only img {
  width: min(58vw, 10rem);
  margin-inline: auto;
  animation: loaderLogoFloat 2.6s ease-in-out infinite;
}

.loader-card.loader-card--logo-only :is(span, strong, p, .loader-meta) {
  display: none !important;
}

.loader-card.loader-card--logo-only .loader-track {
  width: 68%;
  height: .38rem;
  margin-inline: auto;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.loader-card.loader-card--logo-only .loader-track i {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--studio-gold), color-mix(in oklch, var(--studio-white) 16%, var(--studio-gold)) 55%, var(--studio-gold));
}

@keyframes loaderLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (min-width: 62rem) {
  .site-header,
  .site-header.studio-header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-xs);
  }

  .site-header .brand {
    min-height: 3rem;
  }

  .brand-wordmark {
    display: block;
  }

  .site-header .site-nav {
    position: static;
    width: auto;
    max-height: none;
    grid-auto-flow: column;
    grid-template-columns: repeat(5, auto);
    align-items: center;
    justify-content: center;
    padding: .5rem;
    margin-inline: auto;
    border: var(--rule-hair) solid color-mix(in oklch, var(--studio-gold) 18%, var(--color-rule));
    border-radius: calc(var(--radius-card) + .1rem);
    background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 58%), rgba(8, 10, 14, .74);
    opacity: 1;
    pointer-events: auto;
    transform: none;
    overflow: visible;
  }

  .site-header .site-nav .mobile-download-link {
    display: none;
  }

  .site-header .nav-toggle {
    display: none;
  }

  .header-actions {
    display: flex;
    justify-content: flex-end;
  }

  .footer-grid {
    grid-template-columns: 1.2fr .8fr .8fr;
  }

  .support-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 61.98rem) {
  .site-header .site-nav {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .site-header .site-nav .mobile-download-link {
    grid-column: 1 / -1;
  }

  .route-hero,
  .support-page .page-hero {
    min-height: 28rem;
  }

  .footer-intro,
  .footer-column {
    padding: var(--space-sm);
  }
}

html[dir="rtl"] .footer-social-text a:hover,
html[dir="rtl"] .footer-column a:hover,
html[dir="rtl"] .footer-social-text a:focus-visible,
html[dir="rtl"] .footer-column a:focus-visible {
  transform: translateX(-.16rem);
}


/* Homepage hero portrait row: compact circular character selectors. */
.home-page .hero-portrait-nav {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: clamp(.55rem, 1vw, .8rem);
  width: max-content;
  max-width: 100%;
  margin-block-start: var(--space-md);
}

.home-page .hero-portrait {
  position: relative;
  display: block;
  width: clamp(3rem, 4.1vw, 3.7rem);
  height: clamp(3rem, 4.1vw, 3.7rem);
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 2px solid color-mix(in oklch, var(--studio-gold) 52%, rgba(255,255,255,.16));
  border-radius: 50%;
  background: #0b0b0d;
  box-shadow: 0 .55rem 1.2rem rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.035);
  cursor: pointer;
  opacity: .78;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}

.home-page .hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 9%;
  transform: scale(1.55);
  transform-origin: 50% 9%;
  filter: saturate(.78) contrast(1.07) brightness(.88);
  pointer-events: none;
}

.home-page .hero-portrait:is(:hover, :focus-visible) {
  opacity: 1;
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--studio-gold) 80%, white);
}

.home-page .hero-portrait.is-active {
  opacity: 1;
  border-color: color-mix(in oklch, var(--hero-accent, var(--hn-red)) 72%, white);
  box-shadow: 0 .65rem 1.35rem rgba(0,0,0,.42), 0 0 0 2px color-mix(in oklch, var(--hero-accent, var(--hn-red)) 22%, transparent);
}

@media (max-width: 42rem) {
  .home-page .hero-portrait-nav {
    gap: .45rem;
    margin-block-start: var(--space-sm);
  }
  .home-page .hero-portrait {
    width: 2.8rem;
    height: 2.8rem;
  }
}

/* V15 mobile fix: keep hero character portrait selectors full-size on phones. */
@media (max-width: 42rem) {
  .home-page .hero-portrait-nav {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: .6rem;
    margin-block-start: var(--space-md);
    padding-block: .15rem .25rem;
    overflow: visible;
  }

  .home-page .hero-portrait {
    width: 3.4rem;
    height: 3.4rem;
    flex: 0 0 3.4rem;
  }
}

@media (max-width: 22rem) {
  .home-page .hero-portrait-nav {
    gap: .45rem;
  }

  .home-page .hero-portrait {
    width: 3.15rem;
    height: 3.15rem;
    flex-basis: 3.15rem;
  }
}

/* V16 mobile hero correction — keep the portrait selector in the old CTA area
   and restore the large central character scale from the approved mobile hero. */
@media (max-width: 42rem) {
  .home-page .hero-portrait-nav {
    order: 3;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
    gap: .6rem;
    margin-block: var(--space-md) 0;
    padding: 0;
    overflow: visible;
  }

  .home-page .hero-portrait {
    width: 3.4rem;
    height: 3.4rem;
    flex: 0 0 3.4rem;
  }

  /* Restore the central gunslinger to the larger pre-selector mobile scale. */
  .home-page.game-overview-page .character-stage,
  html[dir="rtl"] .home-page.game-overview-page .character-stage {
    inset: 5.15rem 0 auto;
    width: 100%;
    height: clamp(25.5rem, 54svh, 31rem);
  }

  .home-page.game-overview-page .character-ring,
  .home-page.game-overview-page .character-card img {
    height: clamp(25.5rem, 54svh, 31rem);
  }

  .home-page.game-overview-page .character-card {
    width: clamp(10rem, 46vw, 13.75rem);
  }

  .home-page.game-overview-page .character-card.is-active {
    --scale: 1.04;
  }

  .home-page.game-overview-page .character-card.is-prev {
    --x: -8rem;
    --y: 1.65rem;
    --scale: .68;
  }

  .home-page.game-overview-page .character-card.is-next {
    --x: 8rem;
    --y: 1.65rem;
    --scale: .68;
  }

  .home-page.game-overview-page .character-mobile-space {
    height: clamp(26rem, 55svh, 31.5rem);
  }

  .home-page.game-overview-page .character-controls {
    inset: clamp(18.5rem, 37svh, 21.5rem) var(--page-gutter) auto;
  }
}

@media (max-width: 22rem) {
  .home-page .hero-portrait-nav {
    gap: .45rem;
  }

  .home-page .hero-portrait {
    width: 3.15rem;
    height: 3.15rem;
    flex-basis: 3.15rem;
  }

  .home-page.game-overview-page .character-card {
    width: clamp(9.5rem, 47vw, 11rem);
  }
}


/* ==========================================================================
   V17 · Frosted studio header + premium mobile navigation + flag languages
   ========================================================================== */

.site-header.studio-header,
.site-header {
  inset: max(.55rem, env(safe-area-inset-top)) .65rem auto;
  width: auto;
  min-height: 3.8rem;
  padding: .48rem .55rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(7, 9, 13, .52);
  box-shadow:
    0 .9rem 2.2rem rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(255,255,255,.025);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}

.site-header.studio-header::before,
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 13% 0%, rgba(255,255,255,.11), transparent 27%),
    linear-gradient(105deg, rgba(197,34,39,.055), transparent 34%, rgba(206,164,82,.04));
  pointer-events: none;
}

.site-header.is-scrolled,
body.nav-open .site-header {
  border-color: rgba(214,174,91,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018)),
    rgba(6, 8, 12, .72);
  box-shadow:
    0 1.1rem 2.6rem rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  backdrop-filter: blur(26px) saturate(1.45);
}

.site-header .brand {
  min-width: 2.7rem;
  min-height: 2.7rem;
  padding: .12rem;
}

.site-header .brand img {
  width: 2.45rem;
  height: 2.45rem;
  flex-basis: 2.45rem;
  filter: drop-shadow(0 .35rem .8rem rgba(0,0,0,.38));
}

/* Language control */
.site-header .language-switcher {
  z-index: calc(var(--z-dropdown) + 5);
}

.site-header .language-toggle {
  display: inline-flex;
  width: auto;
  min-width: 4.8rem;
  min-height: 2.7rem;
  padding-inline: .62rem .5rem;
  gap: .42rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: .78rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.012)),
    rgba(5,7,11,.45);
  color: rgba(255,255,255,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 .45rem 1rem rgba(0,0,0,.16);
  font-family: var(--font-body);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.site-header .language-toggle:is(:hover, :focus-visible),
.site-header .language-switcher.is-open .language-toggle {
  border-color: rgba(214,174,91,.52);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    rgba(8,10,14,.6);
  color: #fff;
  transform: translateY(-1px);
}

.language-current-flag,
.language-option-flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  filter: saturate(1.05);
}

.language-current-code {
  min-width: 1.35rem;
  text-align: center;
}

.site-header .language-toggle svg {
  width: .72rem;
  height: .72rem;
  opacity: .65;
}

.site-header .language-menu {
  top: calc(100% + .7rem);
  right: 0;
  width: min(18rem, calc(100vw - 1.3rem));
  padding: .5rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
    rgba(7,9,13,.83);
  box-shadow:
    0 1.4rem 3.2rem rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
}

.language-menu__title {
  padding: .55rem .7rem .45rem;
  color: rgba(255,255,255,.4);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.site-header .language-menu button {
  display: grid;
  width: 100%;
  min-height: 3rem;
  grid-template-columns: 1.55rem minmax(0,1fr) auto;
  gap: .65rem;
  align-items: center;
  padding: .58rem .65rem;
  border: 0;
  border-radius: .72rem;
  background: transparent;
  color: rgba(255,255,255,.72);
  text-align: start;
  text-transform: none;
  letter-spacing: .02em;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.site-header .language-menu button + button {
  margin-block-start: .12rem;
}

.site-header .language-menu button:is(:hover, :focus-visible, .is-active) {
  padding: .58rem .65rem;
  background:
    linear-gradient(90deg, rgba(188,26,32,.14), rgba(214,174,91,.08)),
    rgba(255,255,255,.045);
  color: #fff;
  transform: translateX(.08rem);
}

.site-header .language-menu button.is-active {
  box-shadow: inset .14rem 0 0 var(--studio-gold);
}

.language-option-label {
  overflow: hidden;
  font-size: .75rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-option-code {
  min-width: 1.7rem;
  color: rgba(255,255,255,.34);
  font-size: .6rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-align: end;
}

/* Premium hamburger */
.site-header .nav-toggle {
  width: 2.7rem;
  min-width: 2.7rem;
  min-height: 2.7rem;
  gap: .3rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .78rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.012)),
    rgba(5,7,11,.46);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 .45rem 1rem rgba(0,0,0,.16);
}

.site-header .nav-toggle span {
  width: 1.12rem;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
}

body.nav-open .site-header .nav-toggle {
  border-color: rgba(214,174,91,.5);
  background: rgba(14,15,19,.62);
}

body.nav-open .site-header .nav-toggle span:nth-child(1) {
  transform: translateY(.39rem) rotate(45deg);
}

body.nav-open .site-header .nav-toggle span:nth-child(2) {
  opacity: 0;
  transform: scaleX(.4);
}

body.nav-open .site-header .nav-toggle span:nth-child(3) {
  transform: translateY(-.39rem) rotate(-45deg);
}

@media (max-width: 61.98rem) {
  .site-header .site-nav {
    position: fixed;
    inset: calc(max(.55rem, env(safe-area-inset-top)) + 4.45rem) .65rem auto;
    width: auto;
    max-height: calc(100dvh - 5.7rem - env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    gap: .28rem;
    padding: .55rem;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 1rem;
    background:
      linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.012)),
      rgba(7,9,13,.86);
    box-shadow:
      0 1.6rem 3.8rem rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(26px) saturate(1.4);
    backdrop-filter: blur(26px) saturate(1.4);
    opacity: 0;
    transform: translateY(-.55rem) scale(.985);
    transform-origin: top center;
  }

  body.nav-open .site-header .site-nav {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .site-header .site-nav a {
    min-height: 3.35rem;
    justify-content: flex-start;
    padding-inline: 1rem;
    border: 1px solid transparent;
    border-radius: .78rem;
    background: transparent;
    color: rgba(255,255,255,.68);
    font-size: .72rem;
    letter-spacing: .075em;
  }

  .site-header .site-nav a::after {
    content: "›";
    position: static;
    width: auto;
    height: auto;
    margin-inline-start: auto;
    background: none;
    color: rgba(255,255,255,.28);
    opacity: 1;
    transform: none;
    font-size: 1.2rem;
    line-height: 1;
  }

  .site-header .site-nav a:is(:hover, :focus-visible) {
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: #fff;
    box-shadow: none;
    transform: none;
  }

  .site-header .site-nav a.is-active {
    border-color: rgba(214,174,91,.24);
    background:
      linear-gradient(90deg, rgba(190,24,30,.16), transparent 58%),
      rgba(255,255,255,.035);
    color: #fff;
    box-shadow: inset .16rem 0 0 var(--hn-red);
  }

  .site-header .site-nav .mobile-download-link {
    grid-column: 1;
    min-height: 3.45rem;
    margin-block-start: .3rem;
    justify-content: center;
    border-color: rgba(216,176,89,.58);
    background:
      linear-gradient(180deg, rgba(238,200,115,.98), rgba(177,129,47,.94));
    color: #161007;
    box-shadow: 0 .75rem 1.6rem rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
  }

  .site-header .site-nav .mobile-download-link::after {
    display: none;
  }

  html[dir="rtl"] .site-header .site-nav a.is-active {
    box-shadow: inset -.16rem 0 0 var(--hn-red);
  }

  html[dir="rtl"] .site-header .site-nav a::after {
    content: "‹";
    margin-inline-start: auto;
  }

  html[dir="rtl"] .site-header .language-menu {
    right: auto;
    left: 0;
  }

  html[dir="rtl"] .site-header .language-menu button.is-active {
    box-shadow: inset -.14rem 0 0 var(--studio-gold);
  }

  .site-header .brand-wordmark {
    display: none;
  }
}

@media (min-width: 62rem) {
  .site-header.studio-header,
  .site-header {
    inset: .85rem clamp(1rem, 2vw, 2rem) auto;
    padding: .5rem .7rem;
    border-radius: 1.15rem;
  }

  .site-header .site-nav {
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }

  .site-header .site-nav a {
    min-height: 2.8rem;
    border-color: transparent;
    background: transparent;
  }

  .site-header .site-nav a:is(:hover, :focus-visible, .is-active) {
    background: rgba(255,255,255,.04);
    box-shadow: none;
  }
}


/* ==========================================================================
   V18 · Unified glass header refinement — desktop + mobile
   ========================================================================== */

/* Uploaded 3D flag artwork used by the language switcher. */
.flag-image {
  display: block;
  width: 1.75rem;
  height: 1.18rem;
  flex: 0 0 1.75rem;
  object-fit: contain;
  filter: drop-shadow(0 .12rem .24rem rgba(0,0,0,.42));
  user-select: none;
  pointer-events: none;
}

.language-current-flag {
  width: 1.8rem;
  height: 1.22rem;
}

.language-option-flag {
  width: 2rem;
  height: 1.38rem;
}

.site-header.studio-header,
.site-header {
  inset: max(.7rem, env(safe-area-inset-top)) .8rem auto;
  min-height: 3.7rem;
  padding: .42rem .5rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(8,10,14,.58);
  box-shadow:
    0 .9rem 2.4rem rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
}

.site-header.is-scrolled,
body.nav-open .site-header {
  border-color: rgba(216,176,89,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018)),
    rgba(7,9,13,.78);
}

.site-header .brand {
  min-width: 2.7rem;
  min-height: 2.7rem;
  gap: .55rem;
  padding: .08rem .18rem;
}

.site-header .brand img {
  width: 2.42rem;
  height: 2.42rem;
  flex-basis: 2.42rem;
}

.site-header .language-toggle {
  min-width: 4.65rem;
  min-height: 2.7rem;
  padding-inline: .58rem .46rem;
  gap: .42rem;
  border-radius: .78rem;
}

.language-current-code {
  min-width: 1.2rem;
  font-size: .68rem;
}

.site-header .language-menu {
  width: min(17.5rem, calc(100vw - 1.6rem));
}

.site-header .language-menu button {
  grid-template-columns: 1.55rem minmax(0, 1fr) auto;
}

.site-header .nav-toggle {
  width: 2.7rem;
  min-width: 2.7rem;
  min-height: 2.7rem;
  border-radius: .78rem;
}

/* Mobile: same premium material, cleaner spacing and one coherent menu. */
@media (max-width: 61.98rem) {
  .site-header.studio-header,
  .site-header {
    display: flex;
    align-items: center;
    gap: .38rem;
  }

  .site-header .brand {
    order: 1;
    margin-inline-end: auto;
  }

  .site-header .language-switcher {
    order: 3;
  }

  .site-header .nav-toggle {
    order: 4;
  }

  .site-header .site-nav {
    inset: calc(max(.7rem, env(safe-area-inset-top)) + 4.25rem) .8rem auto;
    gap: .2rem;
    padding: .48rem;
    border-radius: 1rem;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012)),
      rgba(7,9,13,.91);
  }

  .site-header .site-nav a {
    min-height: 3.25rem;
    padding-inline: .92rem;
    border: 0;
    border-block-end: 1px solid rgba(255,255,255,.055);
    border-radius: .68rem;
    background: transparent;
  }

  .site-header .site-nav a:last-of-type {
    border-block-end: 0;
  }

  .site-header .site-nav a.is-active {
    border: 1px solid rgba(216,176,89,.18);
    background:
      linear-gradient(90deg, rgba(190,24,30,.14), transparent 58%),
      rgba(255,255,255,.032);
  }

  .site-header .site-nav .mobile-download-link {
    border: 1px solid rgba(218,180,98,.5);
    border-radius: .72rem;
  }
}

/* Desktop: slim centered glass navigation, no large inner navigation box. */
@media (min-width: 62rem) {
  .site-header.studio-header,
  .site-header {
    inset: .85rem max(1rem, calc((100vw - 88rem) / 2)) auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    width: auto;
    min-height: 4.25rem;
    gap: clamp(.6rem, 1.2vw, 1.15rem);
    padding: .5rem .62rem .5rem .72rem;
    border-radius: 1rem;
  }

  .site-header .brand {
    order: 1;
    margin: 0;
    padding-inline-end: .5rem;
  }

  .site-header .brand-wordmark {
    display: block;
    min-width: 4.9rem;
  }

  .brand-wordmark strong {
    font-size: .74rem;
    letter-spacing: .15em;
  }

  .brand-wordmark small {
    margin-block-start: .2rem;
    font-size: .5rem;
    letter-spacing: .27em;
  }

  .site-header .site-nav {
    position: static;
    order: 2;
    display: flex;
    width: auto;
    max-height: none;
    align-items: center;
    justify-content: center;
    gap: .05rem;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .site-header .site-nav a {
    position: relative;
    min-height: 2.72rem;
    padding-inline: clamp(.68rem, 1vw, .95rem);
    border: 0;
    border-radius: .68rem;
    background: transparent;
    color: rgba(255,255,255,.62);
    font-size: .67rem;
    letter-spacing: .075em;
    box-shadow: none;
  }

  .site-header .site-nav a::before {
    display: none;
  }

  .site-header .site-nav a::after {
    content: "";
    position: absolute;
    inset: auto .8rem .18rem;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--hn-red), transparent);
    opacity: 0;
    transform: scaleX(.35);
    transition: opacity .18s ease, transform .18s ease;
  }

  .site-header .site-nav a:is(:hover, :focus-visible) {
    background: rgba(255,255,255,.035);
    color: #fff;
    transform: none;
  }

  .site-header .site-nav a.is-active {
    background: rgba(255,255,255,.045);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }

  .site-header .site-nav a.is-active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .site-header .site-nav .mobile-download-link {
    display: none;
  }

  .site-header .nav-toggle {
    display: none;
  }

  .header-actions {
    order: 3;
    display: flex;
    align-items: center;
  }

  .header-download {
    min-width: 8.6rem;
    min-height: 2.72rem;
    padding-inline: 1.05rem;
    border-color: rgba(221,182,101,.52);
    border-radius: .7rem;
    background:
      linear-gradient(180deg, rgba(225,185,102,.94), rgba(168,120,45,.96));
    color: #141006;
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.22);
    font-size: .64rem;
    letter-spacing: .085em;
  }

  .site-header .language-switcher {
    order: 4;
    margin: 0;
  }

  .site-header .language-toggle {
    min-width: 4.45rem;
    min-height: 2.72rem;
    border-radius: .7rem;
    background:
      linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
      rgba(5,7,11,.34);
  }
}

@media (min-width: 62rem) and (max-width: 74rem) {
  .site-header.studio-header,
  .site-header {
    gap: .45rem;
  }

  .site-header .brand-wordmark {
    display: none;
  }

  .site-header .site-nav a {
    padding-inline: .58rem;
    font-size: .62rem;
  }

  .header-download {
    min-width: 7.7rem;
    padding-inline: .8rem;
  }
}


/* ==========================================================================
   V19 · Header behavior + desktop language cleanup
   ========================================================================== */

/* Hide the glass header while scrolling down. It returns on upward scroll,
   at the top of the page, or whenever navigation/language UI is open. */
.site-header.studio-header,
.site-header {
  transition:
    transform .32s cubic-bezier(.2,.8,.2,1),
    opacity .24s ease,
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
  will-change: transform, opacity;
}

.site-header.is-hidden-on-scroll {
  transform: translateY(calc(-100% - 1.5rem));
  opacity: 0;
  pointer-events: none;
}

body.nav-open .site-header,
.site-header:has(.language-switcher.is-open) {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Desktop language selector: clean typography only, no country flags. */
@media (min-width: 62rem) {
  .site-header .language-current-flag,
  .site-header .language-option-flag {
    display: none !important;
  }

  .site-header .language-toggle {
    min-width: 4rem;
    padding-inline: .72rem .52rem;
    gap: .5rem;
  }

  .site-header .language-menu {
    width: 15.75rem;
    padding: .55rem;
  }

  .site-header .language-menu button {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .85rem;
    min-height: 3rem;
    padding-inline: .85rem;
  }

  .site-header .language-option-label {
    padding-inline-start: 0;
  }

  .site-header .language-option-code {
    justify-self: end;
  }
}

/* ==========================================================================
   V20 · Premium frosted character rotation control
   ========================================================================== */

.home-page .character-controls {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(226, 190, 113, .28);
  border-radius: 1.05rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018) 48%, rgba(0,0,0,.08)),
    rgba(8, 9, 12, .58);
  box-shadow:
    0 1.15rem 2.8rem rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 0 0 1px rgba(255,255,255,.018);
  -webkit-backdrop-filter: blur(18px) saturate(128%);
  backdrop-filter: blur(18px) saturate(128%);
}

.home-page .character-controls::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 0%, rgba(216,176,89,.12), transparent 36%),
    linear-gradient(105deg, transparent 0 34%, rgba(255,255,255,.055) 48%, transparent 62% 100%);
}

.home-page .character-controls .carousel-arrow {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(226,190,113,.30);
  border-radius: .78rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.012)),
    rgba(7, 12, 18, .76);
  color: rgba(255,255,255,.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 .55rem 1.2rem rgba(0,0,0,.24);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}

.home-page .character-controls .carousel-arrow::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: calc(.78rem - 2px);
  background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 45%);
}

.home-page .character-controls .carousel-arrow svg {
  position: relative;
  z-index: 1;
  width: 1.22rem;
  height: 1.22rem;
  stroke-width: 2.15;
}

.home-page .character-controls .carousel-arrow:is(:hover, :focus-visible) {
  border-color: rgba(225, 182, 92, .70);
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.018)),
    rgba(17, 17, 20, .88);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 .65rem 1.5rem rgba(0,0,0,.3),
    0 0 1.2rem rgba(190,24,30,.10);
  transform: translateY(-1px);
}

.home-page .character-controls .carousel-arrow:active {
  transform: translateY(0) scale(.97);
}

/* Desktop / tablet landscape: one slim premium glass control. */
@media (min-width: 62rem) {
  .home-page .character-controls {
    position: static;
    display: grid;
    grid-template-columns: 3.15rem auto minmax(9.5rem, 1fr) 3.15rem;
    align-items: center;
    gap: .42rem;
    width: min(100%, 34rem);
    min-height: 4rem;
    padding: .38rem;
  }

  .home-page .character-controls .carousel-arrow {
    width: 3.15rem;
    height: 3.15rem;
  }

  .home-page .character-controls span,
  .home-page .character-controls strong {
    display: inline-flex;
    min-height: 2.85rem;
    align-items: center;
    border: 0;
  }

  .home-page .character-controls span {
    min-width: 6.35rem;
    justify-content: center;
    padding-inline: 1rem;
    border-inline-end: 1px solid rgba(255,255,255,.09);
    color: color-mix(in oklch, var(--hn-brass) 88%, white);
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-shadow: 0 0 .8rem rgba(216,176,89,.18);
  }

  .home-page .character-controls strong {
    justify-content: center;
    padding-inline: 1rem;
    color: rgba(255,255,255,.64);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .115em;
    text-transform: uppercase;
  }
}

/* Phones / compact tablets: keep the hero clean, but match the same glass UI. */
@media (max-width: 61.98rem) {
  .home-page.game-overview-page .character-controls {
    overflow: visible;
    width: min(17.5rem, 78vw);
    height: 3.65rem;
    padding: .3rem;
    border-color: rgba(226,190,113,.16);
    border-radius: 1rem;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.008)),
      rgba(6,8,11,.22);
    box-shadow:
      0 .9rem 2.2rem rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.055);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
    backdrop-filter: blur(10px) saturate(118%);
  }

  .home-page.game-overview-page .character-controls .carousel-arrow {
    width: 3rem;
    height: 3rem;
    border-color: rgba(226,190,113,.38);
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.012)),
      rgba(7,11,17,.72);
    pointer-events: auto;
  }

  .home-page.game-overview-page .character-controls span,
  .home-page.game-overview-page .character-controls strong {
    display: none;
  }
}

/* ==========================================================================
   V21 · Stable character carousel geometry
   Prevent carousel swaps from expanding the document or covering controls.
   Applies consistently to desktop + mobile.
   ========================================================================== */

/* Dynamic character names, glow layers and off-screen cards must never create
   a wider document while the active card changes. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.home-page .character-hero {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  contain: paint;
}

.home-page .character-name-wall {
  inset-inline: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
}

.home-page .character-stage,
.home-page .character-ring {
  max-width: 100%;
}

.home-page .character-card,
.home-page .character-card::before {
  contain: paint;
}

/* Keep copy geometry stable when short/long character names and descriptions
   are swapped so the control row cannot be pushed to a new position. */
.home-page [data-character-name] {
  min-height: 1.7em;
}

.home-page [data-character-role] {
  min-height: 1.45em;
}

.home-page [data-character-desc] {
  min-height: 5.25em;
}

/* Always keep carousel controls above every character layer. */
.home-page .character-controls {
  z-index: 30;
  box-sizing: border-box;
  isolation: isolate;
}

.home-page .character-controls .carousel-arrow {
  z-index: 32;
  flex: 0 0 auto;
}

/* Desktop: keep the control width stable even when copy above it changes. */
@media (min-width: 62rem) {
  .home-page .character-controls {
    position: relative;
    width: min(100%, 34rem);
    min-width: 0;
    max-width: 34rem;
    margin-block-start: 1.15rem;
  }

  .home-page [data-character-name] {
    min-height: 1.64em;
  }

  .home-page [data-character-desc] {
    min-height: 5.1em;
  }
}

/* Mobile/tablet: reset the legacy mixed inset + translate positioning.
   Center the glass control explicitly so neither arrow can slide off-screen. */
@media (max-width: 61.98rem) {
  .home-page.game-overview-page .character-controls {
    position: absolute;
    top: clamp(18.5rem, 37svh, 21.5rem);
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(18rem, calc(100vw - (var(--page-gutter) * 2)));
    max-width: calc(100vw - (var(--page-gutter) * 2));
    min-width: 0;
    margin: 0;
    transform: translateX(-50%);
    overflow: hidden;
    pointer-events: none;
  }

  .home-page.game-overview-page .character-controls .carousel-arrow {
    position: relative;
    z-index: 32;
    flex: 0 0 3rem;
    pointer-events: auto;
  }

  .home-page [data-character-name] {
    min-height: 1.9em;
  }

  .home-page [data-character-role] {
    min-height: 1.5em;
  }

  .home-page [data-character-desc] {
    min-height: 5.4em;
  }
}

/* Narrow phones: retain safe margins without shrinking the tap targets. */
@media (max-width: 24rem) {
  .home-page.game-overview-page .character-controls {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
  }
}


/* ==========================================================================
   V22 · Mobile hero cleanup
   Floating glass arrows only, larger active character, simplified copy.
   ========================================================================== */
@media (max-width: 61.98rem) {
  /* Keep the first mobile fold focused on the character. */
  .home-page.game-overview-page .character-hero,
  .home-page.game-overview-page .hero-content {
    min-height: 51rem;
  }

  /* Restore a strong, large central character presence. */
  .home-page.game-overview-page .character-stage,
  html[dir="rtl"] .home-page.game-overview-page .character-stage {
    inset: 4.85rem 0 auto;
    width: 100%;
    height: clamp(29.5rem, 62svh, 35rem);
    overflow: hidden;
  }

  .home-page.game-overview-page .character-ring,
  .home-page.game-overview-page .character-card img {
    height: clamp(29.5rem, 62svh, 35rem);
  }

  .home-page.game-overview-page .character-card {
    width: clamp(12rem, 55vw, 15.5rem);
  }

  .home-page.game-overview-page .character-card.is-active {
    --scale: 1.1;
  }

  .home-page.game-overview-page .character-card.is-prev {
    --x: -9.9rem;
    --y: 1.9rem;
    --scale: .64;
  }

  .home-page.game-overview-page .character-card.is-next {
    --x: 9.9rem;
    --y: 1.9rem;
    --scale: .64;
  }

  /* Reserve the correct amount of space before the copy begins. */
  .home-page.game-overview-page .character-mobile-space {
    height: clamp(30.25rem, 63svh, 35.75rem);
  }

  /* Remove the large glass bar completely. The control itself is only a
     transparent positioning layer for two independent floating arrows. */
  .home-page.game-overview-page .character-controls {
    position: absolute;
    top: clamp(20.75rem, 43svh, 24rem);
    right: var(--page-gutter);
    bottom: auto;
    left: var(--page-gutter);
    display: flex;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
    pointer-events: none;
  }

  .home-page.game-overview-page .character-controls::before {
    display: none;
  }

  .home-page.game-overview-page .character-controls span,
  .home-page.game-overview-page .character-controls strong {
    display: none !important;
  }

  /* Only the arrow buttons are glass. No square/rectangle container around
     the pair. */
  .home-page.game-overview-page .character-controls .carousel-arrow {
    position: relative;
    z-index: 32;
    width: 3.3rem;
    height: 3.3rem;
    flex: 0 0 3.3rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.19);
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.13), transparent 42%),
      rgba(8, 10, 14, .36);
    color: rgba(255,255,255,.96);
    box-shadow:
      0 .7rem 1.6rem rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.12),
      0 0 0 1px rgba(216,176,89,.05);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    pointer-events: auto;
  }

  .home-page.game-overview-page .character-controls .carousel-arrow::before {
    inset: 2px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 48%);
  }

  .home-page.game-overview-page .character-controls .carousel-arrow svg {
    width: 1.28rem;
    height: 1.28rem;
    stroke-width: 2.1;
  }


  .home-page.game-overview-page .character-copy {
    gap: .48rem;
  }

  .home-page.game-overview-page [data-character-name] {
    min-height: 0;
    margin-block-start: .35rem;
  }

  .home-page.game-overview-page [data-character-role] {
    min-height: 0;
    margin-block-start: .15rem;
  }

  /* Keep the portrait selector compact and away from the center character. */
  .home-page .hero-portrait-nav {
    margin-block-start: .85rem;
  }
}

@media (max-width: 24rem) {
  .home-page.game-overview-page .character-card {
    width: clamp(11.4rem, 56vw, 13.5rem);
  }

  .home-page.game-overview-page .character-controls {
    right: 1rem;
    left: 1rem;
  }

  .home-page.game-overview-page .character-controls .carousel-arrow {
    width: 3.1rem;
    height: 3.1rem;
    flex-basis: 3.1rem;
  }
}

/* ========================================================================== 
   V23 · Restore approved mobile character geometry
   Preserve V22 floating glass arrows, but restore the character size and
   proportions from the stable pre-V22 mobile layout.
   ========================================================================== */
@media (max-width: 42rem) {
  .home-page.game-overview-page .character-hero,
  .home-page.game-overview-page .hero-content {
    min-height: 50rem;
  }

  .home-page.game-overview-page .character-stage,
  html[dir="rtl"] .home-page.game-overview-page .character-stage {
    inset: 5.15rem 0 auto;
    width: 100%;
    height: clamp(25.5rem, 54svh, 31rem);
    overflow: hidden;
  }

  .home-page.game-overview-page .character-ring,
  .home-page.game-overview-page .character-card img {
    height: clamp(25.5rem, 54svh, 31rem);
  }

  .home-page.game-overview-page .character-card {
    width: clamp(10rem, 46vw, 13.75rem);
  }

  .home-page.game-overview-page .character-card.is-active {
    --scale: 1.04;
  }

  .home-page.game-overview-page .character-card.is-prev {
    --x: -8rem;
    --y: 1.65rem;
    --scale: .68;
  }

  .home-page.game-overview-page .character-card.is-next {
    --x: 8rem;
    --y: 1.65rem;
    --scale: .68;
  }

  .home-page.game-overview-page .character-mobile-space {
    height: clamp(26rem, 55svh, 31.5rem);
  }

  /* Keep the clean floating-arrow concept from V22, aligned to the restored
     character geometry. */
  .home-page.game-overview-page .character-controls {
    top: clamp(18.5rem, 37svh, 21.5rem);
  }
}

@media (max-width: 22rem) {
  .home-page.game-overview-page .character-card {
    width: clamp(9.5rem, 47vw, 11rem);
  }
}


/* ==========================================================================
   V24 · Restore full character artwork + original hero aura
   Fix mobile head clipping without shrinking the approved character scale.
   Also restores the un-clipped colored aura behind each character from the
   approved pre-V21 hero treatment.
   ========================================================================== */

/* V21 paint containment clipped the oversized character aura. Keep overflow
   safety at the hero boundary instead, so the original glow can breathe. */
.home-page .character-card,
.home-page .character-card::before {
  contain: none;
}

.home-page .character-card::before {
  inset: 20% -34% 2%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--hero-accent), transparent 40%) 0%,
    transparent 66%
  );
  filter: blur(24px);
}

/* The hero itself remains the final clipping boundary, preventing horizontal
   page growth while allowing the character and aura to render naturally. */
.home-page .character-hero {
  overflow: hidden;
}

@media (max-width: 42rem) {
  /* Do not crop tall hats, hair, keffiyeh or other head details. */
  .home-page.game-overview-page .character-stage,
  html[dir="rtl"] .home-page.game-overview-page .character-stage,
  .home-page.game-overview-page .character-ring {
    overflow: visible;
  }

  /* Keep the exact approved V23 character size, only move the stage slightly
     lower so the complete head clears the glass header. */
  .home-page.game-overview-page .character-stage,
  html[dir="rtl"] .home-page.game-overview-page .character-stage {
    inset-block-start: 5.8rem;
  }

  .home-page.game-overview-page .character-card {
    width: clamp(10rem, 46vw, 13.75rem);
  }

  .home-page.game-overview-page .character-card.is-active {
    --scale: 1.04;
  }

  .home-page.game-overview-page .character-ring,
  .home-page.game-overview-page .character-card img {
    height: clamp(25.5rem, 54svh, 31rem);
  }

  /* Compensate for the small downward shift so the lower copy keeps the same
     breathing room and never collides with the character feet. */
  .home-page.game-overview-page .character-mobile-space {
    height: calc(clamp(26rem, 55svh, 31.5rem) + .65rem);
  }

  /* Keep the floating arrows aligned with the visual center of the restored
     character rather than the old clipped stage. */
  .home-page.game-overview-page .character-controls {
    top: calc(clamp(18.5rem, 37svh, 21.5rem) + .35rem);
  }
}

/* ========================================================================== 
   V26 · Western showcase sections — exact reference-inspired composition
   ========================================================================== */
.western-showcase {
  position: relative;
  padding-block: clamp(1.1rem, 2.6vw, 2rem);
  background:
    radial-gradient(circle at 18% 18%, rgba(174, 110, 35, .06), transparent 28rem),
    linear-gradient(180deg, #080908, #070807 72%, #080907);
}

.western-showcase--studio {
  padding-block-start: .4rem;
  padding-block-end: clamp(2.2rem, 5vw, 4.8rem);
}

.western-showcase__container {
  width: min(100% - clamp(1rem, 4vw, 3rem), 112rem);
}

.western-frame {
  --western-gold: #bd8338;
  --western-gold-soft: #8c5c27;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(189, 131, 56, .62);
  background:
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 34%),
    #080a09;
  box-shadow:
    inset 0 0 0 5px #080a09,
    inset 0 0 0 6px rgba(189, 131, 56, .3),
    0 1.8rem 4rem rgba(0,0,0,.28);
}

.western-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(199,149,78,.16) 0 1px, transparent 1.3px),
    radial-gradient(circle at 80% 65%, rgba(255,255,255,.08) 0 .6px, transparent .9px);
  background-size: 17px 17px, 23px 23px;
  mix-blend-mode: screen;
}

.western-frame::after {
  content: "";
  position: absolute;
  inset: .45rem;
  z-index: 5;
  border: 1px solid rgba(189, 131, 56, .28);
  pointer-events: none;
}

.western-corner {
  position: absolute;
  z-index: 7;
  width: .7rem;
  height: .7rem;
  pointer-events: none;
}

.western-corner::before,
.western-corner::after {
  content: "";
  position: absolute;
  background: var(--western-gold);
}

.western-corner::before { width: .7rem; height: 1px; }
.western-corner::after { width: 1px; height: .7rem; }
.western-corner--tl { inset: .25rem auto auto .25rem; }
.western-corner--tr { inset: .25rem .25rem auto auto; transform: rotate(90deg); }
.western-corner--bl { inset: auto auto .25rem .25rem; transform: rotate(-90deg); }
.western-corner--br { inset: auto .25rem .25rem auto; transform: rotate(180deg); }

.western-label {
  position: relative;
  z-index: 6;
  margin: 0;
  color: #d29b50;
  font-family: var(--font-body);
  font-size: clamp(.62rem, .8vw, .82rem);
  font-weight: 800;
  letter-spacing: .25em;
  line-height: 1.1;
  text-transform: uppercase;
}

.game-showcase-card {
  display: grid;
  min-height: clamp(24rem, 39vw, 38rem);
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
}

.game-showcase-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.game-showcase-media .western-label {
  position: absolute;
  inset: clamp(1.2rem, 2.6vw, 2.2rem) auto auto clamp(1.25rem, 2.7vw, 2.4rem);
}

.game-showcase-media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: 47% center;
  filter: saturate(.78) contrast(1.04) brightness(.82) sepia(.12);
  transform: scale(1.015);
}

.game-showcase-media__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,6,5,.08) 0 72%, #080a09 100%),
    linear-gradient(180deg, rgba(5,6,5,.05), rgba(5,6,5,.18));
  pointer-events: none;
}

.game-showcase-copy {
  position: relative;
  z-index: 6;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2rem, 4.5vw, 5.3rem) clamp(1.5rem, 4.2vw, 4.6rem);
  background:
    radial-gradient(circle at 0 50%, rgba(180,111,35,.09), transparent 17rem),
    linear-gradient(90deg, rgba(8,10,9,.78), #080a09 21% 100%);
}

.game-showcase-copy h2,
.about-showcase-copy h2 {
  margin: 0;
  color: #ead3ad;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 .5rem 1.8rem rgba(0,0,0,.4);
}

.game-showcase-copy h2 {
  max-width: 100%;
  font-size: clamp(1.7rem, 3.4vw, 3.4rem);
  line-height: .98;
  white-space: nowrap;
}

.game-showcase-copy > p {
  margin: clamp(1.1rem, 2vw, 1.8rem) 0 clamp(1.4rem, 2.4vw, 2.2rem);
  color: #c7c0b5;
  font-size: clamp(.85rem, 1.1vw, 1.15rem);
  line-height: 1.65;
}

.western-action {
  position: relative;
  display: inline-flex;
  min-width: min(100%, 18rem);
  min-height: 3.35rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-inline: clamp(1rem, 2vw, 1.7rem);
  border: 1px solid #b7803a;
  border-radius: .18rem;
  background: linear-gradient(180deg, rgba(184,128,56,.1), rgba(184,128,56,.018));
  color: #d7aa67;
  font-size: clamp(.76rem, .95vw, .96rem);
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.38);
  transition: background-color .22s ease, color .22s ease, transform .22s ease, border-color .22s ease;
}

.western-action span {
  font-size: 1.55em;
  line-height: 1;
}

.western-action:is(:hover,:focus-visible) {
  border-color: #d19b51;
  background: linear-gradient(180deg, rgba(184,128,56,.18), rgba(184,128,56,.04));
  color: #f0c783;
  transform: translateY(-2px);
}

.western-detail {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: .75rem;
  margin-block-start: clamp(1rem, 1.7vw, 1.4rem);
  color: #b9813d;
  font-size: clamp(.62rem, .8vw, .78rem);
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.western-detail span {
  font-size: 1.5em;
  line-height: .8;
  transition: transform .2s ease;
}

.western-detail:is(:hover,:focus-visible) span { transform: translateX(.22rem); }

.about-showcase-card {
  display: grid;
  gap: clamp(1.8rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 4.5rem) clamp(1.5rem, 5vw, 5rem) clamp(1.5rem, 3.8vw, 3.5rem);
  background:
    radial-gradient(circle at 14% 10%, rgba(184,128,56,.06), transparent 24rem),
    linear-gradient(180deg, #090b0a, #070908);
}

.about-showcase-copy {
  position: relative;
  z-index: 6;
  display: grid;
  gap: clamp(.8rem, 1.5vw, 1.2rem);
}

.about-showcase-copy h2 {
  font-size: clamp(2rem, 4.2vw, 4.8rem);
  line-height: .95;
}

.about-showcase-lede {
  max-width: 40rem;
  margin: 0;
  color: #c9c0b4;
  font-size: clamp(.9rem, 1.2vw, 1.18rem);
  line-height: 1.7;
}

.studio-fact-grid {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.65rem, 1.5vw, 1.35rem);
}

.studio-fact-card {
  display: grid;
  min-width: 0;
  min-height: clamp(10rem, 16vw, 14rem);
  place-items: center;
  align-content: center;
  gap: clamp(.65rem, 1.2vw, 1rem);
  padding: clamp(1rem, 2vw, 1.5rem) .75rem;
  border: 1px solid rgba(185,126,51,.57);
  clip-path: polygon(.65rem 0, calc(100% - .65rem) 0, 100% .65rem, 100% calc(100% - .65rem), calc(100% - .65rem) 100%, .65rem 100%, 0 calc(100% - .65rem), 0 .65rem);
  background: linear-gradient(180deg, rgba(183,124,49,.055), rgba(255,255,255,.008));
  text-align: center;
}

.studio-fact-card svg {
  width: clamp(2rem, 3vw, 2.8rem);
  height: clamp(2rem, 3vw, 2.8rem);
  fill: none;
  stroke: #bd853d;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.studio-fact-card span {
  color: #b98642;
  font-size: clamp(.58rem, .72vw, .75rem);
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.studio-fact-card strong {
  color: #d7c7af;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
}

.about-showcase-link {
  position: relative;
  z-index: 6;
  justify-self: center;
  margin-block-start: -.1rem;
}

/* Mobile: preserve the reference composition. Nothing stacks vertically. */
@media (max-width: 42rem) {
  .western-showcase {
    padding-block: .7rem;
  }

  .western-showcase--studio {
    padding-block-start: .15rem;
    padding-block-end: 1.3rem;
  }

  .western-showcase__container {
    width: calc(100% - 1rem);
  }

  .western-frame {
    box-shadow:
      inset 0 0 0 3px #080a09,
      inset 0 0 0 4px rgba(189,131,56,.28),
      0 1.1rem 2.2rem rgba(0,0,0,.24);
  }

  .western-frame::after { inset: .28rem; }

  .game-showcase-card {
    min-height: clamp(15.5rem, 74vw, 21rem);
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  }

  .game-showcase-media .western-label {
    inset: .8rem auto auto .8rem;
    font-size: .47rem;
    letter-spacing: .2em;
  }

  .game-showcase-media img {
    object-position: 48% center;
    transform: scale(1.04);
  }

  .game-showcase-copy {
    padding: 1.15rem .75rem 1rem .8rem;
  }

  .game-showcase-copy h2 {
    font-size: clamp(.95rem, 5vw, 1.35rem);
    letter-spacing: .075em;
  }

  .game-showcase-copy > p {
    margin: .65rem 0 .8rem;
    font-size: clamp(.55rem, 2.4vw, .7rem);
    line-height: 1.55;
  }

  .western-action {
    min-width: 100%;
    min-height: 2.55rem;
    gap: .3rem;
    padding-inline: .65rem;
    font-size: clamp(.48rem, 2.1vw, .62rem);
    letter-spacing: .075em;
  }

  .western-detail {
    margin-block-start: .65rem;
    gap: .35rem;
    font-size: clamp(.43rem, 1.9vw, .55rem);
    letter-spacing: .12em;
  }

  .about-showcase-card {
    gap: 1.15rem;
    padding: 1.3rem .85rem 1.15rem;
  }

  .about-showcase-copy {
    gap: .55rem;
  }

  .about-showcase-copy .western-label {
    font-size: .5rem;
  }

  .about-showcase-copy h2 {
    font-size: clamp(1.5rem, 7.4vw, 2rem);
    letter-spacing: .11em;
  }

  .about-showcase-lede {
    font-size: clamp(.63rem, 2.7vw, .76rem);
    line-height: 1.55;
  }

  .studio-fact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .42rem;
  }

  .studio-fact-card {
    min-height: 7.8rem;
    gap: .42rem;
    padding: .65rem .22rem;
    clip-path: polygon(.42rem 0, calc(100% - .42rem) 0, 100% .42rem, 100% calc(100% - .42rem), calc(100% - .42rem) 100%, .42rem 100%, 0 calc(100% - .42rem), 0 .42rem);
  }

  .studio-fact-card svg {
    width: 1.65rem;
    height: 1.65rem;
  }

  .studio-fact-card span {
    font-size: clamp(.39rem, 1.72vw, .5rem);
    letter-spacing: .09em;
    line-height: 1.2;
  }

  .studio-fact-card strong {
    font-size: clamp(.9rem, 4vw, 1.18rem);
  }

  .about-showcase-link {
    margin-block-start: -.1rem;
    font-size: clamp(.46rem, 2vw, .58rem);
  }
}

@media (max-width: 22rem) {
  .western-showcase__container { width: calc(100% - .65rem); }
  .game-showcase-card { min-height: 14.6rem; grid-template-columns: 1.03fr .97fr; }
  .game-showcase-copy { padding-inline: .58rem; }
  .game-showcase-copy h2 { font-size: .86rem; }
  .game-showcase-copy > p { font-size: .5rem; }
  .western-action { min-height: 2.3rem; font-size: .45rem; }
  .about-showcase-card { padding-inline: .65rem; }
}


/* ==========================================================================\n   V27 · Gold footer rebuild — no horizontal rail on any viewport\n   ========================================================================== */
.footer-gold-system.global-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.2rem, 5vw, 4.5rem) max(1.25rem, env(safe-area-inset-bottom));
  border-block-start: 1px solid color-mix(in oklch, var(--studio-gold) 52%, transparent);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in oklch, var(--studio-gold) 9%, transparent), transparent 28rem),
    linear-gradient(180deg, #090908 0%, #050505 72%, #030303 100%);
}

.footer-gold-system::after {
  content: "";
  position: absolute;
  inset: .7rem var(--page-gutter) auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--studio-gold) 72%, transparent) 12% 88%, transparent);
  opacity: .8;
}

.footer-gold-system .footer-word {
  inset: auto 0 -.14em;
  z-index: -1;
  color: color-mix(in oklch, var(--studio-gold) 5%, transparent);
  font-size: clamp(7rem, 24vw, 23rem);
}

.footer-gold-system .footer-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
  margin-inline: auto;
}

.footer-gold-system .footer-intro,
.footer-gold-system .footer-links-grid,
.footer-gold-system .footer-column {
  min-width: 0;
}

.footer-gold-system .footer-intro {
  display: grid;
  align-content: start;
  gap: 1.35rem;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  border: 1px solid color-mix(in oklch, var(--studio-gold) 44%, transparent);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--studio-gold) 4%, transparent), transparent 62%),
    rgba(8,8,8,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.footer-gold-system .footer-intro__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.footer-gold-system .footer-brand {
  width: clamp(3.25rem, 5vw, 4.5rem);
  height: clamp(3.25rem, 5vw, 4.5rem);
  flex: 0 0 auto;
}

.footer-gold-system .footer-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-gold-system .footer-intro__copy {
  display: grid;
  gap: .35rem;
  min-width: 0;
}

.footer-gold-system .footer-intro__copy strong {
  color: var(--studio-gold);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.footer-gold-system .footer-intro__copy p {
  max-width: 48ch;
  margin: 0;
  color: color-mix(in oklch, var(--studio-white) 70%, var(--studio-muted));
  font-size: var(--text-sm);
  line-height: 1.65;
}

.footer-gold-system .footer-social-text {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.footer-gold-system .footer-social-text a {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  justify-content: center;
  padding-inline: .9rem;
  border: 1px solid color-mix(in oklch, var(--studio-gold) 30%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--studio-gold) 3%, transparent);
  color: color-mix(in oklch, var(--studio-gold) 80%, var(--studio-white));
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.footer-gold-system .footer-links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}

.footer-gold-system .footer-column {
  display: grid;
  align-content: start;
  gap: .25rem;
  padding: clamp(1.05rem, 2vw, 1.4rem);
  border: 1px solid color-mix(in oklch, var(--studio-gold) 34%, transparent);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--studio-gold) 3%, transparent), transparent 68%),
    rgba(7,7,7,.6);
}

.footer-gold-system .footer-column h2 {
  margin: 0 0 .55rem;
  color: var(--studio-gold);
  font-size: .7rem;
  letter-spacing: .16em;
}

.footer-gold-system .footer-column a {
  display: flex;
  min-height: 2.45rem;
  align-items: center;
  border-block-end: 1px solid color-mix(in oklch, var(--studio-gold) 12%, transparent);
  color: color-mix(in oklch, var(--studio-white) 70%, var(--studio-muted));
  font-size: .78rem;
  white-space: normal;
}

.footer-gold-system .footer-column a:last-child {
  border-block-end: 0;
}

@media (hover:hover) and (pointer:fine) {
  .footer-gold-system .footer-social-text a:hover,
  .footer-gold-system .footer-social-text a:focus-visible {
    border-color: color-mix(in oklch, var(--studio-gold) 72%, transparent);
    background: color-mix(in oklch, var(--studio-gold) 9%, transparent);
    color: var(--studio-gold);
    transform: translateY(-2px);
  }

  .footer-gold-system .footer-column a:hover,
  .footer-gold-system .footer-column a:focus-visible {
    color: var(--studio-gold);
    transform: none;
  }
}

.footer-gold-system .footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
  margin: clamp(1.3rem, 3vw, 2.4rem) auto 0;
  padding-block-start: 1rem;
  border-block-start: 1px solid color-mix(in oklch, var(--studio-gold) 34%, transparent);
  color: color-mix(in oklch, var(--studio-gold) 76%, var(--studio-white));
  justify-content: center;
  text-align: center;
}

.footer-gold-system .footer-bottom p {
  margin: 0;
  color: inherit;
  font-size: clamp(.62rem, 1.4vw, .76rem);
  font-weight: 800;
  letter-spacing: .08em;
}

/* Remove old mobile carousel behavior completely. */
.footer-gold-system .footer-shell,
.footer-gold-system .footer-links-grid,
.footer-gold-system .footer-intro,
.footer-gold-system .footer-column {
  overflow: visible;
  scroll-snap-type: none;
}

@media (max-width: 61.98rem) {
  .footer-gold-system .footer-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .footer-gold-system .footer-links-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 42rem) {
  .footer-gold-system.global-footer {
    padding-block-start: 2.25rem;
  }

  .footer-gold-system .footer-shell {
    width: min(calc(100% - 1.5rem), var(--page-max));
    gap: .8rem;
  }

  .footer-gold-system .footer-intro {
    gap: 1rem;
    padding: 1rem;
  }

  .footer-gold-system .footer-intro__top {
    grid-template-columns: 3rem minmax(0,1fr);
    gap: .75rem;
  }

  .footer-gold-system .footer-brand {
    width: 3rem;
    height: 3rem;
  }

  .footer-gold-system .footer-intro__copy strong {
    font-size: .66rem;
  }

  .footer-gold-system .footer-intro__copy p {
    font-size: .78rem;
    line-height: 1.55;
  }

  .footer-gold-system .footer-social-text {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .45rem;
  }

  .footer-gold-system .footer-social-text a {
    min-width: 0;
    min-height: 2.45rem;
    padding-inline: .35rem;
    font-size: .62rem;
  }

  .footer-gold-system .footer-links-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .8rem;
  }

  .footer-gold-system .footer-column {
    padding: .9rem;
  }

  .footer-gold-system .footer-column h2 {
    font-size: .62rem;
  }

  .footer-gold-system .footer-column a {
    min-height: 2.25rem;
    font-size: .68rem;
  }

  .footer-gold-system .footer-bottom {
    width: min(calc(100% - 1.5rem), var(--page-max));
    margin-block-start: 1rem;
    padding-block-start: .85rem;
  }

  .footer-gold-system .footer-word {
    font-size: clamp(6.5rem, 28vw, 9rem);
    bottom: -.05em;
  }
}

@media (max-width: 24rem) {
  .footer-gold-system .footer-social-text {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .footer-gold-system .footer-links-grid {
    gap: .55rem;
  }

  .footer-gold-system .footer-column {
    padding: .75rem;
  }
}


/* ==========================================================================\n   V28 · Animated gradient border system\n   Pure CSS/JS port of the approved animated-gradient-border component.\n   Applies to card/box surfaces only; buttons, text links, images, and form\n   fields keep their existing border behavior.\n   ========================================================================== */

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --card-gradient-primary: #584827;
  --card-gradient-secondary: #c7a03c;
  --card-gradient-accent: #f9de90;
  --card-gradient-speed: 5s;
  --card-gradient-width: 2px;
}

.animated-gradient-border {
  --gradient-angle: 0deg;
  --animated-border-width: var(--card-gradient-width);
  position: relative;
  isolation: isolate;
}

.animated-gradient-border-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  border-radius: inherit;
  padding: var(--animated-border-width);
  pointer-events: none;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--card-gradient-primary) 0%,
    var(--card-gradient-secondary) 27%,
    var(--card-gradient-accent) 30%,
    var(--card-gradient-secondary) 33%,
    var(--card-gradient-primary) 40%,
    var(--card-gradient-primary) 50%,
    var(--card-gradient-secondary) 77%,
    var(--card-gradient-accent) 80%,
    var(--card-gradient-secondary) 83%,
    var(--card-gradient-primary) 90%,
    var(--card-gradient-primary) 100%
  );
  animation: gradient-border-rotate var(--card-gradient-speed) linear infinite;
  filter: saturate(1.04);
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .animated-gradient-border {
    border-color: transparent !important;
  }

  .animated-gradient-border-layer {
    display: block;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}

@keyframes gradient-border-rotate {
  from { --gradient-angle: 0deg; }
  to { --gradient-angle: 360deg; }
}

/* Keep western corner ornaments above the moving border. */
.western-frame.animated-gradient-border .western-corner {
  z-index: 8;
}

/* The old inner line becomes intentionally subtle so the moving gradient is
   the primary card boundary, while the western double-frame character stays. */
.western-frame.animated-gradient-border::after {
  border-color: rgba(199, 160, 60, .10);
}

/* Card types with clipped western geometry inherit the animated edge cleanly. */
.studio-fact-card.animated-gradient-border .animated-gradient-border-layer {
  border-radius: 0;
}

/* Give compact cards a slightly finer edge on phones. */
@media (max-width: 42rem) {
  :root {
    --card-gradient-width: 1.5px;
    --card-gradient-speed: 5.4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-gradient-border-layer {
    animation: none;
    --gradient-angle: 32deg;
  }
}


/* ========================================================================== 
   V29 · Restore mobile character description
   Bring back the character bio under the name/role without changing the
   approved character geometry, arrows, portrait row, or desktop layout.
   ========================================================================== */
@media (max-width: 61.98rem) {
  .home-page.game-overview-page [data-character-desc] {
    display: block !important;
    min-height: 0;
    max-width: 34rem;
    margin-block: .55rem .2rem;
    color: color-mix(in oklch, var(--studio-white) 70%, var(--studio-muted));
    font-size: clamp(.88rem, 3.55vw, 1rem);
    line-height: 1.55;
  }

  .home-page.game-overview-page .character-hero,
  .home-page.game-overview-page .hero-content {
    min-height: 54rem;
  }
}


/* ========================================================================== 
   V30 · Mobile character bio hard restore
   Keep the description visible directly under the role/rating on phones and
   tablets. Explicitly clears every earlier concealment/clamp state.
   ========================================================================== */
@media (max-width: 61.98rem) {
  .home-page.game-overview-page .character-copy > [data-character-desc] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 40;
    width: min(100%, 34rem);
    max-width: 34rem;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: .45rem 0 .2rem !important;
    padding: 0 !important;
    overflow: visible !important;
    color: color-mix(in oklch, var(--studio-white) 76%, var(--studio-muted));
    font-size: clamp(.9rem, 3.65vw, 1rem);
    line-height: 1.55;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  .home-page.game-overview-page .character-copy {
    padding-block-end: 2.2rem;
  }

  .home-page.game-overview-page .character-hero,
  .home-page.game-overview-page .hero-content {
    min-height: 55.5rem;
  }
}


/* ==========================================================================
   V19 · Exact cinematic header from approved reference
   ========================================================================== */

:root {
  --approved-header-top: max(.9rem, env(safe-area-inset-top));
  --approved-header-side: clamp(1rem, 2vw, 2rem);
}

.site-header.studio-header,
.site-header {
  direction: ltr;
  inset: var(--approved-header-top) var(--approved-header-side) auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.8rem, 1.6vw, 1.9rem);
  min-height: clamp(4.7rem, 6vw, 5.75rem);
  padding: .95rem clamp(1rem, 1.8vw, 1.55rem);
  border: 1px solid rgba(216, 173, 92, .4);
  border-radius: 1.45rem;
  background:
    linear-gradient(180deg, rgba(22, 19, 21, .56), rgba(11, 12, 16, .78)),
    rgba(8, 9, 12, .66);
  box-shadow:
    0 1.2rem 2.8rem rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
}

.site-header.studio-header::before,
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 85% 50%, rgba(255, 190, 117, .12), transparent 28%),
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .08), transparent 24%),
    linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(201, 153, 74, .05) 52%, rgba(0, 0, 0, .12));
  pointer-events: none;
}

.site-header.is-scrolled,
body.nav-open .site-header {
  border-color: rgba(223, 183, 104, .52);
  background:
    linear-gradient(180deg, rgba(17, 16, 18, .62), rgba(8, 9, 12, .84)),
    rgba(8, 9, 12, .72);
  box-shadow: 0 1.4rem 3.2rem rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09);
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: .95rem;
  min-width: 0;
  padding: 0;
}

.site-header .brand img {
  width: clamp(2.7rem, 3.8vw, 3.3rem);
  height: clamp(2.7rem, 3.8vw, 3.3rem);
  flex: 0 0 auto;
  filter: drop-shadow(0 .45rem .9rem rgba(0, 0, 0, .42));
}

.site-header .brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: .14rem;
  color: #fff;
  line-height: 1;
}

.site-header .brand-wordmark strong {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: .34em;
}

.site-header .brand-wordmark small {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .46em;
  color: rgba(255, 255, 255, .78);
}

.site-header .site-nav {
  justify-self: center;
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.25rem, .9vw, .9rem);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
}

html[dir="rtl"] .site-header .site-nav {
  direction: rtl;
}

.site-header .site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  padding: .65rem .9rem 1rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .84);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}

.site-header .site-nav a::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: .36rem;
  width: .34rem;
  height: .34rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #f5daa1, #d1a04a);
  box-shadow: 0 0 .6rem rgba(225, 182, 98, .4);
  opacity: 0;
  transform: translateX(-50%);
}

.site-header .site-nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: .6rem;
  width: 2.9rem;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(245, 214, 142, .92), transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(.4);
  transition: opacity .22s ease, transform .22s ease;
}

.site-header .site-nav a:is(:hover, :focus-visible) {
  color: #fff;
  transform: translateY(-1px);
}

.site-header .site-nav a:is(:hover, :focus-visible)::after,
.site-header .site-nav a.is-active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.site-header .site-nav a.is-active {
  color: #f5dca7;
}

.site-header .site-nav a.is-active::before {
  opacity: 1;
}

.site-header .site-nav .mobile-download-link {
  display: none;
}

.header-actions,
.header-actions--studio {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .9rem;
  margin-inline-start: auto;
}

.header-lang-slot {
  display: inline-flex;
  align-items: center;
}

.header-actions__divider {
  display: block;
  width: 1px;
  height: 2.65rem;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.2), transparent);
}

.site-header .language-switcher {
  display: inline-flex;
  align-items: center;
}

.site-header .language-toggle {
  min-width: 5.55rem;
  min-height: 3rem;
  padding-inline: .8rem .68rem;
  gap: .55rem;
  border: 1px solid rgba(216, 173, 92, .22);
  border-radius: 999px;
  background: rgba(21, 20, 25, .48);
  color: rgba(255,255,255,.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.site-header .language-toggle:is(:hover, :focus-visible),
.site-header .language-switcher.is-open .language-toggle {
  border-color: rgba(225, 183, 100, .5);
  background: rgba(26, 24, 30, .72);
}

.site-header .language-toggle svg {
  width: .82rem;
  height: .82rem;
  opacity: .62;
}

.site-header .nav-toggle {
  display: inline-flex;
  width: 2.8rem;
  min-width: 2.8rem;
  min-height: 2.8rem;
  padding: 0;
  gap: .34rem;
  border: 0;
  border-radius: .7rem;
  background: transparent;
  box-shadow: none;
}

.site-header .nav-toggle::before {
  display: none;
}

.site-header .nav-toggle span {
  width: 1.55rem;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
}

@media (min-width: 62rem) {
  body.nav-open .site-header .site-nav {
    position: fixed;
    inset: calc(var(--approved-header-top) + 4.9rem) var(--approved-header-side) auto auto;
    display: grid;
    width: min(23rem, calc(100vw - 2 * var(--approved-header-side)));
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: .28rem;
    padding: .7rem;
    border: 1px solid rgba(216,173,92,.22);
    border-radius: 1.1rem;
    background: rgba(10, 11, 15, .92);
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
    backdrop-filter: blur(24px) saturate(1.15);
  }

  body.nav-open .site-header .site-nav a {
    justify-content: flex-start;
    min-height: 3.1rem;
    padding: .85rem 1rem;
    border-radius: .8rem;
    text-align: start;
  }

  body.nav-open .site-header .site-nav a::before,
  body.nav-open .site-header .site-nav a::after {
    display: none;
  }

  body.nav-open .site-header .site-nav a.is-active {
    background: linear-gradient(90deg, rgba(196, 152, 74, .16), transparent 60%), rgba(255,255,255,.04);
  }

  body.nav-open .site-header .site-nav .mobile-download-link {
    display: inline-flex;
    justify-content: center;
    margin-top: .2rem;
    border: 1px solid rgba(216,173,92,.42);
    background: linear-gradient(180deg, #e8c57b, #c8984a);
    color: #15110a;
    font-weight: 800;
  }
}

@media (max-width: 61.98rem) {
  .site-header.studio-header,
  .site-header {
    grid-template-columns: auto 1fr auto;
    gap: .75rem;
    min-height: 4.25rem;
    padding: .8rem .95rem;
    border-radius: 1.15rem;
  }

  .site-header .brand-wordmark strong {
    font-size: .98rem;
    letter-spacing: .24em;
  }

  .site-header .brand-wordmark small {
    font-size: .58rem;
    letter-spacing: .34em;
  }

  .site-header .site-nav {
    position: fixed;
    inset: calc(var(--approved-header-top) + 4.6rem) var(--approved-header-side) auto;
    display: grid;
    width: auto;
    max-height: calc(100dvh - 6rem - env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    gap: .3rem;
    padding: .6rem;
    overflow: auto;
    border: 1px solid rgba(216, 173, 92, .18);
    border-radius: 1rem;
    background: rgba(10, 11, 15, .92);
    box-shadow: 0 1.55rem 3rem rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(24px) saturate(1.1);
    backdrop-filter: blur(24px) saturate(1.1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-.5rem) scale(.985);
    transform-origin: top center;
  }

  body.nav-open .site-header .site-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .site-header .site-nav a {
    justify-content: flex-start;
    min-height: 3.15rem;
    padding: .85rem 1rem;
    border-radius: .8rem;
    text-align: start;
  }

  .site-header .site-nav a::before,
  .site-header .site-nav a::after {
    display: none;
  }

  .site-header .site-nav a.is-active {
    background: linear-gradient(90deg, rgba(196, 152, 74, .16), transparent 60%), rgba(255,255,255,.04);
  }

  .site-header .site-nav .mobile-download-link {
    display: inline-flex;
    justify-content: center;
    margin-top: .2rem;
    border: 1px solid rgba(216,173,92,.42);
    background: linear-gradient(180deg, #e8c57b, #c8984a);
    color: #15110a;
    font-weight: 800;
  }
}

@media (max-width: 40rem) {
  .site-header .brand-wordmark {
    display: none;
  }

  .site-header .language-toggle {
    min-width: 4.95rem;
    min-height: 2.8rem;
    padding-inline: .68rem .58rem;
  }

  .header-actions,
  .header-actions--studio {
    gap: .6rem;
  }

  .header-actions__divider {
    height: 2.3rem;
  }
}


/* V20 · APPROVED REFERENCE HEADER + UPLOADED LANGUAGE FLAGS */
/* This block intentionally comes last so older header experiments cannot override it. */

.site-header.studio-header,
.site-header {
  direction: ltr !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  min-height: clamp(4.1rem, 6.2vw, 5.45rem) !important;
  padding: max(.65rem, env(safe-area-inset-top)) clamp(1.2rem, 6.5vw, 5.6rem) .45rem !important;
  display: grid !important;
  grid-template-columns: minmax(8.5rem, 1fr) auto minmax(8.5rem, 1fr) !important;
  align-items: center !important;
  gap: clamp(.7rem, 2vw, 1.75rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(3,4,6,.78) 0%, rgba(4,5,7,.52) 52%, rgba(4,5,7,.08) 100%) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(5px) saturate(.94) !important;
  backdrop-filter: blur(5px) saturate(.94) !important;
}

.site-header.studio-header::before,
.site-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 18%, transparent 82%, rgba(0,0,0,.16)) !important;
  pointer-events: none !important;
}

.site-header.is-scrolled,
body.nav-open .site-header {
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(4,5,7,.94) 0%, rgba(5,6,8,.82) 65%, rgba(5,6,8,.60) 100%) !important;
  box-shadow: 0 .65rem 1.6rem rgba(0,0,0,.18) !important;
  -webkit-backdrop-filter: blur(11px) saturate(1.02) !important;
  backdrop-filter: blur(11px) saturate(1.02) !important;
}

.site-header .brand {
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.site-header .brand img {
  display: none !important;
}

.site-header .brand-wordmark {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: .18rem !important;
  color: #fff !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.site-header .brand-wordmark strong {
  font-family: var(--font-body) !important;
  font-size: clamp(.88rem, 1.15vw, 1.05rem) !important;
  font-weight: 760 !important;
  letter-spacing: .37em !important;
  padding-inline-start: .37em !important;
}

.site-header .brand-wordmark small {
  font-family: var(--font-body) !important;
  font-size: clamp(.38rem, .55vw, .48rem) !important;
  font-weight: 700 !important;
  letter-spacing: .48em !important;
  padding-inline-start: .48em !important;
  color: rgba(255,255,255,.82) !important;
}

.site-header .site-nav {
  justify-self: center !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(1rem, 2.7vw, 2.55rem) !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

html[dir="rtl"] .site-header .site-nav {
  direction: rtl !important;
}

.site-header .site-nav a {
  position: relative !important;
  min-height: 0 !important;
  padding: .4rem 0 .85rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.73) !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: clamp(.60rem, .78vw, .74rem) !important;
  font-weight: 520 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  transform: none !important;
}

.site-header .site-nav a::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: .33rem !important;
  width: .25rem !important;
  height: .25rem !important;
  border-radius: 50% !important;
  background: #e7bd72 !important;
  box-shadow: 0 0 .38rem rgba(231,189,114,.55) !important;
  opacity: 0 !important;
  transform: translateX(-50%) !important;
}

.site-header .site-nav a::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: .43rem !important;
  width: 2.35rem !important;
  height: 1px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, transparent, #e5bb70 16%, #e5bb70 84%, transparent) !important;
  opacity: 0 !important;
  transform: translateX(-50%) !important;
}

.site-header .site-nav a:is(:hover,:focus-visible) {
  color: #fff !important;
}

.site-header .site-nav a.is-active {
  color: #f2d39b !important;
  font-weight: 650 !important;
}

.site-header .site-nav a.is-active::before,
.site-header .site-nav a.is-active::after {
  opacity: 1 !important;
}

.site-header .site-nav .mobile-download-link {
  display: none !important;
}

.header-actions,
.header-actions--studio {
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(.45rem, .9vw, .75rem) !important;
  margin: 0 !important;
}

.header-lang-slot {
  display: inline-flex !important;
  align-items: center !important;
}

.header-actions__divider {
  display: block !important;
  width: 1px !important;
  height: clamp(1.55rem, 2.2vw, 2.05rem) !important;
  background: rgba(255,255,255,.17) !important;
}

.site-header .language-switcher {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: calc(var(--z-dropdown) + 5) !important;
}

.site-header .language-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: clamp(1.78rem, 2.7vw, 2.15rem) !important;
  padding: .22rem .5rem .22rem .6rem !important;
  gap: .34rem !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: .4rem !important;
  background: rgba(8,10,13,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.76) !important;
  font-size: clamp(.52rem,.69vw,.63rem) !important;
  font-weight: 650 !important;
  letter-spacing: .04em !important;
}

.site-header .language-toggle:is(:hover,:focus-visible),
.site-header .language-switcher.is-open .language-toggle {
  border-color: rgba(231,189,114,.28) !important;
  background: rgba(11,13,17,.78) !important;
  color: #fff !important;
  transform: none !important;
}

.site-header .language-current-code {
  order: 1 !important;
  min-width: auto !important;
  color: rgba(255,255,255,.66) !important;
  text-align: center !important;
}

.site-header .language-current-flag,
.site-header .language-option-flag,
.site-header .flag-image {
  display: block !important;
  object-fit: contain !important;
  user-select: none !important;
  pointer-events: none !important;
}

.site-header .language-current-flag {
  order: 2 !important;
  width: clamp(1.18rem, 1.55vw, 1.45rem) !important;
  height: clamp(.80rem, 1.05vw, .98rem) !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 .08rem .18rem rgba(0,0,0,.42)) !important;
}

.site-header .language-toggle svg {
  order: 3 !important;
  display: block !important;
  width: .55rem !important;
  height: .55rem !important;
  opacity: .55 !important;
}

.site-header .language-menu {
  position: absolute !important;
  top: calc(100% + .55rem) !important;
  right: 0 !important;
  left: auto !important;
  width: min(16.5rem, calc(100vw - 1.5rem)) !important;
  padding: .45rem !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: .7rem !important;
  background: rgba(8,10,14,.94) !important;
  box-shadow: 0 1.2rem 2.6rem rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.05) !important;
  backdrop-filter: blur(20px) saturate(1.05) !important;
}

html[dir="rtl"] .site-header .language-menu {
  right: 0 !important;
  left: auto !important;
}

.site-header .language-menu button {
  display: grid !important;
  grid-template-columns: 2.4rem minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: .65rem !important;
  min-height: 3rem !important;
  padding: .48rem .62rem !important;
  border-radius: .55rem !important;
}

.site-header .language-option-flag {
  width: 2.25rem !important;
  height: 1.5rem !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 .12rem .24rem rgba(0,0,0,.42)) !important;
}

.site-header .nav-toggle {
  display: inline-flex !important;
  width: clamp(1.8rem, 2.45vw, 2.15rem) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: clamp(1.8rem, 2.45vw, 2.15rem) !important;
  padding: 0 !important;
  gap: .27rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.70) !important;
}

.site-header .nav-toggle::before {
  display: none !important;
}

.site-header .nav-toggle span {
  width: clamp(.95rem, 1.3vw, 1.15rem) !important;
  height: 1px !important;
  border-radius: 0 !important;
  background: currentColor !important;
}

body.nav-open .site-header .nav-toggle span:nth-child(1) {
  transform: translateY(.27rem) rotate(45deg) !important;
}
body.nav-open .site-header .nav-toggle span:nth-child(2) {
  opacity: 0 !important;
}
body.nav-open .site-header .nav-toggle span:nth-child(3) {
  transform: translateY(-.27rem) rotate(-45deg) !important;
}

/* Desktop: keep reference navigation visible; hamburger remains as the small extra menu control. */
@media (min-width: 62rem) {
  body.nav-open .site-header .site-nav {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: auto !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Tablet/mobile: preserve the same compact top bar, menu opens below instead of stacking the header. */
@media (max-width: 61.98rem) {
  .site-header.studio-header,
  .site-header {
    grid-template-columns: auto 1fr auto !important;
    min-height: 4rem !important;
    padding-inline: clamp(.8rem, 4vw, 1.35rem) !important;
  }

  .site-header .brand-wordmark {
    display: inline-flex !important;
  }

  .site-header .brand-wordmark strong {
    font-size: .78rem !important;
    letter-spacing: .28em !important;
  }

  .site-header .brand-wordmark small {
    font-size: .34rem !important;
    letter-spacing: .38em !important;
  }

  .site-header .site-nav {
    position: fixed !important;
    inset: 4.15rem .7rem auto !important;
    display: grid !important;
    width: auto !important;
    grid-template-columns: 1fr !important;
    gap: .25rem !important;
    padding: .5rem !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: .75rem !important;
    background: rgba(8,10,14,.95) !important;
    box-shadow: 0 1.4rem 3rem rgba(0,0,0,.45) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-.35rem) !important;
  }

  body.nav-open .site-header .site-nav {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .site-header .site-nav a {
    justify-content: flex-start !important;
    width: 100% !important;
    padding: .8rem .85rem !important;
    border-radius: .55rem !important;
    font-size: .76rem !important;
    text-align: start !important;
  }

  .site-header .site-nav a::before,
  .site-header .site-nav a::after {
    display: none !important;
  }

  .site-header .site-nav a.is-active {
    background: rgba(231,189,114,.08) !important;
  }

  .site-header .site-nav .mobile-download-link {
    display: inline-flex !important;
    justify-content: center !important;
    border: 1px solid rgba(231,189,114,.34) !important;
    color: #f2d39b !important;
  }
}

@media (max-width: 32rem) {
  .site-header.studio-header,
  .site-header {
    grid-template-columns: auto 1fr auto !important;
  }

  .header-actions__divider {
    display: none !important;
  }

  .site-header .language-toggle {
    padding-inline: .42rem !important;
    gap: .26rem !important;
  }

  .site-header .language-current-flag {
    width: 1.05rem !important;
    height: .74rem !important;
  }

  .site-header .language-current-code {
    font-size: .48rem !important;
  }
}


/* ==========================================================================
   V21 · Header stability, functional hamburger, mobile recovery, flag sizing
   ========================================================================== */

/* Header must never disappear on scroll. */
.site-header.is-hidden-on-scroll,
.site-header.studio-header.is-hidden-on-scroll {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Normalized uploaded flag art: every source is now 180x120 transparent. */
.site-header .flag-image,
.site-header .language-current-flag,
.site-header .language-option-flag {
  object-fit: contain !important;
  object-position: center !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header .language-current-flag {
  width: 1.62rem !important;
  height: 1.08rem !important;
  flex: 0 0 1.62rem !important;
  filter: none !important;
}

.site-header .language-option-flag {
  width: 2.55rem !important;
  height: 1.70rem !important;
  justify-self: center !important;
  filter: none !important;
}

.site-header .language-toggle {
  min-width: 4.65rem !important;
  height: 2.2rem !important;
  padding: .28rem .52rem .28rem .58rem !important;
  gap: .32rem !important;
}

.site-header .language-menu {
  z-index: 50 !important;
  overflow: hidden !important;
}

.site-header .language-menu button {
  grid-template-columns: 2.7rem minmax(0,1fr) 2rem !important;
  min-height: 3.15rem !important;
}

/* Desktop hamburger now opens a real menu instead of toggling an invisible/empty state. */
.header-actions--studio {
  position: relative !important;
}

.header-utility-menu {
  position: absolute;
  top: calc(100% + .72rem);
  right: 0;
  width: 15.5rem;
  display: grid;
  gap: .18rem;
  padding: .55rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: .8rem;
  background: rgba(8,10,14,.96);
  box-shadow: 0 1.35rem 3rem rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  backdrop-filter: blur(22px) saturate(1.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-.4rem) scale(.985);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 48;
}

body.utility-menu-open .header-utility-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.header-utility-menu a {
  display: flex;
  align-items: center;
  min-height: 2.8rem;
  padding: .7rem .78rem;
  border-radius: .58rem;
  color: rgba(255,255,255,.76);
  font-size: .74rem;
  font-weight: 650;
  text-decoration: none;
}

.header-utility-menu a:is(:hover,:focus-visible) {
  background: rgba(255,255,255,.055);
  color: #fff;
}

.header-utility-menu__download {
  margin-top: .18rem;
  justify-content: center;
  border: 1px solid rgba(231,189,114,.34);
  background: linear-gradient(180deg, rgba(231,189,114,.16), rgba(231,189,114,.06));
  color: #f2d39b !important;
}

@media (min-width: 62rem) {
  /* The primary nav always stays in its reference position. */
  .site-header .site-nav,
  body.nav-open .site-header .site-nav,
  body.utility-menu-open .site-header .site-nav {
    position: static !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

@media (max-width: 61.98rem) {
  .site-header.studio-header,
  .site-header {
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    min-height: 4.15rem !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    gap: .55rem !important;
    padding: max(.65rem, env(safe-area-inset-top)) .9rem .55rem !important;
    overflow: visible !important;
    background: linear-gradient(180deg, rgba(3,4,6,.90), rgba(4,5,7,.67) 72%, rgba(4,5,7,.20)) !important;
  }

  .site-header .brand {
    display: inline-flex !important;
    min-width: 0 !important;
    max-width: 7.6rem !important;
    overflow: visible !important;
  }

  .site-header .brand-wordmark {
    display: inline-flex !important;
    align-items: flex-start !important;
  }

  .site-header .brand-wordmark strong {
    font-size: .78rem !important;
    letter-spacing: .25em !important;
    padding-inline-start: .25em !important;
  }

  .site-header .brand-wordmark small {
    font-size: .34rem !important;
    letter-spacing: .34em !important;
    padding-inline-start: .34em !important;
  }

  .header-actions,
  .header-actions--studio {
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
    gap: .46rem !important;
    min-width: max-content !important;
  }

  .header-actions__divider {
    display: block !important;
    height: 1.75rem !important;
  }

  .site-header .language-toggle {
    min-width: 4.15rem !important;
    height: 2.08rem !important;
    padding: .24rem .38rem .24rem .45rem !important;
    gap: .22rem !important;
  }

  .site-header .language-current-code {
    display: inline-block !important;
    font-size: .53rem !important;
  }

  .site-header .language-current-flag {
    display: block !important;
    width: 1.38rem !important;
    height: .92rem !important;
    flex-basis: 1.38rem !important;
  }

  .site-header .language-toggle svg {
    display: block !important;
    width: .48rem !important;
    height: .48rem !important;
  }

  .site-header .nav-toggle {
    display: inline-flex !important;
    width: 2.05rem !important;
    height: 2.05rem !important;
    flex: 0 0 2.05rem !important;
  }

  .site-header .nav-toggle span {
    width: 1.05rem !important;
  }

  /* Mobile nav is a real panel below the fixed header. */
  .site-header .site-nav {
    position: fixed !important;
    inset: 4.2rem .65rem auto .65rem !important;
    z-index: 45 !important;
    display: grid !important;
    width: auto !important;
    max-height: calc(100dvh - 5rem - env(safe-area-inset-bottom)) !important;
    grid-template-columns: 1fr !important;
    gap: .22rem !important;
    padding: .55rem !important;
    overflow: auto !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: .8rem !important;
    background: rgba(8,10,14,.97) !important;
    box-shadow: 0 1.35rem 3rem rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
    backdrop-filter: blur(22px) saturate(1.08) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-.38rem) !important;
  }

  body.nav-open .site-header .site-nav {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .site-header .site-nav a {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 3rem !important;
    padding: .78rem .85rem !important;
    border-radius: .58rem !important;
    font-size: .76rem !important;
    color: rgba(255,255,255,.78) !important;
  }

  .site-header .site-nav a::before,
  .site-header .site-nav a::after {
    display: none !important;
  }

  .site-header .site-nav a.is-active {
    background: rgba(231,189,114,.08) !important;
    color: #f2d39b !important;
  }

  .site-header .site-nav .mobile-download-link {
    display: flex !important;
    justify-content: center !important;
    margin-top: .18rem !important;
    border: 1px solid rgba(231,189,114,.34) !important;
    background: rgba(231,189,114,.08) !important;
    color: #f2d39b !important;
  }

  .header-utility-menu {
    display: none !important;
  }

  /* Language panel stays completely inside the phone viewport. */
  .site-header .language-menu {
    position: fixed !important;
    top: 4.2rem !important;
    right: .65rem !important;
    left: .65rem !important;
    width: auto !important;
    max-height: calc(100dvh - 5rem - env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
  }

  html[dir="rtl"] .site-header .language-menu {
    right: .65rem !important;
    left: .65rem !important;
  }
}

@media (max-width: 23rem) {
  .site-header .brand-wordmark strong {
    font-size: .68rem !important;
    letter-spacing: .19em !important;
  }
  .site-header .brand-wordmark small {
    font-size: .30rem !important;
  }
  .site-header .language-current-code {
    display: none !important;
  }
  .site-header .language-toggle {
    min-width: 2.65rem !important;
  }
  .header-actions__divider {
    display: none !important;
  }
}


/* ==========================================================================
   V22 · CLEAN HEADER — old hamburger/menu removed completely
   Same visual system on desktop and phone; mobile nav stays horizontal.
   ========================================================================== */

.site-header.studio-header.studio-header--clean,
.site-header.studio-header--clean {
  direction: ltr !important;
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  min-height: 4.55rem !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0,1fr) max-content !important;
  align-items: center !important;
  gap: clamp(.75rem, 1.7vw, 2.2rem) !important;
  padding: max(.68rem, env(safe-area-inset-top)) clamp(1rem, 3.4vw, 4.6rem) .68rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(4,4,6,.94) 0%, rgba(5,5,7,.82) 70%, rgba(5,5,7,.42) 100%) !important;
  box-shadow: 0 .65rem 1.8rem rgba(0,0,0,.16) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
}

.site-header.studio-header--clean::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 72% 100%, rgba(113,16,20,.16), transparent 38%),
    linear-gradient(90deg, transparent 0 58%, rgba(121,21,24,.05), transparent 84%) !important;
  pointer-events: none !important;
}

.site-header.studio-header--clean.is-scrolled {
  background: rgba(4,4,6,.96) !important;
  box-shadow: 0 .7rem 2rem rgba(0,0,0,.24) !important;
}

/* Company logo stays on the LEFT in every language. */
.site-header.studio-header--clean .brand--studio {
  grid-column: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  gap: .68rem !important;
  min-width: max-content !important;
  padding: 0 !important;
  overflow: visible !important;
}

.site-header.studio-header--clean .brand-mark {
  display: block !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  flex: 0 0 2.35rem !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  filter: drop-shadow(0 .25rem .55rem rgba(0,0,0,.32)) !important;
}

.site-header.studio-header--clean .brand-wordmark {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .16rem !important;
  white-space: nowrap !important;
  color: #fff !important;
  line-height: 1 !important;
}

.site-header.studio-header--clean .brand-wordmark strong {
  font-family: var(--font-body) !important;
  font-size: .94rem !important;
  font-weight: 800 !important;
  letter-spacing: .31em !important;
  padding-inline-start: .31em !important;
}

.site-header.studio-header--clean .brand-wordmark small {
  font-family: var(--font-body) !important;
  font-size: .38rem !important;
  font-weight: 750 !important;
  letter-spacing: .48em !important;
  padding-inline-start: .48em !important;
  color: rgba(255,255,255,.72) !important;
}

/* Primary navigation: always visible; NEVER becomes a dropdown or vertical menu. */
.site-header.studio-header--clean .site-nav,
body.nav-open .site-header.studio-header--clean .site-nav,
body.utility-menu-open .site-header.studio-header--clean .site-nav {
  grid-column: 2 !important;
  position: static !important;
  inset: auto !important;
  justify-self: center !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(.05rem, .65vw, .72rem) !important;
  width: 100% !important;
  max-width: 43rem !important;
  min-width: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

.site-header.studio-header--clean .site-nav::-webkit-scrollbar { display: none !important; }
html[dir="rtl"] .site-header.studio-header--clean .site-nav { direction: rtl !important; }

.site-header.studio-header--clean .site-nav a {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 2.35rem !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .45rem .72rem .72rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.68) !important;
  font-family: var(--font-body) !important;
  font-size: .72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

.site-header.studio-header--clean .site-nav a::before { display: none !important; }
.site-header.studio-header--clean .site-nav a::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 50% !important;
  inset-block-end: .24rem !important;
  width: 2.15rem !important;
  height: 1.5px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, #e8bd70 32%, #e8bd70 68%, transparent) !important;
  opacity: 0 !important;
  transform: translateX(-50%) scaleX(.45) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.site-header.studio-header--clean .site-nav a:is(:hover,:focus-visible),
.site-header.studio-header--clean .site-nav a.is-active {
  color: #f1cf91 !important;
  transform: none !important;
}

.site-header.studio-header--clean .site-nav a:is(:hover,:focus-visible)::after,
.site-header.studio-header--clean .site-nav a.is-active::after {
  opacity: 1 !important;
  transform: translateX(-50%) scaleX(1) !important;
}

/* No old menu/hamburger/download-menu exists anymore. */
.site-header.studio-header--clean .nav-toggle,
.site-header.studio-header--clean .header-utility-menu,
.site-header.studio-header--clean .mobile-download-link,
.site-header.studio-header--clean .header-actions__divider {
  display: none !important;
}

.site-header.studio-header--clean .header-actions--studio-clean {
  grid-column: 3 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Language + uploaded flag images, normalized to one physical size. */
.site-header.studio-header--clean .language-switcher {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: 20 !important;
}

.site-header.studio-header--clean .language-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 4.8rem !important;
  width: auto !important;
  height: 2.45rem !important;
  padding: .33rem .56rem !important;
  gap: .34rem !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: .52rem !important;
  background: rgba(13,14,18,.68) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.site-header.studio-header--clean .language-current-code {
  min-width: 1.25rem !important;
  font-size: .66rem !important;
  font-weight: 750 !important;
  color: rgba(255,255,255,.78) !important;
}

.site-header.studio-header--clean .flag-image {
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.site-header.studio-header--clean .language-current-flag {
  width: 1.38rem !important;
  height: .92rem !important;
  flex: 0 0 1.38rem !important;
}

.site-header.studio-header--clean .language-toggle svg {
  display: block !important;
  width: .48rem !important;
  height: .48rem !important;
  opacity: .58 !important;
}

.site-header.studio-header--clean .language-menu {
  position: absolute !important;
  top: calc(100% + .55rem) !important;
  right: 0 !important;
  left: auto !important;
  width: 17.5rem !important;
  max-width: calc(100vw - 1rem) !important;
  max-height: min(31rem, calc(100dvh - 5.2rem)) !important;
  padding: .45rem !important;
  overflow: auto !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: .75rem !important;
  background: rgba(8,9,12,.97) !important;
  box-shadow: 0 1.15rem 2.8rem rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
}

html[dir="rtl"] .site-header.studio-header--clean .language-menu {
  right: 0 !important;
  left: auto !important;
}

.site-header.studio-header--clean .language-menu button {
  display: grid !important;
  grid-template-columns: 2.1rem minmax(0,1fr) 1.7rem !important;
  align-items: center !important;
  gap: .58rem !important;
  min-height: 2.85rem !important;
  padding: .52rem .6rem !important;
  border-radius: .55rem !important;
}

.site-header.studio-header--clean .language-option-flag {
  width: 2rem !important;
  height: 1.33rem !important;
  justify-self: center !important;
}

/* Phone = same header language and shape; just compressed, never stacked. */
@media (max-width: 61.98rem) {
  .site-header.studio-header.studio-header--clean,
  .site-header.studio-header--clean {
    min-height: 3.85rem !important;
    gap: .48rem !important;
    padding: max(.52rem, env(safe-area-inset-top)) .62rem .48rem !important;
  }

  .site-header.studio-header--clean .brand--studio { gap: .42rem !important; }
  .site-header.studio-header--clean .brand-mark {
    width: 1.72rem !important;
    height: 1.72rem !important;
    flex-basis: 1.72rem !important;
  }
  .site-header.studio-header--clean .brand-wordmark strong {
    font-size: .66rem !important;
    letter-spacing: .22em !important;
    padding-inline-start: .22em !important;
  }
  .site-header.studio-header--clean .brand-wordmark small {
    font-size: .28rem !important;
    letter-spacing: .33em !important;
    padding-inline-start: .33em !important;
  }

  .site-header.studio-header--clean .site-nav {
    justify-content: flex-start !important;
    max-width: none !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html[dir="rtl"] .site-header.studio-header--clean .site-nav { justify-content: flex-start !important; }
  .site-header.studio-header--clean .site-nav a {
    min-height: 2rem !important;
    padding: .34rem .45rem .58rem !important;
    font-size: .58rem !important;
    scroll-snap-align: start !important;
  }
  .site-header.studio-header--clean .site-nav a::after {
    inset-block-end: .18rem !important;
    width: 1.6rem !important;
  }

  .site-header.studio-header--clean .language-toggle {
    min-width: 3.8rem !important;
    height: 2.12rem !important;
    padding: .26rem .4rem !important;
    gap: .24rem !important;
  }
  .site-header.studio-header--clean .language-current-code {
    min-width: 1rem !important;
    font-size: .52rem !important;
  }
  .site-header.studio-header--clean .language-current-flag {
    width: 1.14rem !important;
    height: .76rem !important;
    flex-basis: 1.14rem !important;
  }
  .site-header.studio-header--clean .language-toggle svg {
    width: .4rem !important;
    height: .4rem !important;
  }

  .site-header.studio-header--clean .language-menu {
    position: fixed !important;
    top: calc(max(.52rem, env(safe-area-inset-top)) + 3.45rem) !important;
    right: .55rem !important;
    left: auto !important;
    width: min(17.2rem, calc(100vw - 1.1rem)) !important;
    max-height: calc(100dvh - 4.5rem - env(safe-area-inset-bottom)) !important;
  }
  html[dir="rtl"] .site-header.studio-header--clean .language-menu {
    right: .55rem !important;
    left: auto !important;
  }
}

@media (max-width: 27rem) {
  .site-header.studio-header--clean .brand-wordmark strong { font-size: .59rem !important; }
  .site-header.studio-header--clean .brand-wordmark small { font-size: .25rem !important; }
  .site-header.studio-header--clean .brand-mark { width: 1.55rem !important; height: 1.55rem !important; flex-basis: 1.55rem !important; }
  .site-header.studio-header--clean .site-nav a { font-size: .54rem !important; padding-inline: .4rem !important; }
  .site-header.studio-header--clean .language-current-code { display: none !important; }
  .site-header.studio-header--clean .language-toggle { min-width: 2.65rem !important; }
}