:root {
  --night: #050915;
  --night-2: #07101f;
  --panel: #0a1528;
  --panel-2: #0e1f38;
  --ink: #06101e;
  --text: #edf7ff;
  --muted: #a5b8cd;
  --muted-2: #7288a1;
  --blue: #6ce7ff;
  --blue-2: #9abfff;
  --violet: #9776ff;
  --gold: #ffd77a;
  --gold-2: #ecaa55;
  --line: rgba(150, 208, 255, .16);
  --line-bright: rgba(150, 208, 255, .33);
  --max: 1240px;
  --radius: 24px;
  --shadow: 0 24px 80px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  background: var(--night);
}

body {
  margin: 0;
  color: var(--text);
  background: var(--night);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

::selection { color: var(--ink); background: var(--gold); }

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

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

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

button { font: inherit; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus { transform: translateY(0); }

a:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.container {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  container-type: inline-size;
}

.announcement-bar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 34px;
  padding: 7px 20px;
  color: rgba(237, 247, 255, .76);
  background: #070e1b;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.announcement-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--gold);
  transition: color .2s ease;
}

.announcement-bar a:hover { color: #fff4c9; }

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(108, 231, 255, .11), 0 0 20px rgba(108, 231, 255, .7);
  flex: 0 0 auto;
}

.announcement-mark {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 8px rgba(108, 231, 255, .4));
  animation: transmission-planet 7s ease-in-out infinite;
}

.transmission-label {
  animation: transmission-text 3.4s ease-in-out infinite;
}

@keyframes transmission-planet {
  0%, 100% { transform: translateY(0) rotate(-4deg); filter: drop-shadow(0 0 7px rgba(108, 231, 255, .32)); }
  50% { transform: translateY(-1px) rotate(4deg) scale(1.06); filter: drop-shadow(0 0 13px rgba(108, 231, 255, .72)); }
}

@keyframes transmission-text {
  0%, 100% { opacity: .72; text-shadow: 0 0 0 rgba(108, 231, 255, 0); }
  50% { opacity: 1; text-shadow: 0 0 14px rgba(108, 231, 255, .38); }
}

.site-header {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 11px 12px 11px 16px;
  border: 1px solid rgba(157, 220, 255, .18);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(7, 16, 31, .86), rgba(5, 9, 21, .58));
  box-shadow: 0 18px 55px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px);
}

.site-header > * { min-width: 0; }

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 3px 4px;
  color: #f3fbff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1;
}

.brand-lockup img { filter: drop-shadow(0 0 14px rgba(108, 231, 255, .3)); }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 0;
  gap: 3px;
  padding: 4px;
  color: rgba(237, 247, 255, .78);
  font-size: 13px;
  letter-spacing: .07em;
  background: rgba(2, 8, 18, .44);
  border: 1px solid rgba(157, 220, 255, .13);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.site-nav a { transition: color .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease; }

.site-nav a:not(.nav-cta) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  white-space: nowrap;
}

.site-nav a:not(.nav-cta)::after {
  position: absolute;
  right: 12px;
  bottom: 5px;
  left: 12px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.site-nav a:not(.nav-cta):hover,
.site-nav a:not(.nav-cta).is-active {
  color: #fff;
  background: rgba(108, 231, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 22px rgba(79, 223, 255, .06);
}

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

.site-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-left: 4px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--gold);
  border: 1px solid rgba(255, 237, 171, .75);
  border-radius: 999px;
  font-weight: 750;
  letter-spacing: .03em;
  box-shadow: 0 8px 26px rgba(238, 161, 72, .18);
  white-space: nowrap;
}

.site-nav .nav-cta:hover { color: var(--ink); background: #fff0b6; }

.language-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-left: 5px;
  padding-left: 8px;
  border-left: 1px solid rgba(157, 220, 255, .2);
}

.language-picker select {
  min-width: 92px;
  max-width: 100%;
  min-height: 48px;
  padding: 0 25px 0 10px;
  color: var(--text);
  background: rgba(5, 9, 21, .72);
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .02em;
  cursor: pointer;
}

.language-picker select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: 760px;
  min-height: min(900px, 100vh);
  min-height: min(900px, 100svh);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--night);
}

.hero-media, .hero-noise { position: absolute; inset: 0; }

.hero-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.08) contrast(1.03);
}

.hero-media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 7, 16, .96) 0%, rgba(3, 7, 16, .7) 28%, rgba(3, 7, 16, .12) 63%, rgba(3, 7, 16, .48) 100%),
    linear-gradient(0deg, rgba(4, 7, 16, .9) 0%, transparent 38%, rgba(3, 7, 16, .28) 100%);
  content: "";
}

.hero-noise {
  opacity: .17;
  background-image: radial-gradient(rgba(255, 255, 255, .7) .5px, transparent .5px);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  min-height: 760px;
  min-height: min(900px, 100vh);
  min-height: min(900px, 100svh);
  padding-top: 156px;
  padding-bottom: 68px;
}

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

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 19px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow-line {
  display: inline-block;
  width: 34px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

.hero-wordmark {
  width: min(590px, 100%);
  height: auto;
  margin: 0 0 2px -9px;
}

.hero h1 {
  max-width: 590px;
  margin: 0 0 16px;
  color: #f6fbff;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
}

.hero-hook {
  max-width: 585px;
  margin: 0 0 28px;
  color: rgba(237, 247, 255, .79);
  font-size: 18px;
  line-height: 1.55;
  text-wrap: balance;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 50px;
  padding: 13px 19px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .035em;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
  color: var(--ink);
  background: linear-gradient(125deg, #ffe69a, var(--gold) 52%, #f3b666);
  box-shadow: 0 12px 30px rgba(232, 160, 74, .22);
}

.button-primary:hover { background: #fff0b6; }

.button-quiet {
  color: var(--text);
  background: rgba(7, 16, 31, .35);
  border-color: rgba(228, 243, 255, .34);
  backdrop-filter: blur(12px);
}

.button-quiet:hover { background: rgba(7, 16, 31, .65); border-color: rgba(228, 243, 255, .68); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  margin-top: 28px;
  color: rgba(218, 235, 249, .66);
  font-size: 12px;
}

.hero-meta span { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; overflow-wrap: anywhere; }

.meta-mark {
  width: 6px;
  height: 6px;
  border: 1px solid var(--blue);
  transform: rotate(45deg);
}

.section { padding: 125px 0; }

.intro-section {
  background:
    radial-gradient(circle at 76% 18%, rgba(86, 87, 186, .2), transparent 33%),
    linear-gradient(180deg, #081121, #07101f);
}

.intro-grid, .trailer-grid, .follow-grid, .lore-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(45px, 9vw, 145px);
  align-items: start;
}

.intro-grid > *, .trailer-grid > *, .follow-grid > *, .lore-grid > * { min-width: 0; }

.section-heading h2 {
  max-width: 620px;
  margin: 0;
  color: #f2f8ff;
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .99;
  text-wrap: balance;
}

.section-heading-wide > p:last-child { margin: 20px 0 0; }

.intro-copy { max-width: 570px; padding-top: 37px; }

.intro-copy p { margin: 0 0 20px; color: var(--muted); }

.intro-copy .lead {
  color: #e6f3ff;
  font-size: 22px;
  line-height: 1.42;
  text-wrap: balance;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-bottom: 6px;
  color: var(--gold);
  border-bottom: 1px solid rgba(255, 215, 122, .46);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease;
}

.text-link:hover { color: #fff2bc; border-color: #fff2bc; }

.feature-section { background: #050a14; }

.feature-section .section-heading-wide { display: grid; grid-template-columns: minmax(110px, 140px) minmax(0, 1fr) minmax(220px, 310px); align-items: end; gap: 28px; margin-bottom: 54px; }
.feature-section .section-heading-wide > * { min-width: 0; }

.section-description, .section-heading-wide > p:last-child { max-width: 340px; color: var(--muted); }

.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }

.feature-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 21px;
  min-height: 260px;
  padding: 31px 29px 28px;
  background: linear-gradient(145deg, rgba(15, 34, 60, .96), rgba(8, 18, 33, .96));
  transition: background .25s ease, transform .25s ease;
}

.feature-card > div { min-width: 0; }

.feature-grid > *, .gallery-grid > *, .concept-grid > * { min-width: 0; }

.feature-card:hover { z-index: 1; background: linear-gradient(145deg, rgba(19, 49, 81, .98), rgba(8, 19, 37, .98)); transform: translateY(-2px); }

.feature-card-accent { background: linear-gradient(145deg, rgba(27, 28, 57, .97), rgba(12, 14, 33, .97)); }

.feature-index { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .1em; }

.card-label { margin: 1px 0 22px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }

.feature-card h3 { max-width: 275px; margin: 0 0 12px; font-size: 25px; font-weight: 650; letter-spacing: -.035em; line-height: 1.07; }

.feature-card p:not(.card-label) { max-width: 330px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

.feature-arrow { align-self: end; color: var(--gold); font-size: 22px; }

.trailer-section { background: linear-gradient(180deg, #07101f, #081121); }

.trailer-grid { align-items: center; }

.trailer-grid .section-heading { padding-bottom: 24px; }

.trailer-grid .section-description { margin: 22px 0 0; }

.trailer-frame {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  box-shadow: var(--shadow);
}

.trailer-frame > img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }

.trailer-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 8, 17, .8), transparent 55%, rgba(2, 8, 17, .36)), linear-gradient(0deg, rgba(2, 8, 17, .82), transparent 60%); }

.trailer-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }

.trailer-tag { padding: 6px 10px; color: var(--gold); background: rgba(5, 9, 21, .62); border: 1px solid rgba(255, 215, 122, .36); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; backdrop-filter: blur(10px); }

.play-button { display: grid; place-items: center; width: 76px; height: 76px; padding: 0; color: var(--ink); background: var(--gold); border: 0; border-radius: 50%; box-shadow: 0 0 0 10px rgba(255, 215, 122, .12), 0 15px 42px rgba(0, 0, 0, .35); cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }

.play-button:hover { background: #fff0b6; box-shadow: 0 0 0 13px rgba(255, 215, 122, .16), 0 15px 42px rgba(0, 0, 0, .35); transform: scale(1.05); }

.play-icon { width: 0; height: 0; margin-left: 5px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid var(--ink); }

.trailer-overlay p { margin: 0; color: rgba(237, 247, 255, .75); font-size: 13px; }

.trailer-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

.gallery-section { background: #050a14; }

.gallery-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); align-items: end; gap: 30px; margin-bottom: 46px; }
.gallery-head > * { min-width: 0; }

.gallery-intro { max-width: 320px; margin: 0 0 5px; color: var(--muted); overflow-wrap: anywhere; }

.gallery-grid { display: grid; grid-template-columns: 1.18fr .82fr; grid-template-rows: repeat(2, minmax(220px, 1fr)); gap: 16px; }

.gallery-card { position: relative; min-height: 265px; margin: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }

.gallery-card-wide { grid-row: span 2; min-height: 555px; }

.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s ease; }

.gallery-card-wide img { object-position: 58% center; }
.gallery-card-tall img { object-position: 45% center; }
.gallery-card-menu img { object-position: center center; }

.gallery-card:hover img { filter: saturate(1.14); transform: scale(1.04); }

.gallery-card::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1, 6, 14, .9), transparent 57%); content: ""; pointer-events: none; }

.gallery-card figcaption { position: absolute; right: 20px; bottom: 18px; left: 20px; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; pointer-events: none; }

.gallery-card figcaption span { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .1em; }

.gallery-card figcaption strong { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }

.gallery-card figcaption em { grid-column: 2; color: rgba(237, 247, 255, .68); font-size: 12px; font-style: normal; }

.concept-section { background: linear-gradient(180deg, #050a14, #07101f); border-top: 1px solid var(--line); }

.concept-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }

.concept-card { position: relative; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; background: #d7d1bf; border: 1px solid rgba(211, 190, 146, .28); box-shadow: 0 20px 50px rgba(0, 0, 0, .22); }

.concept-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.86) contrast(.98); transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s ease; }

.concept-card:hover img { filter: saturate(1) contrast(1.02); transform: scale(1.035); }

.concept-card::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 8, 16, .9), transparent 52%); content: ""; pointer-events: none; }

.concept-card figcaption { position: absolute; right: 14px; bottom: 13px; left: 14px; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: baseline; }

.concept-card figcaption span { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .1em; }

.concept-card figcaption strong { color: #f5f7ef; font-size: 15px; font-weight: 700; line-height: 1.1; }

.concept-card figcaption em { grid-column: 2; color: rgba(245, 247, 239, .72); font-size: 11px; font-style: normal; line-height: 1.3; }

.concept-card-cut { border-color: rgba(255, 215, 122, .62); }
.concept-card-cut::before { position: absolute; top: 13px; right: 13px; z-index: 2; padding: 5px 7px; color: var(--ink); background: var(--gold); font-size: 9px; font-weight: 850; letter-spacing: .12em; content: "CUT"; }
.concept-card-cut figcaption em { color: var(--gold); }

.art-credit { display: inline-flex; align-items: center; gap: 12px; margin: 22px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .04em; }

.lore-section { position: relative; overflow: hidden; padding: 145px 0; background: #07101f; }

.lore-backdrop { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 9, 21, .98) 0%, rgba(5, 9, 21, .8) 45%, rgba(5, 9, 21, .48) 100%), url('assets/press/web/zanoka-key-art-1920.jpg') 55% center / cover no-repeat; opacity: .85; }

.lore-section::after { position: absolute; inset: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); content: ""; pointer-events: none; }

.lore-grid { position: relative; z-index: 1; align-items: center; }

.lore-section .section-heading h2 { font-size: clamp(42px, 5.7vw, 76px); }

.lore-section h2 em { color: var(--gold); font-style: normal; }

.lore-panel { max-width: 500px; padding: 37px 38px; background: rgba(5, 12, 25, .68); border: 1px solid rgba(169, 213, 255, .23); box-shadow: var(--shadow); backdrop-filter: blur(18px); }

.lore-panel p { margin: 0 0 17px; color: var(--muted); }

