/* Maru — the landing page, in the colours of the game's LIGHT worlds
   (scripts/Globals.gd): the CLOUDS sky at the top, pale world tints through the
   middle, the flat COCONUTS cartoon at the end. Navy type on light grounds so it
   is easy on the eyes for anyone, gamer or not. Display type is the in-game
   Press Start 2P, used only for short labels; reading text is the system sans. */

@font-face {
  font-family: "PressStart2P";
  src: url("fonts/PressStart2P.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* CLOUDS */
  --sky-top: #4fb4ff;
  --sky-mid: #9bdcff;
  --sky-bot: #dff4ff;
  --sun: #fff2a8;
  /* COCONUTS */
  --toon-sky: #3cbadf;
  --toon-hill: #0e539c;
  --toon-sun: #f9c513;
  --toon-ring: #9cc47a;
  /* game UI */
  --navy: #0d2c63;
  --outline: #06122e;
  --gold: #ffd23f;
  --hp-hi: #8dff96;
  --hp-lo: #1fbf5a;
  /* page */
  --ink: #12284f;
  --ink-2: #4b5f82;
  --paper: #ffffff;
  --line: #d9e7f6;
  --pixel: "PressStart2P", ui-monospace, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* the live competition: the coin gold and its orange, never an alarm red */
  --live: #ffb703;
  --live-deep: #f08a00;
  --live-ink: #8f4f00;
  --live-wash: #fff3c2;
  --world: #7a4fff;
  --world-wash: #f0ecff;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 2px rgba(18, 40, 79, .06), 0 10px 30px rgba(18, 40, 79, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
a { color: #0a6fc2; }
a:hover { color: var(--navy); }
img, video { display: block; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 2px;
  color: #0a7fd0;
}
.title {
  margin: 0;
  font-family: var(--pixel);
  font-weight: normal;
  font-size: clamp(20px, 4.2vw, 40px);
  line-height: 1.35;
  letter-spacing: 1px;
  color: var(--navy);
}
.lede { margin: 18px 0 0; font-size: 19px; color: var(--ink-2); max-width: 34em; }
.fine { margin: 18px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--pixel);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 19px 24px 17px;
  border: 3px solid var(--navy);
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .2s;
}
.btn:focus-visible { outline: 3px solid #0a7fd0; outline-offset: 4px; }
.btn-go {
  color: var(--outline);
  background: linear-gradient(180deg, var(--hp-hi), var(--hp-lo));
  box-shadow: 0 5px 0 var(--navy), inset 0 3px 0 rgba(255, 255, 255, .5);
}
.btn-go:hover { color: var(--outline); transform: translateY(-2px); box-shadow: 0 7px 0 var(--navy), inset 0 3px 0 rgba(255, 255, 255, .5); }
.btn-go:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--navy), inset 0 3px 0 rgba(255, 255, 255, .5); }
.btn-light {
  color: var(--navy);
  background: #fff;
  box-shadow: 0 5px 0 var(--navy);
}
.btn-light:hover { color: var(--navy); background: #f1f8ff; transform: translateY(-2px); box-shadow: 0 7px 0 var(--navy); }
.btn-light:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--navy); }
.btn-sm { font-size: 10px; padding: 11px 15px 9px; box-shadow: 0 3px 0 var(--navy), inset 0 3px 0 rgba(255, 255, 255, .5); }
.tri {
  width: 0; height: 0;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* ----------------------------------------------------------------- topbar */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px max(20px, env(safe-area-inset-left));
  transition: background .3s, box-shadow .3s, padding .3s;
}
.topbar.solid {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(18, 40, 79, .06);
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand {
  font-family: var(--pixel);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--gold);
  text-decoration: none;
  text-shadow: -2px 0 var(--navy), 2px 0 var(--navy), 0 -2px var(--navy), 0 2px var(--navy), 0 4px 0 var(--navy);
}
.brand:hover { color: var(--gold); }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--navy);
  text-decoration: none;
}
.nav-links a:hover { color: #0a7fd0; }
@media (max-width: 720px) {
  .nav-links { display: none; }
  .topbar .btn-sm { margin-left: auto; }
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 0 150px;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bot) 100%);
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sun {
  position: absolute;
  top: 70px; right: 8%;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 38%, var(--sun) 39% 52%, rgba(255, 242, 168, .45) 53% 66%, rgba(255, 242, 168, 0) 67%);
}
/* A cloud is soft circles on a flat base, like the CLOUDS world's own. */
.cloud {
  position: absolute;
  width: 180px; height: 56px;
  background: #fff;
  border-radius: 40px;
  box-shadow: inset 0 -8px 0 rgba(194, 206, 222, .55);
  opacity: .95;
  animation: drift linear infinite;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud::before { width: 80px; height: 80px; left: 28px; top: -40px; }
.cloud::after { width: 100px; height: 100px; left: 70px; top: -56px; }
.c1 { top: 18%; left: -10%; scale: .9; animation-duration: 90s; }
.c2 { top: 46%; left: 30%; scale: .6; animation-duration: 120s; animation-delay: -40s; opacity: .8; }
.c3 { top: 72%; left: 60%; scale: 1.1; animation-duration: 100s; animation-delay: -70s; }
.c4 { top: 28%; left: 75%; scale: .5; animation-duration: 140s; animation-delay: -20s; opacity: .7; }
.c5 { top: 86%; left: 5%; scale: .8; animation-duration: 110s; animation-delay: -55s; }
@keyframes drift { from { translate: -40vw 0; } to { translate: 120vw 0; } }

.hero-grid { display: grid; gap: 50px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 9px 14px 7px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--navy);
  background: rgba(255, 255, 255, .85);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.badge .sep { opacity: .4; }
.pulse {
  width: 8px; height: 8px;
  background: var(--hp-lo);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(31, 191, 90, .6);
  animation: pulse 2s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(31, 191, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 191, 90, 0); } }

