:root {
  color-scheme: light;
  --navy: #071d50;
  --gold: #ffdc56;
  --overlap: clamp(72px, 9.9vw, 190px);
  --band-height: clamp(180px, 13vw, 240px);
}

* { box-sizing: border-box; }
html { background: var(--navy); scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: #fff;
  font-family: Arial, sans-serif;
  background: var(--navy) url("assets/global/01-world-background-soft-v1.png") center center / cover fixed no-repeat;
}
a { color: inherit; }
.landing { position: relative; width: 100%; overflow-x: clip; }
.skip-link,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link:focus {
  z-index: 100;
  top: 12px;
  left: 12px;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border: 2px solid var(--gold) !important;
  border-radius: 10px;
  background: var(--navy);
  font-weight: 700;
}

.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  isolation: isolate;
  background: transparent;
}
.scene + .scene { margin-top: calc(var(--overlap) * -1); }
.scene--hero { z-index: 7; height: min(56.25vw, 100svh); aspect-ratio: auto; }
.scene--hero .scene-art,
.scene--hero .hero-character,
.scene--hero .hero-fx { object-fit: cover; }
.scene.scene--why { z-index: 6; margin-top: 0; }
.scene--why .scene-content { inset: 0; height: 100%; }


.scene--pass { z-index: 5; }
.scene--modes { z-index: 4; }
.scene--arsenal { z-index: 3; }
.scene--final { z-index: 2; }
.scene-art {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
  animation: scene-drift 11s ease-in-out infinite alternate;
}
.hero-character {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
  animation: character-float 5.4s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.hero-character--girl { animation-duration: 5.8s; animation-delay: -.8s; }
.hero-character--boy { animation-duration: 4.9s; animation-delay: -2s; }
.hero-character--mascot { animation-duration: 6.2s; animation-delay: -1.4s; }
.hero-fx {
  position: absolute;
  z-index: 14;
  top: 0;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
}
.hero-fx--trajectory { z-index: 11; animation: trajectory-glow 3.8s ease-in-out infinite; }
.hero-fx--grenade { z-index: 15; animation: grenade-toss 3.2s ease-in-out infinite; }
.scene--why .scene-art { animation-duration: 13s; animation-delay: -3s; }
.scene--pass .scene-art { animation-duration: 14s; animation-delay: -5s; }
.scene--modes .scene-art { animation-duration: 12s; animation-delay: -2s; }
.scene--arsenal .scene-art { animation-duration: 15s; animation-delay: -7s; }
.scene--final .scene-art { animation-duration: 12s; animation-delay: -4s; }
.scene-content {
  position: absolute;
  z-index: 30;
  inset: var(--overlap) 0 0;
  height: calc(100% - var(--overlap));
}
.scene--hero .scene-content { top: 0; height: 100%; }
.transition-band {
  position: absolute;
  z-index: 20;
  top: calc(var(--overlap) - var(--band-height) / 2);
  left: 50%;
  width: 100%;
  height: var(--band-height);
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.transition-band img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: max(100%, 1920px);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
}
.transition-band--pass img { width: max(108%, 1920px); }
.transition-band--modes img { width: max(118%, 1920px); }
.transition-band--arsenal img { width: max(110%, 1920px); }
.transition-band--arena img { width: max(110%, 1920px); }
.transition-band--footer img { width: max(108%, 1920px); }
/* Cloud banks blend the edges without adding an empty section to the page. */
.transition-band--book {
  top: calc(var(--band-height) / -2);
  opacity: .32;
  background:
    radial-gradient(ellipse at 8% 48%, #dceeff 0 9%, transparent 35%),
    radial-gradient(ellipse at 28% 58%, #cde5fa 0 12%, transparent 38%),
    radial-gradient(ellipse at 52% 43%, #dceeff 0 13%, transparent 40%),
    radial-gradient(ellipse at 76% 57%, #cde5fa 0 12%, transparent 38%),
    radial-gradient(ellipse at 96% 46%, #dceeff 0 9%, transparent 35%);
  filter: blur(10px);
}
.scene-art {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 85%, transparent);
}
.scene--hero .scene-art,
.scene--hero .hero-character,
.scene--hero .hero-fx {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}


.hero-header-art {
  position: absolute;
  z-index: 31;
  top: 0.5%;
  left: 50%;
  display: block;
  width: min(44%, 850px);
  height: auto;
  max-height: 34%;
  object-fit: contain;
  transform: translateX(-50%);
  animation: logo-bob 6s ease-in-out infinite;
}
.ornate-title {
  position: absolute;
  left: 50%;
  width: min(68%, 1160px);
  height: clamp(125px, 16vw, 210px);
  transform: translateX(-50%);
  text-align: center;
}
.ornate-title > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  animation: frame-glint 8s ease-in-out infinite;
}
.ornate-title-copy {
  position: absolute;
  inset: 25% 12% 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .4vw, 9px);
  color: #fff2be;
  text-shadow: 0 3px 0 #53200e, 0 5px 10px #071d50;
}
.ornate-title-copy h1,
.ornate-title-copy h2,
.ornate-title-copy p { margin: 0; }
.ornate-title-copy h1,
.ornate-title-copy h2 {
  color: #ffe98a;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.55rem, 3.6vw, 4.3rem);
  font-weight: 900;
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: .015em;
  -webkit-text-stroke: 1px #7a250b;
}
.ornate-title-copy p:not(.eyebrow) {
  font-size: clamp(.78rem, 1.35vw, 1.55rem);
  font-weight: 800;
  line-height: 1.15;
}
.eyebrow {
  color: #ffe5a0;
  font-size: clamp(.62rem, .95vw, 1.05rem);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-title-frame { top: 22%; width: min(67%, 1220px); }
.hero-title-frame .ornate-title-copy { inset: 29% 10% 18%; }
.section-title-frame { top: 1%; }
.why-title-frame {
  position: absolute;
  z-index: 31;
  top: 1%;
  left: 50%;
  width: 56%;
  aspect-ratio: 1020 / 230;
  transform: translateX(-50%);
}
.section-title-frame .ornate-title-copy h2 { font-size: clamp(1.35rem, 3vw, 3.35rem); }

.game-button {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 180px;
  color: #fff4bd;
  font-size: clamp(1.1rem, 2.5vw, 2.8rem);
  font-weight: 1000;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 3px 0 #70200b, 0 5px 9px rgba(24, 10, 4, .8);
  filter: drop-shadow(0 9px 10px rgba(3, 10, 38, .45));
  transition: transform .2s ease, filter .2s ease;
  animation: button-breathe 5.5s ease-in-out infinite;
}
.game-button > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.game-button > span { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.game-button small { font-size: .48em; letter-spacing: .07em; }
.game-button:hover { transform: translate(-50%, -2px) scale(1.025); filter: drop-shadow(0 12px 12px rgba(3, 10, 38, .6)) brightness(1.08); }
.game-button:focus-visible,
.login-button:focus-visible,
.hero-nav a:focus-visible,
.mode-links a:focus-visible,
.arsenal-links a:focus-visible,
.footer-nav a:focus-visible {
  outline: 3px solid #fff3ad;
  outline-offset: 2px;
}
.hero-cta-art {
  position: absolute;
  z-index: 32;
  top: 63%;
  left: 50%;
  display: block;
  width: min(44%, 860px);
  aspect-ratio: 2061 / 550;
  transform: translateX(-50%) scale(1);
  transition: transform .28s cubic-bezier(.2, .75, .25, 1);
  isolation: isolate;
}
.hero-cta-art::before {
  position: absolute;
  z-index: 0;
  inset: 16% 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 190, 40, .72), rgba(255, 125, 20, .22) 48%, transparent 72%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(.88);
  transition: opacity .28s ease, transform .35s ease;
  content: "";
  pointer-events: none;
}
.hero-cta-art :is(img, svg) {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(29, 12, 20, .28));
  transform: translateY(0) scale(1);
  transition: transform .28s cubic-bezier(.2, .75, .25, 1), filter .28s ease;
}
.hero-cta-art:hover,
.hero-cta-art:focus-visible { transform: translateX(-50%) scale(1.025); }
.hero-cta-art:hover::before,
.hero-cta-art:focus-visible::before { opacity: 1; transform: scale(1.08); }
.hero-cta-art:hover :is(img, svg),
.hero-cta-art:focus-visible :is(img, svg) {
  filter: brightness(1.1) drop-shadow(0 0 17px rgba(255, 185, 38, .72)) drop-shadow(0 11px 13px rgba(29, 12, 20, .38));
  transform: translateY(-3px) scale(1.012);
}
.hero-cta-art:active { transform: translateX(-50%) scale(.99); }
.hero-cta-art:focus-visible { outline: none; }
.login-button {
  position: absolute;
  z-index: 50;
  top: 2.5%;
  right: 2.5%;
  display: block;
  width: clamp(150px, 12vw, 205px);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-decoration: none;
}
.login-button img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transform-origin: center;
  transition: transform .18s ease, filter .18s ease;
}
.login-button:hover img,
.login-button:focus-visible img { transform: scale(1.08); filter: brightness(1.08); }
.login-button:active img { transform: scale(1.04); }
.hero-nav {
  position: absolute;
  z-index: 40;
  top: calc(100% - 96px);
  left: 17.45%;
  display: grid;
  width: 65.1%;
  height: 88px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 12px;
  overflow: visible;
  filter: drop-shadow(0 8px 7px rgba(37, 17, 8, .5));
}
/* The picture uses display: contents; its source must not become a grid cell. */
.hero-nav > picture > source { display: none; }
.hero-nav-art {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 16.6667%;
  display: block;
  width: 66.6667%;
  height: auto;
  transform: translateY(-50%) scaleY(.8);
  pointer-events: none;
  transition: filter .2s ease;
}
.hero-platform-plaque { position: relative; z-index: 1; display: block; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; color: inherit; font: inherit; cursor: pointer; appearance: none; transition: transform .18s ease; }
.hero-platform-plaque img { position: absolute; top: calc(50% - 1px); left: 50%; display: block; width: 100%; height: auto; transform: translate(-50%, -50%) scaleX(1.08) scaleY(.9); transform-origin: center; pointer-events: none; transition: transform .18s ease, filter .18s ease; }
.hero-platform-plaque:hover, .hero-platform-plaque:active { background: transparent !important; box-shadow: none !important; filter: none !important; }
.hero-platform-plaque:hover img { transform: translate(-50%, -50%) scaleX(1.13) scaleY(.94); filter: brightness(1.08); }
.hero-platform-plaque:active img { transform: translate(-50%, -50%) scaleX(1.11) scaleY(.92); }
.hero-platform-plaque:focus-visible { outline: 3px solid #ffe27a; outline-offset: -4px; border-radius: 14px; }
.login-launch-modal { width:min(520px,calc(100% - 32px)); margin:auto; padding:0; overflow:visible; border:0; border-radius:18px; background:transparent; color:#4b2915; box-shadow:0 22px 72px #080b1acc; }
.login-launch-modal::backdrop { background:#07152bbd; backdrop-filter:blur(3px); }
.login-launch-modal__card { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:29px 38px 27px; border:3px solid #a96727; border-radius:18px; background:linear-gradient(150deg,#fff7e7,#e8c28a); box-shadow:inset 0 0 0 2px #fff3d0,inset 0 0 22px #9e642733; text-align:center; }
.login-launch-modal__spark { display:grid; place-items:center; width:42px; height:42px; border:2px solid #7c3f19; border-radius:50%; background:linear-gradient(145deg,#169cdc,#075a9d); box-shadow:inset 0 1px #b7f3ff,0 3px 0 #783817; color:#fff8ce; font:900 25px/1 Georgia,serif; text-shadow:0 2px #07436d; }
.login-launch-modal h2 { margin:0; color:#6b3016; font:900 25px/1.06 'Barlow Condensed',sans-serif; text-align:center; text-transform:uppercase; text-shadow:0 1px #fff6d8; }
.login-launch-modal p { max-width:430px; margin:-2px 0 0; color:#6e4828; font:14px/1.42 Arial,sans-serif; text-align:center; }
.login-launch-modal p+p { margin-top:-2px; color:#6e4828; }
.login-launch-modal .login-verification-close { position:absolute; top:-13px; right:-13px; display:grid; place-items:center; width:34px; height:34px; padding:0; border:2px solid #fff0c6; border-radius:50%; background:linear-gradient(#dc4b35,#951b16); box-shadow:0 2px 0 #5b160f; color:#fff8e6; font:900 28px/27px Arial,sans-serif; text-shadow:0 2px #60130e; cursor:pointer; }
.login-launch-modal .login-verification-submit { position:relative; display:grid; place-items:center; width:min(100%,300px); min-height:54px; margin-top:4px; padding:0 12px; border:2px solid #752817; border-radius:10px; background:linear-gradient(#e35432,#a82218); box-shadow:inset 0 1px #ffc69c,0 3px 0 #631b13; color:#fff6d2; cursor:pointer; font:bold 20px/1 Georgia,serif; text-transform:uppercase; text-shadow:1px 2px #4d130e; }
.login-launch-modal .login-verification-submit:hover, .login-launch-modal .login-verification-close:hover { filter:brightness(1.1); }
.login-launch-modal .submit-label { display:block; font:900 clamp(18px,5.2vw,22px)/1 Georgia,serif; letter-spacing:-.045em; white-space:nowrap; text-shadow:1px 2px #4d130e; }
.login-launch-modal[open] { animation:login-launch-modal-in .2s ease-out; }
@keyframes login-launch-modal-in { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:850px) { .login-launch-modal { width:min(390px,calc(100% - 28px)); } .login-launch-modal__card { min-height:340px; padding:29px 22px 25px; } .login-launch-modal h2 { font-size:23px; } .login-launch-modal p { max-width:292px; line-height:1.45; } .login-launch-modal .login-verification-submit { width:100%; margin-top:auto; } }
@media (prefers-reduced-motion: reduce) { .hero-platform-plaque, .hero-platform-plaque img { transition:none; } }
.hero-nav-item {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  text-decoration: none;
  background: transparent !important;
  transform-origin: center;
  transition: transform .2s ease, filter .2s ease;
}
.hero-nav-item > img { position:absolute; top:50%; left:50%; display:block; width:100%; height:auto; transform:translate(-50%,-50%) scaleX(1.08) scaleY(.9); transform-origin:center; pointer-events:none; }
.hero-nav-item:hover, .hero-nav-item:focus-visible { z-index:5; background-color:transparent !important; filter:brightness(1.08); transform:scale(1.08); }
.hero-nav-item:active { transform:scale(1.04); }
html.plaque-wave-enabled .hero-nav > *, html.plaque-wave-enabled .mobile-wood-nav > *, html.plaque-wave-enabled .login-button, html.plaque-wave-enabled .mobile-login { opacity:0; }
.hero-platform-plaque.is-wave-entered, .hero-nav-item.is-wave-entered { animation:plaque-wave-enter .68s cubic-bezier(.18,.72,.24,1) both; }
.login-button.is-wave-entered, .mobile-login.is-wave-entered { animation:plaque-wave-enter .68s cubic-bezier(.18,.72,.24,1) both; }
.hero-nav > :nth-child(1).is-wave-entered { animation-delay:0s; }
.hero-nav > :nth-child(2).is-wave-entered { animation-delay:.08s; }
.hero-nav > :nth-child(3).is-wave-entered { animation-delay:.16s; }
.hero-nav > :nth-child(4).is-wave-entered { animation-delay:.24s; }
.hero-nav > :nth-child(5).is-wave-entered { animation-delay:.32s; }
.hero-nav > :nth-child(6).is-wave-entered { animation-delay:.4s; }
@keyframes plaque-wave-enter { 0% { opacity:0; transform:translateY(16px) scale(.82) rotate(-3deg); } 58% { opacity:1; transform:translateY(-5px) scale(1.04) rotate(1.5deg); } 78% { transform:translateY(2px) scale(.99) rotate(-.5deg); } 100% { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .hero-platform-plaque, .hero-nav-item, .hero-platform-plaque img, .login-button, .login-button img, .mobile-login { animation:none !important; transition:none !important; } }
.mode-links a:hover,
.arsenal-links a:hover { transform: translateY(-3px); filter: brightness(1.12); }

.feature-list {
  position: absolute;
  top: 22%;
  left: 14%;
  display: grid;
  width: 72%;
  height: 54%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 3% 8%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  isolation: isolate;
}
.feature-card-art {
  position: absolute;
  z-index: 1;
  top: -10%;
  left: 50%;
  display: block;
  width: 132%;
  height: 105%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 3px rgba(78, 42, 12, .22));
  animation: feature-float 5.5s ease-in-out infinite;
  transition: filter .2s ease;
}
.feature-card:nth-child(2) .feature-card-art { animation-delay: -.9s; }
.feature-card:nth-child(3) .feature-card-art { animation-delay: -1.8s; }
.feature-card:nth-child(4) .feature-card-art { animation-delay: -2.7s; }
.feature-card:nth-child(5) .feature-card-art { animation-delay: -3.6s; }
.feature-card:nth-child(6) .feature-card-art { animation-delay: -4.5s; }
.feature-card:hover .feature-card-art { filter: drop-shadow(0 8px 6px rgba(78, 42, 12, .34)) brightness(1.06); }
.feature-card:hover .feature-card-copy-art {
  filter: drop-shadow(0 8px 6px rgba(78, 42, 12, .34)) brightness(1.04);
  transform: translate(-50%, -2px);
}



@keyframes feature-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
.why-mascot {
  position: absolute;
  z-index: 31;
  bottom: 7%;
  left: 50%;
  display: block;
  width: clamp(130px, 14vw, 245px);
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 7px 5px rgba(67, 35, 16, .28));
  animation: mascot-float 5s ease-in-out infinite;
}
@keyframes mascot-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

.pass-title-frame { top: 0; height: clamp(118px, 14vw, 184px); }
.pass-title-frame .ornate-title-copy { inset: 23% 14% 17%; }
.pass-intro {
  position: absolute;
  top: 19%;
  left: 50%;
  width: 54%;
  margin: 0;
  transform: translateX(-50%);
  color: #fff1c8;
  font-size: clamp(.75rem, 1.18vw, 1.25rem);
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px #57200e;
}
.pass-levels {
  position: absolute;
  left: 12%;
  display: flex;
  width: 76%;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pass-levels--free { top: 28%; }
.pass-levels--premium { top: 54%; }
.pass-levels li {
  display: grid;
  width: clamp(36px, 4vw, 66px);
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid #ffdb77;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7ce, #d48a16 58%, #66280f 100%);
  box-shadow: 0 0 0 3px #6e2c11, 0 3px 8px rgba(4, 11, 42, .55), inset 0 0 0 2px rgba(255,255,255,.45);
  color: #fff;
  font-size: clamp(.78rem, 1.3vw, 1.3rem);
  font-weight: 1000;
  text-shadow: 0 2px 3px #2b150e;
  animation: marker-glow 3.8s ease-in-out infinite;
}
.pass-levels li:nth-child(2n) { animation-delay: -.6s; }
.pass-levels li:nth-child(3n) { animation-delay: -1.2s; }
.pass-cta { top: 76%; left: 50%; width: min(38%, 690px); height: 14%; transform: translateX(-50%); }

.mode-links,
.arsenal-links {
  position: absolute;
  left: 7%;
  display: grid;
  width: 86%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3%;
}
.mode-links { top: 64%; }
.mode-links a,
.arsenal-links a {
  display: flex;
  min-height: clamp(66px, 8vw, 112px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: url("assets/ui/03-placa-pequena-vazia.png") center / 100% 100% no-repeat;
  color: #fff2bd;
  font-family: Georgia, serif;
  font-size: clamp(.76rem, 1.3vw, 1.35rem);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px #2a1a11, 0 3px 5px #281608;
  text-transform: uppercase;
  transition: transform .18s ease, filter .18s ease;
}
.mode-links small { display: block; margin-top: 3px; font-family: Arial, sans-serif; font-size: .72em; font-weight: 700; }
.arsenal-links { top: 58%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5%; }
.arsenal-links a { min-height: clamp(58px, 7vw, 96px); font-size: clamp(.65rem, 1vw, 1rem); }

.final-title-frame { top: 16%; width: min(72%, 1260px); height: clamp(135px, 17vw, 220px); }
.final-title-frame .ornate-title-copy { inset: 24% 13% 17%; }
.final-title-frame .ornate-title-copy h2 { font-size: clamp(1.35rem, 2.5vw, 3rem); }
.final-cta { top: 57%; left: 50%; width: min(39%, 710px); height: 15%; transform: translateX(-50%); }
.benefits {
  position: absolute;
  top: 76%;
  left: 24%;
  display: flex;
  width: 52%;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.benefits li {
  padding: 9px 14px;
  border: 1px solid rgba(255, 222, 105, .68);
  border-radius: 999px;
  background: rgba(6, 24, 65, .76);
  color: #fff1bd;
  font-size: clamp(.7rem, 1vw, 1rem);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.site-footer {
  position: relative;
  z-index: 1;
  height: calc(var(--overlap) + 260px);
  margin-top: calc(var(--overlap) * -1);
  padding-top: var(--overlap);
}
.footer-frame {
  position: absolute;
  top: -125px;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.footer-logo,
.footer-nav,
.footer-status { z-index: 30; }
.footer-logo {
  position: absolute;
  top: calc(var(--overlap) + 35px);
  left: 4%;
  width: min(18%, 320px);
  height: auto;
  animation: logo-bob 7s ease-in-out infinite reverse;
}
.footer-nav {
  position: absolute;
  top: calc(var(--overlap) + 95px);
  left: 27%;
  display: grid;
  width: 47%;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  gap: 14px 24px;
}
.footer-nav a {
  color: #fff2bf;
  font-size: clamp(.75rem, 1.1vw, 1.1rem);
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 2px #061a48;
}
.footer-status {
  position: absolute;
  top: calc(var(--overlap) + 82px);
  right: 3.2%;
  margin: 0;
  color: #fff0b9;
  font-size: clamp(.7rem, 1vw, .95rem);
  font-weight: 800;
  line-height: 1.7;
  text-align: left;
  text-shadow: 0 2px #061a48;
}
.footer-copyright {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: 1%;
  left: 0;
  width: 100%;
  margin: 0;
  color: #aec0da;
  font: 700 clamp(.68rem, .9vw, .88rem) / 1.4 'Barlow Condensed', sans-serif;
  text-align: center;
  text-shadow: 0 2px #061a48;
}
.footer-status i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: #5fee49; box-shadow: 0 0 10px #5fee49; }
.footer-status small { font-size: .76em; font-weight: 500; }

@keyframes scene-drift {
  from { translate: 0 0; }
  to { translate: 0 -7px; }
}
@keyframes mist-drift {
  from { transform: translateX(-1.2%) translateY(2px) scale(1.01); }
  to { transform: translateX(1.2%) translateY(-3px) scale(1.04); }
}
@keyframes character-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@keyframes trajectory-glow {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}
@keyframes grenade-toss {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 3.36px -4.2px; rotate: 2.94deg; }
}
@keyframes logo-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@keyframes frame-glint {
  0%, 84%, 100% { filter: brightness(1); }
  90% { filter: brightness(1.08); }
}
@keyframes button-breathe {
  0%, 100% { filter: drop-shadow(0 9px 10px rgba(3, 10, 38, .45)); }
  50% { filter: drop-shadow(0 12px 13px rgba(3, 10, 38, .58)) brightness(1.025); }
}
@keyframes marker-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}

@media (max-width: 1100px) {
  :root { --overlap: 130px; --band-height: 210px; }
  .scene--why .scene-art { top: 0; height: 100%; object-fit: contain; }
  .ornate-title { width: 76%; }
  .hero-title-frame { width: 74%; }
  .hero-header-art { width: 52%; height: auto; max-height: 34%; }
  .hero-cta-art { top: 63%; width: min(44%, 800px); }
  .hero-nav { top: calc(100% - 76px); left: 13.25%; width: 73.5%; }
  .pass-levels { left: 10%; width: 80%; }
  .mode-links { top: 66%; }
  .arsenal-links { top: 61%; }
  .footer-nav { left: 27%; width: 46%; gap: 10px 14px; }
}

@media (max-width: 640px) {
  :root { --overlap: 72px; --band-height: 132px; }
  html { scroll-behavior: auto; }
  body { background-attachment: scroll; background-size: auto 100vh; }
  .scene {
    height: 680px;
    min-height: 680px;
    aspect-ratio: auto;
  }
  .scene--hero { height: 760px; min-height: 760px; }
  .scene--hero,
  .scene--why,
  .scene--pass,
  .scene--modes,
  .scene--arsenal,
  .scene--final {
    background: var(--navy) url("assets/global/01-world-background-soft-v1.png") center center / auto 100vh fixed no-repeat;
  }
  .scene + .scene { margin-top: calc(var(--overlap) * -1); }
  .scene--why { margin-top: 0; height: 900px; min-height: 900px; }
  .scene--why .scene-content { inset: 0; height: 100%; }
  .scene-art {
    top: 0;
    left: 50%;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
  }
  .scene--hero .scene-art,
  .scene--hero .hero-character,
  .scene--hero .hero-fx { top: 20%; left: -13%; width: auto; height: 62%; transform: none; }
  .scene--pass .scene-art,
  .scene--modes .scene-art,
  .scene--arsenal .scene-art,
  .scene--final .scene-art { top: 14%; height: 74%; }
  .scene-content { inset: var(--overlap) 0 0; height: calc(100% - var(--overlap)); }
  .scene--hero .scene-content { inset: 0; height: 100%; }
  .transition-band { top: calc(var(--overlap) - var(--band-height) / 2); }
  .transition-band--book { top: calc(var(--band-height) / -2); }
  .transition-band img { width: max(150%, 700px); }
  .transition-band--pass img,
  .transition-band--modes img,
  .transition-band--arsenal img,
  .transition-band--arena img,
  .transition-band--footer img { width: max(150%, 700px); }
  .hero-header-art { top: 1%; width: 70.4%; height: auto; max-height: 34%; }
  .ornate-title { width: 96%; height: 122px; }
  .ornate-title-copy { inset: 24% 12% 16%; gap: 4px; }
  .ornate-title-copy h1,
  .ornate-title-copy h2 { font-size: clamp(1.35rem, 6vw, 2rem); }
  .ornate-title-copy p:not(.eyebrow) { font-size: .78rem; }
  .eyebrow { font-size: .58rem; }
  .hero-title-frame { top: 24%; width: 100%; height: 130px; }
  .hero-title-frame .ornate-title-copy { inset: 28% 12% 16%; }
  .hero-cta-art { top: 57%; width: 78%; height: auto; aspect-ratio: 2061 / 550; }
  .login-button { top: 2%; right: 4%; min-width: 92px; min-height: 42px; padding: 7px 15px; font-size: .8rem; }
  .hero-nav {
    top: calc(100% - 82px);
    left: 5.9%;
    width: 88.2%;
    height: 88px;
  }
  .hero-nav a { min-height: 44px; }
  .hero-nav-art { width: 100%; }
  .section-title-frame { top: 1%; width: 100%; height: 120px; }
  .why-title-frame { top: 4%; width: 98%; }
  .feature-list {
    top: 18%;
    left: 7%;
    width: 86%;
    height: 72%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px 6px;
  }
  .feature-card-art { top: 0; width: 110%; height: 94%; }
  .feature-card-copy-art { width: 108%; }
  .why-mascot { bottom: 0; width: 110px; }
  .pass-title-frame { height: 115px; }
  .pass-intro { top: 23%; width: 84%; font-size: .72rem; }
  .pass-levels { left: 8%; width: 84%; }
  .pass-levels--free { top: 32%; }
  .pass-levels--premium { top: 54%; }
  .pass-levels li { width: clamp(30px, 8vw, 40px); border-width: 2px; font-size: .7rem; }
  .pass-cta { top: 75%; width: 82%; height: 88px; min-width: 0; font-size: 1.2rem; }
  .mode-links,
  .arsenal-links {
    top: 47%;
    left: 7%;
    width: 86%;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .mode-links a,
  .arsenal-links a { min-height: 56px; padding: 7px; font-size: .84rem; }
  .mode-links small { font-size: .68em; }
  .arsenal-links { top: 50%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .arsenal-links a { min-height: 52px; font-size: .68rem; }
  .final-title-frame { top: 22%; width: 100%; height: 142px; }
  .final-title-frame .ornate-title-copy h2 { font-size: clamp(1.2rem, 5vw, 1.75rem); }
  .final-cta { top: 57%; width: 82%; height: 90px; min-width: 0; font-size: 1.25rem; }
  .benefits { top: 73%; left: 8%; width: 84%; flex-direction: column; gap: 6px; }
  .benefits li { padding: 6px 10px; font-size: .68rem; }
  .site-footer {
    height: calc(var(--overlap) + 270px);
    margin-top: calc(var(--overlap) * -1);
    padding-top: var(--overlap);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(5, 19, 56, .7), #071d50 22%);
  }
  .footer-frame { top: -15px; left: -30%; width: 160%; opacity: .75; }
  .footer-logo { top: calc(var(--overlap) + 26px); left: 50%; width: 48%; transform: translateX(-50%); }
  .footer-nav {
    top: calc(var(--overlap) + 114px);
    left: 7%;
    width: 86%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
    justify-items: center;
  }
  .footer-nav a { font-size: .68rem; text-align: center; }
  .footer-status { top: calc(var(--overlap) + 190px); right: 0; left: 0; font-size: .68rem; text-align: center; }
  .footer-status small { font-size: .78em; }
}

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