.lore-panel .lore-lead { color: #edf7ff; font-size: 21px; line-height: 1.42; text-wrap: balance; }

.follow-section { background: linear-gradient(180deg, #081121, #050915); }

.follow-copy { max-width: 480px; }

.follow-copy h2 { max-width: 450px; }

.follow-copy > p:last-child { max-width: 380px; margin-top: 23px; color: var(--muted); }

.link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.link-card { position: relative; min-height: 122px; display: flex; flex-direction: column; justify-content: center; padding: 22px 48px 22px 22px; background: rgba(13, 30, 53, .72); border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease, background .2s ease; }

.link-card:hover { background: rgba(19, 46, 78, .88); border-color: var(--line-bright); transform: translateY(-3px); }

.link-card-primary { background: linear-gradient(125deg, rgba(119, 85, 41, .75), rgba(33, 30, 46, .85)); border-color: rgba(255, 215, 122, .42); }

.link-card-primary:hover { background: linear-gradient(125deg, rgba(145, 102, 48, .83), rgba(39, 35, 56, .9)); border-color: var(--gold); }

.link-card-press { background: rgba(19, 25, 46, .7); }

.link-card-contact { background: linear-gradient(135deg, rgba(20, 58, 82, .84), rgba(14, 27, 51, .78)); border-color: rgba(108, 231, 255, .3); }

.link-card-contact:hover { background: linear-gradient(135deg, rgba(26, 83, 111, .9), rgba(18, 37, 67, .88)); border-color: var(--blue); }

.link-card-art { background: linear-gradient(135deg, rgba(61, 37, 86, .82), rgba(22, 22, 51, .82)); border-color: rgba(194, 146, 255, .3); }

.link-card-art:hover { background: linear-gradient(135deg, rgba(86, 51, 116, .9), rgba(31, 28, 69, .9)); border-color: #c292ff; }

.link-card-type { margin-bottom: 9px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }

.link-card strong { color: #eef7ff; font-size: 17px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }

.link-card-email { display: block; margin-top: 8px; color: #b8d4e8; font-size: 12px; letter-spacing: .02em; overflow-wrap: anywhere; }

.link-arrow { position: absolute; right: 20px; bottom: 19px; color: var(--blue); font-size: 21px; }

.is-placeholder { cursor: pointer; }

.site-footer { padding: 36px 0 25px; padding-bottom: max(25px, env(safe-area-inset-bottom)); color: var(--muted); background: #030711; border-top: 1px solid var(--line); }

.footer-top, .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 22px; }

.footer-top { padding-bottom: 30px; border-bottom: 1px solid var(--line); }

.footer-top p { margin: 0; color: var(--muted-2); font-size: 13px; }

.footer-top-link { display: inline-flex; align-items: center; min-height: 48px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.footer-bottom { padding-top: 19px; font-size: 12px; }

.footer-bottom p { margin: 0; }

.footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

.footer-bottom nav a { display: inline-flex; align-items: center; min-width: 48px; min-height: 48px; color: #9db1c4; transition: color .2s ease; }

.footer-bottom nav a:hover { color: #fff; }

.footer-note { color: var(--muted-2); }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 30; max-width: min(360px, calc(100% - 48px)); padding: 13px 16px; color: #08101e; background: var(--gold); border: 1px solid #fff0b6; border-radius: 4px; box-shadow: var(--shadow); font-size: 13px; font-weight: 750; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }

.toast.is-visible { opacity: 1; transform: translateY(0); }

.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
  .feature-card:nth-child(2), .gallery-card:nth-child(2) { transition-delay: .08s; }
  .feature-card:nth-child(3), .gallery-card:nth-child(3) { transition-delay: .16s; }
  .feature-card:nth-child(4) { transition-delay: .24s; }
}

/* Secondary pages */
.page-body { background: #050915; }

.page-hero { position: relative; overflow: hidden; padding: 190px 0 92px; background: #07101f; border-bottom: 1px solid var(--line); }

.page-hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 9, 21, .98) 4%, rgba(5, 9, 21, .76) 55%, rgba(5, 9, 21, .38) 100%), url('assets/press/web/zanoka-key-art-1920.jpg') center 43% / cover; content: ""; opacity: .78; }

.page-hero .container { position: relative; z-index: 1; }

.page-hero h1 { max-width: 750px; margin: 0; font-size: clamp(52px, 8vw, 104px); font-weight: 700; letter-spacing: -.075em; line-height: .91; text-wrap: balance; }

.page-hero h1 em { color: var(--gold); font-style: normal; }

.page-hero p:not(.eyebrow) { max-width: 540px; margin: 26px 0 0; color: var(--muted); font-size: 18px; }

.page-main { padding: 88px 0 120px; }

.page-main h2 { margin: 0 0 18px; color: #f2f8ff; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.05em; line-height: 1; }

.page-main h3 { margin: 36px 0 10px; color: #eaf6ff; font-size: 21px; }

.page-main p, .page-main li { color: var(--muted); }

.page-main p { max-width: 760px; }

.page-main a:not(.button) { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(255, 215, 122, .45); text-underline-offset: 3px; }

.facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 38px 0 88px; background: var(--line); border: 1px solid var(--line); }

.fact { min-height: 135px; padding: 23px; background: var(--panel); }

.fact-label { margin: 0 0 12px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.fact strong { display: block; color: #edf7ff; font-size: 19px; font-weight: 650; overflow-wrap: anywhere; }

.download-section { padding-top: 70px; border-top: 1px solid var(--line); }

.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 33px; }

.download-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 205px; padding: 23px; background: linear-gradient(145deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease; }

.download-card:hover { border-color: var(--line-bright); transform: translateY(-3px); }

.download-card strong { color: #f1f8ff; font-size: 19px; }

.download-card p { margin: 8px 0 25px; font-size: 13px; }

.download-button { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.download-button::after { content: "↓"; font-size: 17px; }

.press-note { margin-top: 28px; padding: 18px 20px; color: var(--muted); background: rgba(12, 30, 52, .56); border-left: 2px solid var(--blue); }

.legal-wrap { max-width: 800px; }

.legal-wrap .eyebrow { margin-bottom: 24px; }

.legal-wrap ul { max-width: 760px; padding-left: 22px; }

.legal-meta { padding-bottom: 20px; color: var(--muted-2); font-size: 13px; border-bottom: 1px solid var(--line); }

.attribution-list { display: grid; gap: 12px; margin-top: 28px; }

.attribution-card { padding: 20px; background: var(--panel); border: 1px solid var(--line); }

.attribution-card strong { display: block; margin-bottom: 5px; color: #edf7ff; }

html[lang="ar"] body, html[lang="ur"] body, html[lang="sd"] body, html[lang="bal"] body, html[lang="ps"] body, html[lang="fa"] body { line-height: 1.8; }
html[lang="zh"] body, html[lang="ja"] body, html[lang="ko"] body { line-height: 1.75; }
html[dir="rtl"] .hero-copy, html[dir="rtl"] .section-heading, html[dir="rtl"] .intro-copy, html[dir="rtl"] .lore-panel, html[dir="rtl"] .follow-copy, html[dir="rtl"] .gallery-head, html[dir="rtl"] .facts-grid, html[dir="rtl"] .download-section { text-align: right; }
html[lang="ur"] body, html[lang="hi"] body, html[lang="sd"] body, html[lang="bal"] body, html[lang="ps"] body, html[lang="ta"] body { font-family: "Nirmala UI", "Latha", "Segoe UI", system-ui, sans-serif; }
  html[lang="ar"] body, html[lang="fa"] body, html[lang="ar-eg"] body { font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif; }
html[dir="rtl"] .hero-content { direction: ltr; }
html[dir="rtl"] .hero-copy { direction: rtl; }
html[dir="rtl"] .page-hero { text-align: right; }
html[dir="rtl"] .page-hero .container { direction: ltr; text-align: left; }
html[dir="rtl"] .page-hero .container > * { direction: rtl; text-align: right; }
html[dir="rtl"] .page-hero::before { background: linear-gradient(270deg, rgba(5, 9, 21, .98) 4%, rgba(5, 9, 21, .76) 55%, rgba(5, 9, 21, .38) 100%), url('assets/press/web/zanoka-key-art-1920.jpg') center 43% / cover; }
html[dir="rtl"] .page-hero .container { width: calc(100% - 48px); max-width: var(--max); min-width: 0; margin-right: auto; margin-left: auto; padding-right: 28px; padding-left: 28px; }
html[dir="rtl"] .page-hero h1 { width: min(100%, 650px); max-width: 650px; margin-right: auto; margin-left: 0; font-size: clamp(48px, 6.5vw, 86px); line-height: 1.05; overflow-wrap: anywhere; }
html[dir="rtl"] .page-hero p:not(.eyebrow) { max-width: 560px; }
html[dir="rtl"] .press-note { border-right: 2px solid var(--blue); border-left: 0; }
html[dir="rtl"] .legal-wrap ul { padding-right: 22px; padding-left: 0; }
html[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .announcement-bar, html[dir="rtl"] .eyebrow, html[dir="rtl"] .site-nav, html[dir="rtl"] .button, html[dir="rtl"] .link-card-type { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .skip-link { right: 12px; left: auto; }
html[dir="rtl"] .footer-note { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .hero h1, html[dir="rtl"] .hero-hook, html[dir="rtl"] .page-hero h1 { text-wrap: pretty; }
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3, html[lang="ru"] h1, html[lang="ru"] h2, html[lang="ru"] h3, html[lang="uk"] h1, html[lang="uk"] h2, html[lang="uk"] h3 { overflow-wrap: anywhere; }
h1, h2, h3, .button, .link-card strong, .feature-card h3 { text-wrap: balance; overflow-wrap: anywhere; }

@media (max-width: 950px) {
  .site-nav { gap: 2px; row-gap: 2px; max-width: 72%; }
  .site-nav a:not(.nav-cta) { padding: 0 9px; font-size: 12px; }
  .site-nav .nav-cta { padding: 0 11px; }
  .language-picker select { min-width: 86px; }
  .intro-grid, .trailer-grid, .follow-grid, .lore-grid { gap: 50px; }
  .page-hero::before { background-size: auto, auto 130%; background-position: 0 0, 50% top; }
  html[dir="rtl"] .page-hero::before { background-size: auto, auto 130%; background-position: 0 0, 50% top; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-card-wide { grid-column: span 2; grid-row: auto; min-height: 430px; }
  .gallery-card-tall, .gallery-card-menu { min-height: 270px; }
  .concept-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top, .footer-bottom { flex-wrap: wrap; }
  .footer-note { margin-left: auto; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 36px), var(--max)); }
  .announcement-bar { justify-content: flex-start; gap: 8px; overflow: hidden; white-space: nowrap; font-size: 10px; }
  .announcement-mark { width: 18px; height: 18px; }
  .announcement-bar a { display: none; }
  .site-header { top: 34px; width: min(calc(100% - 36px), var(--max)); padding: 9px 10px; border-radius: 14px; }
  .brand-lockup { font-size: 15px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 10px 0 12px; color: var(--text); background: rgba(5, 9, 21, .55); border: 1px solid rgba(157, 220, 255, .18); border-radius: 10px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
  .menu-bars { display: grid; gap: 4px; }
  .menu-bars i { display: block; width: 21px; height: 1px; background: var(--gold); }
  .site-nav { position: absolute; top: 64px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 3px; max-width: none; padding: 8px; background: rgba(6, 13, 26, .97); border: 1px solid var(--line-bright); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.nav-cta) { min-height: 48px; padding: 0 14px; border-bottom: 0; }
  .site-nav a:not(.nav-cta)::after { display: none; }
  .site-nav a:not(.nav-cta).is-active { background: rgba(108, 231, 255, .15); }
  .site-nav .nav-cta { justify-content: center; min-height: 48px; margin: 7px 0 2px; text-align: center; border: 0; border-radius: 10px; }
  .language-picker { justify-content: stretch; min-height: 0; margin: 6px 0 1px; padding: 8px 4px 0; border-top: 1px solid rgba(157, 220, 255, .16); border-left: 0; }
  .language-picker select { width: 100%; min-height: 48px; }
  .hero { min-height: 780px; }
  .hero-media img { object-position: 61% top; }
  .hero-media::after { background: linear-gradient(90deg, rgba(3, 7, 16, .93), rgba(3, 7, 16, .2) 100%), linear-gradient(0deg, rgba(4, 7, 16, .96), transparent 55%); }
  .hero-content { min-height: 780px; padding-top: 145px; padding-bottom: 47px; }
  .hero-wordmark { width: min(480px, 108%); margin-left: -7px; }
  .hero h1 { font-size: 34px; }
  .hero-hook { font-size: 16px; }
  .section { padding: 85px 0; }
  .intro-grid, .trailer-grid, .follow-grid, .lore-grid { grid-template-columns: 1fr; gap: 38px; }
  .intro-copy { padding-top: 0; }
  .feature-section .section-heading-wide, .gallery-head { display: block; margin-bottom: 33px; }
  .section-heading-wide > p:last-child, .gallery-intro { margin-top: 20px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 220px; }
  .trailer-frame, .trailer-frame > img { min-height: 270px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-card-wide { grid-column: auto; min-height: 360px; }
  .gallery-card-tall, .gallery-card-menu { min-height: 290px; }
  .concept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lore-section { padding: 92px 0; }
  .lore-panel { padding: 28px 24px; }
  .link-grid { grid-template-columns: 1fr; }
  .footer-top, .footer-bottom { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .footer-top-link, .footer-note { margin-left: 0; margin-right: 0; text-align: left; }
  .footer-bottom nav { justify-content: flex-start; gap: 11px 16px; }
  .page-hero { padding: 155px 0 72px; }
  .page-hero h1 { font-size: clamp(50px, 16vw, 82px); }
  .page-hero p:not(.eyebrow) { font-size: 16px; }
  .page-main { padding: 68px 0 88px; }
  .facts-grid, .download-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 470px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .button { width: 100%; }
  .facts-grid, .download-grid { grid-template-columns: 1fr; }
  .feature-card { grid-template-columns: 29px minmax(0, 1fr) auto; gap: 12px; padding: 26px 20px 23px; }
  .feature-card h3 { font-size: 23px; }
  .concept-grid { grid-template-columns: 1fr; }
}

/* Premium front-end pass: cinematic hierarchy, resilient layout, and tactile interaction. */
:root {
  --surface-glass: rgba(7, 16, 31, .72);
  --surface-glass-strong: rgba(6, 14, 28, .9);
  --glow-blue: rgba(108, 231, 255, .22);
  --glow-violet: rgba(151, 118, 255, .2);
  --ease-zanoka: cubic-bezier(.2, .75, .2, 1);
}

html {
  scrollbar-color: rgba(108, 231, 255, .5) var(--night);
  scrollbar-width: thin;
}

body {
  background:
    radial-gradient(circle at 78% -8%, rgba(50, 72, 157, .16), transparent 30rem),
    var(--night);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

::selection { color: var(--ink); background: var(--gold); }

.announcement-bar {
  min-height: 40px;
  background: linear-gradient(90deg, #050b17, #091526 52%, #050b17);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 8px 22px rgba(0, 0, 0, .16);
  overflow: hidden;
}

.announcement-bar::before {
  position: absolute;
  top: 0;
  left: -18%;
  width: 18%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity: .75;
  animation: transmission-sweep 9s linear infinite;
}

@keyframes transmission-sweep {
  from { transform: translateX(0); }
  to { transform: translateX(650%); }
}

.site-header {
  padding: 10px 11px 10px 17px;
  border-color: rgba(169, 224, 255, .24);
  background: linear-gradient(135deg, rgba(8, 19, 38, .86), rgba(3, 8, 19, .62));
  box-shadow: 0 20px 62px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: top .35s var(--ease-zanoka), width .35s var(--ease-zanoka), background .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.site-header::after {
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(108, 231, 255, .5) calc(var(--scroll-progress, 0) * 100%), transparent calc(var(--scroll-progress, 0) * 100%));
  opacity: .85;
  pointer-events: none;
}

.site-header.is-scrolled {
  position: fixed;
  top: 12px;
  background: var(--surface-glass-strong);
  border-color: rgba(169, 224, 255, .32);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .45), 0 0 0 1px rgba(108, 231, 255, .04), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.brand-lockup { letter-spacing: .2em; }
.brand-lockup img { filter: drop-shadow(0 0 16px rgba(108, 231, 255, .4)); }

.site-nav {
  padding: 4px;
  background: rgba(1, 7, 17, .58);
  border-color: rgba(169, 224, 255, .17);
}

.site-nav a:not(.nav-cta) { color: rgba(237, 247, 255, .72); }

.site-nav a:not(.nav-cta):hover,
.site-nav a:not(.nav-cta).is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(108, 231, 255, .16), rgba(108, 231, 255, .05));
}

.site-nav .nav-cta {
  min-height: 48px;
  border-radius: 11px;
  box-shadow: 0 8px 28px rgba(238, 161, 72, .24), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.language-picker select { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }

.hero {
  min-height: min(920px, 100svh);
  isolation: isolate;
  background: #030712;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    radial-gradient(circle at 63% 42%, rgba(108, 231, 255, .1), transparent 24%),
    radial-gradient(circle at 85% 26%, rgba(151, 118, 255, .13), transparent 25%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-media { transform: none; }

.hero-media img {
  height: 108%;
  filter: saturate(1.12) contrast(1.05) brightness(.9);
  transform: translate3d(0, 0, 0);
  animation: hero-drift 18s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-.25%, 0, 0); }
}

.hero-media::after {
  background:
    linear-gradient(90deg, rgba(2, 6, 15, .96) 0%, rgba(2, 6, 15, .75) 29%, rgba(2, 6, 15, .12) 67%, rgba(2, 6, 15, .5) 100%),
    linear-gradient(0deg, rgba(2, 6, 15, .96) 0%, transparent 43%, rgba(2, 6, 15, .34) 100%);
}

.hero-content {
  min-height: min(920px, 100svh);
  padding-top: 176px;
  padding-bottom: 76px;
}

.hero-copy {
  position: relative;
  max-width: 760px;
  padding: 34px 40px 38px;
  border-left: 1px solid rgba(108, 231, 255, .32);
  background: linear-gradient(105deg, rgba(3, 9, 22, .78), rgba(3, 9, 22, .3) 78%, transparent);
  box-shadow: -20px 0 70px rgba(3, 9, 22, .22);
  backdrop-filter: blur(2px);
}

.hero-copy::before,
.hero-copy::after {
  position: absolute;
  left: 0;
  width: 112px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--blue), transparent);
  box-shadow: 0 0 18px rgba(108, 231, 255, .5);
}

.hero-copy::before { top: 0; }
.hero-copy::after { bottom: 0; opacity: .45; }

.hero-wordmark {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .46)) drop-shadow(0 0 18px rgba(154, 191, 255, .2));
}

.hero h1 {
  margin-bottom: 18px;
  text-shadow: 0 10px 34px rgba(0, 0, 0, .4);
}

.hero-hook {
  margin-bottom: 30px;
  color: rgba(239, 248, 255, .84);
  text-shadow: 0 3px 20px rgba(0, 0, 0, .28);
}

.hero-actions { gap: 13px; }

.button {
  position: relative;
  min-height: 54px;
  padding: 14px 20px;
  overflow: hidden;
  border-radius: 12px;
  transition: transform .3s var(--ease-zanoka), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.button::after {
  position: absolute;
  top: -60%;
  left: -35%;
  width: 24%;
  height: 220%;
  content: "";
  background: rgba(255, 255, 255, .24);
  transform: rotate(22deg) translateX(-220%);
  transition: transform .6s var(--ease-zanoka);
}

.button:hover::after { transform: rotate(22deg) translateX(680%); }
.button-primary { box-shadow: 0 16px 34px rgba(232, 160, 74, .25), inset 0 1px 0 rgba(255, 255, 255, .42); }
.button-primary:hover { box-shadow: 0 18px 42px rgba(232, 160, 74, .34), inset 0 1px 0 rgba(255, 255, 255, .5); }
.button-quiet { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); }

.hero-meta {
  gap: 8px;
  margin-top: 26px;
  max-width: 740px;
}

.hero-meta span {
  padding: 7px 10px;
  color: rgba(225, 241, 252, .76);
  background: rgba(8, 23, 43, .58);
  border: 1px solid rgba(157, 220, 255, .14);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.meta-mark { width: 6px; height: 6px; box-shadow: 0 0 10px rgba(108, 231, 255, .8); }

.section { position: relative; padding: 138px 0; }

.section-heading h2 {
  text-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.section-heading h2::first-letter { color: inherit; }

.feature-section,
.gallery-section { background: linear-gradient(180deg, #050a14, #040811); }

.feature-grid {
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .23), 0 0 0 1px rgba(108, 231, 255, .04);
}

.feature-card {
  min-height: 286px;
  padding: 34px 32px 30px;
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(108, 231, 255, .12), transparent 36%),
    linear-gradient(145deg, rgba(16, 37, 66, .98), rgba(7, 16, 31, .98));
  transition: background .35s ease, transform .35s var(--ease-zanoka), box-shadow .35s ease;
}

.feature-card::before {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 2px;
  content: "";
  background: linear-gradient(var(--blue), transparent 75%);
  opacity: .5;
  transition: opacity .3s ease, box-shadow .3s ease;
}

.feature-card:hover {
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(108, 231, 255, .17), transparent 39%),
    linear-gradient(145deg, rgba(22, 53, 88, .99), rgba(7, 18, 35, .99));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
  transform: translateY(-4px);
}

.feature-card:hover::before { opacity: 1; box-shadow: 0 0 18px rgba(108, 231, 255, .5); }
.feature-card-accent { background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(151, 118, 255, .16), transparent 39%), linear-gradient(145deg, rgba(29, 28, 64, .98), rgba(10, 12, 29, .98)); }

@container (max-width: 900px) {
  .feature-section .section-heading-wide { display: block; margin-bottom: 36px; }
  .feature-section .section-heading-wide > p:last-child { margin-top: 18px; }
  .feature-grid { grid-template-columns: 1fr; }
}

.trailer-frame {
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  border-color: rgba(169, 224, 255, .35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .34), 0 0 0 1px rgba(108, 231, 255, .04);
}

.trailer-frame > img { min-height: 0; }
.trailer-frame > iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }

.trailer-frame::before {
  position: absolute;
  inset: 13px;
  z-index: 1;
  content: "";
  border: 1px solid rgba(255, 255, 255, .14);
  pointer-events: none;
}

.trailer-vignette { z-index: 1; }
.trailer-overlay { z-index: 2; }
.play-button { width: 82px; height: 82px; box-shadow: 0 0 0 12px rgba(255, 215, 122, .12), 0 18px 48px rgba(0, 0, 0, .44); }

.gallery-head { margin-bottom: 52px; }
.gallery-card { border-radius: 22px; border-color: rgba(169, 224, 255, .2); box-shadow: 0 22px 58px rgba(0, 0, 0, .24); }
.gallery-card figcaption { right: 24px; bottom: 22px; left: 24px; }
.gallery-card figcaption strong { font-size: 20px; }

.concept-grid { gap: 16px; }
.concept-card { border-radius: 16px; box-shadow: 0 24px 55px rgba(0, 0, 0, .28); }
.concept-card figcaption { right: 16px; bottom: 16px; left: 16px; }
.concept-card { content-visibility: auto; contain-intrinsic-size: 0 520px; }

.lore-section { padding: 164px 0; }
.lore-panel { border-radius: 22px; border-color: rgba(169, 224, 255, .3); box-shadow: 0 28px 76px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .06); }

.link-grid { gap: 12px; }
.link-card { min-height: 132px; border-radius: 16px; background: linear-gradient(145deg, rgba(15, 37, 64, .82), rgba(8, 18, 34, .82)); }
.link-card:hover { box-shadow: 0 16px 38px rgba(0, 0, 0, .24); }

.site-footer { background: linear-gradient(180deg, #030711, #02050c); }
.footer-top { padding-bottom: 34px; }
.footer-top-link { padding: 8px 12px; border: 1px solid rgba(255, 215, 122, .25); border-radius: 999px; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.footer-top-link:hover { color: var(--ink); background: var(--gold); border-color: var(--gold); }

html[dir="rtl"] .hero-copy { border-right: 1px solid rgba(108, 231, 255, .32); border-left: 0; }
html[dir="rtl"] .hero-copy::before,
html[dir="rtl"] .hero-copy::after { right: 0; left: auto; background: linear-gradient(270deg, var(--blue), transparent); }

@media (max-width: 950px) {
  .hero-copy { max-width: 680px; padding-right: 30px; padding-left: 30px; }
  .section { padding: 116px 0; }
  .feature-card { min-height: 260px; }
}

@media (max-width: 760px) {
  html[dir="rtl"] .page-hero .container { width: calc(100% - 36px); padding-right: 0; padding-left: 0; }
  html[dir="rtl"] .page-hero h1 { width: 100%; max-width: 100%; margin-left: 0; font-size: clamp(42px, 12vw, 70px); line-height: 1.08; }
  .site-header.is-scrolled { top: 10px; }
  .hero { min-height: 820px; }
  .hero-content { min-height: 820px; padding-top: 144px; padding-bottom: 48px; }
  .hero-copy { max-width: none; padding: 27px 21px 29px; border-top: 1px solid rgba(108, 231, 255, .28); border-right: 0; border-bottom: 1px solid rgba(108, 231, 255, .12); border-left: 0; background: linear-gradient(180deg, rgba(3, 9, 22, .58), rgba(3, 9, 22, .24)); }
  .hero-copy::before, .hero-copy::after { right: 0; left: 0; width: 100%; background: linear-gradient(90deg, transparent, var(--blue), transparent); }
  .hero-wordmark { width: min(500px, 110%); }
  .hero-meta { margin-top: 23px; }
  .hero-meta span { padding: 6px 8px; font-size: 11px; }
  .section { padding: 96px 0; }
  .feature-grid { border-radius: 18px; }
  .feature-card { min-height: 232px; border-radius: 0; }
  .trailer-frame { border-radius: 18px; }
  .trailer-frame::before { inset: 9px; }
  .gallery-card { border-radius: 18px; }
  .lore-section { padding: 112px 0; }
  .lore-panel { border-radius: 18px; }
  .link-card { border-radius: 14px; }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .menu-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 10px 0 12px; color: var(--text); background: rgba(5, 9, 21, .55); border: 1px solid rgba(157, 220, 255, .18); border-radius: 10px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
  .menu-bars { display: grid; gap: 4px; }
  .menu-bars i { display: block; width: 21px; height: 1px; background: var(--gold); }
  .site-nav { position: absolute; top: 64px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 3px; max-width: none; padding: 8px; background: rgba(6, 13, 26, .97); border: 1px solid var(--line-bright); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.nav-cta) { min-height: 48px; padding: 0 14px; border-bottom: 0; }
  .site-nav a:not(.nav-cta)::after { display: none; }
  .site-nav a:not(.nav-cta).is-active { background: rgba(108, 231, 255, .15); }
  .site-nav .nav-cta { justify-content: center; min-height: 48px; margin: 7px 0 2px; text-align: center; border: 0; border-radius: 10px; }
  .language-picker { justify-content: stretch; min-height: 0; margin: 6px 0 1px; padding: 8px 4px 0; border-top: 1px solid rgba(157, 220, 255, .16); border-left: 0; }
  .language-picker select { width: 100%; min-height: 48px; }
}

@media (max-width: 470px) {
  .hero-copy { padding-right: 16px; padding-left: 16px; }
  .hero h1 { font-size: clamp(31px, 10vw, 39px); }
  .hero-hook { font-size: 15px; line-height: 1.58; }
  .hero-meta { gap: 7px; }
  .hero-meta span { max-width: 100%; }
}

/* Final accessibility and navigation pass. */
main > section[id] { scroll-margin-top: 112px; }

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

/* Comic transmission polish.
   Typography stays asset-free: only generic system stacks are used. */
:root {
  --comic-display: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --comic-ink: rgba(2, 6, 15, .8);
  --comic-cyan: #7befff;
  --comic-violet: #b194ff;
  --comic-pink: #ff8cab;
  --comic-green: #73efc6;
  --comic-gold: #ffe08a;
}

h1,
h2,
h3,
.button,
.eyebrow,
.card-label,
.feature-index,
.trailer-tag,
.link-card-type,
.footer-top-link,
.site-nav a {
  font-family: var(--comic-display);
  font-weight: 800;
}

h1,
h2,
h3 {
  -webkit-text-stroke: .35px rgba(255, 255, 255, .14);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .54), 0 10px 28px rgba(0, 0, 0, .24);
}

.hero h1,
.section-heading h2,
.feature-card h3,
.page-hero h1 { font-weight: 800; }

.hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background-image: radial-gradient(circle, rgba(255, 255, 255, .7) 1px, transparent 1.45px);
  background-position: 0 0;
  background-size: 13px 13px;
  opacity: .1;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .82), transparent 78%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .82), transparent 78%);
  pointer-events: none;
}

.hero-copy {
  background-image:
    radial-gradient(circle at 4px 4px, rgba(123, 239, 255, .09) 1px, transparent 1.45px),
    linear-gradient(105deg, rgba(3, 9, 22, .8), rgba(3, 9, 22, .32) 78%, transparent);
  background-position: 0 0, 0 0;
  background-size: 18px 18px, auto;
}

.eyebrow {
  position: relative;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  padding: 5px 11px 5px 10px;
  color: var(--comic-gold);
  background: linear-gradient(135deg, rgba(255, 224, 138, .1), rgba(108, 231, 255, .05));
  border: 1px solid rgba(255, 224, 138, .3);
  border-radius: 5px 9px 6px 8px;
  box-shadow: 3px 3px 0 var(--comic-ink), 0 0 22px rgba(255, 215, 122, .08);
  transform: rotate(-.6deg);
}

.eyebrow::after {
  position: absolute;
  top: -4px;
  right: 10px;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--comic-pink);
  border: 1px solid var(--comic-ink);
  border-radius: 2px;
  transform: rotate(18deg);
}

.eyebrow-line {
  width: 24px;
  height: 3px;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow: 0 0 12px currentColor;
}

.section-heading h2::after {
  display: block;
  width: 48px;
  height: 6px;
  margin-top: 18px;
  content: "";
  background: linear-gradient(90deg, var(--comic-cyan), var(--comic-violet));
  border-radius: 2px 5px 2px 4px;
  box-shadow: 3px 3px 0 var(--comic-ink), 0 0 18px rgba(108, 231, 255, .24);
  transform: rotate(-3deg) skewX(-18deg);
}

.button {
  border-radius: 8px 12px 9px 13px;
  box-shadow: 4px 4px 0 var(--comic-ink), 0 0 22px rgba(108, 231, 255, .08);
}

.button:hover { transform: translate(-1px, -3px); }
.button:active { transform: translate(2px, 1px); box-shadow: 2px 2px 0 var(--comic-ink); }

.button-primary {
  border-color: rgba(255, 241, 185, .82);
  box-shadow: 4px 4px 0 var(--comic-ink), 0 16px 34px rgba(232, 160, 74, .27), inset 0 1px 0 rgba(255, 255, 255, .46);
}

.button-quiet { box-shadow: 4px 4px 0 var(--comic-ink), inset 0 1px 0 rgba(255, 255, 255, .1); }

.feature-grid { border-radius: 15px; }

.feature-card {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.feature-card::after {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  content: "";
  background-image: radial-gradient(circle, rgba(255, 255, 255, .75) 1px, transparent 1.25px);
  background-size: 8px 8px;
  opacity: .1;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 75%);
  mask-image: linear-gradient(135deg, #000, transparent 75%);
  pointer-events: none;
}

.feature-index {
  display: grid;
  place-items: center;
  width: 36px;
  height: 31px;
  padding: 0;
  color: var(--comic-gold);
  background: rgba(255, 215, 122, .08);
  border: 1px solid rgba(255, 215, 122, .72);
  border-radius: 5px 7px 4px 6px;
  box-shadow: 2px 2px 0 var(--comic-ink);
  transform: rotate(-4deg);
}

.feature-card:hover .feature-index { transform: rotate(4deg) scale(1.05); }

.card-label {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 7px;
  background: rgba(123, 239, 255, .08);
  border: 1px solid rgba(123, 239, 255, .26);
  border-radius: 4px 6px 3px 5px;
  box-shadow: 2px 2px 0 var(--comic-ink);
  transform: rotate(-1deg);
}

.feature-arrow,
.link-arrow { text-shadow: 2px 2px 0 var(--comic-ink); }
.feature-card:hover .feature-arrow,
.link-card:hover .link-arrow { transform: translate(3px, -3px) rotate(-6deg); }

.trailer-tag {
  border-radius: 4px 8px 5px 7px;
  box-shadow: 3px 3px 0 var(--comic-ink);
  transform: rotate(-1deg);
}

.play-button {
  border: 2px solid var(--comic-ink);
  animation: comic-play-pulse 3.2s ease-in-out infinite;
}

.gallery-card {
  border-width: 2px;
  border-radius: 16px 20px 17px 13px;
  box-shadow: 6px 7px 0 rgba(0, 0, 0, .28), 0 22px 58px rgba(0, 0, 0, .24);
}

.gallery-card::before {
  position: absolute;
  inset: 10px;
  z-index: 1;
  content: "";
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 9px 12px 8px 10px;
  opacity: .72;
  pointer-events: none;
  transition: border-color .3s ease, opacity .3s ease;
}

.gallery-card::after { z-index: 0; }
.gallery-card figcaption { z-index: 2; }
.gallery-card:hover::before { border-color: rgba(123, 239, 255, .62); opacity: 1; }

.concept-card {
  border-width: 2px;
  border-radius: 11px 15px 9px 13px;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, .26), 0 24px 55px rgba(0, 0, 0, .28);
}

.lore-panel {
  border-radius: 18px 23px 16px 21px;
  background-image:
    radial-gradient(circle at 5px 5px, rgba(123, 239, 255, .07) 1px, transparent 1.3px),
    linear-gradient(145deg, rgba(5, 12, 25, .76), rgba(10, 18, 38, .62));
  background-size: 16px 16px, auto;
}

.link-card {
  border-width: 2px;
  border-radius: 10px 14px 9px 13px;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .25);
}

.link-card:hover { transform: translate(-1px, -4px); box-shadow: 5px 7px 0 rgba(0, 0, 0, .3), 0 16px 38px rgba(0, 0, 0, .24); }

.site-nav .nav-cta {
  border-radius: 8px 11px 7px 10px;
  box-shadow: 3px 3px 0 var(--comic-ink), 0 8px 28px rgba(238, 161, 72, .24), inset 0 1px 0 rgba(255, 255, 255, .35);
}

@keyframes comic-dots {
  from { background-position: 0 0; }
  to { background-position: 26px 13px; }
}

@keyframes comic-entry {
  from { opacity: 0; transform: translateY(18px) rotate(-.8deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes comic-wordmark {
  0%, 100% { transform: rotate(-.35deg) translateY(0); }
  50% { transform: rotate(.35deg) translateY(-3px); }
}

@keyframes comic-play-pulse {
  0%, 100% { box-shadow: 0 0 0 12px rgba(255, 215, 122, .12), 0 18px 48px rgba(0, 0, 0, .44); }
  50% { box-shadow: 0 0 0 17px rgba(255, 215, 122, .05), 0 20px 54px rgba(0, 0, 0, .5); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: comic-dots 22s linear infinite; }
  .hero-copy { animation: comic-entry .82s var(--ease-zanoka) both; }
  .hero-wordmark { animation: comic-wordmark 8s ease-in-out infinite; transform-origin: 28% 50%; }
  .status-dot { animation: status-pulse 2.8s ease-in-out infinite; }
}

@keyframes status-pulse {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; box-shadow: 0 0 0 5px rgba(108, 231, 255, .12), 0 0 24px rgba(108, 231, 255, .82); }
}

html[dir="rtl"] .eyebrow { transform: rotate(.6deg); letter-spacing: 0; }
html[dir="rtl"] .eyebrow::after { right: auto; left: 10px; }
html[lang="zh"] .eyebrow,
html[lang="ja"] .eyebrow,
html[lang="ko"] .eyebrow { letter-spacing: .02em; }

@media (max-width: 760px) {
  .eyebrow { padding-right: 9px; padding-left: 8px; font-size: 10px; }
  .section-heading h2::after { margin-top: 14px; }
  .gallery-card { box-shadow: 4px 5px 0 rgba(0, 0, 0, .28), 0 18px 42px rgba(0, 0, 0, .24); }
  .gallery-card::before { inset: 8px; }
}

.hero-meta span {
  transition: transform .25s var(--ease-zanoka), border-color .25s ease, background .25s ease, color .25s ease;
}

.hero-meta span:hover {
  color: #fff;
  background: rgba(15, 43, 70, .78);
  border-color: rgba(123, 239, 255, .4);
  transform: translateY(-2px) rotate(-.35deg);
}

.meta-mark { transition: transform .25s var(--ease-zanoka), background .25s ease; }
.hero-meta span:hover .meta-mark { background: var(--comic-cyan); transform: rotate(135deg) scale(1.08); }

.language-picker select:hover { color: #fff; border-color: rgba(123, 239, 255, .55); }

/* Art integration pass: individual crops only, resilient at every container width. */
.build-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.build-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(220px, 1.06fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  min-height: 264px;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(15, 34, 60, .98), rgba(7, 15, 29, .98));
  border: 1px solid rgba(150, 208, 255, .2);
  border-radius: 16px 19px 14px 18px;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, .22), 0 24px 58px rgba(0, 0, 0, .25);
  transition: transform .25s var(--ease-zanoka), border-color .25s ease, box-shadow .25s ease;
}

.build-panel::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 18%, rgba(108, 231, 255, .15), transparent 38%), linear-gradient(135deg, transparent 52%, rgba(151, 118, 255, .1));
  content: "";
  pointer-events: none;
}

.build-panel-upgrades::before { background: radial-gradient(circle at 78% 18%, rgba(255, 215, 122, .14), transparent 38%), linear-gradient(135deg, transparent 52%, rgba(151, 118, 255, .13)); }
.build-panel:hover { border-color: rgba(123, 239, 255, .5); box-shadow: 6px 7px 0 rgba(0, 0, 0, .26), 0 30px 70px rgba(0, 0, 0, .3); transform: translateY(-3px); }
.build-panel-copy { position: relative; z-index: 1; min-width: 0; }
.build-panel-copy .card-label { margin-bottom: 14px; }
.build-panel h3 { max-width: 290px; margin: 0 0 12px; font-size: clamp(22px, 2vw, 29px); letter-spacing: -.035em; line-height: 1.06; }
.build-panel p:not(.card-label) { max-width: 320px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.build-icon-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  align-content: center;
  min-width: 0;
  padding-left: 17px;
  border-left: 1px solid rgba(150, 208, 255, .18);
}

.build-icon-strip img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .4)); transition: transform .25s var(--ease-zanoka), filter .25s ease; }
.build-panel:hover .build-icon-strip img:nth-child(odd) { transform: translateY(-3px) rotate(-2deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.build-panel:hover .build-icon-strip img:nth-child(even) { transform: translateY(3px) rotate(2deg); }

.concept-card-interactive { cursor: pointer; }
.concept-trigger { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; color: inherit; background: transparent; border: 0; text-align: left; cursor: pointer; }
.concept-trigger img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.86) contrast(.98); transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s ease; }
.concept-card-interactive:hover .concept-trigger img, .concept-trigger:focus-visible img { filter: saturate(1) contrast(1.02); transform: scale(1.035); }
.concept-card-interactive .concept-hint { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 9px; color: var(--ink); background: var(--gold); border: 2px solid var(--comic-ink); border-radius: 5px 7px 4px 6px; box-shadow: 3px 3px 0 var(--comic-ink); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translateY(-5px) rotate(-2deg); transition: opacity .22s ease, transform .22s ease; }
.concept-card-interactive:hover .concept-hint, .concept-trigger:focus-visible .concept-hint { opacity: 1; transform: translateY(0) rotate(-2deg); }
.concept-hint span { font-size: 16px; line-height: 1; }
.concept-card-interactive::after { z-index: 2; }
.concept-card-interactive figcaption { z-index: 4; }

.concept-dialog[hidden] { display: none; }
.concept-dialog { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; overflow: auto; background: rgba(1, 5, 12, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.concept-dialog-shell { width: min(100%, 1120px); max-height: calc(100vh - 48px); overflow: auto; padding: clamp(20px, 4vw, 38px); background: linear-gradient(145deg, rgba(9, 21, 40, .98), rgba(4, 9, 19, .98)); border: 1px solid rgba(123, 239, 255, .38); border-radius: 18px 23px 16px 21px; box-shadow: 8px 9px 0 rgba(0, 0, 0, .25), 0 34px 110px rgba(0, 0, 0, .55); }
.concept-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.concept-dialog-header .eyebrow { margin-bottom: 12px; }
.concept-dialog-header h2 { margin: 0; font-size: clamp(32px, 5vw, 58px); letter-spacing: -.055em; line-height: .98; }
.concept-dialog-close { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; min-height: 48px; padding: 0; color: var(--text); background: rgba(123, 239, 255, .08); border: 1px solid rgba(123, 239, 255, .3); border-radius: 8px 11px 7px 10px; font-size: 30px; line-height: 1; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.concept-dialog-close:hover { color: var(--ink); background: var(--blue); transform: rotate(4deg); }
.concept-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.concept-compare-card { min-width: 0; margin: 0; padding: 13px; background: rgba(5, 13, 26, .78); border: 1px solid rgba(150, 208, 255, .2); border-radius: 12px 15px 10px 14px; }
.concept-compare-card > figcaption { margin: 0 0 11px; color: var(--gold); font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.concept-compare-art { display: grid; place-items: center; min-width: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #05070c; border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px 10px 7px 9px; }
.concept-compare-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.concept-compare-sketch { background: #d7d1bf; }
.concept-dialog-credit { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
body.is-concept-open { overflow: hidden; }

@media (max-width: 980px) {
  .build-showcase { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .build-panel { grid-template-columns: 1fr; min-height: 0; padding: 22px 20px 20px; }
  .build-icon-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 0 0; border-top: 1px solid rgba(150, 208, 255, .18); border-left: 0; }
  .concept-dialog { padding: 12px; }
  .concept-dialog-shell { max-height: calc(100vh - 24px); padding: 20px 16px; }
  .concept-dialog-header { margin-bottom: 18px; }
  .concept-compare-grid { grid-template-columns: 1fr; gap: 12px; }
  .concept-compare-art { min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .build-panel, .build-icon-strip img, .concept-trigger img, .concept-hint, .concept-dialog-close { transition: none; }
}

.footer-bottom nav a {
  position: relative;
  transition: color .2s ease, transform .2s var(--ease-zanoka);
}

.footer-bottom nav a::after {
  position: absolute;
  right: 10px;
  bottom: 7px;
  left: 10px;
  height: 2px;
  content: "";
  background: var(--comic-cyan);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(123, 239, 255, .45);
  transform: scaleX(0) rotate(-2deg);
  transition: transform .2s var(--ease-zanoka);
}

.footer-bottom nav a:hover { transform: translateY(-2px); }
.footer-bottom nav a:hover::after { transform: scaleX(1) rotate(-2deg); }

.toast {
  border-radius: 8px 12px 7px 10px;
  box-shadow: 4px 5px 0 var(--comic-ink), var(--shadow);
}

/* Navigation alignment pass: fixed-height tabs, stable language control, and
   wrapping only inside the compact menu so resizing never leaves a broken row. */
.site-nav {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  min-height: 58px;
}

.site-nav > a:not(.nav-cta) {
  height: 48px;
  min-height: 48px;
  padding-inline: clamp(11px, .95vw, 16px);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.site-nav > a.nav-cta {
  height: 48px;
  min-height: 48px;
  justify-content: center;
  padding-inline: clamp(13px, 1vw, 17px);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.language-picker {
  flex: 0 0 auto;
  height: 48px;
  min-height: 48px;
  margin-left: 4px;
  align-self: center;
}

.language-picker select {
  width: clamp(132px, 11vw, 164px);
  min-width: 0;
  height: 48px;
  min-height: 48px;
  line-height: 1.1;
  text-align: start;
  white-space: nowrap;
}

.menu-toggle { white-space: nowrap; }

@media (max-width: 1180px) {
  .site-nav {
    min-height: 0;
  }

  .site-nav > a:not(.nav-cta),
  .site-nav > a.nav-cta {
    width: 100%;
    height: auto;
    min-height: 48px;
    padding-block: 11px;
    line-height: 1.25;
    white-space: normal;
  }

  .site-nav > a:not(.nav-cta) { text-align: start; }
  .site-nav > a.nav-cta { text-align: center; }

  .language-picker {
    height: auto;
    min-height: 0;
  }

  .language-picker select {
    width: 100%;
    height: 48px;
  }
}

/* Performance, resolution and new elemental-art pass. */
img { height: auto; }

.boon-visuals {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.elemental-boon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.elemental-boon-card {
  min-width: 0;
  padding: 8px 6px 9px;
  overflow: hidden;
  color: var(--text);
  background: linear-gradient(145deg, rgba(11, 28, 51, .74), rgba(4, 10, 22, .88));
  border: 1px solid rgba(150, 208, 255, .16);
  border-radius: 8px 11px 7px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  text-align: center;
  transition: border-color .24s ease, background .24s ease, transform .24s var(--ease-zanoka), box-shadow .24s ease;
}

.elemental-boon-card:hover {
  background: linear-gradient(145deg, rgba(16, 42, 70, .9), rgba(5, 14, 29, .94));
  border-color: rgba(123, 239, 255, .5);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .25), 0 10px 20px rgba(0, 0, 0, .18);
  transform: translateY(-2px);
}

.elemental-boon-art {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(58px, 6.4vw, 82px);
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.elemental-boon-art > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .38));
  transition: transform .24s var(--ease-zanoka), filter .24s ease;
}

.elemental-boon-echo {
  position: absolute;
  right: -2px;
  bottom: -5px;
  width: 40%;
  height: 40%;
  object-fit: contain;
  opacity: .27;
  pointer-events: none;
  filter: saturate(1.15) drop-shadow(0 4px 6px rgba(0, 0, 0, .42));
}

.elemental-boon-card:hover .elemental-boon-art > img:first-child {
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .48));
  transform: translateY(-2px) scale(1.04);
}

.elemental-boon-card strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .05em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.concept-card-polished {
  background: radial-gradient(circle at 50% 24%, rgba(123, 239, 255, .19), transparent 46%), linear-gradient(145deg, #102b46, #071322);
}

.concept-card-polished > img {
  object-fit: contain;
  object-position: center;
  padding: 18px;
  filter: saturate(1.04) drop-shadow(0 16px 22px rgba(0, 0, 0, .38));
}

.concept-card-polished::after { background: linear-gradient(0deg, rgba(3, 8, 16, .92), transparent 64%); }

.intro-section,
.feature-section,
.trailer-section,
.gallery-section,
.concept-section,
.lore-section,
.follow-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 760px;
}

.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 360px;
}

html:not(.is-page-ready) .hero-media img,
html:not(.is-page-ready) .hero::after,
html:not(.is-page-ready) .hero-copy,
html:not(.is-page-ready) .hero-wordmark,
html:not(.is-page-ready) .status-dot {
  animation: none !important;
}

html:not(.is-page-ready) .hero-copy { opacity: 1; transform: none; }

html.is-page-ready .hero-media img { animation: hero-drift 18s ease-in-out infinite alternate; }
html.is-page-ready .hero::after { animation: comic-dots 22s linear infinite; }
html.is-page-ready .hero-copy { animation: comic-entry .82s var(--ease-zanoka) both; }
html.is-page-ready .hero-wordmark { animation: comic-wordmark 8s ease-in-out infinite; transform-origin: 28% 50%; }
html.is-page-ready .status-dot { animation: status-pulse 2.8s ease-in-out infinite; }

html.is-low-power .hero-media img,
html.is-low-power .hero::after,
html.is-low-power .hero-copy,
html.is-low-power .hero-wordmark,
html.is-low-power .status-dot { animation: none !important; }

html.is-low-power .hero-noise { opacity: .08; mix-blend-mode: normal; }

@supports (height: 100dvh) {
  .hero,
  .hero-content { min-height: min(920px, 100dvh); }
}

@media (min-width: 1800px) {
  :root { --max: 1360px; }
}

@media (min-width: 2600px) {
  :root { --max: 1500px; }
}

@media (max-width: 760px) {
  .elemental-boon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .elemental-boon-art { height: clamp(62px, 17vw, 96px); }
}

@media (max-width: 420px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .elemental-boon-card { padding-inline: 5px; }
  .elemental-boon-card strong { font-size: 9px; letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
  html.is-page-ready .hero-media img,
  html.is-page-ready .hero::after,
  html.is-page-ready .hero-copy,
  html.is-page-ready .hero-wordmark,
  html.is-page-ready .status-dot { animation: none !important; }
  .elemental-boon-card,
  .elemental-boon-art > img:first-child { transition: none; }
}

/* Hero-only alignment: the genre badge keeps its label optically centered at every width. */
.hero .hero-genre-badge {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
}

.hero .hero-genre-badge .eyebrow-line {
  align-self: center;
}

.hero .hero-genre-text {
  min-width: 0;
  text-align: center;
  line-height: 1.24;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .hero .hero-genre-badge {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px;
    width: 100%;
  }
}

/* Inline concept-to-frame comparisons keep each supplied polished crop beside its sketch. */
.concept-comparison-intro {
  max-width: 680px;
  margin: 36px 0 18px;
}

.concept-comparison-intro .card-label,
.concept-secondary-head .card-label { margin-bottom: 10px; }

.concept-comparison-intro h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -.04em;
  line-height: 1.02;
}

.concept-comparison-intro > p:last-child,
.concept-secondary-head > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.concept-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 28px;
}

.concept-pair {
  min-width: 0;
  padding: 15px;
  background: linear-gradient(145deg, rgba(12, 29, 52, .92), rgba(4, 10, 21, .96));
  border: 1px solid rgba(123, 239, 255, .24);
  border-radius: 14px 18px 12px 16px;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, .2), 0 20px 48px rgba(0, 0, 0, .22);
}

.concept-pair-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-bottom: 12px;
}

.concept-pair-heading span {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
}

.concept-pair-heading strong {
  min-width: 0;
  color: var(--text);
  font-family: var(--comic-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}

.concept-pair-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.concept-pair-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: #d7d1bf;
  border: 1px solid rgba(211, 190, 146, .34);
  border-radius: 9px 11px 8px 10px;
}

.concept-pair-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.concept-pair-trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.concept-pair-trigger:focus-visible {
  outline: 3px solid var(--comic-gold);
  outline-offset: -3px;
}

.concept-pair-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.concept-pair-sketch img {
  filter: saturate(.84) contrast(.98);
  transition: transform .45s var(--ease-zanoka), filter .45s ease;
}

.concept-pair-trigger:hover img,
.concept-pair-trigger:focus-visible img { filter: saturate(1) contrast(1.02); transform: scale(1.035); }

.concept-pair-polished {
  background: radial-gradient(circle at 50% 26%, rgba(123, 239, 255, .2), transparent 47%), linear-gradient(145deg, #102b46, #071322);
  border-color: rgba(123, 239, 255, .38);
}

.concept-pair-polished .concept-pair-art {
  background: radial-gradient(circle at 50% 58%, rgba(151, 118, 255, .16), transparent 52%);
}

.concept-pair-polished img {
  padding: 12%;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45));
}

.concept-pair-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 38%;
  background: linear-gradient(0deg, rgba(3, 8, 16, .88), transparent);
  content: "";
  pointer-events: none;
}

.concept-pair-card figcaption {
  position: absolute;
  right: 9px;
  bottom: 8px;
  left: 9px;
  z-index: 1;
  color: rgba(245, 247, 239, .78);
  font-family: var(--comic-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.concept-pair-polished figcaption { color: var(--comic-gold); }

.concept-pair-arrow {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--comic-gold);
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 16px rgba(255, 215, 122, .38);
}

.concept-secondary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 16px;
  padding-top: 26px;
  border-top: 1px solid rgba(150, 208, 255, .16);
}

.concept-secondary-head .card-label { margin: 0; }
.concept-secondary-head > p:last-child { max-width: 560px; }

html[dir="rtl"] .concept-pair-arrow { transform: scaleX(-1); }

@media (max-width: 950px) {
  .concept-pair-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .concept-comparison-intro { margin-top: 30px; }
  .concept-pair { padding: 12px; }
  .concept-secondary-head { display: block; }
  .concept-secondary-head > p:last-child { margin-top: 10px; }
}

@media (max-width: 420px) {
  .concept-pair-media { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 4px; }
  .concept-pair-card figcaption { right: 5px; bottom: 6px; left: 5px; font-size: 8px; letter-spacing: .06em; }
  .concept-pair-arrow { width: 18px; font-size: 15px; }
}

/* Isolate every artwork crop so an atlas cell can never bleed into the page. */
.sprite-crop,
.concept-pair-polished img,
.concept-card-polished > img,
.build-icon-strip img,
.elemental-boon-art > img:first-child,
.elemental-boon-echo {
  object-position: 50% 50%;
  object-fit: contain;
  contain: paint;
}

.concept-pair-polished,
.concept-pair-polished .concept-pair-art,
.concept-card-polished,
.build-icon-strip,
.elemental-boon-art {
  overflow: hidden;
  isolation: isolate;
}

/* Final symmetry pass shared by the standalone pages. */
:root {
  --ui-radius-lg: 18px;
  --ui-radius-md: 12px;
  --ui-radius-sm: 10px;
  --layout-gap: clamp(14px, 1.7vw, 24px);
}

.container {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
}

.site-header,
.site-nav,
.language-picker select,
.menu-toggle,
.eyebrow,
.button,
.trailer-tag,
.feature-grid,
.feature-card,
.gallery-card,
.concept-card,
.lore-panel,
.link-card,
.build-panel,
.concept-pair,
.concept-pair-card,
.concept-dialog-shell,
.concept-compare-card,
.concept-compare-art,
.concept-dialog-close,
.concept-hint {
  border-radius: var(--ui-radius-md);
}

.site-header,
.site-nav,
.feature-grid,
.feature-card,
.gallery-card,
.concept-card,
.lore-panel,
.link-card,
.build-panel,
.concept-pair,
.concept-pair-card,
.concept-dialog-shell,
.concept-compare-card,
.concept-compare-art {
  transform: none;
}

.site-nav > a:not(.nav-cta),
.site-nav .nav-cta,
.language-picker select,
.menu-toggle,
.button,
.trailer-tag,
.concept-dialog-close,
.concept-hint {
  border-radius: var(--ui-radius-sm);
}

.site-header { gap: var(--layout-gap); }
.brand-lockup { flex: 0 0 auto; }
.site-nav { flex: 1 1 auto; }
.language-picker,
.language-picker select { min-width: 0; }

.intro-grid,
.trailer-grid,
.follow-grid,
.lore-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.8vw, 56px);
  align-items: stretch;
}

.feature-section .section-heading-wide {
  grid-template-columns: minmax(120px, .8fr) minmax(0, 1.6fr) minmax(220px, .8fr);
  column-gap: var(--layout-gap);
}

.feature-grid { grid-auto-rows: minmax(286px, 1fr); }

.feature-index,
.card-label,
.section-heading h2::after {
  border-radius: var(--ui-radius-sm);
  transform: none;
}

.feature-card:hover .feature-index { transform: translateY(-1px) scale(1.03); }

.gallery-head {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gap);
}

.gallery-intro { max-width: none; }
.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.build-showcase {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gap);
}

