@font-face {
  font-family: "MW";
  src: url("assets/WDXLLubrifontTC-Regular.ttf") format("truetype");
  font-display: swap;
}

/*
  SCALING RULE FOR THIS PASS
  --------------------------
  The desktop composition is intentionally width-driven.
  Almost every visual dimension is expressed in vw, %, em, or aspect-ratio.
  There are no desktop max-width caps, clamp() caps, or breakpoint-driven layout
  changes that make the site shrink into a small island at high resolution/low zoom.

  Consequence: browser zoom changes the CSS viewport width, and the vw-based
  composition counter-scales with it, preserving the same visual proportions.
*/
:root {
  --font-scale: 1;
  --content-w: 95%;
  --sand: #e5d0a8;
  --sand-2: #f2e0b9;
  --brown: #3d2b1d;
  --brown-soft: #574131;
  --green: #4ba656;
  --menu-hover: #85ab7b;
  --green-soft: #4ba656;
  --line: rgba(169, 124, 73, .68);
  --line-soft: rgba(230, 198, 147, .17);
  --page-font: calc(.90vw * var(--font-scale));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "MW", sans-serif;
  font-size: var(--page-font);
  line-height: 1.34;
  color: var(--sand);
  background: url("assets/metal-dark.webp") center top / 30vw 30vw repeat;
  text-shadow: 0 .08vw .24vw rgba(0,0,0,.92), 0 0 .46vw rgba(0,0,0,.36), 0 0 .16vw rgba(238,214,170,.10);
}
body.lang-zh { --font-scale: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

.site-shell {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  border: 0;
  box-shadow: none;
}
.site-shell::before { display: none; }
.content-wrap {
  width: var(--content-w);
  margin: 0 auto;
}

/* HEADER */
.site-header {
  width: 100%;
  min-height: 5.4vw;
  background-image: url("assets/menu-header.jpg");
  background-position: left center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  overflow: visible;
  position: relative;
  z-index: 101;
}
.site-footer {
  width: 100%;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.28), rgba(255,255,255,.02)),
    url("assets/menu-texture.webp") center / 100% 100% no-repeat;
  border-top: .055vw solid rgba(117,85,48,.85);
  border-bottom: 0;
}
.header-inner {
  width: 100%;
  min-height: 5.4vw;
  display: grid;
  grid-template-columns: 31% 51% 18%;
  align-items: center;
  padding: 0 1.2vw 0 1.5vw;
  margin: 0;
}
.brand-top {
  width: 17.45vw;
  justify-self: start;
  align-self: center;
  opacity: 0;
  pointer-events: none;
}
.brand-top img,
.footer-brand img {
  width: 100%;
  height: auto;
}
.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.35vw;
  white-space: nowrap;
  padding-top: .06vw;
  transform: translateX(10vw);
}
.main-nav a,
.main-nav .nav-current,
.footer-nav a {
  position: relative;
  color: #d7c49f;
  text-transform: uppercase;
  letter-spacing: .065em;
  font-size: 1.425em;
  transition: color .18s ease;
}
.main-nav a,
.main-nav .nav-current,
.language-toggle {
  text-shadow: 0 .08vw .24vw rgba(0,0,0,.92), 0 0 .46vw rgba(0,0,0,.78), 0 0 .16vw rgba(238,214,170,.18);
}
.main-nav .nav-current {
  cursor: default;
}
.main-nav a:hover,
.main-nav a:focus-visible { color: var(--menu-hover); }
.footer-nav a:hover,
.footer-nav a:focus-visible { color: var(--green-soft); }
.main-nav a.is-active,
.main-nav .nav-current,
.footer-nav a.is-active { color: var(--green); }

