/* ==========================================================================
   Narwhal Polo — site styles
   ========================================================================== */

:root {
  --navy-950: #041233;
  --navy-900: #071d4f;
  --navy-800: #0a2463;
  --navy-700: #0f3a8c;
  --blue-600: #1552d6;
  --blue-500: #1d63ff;
  --blue-400: #4a8dff;
  --sky-300: #8fd3ff;
  --sky-100: #dff1ff;
  --ice-50: #f2f9ff;
  --night-900: #08173f;
  --gold-300: #ffe066;
  --gold-400: #ffd02a;
  --gold-500: #ffb703;
  --orange-500: #ff7a00;
  --ink: #0b1f4d;
  --ink-soft: #3d5180;
  --white: #fff;

  --purple: #9b2bd6;
  --pink: #e83e9c;
  --green: #16a36b;

  --font-display: "Lilita One", "Arial Black", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 18px 40px -18px rgba(9, 38, 104, .45), 0 2px 6px rgba(9, 38, 104, .08);
  --shadow-pop: 0 26px 60px -20px rgba(4, 18, 51, .6);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 76px;
  --sea-rise: 220px; /* how far the footer's sea rises behind the community section */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ice-50);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dialog { padding: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: middle; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--gold-400); color: var(--ink); padding: 10px 16px; border-radius: 10px;
  font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
.eyebrow {
  font-weight: 900; font-size: 13px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--blue-600); margin-bottom: 12px;
}
.eyebrow--light { color: var(--sky-300); }
.title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 5.2vw, 58px); letter-spacing: .01em; color: var(--navy-900);
}
.title--light { color: var(--white); text-shadow: 0 4px 0 rgba(4, 18, 51, .35); }
.title--sm { font-size: clamp(28px, 3.4vw, 40px); }
.accent { color: var(--blue-500); }
.accent-gold { color: var(--gold-400); }

.section-head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head__lede { max-width: 620px; margin: 16px auto 0; color: var(--ink-soft); font-weight: 700; font-size: 18px; }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; text-align: left; gap: 24px; }
.section-head--split {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: end; text-align: left;
}
.section-head__copy { color: var(--ink-soft); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  --btn-depth: 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .82em 1.5em; border-radius: 999px; border: 0;
  font-family: var(--font-body); font-weight: 900; font-size: 17px; line-height: 1; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.btn--gold {
  color: var(--navy-900);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 var(--btn-depth) 0 #d27c00, 0 12px 24px -10px rgba(255, 140, 0, .8), inset 0 2px 0 rgba(255, 255, 255, .6);
}
.btn--ghost {
  color: var(--white);
  background: rgba(10, 36, 99, .55);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9), 0 10px 24px -12px rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
}
.btn:hover { transform: translateY(-2px); }
.btn--gold:hover { box-shadow: 0 calc(var(--btn-depth) + 2px) 0 #d27c00, 0 16px 30px -10px rgba(255, 140, 0, .9), inset 0 2px 0 rgba(255, 255, 255, .6); }
.btn--ghost:hover { background: rgba(29, 99, 255, .55); }
.btn:active { transform: translateY(2px); }
.btn--lg { font-size: 19px; padding: .78em 1.5em .78em 1.1em; }
.btn--sm { font-size: 15px; padding: .7em 1.2em; --btn-depth: 3px; }
.btn__disc {
  display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: var(--navy-900); color: var(--gold-400);
}
.btn__disc .icon { width: .95em; height: .95em; margin-left: .12em; }

.round-btn {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); color: var(--white);
  transition: background .2s, transform .2s, color .2s;
}
.round-btn:hover { background: var(--white); color: var(--navy-800); transform: scale(1.06); }
.round-btn[disabled] { opacity: .35; pointer-events: none; }

.pill {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45em 1em; border-radius: 999px;
  background: rgba(4, 18, 51, .55); color: var(--white); font-weight: 800; font-size: 14px;
  box-shadow: inset 0 0 0 2px rgba(143, 211, 255, .55);
  backdrop-filter: blur(6px);
}
.pill .icon { color: var(--sky-300); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 14px 0 auto; z-index: 50; padding-inline: var(--gutter);
  transition: inset .3s ease;
}
.nav__bar {
  max-width: 1000px; margin-inline: auto; height: 62px;
  display: flex; align-items: center; gap: 18px; padding: 0 10px 0 16px;
  background: rgba(7, 29, 79, .72); border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(143, 211, 255, .25), 0 14px 30px -14px rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px) saturate(1.4);
  transition: background .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled .nav__bar { background: rgba(7, 29, 79, .94); }
.nav__logo img { width: 104px; height: auto; transition: transform .25s ease; }
.nav__logo:hover img { transform: rotate(-3deg) scale(1.05); }
.nav__links { display: flex; gap: 4px; margin-inline: auto; }
.nav__links a {
  color: rgba(255, 255, 255, .88); text-decoration: none; font-weight: 800; font-size: 15px;
  padding: 8px 14px; border-radius: 999px; transition: background .2s, color .2s;
}
.nav__links a:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.nav__links a.is-active { background: var(--white); color: var(--navy-900); }
.nav__toggle {
  display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .12); color: var(--white);
}
.nav__toggle .icon { width: 22px; height: 22px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(660px, min(100svh, 960px));
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 40px) 0 150px;
  color: var(--white);
  background: var(--navy-800);
}
/* The background only ever drifts downward (it lags the scroll), so it needs
   just enough overscan for the pointer parallax. */