.logo {
  margin: 0;
  font-family: var(--pixel);
  font-weight: normal;
  font-size: clamp(60px, 13vw, 132px);
  line-height: 1;
  letter-spacing: 6px;
  color: var(--gold);
  text-shadow:
    -5px 0 var(--navy), 5px 0 var(--navy), 0 -5px var(--navy), 0 5px var(--navy),
    -5px -5px var(--navy), 5px -5px var(--navy), -5px 5px var(--navy), 5px 5px var(--navy),
    0 13px 0 var(--navy), 0 22px 30px rgba(13, 44, 99, .25);
}
.hero-line {
  margin: 34px 0 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 30em;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.finale .hero-cta { justify-content: center; }
.finale .lede { margin-left: auto; margin-right: auto; }
.hero .fine { color: var(--ink); }

/* Three phones, styled the way a hardware showcase shows a screen: a thin
   graphite bezel, no outline, no tilt, a long soft shadow — the bezel recedes
   and the game is what you see. They sit low in the sky and FADE into it at the
   bottom, so they read as the backdrop to the copy, not a second headline. */
.trio {
  position: relative;
  height: min(640px, 124vw);
  max-width: 600px;
  width: 100%;
  justify-self: center;
  margin-bottom: -150px;          /* run on into the hill */
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 92%);
  will-change: transform;
}
.phone {
  position: absolute;
  aspect-ratio: 9 / 19.5;
  padding: 7px;
  border-radius: 46px;
  background: linear-gradient(145deg, #4a5160, #1f232b 40%, #2c313b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 50px 80px -30px rgba(13, 44, 99, .35),
    0 20px 40px -20px rgba(13, 44, 99, .2);
}
.phone video {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 39px;
  background: var(--sky-mid);
}
.phone.main { height: 100%; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; }
/* The two behind are smaller, lower and quieter: depth, not competition. */
.phone.side { height: 84%; top: 9%; z-index: 1; filter: saturate(.85); opacity: .9; }
.phone.left { left: 2%; }
.phone.right { right: 2%; }
@media (max-width: 959px) { .trio { margin-bottom: -110px; } }
@media (max-width: 520px) {
  .trio { height: 120vw; }
  .phone.left { left: -6%; }
  .phone.right { right: -6%; }
}

.hill {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  width: 100%; height: 90px;
  fill: #fff8df;   /* the champions band, which follows the hero */
}

/* ----------------------------------------------------------------- worlds */

.worlds {
  position: relative;
  padding: 90px 0 110px;
  background: var(--world-wash);
  transition: background-color .8s;
}

.worlds[data-world="space"]      { --world: #7a4fff; --world-wash: #f0ecff; }
.worlds[data-world="underwater"] { --world: #0c95d8; --world-wash: #e4f6ff; }
.worlds[data-world="clouds"]     { --world: #3a9be8; --world-wash: #eef8ff; }
.worlds[data-world="coconuts"]   { --world: #e0a10a; --world-wash: #fff6dc; }
.worlds[data-world="fireflies"]  { --world: #3aa64a; --world-wash: #eaf7e8; }

.worlds-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) { .worlds-grid { grid-template-columns: 1.1fr .9fr; } }

.world-tabs { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 8px; }
.world-tabs button {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  font-family: var(--pixel);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink-2);
  text-align: left;
  background: rgba(255, 255, 255, .6);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: color .3s, background .3s, border-color .3s, box-shadow .3s;
}
.world-tabs button:hover { color: var(--navy); background: #fff; }
.world-tabs .n { font-size: 9px; opacity: .55; }
.world-tabs button[aria-selected="true"] {
  color: var(--navy);
  background: #fff;
  border-color: var(--world);
  box-shadow: var(--shadow);
}
.world-tabs button[aria-selected="true"] .n { color: var(--world); opacity: 1; }
.world-tabs i {
  position: absolute; left: 0; bottom: 0;
  height: 3px; width: 0;
  background: var(--world);
}
.world-tabs button[aria-selected="true"] i { width: var(--p, 0%); }
.world-tabs button:focus-visible { outline: 3px solid var(--world); outline-offset: 2px; }

.world-detail { min-height: 7.5em; }
.world-detail p { margin: 22px 0 0; font-size: 17px; color: var(--ink); max-width: 32em; transition: opacity .3s; }

.device {
  position: relative;
  justify-self: center;
  width: min(320px, 74vw);
  aspect-ratio: 9 / 19.5;
  padding: 7px;
  border-radius: 48px;
  background: linear-gradient(145deg, #4a5160, #1f232b 40%, #2c313b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 50px 80px -30px rgba(13, 44, 99, .35),
    0 20px 40px -20px rgba(13, 44, 99, .2);
}
/* A faint pool of the world's colour under the phone, nothing more. */
.device::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -34px;
  height: 40px;
  border-radius: 50%;
  background: var(--world);
  opacity: .18;
  filter: blur(22px);
  z-index: -1;
  transition: background .8s;
}
.device-video { width: 100%; height: 100%; object-fit: cover; border-radius: 41px; background: #1f232b; }
.device-tag {
  position: absolute;
  left: 50%; bottom: -46px;
  transform: translateX(-50%);
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--ink-2);
  white-space: nowrap;
}

/* The hero's pointer to the champions, filled in from the API. */
.reigning {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding: 12px 18px 12px 14px;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform .2s var(--ease);
}
.reigning:hover { color: var(--ink); transform: translateY(-2px); }
.reigning[hidden] { display: none; }
.reigning .crown { position: static; flex: 0 0 auto; width: 34px; height: 25px; }
.reigning b { display: block; font-family: var(--pixel); font-weight: normal; font-size: 10px; letter-spacing: 1px; color: #9a6500; margin-bottom: 4px; }
#reigning-text { font-size: 15px; }

/* --------------------------------------------------------------- gameplay */

.gameplay { padding: 100px 0; background: var(--paper); }
.stats { display: grid; gap: 22px; margin-top: 50px; }
@media (min-width: 820px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat {
  position: relative;
  padding: 32px 28px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--c);
}
.stat .big {
  font-family: var(--pixel);
  font-size: clamp(38px, 5.4vw, 54px);
  line-height: 1;
  color: var(--c, var(--navy));
  /* One hard drop shadow, not a four-way stroke: at this size a stroke closes
     up the counters of the pixel glyphs and "15K" / "#1" stop being legible. */
  text-shadow: 0 4px 0 var(--navy);
  letter-spacing: 2px;
}
.stat h3 {
  margin: 28px 0 10px;
  font-family: var(--pixel);
  font-weight: normal;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--navy);
}
.stat p { margin: 0; color: var(--ink-2); }

/* ------------------------------------------------------------------- live */

/* The running competition. It follows the hero on the champions' cream (the
   hill is that colour), and is built like the finale card — white, an outline
   and a hard drop — but in the coin gold with an orange drop rather than navy,
   so it reads as the prize. Red was tried and fought the light theme. */
.live[hidden] { display: none; }
.live { padding: 40px 0 20px; background: #fff8df; }
.live-card {
  display: grid;
  gap: 34px;
  padding: 38px 36px;
  background: #fff;
  border: 3px solid var(--live);
  border-radius: 22px;
  box-shadow: 0 10px 0 var(--live-deep), 0 30px 60px -20px rgba(240, 138, 0, .35);
}
@media (min-width: 900px) { .live-card { grid-template-columns: 1.05fr .95fr; gap: 46px; padding: 46px 48px; } }
@media (max-width: 520px) { .live-card { padding: 26px 18px; gap: 28px; } }

.live-flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px 13px 6px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--live-ink);
  background: var(--live-wash);
  box-shadow: inset 0 0 0 2px var(--live);
  border-radius: 999px;
}
/* The live dot is the same green pulse as "OUT NOW": on, not alarming. */

.prize-amt {
  display: inline-block;
  color: var(--gold);
  text-shadow:
    -3px 0 var(--navy), 3px 0 var(--navy), 0 -3px var(--navy), 0 3px var(--navy),
    -3px -3px var(--navy), 3px -3px var(--navy), -3px 3px var(--navy), 3px 3px var(--navy),
    0 7px 0 var(--navy);
  font-size: 1.3em;
  vertical-align: -.08em;
}
.live-prize { margin: 16px 0 0; font-size: 18px; color: var(--ink-2); }

.clock { display: flex; gap: 10px; margin-top: 28px; }
.clock .unit {
  flex: 0 1 86px;
  min-width: 0;
  padding: 14px 6px 10px;
  text-align: center;
  background: var(--navy);
  border-radius: 12px;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25);
}
.clock b {
  display: block;
  font-family: var(--pixel);
  font-weight: normal;
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1.1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.clock span {
  display: block;
  margin-top: 9px;
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: 1px;
  color: #a9bde0;
}
.live-window { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.live .hero-cta { margin-top: 26px; }

.live-board {
  min-width: 0;
  align-self: start;      /* early in a campaign the board is short; don't pad it out */
  padding: 22px 20px 14px;
  background: #f5f9ff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px 14px;
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--navy);
}
.board-live { display: inline-flex; align-items: center; gap: 8px; font-size: 8px; color: var(--ink-2); }
.board-live .pulse { width: 6px; height: 6px; }

.standings { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.standings li {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 7px 12px 7px 7px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(18, 40, 79, .06);
}
.standings .rk {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding-top: 2px;
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--ink-2);
  background: #eef3fa;
  border-radius: 8px;
}
.standings .nm {
  min-width: 0;
  font-weight: 700;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.standings .sc { font-family: var(--pixel); font-size: 12px; color: #0a7fd0; font-variant-numeric: tabular-nums; }
/* The podium: gold, silver, bronze chips; the leader's row is the one to beat. */
.standings li:nth-child(1) { background: linear-gradient(90deg, #fff3c2, #fff 70%); box-shadow: inset 0 0 0 2px var(--gold); }
.standings li:nth-child(1) .rk { color: var(--navy); background: var(--gold); box-shadow: 0 2px 0 var(--navy); }
.standings li:nth-child(1) .nm { font-size: 18px; }
.standings li:nth-child(2) .rk { color: var(--navy); background: #dfe6ef; box-shadow: 0 2px 0 #8b99ad; }
.standings li:nth-child(3) .rk { color: #fff; background: #d98a4b; box-shadow: 0 2px 0 #8a4f22; }
.standings li.empty {
  display: block;
  padding: 26px 14px;
  text-align: center;
  color: var(--ink-2);
  background: transparent;
  border: 2px dashed var(--line);
  box-shadow: none;
}

.nav-live { display: inline-flex; align-items: center; gap: 8px; color: var(--live-ink) !important; }
.nav-live[hidden] { display: none; }
.nav-live .pulse { width: 7px; height: 7px; }

/* The hero callout, when it points at the live race rather than a champion. */
/* Live, it becomes a GAME-SHOW sign in the game's own colours: the navy of the
   HUD's score box with an outline-navy rim, the header gold for the heading and
   the block orange for the prize chip. White and gold on navy, so it reads at a
   glance with or without the motion. A ring of chasing marquee lights was
   tried and removed (2026-10-07, by request). */
.reigning.is-live {
  position: relative;
  overflow: hidden;
  padding: 16px 22px 15px 14px;
  color: #fff;
  background: radial-gradient(ellipse at 30% 0%, #17408a, var(--navy) 70%);
  border: 3px solid var(--outline);
  box-shadow: 0 5px 0 var(--outline), 0 16px 34px rgba(13, 44, 99, .3);
}
.reigning.is-live:hover { color: #fff; }
.reigning.is-live b { color: var(--gold); font-size: 11px; text-shadow: 0 2px 0 var(--outline); }
.reigning.is-live #reigning-text { color: #e8f0ff; }
.reigning.is-live > span:last-child { position: relative; z-index: 1; }
/* The prize is a chip, like a game-show price tag: navy type on a block
   colour, so it stands apart from the gold heading instead of blending in.
   home.js shoots it like a block every few seconds: it breaks and vanishes
   into a CLOUDS-world burst (.gone), then pops back in as the next block colour
   (--chip, .back). Navy reads on all four. Orange until the first burst. */
.reigning .win {
  display: inline-block;
  margin: 2px 0 0 4px;
  padding: 4px 6px 3px;
  color: var(--outline);
  text-shadow: none;
  white-space: nowrap;
  background: var(--chip, #f8b530);
  border-radius: 5px;
  box-shadow: 0 2px 0 var(--outline);
  transition: background-color .12s;
}
.reigning .win.gone { animation: win-break .16s ease-in forwards; }
.reigning .win.back { animation: win-back .42s var(--ease) both; }
/* Struck: a flinch outward, then gone into the burst. */
@keyframes win-break {
  0% { transform: none; opacity: 1; }
  45% { transform: scale(1.22) rotate(-4deg); opacity: 1; box-shadow: 0 2px 0 var(--outline), 0 0 18px #fff; }
  100% { transform: scale(.3); opacity: 0; }
}
/* Respawned: drops in a touch big and settles, like a new block landing. */
@keyframes win-back {
  0% { transform: scale(.3); opacity: 0; }
  60% { transform: scale(1.14); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.burst-fx { position: absolute; z-index: 40; pointer-events: none; }
/* A sheen crosses the board now and then, like light off a studio sign. */
.reigning.is-live::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: skewX(-18deg);
  animation: sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.reigning .live-dot { display: none; flex: 0 0 auto; width: 12px; height: 12px; margin: 0 8px; position: relative; z-index: 1; }
.reigning.is-live .live-dot { display: block; background: #7ddc73; }
@media (prefers-reduced-motion: reduce) {
  .reigning .win, .reigning.is-live::after { animation: none; }
  .burst-fx { display: none; }
}
.reigning.is-live .crown { display: none; }

/* -------------------------------------------------------------- champions */

.champions {
  padding: 70px 0 100px;
  background: linear-gradient(180deg, #fff8df 0%, #fffdf5 70%, var(--paper) 100%);
}
.champs {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (min-width: 760px) { .champs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 380px) { .champs { grid-template-columns: 1fr; } }

.champ {
  position: relative;
  min-width: 0;
  padding: 20px 18px 18px;
  background: #fff;
  border: 1px solid #efe4bf;
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.champ:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18, 40, 79, .14); }
.champ-note { grid-column: 1 / -1; text-align: center; color: var(--ink-2); border-style: dashed; }
.champ-note:hover { transform: none; }
.champ-date {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 1px;
  line-height: 1.7;
  color: var(--ink-2);
  padding-right: 34px;
}
.champ-name {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.champ-score { margin-top: 10px; font-family: var(--pixel); font-size: 13px; color: #0a7fd0; }
.champ-score small { font-size: 8px; color: var(--ink-2); margin-left: 6px; }
.crown {
  position: absolute;
  top: 18px; right: 16px;
  width: 24px; height: 18px;
  background: var(--gold);
  clip-path: polygon(0 30%, 25% 60%, 50% 0, 75% 60%, 100% 30%, 100% 100%, 0 100%);
  filter: drop-shadow(0 2px 0 var(--navy));
}
.champ.latest {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 30px;
  padding: 32px 30px;
  border: 3px solid var(--gold);
  background: radial-gradient(ellipse at 0% 50%, #fff3c2, #fff 60%);
  box-shadow: 0 16px 40px rgba(224, 161, 10, .22);
}
.champ.latest:hover { transform: none; }
.champ.latest .crown {
  position: static;
  grid-row: span 3;
  width: 84px; height: 62px;
  filter: drop-shadow(0 5px 0 var(--navy));
}
.champ.latest .champ-date { padding: 0; color: #9a6500; }
.champ.latest .champ-name { margin: 0; font-size: clamp(26px, 4vw, 40px); }
.champ.latest .champ-score { margin: 0; font-size: clamp(16px, 2vw, 22px); }
@media (max-width: 520px) {
  .champ.latest { grid-template-columns: 1fr; padding: 24px 20px; }
  .champ.latest .crown { grid-row: auto; width: 54px; height: 40px; }
}
@media (max-width: 759px) {
  .champ:not(.latest) { padding: 16px 14px 14px; }
  .champ:not(.latest) .champ-name { font-size: 16px; }
}

/* --------------------------------------------- finale: the COCONUTS beach */

.finale {
  position: relative;
  padding: 110px 0 120px;
  overflow: hidden;
  isolation: isolate;
  background: var(--toon-sky);
}
.toon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Flat, like the world: solid fills, no gradients or glows. */
.toon-sun {
  position: absolute;
  top: 50px; left: 6%;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--toon-sun);
  box-shadow: 0 0 0 16px var(--toon-ring);
}
.toon-cloud {
  position: absolute;
  height: 34px;
  background: #fff;
  border-radius: 40px 40px 0 0;
}
.toon-cloud::before {
  content: "";
  position: absolute;
  left: 25%; top: -30px;
  width: 60px; height: 60px;
  background: #fff;
  border-radius: 50%;
}
.t1 { top: 64px; right: 10%; width: 150px; }
.t2 { bottom: 54px; left: 40%; width: 110px; }

.finale-inner {
  display: grid;
  gap: 32px;
  align-items: center;
  justify-items: center;
  text-align: center;
  max-width: 760px;
  padding: 44px 36px;
  background: #fff;
  border: 3px solid var(--navy);
  border-radius: 22px;
  box-shadow: 0 10px 0 var(--toon-hill);
}
@media (max-width: 819px) { .finale-inner { padding: 32px 22px; } }

.foot {
  padding: 46px 20px 54px;
  text-align: center;
  font-size: 14px;
  color: #d6e6fb;
  background: var(--toon-hill);
}
.foot a { color: #fff; }
.foot p { margin: 8px 0; }
.brand.small { font-size: 14px; }
.foot .copy { font-size: 12px; opacity: .85; }
.foot .social { margin: 18px 0 22px; }
.foot .social-lede { font-size: 13px; }
.foot a.btn-follow { color: var(--navy); margin-top: 6px; }
.foot a.btn-follow svg { flex: none; }

/* ---------------------------------------------------------------- trailer */

.trailer {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  overflow: visible;
}
.trailer::backdrop { background: rgba(13, 44, 99, .75); backdrop-filter: blur(6px); }
.trailer video {
  height: min(86vh, 960px);
  max-width: 92vw;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: 18px;
  background: #000;
  border: 6px solid #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}
.trailer .close {
  position: absolute;
  top: -16px; right: -16px;
  z-index: 1;
  width: 44px; height: 44px;
  font-size: 28px;
  line-height: 1;
  color: var(--navy);
  background: var(--gold);
  border: 3px solid var(--navy);
  border-radius: 50%;
  cursor: pointer;
}

/* ----------------------------------------------------------------- motion */

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trio { transform: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .cloud, .pulse { animation: none; }
}

@media (max-width: 460px) {
  body { font-size: 16px; }
  .hero { padding: 100px 0 120px; }
  .hero-cta .btn { width: 100%; font-size: 12px; padding: 18px 16px 16px; }
  .badge .sep, .badge #hero-version { display: none; }
  .lede { font-size: 17px; }
  .title { letter-spacing: 0; }
}