.header-controls {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.2vw;
}
.language-picker {
  position: relative;
}
.sound-toggle {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  font-size: 1.425em;
  flex: 0 0 auto;
}
.sound-toggle img {
  display: block;
  height: 1em;
  width: auto;
  object-fit: contain;
  box-sizing: content-box;
  border: .12em solid transparent;
  border-radius: 50%;
  padding: .04em;
  transition: border-color .18s ease, opacity .18s ease;
}
.sound-toggle[aria-pressed="true"] img {
  border-color: var(--green);
}
.sound-toggle:hover img,
.sound-toggle:focus-visible img {
  opacity: 1;
}
.language-toggle {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: .36vw;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 1.425em;
}
.language-toggle img {
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  object-fit: contain;
  opacity: .92;
}
.language-label { font-size: 1em; }
.language-menu {
  position: absolute;
  top: 50%;
  right: calc(100% + .85vw);
  transform: translateY(-50%);
  display: none;
  flex-direction: row;
  align-items: center;
  gap: .9vw;
  width: max-content;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 110;
}
.language-picker.open .language-menu { display: flex; }
.language-menu button {
  appearance: none;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: #d7c49f;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 1.425em;
}
.language-menu button:hover,
.language-menu button:focus-visible,
.language-menu button[aria-current="true"] { color: var(--green); }

/* HERO */
.hero-section {
  width: 100%;
  background:
    linear-gradient(to bottom, rgba(255,244,221,.24), rgba(124,83,45,.10)),
    url("assets/hero-desert.webp") center top / cover no-repeat;
  border-bottom: .055vw solid rgba(110,78,43,.72);
  padding: 2.15vw 0 2.25vw;
}
.hero-wrap {
  display: grid;
  grid-template-columns: 44% 53%;
  justify-content: space-between;
  align-items: start;
  gap: 3%;
}
.hero-copy {
  width: 100%;
  padding-top: .45vw;
  padding-left: 5vw;
  color: var(--brown);
}
.hero-logo-large {
  width: 75.2%;
  height: auto;
  filter: none;
  margin-bottom: 1.22vw;
}
.hero-eyebrow {
  margin: 0 0 .82vw;
  color: var(--green);
  text-transform: none;
  letter-spacing: .045em;
  font-size: 1.8em;
  text-shadow: inherit;
}
.hero-intro,
.hero-body {
  width: 94%;
  margin: 0 0 1.12vw;
  color: var(--brown);
  font-size: 1.375em;
}
.hero-body { color: var(--brown-soft); }
.hero-signature {
  margin: 0;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .045em;
  font-size: 1.1em;
}
.hero-media {
  width: 100%;
  display: grid;
  gap: .9vw;
}
.media-frame,
.feature-frame,
.placeholder-image,
.feature-card,
.carousel-shell,
.store-chip {
  position: relative;
}
.media-frame,
.feature-frame,
.placeholder-image {
  overflow: hidden;
  border: .055vw solid rgba(87,61,35,.92);
  box-shadow: inset 0 0 0 .055vw rgba(239,212,168,.20), 0 .55vw 1.55vw rgba(0,0,0,.14);
}
.media-frame::before,
.feature-frame::before,
.placeholder-image::before,
.feature-card::before,
.carousel-shell::before {
  content: "";
  position: absolute;
  inset: .28vw;
  border: .055vw solid rgba(76,56,36,.52);
  pointer-events: none;
  z-index: 2;
}
.video-ratio { aspect-ratio: 16 / 9; }
.video-ratio video {
  pointer-events: none;
}
.video-ratio video::-webkit-media-controls,
.video-ratio video::-webkit-media-controls-enclosure,
.video-ratio video::-webkit-media-controls-panel {
  display: none !important;
}
.video-ratio img,
.feature-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-platforms {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .92vw;
}
.store-chip {
  min-height: 3.28vw;
  padding: .64vw .75vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .58vw;
  background:
    linear-gradient(to bottom, rgba(18,15,12,.08), rgba(0,0,0,.28)),
    url("assets/metal-panel.webp") center / 25vw 25vw repeat;
  border: .055vw solid rgba(102,73,42,.8);
  box-shadow: inset 0 0 0 .055vw rgba(255,255,255,.08);
  color: var(--sand-2);
  text-transform: uppercase;
  letter-spacing: .035em;
  transition: color .18s ease, border-color .18s ease;
}
.store-chip:hover,
.store-chip:focus-visible {
  color: var(--green-soft);
  border-color: rgba(125,170,104,.80);
}
.store-text { white-space: nowrap; font-size: .96em; }
.store-mark {
  display: inline-grid;
  place-items: center;
  width: 1.68vw;
  height: 1.68vw;
  flex: 0 0 auto;
}
.store-mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.apple-mark svg { fill: currentColor; stroke: none; }
.text-mark {
  width: auto;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .075em;
}