.hero__layer { position: absolute; inset: -24px -2%; z-index: -3; will-change: translate; }
/* Mirrored so the ball and the leaping narwhal sit right of the headline
   (the mallet ends up in the left hand, which the game supports). */
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transform: scaleX(-1); }
.hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 22, 68, .92) 0%, rgba(8, 36, 104, .72) 30%, rgba(10, 40, 110, .2) 55%, rgba(10, 40, 110, 0) 70%),
    linear-gradient(180deg, rgba(5, 22, 68, .55) 0%, rgba(5, 22, 68, 0) 22%);
}
.hero__snow { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero__content { position: relative; z-index: 2; will-change: translate, opacity; }
.hero__content > * { max-width: 600px; }
.hero__title { margin: 22px 0 18px; }
.hero__logo {
  width: clamp(250px, 34vw, 470px); height: auto; transform: rotate(-5deg); transform-origin: left center;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
  animation: logo-in 1s cubic-bezier(.2, 1.4, .4, 1) both;
}
.hero__tagline {
  display: block; margin-top: 14px;
  font-family: var(--font-display); font-weight: 400; text-transform: none;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.02;
  transform: rotate(-4deg) skewX(-6deg); transform-origin: left center;
  text-shadow: 0 3px 0 #0d47c4, 0 6px 0 #082d82, 0 14px 24px rgba(0, 0, 0, .45);
}
.hero__tagline span { display: block; animation: rise-in .8s .25s cubic-bezier(.2, 1, .3, 1) both; }
.hero__tagline span + span { padding-left: 1.1em; animation-delay: .38s; }
.hero__lede { font-size: clamp(17px, 1.5vw, 19px); font-weight: 700; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; font-weight: 900; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.hero__meta li { display: inline-flex; align-items: center; gap: .6em; }
.hero__meta .icon { width: 1.7em; height: 1.7em; color: var(--white); }

@keyframes logo-in { from { opacity: 0; transform: rotate(-14deg) scale(.6); } to { opacity: 1; transform: rotate(-5deg) scale(1); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* Floating scoreboard. Sized in em: --sb-size scales the whole board. */
.scoreboard-wrap { position: absolute; z-index: 1; top: calc(var(--nav-h) + 40px); right: max(var(--gutter), 4vw); }
.scoreboard {
  --sb-size: 18px;
  position: relative; font-size: var(--sb-size); width: 25em; padding: 1.2em 1.4em 1.4em; border-radius: 1.4em;
  background: linear-gradient(180deg, #1a1d2e, #0d0f1a); color: var(--white);
  box-shadow: inset 0 0 0 .3em #3a3f57, 0 26px 40px -16px rgba(0, 0, 0, .7);
  transform: perspective(1200px) rotateY(-16deg) rotateZ(-3deg);
  animation: bob 6s ease-in-out infinite;
}
.scoreboard__top { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 2.2em; letter-spacing: .04em; line-height: 1.1; }
.scoreboard__top b { font-weight: 400; }
.scoreboard__teams { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: .8em; margin-top: .6em; }
.scoreboard__teams img { height: 4.8em; width: 100%; object-fit: contain; }
.scoreboard__teams i { width: .3em; height: 4em; background: #fff; border-radius: .2em; }
.scoreboard__score { font-family: var(--font-display); font-weight: 400; font-size: 4.6em; line-height: 1; transition: transform .3s; }
.scoreboard__score--home { color: #ff4dff; text-shadow: 0 0 .3em rgba(255, 77, 255, .6); }
.scoreboard__score--away { color: #33f2a0; text-shadow: 0 0 .3em rgba(51, 242, 160, .6); }
.scoreboard__score.is-bump { animation: bump .6s ease; }
.scoreboard__goal {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  font-family: var(--font-display); font-size: 5.4em; color: var(--gold-400);
  background: rgba(13, 15, 26, .92); opacity: 0; pointer-events: none;
  text-shadow: 0 .07em 0 #c46a00;
}
.scoreboard__goal.is-on { animation: goal 1.8s ease both; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes goal { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.08); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* Hero bottom edge + floes */
.hero__edge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(60px, 8vw, 110px); z-index: 3; }
.hero__floes { position: absolute; inset: auto 0 0; height: 200px; z-index: 2; pointer-events: none; }
.floe { position: absolute; display: block; }
.floe--1 { width: 230px; height: 73px; left: 3%; bottom: 64px; }
.floe--3 { width: 300px; height: 95px; right: 2%; bottom: 74px; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { position: relative; isolation: isolate; overflow-x: hidden; }
/* clip (unlike hidden) keeps sections from becoming scroll containers */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
  .section { overflow-x: clip; }
}
.section--ice {
  background:
    radial-gradient(1200px 500px at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    var(--ice-50);
}
/* Hazy ice spires rising at the edges of the light sections */
.spires { position: absolute; z-index: -1; display: block; width: 340px; height: 434px; pointer-events: none; opacity: .9; }
.spires--l { left: -60px; top: 0; }
.spires--r { right: -80px; top: 50px; width: 300px; height: 383px; transform: scaleX(-1); }
.spires--l2 { left: -90px; top: 10px; width: 300px; height: 383px; }
.spires--r2 { right: -60px; top: -10px; transform: scaleX(-1); }
.spires--r3 { right: -80px; top: 70px; width: 300px; height: 383px; transform: scaleX(-1); }

/* Icebergs floating in the water sections */
.berg { position: absolute; z-index: 0; display: block; width: 320px; height: 230px; pointer-events: none; filter: drop-shadow(0 12px 18px rgba(4, 18, 51, .22)); }

/* Water: two drifting layers of game-style caustics. Each layer only moves
   by whole tiles, so the loop is seamless; transforms keep it on the GPU. */
.water { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .45) 100%); }
.water__layer { position: absolute; background-repeat: repeat; will-change: transform; }
.water__layer--a { inset: -420px 0 0 -420px; background-image: url("/img/fx/caustics-a.webp"); background-size: 420px 420px; opacity: .42; animation: water-a 30s linear infinite; }
.water__layer--b { inset: -640px -640px 0 0; background-image: url("/img/fx/caustics-b.webp"); background-size: 640px 640px; opacity: .28; animation: water-b 46s linear infinite; }
@keyframes water-a { to { transform: translate3d(420px, 420px, 0); } }
@keyframes water-b { to { transform: translate3d(-640px, 640px, 0); } }
.water__rays {
  position: absolute; inset: -10% -20% 35%; transform-origin: 50% 0;
  background: repeating-linear-gradient(100deg, transparent 0 70px, rgba(200, 240, 255, .1) 70px 110px, transparent 110px 190px, rgba(200, 240, 255, .06) 190px 210px, transparent 210px 300px);
  filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
  animation: rays 14s ease-in-out infinite alternate;
}
@keyframes rays { from { transform: skewX(-8deg); } to { transform: skewX(8deg); } }
.is-paused .water__layer, .is-paused .water__rays { animation-play-state: paused; }
/* 3D water: the caustic layers sit on a plane hinged at the bottom edge and
   tilted away from the viewer, so the light pattern recedes toward a horizon */
.water__plane { position: absolute; transform-origin: 50% 100%; }
.water--gallery { perspective: 900px; perspective-origin: 50% -20%; }
.water--gallery .water__plane { inset: -110% -70% 0; transform: rotateX(48deg); }

.wave { position: absolute; left: 0; width: 100%; height: clamp(50px, 6vw, 90px); pointer-events: none; z-index: 2; }
.wave--top { top: -1px; }
.wave--bottom { bottom: -1px; }

/* ---------- Features ---------- */
.features { padding: clamp(40px, 6vw, 80px) 0 clamp(150px, 16vw, 220px); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feature-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 12px 12px 26px;
  box-shadow: var(--shadow-card);
  transition: transform .35s cubic-bezier(.2, 1, .3, 1), box-shadow .35s;
}
.feature-card:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--shadow-pop); }
.feature-card__media { position: relative; border-radius: var(--radius-md); aspect-ratio: 16 / 11; margin-bottom: 40px; }
.feature-card__media img {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md);
  transition: transform .6s cubic-bezier(.2, 1, .3, 1);
}
.feature-card:hover .feature-card__media img { transform: scale(1.04); }
.feature-card__badge {
  position: absolute; left: 14px; bottom: -28px; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  border: 4px solid var(--white); box-shadow: 0 8px 16px -6px rgba(0, 0, 0, .35);
}
.feature-card__badge .icon { width: 28px; height: 28px; }
.feature-card__badge--purple { background: linear-gradient(140deg, #c04bff, #7c1fb5); }
.feature-card__badge--blue { background: linear-gradient(140deg, #46a2ff, #1552d6); }
.feature-card__badge--pink { background: linear-gradient(140deg, #ff5fb4, #c51f7f); }
.feature-card__badge--green { background: linear-gradient(140deg, #2ed58f, #0b7f50); }
.feature-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 23px; padding-inline: 10px; color: var(--navy-900); }
.feature-card p { padding: 8px 10px 0; color: var(--ink-soft); font-size: 15.5px; font-weight: 600; }

/* ---------- Gallery ---------- */
.section--deep {
  color: var(--white);
  background:
    radial-gradient(900px 300px at 50% 0%, rgba(120, 220, 255, .35), transparent 70%),
    linear-gradient(180deg, #1a86e4 0%, #0f63cf 20%, #0b49ad 55%, #083688 100%);
}
.gallery { padding: clamp(150px, 15vw, 200px) 0 clamp(170px, 17vw, 230px); overflow: hidden; }
.gallery .container, .gallery__track, .gallery__progress { position: relative; z-index: 1; }
.berg--gl { width: 300px; height: 216px; left: -130px; top: 64px; }
.berg--gr { width: 380px; height: 273px; right: -150px; bottom: 70px; transform: scaleX(-1); }
.gallery__nav { display: flex; gap: 12px; }
.gallery__track {
  display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px max(var(--gutter), calc((100vw - var(--container)) / 2)) 30px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  cursor: grab;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery__track.is-dragging .shot__btn { pointer-events: none; }
.shot { flex: 0 0 clamp(270px, 31vw, 420px); margin: 0; scroll-snap-align: start; }
.shot__btn {
  position: relative; display: block; width: 100%; padding: 0; border: 4px solid rgba(223, 241, 255, .95);
  border-radius: var(--radius-md); overflow: hidden; background: var(--navy-900);
  aspect-ratio: 16 / 10; box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .7);
  transition: transform .35s cubic-bezier(.2, 1, .3, 1), border-color .3s;
}
.shot__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, 1, .3, 1); }
.shot__btn:hover { transform: translateY(-6px); border-color: var(--gold-400); }
.shot__btn:hover img { transform: scale(1.06); }
.shot__zoom {
  position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; padding: 8px;
  border-radius: 50%; background: rgba(4, 18, 51, .6); color: var(--white);
  opacity: 0; transform: scale(.7); transition: opacity .25s, transform .25s;
}
.shot__btn:hover .shot__zoom, .shot__btn:focus-visible .shot__zoom { opacity: 1; transform: none; }
.shot figcaption { margin-top: 12px; font-weight: 800; color: rgba(255, 255, 255, .88); font-size: 15px; }
.gallery__progress {
  width: min(260px, 50vw); height: 6px; margin: 10px auto 0; border-radius: 3px;
  background: rgba(255, 255, 255, .18); overflow: hidden;
}
.gallery__progress span { display: block; height: 100%; width: 20%; border-radius: inherit; background: var(--gold-400); transform-origin: left; transition: transform .15s linear; }

/* ---------- Arenas / Teams ---------- */
.arenas { padding: clamp(70px, 8vw, 110px) 0 clamp(140px, 14vw, 190px); }
/* A narwhal leaping out of the gallery's water, over the section edge */
.leap { position: absolute; z-index: 3; right: 21%; top: -262px; width: 140px; pointer-events: none; }
.leap__narwhal {
  position: relative; z-index: 1; width: 100%; height: auto; transform-origin: 12% 100%;
  filter: drop-shadow(0 16px 16px rgba(4, 18, 51, .22));
  animation: leap-sway 4s ease-in-out infinite;
}
.leap__splash {
  position: absolute; z-index: 2; left: -42%; bottom: -30px; width: 96px; height: 96px;
  background: url("/img/sprites/splash.webp") 0 0 / 384px 96px no-repeat;
  animation: splash 1.1s steps(4) infinite;
}
@keyframes leap-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg) translateY(-8px); } }
@keyframes splash { to { background-position: -384px 0; } }
.teams { --team: #00a878; --team2: #7dffd0; }
.teams__tabs {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin-bottom: 26px;
}
.team-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px 12px; border: 0; border-radius: var(--radius-md);
  background: var(--white); color: var(--ink-soft); font-weight: 900; font-size: 13px; letter-spacing: .02em;
  box-shadow: var(--shadow-card);
  transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), box-shadow .3s, color .3s;
}
.team-tab img { height: 58px; width: 100%; object-fit: contain; transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.team-tab:hover { transform: translateY(-4px); }
.team-tab:hover img { transform: scale(1.08) rotate(-4deg); }
.team-tab[aria-selected="true"] {
  color: var(--navy-900); transform: translateY(-6px);
  box-shadow: 0 0 0 4px var(--team), 0 20px 34px -14px var(--team);
}
.team-tab[aria-selected="true"]::after {
  content: ""; position: absolute; bottom: -14px; left: 50%; width: 16px; height: 16px;
  background: var(--team); transform: translateX(-50%) rotate(45deg); border-radius: 3px;
}
.teams__panels { position: relative; }
.arena {
  display: grid; grid-template-columns: 1.35fr 1fr; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-pop);
  border: 4px solid var(--team);
  transition: border-color .4s;
}
.arena[hidden] { display: none; }
.arena.is-entering .arena__media img { animation: arena-img .7s cubic-bezier(.2, 1, .3, 1) both; }
.arena.is-entering .arena__body > * { animation: rise-in .55s cubic-bezier(.2, 1, .3, 1) both; }
.arena.is-entering .arena__body > *:nth-child(2) { animation-delay: .05s; }
.arena.is-entering .arena__body > *:nth-child(3) { animation-delay: .1s; }
.arena.is-entering .arena__body > *:nth-child(4) { animation-delay: .15s; }
.arena.is-entering .arena__body > *:nth-child(5) { animation-delay: .2s; }
@keyframes arena-img { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.arena__media { position: relative; overflow: hidden; min-height: 300px; background: var(--navy-900); }
.arena__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arena__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 70%, rgba(255, 255, 255, .25));
}
.arena__body {
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--team2) 14%, white) 0%, white 55%);
}
.arena__team {
  display: inline-block; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
  background: var(--team); color: var(--white); font-weight: 900; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.arena__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 46px); text-transform: uppercase; color: var(--navy-900); }
.arena__where { margin: 6px 0 14px; color: var(--blue-600); font-weight: 900; letter-spacing: .04em; }
.arena__where::before { content: "📍"; margin-right: 6px; font-size: .9em; }
.arena__body > p:not([class]) { color: var(--ink-soft); font-weight: 600; }
.arena__facts { display: grid; gap: 10px; margin: 22px 0 0; padding-top: 18px; border-top: 2px dashed var(--sky-100); }
.arena__facts div { display: flex; gap: 12px; }
.arena__facts dt { flex: 0 0 52px; font-weight: 900; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--team); padding-top: 3px; }
.arena__facts dd { margin: 0; font-weight: 800; }