.build-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-gap);
}

.build-panel-copy,
.build-icon-strip { align-self: center; }
.build-icon-strip { padding-left: var(--layout-gap); }

.link-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--layout-gap);
}

.link-card,
.lore-panel { height: 100%; }

.button:hover,
.feature-card:hover,
.link-card:hover,
.build-panel:hover,
.download-card:hover { transform: translateY(-2px); }

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

.feature-card:hover .feature-arrow,
.link-card:hover .link-arrow,
.footer-bottom nav a:hover,
.hero-meta span:hover { transform: translateY(-2px); }

.trailer-tag,
.concept-card-interactive .concept-hint,
.concept-card-interactive:hover .concept-hint,
.concept-dialog-close:hover,
.footer-bottom nav a::after,
.section-heading h2::after { transform: none; }

.eyebrow::after { transform: none; }
.footer-bottom nav a:hover::after { transform: scaleX(1); }
html[dir="rtl"] .eyebrow { transform: none; }

.concept-pair-media {
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  gap: 12px;
}

.concept-pair-card figcaption { right: 10px; left: 10px; }

@keyframes symmetric-entry {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes symmetric-wordmark {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px) scale(1.01); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation-name: symmetric-entry; }
  .hero-wordmark { animation-name: symmetric-wordmark; }
}