/* FOUR GAMEPLAY FEATURES */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.22vw;
  margin-top: 2.25vw;
}
.feature-card {
  width: 100%;
  padding: .62vw;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,.34)),
    url("assets/metal-panel.webp") center / 25vw 25vw repeat;
  border: .055vw solid rgba(100,72,42,.86);
  box-shadow: inset 0 0 0 .055vw rgba(255,255,255,.06);
}
.feature-ratio { aspect-ratio: 1.48 / 1; }
.feature-copy { padding: .78vw .45vw .38vw; }
.feature-copy h3,
.carousel-card h3 {
  margin: 0 0 .48vw;
  color: var(--sand-2);
  text-transform: uppercase;
  letter-spacing: .035em;
  font-size: 1.13em;
}
.feature-copy p {
  margin: 0;
  color: #d7c198;
  font-size: .94em;
}

/* DARK LOWER AREA */
.dark-section {
  width: 100%;
  background:
    linear-gradient(to bottom, rgba(16,13,10,.38), rgba(16,13,10,.38)),
    url("assets/metal-dark.webp") center top / 30vw 30vw repeat;
  padding: 2vw 0 2.8vw;
}
.carousel-section + .carousel-section { margin-top: 2.2vw; }
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85vw;
  margin: 0 0 1.22vw;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 2.05em;
  text-align: center;
}
.section-title::before,
.section-title::after {
  content: "";
  flex: 0 0 17%;
  height: .055vw;
  background: linear-gradient(to right, rgba(191,148,91,0), rgba(191,148,91,.75), rgba(191,148,91,0));
}
.carousel-shell {
  width: 100%;
  padding: .8vw;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.02), rgba(0,0,0,.14)),
    url("assets/metal-panel.webp") center / 25vw 25vw repeat;
  border: .055vw solid rgba(99,71,42,.86);
  box-shadow: inset 0 0 0 .055vw rgba(255,255,255,.05);
  cursor: pointer;
  user-select: none;
}
.carousel-mask { overflow: hidden; width: 100%; }
.carousel-track {
  display: flex;
  gap: 1.05vw;
  width: max-content;
  will-change: transform;
}
.carousel-card {
  flex: 0 0 auto;
  padding: .58vw;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,.34)),
    url("assets/metal-panel.webp") center / 25vw 25vw repeat;
  border: .055vw solid rgba(100,72,42,.86);
  box-shadow: inset 0 0 0 .055vw rgba(255,255,255,.06);
}
.carousel-card.tall { width: 17vw; }
.carousel-card.wide { width: 21.5vw; }
.tall .placeholder-image { aspect-ratio: 4 / 5; }
.wide .placeholder-image { aspect-ratio: 1.48 / 1; }
.placeholder-image {
  background:
    linear-gradient(to bottom right, rgba(255,248,229,.97), rgba(228,207,167,.95)),
    url("assets/paper-light.webp") center / cover no-repeat;
}
.placeholder-image::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: .055vw dashed rgba(90,67,42,.36);
  box-shadow: inset 0 0 1.1vw rgba(255,255,255,.18);
}
.carousel-card h3 { margin: .72vw 0 0; }