/* ---------- Modes ---------- */
.section--night {
  color: var(--white);
  background: linear-gradient(180deg, #08173f 0%, #0b2462 60%, #08173f 100%);
}
.modes { padding: clamp(140px, 14vw, 180px) 0 clamp(120px, 12vw, 170px); overflow: hidden; }
.aurora {
  position: absolute; inset: -10% -10% 40%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .55;
  background:
    radial-gradient(40% 50% at 20% 40%, rgba(46, 255, 170, .55), transparent 70%),
    radial-gradient(35% 45% at 60% 30%, rgba(200, 60, 255, .5), transparent 70%),
    radial-gradient(30% 40% at 85% 50%, rgba(60, 160, 255, .5), transparent 70%);
  animation: aurora 16s ease-in-out infinite alternate;
}
@keyframes aurora { from { transform: translateX(-4%) skewX(-6deg); } to { transform: translateX(5%) skewX(8deg); } }
.modes__layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.road { position: relative; }
.road__track { position: absolute; left: 27px; top: 30px; bottom: 30px; width: 4px; border-radius: 2px; background: rgba(143, 211, 255, .2); }
.road__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--sky-300), var(--gold-400)); transform-origin: top; transform: scaleY(var(--road, 0)); }
.road__stops { display: grid; gap: 30px; }
.road__stop { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 20px; }
.road__dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--navy-800); color: var(--sky-300); box-shadow: inset 0 0 0 3px rgba(143, 211, 255, .45);
  transition: background .4s, color .4s, box-shadow .4s, transform .4s cubic-bezier(.2, 1.6, .4, 1);
}
.road__dot .icon { width: 26px; height: 26px; }
.road__stop.is-lit .road__dot { background: var(--sky-300); color: var(--navy-900); box-shadow: 0 0 0 6px rgba(143, 211, 255, .2), 0 0 26px rgba(143, 211, 255, .7); transform: scale(1.06); }
.road__stop--cup.is-lit .road__dot { background: var(--gold-400); box-shadow: 0 0 0 6px rgba(255, 208, 42, .25), 0 0 34px rgba(255, 208, 42, .85); }
.road__stop h3 { font-family: var(--font-display); font-weight: 400; font-size: 28px; text-transform: uppercase; margin-top: 4px; }
.road__stop--cup h3 { color: var(--gold-400); }
.road__stop p { color: rgba(255, 255, 255, .8); font-weight: 600; margin-top: 6px; }
.road__games { display: flex; gap: 8px; margin-top: 14px; }
.road__games li { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .15); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); transition: background .3s, box-shadow .3s; }
.road__stop.is-lit .road__games li { background: var(--sky-300); box-shadow: none; transition-delay: calc(var(--i, 0) * 90ms); }
.road__bracket { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.road__bracket li {
  padding: 5px 12px; border-radius: 8px; font-weight: 900; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
}
.road__bracket li + li { position: relative; margin-left: 14px; }
.road__bracket li + li::before { content: "›"; position: absolute; left: -15px; top: 2px; color: var(--sky-300); }

.modes__screens { position: relative; height: 520px; perspective: 1200px; }
.vr-panel {
  position: absolute; margin: 0; width: 78%; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255, 140, 40, .9), 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 40px rgba(255, 140, 40, .25);
}
.vr-panel img { width: 100%; height: auto; }
.vr-panel--a { top: 0; left: 0; transform: rotateY(14deg) rotateZ(-2deg); }
.vr-panel--b { top: 150px; right: 0; width: 72%; transform: rotateY(-12deg) rotateZ(2deg); z-index: 1; }
.vr-panel--c { bottom: 0; left: 10%; width: 60%; transform: rotateY(10deg) rotateZ(-3deg); z-index: 2; }