@media (max-width: 980px) {
  .build-showcase { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .container { width: calc(100% - 36px); }

  .announcement-bar { justify-content: center; padding-inline: 12px; }
  .transmission-label { max-width: calc(100% - 42px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .intro-grid,
  .trailer-grid,
  .follow-grid,
  .lore-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .feature-section .section-heading-wide,
  .gallery-head { display: block; }

  .feature-grid,
  .gallery-grid,
  .link-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .gallery-card-wide { grid-row: auto; }

  .build-showcase,
  .build-panel { grid-template-columns: 1fr; }

  .build-icon-strip {
    padding: var(--layout-gap) 0 0;
    border-top: 1px solid rgba(150, 208, 255, .18);
    border-left: 0;
  }

  .link-card,
  .lore-panel { height: auto; }

  .concept-pair-media {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 8px;
  }
}

@media (min-width: 1181px) {
  .site-nav { max-width: 100%; }
}

@media (max-width: 420px) {
  .concept-pair-media {
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    gap: 5px;
  }
}

/* Keep the loading animation symmetrical even after the ready-state rules win. */
@media (prefers-reduced-motion: no-preference) {
  html.is-page-ready .hero-copy { animation: symmetric-entry .82s var(--ease-zanoka) both; }
  html.is-page-ready .hero-wordmark { animation: symmetric-wordmark 8s ease-in-out infinite; transform-origin: 50% 50%; }
}

/* Shared finishing pass: readable labels, stable navigation and contained artwork.
   Keep this block identical in the landing page and standalone-page stylesheet. */
:root {
  --control-height: 48px;
  --header-offset: 112px;
}
html { scrollbar-gutter: stable; }
main > section[id] { scroll-margin-top: var(--header-offset); }
::selection { color: var(--ink); background: var(--gold); }
[hidden] { display: none !important; }

.site-header {
  gap: clamp(8px, 1.2vw, 18px);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.site-nav { min-width: 0; justify-content: flex-start; }
.site-nav > a:not(.nav-cta), .site-nav > a.nav-cta {
  min-width: var(--control-height);
  min-height: var(--control-height);
  height: auto;
  padding: 10px clamp(8px, .7vw, 12px);
  font-size: .875rem;
  line-height: 1.4;
  letter-spacing: .015em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.site-nav .nav-cta { margin: 0; }
.language-picker { margin-left: 0; margin-inline-start: auto; height: auto; }
.language-picker select {
  min-height: 52px;
  height: auto;
  padding-block: 10px;
  font-size: .875rem;
  line-height: 1.5;
}
.menu-toggle { min-height: var(--control-height); font-size: .875rem; }
.site-nav a:focus-visible, .language-picker select:focus-visible { outline-offset: -3px; }

.eyebrow {
  gap: .65rem;
  padding: .5rem .75rem;
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .12em;
  text-align: start;
}
.eyebrow::after { display: none; }
.hero .hero-genre-badge {
  min-height: 44px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  padding: 10px 14px;
  line-height: 1.5;
}
.hero .hero-genre-text { min-width: 0; text-align: start; line-height: inherit; }
.feature-section .section-heading-wide {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "label label" "title copy";
  gap: 20px clamp(24px, 4vw, 64px);
  align-items: start;
}
.feature-section .section-heading-wide > .eyebrow { grid-area: label; margin: 0; }
.feature-section .section-heading-wide > h2 { grid-area: title; margin: 0; }
.feature-section .section-heading-wide > p:last-child { grid-area: copy; align-self: center; margin: 0; }
.card-label, .concept-compare-card > figcaption { font-size: .75rem; line-height: 1.5; }
.elemental-boon-card strong { font-size: .75rem; line-height: 1.5; white-space: normal; }
.build-panel p:not(.card-label) { font-size: .9375rem; line-height: 1.65; }
.hero-hook, .section p:not(.eyebrow):not(.card-label) { overflow-wrap: break-word; }
.hero-content { padding-top: clamp(156px, 12vw, 192px); }

/* Separate captions from the image area instead of covering feet and details. */
.concept-pair-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.concept-pair-art { min-height: 0; }
.concept-pair-sketch img { object-fit: contain; }
.concept-pair-card::after { display: none; }
.concept-pair-card figcaption {
  position: static;
  display: grid;
  place-items: center;
  min-height: 3.75rem;
  padding: 8px;
  background: #081323;
  color: var(--text);
  font-size: .75rem;
  letter-spacing: .04em;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.concept-pair-polished figcaption { color: var(--gold); }
.concept-pair-trigger:hover img, .concept-pair-trigger:focus-visible img { transform: none; }

.concept-dialog {
  padding: clamp(12px, 3vw, 24px);
  overscroll-behavior: contain;
}
.concept-dialog-shell {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: clamp(16px, 3vw, 32px);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.concept-dialog-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 12px;
  background: #091528;
  border-bottom: 1px solid var(--line);
}
.concept-dialog-header > div { min-width: 0; }
.concept-dialog-header .eyebrow { margin-bottom: 8px; }
.concept-dialog-header h2 { line-height: 1.15; overflow-wrap: anywhere; }
.concept-dialog-credit { font-size: .875rem; }
.footer-bottom nav { flex-wrap: wrap; }
.footer-bottom nav a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.link-card-email { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }

/* Keep the key art sharp and stationary; retain small planet/wordmark animations. */
.hero-media img, html.is-page-ready .hero-media img,
.hero::after, html.is-page-ready .hero::after,
.hero-copy, html.is-page-ready .hero-copy { animation: none !important; }
html.is-page-hidden *, html.is-page-hidden *::before,
html.is-page-hidden *::after { animation-play-state: paused !important; }

html[dir="rtl"] .eyebrow, html[dir="rtl"] .card-label,
html[dir="rtl"] .site-nav a, html[dir="rtl"] .button,
html[dir="rtl"] .concept-pair-card figcaption,
html[dir="rtl"] .concept-compare-card > figcaption,
html[dir="rtl"] .elemental-boon-card strong {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.7;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 {
  font-family: inherit;
  letter-spacing: normal;
  line-height: 1.35;
}
html[lang="hi"] .eyebrow, html[lang="ta"] .eyebrow,
html[lang="zh"] .eyebrow, html[lang="ja"] .eyebrow { letter-spacing: normal; }

@media (max-width: 1180px) {
  .site-nav {
    top: calc(100% + 8px);
    max-height: calc(100vh - var(--header-offset) - 28px);
    max-height: calc(100dvh - var(--header-offset) - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav > a:not(.nav-cta) { justify-content: flex-start; padding-inline: 14px; }
  .site-nav .nav-cta { margin: 4px 0; }
  .language-picker { margin: 0; }
  .language-picker select { width: 100%; }
}
@media (max-width: 760px) {
  .hero-hook { font-size: 1rem; line-height: 1.65; }
  .feature-section .section-heading-wide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "title" "copy";
  }
}
@media (max-width: 600px) {
  .concept-compare-grid { grid-template-columns: minmax(0, 1fr); }
  .concept-dialog-header .eyebrow { font-size: .75rem; }
  .concept-compare-art { aspect-ratio: 1 / 1; }
}
@media (max-height: 540px) and (min-width: 601px) {
  .concept-dialog-header .eyebrow { display: none; }
  .concept-dialog-header h2 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Micro-polish pass: equalize controls and keep dense artwork rows calm at narrow widths. */
:where(a, button, select) { touch-action: manipulation; }
:where(a, button, select):focus-visible {
  outline: 3px solid var(--comic-gold);
  outline-offset: 3px;
}

.hero .hero-genre-text {
  justify-self: stretch;
  text-align: center;
}

.hero-actions {
  align-items: stretch;
  flex-wrap: wrap;
}

.hero-actions .button {
  min-width: min(100%, 240px);
}

.hero-meta {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  line-height: 1.35;
}

.elemental-boon-card {
  display: grid;
  grid-template-rows: auto minmax(2.7em, auto);
  align-items: stretch;
}

.elemental-boon-art { contain: layout paint; }

.elemental-boon-card strong {
  display: grid;
  place-items: center;
  min-height: 2.7em;
  margin-top: 4px;
  line-height: 1.35;
  white-space: normal;
}

@media (max-width: 560px) {
  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 360px);
  }

  .hero-actions .button {
    width: 100%;
    min-width: 0;
  }

  .hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 480px;
  }

  .hero-meta span {
    min-width: 0;
    justify-content: flex-start;
    min-height: 48px;
    padding-inline: 10px;
  }

  .build-panel { min-height: 0; padding: 20px; }
}

@media (max-width: 370px) {
  .hero-meta { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1181px) {
  /* Keep the language control adjacent to the tabs instead of creating a blank push-gap. */
  .site-nav .language-picker { margin-inline-start: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-meta span:hover,
  .button:hover,
  .feature-card:hover,
  .link-card:hover,
  .build-panel:hover,
  .download-card:hover { transform: none; }
}

/* Four-square gameplay palette: each pillar gets its own readable accent while
   staying inside the blue, emerald, maroon, and purple Zanoka spectrum. */
.feature-grid > .feature-card {
  --feature-accent: #72eaff;
  --feature-rgb: 114, 234, 255;
  --feature-deep: rgba(17, 45, 78, .99);
  --feature-base: rgba(6, 16, 31, .99);
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(var(--feature-rgb), .17), transparent 43%),
    linear-gradient(145deg, var(--feature-deep), var(--feature-base));
  box-shadow: inset 0 1px 0 rgba(var(--feature-rgb), .13), inset 0 0 0 1px rgba(var(--feature-rgb), .06);
}

.feature-grid > .feature-card:nth-child(2) {
  --feature-accent: #73efc6;
  --feature-rgb: 115, 239, 198;
  --feature-deep: rgba(10, 61, 56, .99);
  --feature-base: rgba(5, 23, 30, .99);
}

.feature-grid > .feature-card:nth-child(3) {
  --feature-accent: #ff8b9b;
  --feature-rgb: 255, 139, 155;
  --feature-deep: rgba(96, 25, 47, .99);
  --feature-base: rgba(30, 8, 21, .99);
}

.feature-grid > .feature-card:nth-child(4) {
  --feature-accent: #c3a5ff;
  --feature-rgb: 195, 165, 255;
  --feature-deep: rgba(55, 30, 104, .99);
  --feature-base: rgba(15, 10, 39, .99);
}

.feature-grid > .feature-card:hover {
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(var(--feature-rgb), .24), transparent 46%),
    linear-gradient(145deg, var(--feature-deep), var(--feature-base));
  box-shadow: inset 0 1px 0 rgba(var(--feature-rgb), .18), 0 18px 42px rgba(var(--feature-rgb), .14);
}

.feature-grid > .feature-card::before {
  background: linear-gradient(var(--feature-accent), transparent 75%);
  box-shadow: 0 0 12px rgba(var(--feature-rgb), .22);
}

.feature-grid > .feature-card:hover::before { box-shadow: 0 0 20px rgba(var(--feature-rgb), .58); }
.feature-grid > .feature-card::after { background-image: radial-gradient(circle, rgba(var(--feature-rgb), .78) 1px, transparent 1.25px); }

.feature-grid > .feature-card .feature-index {
  color: var(--feature-accent);
  background: rgba(var(--feature-rgb), .1);
  border-color: rgba(var(--feature-rgb), .68);
  box-shadow: 2px 2px 0 var(--comic-ink), 0 0 14px rgba(var(--feature-rgb), .18);
}

.feature-grid > .feature-card .card-label {
  color: var(--feature-accent);
  background: rgba(var(--feature-rgb), .08);
  border-color: rgba(var(--feature-rgb), .3);
}

.feature-grid > .feature-card .feature-arrow { color: var(--feature-accent); }

/* Typography refinement: asset-free display rhythm, readable copy, and locale-safe wrapping. */
:root {
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: ui-rounded, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

body {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

h1,
h2,
h3,
.button,
.eyebrow,
.card-label,
.feature-index,
.trailer-tag,
.link-card-type,
.footer-top-link,
.site-nav a {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1,
h2,
h3 {
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.hero h1 {
  max-width: 17ch;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.hero-hook {
  max-width: 38rem;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
}

.section-heading h2,
.page-hero h1 {
  line-height: .99;
  letter-spacing: -.06em;
}

.feature-card h3 {
  letter-spacing: -.045em;
  line-height: 1.04;
}

body :where(p, li, figcaption, .hero-meta span, .link-card-email) {
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* Preserve the deliberate script-aware stacks used by the language switcher. */
html[lang="ur"] body,
html[lang="hi"] body,
html[lang="sd"] body,
html[lang="bal"] body,
html[lang="ps"] body,
html[lang="ta"] body {
  font-family: "Nirmala UI", "Latha", "Segoe UI", system-ui, sans-serif;
}

html[lang="ar"] body,
html[lang="fa"] body,
html[lang="ar-eg"] body {
  font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
}

html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3,
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  letter-spacing: normal;
}

html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3 {
  line-height: 1.18;
}

html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3 {
  line-height: 1.14;
}

html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3 {
  line-height: 1.22;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  font-family: inherit;
  line-height: 1.35;
}

@media (max-width: 600px) {
  h1,
  h2,
  h3 { letter-spacing: -.035em; }

  .hero h1 {
    max-width: 15ch;
    font-size: clamp(2.1rem, 8.5vw, 2.55rem);
    line-height: 1.02;
  }

  .hero-hook {
    font-size: clamp(1rem, 4.3vw, 1.15rem);
  }

  .section-heading h2,
  .page-hero h1 {
    line-height: 1.04;
  }

  .feature-card h3 {
    font-size: clamp(1.4rem, 6vw, 1.65rem);
    letter-spacing: -.035em;
  }
}

@media (max-width: 600px) {
  html[lang="zh"] h1,
  html[lang="zh"] h2,
  html[lang="zh"] h3,
  html[lang="ja"] h1,
  html[lang="ja"] h2,
  html[lang="ja"] h3,
  html[lang="ko"] h1,
  html[lang="ko"] h2,
  html[lang="ko"] h3,
  html[lang="hi"] h1,
  html[lang="hi"] h2,
  html[lang="hi"] h3,
  html[dir="rtl"] h1,
  html[dir="rtl"] h2,
  html[dir="rtl"] h3 {
    letter-spacing: normal;
  }

  html[dir="rtl"] h1,
  html[dir="rtl"] h2,
  html[dir="rtl"] h3 { line-height: 1.3; }
}

/* Urdu typography: keep the rounded display philosophy while using a
   script-capable, local-first stack and generous Nastaliq breathing room. */
:root {
  --font-urdu-body: "Noto Nastaliq Urdu", "Nirmala UI", "Segoe UI", Tahoma, ui-serif, serif;
  --font-urdu-display: "Noto Nastaliq Urdu", "Nirmala UI", "Segoe UI", Tahoma, ui-serif, serif;
  --font-urdu-ui: "Nirmala UI", "Segoe UI", Tahoma, ui-sans-serif, sans-serif;
}

html[lang="ur"] body {
  font-family: var(--font-urdu-body);
  font-size: 1.03rem;
  line-height: 2.02;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
}

html[lang="ur"] h1,
html[lang="ur"] h2,
html[lang="ur"] h3 {
  font-family: var(--font-urdu-display);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.45;
  text-wrap: pretty;
  -webkit-text-stroke: 0;
}

html[lang="ur"] .button,
html[lang="ur"] .eyebrow,
html[lang="ur"] .card-label,
html[lang="ur"] .trailer-tag,
html[lang="ur"] .link-card-type,
html[lang="ur"] .footer-top-link,
html[lang="ur"] .site-nav a,
html[lang="ur"] .concept-pair-card figcaption,
html[lang="ur"] .concept-compare-card > figcaption,
html[lang="ur"] .elemental-boon-card strong {
  font-family: var(--font-urdu-ui);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.85;
  text-transform: none;
}

html[lang="ur"] .feature-index {
  font-family: var(--font-urdu-ui);
  letter-spacing: .04em;
}

html[lang="ur"] .hero h1 {
  max-width: 15ch;
  font-size: clamp(2.35rem, 5vw, 4.2rem);
  line-height: 1.38;
}

html[lang="ur"] .hero-hook {
  max-width: 35rem;
  font-size: clamp(1.06rem, 1.55vw, 1.24rem);
  line-height: 2;
}

html[lang="ur"] .section-heading h2,
html[lang="ur"] .page-hero h1 {
  line-height: 1.4;
}

html[lang="ur"] .feature-card h3 {
  line-height: 1.5;
}

html[lang="ur"] .hero-meta span,
html[lang="ur"] .link-card-email,
html[lang="ur"] code {
  font-family: var(--font-urdu-ui);
}

html[lang="ur"] .link-card-email,
html[lang="ur"] code {
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 600px) {
  html[lang="ur"] body {
    font-size: 1rem;
    line-height: 1.95;
  }

  html[lang="ur"] .hero h1 {
    max-width: 100%;
    font-size: clamp(2.2rem, 10.5vw, 3.1rem);
    line-height: 1.45;
  }

  html[lang="ur"] .hero-hook {
    font-size: 1.05rem;
    line-height: 1.95;
  }

  html[lang="ur"] .section-heading h2,
  html[lang="ur"] .page-hero h1 {
    line-height: 1.45;
  }

  html[lang="ur"] .feature-card h3 {
    font-size: clamp(1.45rem, 7vw, 1.8rem);
    line-height: 1.5;
  }

  html[lang="ur"] .button,
  html[lang="ur"] .site-nav a {
    min-height: 52px;
  }
}

/* Urdu layout finish: keep script shaping intact and prevent arbitrary
   character breaks from disturbing Nastaliq words. */
html[lang="ur"] :where(h1, h2, h3, p, li, figcaption, .hero-meta span, .feature-card h3, .link-card strong, .button, .site-nav a, .card-label, .eyebrow) {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

html[lang="ur"] .button,
html[lang="ur"] .site-nav a,
html[lang="ur"] .language-picker select,
html[lang="ur"] .skip-link,
html[lang="ur"] .menu-toggle {
  font-family: var(--font-urdu-ui);
  direction: rtl;
  text-align: center;
  unicode-bidi: plaintext;
}

html[lang="ur"] .language-picker select {
  padding-right: 12px;
  padding-left: 28px;
  text-align: right;
}

html[lang="ur"] .hero-actions {
  justify-content: flex-start;
}

html[lang="ur"] .hero-meta {
  justify-content: flex-start;
  text-align: right;
}

html[lang="ur"] .hero-meta span {
  line-height: 1.75;
  text-align: right;
}

html[lang="ur"] .section-heading h2::after {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

html[lang="ur"] .link-card strong,
html[lang="ur"] .concept-pair-heading strong {
  font-family: var(--font-urdu-display);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.55;
}

html[lang="ur"] .concept-pair-heading,
html[lang="ur"] .concept-secondary-head,
html[lang="ur"] .gallery-head,
html[lang="ur"] .download-head {
  text-align: right;
}

html[lang="ur"] .link-card-email,
html[lang="ur"] code {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
}

@media (max-width: 600px) {
  html[lang="ur"] .hero-actions {
    width: min(100%, 360px);
  }

  html[lang="ur"] .hero-meta {
    gap: 8px;
  }

  html[lang="ur"] .hero-meta span {
    min-height: 48px;
    padding: 7px 10px;
  }

  html[lang="ur"] .eyebrow,
  html[lang="ur"] .card-label,
  html[lang="ur"] .trailer-tag {
    max-width: 100%;
    line-height: 1.7;
  }
}

/* Hero source-quality pass: let the browser use the cleanest available
   source without changing the established crop or revealing the lower edge. */
.hero-media picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero-media img {
  image-rendering: auto;
  transform: none;
}

@media (min-width: 1181px) {
  /* Urdu labels are shorter than the English set; keep the nav frame tight
     instead of stretching an empty tab surface across the header. */
  html[lang="ur"] .site-header {
    justify-content: flex-start;
    gap: 10px;
  }

  html[lang="ur"] .site-nav {
    flex: 0 1 auto;
    width: fit-content;
    max-width: calc(100% - 170px);
    justify-content: flex-start;
  }

  html[lang="ur"] .language-picker {
    margin-right: 5px;
    margin-left: 0;
    padding-right: 8px;
    padding-left: 0;
    border-right: 1px solid rgba(157, 220, 255, .2);
    border-left: 0;
  }
}

/* Urdu RTL alignment pass: mirror directional affordances and keep mixed
   Urdu/Latin content balanced inside every major surface. */
html[lang="ur"] .site-nav > a:not(.nav-cta) {
  justify-content: flex-end;
  text-align: right;
}

html[lang="ur"] .feature-card,
html[lang="ur"] .feature-card > div,
html[lang="ur"] .build-panel-copy,
html[lang="ur"] .concept-dialog-header > div,
html[lang="ur"] .concept-dialog-credit,
html[lang="ur"] .art-credit {
  text-align: right;
}

html[lang="ur"] .feature-card::before {
  right: 0;
  left: auto;
  background: linear-gradient(180deg, var(--feature-accent, var(--blue)), transparent 75%);
}

html[lang="ur"] .feature-arrow,
html[lang="ur"] .link-arrow,
html[lang="ur"] .concept-pair-arrow,
html[lang="ur"] .nav-cta > span[aria-hidden="true"],
html[lang="ur"] .hero-actions .button > span[aria-hidden="true"],
html[lang="ur"] .text-link > span[aria-hidden="true"],
html[lang="ur"] .footer-top-link > span[aria-hidden="true"] {
  display: inline-block;
  transform: scaleX(-1);
}

html[lang="ur"] .feature-card:hover .feature-arrow,
html[lang="ur"] .link-card:hover .link-arrow {
  transform: translateY(-2px) scaleX(-1);
}

html[lang="ur"] .link-card {
  padding-right: 22px;
  padding-left: 48px;
  text-align: right;
}

html[lang="ur"] .link-card-type,
html[lang="ur"] .link-card strong {
  display: block;
  text-align: right;
}

html[lang="ur"] .link-arrow {
  right: auto;
  left: 20px;
}

html[lang="ur"] .link-card-email {
  direction: ltr;
  text-align: right;
  unicode-bidi: isolate;
}

html[lang="ur"] .section-heading h2::after {
  background: linear-gradient(270deg, var(--comic-cyan), var(--comic-violet));
}

html[lang="ur"] .feature-section .section-heading-wide > p:last-child,
html[lang="ur"] .gallery-intro,
html[lang="ur"] .concept-secondary-head,
html[lang="ur"] .concept-compare-card > figcaption,
html[lang="ur"] .footer-top,
html[lang="ur"] .footer-bottom {
  text-align: right;
}

html[lang="ur"] .build-icon-strip {
  padding-right: var(--layout-gap);
  padding-left: 0;
  border-right: 1px solid rgba(150, 208, 255, .18);
  border-left: 0;
}

html[lang="ur"] .hero-meta span,
html[lang="ur"] .hero .hero-genre-text,
html[lang="ur"] .link-card-email {
  unicode-bidi: plaintext;
}

@media (max-width: 760px) {
  html[lang="ur"] .footer-top-link,
  html[lang="ur"] .footer-note {
    text-align: right;
  }

  html[lang="ur"] .footer-bottom nav {
    justify-content: flex-start;
  }

  html[lang="ur"] .build-icon-strip {
    padding-right: 0;
    border-right: 0;
    border-top: 1px solid rgba(150, 208, 255, .18);
  }
}

/* Lore signal log: a compact archival beat for the game's deeper mystery. */
.lore-signal-log {
  margin-top: 26px;
  padding: 15px 17px 16px;
  border: 1px solid rgba(123, 239, 255, .24);
  border-left: 3px solid var(--gold);
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(135deg, rgba(6, 24, 41, .82), rgba(10, 15, 34, .68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 30px rgba(0, 0, 0, .16);
}

.lore-signal-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
  color: var(--gold);
  font-family: var(--font-label);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lore-signal-topline span:last-child {
  color: rgba(210, 232, 255, .58);
  font-size: .62rem;
  letter-spacing: .16em;
}

.lore-zeta-treatment {
  position: relative;
  isolation: isolate;
  min-height: 94px;
  margin: 0 0 15px;
  overflow: hidden;
  border: 1px solid rgba(123, 239, 255, .2);
  border-radius: var(--ui-radius-sm);
  background:
    radial-gradient(circle at 50% 50%, rgba(105, 190, 255, .16), transparent 30%),
    linear-gradient(135deg, rgba(4, 16, 34, .88), rgba(16, 8, 42, .72));
}

.lore-zeta-treatment::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .55;
  background-image: radial-gradient(circle, rgba(175, 226, 255, .55) .8px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.lore-zeta-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border: 1px solid rgba(123, 239, 255, .28);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.lore-zeta-orbit-a {
  width: 148px;
  height: 62px;
  transform: translate(-50%, -50%) rotate(-17deg);
}

.lore-zeta-orbit-b {
  width: 86px;
  height: 126px;
  border-color: rgba(195, 165, 255, .24);
  transform: translate(-50%, -50%) rotate(63deg);
}

.lore-zeta-star {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-radius: 50%;
  background: #effbff;
  box-shadow: 0 0 0 3px rgba(123, 239, 255, .08), 0 0 18px rgba(123, 239, 255, .82);
}

.lore-zeta-star-a {
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -54px;
}

.lore-zeta-star-b {
  width: 6px;
  height: 6px;
  margin: 12px 0 0 45px;
  background: #e2d5ff;
  box-shadow: 0 0 0 3px rgba(195, 165, 255, .08), 0 0 16px rgba(195, 165, 255, .72);
}

.lore-zeta-scan {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -16%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(123, 239, 255, .78), transparent);
  box-shadow: 0 0 13px rgba(123, 239, 255, .42);
}

.lore-zeta-caption {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: rgba(255, 215, 122, .78);
  font-family: var(--font-label);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.4;
}

@keyframes zeta-orbit-drift {
  from { transform: translate(-50%, -50%) rotate(-17deg); }
  to { transform: translate(-50%, -50%) rotate(343deg); }
}

@keyframes zeta-orbit-drift-b {
  from { transform: translate(-50%, -50%) rotate(63deg); }
  to { transform: translate(-50%, -50%) rotate(-297deg); }
}

@keyframes zeta-star-pulse {
  0%, 100% { opacity: .72; filter: brightness(.9); }
  50% { opacity: 1; filter: brightness(1.3); }
}

@keyframes zeta-star-pulse-b {
  0%, 100% { opacity: .56; }
  50% { opacity: 1; }
}

@keyframes zeta-signal-sweep {
  0%, 18% { left: -16%; opacity: 0; }
  32% { opacity: .85; }
  72% { opacity: .55; }
  100% { left: 116%; opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .lore-zeta-orbit-a { animation: zeta-orbit-drift 16s linear infinite; }
  .lore-zeta-orbit-b { animation: zeta-orbit-drift-b 21s linear infinite; }
  .lore-zeta-star-a { animation: zeta-star-pulse 4.8s ease-in-out infinite; }
  .lore-zeta-star-b { animation: zeta-star-pulse-b 6.4s ease-in-out infinite -1.3s; }
  .lore-zeta-scan { animation: zeta-signal-sweep 9s ease-in-out infinite; }
}

html.is-low-power .lore-zeta-orbit,
html.is-low-power .lore-zeta-star,
html.is-low-power .lore-zeta-scan {
  animation: none !important;
}

.lore-signal-log p {
  margin: 0;
  color: rgba(218, 235, 255, .82);
  font-size: .92rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.lore-panel .lore-turn {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid rgba(255, 215, 122, .55);
  color: rgba(230, 241, 255, .9);
}

.lore-panel .lore-close {
  margin-top: 19px;
  margin-bottom: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.5;
  text-wrap: balance;
}

.lore-sequence {
  display: grid;
  gap: 8px;
  max-width: 330px;
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.lore-sequence li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(157, 220, 255, .16);
}

.lore-sequence li:last-child { border-bottom: 0; }

.lore-sequence li > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(123, 239, 255, .45);
  border-radius: 50%;
  color: var(--comic-cyan);
  font-family: var(--font-label);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.lore-sequence li:nth-child(2) > span {
  border-color: rgba(255, 215, 122, .5);
  color: var(--gold);
}

.lore-sequence li:nth-child(3) > span {
  border-color: rgba(195, 165, 255, .5);
  color: var(--comic-violet);
}

.lore-sequence strong,
.lore-sequence small {
  display: block;
}

.lore-sequence strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: .88rem;
  letter-spacing: .04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.lore-sequence small {
  margin-top: 3px;
  color: rgba(210, 232, 255, .64);
  font-size: .78rem;
  line-height: 1.5;
}

html[lang="ur"] .lore-signal-log {
  border-right: 3px solid var(--gold);
  border-left: 1px solid rgba(123, 239, 255, .24);
  text-align: right;
}

html[lang="ur"] .lore-zeta-caption {
  right: auto;
  left: 14px;
}

html[lang="ur"] .lore-panel .lore-turn {
  padding-right: 16px;
  padding-left: 0;
  border-right: 2px solid rgba(255, 215, 122, .55);
  border-left: 0;
}

html[lang="ur"] .lore-panel .lore-close {
  letter-spacing: 0;
  text-align: right;
}

html[dir="rtl"] .lore-sequence {
  text-align: right;
}

html[dir="rtl"] .lore-sequence li {
  grid-template-columns: minmax(0, 1fr) 34px;
}

html[dir="rtl"] .lore-sequence li > span {
  grid-column: 2;
  grid-row: 1;
}

html[dir="rtl"] .lore-sequence li > div {
  grid-column: 1;
  grid-row: 1;
}

/* Stay connected palette: every destination gets a distinct, readable signal
   color while the shared card geometry keeps the grid symmetrical. */
.follow-section .link-grid > .link-card {
  --link-accent: #72eaff;
  --link-rgb: 114, 234, 255;
  --link-deep: rgba(17, 61, 86, .9);
  --link-base: rgba(7, 22, 37, .94);
  --link-hover-deep: rgba(25, 92, 116, .96);
  --link-hover-base: rgba(10, 32, 50, .96);
  overflow: hidden;
  background-color: var(--link-base);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(var(--link-rgb), .3), transparent 58%),
    linear-gradient(145deg, var(--link-deep), var(--link-base));
  border-color: rgba(var(--link-rgb), .62);
  border-top: 3px solid var(--link-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 26px rgba(var(--link-rgb), .08), 4px 5px 0 rgba(0, 0, 0, .22);
}

.follow-section .link-grid > .link-card.link-card-steam {
  --link-accent: #ffd77a;
  --link-rgb: 255, 215, 122;
  --link-deep: rgba(100, 67, 25, .92);
  --link-base: rgba(31, 24, 27, .95);
  --link-hover-deep: rgba(145, 96, 30, .96);
  --link-hover-base: rgba(46, 31, 31, .96);
}

.follow-section .link-grid > .link-card.link-card-youtube {
  --link-accent: #ff7180;
  --link-rgb: 255, 113, 128;
  --link-deep: rgba(91, 27, 46, .92);
  --link-base: rgba(30, 11, 27, .95);
  --link-hover-deep: rgba(132, 35, 59, .96);
  --link-hover-base: rgba(45, 14, 34, .96);
}

.follow-section .link-grid > .link-card.link-card-discord {
  --link-accent: #b6a1ff;
  --link-rgb: 182, 161, 255;
  --link-deep: rgba(60, 38, 105, .92);
  --link-base: rgba(20, 13, 45, .95);
  --link-hover-deep: rgba(86, 51, 143, .96);
  --link-hover-base: rgba(30, 18, 65, .96);
}

.follow-section .link-grid > .link-card.link-card-x {
  --link-accent: #c7d6e8;
  --link-rgb: 199, 214, 232;
  --link-deep: rgba(39, 60, 78, .92);
  --link-base: rgba(12, 22, 34, .95);
  --link-hover-deep: rgba(59, 84, 105, .96);
  --link-hover-base: rgba(18, 31, 46, .96);
}

.follow-section .link-grid > .link-card.link-card-instagram {
  --link-accent: #ff91d5;
  --link-rgb: 255, 145, 213;
  --link-deep: rgba(94, 30, 83, .92);
  --link-base: rgba(31, 12, 41, .95);
  --link-hover-deep: rgba(136, 42, 111, .96);
  --link-hover-base: rgba(48, 16, 59, .96);
}

.follow-section .link-grid > .link-card.link-card-press {
  --link-accent: #72eaff;
  --link-rgb: 114, 234, 255;
  --link-deep: rgba(17, 70, 88, .92);
  --link-base: rgba(7, 25, 39, .95);
  --link-hover-deep: rgba(24, 101, 123, .96);
  --link-hover-base: rgba(9, 38, 56, .96);
}

.follow-section .link-grid > .link-card.link-card-contact {
  --link-accent: #73efc6;
  --link-rgb: 115, 239, 198;
  --link-deep: rgba(15, 75, 63, .92);
  --link-base: rgba(6, 28, 33, .95);
  --link-hover-deep: rgba(22, 111, 87, .96);
  --link-hover-base: rgba(8, 43, 42, .96);
}

.follow-section .link-grid > .link-card.link-card-art {
  --link-accent: #ffad6e;
  --link-rgb: 255, 173, 110;
  --link-deep: rgba(98, 46, 21, .92);
  --link-base: rgba(33, 15, 26, .95);
  --link-hover-deep: rgba(145, 65, 25, .96);
  --link-hover-base: rgba(49, 20, 31, .96);
}

.follow-section .link-grid > .link-card .link-card-type,
.follow-section .link-grid > .link-card .link-arrow {
  color: var(--link-accent);
}

.follow-section .link-grid > .link-card .link-card-email {
  color: rgba(var(--link-rgb), .78);
}

.follow-section .link-grid > .link-card:hover,
.follow-section .link-grid > .link-card:focus-visible {
  background-image:
    radial-gradient(circle at 100% 0%, rgba(var(--link-rgb), .42), transparent 62%),
    linear-gradient(145deg, var(--link-hover-deep), var(--link-hover-base));
  border-color: var(--link-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 30px rgba(var(--link-rgb), .14), 5px 7px 0 rgba(0, 0, 0, .28), 0 16px 38px rgba(var(--link-rgb), .22);
}

html[lang="ur"] .lore-signal-topline {
  flex-direction: row-reverse;
  letter-spacing: 0;
  text-transform: none;
}

html[lang="ur"] .lore-signal-topline span:last-child {
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .lore-signal-topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  html[lang="ur"] .lore-signal-topline {
    align-items: flex-end;
  }
}

/* Static space accents: the page stays calm and dark while a few non-repeating
   planetary and nebula glows add depth to otherwise empty canvas areas. */
html {
  background: #020611;
}

body {
  position: relative;
  isolation: isolate;
  background-color: #020611;
  background-image:
    radial-gradient(circle at center, rgba(223, 250, 255, .88) 0 1.2%, rgba(114, 194, 255, .82) 2.5%, rgba(42, 92, 174, .62) 6.6%, rgba(8, 25, 67, .28) 14%, transparent 28%),
    radial-gradient(ellipse at center, transparent 0 20%, rgba(125, 237, 255, .24) 20.3% 20.8%, transparent 21.4% 31%, rgba(177, 148, 255, .14) 31.2% 31.7%, transparent 32.3%),
    radial-gradient(ellipse at center, rgba(106, 73, 223, .1), transparent 70%),
    radial-gradient(ellipse at center, rgba(0, 199, 255, .08), transparent 70%),
    linear-gradient(180deg, #020611 0%, #050b18 48%, #020611 100%);
  background-position: calc(100% + 110px) -150px, calc(100% + 110px) -150px, -230px 46%, calc(100% + 130px) 84%, 0 0;
  background-size: 720px 720px, 720px 720px, 760px 520px, 640px 520px, 100% 100%;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Keep the cosmic accents behind readable, mostly solid section surfaces. */
.intro-section {
  background:
    radial-gradient(circle at 76% 18%, rgba(86, 87, 186, .08), transparent 33%),
    linear-gradient(180deg, rgba(8, 17, 33, .86), rgba(7, 16, 31, .9));
}

.feature-section,
.gallery-section,
.concept-section {
  background: linear-gradient(180deg, rgba(5, 10, 20, .92), rgba(3, 8, 17, .95));
}

.trailer-section {
  background: linear-gradient(180deg, rgba(7, 16, 31, .86), rgba(8, 17, 33, .9));
}

.lore-section {
  background: rgba(7, 16, 31, .9);
}

.follow-section {
  background: linear-gradient(180deg, rgba(8, 17, 33, .88), rgba(5, 9, 21, .93));
}

.site-footer,
.page-body {
  background: rgba(2, 5, 12, .95);
}

@media (max-width: 760px) {
  body {
    background-position: calc(100% + 180px) -105px, calc(100% + 180px) -105px, -220px 47%, calc(100% + 160px) 84%, 0 0;
    background-size: 500px 500px, 500px 500px, 520px 380px, 440px 360px, 100% 100%;
  }
}

/* Final micro-polish: normalize browser rendering, preserve tab rhythm at
   desktop widths, and keep touch input free from sticky hover artifacts. */
html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-offset, 112px);
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-x: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.site-header,
.site-nav,
.hero-copy,
.hero-meta span,
.lore-panel,
.concept-dialog {
  -webkit-backdrop-filter: blur(14px);
}

.site-nav > a:not(.nav-cta),
.site-nav > a.nav-cta {
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s var(--ease-zanoka);
}

@media (min-width: 1181px) {
  .site-nav > a:not(.nav-cta),
  .site-nav > a.nav-cta {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

:where(.button, .nav-cta, .menu-toggle, .play-button, .footer-top-link, .link-card):active {
  transform: translateY(1px);
}

@media (hover: none) {
  .hero-meta span:hover,
  .button:hover,
  .feature-card:hover,
  .link-card:hover,
  .build-panel:hover,
  .download-card:hover {
    transform: none;
  }

  .button:hover::after {
    transform: rotate(22deg) translateX(-220%);
  }

  .concept-card-interactive:hover .concept-trigger img {
    filter: saturate(.86) contrast(.98);
    transform: none;
  }

  .concept-card-interactive .concept-hint {
    opacity: 1;
    transform: translateY(0) rotate(-2deg);
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header,
  .site-nav,
  .hero-copy,
  .hero-meta span,
  .lore-panel,
  .concept-dialog {
    backdrop-filter: none;
  }
}

html.is-low-power .site-header,
html.is-low-power .site-nav,
html.is-low-power .hero-copy,
html.is-low-power .hero-meta span,
html.is-low-power .lore-panel,
html.is-low-power .concept-dialog {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Final accessibility and layout guardrails: anchors clear the floating
   header, motion preferences are honored globally, and repeatable cards keep
   their text rhythm stable as copy wraps at smaller widths. */
:where(section[id], .page-hero[id], main[id]) {
  scroll-margin-top: var(--header-offset, 112px);
}

.trailer-tag,
.button-quiet {
  -webkit-backdrop-filter: blur(10px);
}

.link-card {
  min-height: 132px;
}

.link-card strong {
  display: block;
  min-height: 2.5em;
  line-height: 1.28;
}

.link-card[aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(.78);
}

.link-card[aria-disabled="true"]:hover {
  transform: none;
}

.link-card[aria-disabled="true"] .link-arrow {
  opacity: .56;
}

@keyframes zanoka-menu-panel-in {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .site-nav.is-open {
    transform-origin: top center;
    animation: zanoka-menu-panel-in .18s var(--ease-zanoka) both;
  }

  .menu-toggle[aria-expanded="true"] {
    background: rgba(15, 31, 50, .86);
    border-color: rgba(255, 215, 122, .5);
  }
}

@media (max-width: 760px) {
  /* Keep the full menu usable in short landscape windows without allowing it
     to shove the page underneath the viewport. */
  .announcement-bar .transmission-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-nav.is-open {
    max-height: min(620px, calc(100svh - 92px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
}

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

@media (forced-colors: active) {
  .button,
  .nav-cta,
  .play-button,
  .menu-toggle,
  .concept-dialog-close,
  .link-card {
    border: 1px solid ButtonText;
  }

  a:focus-visible,
  button:focus-visible,
  select:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 3px;
  }
}

/* Comprehensive audit pass: keep every grid child shrinkable when copy grows
   in another locale, isolate artwork layers, and give the header one stable
   vertical rhythm across windowed, fullscreen, and short mobile viewports. */
:where(.intro-grid > *, .feature-grid > *, .build-showcase > *, .trailer-grid > *, .gallery-grid > *, .concept-grid > *, .follow-grid > *, .lore-grid > *, .facts-grid > *, .download-grid > *, .footer-top > *, .footer-bottom > *) {
  min-width: 0;
}

:where(.hero-copy, .intro-copy, .section-heading, .build-panel-copy, .gallery-head, .follow-copy, .lore-panel, .legal-wrap) {
  text-wrap: pretty;
}

:where(.build-panel, .elemental-boon-card, .concept-pair-card, .concept-card, .gallery-card, .download-card) {
  isolation: isolate;
}

/* The announcement link is a full touch target, so the bar and the floating
   header must agree on the same 48px top rhythm instead of overlapping by a
   few pixels on compact browsers. */
.announcement-bar {
  min-height: 48px;
  padding-block: 0;
}

.announcement-bar a { min-height: 48px; }
.site-header:not(.is-scrolled) { top: 48px; }

html[dir="rtl"] .hero-actions,
html[dir="rtl"] .hero-meta {
  direction: rtl;
}

html[dir="rtl"] .footer-top,
html[dir="rtl"] .footer-bottom {
  direction: rtl;
}

html[dir="rtl"] .footer-top-link {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

html[dir="rtl"] .footer-bottom nav {
  direction: rtl;
}

html[lang="zh"],
html[lang="ja"] {
  line-break: strict;
}

html[lang="zh"] :where(h1, h2, h3, p, li, figcaption, .button, .site-nav a),
html[lang="ja"] :where(h1, h2, h3, p, li, figcaption, .button, .site-nav a) {
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="ko"] :where(h1, h2, h3, p, li, figcaption, .button, .site-nav a) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  /* A two-column row is no longer comfortable once translated copy and a
     16:9 media frame share a tablet viewport. Stack the related content before
     intrinsic aspect-ratio sizing can push the media outside its grid track. */
  .intro-grid,
  .trailer-grid,
  .follow-grid,
  .lore-grid {
    grid-template-columns: 1fr;
  }

  .trailer-frame {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .site-header:not(.is-scrolled) { top: 48px; }

  .footer-top,
  .footer-bottom {
    min-width: 0;
  }
}

/* The four middle elemental squares each carry a distinct transparent boon
   signal. The small secondary crop adds variety without exposing an atlas. */
.elemental-boon-card.elemental-boon-venom {
  background: linear-gradient(145deg, rgba(86, 22, 70, .84), rgba(24, 5, 22, .94));
  border-color: rgba(255, 110, 205, .32);
}

.elemental-boon-card.elemental-boon-fire {
  background: linear-gradient(145deg, rgba(56, 26, 90, .86), rgba(16, 8, 28, .94));
  border-color: rgba(176, 120, 255, .32);
}

.elemental-boon-card.elemental-boon-ice {
  background: linear-gradient(145deg, rgba(22, 70, 106, .86), rgba(8, 24, 47, .94));
  border-color: rgba(107, 218, 255, .3);
}

.elemental-boon-card.elemental-boon-lightning {
  background: linear-gradient(145deg, rgba(44, 58, 104, .84), rgba(12, 16, 38, .94));
  border-color: rgba(158, 219, 255, .36);
}

.elemental-boon-card .elemental-boon-signal {
  position: absolute;
  z-index: 1;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  width: clamp(30px, 3.4vw, 42px);
  height: clamp(30px, 3.4vw, 42px);
  object-fit: contain;
  object-position: center;
  opacity: .86;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .34));
  pointer-events: none;
  user-select: none;
  contain: paint;
  transition: opacity .24s ease, transform .24s var(--ease-zanoka), filter .24s ease;
}

.elemental-boon-card:hover .elemental-boon-signal {
  opacity: .96;
  transform: translateY(-1px) rotate(2deg) scale(1.04);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .44));
}

.elemental-boon-venom .elemental-boon-signal { filter: saturate(1.12) drop-shadow(0 3px 6px rgba(255, 90, 200, .26)); }
.elemental-boon-fire .elemental-boon-signal { filter: saturate(1.08) drop-shadow(0 3px 6px rgba(160, 96, 255, .3)); }
.elemental-boon-ice .elemental-boon-signal { filter: saturate(1.08) drop-shadow(0 3px 6px rgba(86, 202, 255, .3)); }
.elemental-boon-lightning .elemental-boon-signal { filter: saturate(1.1) drop-shadow(0 3px 6px rgba(158, 219, 255, .34)); }

/* Keep the English four-card labels on one optical baseline, including the
   longest label, while translated labels retain their existing wrapping rules. */
html[lang="en"] .elemental-boon-card strong {
  font-size: 8px;
  letter-spacing: .035em;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .elemental-boon-card .elemental-boon-signal {
    inset-block-start: 3px;
    inset-inline-end: 3px;
    width: 31px;
    height: 31px;
    opacity: .76;
  }
}

/* Four across (wider than 760px) the tiles are narrow, and a full-size
   signal covered half the element's own emblem: there it is a corner
   badge, a little over a third of the emblem (the art box is as wide as
   the tile and clamp(58px, 6.4vw, 82px) tall). */
@media not all and (max-width: 760px) {
  .elemental-boon-card .elemental-boon-signal {
    inset-block-start: 3px;
    inset-inline-end: 3px;
    width: min(36%, calc(clamp(58px, 6.4vw, 82px) * .36));
    height: auto;
    aspect-ratio: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elemental-boon-card .elemental-boon-signal {
    transition: none;
  }
}

/* iPhone viewport hardening: respect notches, Dynamic Island, home indicators,
   split-screen widths, and short landscape browser chrome without changing the
   artwork scale or introducing a horizontal scroll strip. */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-offset, 112px) + var(--safe-area-top));
}

body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

:where(main, section, footer, .container, .site-header, .site-nav,
  .hero-copy, .section-heading, .concept-dialog-shell) {
  min-width: 0;
}

:where(img, svg, video, canvas, iframe) {
  max-inline-size: 100%;
}

.announcement-bar {
  min-height: calc(48px + var(--safe-area-top));
  padding-top: var(--safe-area-top);
  padding-inline-start: max(12px, var(--safe-area-left));
  padding-inline-end: max(12px, var(--safe-area-right));
}

.site-header {
  left: var(--safe-area-left);
  right: var(--safe-area-right);
  width: min(calc(100% - 48px - var(--safe-area-left) - var(--safe-area-right)), var(--max));
}

.site-header:not(.is-scrolled) {
  top: calc(48px + var(--safe-area-top));
}

.site-header.is-scrolled {
  top: calc(12px + var(--safe-area-top));
}

.skip-link {
  top: max(12px, var(--safe-area-top));
  left: max(12px, var(--safe-area-left));
}

.concept-dialog {
  padding-top: max(12px, var(--safe-area-top));
  padding-right: max(12px, var(--safe-area-right));
  padding-bottom: max(12px, var(--safe-area-bottom));
  padding-left: max(12px, var(--safe-area-left));
}

.concept-dialog-shell {
  max-height: calc(100dvh - 32px - var(--safe-area-top) - var(--safe-area-bottom));
}

:where(section[id], .page-hero[id], main[id]) {
  scroll-margin-top: calc(var(--header-offset, 112px) + var(--safe-area-top));
}

.site-footer {
  padding-bottom: max(25px, var(--safe-area-bottom));
}

.toast {
  right: max(24px, var(--safe-area-right));
  bottom: max(24px, var(--safe-area-bottom));
}

.hero-wordmark {
  max-width: 100%;
}

@media (max-width: 760px) {
  .container,
  .page-hero .container {
    width: min(calc(100% - 36px - var(--safe-area-left) - var(--safe-area-right)), var(--max));
  }

  .site-header {
    width: min(calc(100% - 36px - var(--safe-area-left) - var(--safe-area-right)), var(--max));
  }

  .site-header:not(.is-scrolled) {
    top: calc(48px + var(--safe-area-top));
  }

  .site-header.is-scrolled {
    top: calc(10px + var(--safe-area-top));
  }

  .hero-content {
    padding-top: calc(144px + var(--safe-area-top));
  }

  .page-hero {
    padding-top: calc(155px + var(--safe-area-top));
  }

  .site-nav.is-open {
    max-height: min(620px, max(160px, calc(100svh - 92px - var(--safe-area-top) - var(--safe-area-bottom))));
    padding-bottom: max(8px, var(--safe-area-bottom));
  }

  .hero-copy,
  .lore-panel,
  .build-panel,
  .trailer-frame,
  .gallery-card,
  .concept-card,
  .link-card {
    max-width: 100%;
  }

  .hero-actions .button,
  .menu-toggle,
  .site-nav > a,
  .language-picker select,
  .footer-bottom nav a {
    min-height: 48px;
  }
}

@media (max-width: 380px) {
  .container,
  .page-hero .container {
    width: min(calc(100% - 28px - var(--safe-area-left) - var(--safe-area-right)), var(--max));
  }

  .site-header {
    width: min(calc(100% - 28px - var(--safe-area-left) - var(--safe-area-right)), var(--max));
    padding-inline: 7px;
  }

  .brand-lockup {
    gap: 6px;
    font-size: 14px;
    letter-spacing: .13em;
  }

  .brand-lockup img {
    width: 30px;
    height: 30px;
  }

  .menu-toggle {
    gap: 7px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .hero-copy {
    padding-inline: 12px;
  }

  .hero h1 {
    font-size: clamp(29px, 9.8vw, 36px);
  }

  .hero-hook {
    font-size: 14px;
  }
}

@media (max-width: 1180px) and (orientation: landscape) and (max-height: 520px) {
  .container,
  .page-hero .container,
  html[dir="rtl"] .page-hero .container {
    width: min(calc(100% - 48px - var(--safe-area-left) - var(--safe-area-right)), var(--max));
  }

  .hero,
  .hero-content {
    min-height: max(560px, 100svh);
  }

  .hero-content {
    padding-top: calc(126px + var(--safe-area-top));
    padding-bottom: max(34px, var(--safe-area-bottom));
  }

  .hero-copy {
    max-width: min(700px, 100%);
  }

  .site-nav {
    max-height: min(420px, max(160px, calc(100svh - 82px - var(--safe-area-top) - var(--safe-area-bottom))));
    padding-bottom: max(8px, var(--safe-area-bottom));
  }

  .concept-dialog-shell {
    max-height: calc(100svh - 20px - var(--safe-area-top) - var(--safe-area-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-mark,
  .transmission-label {
    animation: none;
  }
}

/* Shared RTL affordances: keep arrows, cards, email strings and menu labels
   mirrored consistently in Urdu and Sindhi instead of relying on browser
   direction heuristics for mixed Arabic/Latin gamer copy. */
html[dir="rtl"] .site-nav > a:not(.nav-cta) {
  justify-content: flex-end;
  text-align: right;
}

html[dir="rtl"] .link-card {
  padding-right: 22px;
  padding-left: 48px;
  text-align: right;
}

html[dir="rtl"] .link-card-type,
html[dir="rtl"] .link-card strong {
  display: block;
  text-align: right;
}

html[dir="rtl"] .link-arrow {
  right: auto;
  left: 20px;
  transform: scaleX(-1);
}

html[dir="rtl"] .link-card-email,
html[dir="rtl"] code {
  direction: ltr;
  overflow-wrap: anywhere;
  word-break: break-word;
  unicode-bidi: isolate;
}

html[dir="rtl"] .language-picker select {
  padding-right: 12px;
  padding-left: 28px;
  text-align: right;
}

/* Mixed-script gamer copy needs the same bidi isolation in every RTL
   locale, not only the two locales receiving the deepest copy pass. */
html[dir="rtl"] :where(.hero-genre-text, .hero-meta span, .feature-card,
  .feature-card > div, .build-panel-copy, .build-panel h3, .build-panel p,
  .lore-panel, .follow-copy, .concept-pair-heading, .concept-secondary-head,
  .gallery-intro, .art-credit, .footer-top, .footer-bottom) {
  unicode-bidi: plaintext;
}

html[dir="rtl"] :where(.button, .site-nav > a) {
  min-height: 52px;
  unicode-bidi: plaintext;
}

/* Gamer-language finish: keep Urdu and Sindhi readable on iPhone while
   allowing familiar terms such as run, build, boon, combo, dash and boss to
   retain their recognizable in-game shape. */
:root {
  --font-arabic-ui: "Noto Naskh Arabic", "Geeza Pro", "Nirmala UI", "Latha", "Segoe UI", system-ui, sans-serif;
}

html[lang="sd"] body {
  font-family: var(--font-arabic-ui);
  font-size: 1.03rem;
  line-height: 1.92;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
}

html[lang="ur"] body,
html[lang="sd"] body {
  direction: rtl;
}

html[lang="ur"] :where(h1, h2, h3, p, li, figcaption, .hero-meta span, .feature-card h3, .build-panel h3, .build-panel p, .link-card strong, .button, .site-nav a, .card-label, .eyebrow, .trailer-tag) {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: pretty;
}

html[lang="sd"] :where(h1, h2, h3, p, li, figcaption, .hero-meta span, .feature-card h3, .build-panel h3, .build-panel p, .link-card strong, .button, .site-nav a, .card-label, .eyebrow, .trailer-tag) {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: pretty;
}

html[lang="sd"] h1,
html[lang="sd"] h2,
html[lang="sd"] h3 {
  font-family: var(--font-arabic-ui);
  font-weight: 800;
  letter-spacing: normal;
  line-height: 1.45;
  text-wrap: pretty;
  -webkit-text-stroke: 0;
}

html[lang="sd"] :where(.button, .eyebrow, .card-label, .trailer-tag, .link-card-type, .footer-top-link, .site-nav a, .concept-pair-card figcaption, .concept-compare-card > figcaption, .elemental-boon-card strong, .feature-index) {
  font-family: var(--font-arabic-ui);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.75;
  text-transform: none;
}

html[lang="ur"] :where(.hero-genre-text, .hero-meta span, .feature-card, .feature-card > div, .build-panel-copy, .build-panel h3, .build-panel p, .lore-panel, .follow-copy, .concept-pair-heading, .concept-secondary-head, .gallery-intro, .art-credit, .footer-top, .footer-bottom),
html[lang="sd"] :where(.hero-genre-text, .hero-meta span, .feature-card, .feature-card > div, .build-panel-copy, .build-panel h3, .build-panel p, .lore-panel, .follow-copy, .concept-pair-heading, .concept-secondary-head, .gallery-intro, .art-credit, .footer-top, .footer-bottom) {
  unicode-bidi: plaintext;
}

html[lang="sd"] .hero h1 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 5vw, 4.15rem);
  line-height: 1.4;
}

html[lang="sd"] .hero-hook {
  max-width: 35rem;
  font-size: clamp(1.06rem, 1.55vw, 1.24rem);
  line-height: 1.95;
}

html[lang="sd"] .section-heading h2,
html[lang="sd"] .page-hero h1,
html[lang="sd"] .feature-card h3,
html[lang="sd"] .build-panel h3 {
  line-height: 1.45;
}

html[lang="ur"] .button,
html[lang="ur"] .site-nav > a,
html[lang="sd"] .button,
html[lang="sd"] .site-nav > a {
  min-height: 52px;
  padding-block: 9px;
  text-align: center;
  unicode-bidi: plaintext;
}

html[lang="ur"] .hero-meta span,
html[lang="sd"] .hero-meta span {
  min-height: 48px;
  line-height: 1.75;
}

html[lang="ur"] .elemental-boon-card strong,
html[lang="sd"] .elemental-boon-card strong {
  max-width: 100%;
  line-height: 1.55;
  white-space: normal;
  text-align: center;
}

html[lang="ur"] .concept-pair-card figcaption,
html[lang="sd"] .concept-pair-card figcaption,
html[lang="ur"] .concept-compare-card > figcaption,
html[lang="sd"] .concept-compare-card > figcaption {
  line-height: 1.6;
  white-space: normal;
}

@media (max-width: 600px) {
  html[lang="ur"] .hero h1,
  html[lang="sd"] .hero h1 {
    max-width: 100%;
    font-size: clamp(2.15rem, 10vw, 3.1rem);
    line-height: 1.42;
  }

  html[lang="ur"] .hero-hook,
  html[lang="sd"] .hero-hook {
    font-size: 1.05rem;
    line-height: 1.95;
  }

  html[lang="ur"] .section-heading h2,
  html[lang="ur"] .page-hero h1,
  html[lang="sd"] .section-heading h2,
  html[lang="sd"] .page-hero h1 {
    line-height: 1.42;
  }

  html[lang="ur"] .site-nav > a,
  html[lang="sd"] .site-nav > a {
    min-height: 52px;
    line-height: 1.6;
  }
}

/* Kickstarter: the campaign's own green, so the pledge button reads at a glance. */
.button-kickstarter {
  color: #03170d;
  background: linear-gradient(125deg, #5ff0ae, #05ce78 55%, #03b367);
  border-color: rgba(5, 206, 120, .9);
  box-shadow: 0 12px 30px rgba(5, 206, 120, .28);
}

.button-kickstarter:hover { background: #7df5be; }

.follow-section .link-grid > .link-card.link-card-kickstarter {
  --link-accent: #05ce78;
  --link-rgb: 5, 206, 120;
  --link-deep: rgba(4, 92, 54, .92);
  --link-base: rgba(12, 29, 24, .95);
  --link-hover-deep: rgba(5, 128, 74, .96);
  --link-hover-base: rgba(15, 38, 30, .96);
}

/* "Coming soon" shows only while the Steam wishlist link is still a
   placeholder (script.js marks those links .is-placeholder), so it goes away
   by itself once the store page is linked in site-config.js. */
.soon-badge { display: none; }

.is-placeholder .soon-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: .55em;
  padding: .18em .6em;
  border-radius: 999px;
  border: 1px solid rgba(255, 230, 154, .6);
  background: rgba(7, 16, 31, .82);
  color: #ffe69a;
  font-size: .66em;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.link-card.is-placeholder .soon-badge {
  align-self: flex-start;
  margin: .6em 0 0;
}

/* Each element square fades through its line's boons: the core emblem, then
   three more, three seconds apart, and the squares are offset so they never
   turn together. Reduced motion or low power keeps the core emblem still. */
.elemental-boon-art .boon-cycle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .38));
  transition: transform .24s var(--ease-zanoka);
}

.elemental-boon-art > img:first-child,
.elemental-boon-art .boon-cycle {
  animation: boon-cycle 12s ease-in-out infinite both;
  animation-delay: calc(var(--boon-i, 0) * 3s - 12s + var(--boon-shift, 0s));
}

.elemental-boon-art .boon-cycle-1 { --boon-i: 1; }
.elemental-boon-art .boon-cycle-2 { --boon-i: 2; }
.elemental-boon-art .boon-cycle-3 { --boon-i: 3; }
.elemental-boon-fire { --boon-shift: -.6s; }
.elemental-boon-ice { --boon-shift: -1.2s; }
.elemental-boon-lightning { --boon-shift: -1.8s; }

@keyframes boon-cycle {
  0%, 21% { opacity: 1; }
  25%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

.elemental-boon-card:hover .elemental-boon-art .boon-cycle { transform: translateY(-2px) scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .elemental-boon-art > img:first-child { animation: none; opacity: 1; }
  .elemental-boon-art .boon-cycle { display: none; }
}

html.is-low-power .elemental-boon-art > img:first-child { animation: none; opacity: 1; }
html.is-low-power .elemental-boon-art .boon-cycle { display: none; }

/* The announcement bar is parked (the owner, 26 September 2026: "remove the
   line and make sure the background box of it is gone too so the site sits an
   inch more up"). Without it the floating header rests at the top of the page,
   in the place it takes once the page scrolls, so nothing jumps when it turns
   solid. If the bar is put back, the header sits below it again. */
.site-header:not(.is-scrolled) {
  position: fixed;
  top: calc(12px + var(--safe-area-top, 0px));
}

.announcement-bar + .site-header:not(.is-scrolled) {
  position: absolute;
  top: calc(48px + var(--safe-area-top, 0px));
}