/* FOOTER */
.footer-inner {
  width: 95%;
  display: grid;
  grid-template-columns: 35% 65%;
  align-items: center;
  padding: 1.15vw 0 1.35vw;
}
.footer-brand-block {
  display: grid;
  gap: .52vw;
}
.footer-brand { width: 52%; }
.footer-copy {
  margin: 0;
  width: 80%;
  color: #d2bc95;
  font-size: .94em;
}
.footer-nav {
  display: flex;
  justify-content: flex-end;
  gap: 2.6vw;
  white-space: nowrap;
}


/* Full-bleed section backgrounds: no viewport frame or horizontal outer borders/gutters. */
html, body { margin: 0; padding: 0; }
.feature-section,
.dark-section,
.platform-section,
.no-ads-wrap,
.site-footer {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background-clip: border-box !important;
}


/* MOBILE / PORTRAIT LAYOUT
   Desktop rules above remain the source of truth. This layer only activates
   on portrait phone/tablet viewports and keeps all sizes relative. */
@media (orientation: portrait) and (max-width: 60em) {
  :root { --content-w: 92%; }
  body { font-size: 3.2vw; }
  body.lang-zh { font-size: 3.65vw; }

  .content-wrap { width: 92%; }

  .site-header {
    height: 16vw !important;
    min-height: 16vw !important;
    max-height: 16vw !important;
    background-position: right center !important;
    background-size: auto 100% !important;
  }
  .header-inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    grid-template-columns: 78% 22% !important;
    align-items: center !important;
    padding: 0 3vw !important;
  }
  .main-nav {
    grid-column: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, max-content) !important;
    justify-content: start !important;
    align-content: center !important;
    align-items: center !important;
    gap: 1.5vw 5vw !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    line-height: 1.16 !important;
    white-space: nowrap !important;
  }
  .main-nav a,
  .main-nav .nav-current {
    font-size: 3.18vw !important;
    letter-spacing: .045em !important;
  }
  .header-controls {
    grid-column: 2 !important;
    justify-self: end !important;
    margin-right: 0 !important;
    gap: 3vw !important;
  }
  .language-picker {
    justify-self: auto !important;
    margin-right: 0 !important;
  }
  .sound-toggle { font-size: 3.65vw !important; }
  .language-toggle { font-size: 3.65vw !important; gap: 1vw !important; }
  .language-toggle img { width: 1.05em !important; height: 1.05em !important; flex-basis: 1.05em !important; }
  .language-menu {
    top: calc(100% + 2vw) !important;
    right: 0 !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2vw !important;
    padding: 2.4vw 2.8vw !important;
    background: rgba(20,17,13,.96) !important;
    border: .14vw solid rgba(111,83,54,.78) !important;
    box-shadow: 0 1vw 2.8vw rgba(0,0,0,.48) !important;
  }
  .language-menu button { font-size: 3.45vw !important; }

  body > .site-shell > main { padding-top: 16vw !important; }

  .section-title,
  .platform-section-title,
  .world-section-title {
    font-size: 1.72em !important;
    gap: 2vw !important;
  }
  .section-title {
    width: 100% !important;
    min-width: 0 !important;
  }
  .section-title::before,
  .section-title::after {
    flex: 1 1 0 !important;
    min-width: 8vw !important;
    max-width: 18vw !important;
    height: .22vw !important;
  }
  .platform-section-title::before,
  .platform-section-title::after,
  .world-section-title::before,
  .world-section-title::after { flex-basis: 10% !important; }

  .site-footer .footer-inner,
  .footer-inner {
    width: 92% !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "cta" "copyright" "legal" !important;
    justify-items: center !important;
    row-gap: 3vw !important;
    padding: 4vw 0 !important;
    text-align: center !important;
  }
  .footer-copyright { grid-area: copyright !important; font-size: .92em !important; }
  .footer-legal {
    grid-area: legal !important;
    justify-content: center !important;
    gap: 5vw !important;
    white-space: normal !important;
  }
  .footer-legal a { font-size: .92em !important; }
}