.mode-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(50px, 6vw, 80px); }
.mode-chip {
  display: flex; gap: 14px; padding: 20px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 2px rgba(143, 211, 255, .18);
  backdrop-filter: blur(6px);
  transition: background .3s, transform .3s;
}
.mode-chip:hover { background: rgba(255, 255, 255, .12); transform: translateY(-4px); }
.mode-chip > .icon { width: 34px; height: 34px; color: var(--sky-300); }
.mode-chip h3 { font-family: var(--font-display); font-weight: 400; font-size: 21px; text-transform: uppercase; }
.mode-chip h3 em {
  display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 8px; border-radius: 6px;
  font-family: var(--font-body); font-style: normal; font-weight: 900; font-size: 11px; letter-spacing: .08em;
  background: var(--gold-400); color: var(--navy-900);
}
.mode-chip p { margin-top: 4px; color: rgba(255, 255, 255, .78); font-size: 15px; font-weight: 600; }
.mode-chip--soon { box-shadow: inset 0 0 0 2px rgba(255, 208, 42, .55); }

/* ---------- Challenges ---------- */
.challenges { padding: clamp(130px, 13vw, 170px) 0 clamp(80px, 9vw, 120px); }
.challenge-showcase { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 50px; }
.showcase-shot { margin: 0; position: relative; }
.showcase-shot__inner { border-radius: var(--radius-lg); overflow: hidden; border: 5px solid var(--white); box-shadow: var(--shadow-pop); }
.showcase-shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.showcase-shot--a { transform: rotate(-1.5deg); }
.showcase-shot--b { transform: rotate(1.5deg) translateY(30px); }
.showcase-shot figcaption {
  position: absolute; z-index: 1; left: 18px; bottom: -16px; padding: 6px 16px; border-radius: 10px;
  font-family: var(--font-display); font-size: 22px; text-transform: uppercase; color: var(--navy-900);
  background: var(--gold-400); box-shadow: 0 4px 0 #d27c00; transform: rotate(-3deg);
}

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 40px 0 26px; }
.filter {
  padding: 10px 18px; border-radius: 999px; border: 0; font-weight: 900; font-size: 15px;
  background: var(--white); color: var(--ink-soft); box-shadow: var(--shadow-card);
  transition: background .25s, color .25s, transform .25s;
}
.filter span { display: inline-block; min-width: 24px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--sky-100); color: var(--blue-600); font-size: 13px; }
.filter:hover { transform: translateY(-2px); }
.filter.is-active { background: var(--navy-800); color: var(--white); }
.filter.is-active span { background: var(--gold-400); color: var(--navy-900); }

.challenge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.challenge {
  position: relative; padding: 22px 20px 20px; border-radius: var(--radius-md); background: var(--white);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 8px;
  transition: transform .3s cubic-bezier(.2, 1, .3, 1), box-shadow .3s;
}
.challenge:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop); }
.challenge[hidden] { display: none; }
.challenge.is-in { animation: pop-in .45s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes pop-in { from { opacity: 0; transform: scale(.9) translateY(14px); } to { opacity: 1; transform: none; } }
.challenge > .icon {
  width: 46px; height: 46px; padding: 10px; border-radius: 14px; color: var(--white);
  background: linear-gradient(140deg, var(--blue-400), var(--blue-600));
}
.challenge[data-kind="shoot"] > .icon { background: linear-gradient(140deg, #ff8a3d, #e04a00); }
.challenge[data-kind="dance"] > .icon { background: linear-gradient(140deg, #ff5fd2, #a800a8); }
.challenge h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--navy-900); }
.challenge p { color: var(--ink-soft); font-size: 15px; font-weight: 600; flex: 1; }
.challenge__venue {
  align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--sky-100); color: var(--blue-600); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.challenge::after {
  content: ""; position: absolute; right: 18px; top: 22px; width: 54px; height: 14px;
  background:
    radial-gradient(circle 7px at 7px 7px, #cd7f32 98%, transparent) 0 0 / 20px 14px no-repeat,
    radial-gradient(circle 7px at 7px 7px, #c0c7d4 98%, transparent) 20px 0 / 20px 14px no-repeat,
    radial-gradient(circle 7px at 7px 7px, #ffc61a 98%, transparent) 40px 0 / 20px 14px no-repeat;
}

.mallets {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 50px); align-items: center;
  margin-top: clamp(70px, 8vw, 110px); padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-pop);
}
.mallets__media { border-radius: var(--radius-md); overflow: hidden; }
.mallets__media img { width: 100%; height: auto; }
.mallets__body > p:not(.eyebrow) { margin: 14px 0 18px; color: var(--ink-soft); font-weight: 600; }
.mallets__list { display: grid; gap: 10px; }
.mallets__list li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink-soft); }
.mallets__list b { color: var(--navy-900); font-weight: 900; }
.mallets__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--white); flex: none; }
.mallets__icon--bolt { background: linear-gradient(140deg, #7d5cff, #3a1fc4); }
.mallets__icon--fire { background: linear-gradient(140deg, #ffb03a, #ff4500); }
.mallets__icon--ice { background: linear-gradient(140deg, #8fe4ff, #1ba1e2); }
.mallets__icon--glove { background: linear-gradient(140deg, #ff6b6b, #c41d1d); }
.mallets__icon--bubble { background: linear-gradient(140deg, #ff9be9, #c247ff); }

.stats {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: clamp(60px, 7vw, 90px);
  padding: 30px clamp(16px, 3vw, 36px); border-radius: var(--radius-lg); text-align: center; color: var(--white);
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(143, 211, 255, .35), transparent 70%),
    linear-gradient(120deg, var(--navy-800), var(--blue-600));
  box-shadow: var(--shadow-pop);
}
.stats b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 4.4vw, 56px); line-height: 1; color: var(--gold-400); text-shadow: 0 4px 0 rgba(4, 18, 51, .35); font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 6px; font-weight: 900; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.stats__note { text-align: center; margin-top: 20px; color: var(--ink-soft); font-weight: 700; }

/* ---------- Platforms ---------- */
.platforms { padding: clamp(40px, 5vw, 70px) 0 clamp(150px, 15vw, 200px); }
.platform-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
.platform {
  position: relative; padding: 30px 28px; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.platform h3 { font-family: var(--font-display); font-weight: 400; font-size: 34px; text-transform: uppercase; color: var(--navy-900); }
.platform p { color: var(--ink-soft); font-weight: 600; flex: 1; }
.platform .btn { margin-top: 10px; }
.platform__status {
  padding: 4px 12px; border-radius: 999px; font-weight: 900; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--sky-100); color: var(--blue-600);
}
.platform--live {
  color: var(--white);
  background: linear-gradient(140deg, var(--navy-800), var(--blue-600));
  box-shadow: 0 0 0 4px var(--gold-400), var(--shadow-pop);
}
.platform--live h3 { color: var(--white); font-size: 42px; }
.platform--live p { color: rgba(255, 255, 255, .85); }
.platform--live .platform__status { background: var(--gold-400); color: var(--navy-900); }

/* ---------- Community ---------- */
.community {
  position: relative; isolation: isolate; overflow: hidden; color: var(--white); text-align: center;
  padding: clamp(150px, 14vw, 190px) 0 300px;
  z-index: 1;
  background:
    radial-gradient(700px 300px at 50% 30%, rgba(74, 141, 255, .45), transparent 70%),
    linear-gradient(180deg, #0c3a9c 0%, #0a2b78 55%, #0a2766 calc(100% - var(--sea-rise)), transparent calc(100% - var(--sea-rise)));
}
.bergs {
  position: absolute; z-index: 1; bottom: 36px; right: max(-40px, calc(50% - 780px)); width: 560px; height: 320px; pointer-events: none;
}
.berg--c1 { width: 400px; height: 288px; right: 0; bottom: 0; }
.berg--c2 { width: 230px; height: 165px; right: 300px; bottom: 44px; transform: scaleX(-1); }
.floe--c3 { width: 190px; height: 60px; right: 230px; bottom: -6px; }
.community__inner { position: relative; z-index: 2; max-width: 1040px; }
.community .title { font-size: clamp(32px, 4.2vw, 52px); }
.community__inner > p { margin-top: 14px; font-weight: 700; color: rgba(255, 255, 255, .88); }
.signup {
  position: relative; display: flex; align-items: center; gap: 6px; margin: 28px auto 0; max-width: 520px;
  padding: 6px; border-radius: 999px; background: var(--white);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6), 0 0 0 5px rgba(255, 255, 255, .18);
}
.signup__icon { position: absolute; left: 22px; color: var(--ink-soft); }
.signup input[type="email"] {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 10px 12px 48px;
  font: inherit; font-weight: 700; color: var(--ink); border-radius: 999px;
}
.signup input[type="email"]::placeholder { color: #7d8db3; }
.signup input[type="email"]:focus { outline: none; }
.signup:focus-within { box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6), 0 0 0 5px var(--gold-400); }
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup .btn { --btn-depth: 3px; padding: .78em 1.5em; }
.signup.is-busy .btn { opacity: .7; pointer-events: none; }
.signup__status { min-height: 1.6em; margin-top: 12px; font-weight: 800; }
.signup__status.is-ok { color: #7dffc6; }
.signup__status.is-error { color: #ffb3b3; }
.socials { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.socials a {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: var(--white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
  transition: background .25s, color .25s, transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.socials a:hover { background: var(--white); color: var(--navy-800); transform: translateY(-4px) rotate(-6deg); }
.socials .icon { width: 24px; height: 24px; }
.socials a.is-soon { opacity: .5; cursor: default; }
.socials a.is-soon:hover { transform: none; background: rgba(255, 255, 255, .12); color: var(--white); }

/* Cheering crowd built from the in-game fan sprites (5 frames x 16 rows of
   128px), standing on ice shelves floating in the sea */
.crowd {
  position: absolute; z-index: 1; bottom: 76px; left: max(-40px, calc(50% - 790px)); width: 560px; height: 300px; pointer-events: none;
}
.shelf { position: absolute; display: block; z-index: 0; }
.shelf--front { left: -6%; width: 112%; bottom: -58px; height: 104px; }
.shelf--back { left: 2%; width: 92%; bottom: 76px; height: 84px; }
.fan {
  --s: 1;
  position: absolute; width: 128px; height: 128px; background-repeat: no-repeat;
  background-size: 640px 2048px;
  transform: scale(var(--s)); transform-origin: bottom center;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3));
}
.crowd.is-live .fan { background-image: url("/img/sprites/fans.webp"); animation: cheer var(--dur, 1.2s) steps(4) var(--delay, 0s) infinite alternate; }
@keyframes cheer { from { background-position-x: 0; } to { background-position-x: -512px; } }


/* ---------- Footer ---------- */
.footer {
  position: relative; z-index: 0; isolation: isolate; color: rgba(255, 255, 255, .8); padding: 34px 0 26px;
  background: #072a6e;
}
/* The sea: one tilted plane from the horizon line (behind the bottom of the
   community section) all the way down through the footer */
.sea {
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--sea-rise)); bottom: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  perspective: 520px; perspective-origin: 50% 0;
  background: linear-gradient(180deg, #3aa2ee 0, #1d74d8 30px, #0f56b8 140px, #0a3f96 260px, #072a6e 100%);
}
.sea::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 20%, rgba(255, 255, 255, .9) 80%, transparent);
}
.sea::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(180deg, transparent, rgba(4, 18, 51, .5));
}
.sea .water__plane {
  inset: -260% -90% 0; transform: rotateX(68deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 72%); mask-image: linear-gradient(180deg, transparent 20%, #000 72%);
}
.footer__inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.footer__logo img { width: 120px; height: auto; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-left: 28px; border-left: 2px solid rgba(255, 255, 255, .15); }
.footer__links a { text-decoration: none; font-weight: 800; font-size: 15px; }
.footer__links a:hover { color: var(--gold-400); }
.footer__tag { margin-left: auto; font-family: var(--font-display); font-size: 18px; color: var(--white); }
.footer__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: rgba(255, 255, 255, .5); }

/* ---------- Modals ---------- */
.modal {
  border: 0; background: transparent; color: var(--white); max-width: none; max-height: none;
  width: 100%; height: 100%; display: none; place-items: center; overflow: hidden;
}
.modal[open] { display: grid; animation: fade-in .25s ease both; }
.modal::backdrop { background: rgba(4, 12, 34, .82); backdrop-filter: blur(6px); }
@keyframes fade-in { from { opacity: 0; } }
.modal__close {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: var(--white);
}
.modal__close:hover { background: var(--white); color: var(--navy-900); }
.modal__close .icon { width: 24px; height: 24px; }
.modal__video { width: min(1100px, 92vw); aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #000; box-shadow: var(--shadow-pop); }
.modal__video:empty { display: none; }
.modal__video iframe { width: 100%; height: 100%; border: 0; }
.modal__soon {
  width: min(620px, 92vw); text-align: center; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-950)); box-shadow: var(--shadow-pop);
  padding-bottom: 30px;
}
.modal__soon[hidden] { display: none; }
.modal__soon img { width: 100%; height: 180px; object-fit: cover; margin-bottom: 24px; }
.modal__soon h2 { font-family: var(--font-display); font-weight: 400; font-size: 34px; text-transform: uppercase; }
.modal__soon p { margin: 8px 24px 22px; color: rgba(255, 255, 255, .8); font-weight: 700; }
.lightbox__figure { margin: 0; width: min(1400px, 88vw); text-align: center; }
.lightbox__figure img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-pop); }
.lightbox__figure figcaption { margin-top: 14px; font-weight: 800; font-size: 18px; }
.lightbox__prev, .lightbox__next { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox__prev { left: 18px; }
.lightbox__next { right: 18px; }

/* ---------- Reveal on scroll (only when JS is running) ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.2, 1, .3, 1), transform .8s cubic-bezier(.2, 1, .3, 1); transition-delay: var(--reveal-delay, 0s); }
  .reveal.is-visible { opacity: 1; transform: none; }
  .showcase-shot--a.reveal { transform: rotate(-6deg) translateY(50px); }
  .showcase-shot--b.reveal { transform: rotate(6deg) translateY(80px); }
  .showcase-shot--a.reveal.is-visible { transform: rotate(-1.5deg); }
  .showcase-shot--b.reveal.is-visible { transform: rotate(1.5deg) translateY(30px); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .teams__tabs { grid-template-columns: repeat(4, 1fr); }
  .mode-chips { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .scoreboard { --sb-size: 14px; }
  .nav__links a { padding: 8px 10px; font-size: 14px; }
}

@media (max-width: 960px) {
  :root { --nav-h: 70px; }
  .nav__toggle { display: grid; place-items: center; }
  .nav__cta { margin-left: auto; }
  .nav__links {
    position: absolute; top: calc(100% + 10px); left: var(--gutter); right: var(--gutter);
    flex-direction: column; gap: 4px; padding: 12px; border-radius: 22px;
    background: rgba(7, 29, 79, .97); box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .6);
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav__links a { padding: 12px 16px; font-size: 17px; }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__toggle { margin-left: 0; }

  .section-head--split { grid-template-columns: 1fr; }
  .arena { grid-template-columns: 1fr; }
  .arena__media { min-height: 0; aspect-ratio: 16 / 9; }
  .modes__layout { grid-template-columns: 1fr; }
  .modes__screens { height: 420px; max-width: 620px; width: 100%; margin-inline: auto; }
  .mallets { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr 1fr; }
  .platform--live { grid-column: 1 / -1; }
  .scoreboard-wrap { top: auto; bottom: 150px; right: var(--gutter); }
  .scoreboard { --sb-size: 11px; }
  .crowd { transform: scale(.72); transform-origin: bottom left; }
  .bergs { transform: scale(.72); transform-origin: bottom right; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .nav { inset: 10px 0 auto; }
  .nav__bar { height: 56px; }
  .nav__logo img { width: 88px; }
  .nav__cta { display: none; }
  .nav__toggle { margin-left: auto; }
  .hero { padding-bottom: 130px; align-items: flex-end; min-height: max(640px, 100svh); }
  .hero__bg img { object-position: 22% 50%; }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(5, 22, 68, .55) 0%, rgba(5, 22, 68, .2) 30%, rgba(5, 22, 68, .78) 62%, rgba(5, 22, 68, .92) 100%);
  }
  .scoreboard-wrap { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__meta { gap: 10px 18px; font-size: 12px; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
  .feature-grid { grid-template-columns: 1fr; }
  .teams__tabs {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 22px; margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter); scrollbar-width: none;
  }
  .teams__tabs::-webkit-scrollbar { display: none; }
  .team-tab { flex: 0 0 104px; scroll-snap-align: center; }
  .leap { width: 76px; top: -140px; right: 40%; }
  .leap__splash { width: 64px; height: 64px; background-size: 256px 64px; bottom: -20px; }
  @keyframes splash { to { background-position: -256px 0; } }
  .modes__screens { height: 300px; }
  .vr-panel--b { top: 90px; }
  .mode-chips { grid-template-columns: 1fr; }
  .challenge-showcase { grid-template-columns: 1fr; gap: 40px; }
  .showcase-shot--b { transform: rotate(1.5deg); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .platform-grid { grid-template-columns: 1fr; }
  .signup { flex-direction: column; border-radius: 26px; padding: 8px; }
  .signup input[type="email"] { width: 100%; padding-block: 14px; }
  .signup__icon { top: 22px; }
  .signup .btn { width: 100%; }
  .community { padding-bottom: 230px; }
  :root { --sea-rise: 150px; }
  .crowd { left: -10px; bottom: 44px; transform: scale(.42); }
  .bergs { right: -30px; bottom: 26px; transform: scale(.42); }
  .berg--gl { width: 200px; height: 144px; left: -100px; top: 40px; }
  .berg--gr { width: 240px; height: 173px; right: -120px; bottom: 60px; }
  .floe--1 { width: 150px; height: 48px; bottom: 56px; }
  .floe--3 { width: 180px; height: 57px; bottom: 64px; }
  .footer__links { padding-left: 0; border-left: 0; }
  .footer__tag { margin-left: 0; }
  .spires { opacity: .5; width: 210px; height: 268px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 18px; translate: none; }
}

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

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; place-items: center; padding: 60px 0; background: linear-gradient(180deg, #0c3a9c 0%, #0a2463 100%); }
.lost__narwhal { width: 120px; height: auto; margin: 0 auto 14px; transform: rotate(18deg); animation: bob 3s ease-in-out infinite; }
.lost__actions { margin-top: 28px; }