/* $ZAZA — single stylesheet. Navy / yellow / electric blue, Titan One display. */

:root {
  --font-display: "Titan One", "Arial Black", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --navy-950: #030a2c;
  --navy-900: #06124f;
  --navy-800: #0a1a6b;
  --navy-700: #0d2285;
  --blue: #1d4bff;
  --blue-bright: #3a66ff;
  --blue-deep: #0a2bb8;
  --yellow: #ffd60a;
  --yellow-soft: #ffe566;
  --red: #ff2e4d;
  --green: #3ddc84;
  --white: #ffffff;
  --text: #eef2ff;
  --muted: #b3c0f0;
  --drop: #000a2e;
  --line: rgba(58, 102, 255, 0.35);

  --radius-lg: 28px;
  --radius: 22px;
  --radius-sm: 14px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --topbar-h: 84px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 12px);
  background: var(--navy-950);
}

/* The page's scrollbar in the coin's colours, not the system's grey (owner, 2026-10-25: "make sure the side bar fits the
   style of website"): an electric-blue pill on deep navy, like the round icon buttons' blue rims. Firefox takes only the
   two colours (Chrome drops the ::-webkit-scrollbar look on an element that sets scrollbar-color, hence the @supports). */
html::-webkit-scrollbar { width: 14px; background: var(--navy-950); }
html::-webkit-scrollbar-thumb { min-height: 48px; border: 3px solid var(--navy-950); border-radius: 999px; background: var(--blue); }
html::-webkit-scrollbar-thumb:hover { background: var(--blue-bright); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--blue) var(--navy-950); }
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  background: linear-gradient(180deg, var(--navy-900) 0%, #051044 55%, var(--navy-950) 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.5px);
  background-size: 24px 24px;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
p { margin: 0; }
[hidden] { display: none !important; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.005em;
}

h2 {
  color: var(--white);
  font-size: clamp(2.3rem, 4.4vw, 4rem);
  text-shadow: 0 0.07em 0 var(--blue-deep);
}

h2 span { color: var(--yellow); }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

main {
  position: relative;
  z-index: 1;
  overflow-x: clip;
}

/* ---------- Shared pieces ---------- */

.section {
  position: relative;
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: clamp(56px, 6.5vw, 96px);
}

.section-head {
  max-width: 780px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.section-head > p:not(.kicker),
.body {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  max-width: 38rem;
}

.kicker {
  margin: 0 0 0.9rem;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.label {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card {
  position: relative;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  border: 3px solid var(--blue);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 100%);
}

.card-yellow { border-color: var(--yellow); }

.card h3 {
  color: var(--white);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}

.card p {
  margin-top: 0.55rem;
  color: var(--muted);
}

.reward-note {
  color: var(--yellow-soft);
  font-size: 0.92rem;
  font-weight: 700;
}

.card .reward-note { margin-top: 1rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border: 3px solid var(--drop);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--drop);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--drop); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--drop); }

.btn-yellow { background: var(--yellow); color: var(--navy-900); }
.btn-yellow:hover { background: var(--yellow-soft); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover { background: var(--blue-bright); }

.btn-outline {
  border-color: rgba(179, 192, 240, 0.45);
  background: transparent;
  color: var(--white);
  box-shadow: none;
}

.btn-lg { min-height: 3.9rem; padding: 0 2.1rem; font-size: 1.28rem; }
.btn-sm { min-height: 2.7rem; padding: 0 1.2rem; font-size: 0.98rem; box-shadow: 0 4px 0 var(--drop); }
.btn-outline.btn-sm { box-shadow: none; }

.btn:disabled,
.btn:disabled:hover,
.btn:disabled:active {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: 0 5px 0 var(--drop);
}

.btn-outline:disabled,
.btn-outline:disabled:hover { box-shadow: none; }

/* ---------- Top bar ---------- */

.topbar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--gutter);
  background: rgba(6, 18, 79, 0.94);
  border-bottom: 1px solid rgba(255, 214, 10, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  height: 3.4rem;
  padding: 0 1.3rem 0 0.4rem;
  border: 3px solid var(--yellow);
  border-radius: 999px;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1;
}

.brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}

.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem;
  border: 3px solid var(--blue);
  border-radius: 999px;
  background: rgba(6, 18, 79, 0.7);
}

.nav a {
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}

.nav a:hover { background: var(--blue); }

/* ZAZA World tab: white like the rest, no yellow glow (owner 2026-10-25: "keep them all same color in white"). No app
   icon on it either (owner 2026-10-07: "i meant to add the icon to this window [the Play ZAZA World card], not to the
   top menu on the website"). */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.icon-pill {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 3px solid var(--blue);
  border-radius: 50%;
  color: var(--white);
  transition: background 150ms ease;
}

.icon-pill:hover { background: var(--blue); }
.icon-pill svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.icon-pill img { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: contain; }

.buy-pill { min-height: 3.4rem; padding: 0 1.6rem; font-size: 1.12rem; }

/* Language: a globe with the page's language on a yellow tag (i18n.js writes it and opens the list under the circle). */
.lang-pill { position: relative; padding: 0; background: transparent; font: inherit; cursor: pointer; }
.lang-pill[aria-expanded="true"] { background: var(--blue); }
.icon-pill.lang-pill svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.lang-code {
  position: absolute;
  right: -0.35rem;
  bottom: -0.25rem;
  min-width: 1.55rem;
  padding: 0.16rem 0.28rem 0.12rem;
  border: 2px solid var(--navy-900);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy-900);
  font: 400 0.62rem/1 var(--font-display);
  letter-spacing: 0.03em;
  text-align: center;
}

/* Menu button: hidden until the pill nav folds away at 1140px. */
.menu-toggle {
  display: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.menu-toggle .menu-icon-close { display: none; }

.topbar.is-menu-open .menu-toggle {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--navy-900);
}

.topbar.is-menu-open .menu-icon-open { display: none; }
.topbar.is-menu-open .menu-icon-close { display: block; }

/* ---------- The first screen: ZAZA World ----------
   Owner, 2026-10-25, between two demos: "i love the world first". The World's terrace over ZAZA Town at dusk fills the
   screen (the World's start-screen painting): ZAZA WORLD in the sky, your hero on the stone with PLAY and the three ways in
   under it, and the World's dark glass panels at the sides (Your hero low on the left | the real cards and the live camera
   down the right). It's in the
   World's look (thin gold edges, gold capitals), and the coin's flat navy and yellow take over again from About down.
   Computers: the painting fills the window, so PLAY and the ways in are on the first screen (owner, 2026-10-25, of a
   1536 x 782 window where they ran under its edge: "move the bottom part slightly up.. feels that doesnt fit well in
   screen"). It only runs taller than the window when the hero would reach the title: the stone the hero stands on rises
   with the painting's width (20.5% of 0.5583 x the width), so the least height is a share of the width (the 11.45vw and
   12.92vw below, the title's height counted in). Tablets and phones: the painting first (title, hero, PLAY), the panels
   under it. */
.home-scene {
  --w-tan: #e8c46a; --w-gold: #ffd23f; --w-line: rgba(232, 196, 106, 0.34); --w-soft: #b9bfdc; --w-mute: #9ea6cc;
  --w-glass: linear-gradient(180deg, rgba(12, 16, 44, 0.9), rgba(7, 10, 30, 0.9));
  --w-glow: radial-gradient(closest-side, rgba(6, 18, 79, 0.86), rgba(6, 18, 79, 0.6) 62%, rgba(6, 18, 79, 0) 100%);
  /* the window's vw and svh in the scene's own px: on big screens it's laid out smaller and scaled up (below) */
  --vw: calc(1vw / var(--s, 1)); --svh: calc(1svh / var(--s, 1));
  --scene-h: max(var(--svh) * 100, 636px + var(--vw) * 11.45);
  --k: 6; /* the hero's pixel size */
  --imgh: max(var(--scene-h), var(--vw) * 55.83); /* the painting's height as it covers the scene (1920 x 1072) */
  --feet: max(150px, var(--imgh) * 0.205); /* the terrace's stone, 20.5% up the painting */
  /* ZAZA WORLD never hides the castle's $CARDS banner (owner, 2026-10-27, at 1536 x 782: "the title is too big and its
     blocking the view of the cards icon on the palace"). The banner, rod included, is x 590-640 and y 337-412 of the
     1920 x 1072 painting, its right end 0.2985 times the painting's height left of the middle. The title, ZAZA over WORLD,
     is as wide as WORLD, 3.78 times its font size, with its outline 0.05 of it further out: this is the size that ends it
     12 px short of the banner. */
  /* the top of the name tag over a hero 30 pixels tall, and --tag-more higher over a taller one: home-hero.js sets
     --tag-rows when it sizes the canvas (an LP's hero with its aura is drawn 32 tall), so every title rule below leaves
     room over the real tag and the buttons never touch it */
  --tag-more: calc((var(--tag-rows, 30) - 30) * var(--k) * 1px);
  --tag-y: calc(var(--scene-h) - var(--feet) - 30px * var(--k) - var(--tag-more) - 30px);
  --zw-fit: calc(var(--imgh) * 0.1539 - 6.2px);
  /* On computers the title is also no bigger than the room under the card drop (which ends 66 px under the top bar) leaves
     it over your hero's name tag: it's 1.763 times its size tall, and --zw-rest is the card drop's 66 px, "$ZAZA
     presents", the line and the buttons under it, the gaps, and 10 px kept over the tag. */
  --zw-rest: 262px;
  position: relative;
  isolation: isolate;
  height: var(--scene-h);
  overflow: hidden;
  color: #f1ecd8;
  background: #2a2142;
}
.scene-bg { position: absolute; inset: 0; z-index: -1; }
.scene-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.scene-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 28, 0.55), transparent 24%, transparent 76%, rgba(5, 8, 28, 0.55)), linear-gradient(0deg, rgba(5, 8, 28, 0.72), rgba(5, 8, 28, 0.2) 22%, transparent 34%); }
.scene-grid {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 290px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "l plate r" "l . r" "go go go";
  gap: 0 28px;
  height: 100%;
  padding: calc(var(--topbar-h) + 18px) max(var(--gutter), (100% - 1320px) / 2) 30px;
}
.scene-main { display: contents; }

/* the plate in the sky: the card drop, then the words: "$ZAZA presents", ZAZA WORLD, the line, the buttons */
.scene-plate { grid-area: plate; justify-self: center; display: grid; justify-items: center; gap: 4px; padding: 12px 64px 14px; text-align: center; background: var(--w-glow); }
.scene-words { display: contents; }
/* Over your hero's canvas (1), so an LP aura's spikes pass behind the title, the line and the buttons, never over them
   (owner, 2026-11-03, with a shot of an aura over Copy CA: "make sure the aura is not getting over the buttons"); the
   name tag (2, later on the page) stays on top. Each child, as .scene-words is display: contents on tablets and phones. */
.scene-words > * { position: relative; z-index: 2; }
/* Computers: the words sit midway between the card drop and your hero's name tag (owner, 2026-10-27: "bring this section a
   little bit lower, so between next card drop and username it stays in the middle"). The plate reaches down to the tag,
   and the words, with the glow behind them, centre in what's under the pill (the pill's margin again at the foot). */
@media (min-width: 1101px) {
  .scene-plate { grid-template-rows: auto minmax(0, 1fr); gap: 0; min-height: calc(var(--tag-y) - var(--topbar-h) - 18px); padding: 12px 0 0.45rem; background: none; }
  .scene-words { display: grid; justify-items: center; align-self: center; gap: 4px; padding: 12px 64px 14px; background: var(--w-glow); }
}
.scene-kick { display: flex; align-items: center; gap: 7px; margin: 0.15rem 0 0; color: var(--w-tan); font: 400 12px/1 var(--font-display); letter-spacing: 0.3em; text-transform: uppercase; }
.scene-kick img { width: 20px; height: 20px; }
/* ZAZA WORLD lettered like the ZAZA World logo (owner, 2026-11-03: "a bit more like the logo", "looks very basic", then
   picked the stacked demo): ZAZA over WORLD, the logo's gold and white, and behind each word a copy in the logo's dark
   brown that is its outline and its solid 3D block, down and to the right. The copy and a light rim on the letters' tops
   are the words' ::before and ::after (data-t), left out of what screen readers say. */
.home-scene h1.zw { display: grid; justify-items: center; margin: 0 0 0.06em; font: 400 min(5.4rem, var(--vw) * 5.6, var(--zw-fit), (var(--tag-y) - var(--topbar-h) - var(--zw-rest)) / 1.763)/0.8 var(--font-display); letter-spacing: 0.01em; white-space: nowrap; isolation: isolate; }
.zw-z, .zw-w { position: relative; color: transparent; -webkit-background-clip: text; background-clip: text; }
.zw-z { margin-bottom: 0.06em; font-size: 1.12em; letter-spacing: 0.03em; background-image: linear-gradient(180deg, #fff1b0 0%, #ffe07a 22%, #ffd548 42%, #f6c336 60%, #e9ad28 80%, #dc9a1c 100%); }
.zw-w { background-image: linear-gradient(180deg, #ffffff 0%, #eef2ff 35%, #d2dcff 70%, #a9baff 100%); }
.zw-z::before, .zw-w::before, .zw-z::after, .zw-w::after { content: attr(data-t); content: attr(data-t) / ""; position: absolute; left: 0; top: 0; pointer-events: none; }
.zw-z::before, .zw-w::before { z-index: -1; color: #2b170b; -webkit-text-stroke: 0.1em #2b170b;
  text-shadow: 0.01em 0.015em 0 #2b170b, 0.02em 0.03em 0 #2b170b, 0.03em 0.045em 0 #2b170b, 0.04em 0.06em 0 #2b170b, 0.05em 0.075em 0 #2b170b, 0.06em 0.09em 0 #2b170b, 0.04em 0.13em 0.12em rgba(10, 5, 30, 0.55); }
.zw-z::after, .zw-w::after { color: transparent; -webkit-text-stroke: 0.012em rgba(255, 255, 255, 0.55); clip-path: inset(0 0 62% 0); }
.home-scene .lead { margin: 0.35rem 0 0; color: #eef2ff; font-size: clamp(0.98rem, var(--vw) * 1.25, 1.1rem); font-weight: 600; line-height: 1.45; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
/* Each sentence on one line (owner: "make tha subtitle phrase all in the same line as before", and on phones "keep this
   phrase of subtitle on the same line"): the font shrinks with a narrow screen instead. */
.home-scene .lead .lead-bit, .home-scene .lead strong { display: block; white-space: nowrap; }
.home-scene .lead strong { color: var(--yellow); font-weight: 800; }
.lead-cards { white-space: nowrap; } /* the $CARDS logo never ends a line without its name */
/* A clear gap after "a", a tight one before "$CARDS", so the logo reads as part of the name. */
.lead-cards .cards-icon { margin: 0 0.16em 0 0.14em; vertical-align: -0.14em; }
.home-scene .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.7rem; }
/* one row on computers, even when ZAZA WORLD is narrower than the three (the plate grows past its column, as for the title) */
@media (min-width: 1101px) { .home-scene .hero-actions { flex-wrap: nowrap; } }
.home-scene .hero-actions .btn { min-height: 2.6rem; padding: 0 1.1rem; font-size: 0.95rem; box-shadow: 0 4px 0 var(--drop); }
/* ZAZA World's PlayToEarn rank beside the buttons: main.js loadP2eRank fills in the place and shows it, or drops it when
   there's no fresh rank. It holds its room meanwhile, so nothing jumps when it appears. */
.hero-p2e { display: inline-flex; align-items: center; align-self: center; gap: 0.45rem; padding: 0.3rem 0.85rem 0.3rem 0.3rem; border: 2px solid rgba(255, 214, 10, 0.5); border-radius: 999px; background: rgba(6, 18, 79, 0.8); color: var(--white); font-size: 0.88rem; font-weight: 800; line-height: 1; white-space: nowrap; transition: transform 150ms ease, border-color 150ms ease; }
.hero-p2e:hover, .hero-p2e:focus-visible { transform: translateY(-2px); border-color: var(--yellow); }
.hero-p2e.is-wait { visibility: hidden; }
.hero-p2e-cup { flex: none; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: rgba(255, 214, 10, 0.16); font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1; }
.hero-p2e b { color: var(--yellow); font-family: var(--font-display); font-size: 1.08em; font-weight: 400; }
.hero-p2e i { font-style: normal; }

/* your hero on the stone (home-hero.js draws the map sprite, cut at its feet): a pixel of breath, a shadow, its name */
.scene-stage { position: absolute; inset: 0; pointer-events: none; }
.scene-hero { position: absolute; z-index: 1; left: 50%; bottom: var(--feet); width: calc(var(--cols, 16) * var(--k) * 1px); height: calc(var(--rows, 30) * var(--k) * 1px); translate: -50% 0; image-rendering: pixelated; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7)); animation: sceneBreathe 1.8s steps(1, end) infinite; }
.scene-shadow { position: absolute; left: 50%; bottom: var(--feet); width: calc(15px * var(--k)); height: calc(4px * var(--k)); translate: -50% 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); }
@keyframes sceneBreathe { 50% { translate: -50% calc(var(--k) * 1px); } }
.scene-tag { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--feet) + var(--tag-rows, var(--rows, 30)) * var(--k) * 1px + 10px); translate: -50% 0; padding: 3px 10px 2px; border-radius: 4px; background: rgba(6, 10, 32, 0.72); color: #fff; font: 400 15px/1 var(--font-display); letter-spacing: 0.03em; white-space: nowrap; text-shadow: 0 1px 0 #000; }
.scene-tag:empty { display: none; }

/* PLAY between gold rules, then a guest name, Connect wallet, Use my X: one line across the bottom, which may run wider
   than the middle column (the side panels end above it) */
.scene-go { grid-area: go; position: relative; z-index: 2; justify-self: center; display: grid; justify-items: center; gap: 8px; width: max-content; max-width: calc(var(--vw) * 100 - 2 * var(--gutter)); text-align: center; }
.scene-play { display: flex; align-items: center; gap: 18px; color: #fff1cc; font: 400 clamp(34px, var(--vw) * 3.8, 54px)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 3px 0 #3a2200, 0 0 26px rgba(255, 210, 63, 0.4); white-space: nowrap; }
/* PLAY sits a little above its row, so it breathes over the ways in (owner, 2026-10-27: "rise a tiny bit the world play");
   top, as :active presses it down with translate */
.scene-play { position: relative; top: -8px; }
.scene-play:hover > span, .scene-play:focus-visible > span { color: #fff; text-shadow: 0 3px 0 #3a2200, 0 0 34px rgba(255, 210, 63, 0.85); }
.scene-play:active { translate: 0 2px; }
.scene-play:focus-visible { outline: 2px solid var(--w-gold); outline-offset: 6px; border-radius: 8px; }
.scene-line { position: relative; width: clamp(36px, var(--vw) * 8, 120px); height: 12px; background: linear-gradient(90deg, transparent, var(--w-tan)) center / 100% 2px no-repeat; }
.scene-line::after { content: ""; position: absolute; right: -3px; top: 50%; width: 8px; height: 8px; border: 2px solid var(--w-tan); background: #1c1634; translate: 0 -50%; rotate: 45deg; }
.scene-line.r { transform: scaleX(-1); }
.scene-ways { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; }
.scene-name { display: flex; align-items: center; gap: 10px; width: 250px; height: 42px; padding: 0 14px; border: 1px solid var(--w-tan); border-radius: 999px; background: rgba(6, 10, 32, 0.82); box-shadow: 0 0 0 3px rgba(232, 196, 106, 0.08); cursor: text; }
.scene-name:focus-within { border-color: var(--w-gold); box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.25); }
.scene-name span { color: var(--w-tan); font: 400 11px/1 var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; }
.scene-name input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #fff; font: 700 1.05rem/1 var(--font-body); }
.scene-name input::placeholder { color: rgba(220, 225, 245, 0.5); font-weight: 600; }
.scene-name.shake { animation: sceneShake 0.4s; border-color: #ff9aa8; }
@keyframes sceneShake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.scene-or { color: var(--w-soft); font-size: 0.95rem; font-weight: 700; text-shadow: 0 1px 2px #000; }
.scene-wallet, .scene-x { display: inline-flex; align-items: center; gap: 8px; height: 42px; border-radius: 999px; font: 400 16px/1 var(--font-display); white-space: nowrap; }
.scene-wallet { padding: 0 18px 0 5px; border: 1px solid #ffe27a; background: linear-gradient(180deg, #ffe27a, var(--w-gold) 55%, #e8b52a); color: #0b1636; }
.scene-wallet img { width: 32px; height: 32px; border-radius: 50%; }
.scene-x { padding: 0 16px 0 5px; border: 1px solid #6f8bff; background: rgba(20, 30, 90, 0.85); color: #fff; font-size: 15px; }
.scene-x i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #000; }
.scene-x svg { width: 15px; height: 15px; }
.scene-wallet:hover, .scene-x:hover { filter: brightness(1.08); }
.scene-wallet:focus-visible, .scene-x:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
/* a wallet hero coming back (home-hero.js walletHero): its level and name instead of the guest's box and the ways in */
.scene-me { display: none; align-items: center; gap: 10px; height: 42px; padding: 0 20px 0 5px; border: 1px solid var(--w-gold); border-radius: 999px; background: rgba(6, 10, 32, 0.82); box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.18); }
.scene-me span { padding: 8px 10px 7px; border-radius: 999px; background: linear-gradient(180deg, #ffe27a, var(--w-gold) 55%, #e8b52a); color: #0b1636; font: 400 14px/1 var(--font-display); white-space: nowrap; }
.scene-me b { color: #fff; font: 400 19px/1 var(--font-display); letter-spacing: 0.02em; white-space: nowrap; }
.is-me .scene-me { display: inline-flex; }
.is-me .scene-name, .is-me .scene-or, .is-me .scene-wallet, .is-me .scene-x, .is-me [data-act="rand"] { display: none; }
.hm-me { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; } /* a long squad ends in …, never past the panel */
.hm-me > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 1.95rem; }
.hm-me > div + div { border-top: 1px solid rgba(232, 196, 106, 0.1); }
.hm-me dt { color: var(--w-mute); font: 700 0.6rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.hm-me dd { min-width: 0; margin: 0; overflow: hidden; color: #fff; font-size: 0.86rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
/* its portrait beside them (home-hero.js drawBust): over the head to the chest, its aura behind it, at twice its pixels */
.hm-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.hm-face { width: 70px; height: 70px; padding: 4px; border: 1px solid var(--w-tan); border-radius: 4px; background: radial-gradient(circle at 50% 60%, rgba(255, 210, 63, 0.16), rgba(6, 10, 32, 0.92) 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 210, 63, 0.18); }
.hm-face canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
/* short of room, HIGH SCORES goes on two lines before its value is cut; only a long squad's name ends in … */
.hm-card dt { white-space: normal; line-height: 1.2; }
.hm-card dd { flex-shrink: 0; max-width: calc(100% - 52px); } /* the label keeps room for its longest word */
.scene-help { margin: 0; color: #ffb3bb; font-size: 0.9rem; font-weight: 700; text-shadow: 0 1px 2px #000; }
.scene-note { margin: 0; color: var(--w-soft); font-size: 0.86rem; font-weight: 600; text-shadow: 0 1px 2px #000; }

/* the panels down both sides: dark glass, a thin gold edge, small gold capitals */
.scene-l, .scene-r { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
/* What you win on the left, the game on the right (owner, 2026-10-27: "should we put the cards on the left. the people
   playing on the top right.. and the customization on the bottom right ?"). The real cards sit in the middle of the left
   side (owner, the same day: "should we make it at the middle of the page.." "middle vertically.."), clear of the castle
   (below). The live camera is at the top right, and Your hero low on the right, beside your hero, so what it changes is
   right there. */
.scene-l { grid-area: l; justify-content: center; }
.scene-r { grid-area: r; justify-content: space-between; }
.lbp { display: block; flex: none; padding-bottom: 11px; border: 1px solid var(--w-line); border-radius: 4px; background: var(--w-glass); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 240, 200, 0.06); backdrop-filter: blur(4px); color: #f1ecd8; }
.lbp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; padding: 9px 12px 8px; border-bottom: 1px solid rgba(232, 196, 106, 0.16); }
.lbp-h b { color: var(--w-tan); font: 400 12px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; }
.lbp-h > span { color: var(--w-soft); font-size: 0.82rem; font-weight: 700; }
.lbp > :not(.lbp-h) { margin-left: 12px; margin-right: 12px; }
.lbp > .hero-cam-head { margin: 0; }
.lbp-note { margin-top: 9px; margin-bottom: 0; color: var(--w-mute); font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.lbp-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 24px); height: 32px; margin-top: 10px; padding: 0 10px; border: 1px solid var(--w-line); border-radius: 3px; background: rgba(232, 196, 106, 0.07); color: var(--w-tan); font: 400 12px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.lbp-btn:hover { border-color: var(--w-tan); background: rgba(232, 196, 106, 0.16); color: #fff3c4; }
.lbp-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Your hero: a step through each free look (home-hero.js) */
.hm-steps { display: grid; gap: 0.15rem; }
.hm-step { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) 1.6rem; align-items: center; gap: 0.3rem; height: 1.95rem; }
.hm-step > b { display: grid; justify-items: center; gap: 0.12rem; min-width: 0; color: #fff; font-size: 0.86rem; font-weight: 800; line-height: 1; }
.hm-step > b small { color: var(--w-mute); font: 700 0.54rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.hm-step > b span { display: flex; align-items: center; gap: 0.35rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-step > b i { flex: none; width: 0.75rem; height: 0.75rem; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; background: var(--c); }
.hm-step button { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--w-line); border-radius: 50%; background: rgba(0, 0, 0, 0.3); color: var(--w-tan); cursor: pointer; }
.hm-step button:hover { border-color: var(--w-tan); background: rgba(232, 196, 106, 0.12); }
.hm-step button svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hm-step.off { opacity: 0.4; }
.hm-step.off button { cursor: default; }
/* Win real cards: the week's top pull in the middle, big, its price under it, the week's next two best beside it, then
   who found it and what all the cards won are worth (main.js; owner, 2026-10-27: "can we showcase the top pull of the week
   instead... and showcase the card better", then, of it alone: "i liked better with you showed multiple cards.."). */
.lbp-cards { --card-h: 200px; transition: border-color 150ms ease; }
.lbp-cards:hover, .lbp-cards:focus-visible { border-color: var(--w-tan); }
/* On computers the slabs are as tall as the room under the castle allows, so the panel grows up the left side without
   covering it ("make the left tab of the card taller.. to feel more centered on the screen"). The castle's walls end at
   y 470 of the 1072 px painting, 0.5616 of its height above its bottom (the scene's), and the panel ends at the column's
   bottom, 100cqh under its top. The px taken off: the rest of the panel and a gap under the walls, and anything over the
   panel in the column (--l-bar: the Game of the Year vote, awards-campaign.css). */
@media (min-width: 1101px) {
  .scene-l { container-type: size; }
  .scene-l .lbp-cards { --card-h: clamp(80px, var(--topbar-h) + 18px + 100cqh - (var(--scene-h) - var(--imgh) * 0.5616) - 192px - var(--l-bar, 0px), 200px); }
  /* Centred, it would reach over the castle where the castle comes into the column (most windows: at 1536 x 782 its left
     tower, at 1920 x 1080 a third of it). So it moves left just enough to end 10 px short of the castle, whose left edge
     is x 469 of the painting, 491 px of the 1920 left of its middle (the painting is centred: --castle). It never goes
     closer than 16 px to the window's edge; where that isn't enough (small laptops), it gets narrower too, down to
     220 px, so only at 1101 x 700 does it touch the edge of the castle's left tower (7 px). The column starts at the grid's padding (--col) and is 100cqw wide.
     Anything over the panel in the column goes with it, as wide. */
  .scene-l > :is(.lbp-cards, .awards-cta--home) {
    --castle: calc(var(--vw) * 50 - var(--imgh) * 0.458);
    --col: max(var(--gutter), var(--vw) * 50 - 660px);
    --pw: clamp(220px, var(--castle) - 26px, 100cqw);
    --l-x: clamp(16px - var(--col), var(--castle) - 10px - var(--pw) - var(--col), 0px);
    width: var(--pw);
    translate: var(--l-x) 0;
  }
}
.hero-pull-kick { display: block; margin-bottom: 5px; color: var(--w-tan); font: 400 10px/1.3 var(--font-display); letter-spacing: 0.16em; text-align: center; text-transform: uppercase; }
/* the top pull in the middle and biggest, in a gold edge, its price under it, never on it */
.hero-play-slabs { --card-w: min(36%, var(--card-h) * 0.6); position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 6px; padding-bottom: 14px; }
.hero-play-slabs > img { flex: none; width: calc(var(--card-w) * 0.8); height: auto; border-radius: 4px; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5); }
.hero-play-slabs > img:nth-child(2) { order: 3; }
.slab-front { order: 2; position: relative; flex: none; width: var(--card-w); line-height: 0; }
.slab-front img { width: 100%; height: auto; border-radius: 5px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 210, 63, 0.85), 0 0 26px rgba(255, 210, 63, 0.3); }
/* now and then a glint runs across it */
.slab-front::after { content: ""; position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.3) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat; animation: slabGlint 7s ease-in-out infinite; pointer-events: none; }
@keyframes slabGlint { 0%, 70% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.hero-play-slabs em { position: absolute; z-index: 1; left: 50%; bottom: 0; translate: -50% 0; padding: 0.14rem 0.6rem 0.18rem; border: 1px solid rgba(255, 210, 63, 0.7); border-radius: 999px; background: rgba(8, 10, 32, 0.92); color: var(--w-gold); font: 400 1rem/1 var(--font-display); font-style: normal; }
.hero-play-slabs em:empty { display: none; }
/* who found it: their hero (home-hero.js, in the World's pixels), the card's name, who and when */
.hero-pull-by { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 7px; }
.hero-pull-by canvas { flex: none; width: auto; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.hero-pull-by canvas[hidden] { display: none; }
.hero-pull-by > span { display: grid; gap: 3px; min-width: 0; }
.hero-pull-by strong { display: -webkit-box; overflow: hidden; color: #fff; font-size: 0.9rem; font-weight: 800; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hero-pull-by small { color: var(--w-soft); font-size: 0.76rem; font-weight: 700; line-height: 1.3; }
.lbp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(232, 196, 106, 0.16); }
.lbp-row > span { color: var(--w-mute); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lbp-row > b { color: var(--w-gold); font: 400 1.2rem/1 var(--font-display); }
/* the live camera (home-cam.js): one player at a time, on to the next every 5 s */
.hero-cam { --tc: #a9b3d6; container-type: inline-size; position: relative; padding-bottom: 12px; }
.hero-cam-open { position: absolute; z-index: 2; inset: 0; }
.hero-cam-open:focus-visible { outline: 2px solid var(--w-gold); outline-offset: -3px; }
.hero-cam-head { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem 0.5rem 0.6rem; border-bottom: 1px solid rgba(232, 196, 106, 0.16); }
.hero-cam-av { flex: none; width: 1.9rem; height: 1.9rem; border: 2px solid var(--tc); border-radius: 50%; object-fit: cover; background: var(--navy-800); }
.hero-cam-av.pixel { border-radius: 8px; object-fit: contain; image-rendering: pixelated; background: radial-gradient(circle at 50% 40%, var(--blue-bright), var(--navy-900)); }
.hero-cam-who { flex: 1; display: grid; gap: 0.12rem; min-width: 0; }
.hero-cam-who b { display: flex; align-items: center; gap: 0.35rem; min-width: 0; color: var(--white); font-family: var(--font-display); font-size: 0.98rem; font-weight: 400; line-height: 1.1; }
.hero-cam-who b i { min-width: 0; overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.hero-cam-lv { flex: none; padding: 0.1rem 0.38rem 0.13rem; border-radius: 999px; background: rgba(255, 214, 10, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 214, 10, 0.5); color: var(--yellow); font-size: 0.64rem; font-style: normal; line-height: 1; }
.hero-cam-lv[hidden] { display: none; }
.hero-cam-who small { overflow: hidden; color: #dfe6ff; font-size: 0.76rem; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.hero-cam.fight .hero-cam-who small { color: #ff8f9a; }
.hero-cam-next { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 1.6rem; padding: 0.1rem 0.4rem; border: 1px solid var(--w-line); border-radius: 999px; background: rgba(6, 12, 40, 0.72); color: var(--w-tan); font: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer; }
.hero-cam-next:hover { border-color: var(--w-tan); color: #fff3c4; }
.hero-cam-next:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.hero-cam-next i { font-style: normal; }
.hero-cam-online { flex: none; display: inline-flex; align-items: center; gap: 0.3rem; color: #8ff0b8; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.hero-cam-online::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.hero-cam-online b { font-weight: inherit; }
.hero-cam-online i { font-style: normal; }
.hero-cam:not(.has-count) .hero-cam-online i { display: none; }
/* A narrow camera: just the count and no "Next" word, so the player's name keeps the room. */
@container (max-width: 300px) { .hero-cam-online i, .hero-cam-next i { display: none; } }
.hero-cam-bar { position: absolute; left: 0.7rem; right: 0.7rem; bottom: -1px; height: 2px; border-radius: 2px; background: rgba(255, 214, 10, 0.18); opacity: 0; transition: opacity 300ms ease; }
.hero-cam.has-next .hero-cam-bar { opacity: 1; }
.hero-cam-bar i { display: block; height: 100%; border-radius: inherit; background: var(--w-gold); transform: scaleX(0); transform-origin: left; }
.lbp > .hero-cam-screen { position: relative; display: block; margin-top: 10px; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--w-line); border-radius: 3px; background: #070b1f; transition: border-color 150ms ease; }
.hero-cam:hover .hero-cam-screen { border-color: var(--w-tan); }
.hero-cam-screen canvas,
.hero-cam-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-cam-poster { object-fit: cover; transition: opacity 400ms ease; }
.hero-cam.is-live .hero-cam-poster { opacity: 0; }
/* A new player: a quick dip to the screen's navy, then them (home-cam.js cut). */
.hero-cam-screen::after { content: ""; position: absolute; inset: 0; background: #070b1f; opacity: 0; transition: opacity 260ms ease; pointer-events: none; }
.hero-cam-screen.is-cut::after { opacity: 1; transition-duration: 180ms; }
.hero-cam-live { position: absolute; z-index: 1; left: 0.45rem; top: 0.45rem; display: flex; align-items: center; gap: 0.3rem; height: 1.2rem; padding: 0 0.5rem; border-radius: 3px; background: #e0283c; color: var(--white); font-family: var(--font-display); font-size: 0.66rem; font-style: normal; letter-spacing: 0.1em; line-height: 1; }
.hero-cam:not(.is-live) .hero-cam-live { display: none; } /* the poster is a still: no LIVE on it */
.hero-cam-live::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #fff; animation: camBlink 1.6s infinite; }
@keyframes camBlink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .scene-hero, .scene-name.shake { animation: none; }
  .hero-cam-screen, .hero-cam-poster { transition: none; }
  .hero-cam-live::before { animation: none; }
  .slab-front::after { animation: none; }
}

/* Small laptops: narrower panels. */
@media (max-width: 1240px) {
  .scene-grid { grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 250px); gap: 0 18px; }
  .scene-name { width: 220px; }
}
/* …and a smaller portrait in Your hero, so "#10 of 2,396" still fits beside it in 250 px (tablets and phones stack the
   panels full width) */
@media (min-width: 1101px) and (max-width: 1240px) {
  .hm-card { gap: 10px; }
  .hm-face { width: 52px; height: 52px; padding: 3px; }
}
/* Short screens (a 1920 x 1080 laptop at 125%, 1440 x 900): no "$ZAZA presents", a smaller hero and PLAY, so it all fits
   and nothing crowds. Big screens as wide for their height (2560 x 1440 with the browser's bars) get the same, as they
   show this layout scaled up (below). Shorter still (1366 x 768, 1280 x 800 with the browser's bars): no line under the
   buttons, then a smaller hero again, the buttons lifted to stay inside the window. */
@media (min-width: 1101px) and (max-height: 820px), (min-width: 1690px) and (min-height: 861px) and (min-aspect-ratio: 1536/820) {
  .home-scene { --k: 5; --scene-h: max(var(--svh) * 100, 720px, 550px + var(--vw) * 12.92); }
  .home-scene { --zw-rest: 222px; } /* no "$ZAZA presents" over the title */
  .scene-kick { display: none; }
  .scene-r .lbp-note { display: none; } /* the camera and Your hero both fit down the right, level with the cards */
  .scene-go { gap: 6px; }
  .scene-play { font-size: clamp(34px, min(var(--vw) * 3.8, var(--svh) * 6), 54px); }
}
@media (min-width: 1101px) and (max-height: 740px) {
  .scene-note { display: none; }
}
@media (min-width: 1101px) and (max-height: 700px) {
  .home-scene { --k: 4; --scene-h: max(100svh, 685px, 516px + 12.92vw); }
  .scene-grid { padding-bottom: 42px; }
}
/* Big screens: the first screen as on a 1536 x 782 window, only bigger, so a big screen sees the same picture and not
   small panels and words over a big painting (owner, 2026-10-27, with a shot of each: "if someone has a big screen make
   sure it adjusts accordingly"). --s is how many times the window is 1536 x 782 (the lesser of its width's and height's,
   in steps of a tenth); the scene and the top bar are laid out that many times smaller and scaled up by it, and the scene
   gives back the height the scale adds under it. Not zoom, as Chrome scales vw inside it and Safari doesn't; not a
   tan(atan2(100vw, 1536px)) number either, as Safari gets vw wrong in it. */
@media (min-width: 1690px) and (min-height: 861px) { :root { --s: 1.1; } }
@media (min-width: 1844px) and (min-height: 939px) { :root { --s: 1.2; } }
@media (min-width: 1997px) and (min-height: 1017px) { :root { --s: 1.3; } }
@media (min-width: 2151px) and (min-height: 1095px) { :root { --s: 1.4; } }
@media (min-width: 2304px) and (min-height: 1173px) { :root { --s: 1.5; } }
@media (min-width: 2458px) and (min-height: 1252px) { :root { --s: 1.6; } }
@media (min-width: 2612px) and (min-height: 1330px) { :root { --s: 1.7; } }
@media (min-width: 2765px) and (min-height: 1408px) { :root { --s: 1.8; } }
@media (min-width: 2919px) and (min-height: 1486px) { :root { --s: 1.9; } }
@media (min-width: 3072px) and (min-height: 1564px) { :root { --s: 2; } }
@media (min-width: 3226px) and (min-height: 1643px) { :root { --s: 2.1; } }
@media (min-width: 3380px) and (min-height: 1721px) { :root { --s: 2.2; } }
@media (min-width: 3533px) and (min-height: 1799px) { :root { --s: 2.3; } }
@media (min-width: 3687px) and (min-height: 1877px) { :root { --s: 2.4; } }
@media (min-width: 3840px) and (min-height: 1955px) { :root { --s: 2.5; } }
@media (min-width: 3994px) and (min-height: 2034px) { :root { --s: 2.6; } }
@media (min-width: 4148px) and (min-height: 2112px) { :root { --s: 2.7; } }
@media (min-width: 4301px) and (min-height: 2190px) { :root { --s: 2.8; } }
@media (min-width: 4455px) and (min-height: 2268px) { :root { --s: 2.9; } }
@media (min-width: 4608px) and (min-height: 2346px) { :root { --s: 3; } }
@media (min-width: 5376px) and (min-height: 2737px) { :root { --s: 3.5; } }
@media (min-width: 6144px) and (min-height: 3128px) { :root { --s: 4; } }
@supports (scale: 2) {
  @media (min-width: 1690px) and (min-height: 861px) {
    :root:has(.home-scene) { scroll-padding-top: calc(var(--topbar-h) * var(--s) + 12px); }
    .home-scene { width: calc(100% / var(--s)); margin-bottom: calc(var(--scene-h) * (var(--s) - 1)); scale: var(--s); transform-origin: 0 0; }
    :root:has(.home-scene) .topbar { right: auto; width: calc(100% / var(--s)); scale: var(--s); transform-origin: 0 0; }
  }
}
/* Tablets and phones: the painting first (the plate, your hero, PLAY), the panels under it. */
@media (max-width: 1100px) {
  .home-scene { --k: 5; --ph: max(780px, 100svh); height: auto; overflow: visible; background: var(--navy-900); }
  /* the banner rule above, on a painting --ph tall (never narrower than the window here) */
  .home-scene { --zw-fit: calc(var(--ph) * 0.1539 - 6.2px); }
  .scene-bg { bottom: auto; height: var(--ph); }
  .scene-bg::after { background: linear-gradient(0deg, var(--navy-900), rgba(5, 8, 28, 0.25) 30%, transparent 42%); }
  .scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-template-areas: "main main" "l r"; gap: 14px; height: auto; padding: 0 var(--gutter) 28px; }
  .scene-l { justify-content: flex-start; }
  .scene-main { grid-area: main; position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; height: var(--ph); padding: calc(var(--topbar-h) + 14px) 12px 18px; }
  .scene-plate, .scene-go { grid-area: auto; grid-column: 1; }
  .scene-plate { grid-row: 1; }
  .scene-go { grid-row: 3; }
  .scene-stage .scene-hero, .scene-stage .scene-shadow { bottom: calc(var(--ph) * 0.26); }
  .scene-stage .scene-tag { bottom: calc(var(--ph) * 0.26 + var(--tag-rows, var(--rows, 30)) * var(--k) * 1px + 8px); }
  /* and no bigger than the room over your hero's name tag: your hero's feet are 0.26 of the painting up from its foot;
     the top bar, the card drop, "$ZAZA presents", the line, the buttons, the hero, its tag and 10 px take --zw-rest */
  .home-scene { --zw-rest: 493px; }
  .home-scene h1.zw { font-size: min(4.4rem, 9vw, var(--zw-fit), (var(--ph) * 0.74 - var(--zw-rest) - var(--tag-more)) / 1.763); }
}
@media (max-width: 800px) {
  .scene-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "r" "l"; }
  /* Your hero first, then the camera, the cards last (owner, 2026-10-27: "on mobile, still put the customization on top
     and the cards on the bottom") */
  .scene-r > section { order: -1; }
  /* The page's gutter is the only side margin, and ZAZA WORLD (as wide as WORLD, about 3.9 times its font size with its outline) is sized to what's left,
     so nothing in the plate runs past it and everything stays centred. */
  .scene-main { padding-left: 0; padding-right: 0; }
  .scene-plate { width: 100%; min-width: 0; padding: 8px 4px 10px; }
  .home-scene { --zw-rest: 522px; }
  .home-scene h1.zw { font-size: min(3.2rem, calc((100vw - 48px) / 3.9), (var(--ph) * 0.78 - var(--zw-rest) - var(--tag-more)) / 1.763); }
  /* Your hero a little lower than on tablets, so ZAZA WORLD's two lines, the line and the buttons fit over its name: the
     title is no bigger than what the top bar, the card drop and all under the title (--zw-rest, with the hero, its tag
     and 10 px) leave of the 0.78 of the painting over its feet. The Game of the Year vote had the hero there first. */
  .scene-stage .scene-hero, .scene-stage .scene-shadow { bottom: calc(var(--ph) * 0.22); }
  .scene-stage .scene-tag { bottom: calc(var(--ph) * 0.22 + var(--tag-rows, var(--rows, 30)) * var(--k) * 1px + 8px); }
  .home-scene .lead { font-size: min(1rem, calc((100vw - 3rem) / 26.8)); } /* the longer line is ~26.6 times the font size wide */
  .scene-kick { letter-spacing: 0.24em; }
  .scene-play { gap: 10px; font-size: 34px; }
  .scene-line { width: 30px; }
  .scene-ways { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; width: min(100%, 360px); }
  .scene-name { grid-column: 1 / -1; width: 100%; }
  .scene-me { grid-column: 1 / -1; justify-self: center; }
  .scene-or, .scene-note { display: none; }
  .scene-wallet { justify-content: center; }
  .scene-x { padding: 0 5px; }
  .scene-x span { display: none; }
}

/* ---------- About carries the meme ----------
   Zaza's fanned photos (the $CARDS mascot sticker, World famous) and the site's blue rays opened the page until the World
   took the first screen (owner, 2026-10-25: "the about does require the other initial zaza photos to showcase the meme
   better"). They sit beside the story now, the rays behind the whole section (the photos' own, kept inside this band), a
   shade on the story's side so it reads; phones show the photos first. The reel card heads the wall of clips under it. */
.about-band { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-900); }
.about-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 18, 79, 0.92) 0%, rgba(6, 18, 79, 0.6) 40%, rgba(6, 18, 79, 0) 64%), linear-gradient(180deg, var(--navy-900) 0%, rgba(6, 18, 79, 0) 14%, rgba(6, 18, 79, 0) 52%, rgba(6, 18, 79, 0.92) 70%, var(--navy-900) 100%); }
.about-band .hero-show { z-index: auto; --reel-w: clamp(150px, 15vw, 215px); padding-top: 1.4rem; }
.about-band .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.reel-wall-body { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.reel-wall-body .reel-show { width: 100%; }
@media (max-width: 980px) {
  .about-band .story { grid-template-columns: minmax(0, 1fr); }
  .about-band .hero-show { order: -1; --reel-w: clamp(128px, 35vw, 200px); }
  .about-band::before { background: linear-gradient(180deg, var(--navy-900) 0, rgba(6, 18, 79, 0.1) 48px, rgba(6, 18, 79, 0.1) 330px, rgba(6, 18, 79, 0.92) 470px, var(--navy-900) 100%); }
  .reel-wall-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .reel-wall-body .reel-show { width: min(100%, 340px); }
}

.rewards-card {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0.7rem 1.4rem 0.7rem 0.7rem;
  border: 2px solid rgba(255, 214, 10, 0.55);
  border-radius: 18px;
  background: rgba(6, 18, 79, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The $CARDS coin beside the total (assets/cards-coin.svg). Owner 2026-10-12, on the energy card that sat here: "put
   the cards icon instead as a coin.. so it showcases those rewards". */
.rewards-card > img {
  width: 4rem;
  height: auto;
  aspect-ratio: 1;
}

.rewards-card-copy span {
  display: block;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rewards-card-copy strong {
  display: block;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.1;
}

.rewards-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35em;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
}

.rewards-card-meta small,
.rewards-card-meta em { font-size: inherit; line-height: 1.3; }
.rewards-card-meta em { font-style: normal; color: var(--muted); }

/* The rewards card (Rewards section, beside the coin; it was in the hero until 2026-10-17). */
.rewards-card {
  position: relative;
  overflow: hidden;
  padding: 0.85rem 1.6rem 0.85rem 0.9rem;
  border: 3px solid var(--yellow);
  border-radius: 20px;
  background: linear-gradient(135deg, #1437c9 0%, var(--navy-700) 45%, var(--navy-800) 100%);
  color: inherit;
  box-shadow:
    0 6px 0 var(--drop),
    0 0 0 6px rgba(255, 214, 10, 0.14),
    0 0 44px rgba(255, 214, 10, 0.28);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.rewards-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: chipShine 4.5s ease-in-out infinite;
  pointer-events: none;
}

.rewards-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 9px 0 var(--drop),
    0 0 0 6px rgba(255, 214, 10, 0.2),
    0 0 56px rgba(255, 214, 10, 0.4);
}

.rewards-card > img {
  width: 4.2rem;
  filter: drop-shadow(0 0 12px rgba(255, 214, 10, 0.35));
  animation: coinSpin 6s ease-in-out infinite;
}
/* Phones: a smaller coin, so "tokens given" stays on the $CARDS line. */
@media (max-width: 720px) { .rewards-card > img { width: 3rem; } }

.rewards-card .rewards-card-copy > span {
  color: var(--white);
}

.rewards-card .rewards-card-copy strong {
  font-size: clamp(2.2rem, 3.4vw, 2.7rem);
  line-height: 1.05;
  text-shadow: 0 3px 0 var(--blue-deep), 0 0 22px rgba(255, 214, 10, 0.35);
}

.rewards-card .rewards-card-meta { font-size: 0.92rem; }
.rewards-card-meta .cards-icon { align-self: center; }
.rewards-card .rewards-card-meta em { color: #d5ddff; }

/* How it pays, under the total (owner 2026-10-12: "showcase better that the rewards are automatically"): three steps
   joined by a track that a $CARDS glow runs along, then an "Automatic by Stonk.fun" line. One short
   line per step: a title + a second line each was "too much and too crowded info" (owner, same day). */
.rewards-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "card copy" "flow flow" "live live";
  align-content: center;
  column-gap: 1rem;
  row-gap: 0.65rem;
  padding-right: 1.3rem;
}
.rewards-card > img { grid-area: card; }
.rewards-card .rewards-card-copy { grid-area: copy; min-width: 0; }
.rewards-flow {
  --dot: 2rem;
  position: relative;
  grid-area: flow;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
/* The track runs from the first circle's middle to the last's; the glow travels it every 3.6 s. */
.rewards-flow::before,
.rewards-flow::after { content: ""; position: absolute; top: calc(var(--dot) / 2); pointer-events: none; }
.rewards-flow::before { left: 16.67%; right: 16.67%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(255, 214, 10, 0.55) 0 6px, transparent 6px 11px); }
.rewards-flow::after {
  left: 16.67%;
  width: 0.7rem;
  height: 0.7rem;
  margin: -0.35rem 0 0 -0.35rem;
  border-radius: 50%;
  background: #fff6c4;
  box-shadow: 0 0 6px 2px rgba(255, 214, 10, 0.95), 0 0 16px 4px rgba(255, 214, 10, 0.5);
  animation: rewardsFlow 3.6s ease-in-out infinite;
}
.rewards-flow li { position: relative; z-index: 1; display: grid; align-content: start; justify-items: center; min-width: 0; }
.rewards-flow i {
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  margin-bottom: 0.3rem;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--yellow);
  box-shadow: 0 3px 0 var(--drop), 0 0 14px rgba(255, 214, 10, 0.3);
  animation: rewardsStep 3.6s ease-in-out infinite;
}
.rewards-flow li:nth-child(2) i { animation-delay: 1.2s; }
.rewards-flow li:nth-child(3) i { animation-delay: 2.4s; }
.rewards-flow .ico { width: 1.1rem; height: 1.1rem; }
.rewards-flow i img { width: 1.05rem; height: 1.05rem; }
.rewards-flow span { color: #d5ddff; font-size: 0.82rem; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.rewards-auto { grid-area: live; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; margin: 0; padding-top: 0.55rem; border-top: 1px solid rgba(255, 214, 10, 0.35); }
.rewards-auto b { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--yellow); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.rewards-auto b::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: rewardsLive 2s ease-out infinite; }
.rewards-auto > span { min-width: 0; color: var(--white); font-size: 0.92rem; font-weight: 800; line-height: 1.3; }
@keyframes rewardsFlow {
  0% { left: 16.67%; opacity: 0; }
  10% { opacity: 1; }
  80% { left: 83.33%; opacity: 1; }
  100% { left: 83.33%; opacity: 0; }
}
@keyframes rewardsStep {
  0%, 20%, 100% { box-shadow: 0 3px 0 var(--drop), 0 0 14px rgba(255, 214, 10, 0.3); }
  8% { box-shadow: 0 3px 0 var(--drop), 0 0 0 4px rgba(255, 214, 10, 0.35), 0 0 22px rgba(255, 214, 10, 0.75); }
}
@keyframes rewardsLive { 70%, 100% { box-shadow: 0 0 0 0.45rem rgba(61, 220, 132, 0); } }
@media (prefers-reduced-motion: reduce) {
  .rewards-flow::after { display: none; }
  .rewards-flow i,
  .rewards-auto b::before,
  .rewards-card > img { animation: none; }
}

/* A coin turns once every 6 s (the rewards card's and the 100% automatic badge's $CARDS coin). */
@keyframes coinSpin {
  0%, 75% { transform: rotateY(0deg); }
  90%, 100% { transform: rotateY(360deg); }
}

@keyframes chipShine {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}

/* Zaza's clip showcase carries the ray burst so the rays always radiate from the hand of reel covers.
   On desktop it is its own stacking layer so the rays paint over the hero's left shade, like the old coin did. */
.hero-show {
  --reel-w: clamp(160px, min(17vw, 27svh), 240px);
  position: relative;
  z-index: 0;
  justify-self: center;
  display: grid;
  place-items: center;
  padding-top: 0.6rem;
}

.hero-show::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: -3;
  width: 400vmax;
  height: 400vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, #1a3fd6 0deg 7deg, #0a1a64 7deg 15deg);
  pointer-events: none;
}

.hero-show::after {
  content: "";
  position: absolute;
  inset: -12% -70%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 10, 0.4) 0%, rgba(255, 214, 10, 0.12) 45%, transparent 100%);
  pointer-events: none;
}

.spark {
  position: absolute;
  width: 2.2rem;
  aspect-ratio: 1;
  background: var(--white);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
  animation: twinkle 2.8s ease-in-out infinite;
}

.spark-a { top: -4%; right: -22%; }
.spark-b { bottom: 22%; left: -26%; width: 1.4rem; animation-delay: 0.9s; }

/* ---------- Ticker ---------- */

.ticker {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-block: 3px solid var(--drop);
  background: var(--yellow);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 42s linear infinite;
}

.ticker span {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding: 0.85rem 2.2rem 0.85rem 0;
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker span::after { content: "⚡"; font-size: 1rem; }

/* ---------- Story ---------- */

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

/* "Famous before the coin." / "Now a $CARDS mascot." (owner, 2026-10-12; was "The dog of the meta." / "The $CARDS
   mascot." from 10-06): one line each (~13.1em wide), the size follows the copy column, so neither phrase ever breaks.
   Colours swapped (owner, 2026-10-12): the first line yellow, the second white. */
.story-copy { container-type: inline-size; }
#story-title { font-size: min(clamp(2.3rem, 4.4vw, 4rem), 100cqi / 13.5); }
#story-title span { display: block; white-space: nowrap; }
#story-title span:last-child { color: var(--white); }

.story-stat {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  margin-top: 2rem;
  padding: 1.1rem 1.6rem;
  border: 3px solid var(--yellow);
  border-radius: var(--radius);
  background: var(--navy-800);
  max-width: 30rem;
}

.story-stat strong {
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.6vw, 3.8rem);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 4px 0 var(--blue-deep);
}

.story-stat span {
  color: var(--white);
  font-weight: 700;
  line-height: 1.35;
}

.viral-note {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 2px dashed var(--line);
  max-width: 34rem;
}

.viral-note h3 {
  color: var(--white);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}

.viral-note p:not(.china-line) {
  margin: 0.5rem 0 1.2rem;
  color: var(--muted);
}

.china-line {
  margin-top: 0.35rem;
  color: var(--yellow);
  font-family: "Noto Sans SC", var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 900;
  line-height: 1.25;
}

:where([lang="zh-Hans"]) { font-family: "Noto Sans SC", var(--font-body); font-weight: 900; }

/* Full reel cover sized to its 9:16 frame so nothing needs scrolling; opens the reel on Instagram. */
.reel-poster {
  position: relative;
  display: block;
  justify-self: center;
  width: min(100%, 360px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 3px solid var(--yellow);
  border-radius: var(--radius);
  background: var(--navy-800);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.reel-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.reel-poster:hover img { transform: scale(1.03); }

.reel-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 10, 44, 0.35) 0%, transparent 25%, transparent 65%, rgba(3, 10, 44, 0.85) 100%);
}

.reel-badge {
  position: absolute;
  z-index: 1;
  top: 14px;
  left: 14px;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--drop);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy-900);
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 3px 0 var(--drop);
}

.reel-play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 4.6rem;
  height: 4.6rem;
  border: 3px solid var(--drop);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 5px 0 var(--drop), 0 0 30px rgba(255, 214, 10, 0.5);
  transform: translate(-50%, -50%);
  transition: transform 150ms ease;
}

.reel-play::before {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  border-style: solid;
  border-width: 0.8rem 0 0.8rem 1.3rem;
  border-color: transparent transparent transparent var(--navy-900);
  transform: translate(-50%, -50%);
}

.reel-poster:hover .reel-play { transform: translate(-50%, -50%) scale(1.08); }

.reel-caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 16px;
  color: var(--white);
  font-weight: 800;
  text-align: center;
}

/* Zaza's viral clips: the reel card plays them in turn (main.js), story bars on top, bubbles under it to pick one. */
.reel-show { display: grid; justify-items: center; gap: 1rem; justify-self: center; width: min(100%, 360px); }
.reel-show .reel-poster { width: 100%; }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 250ms ease; }
.reel-poster.is-playing .reel-video { opacity: 1; }
.reel-poster.is-playing .reel-play { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
@media (hover: hover) { .reel-poster.is-playing:hover .reel-play { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.reel-poster.is-playing:focus-visible .reel-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.reel-play { transition: transform 150ms ease, opacity 200ms ease; }
.reel-bars { position: absolute; z-index: 1; top: 8px; left: 12px; right: 12px; display: flex; gap: 4px; }
.reel-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.reel-bars i::after { content: ""; display: block; width: var(--p, 0%); height: 100%; background: var(--white); }
.reel-show .reel-badge { top: 20px; }
.reel-picks { display: flex; justify-content: center; gap: clamp(0.6rem, 2vw, 1.1rem); margin: 0; padding: 0; list-style: none; }
.reel-picks button { display: grid; justify-items: center; gap: 0.35rem; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; }
.reel-picks img { width: clamp(3.6rem, 9vw, 4.4rem); height: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--line); box-shadow: 0 0 0 3px var(--navy-900); object-fit: cover; transition: border-color 150ms ease, transform 150ms ease; }
.reel-picks button:hover img { transform: translateY(-2px); }
.reel-picks button[aria-pressed="true"] { color: var(--white); }
.reel-picks button[aria-pressed="true"] img { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--navy-900), 0 0 18px rgba(255, 214, 10, 0.45); }
.reel-picks button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 12px; }
.reel-picks template { display: none; }
@media (prefers-reduced-motion: reduce) { .reel-video { transition: none; } }

/* More of Zaza's crowds under the story (main.js #reelWall): three silent clips beside the reel card (in a row on phones
   too, their captions without the icons), each caption under its clip with a gold line icon, never on it. */
.story { row-gap: clamp(2rem, 4vw, 3rem); }
.reel-wall { grid-column: 1 / -1; }
.reel-wall-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.5rem; margin-bottom: clamp(1.1rem, 2vw, 1.6rem); }
.reel-wall-title { margin: 0; color: var(--white); font-size: clamp(1.45rem, 2.8vw, 2.2rem); }
.reel-wall-title span { color: var(--yellow); }
.reel-wall-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.reel-tile { display: grid; gap: 0.85rem; color: inherit; text-decoration: none; }
.reel-tile-frame { display: block; aspect-ratio: 9 / 16; overflow: hidden; border: 3px solid var(--yellow); border-radius: var(--radius); background: var(--navy-800); box-shadow: 0 8px 0 var(--drop), 0 24px 48px rgba(0, 0, 0, 0.4); transition: transform 0.2s ease; }
.reel-tile:hover .reel-tile-frame { transform: translateY(-4px) rotate(-0.6deg); }
.reel-tile:focus-visible { outline: none; }
.reel-tile:focus-visible .reel-tile-frame { outline: 3px solid var(--white); outline-offset: 4px; }
.reel-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reel-tile-text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.5rem; font-size: clamp(0.98rem, 1.4vw, 1.15rem); line-height: 1.25; }
.reel-tile-text .ico { grid-row: 1; width: 1.1em; height: 1.25em; color: var(--yellow); }
.reel-tile-text strong { grid-column: 2; color: var(--white); font-family: var(--font-display); font-weight: 400; }
.reel-tile-text span { grid-column: 2; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.reel-show .reel-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.85rem; line-height: 1; }
.reel-badge .ico { width: 1.05em; height: 1.05em; stroke-width: 2.4; }
.reel-wall-pause { min-height: 2.3rem; padding: 0 1rem; border: 2px solid var(--line); border-radius: 999px; background: rgba(3, 10, 44, 0.6); color: var(--white); font: inherit; font-size: 0.85rem; font-weight: 800; line-height: 1; cursor: pointer; }
.reel-wall-pause:hover { border-color: var(--yellow); }
.reel-wall-pause:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
/* Whose clips these are: the fan site credits the dog's own pages. */
.reel-credit { margin: clamp(1rem, 2vw, 1.4rem) 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.45; }
.reel-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.reel-credit a:hover { color: var(--yellow); }
@media (max-width: 720px) {
  .reel-wall-list { gap: 10px; }
  .reel-tile { gap: 0.55rem; }
  .reel-tile-text { grid-template-columns: minmax(0, 1fr); font-size: 0.86rem; line-height: 1.2; }
  .reel-tile-text .ico { display: none; }
  .reel-tile-text strong, .reel-tile-text span { grid-column: 1; }
  .reel-tile-text span { font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) { .reel-tile-frame { transition: none; } }

/* ---------- Thesis ---------- */

/* The thesis as a sum, what each one is on top and its name under it (owner, 2026-10-28, with a shot of the phone: "put
   the most famous pokemon ... and most famous memecoin on top with more emphase.. and under it the pikachu and doge"):
   "Most popular" in yellow over "Pokémon" / "memecoin" in white, two lines of the heading's Titan One, then Pikachu / Doge
   smaller under them. ZAZA. stands as tall as those two lines, so the three names share one line, and the signs sit
   between the two lines. The sum is about 23.6em wide, so it fills one line on computers and tablets. Phones: the two
   terms on one line (about 15.8em) and "= ZAZA." under them, flush left like the text around it. */
.thesis .section-head { max-width: 980px; }
.thesis-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5em 0.45em;
  font-size: min(2.5rem, calc((100vw - 2 * var(--gutter)) / 24.6));
  line-height: 1.04;
}
.ts-part { display: inline-flex; align-items: flex-start; gap: 0.45em; }
.ts-term { display: inline-flex; flex-direction: column; align-items: flex-start; }
.ts-what, .ts-what b { display: block; color: var(--white); white-space: nowrap; }
.ts-what b { color: var(--yellow); font-weight: 400; }
.thesis-sum .ts-zaza .ts-what { color: var(--yellow); font-size: 2em; }
.ts-op { color: var(--white); font-size: 1.3em; line-height: calc(2 * 1.04 / 1.3); } /* the middle of the two lines */
.ts-term small {
  margin-top: 0.42em;
  color: var(--white);
  font-size: 0.6em;
  line-height: 1.1;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .thesis-sum { gap: 0.6em 0.4em; font-size: calc((100vw - 2 * var(--gutter)) / 16.2); }
  .ts-part { gap: 0.4em; }
  .ts-term small { font-size: 0.72em; }
}

.thesis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.num {
  display: inline-grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border: 3px solid var(--drop);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
}

.mini-card .num { margin-bottom: 1.2rem; }
.mini-card:nth-child(1) .num { background: var(--yellow); color: var(--navy-900); }
.mini-card:nth-child(2) .num { background: var(--blue); color: var(--white); }
.mini-card:nth-child(3) .num { background: var(--red); color: var(--white); }

.runner-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2rem;
  align-items: center;
}

.runner-card h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }

.runner-pairs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.runner-pairs li {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 1rem 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(3, 10, 44, 0.45);
}

.rp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.runner-pairs b {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

.runner-pairs span {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.runner-pairs .is-zaza {
  border-color: var(--yellow);
  background: var(--yellow);
}

.runner-pairs .is-zaza b,
.runner-pairs .is-zaza span { color: var(--navy-900); }

.runner-note {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.rp-stats {
  display: grid;
  gap: 0.22rem;
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

.rp-stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.rp-stats dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rp-stats dd {
  margin: 0;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.rp-stats .rp-prop dd { color: var(--yellow); }

.runner-pairs .is-zaza .rp-stats { border-top-color: rgba(6, 18, 79, 0.3); }
.runner-pairs .is-zaza .rp-stats dt,
.runner-pairs .is-zaza .rp-stats dd { color: var(--navy-900); }

.rp-bar {
  height: 5px;
  margin-top: auto;
  border-radius: 999px;
  background: rgba(179, 192, 240, 0.18);
  overflow: hidden;
}

.rp-bar i {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: var(--yellow);
}

.rp-hero {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(6, 18, 79, 0.3);
}

.runner-pairs .rp-hero-num {
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
}

.runner-pairs .rp-hero-label {
  color: var(--navy-900);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
}

.runner-pairs .is-zaza .rp-bar { background: rgba(6, 18, 79, 0.18); }
.runner-pairs .is-zaza .rp-bar i { background: var(--navy-900); }

/* ---------- How to buy (yellow band) ---------- */

.buy-band {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 6.5vw, 96px) var(--gutter);
  border-block: 3px solid var(--drop);
  background: var(--yellow);
  color: var(--navy-900);
}

.buy-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.buy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.buy-head h2 {
  color: var(--navy-900);
  font-size: clamp(2.8rem, 6.4vw, 5.6rem);
  line-height: 0.95;
  text-shadow: none;
}

.buy-head h2 span { display: block; color: var(--blue); }

.buy-head p {
  max-width: 25rem;
  color: #22306e;
  font-size: 1.08rem;
  font-weight: 700;
}

/* the one-minute video beside the four steps (2 x 2), both on the yellow band; one column from 1100px down */
.buy-main {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* beside the video the four steps sit 2 x 2, a little tighter, as tall as the video */
.buy-main .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.buy-main .step { padding: 1.15rem 1.25rem; }
.buy-main .step h3 { margin: 0.7rem 0 0.3rem; font-size: clamp(1.15rem, 1.45vw, 1.4rem); }

.buy-head p a { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }

.buy-video {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--navy-900);
  border-radius: var(--radius);
  background: var(--navy-900);
  box-shadow: 0 6px 0 var(--navy-900);
}

.buy-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--navy-950);
}

.buy-video figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-top: auto;
  padding: 0.85rem 1.1rem;
  color: var(--white);
  font-weight: 700;
}

.buy-video figcaption b { font-family: var(--font-display); font-weight: 400; color: var(--yellow); }

.buy-video figcaption a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  padding: 1.6rem;
  border: 3px solid var(--navy-900);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 6px 0 var(--navy-900);
}

.step h3 {
  margin: 1.1rem 0 0.45rem;
  color: var(--navy-900);
  font-size: clamp(1.3rem, 1.8vw, 1.55rem);
}

.step p { color: #3a4675; font-weight: 600; }

.step:nth-child(1) .num { background: var(--yellow); color: var(--navy-900); }
.step:nth-child(2) .num { background: var(--blue); color: var(--white); }
.step:nth-child(3) .num { background: var(--red); color: var(--white); }
.step:nth-child(4) .num { background: var(--navy-900); color: var(--yellow); }

.contract-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem 2rem;
  margin-top: 28px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 3px solid var(--navy-900);
  border-radius: var(--radius-lg);
  background: var(--navy-900);
  color: var(--white);
  box-shadow: 0 8px 0 rgba(6, 18, 79, 0.35);
}

.contract-title .kicker { margin-bottom: 0.4rem; }

.contract-title h3 {
  color: var(--yellow);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
}

.contract-box {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.55rem 0.55rem 1.3rem;
  border: 2px solid rgba(255, 214, 10, 0.6);
  border-radius: 18px;
  background: var(--navy-950);
}

.contract-box code {
  flex: 1;
  min-width: 0;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.4vw, 1.05rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.contract-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.link-strip,
.dog-source-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.link-strip a,
.dog-source-strip a {
  padding: 0.5rem 1.05rem;
  border: 2px solid rgba(255, 214, 10, 0.6);
  border-radius: 999px;
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 700;
  transition: background 150ms ease, color 150ms ease;
}

.link-strip a:hover,
.dog-source-strip a:hover {
  background: var(--yellow);
  color: var(--navy-900);
}

.copy-status {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

/* the swap card (home-swap.js): SOL, USDC or $CARDS → $ZAZA through Jupiter, with the ZAZA coin on a turning ray burst,
   "You get" as the prize and ZAZA World's holder tiers lighting up, and the contract card folded in at its foot.
   From 900px it lies wide (You pay → You get, the tiers across, the details and Buy under them); narrower, one column. */
.swap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  margin-top: 28px;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 3px solid var(--navy-900);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(29, 75, 255, 0.45), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(255, 214, 10, 0.1), transparent 70%),
    var(--navy-900);
  color: var(--white);
  box-shadow: 0 8px 0 rgba(6, 18, 79, 0.35);
}

.swap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 4px;
}

.swap-title { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: 0; }
.swap-title .kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin: 0; }
.swap-title h3 { color: var(--yellow); font-size: clamp(1.9rem, 3.4vw, 2.8rem); text-shadow: 0 4px 0 var(--drop); }

.swap-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--green);
  letter-spacing: 0.1em;
}

.swap-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: swap-live 1.8s ease-out infinite; }

@keyframes swap-live { to { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } }

/* the coin on its ray burst, top right */
.swap-coin {
  position: relative;
  flex: none;
  width: clamp(72px, 9vw, 112px);
  aspect-ratio: 1;
}

.swap-coin::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: repeating-conic-gradient(from 0deg, rgba(58, 102, 255, 0.55) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  animation: swap-spin 28s linear infinite;
}

.swap-coin::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 10, 0.4), transparent);
}

.swap-coin img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 0 var(--drop));
  animation: swap-bob 3.2s ease-in-out infinite alternate;
}

@keyframes swap-spin { to { transform: rotate(1turn); } }
@keyframes swap-bob { from { transform: translateY(3px) rotate(-6deg); } to { transform: translateY(-5px) rotate(5deg); } }

.swap-wallet {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border: 2px solid rgba(255, 214, 10, 0.6);
  border-radius: 999px;
  background: none;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.swap-wallet i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.swap-wallet b { color: var(--muted); }
.swap-wallet:hover { background: var(--yellow); color: var(--navy-900); }
.swap-wallet:hover b { color: var(--navy-900); }

.swap-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 1rem 1rem;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--navy-950);
}

.swap-panel:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.22); }

/* You get: the prize, lit gold from the coin's side */
.swap-get {
  border-color: rgba(255, 214, 10, 0.65);
  background: radial-gradient(90% 130% at 100% 50%, rgba(255, 214, 10, 0.2), transparent 60%), var(--navy-950);
}

.swap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-width: 0;
}

.swap-pay-row { flex-wrap: wrap; row-gap: 0.6rem; }

.swap-row label,
.swap-row > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.swap-row small { color: var(--muted); font-size: 0.85rem; font-weight: 700; }

.swap-amt {
  flex: 1 1 6rem;
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  line-height: 1.2;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swap-get .swap-amt { color: var(--yellow); font-size: clamp(2rem, 3.4vw, 2.9rem); text-shadow: 0 3px 0 var(--drop); font-variant-numeric: tabular-nums; }
.swap-amt:disabled { opacity: 0.6; }
.swap-amt::placeholder { color: rgba(179, 192, 240, 0.45); }

.swap-pay {
  display: flex;
  flex: none;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--navy-800);
}

.swap-pay button,
.swap-token {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
}

.swap-pay button { background: none; color: var(--muted); cursor: pointer; }
.swap-pay button:hover { color: var(--white); }
.swap-pay button[aria-pressed="true"] { background: var(--yellow); color: var(--navy-900); }
.swap-pay svg,
.swap-pay img { width: 24px; height: 24px; border-radius: 50%; }

.swap-token { flex: none; padding-right: 0.85rem; background: var(--navy-800); color: var(--yellow); font-size: 1.05rem; }
.swap-token img { width: 34px; height: 34px; border-radius: 50%; }

.swap-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.swap-chips button {
  padding: 0.3rem 0.7rem;
  border: 2px solid rgba(179, 192, 240, 0.32);
  border-radius: 999px;
  background: none;
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.swap-chips button:hover { border-color: var(--yellow); color: var(--yellow); }
.swap-hint { color: var(--yellow-soft); font-size: 0.82rem; font-weight: 700; }

/* between the two panels, over both edges */
.swap-arrow {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: center;
  width: 42px;
  height: 42px;
  margin: -22px 0;
  border: 3px solid var(--navy-900);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: 0 3px 0 var(--drop);
}

.swap-usd { min-height: 1.3em; color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.swap-usd.warn { color: #ff8fa0; }

/* ZAZA World's holder tiers: lit up to the one the $ZAZA you'd hold reaches, the line filling on to the next */
.swap-tiers {
  padding: 0.85rem 1rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: rgba(29, 75, 255, 0.12);
}

.swap-tier-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1.1rem;
  min-height: 1.6rem;
  margin-bottom: 0.8rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
}

.swap-tier-line b { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--c); font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.swap-tier-line b svg { width: 20px; height: 20px; }
.swap-tier-line span { color: var(--muted); font-size: 0.86rem; }

.swap-tiers ol {
  --fill: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.swap-tiers ol::before,
.swap-tiers ol::after {
  content: "";
  position: absolute;
  top: 15px;
  left: calc(100% / 14);
  height: 4px;
  border-radius: 4px;
}

.swap-tiers ol::before { right: calc(100% / 14); background: rgba(179, 192, 240, 0.18); }
.swap-tiers ol::after { width: calc((100% - 100% / 7) * var(--fill)); background: linear-gradient(90deg, var(--yellow), #ff8a4a); transition: width 500ms ease; }

.swap-tiers li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  text-align: center;
  opacity: 0.5;
  transition: opacity 300ms ease;
}

.swap-tiers li svg {
  width: 34px;
  height: 34px;
  padding: 4px;
  border-radius: 50%;
  background: var(--navy-950);
  filter: grayscale(1) brightness(0.8);
  transition: transform 300ms ease, box-shadow 300ms ease, filter 300ms ease;
}

.swap-tiers li b { color: var(--c); font-family: var(--font-display); font-size: 0.8rem; font-weight: 400; line-height: 1.1; }
.swap-tiers li small { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.swap-tiers li.got { opacity: 1; }
.swap-tiers li.got svg { filter: none; }
.swap-tiers li.now svg { transform: scale(1.22); box-shadow: 0 0 0 3px var(--c), 0 0 22px var(--c); }

.swap-info { display: grid; gap: 0.3rem; margin: 0.2rem 0.25rem 0; }
.swap-info div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; white-space: nowrap; }
.swap-info dt { color: var(--muted); font-weight: 700; }
.swap-info dd { margin: 0; font-weight: 800; }
.swap-info dd.warn { color: #ff8fa0; }

.swap-msg {
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(58, 102, 255, 0.2);
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.swap-msg.ok { background: rgba(61, 220, 132, 0.16); color: #b9f6d3; }
.swap-msg.err { background: rgba(255, 46, 77, 0.16); color: #ffc4cc; }
.swap-msg a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }

.swap-go { width: 100%; margin-top: 4px; }
.swap-note { color: var(--muted); font-size: 0.82rem; font-weight: 600; line-height: 1.45; }

/* the contract card, folded into the swap card's foot under a dashed line; Buy on Raydium steps back beside Buy $ZAZA */
.swap-card .contract-card {
  margin: 8px 0 0;
  padding: 1.3rem 0 0;
  border: 0;
  border-top: 2px dashed rgba(179, 192, 240, 0.28);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.swap-card .contract-title h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.swap-card .contract-buy { border-color: rgba(255, 214, 10, 0.6); color: var(--white); }
.swap-card .contract-buy:hover { background: var(--yellow); color: var(--navy-900); }

/* a buy that went through: ZAZA coins burst up from the button */
.swap-coin-fly {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  pointer-events: none;
  animation: swap-fly 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes swap-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .swap-coin::before,
  .swap-coin img,
  .swap-live i { animation: none; }
}

@media (max-width: 600px) {
  .swap-tiers li b { display: none; }
  .swap-tiers li svg { width: 30px; height: 30px; padding: 3px; }
  .swap-tiers ol::before,
  .swap-tiers ol::after { top: 13px; }
}

@media (min-width: 900px) {
  .swap-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "head head head" "pay arrow get" "tiers tiers tiers" "info . go" "msg msg msg" "note note note" "ca ca ca";
    gap: 14px 10px;
  }

  .swap-head { grid-area: head; margin-bottom: 0; }
  .swap-card > .swap-pay-panel { grid-area: pay; }
  .swap-card > .swap-get { grid-area: get; }
  .swap-arrow { grid-area: arrow; margin: 0 -22px; transform: rotate(-90deg); box-shadow: none; }
  .swap-tiers { grid-area: tiers; }
  .swap-info { grid-area: info; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem 1.6rem; align-content: center; margin: 0 0.25rem; }
  .swap-go { grid-area: go; align-self: center; margin-top: 0; }
  .swap-msg { grid-area: msg; }
  .swap-note { grid-area: note; }
  .swap-card .contract-card { grid-area: ca; }
}

/* ---------- Token / $CARDS rewards ---------- */

.token-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.token-head h2 {
  font-size: clamp(1.5rem, 6.2vw, 3.3rem);
}

/* Two lines at every width: "Hold the mascot" / "Stack more $CARDS" */
.token-head h2 span { display: block; white-space: nowrap; }

.token-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.meter-card { grid-column: span 2; }
.meter-card h3 { color: var(--yellow); font-size: clamp(1.5rem, 2.2vw, 1.9rem); }

.energy-card-panel {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-color: var(--yellow);
}

/* The $CARDS coin (assets/cards-coin.svg), as on the hero's rewards card; it was the energy card until the owner,
   2026-10-13: "update this on mobile and desktop to show the cards coin". */
.energy-card-panel img {
  width: clamp(5.5rem, 9vw, 7.5rem);
  height: auto;
  aspect-ratio: 1;
  flex: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

.energy-card-panel .label { color: var(--yellow); }
.energy-card-panel p { color: var(--white); font-size: 1.08rem; font-weight: 700; }

.stat-card strong,
.community-totals strong {
  display: block;
  margin-top: 0.5rem;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
  text-shadow: 0 4px 0 var(--blue-deep);
}

.stat-card p { font-size: 0.9rem; }

/* A link down to the live rewards board (it was "Can we show each holder?", answered before the board existed): the words
   on the left, the button and the last refresh on the right; on phones the button goes under the words. */
.holder-question {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2rem;
  align-items: center;
  color: inherit;
  transition: border-color 150ms ease;
}
.holder-question:hover { border-color: var(--yellow); }
.holder-question:hover .holder-question-go { background: var(--yellow-soft); }
.holder-question h3,
.holder-question > p:not(.reward-note) { grid-column: 1; }
.holder-question p:not(.reward-note) { max-width: 44rem; }
.holder-question .reward-note { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 0.65rem; margin: 0; }
.holder-question #rewardsUpdated { color: var(--muted); font-size: 0.78rem; font-weight: 600; }
@media (max-width: 720px) {
  .holder-question { grid-template-columns: minmax(0, 1fr); }
  .holder-question .reward-note { grid-column: 1; grid-row: auto; justify-items: start; margin-top: 1rem; }
}

/* ---------- Coin showcase: it opens the Rewards section (#community-rewards), above the board ---------- */

.coin-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  margin-bottom: clamp(56px, 7vw, 104px);
}
.coin-copy .rewards-card { max-width: 34rem; margin-top: 1.8rem; }

.coin-stage {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(100%, 440px);
  aspect-ratio: 1;
}

.coin-stage img {
  position: relative;
  z-index: 1;
  width: 76%;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 36px rgba(255, 214, 10, 0.35));
  animation: coinFloat 5.5s ease-in-out infinite;
}

.coin-orbit {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(58, 102, 255, 0.6);
  border-radius: 50%;
  animation: spin 40s linear infinite;
}

.orbit-two {
  inset: 9%;
  border-style: solid;
  border-color: rgba(255, 214, 10, 0.28);
  animation-direction: reverse;
  animation-duration: 28s;
}

.coin-bolt {
  position: absolute;
  z-index: 2;
  width: 3.4rem;
  height: 5.2rem;
  background: var(--yellow);
  clip-path: polygon(45% 0, 100% 0, 66% 40%, 94% 40%, 22% 100%, 40% 54%, 8% 54%);
  filter: drop-shadow(0 0 10px rgba(255, 214, 10, 0.7));
}

.bolt-one { top: 6%; left: 6%; transform: rotate(-12deg); }
.bolt-two { right: 4%; bottom: 10%; transform: rotate(10deg) scale(0.8); }

.coin-copy h2 { font-size: clamp(2.2rem, 3.8vw, 3.5rem); }
.coin-copy h2 span { display: block; }

.coin-copy > p:not(.kicker) {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 34rem;
}

/* ---------- Vault ---------- */

.vault {
  --vault-gap: clamp(28px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-rows: auto 1fr auto auto;
  gap: var(--vault-gap);
  align-items: start;
}
/* Left: the steps, "Your charge", the meter note and the Donate card. Right: the power cell beside the first three, then
   "Your safety" beside the Donate card. Extra height goes to row 2 (1fr), where "Your charge" stretches so the note under
   it ends level with the power cell; the Donate card and "Your safety" share row 4 and both stretch to the taller one. */
.vault-console { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; }

.vault-copy h2 { font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 0.98; }
.vault-copy h2 span { display: block; }

.vault-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.2rem;
  padding: 0.5rem 1.1rem;
  border: 3px solid var(--drop);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: 1.05rem;
  box-shadow: 0 4px 0 var(--drop);
  animation: soonPulse 2.4s ease-in-out infinite;
}

@keyframes soonPulse {
  0%, 100% { box-shadow: 0 4px 0 var(--drop), 0 0 0 0 rgba(255, 214, 10, 0.45); }
  50% { box-shadow: 0 4px 0 var(--drop), 0 0 0 10px rgba(255, 214, 10, 0); }
}

.vault-steps {
  display: grid;
  gap: 0.7rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.vault-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.vault-steps b {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid var(--drop);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 400;
}

.vault-steps strong {
  display: block;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
}

.vault-steps span { color: var(--muted); }
.vault-steps em { color: var(--yellow); font-style: normal; font-weight: 800; }

.vault-wallet {
  grid-column: 1;
  align-self: stretch;
  margin-top: calc(1.6rem - var(--vault-gap)); /* 1.6rem under the steps, not the full grid gap */
  border-color: var(--yellow);
}

.vault-wallet .label { color: var(--yellow); }
.vault-wallet p { color: var(--white); }
.vault-wallet .muted { color: var(--muted); font-size: 0.92rem; }
.vault-flag {
  margin: 0.2rem 0 1rem;
  padding: 0.85rem 1rem;
  border: 2px solid #ffb800;
  border-radius: 14px;
  background: rgba(255, 184, 0, 0.14);
}
.vault-flag strong { display: block; color: #ffd66b; font-size: 1rem; font-weight: 800; }
.vault-wallet .vault-flag p { margin: 0.35rem 0 0; color: var(--white); font-size: 0.88rem; }
.vault-flag b { color: var(--yellow); }

.vault-expect {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px dashed rgba(255, 214, 10, 0.4);
  border-radius: 12px;
  background: rgba(255, 214, 10, 0.06);
}
.vault-expect ul { margin: 0.45rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.88rem; }
.vault-expect li + li { margin-top: 0.3rem; }
.vault-expect li strong { color: var(--white); }
.vault-wallet .vault-expect p { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.85rem; }

.vault-test-banner {
  margin-bottom: 0.9rem;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 46, 77, 0.15);
  color: #ffd3da;
  font-size: 0.9rem;
  font-weight: 700;
}

.vault-me {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.9rem 0 0;
}

.vault-me div {
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: rgba(3, 10, 44, 0.45);
}

.vault-me dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vault-me dd {
  margin: 0.15rem 0 0;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.vault-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.vault-caps button,
.vault-caps input {
  min-height: 2.6rem;
  padding: 0 1.1rem;
  border: 2px solid rgba(179, 192, 240, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.vault-caps input {
  width: 9rem;
  cursor: text;
}

.vault-caps input::placeholder { color: var(--muted); }

.vault-caps button[aria-pressed="true"] {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--navy-900);
}

.vault-caps .vault-cap-max {
  flex: 1 1 100%;
  display: grid;
  min-height: 3.6rem;
  place-content: center;
  border: 3px solid var(--yellow);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
}

.vault-caps .vault-cap-max small {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.8;
}

.vault-caps-or {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.vault-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.vault-charge-button {
  width: 100%;
  margin-top: 1rem;
}

.vault-charge-button:disabled,
.vault-charge-button:disabled:hover { opacity: 0.8; }

.vault-stop {
  border-color: rgba(255, 46, 77, 0.7);
  color: #ffd3da;
}

.vault-msg {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.vault-msg.is-error { color: #ff9aaa; }
.vault-msg.is-ok { color: var(--green); }
.vault-msg a { color: var(--yellow); text-decoration: underline; }

/* Donate card: $CARDS, USDC, SOL or a Collector Crypt card to the Squads marketing wallet (vault.js), under "Your charge". */
.vault-donate {
  grid-column: 1;
  align-self: stretch;
  margin-top: calc(1rem - var(--vault-gap)); /* 1rem under "Your charge", not the full grid gap */
  border-color: rgba(255, 214, 10, 0.55);
}
.vault-donate .label { color: var(--yellow); }
.vault-donate p { color: var(--white); }
.vault-donate p a { color: var(--yellow); text-decoration: underline; }
.vault-donate .muted { color: var(--muted); font-size: 0.92rem; }
/* Not connected yet: the button beside the text, stacked again once the card is narrow. */
.vault-donate { container-type: inline-size; }
.vault-donate-start p a { white-space: nowrap; }
@container (min-width: 30rem) {
  .vault-donate-start { display: flex; align-items: center; gap: 1.25rem; }
  .vault-donate-start p { flex: 1; }
  .vault-donate-start .vault-charge-button { flex: none; width: 11.5rem; min-height: 0; margin-top: 0; padding: 0.75rem 0.9rem; font-size: 1.05rem; line-height: 1.15; white-space: normal; text-wrap: balance; }
}
/* No connecting: the multisig's address to copy, with its QR code for a phone wallet (hidden on a phone itself). */
.vault-donate-direct {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.1rem;
  padding: 0.9rem 1rem;
  border: 2px dashed rgba(255, 214, 10, 0.45);
  border-radius: 16px;
  background: rgba(3, 10, 44, 0.45);
}
.vault-donate-direct > div { flex: 1; min-width: 0; }
.vault-donate-direct .label { display: block; margin-bottom: 0.3rem; }
.vault-donate-direct p { margin: 0; font-size: 0.92rem; }
.vault-donate-qr { flex: none; width: 160px; height: 160px; padding: 6px; border-radius: 12px; background: #fff; } /* 37 modules × 4 px */
.vault-donate-address { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.vault-donate-address code {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  border: 2px solid rgba(255, 214, 10, 0.35);
  border-radius: 10px;
  background: var(--navy-950);
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  user-select: all;
}
.vault-donate-address .btn { flex: none; }
@container (max-width: 26rem) {
  .vault-donate-qr { display: none; }
}

.vault-gift-tokens {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.vault-gift-tokens button {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.75rem 0.4rem 0.65rem;
  border: 2px solid rgba(179, 192, 240, 0.35);
  border-radius: 14px;
  background: rgba(3, 10, 44, 0.45);
  color: var(--white);
  font: inherit;
  cursor: pointer;
}
.vault-gift-tokens button[aria-pressed="true"] {
  border-color: var(--yellow);
  background: rgba(255, 214, 10, 0.12);
}
.vault-gift-tokens strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; }
.vault-gift-tokens small { color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.vault-gift-icon {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  overflow: hidden;
  border-radius: 50%;
}
.vault-gift-icon img,
.vault-gift-icon svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.vault-gift-emoji {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: rgba(255, 214, 10, 0.16);
  font-size: 1.2rem;
}
.vault-gift-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.6rem;
  max-height: 27rem;
  margin-top: 0.9rem;
  padding: 0.2rem;
  overflow-y: auto;
}
.vault-gift-cards button {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.5rem;
  border: 2px solid rgba(179, 192, 240, 0.35);
  border-radius: 12px;
  background: rgba(3, 10, 44, 0.45);
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vault-gift-cards button[aria-pressed="true"] { border-color: var(--yellow); background: rgba(255, 214, 10, 0.12); }
.vault-gift-cards button:disabled { opacity: 0.5; cursor: not-allowed; }
.vault-gift-cards img,
.vault-gift-noimg {
  display: grid;
  width: 100%;
  aspect-ratio: 3 / 4;
  place-items: center;
  border-radius: 8px;
  background: rgba(3, 10, 44, 0.7);
  object-fit: contain;
  font-size: 2rem;
}
.vault-gift-cards strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.vault-gift-cards small { color: var(--muted); font-size: 0.72rem; font-weight: 700; line-height: 1.3; }
.vault-gift-amounts input { flex: 1 1 8rem; width: auto; }
.vault-gift-note { margin-top: 0.7rem; color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.vault-donate .vault-gift-note { color: var(--muted); }
.vault-donate .vault-gift-note.is-warn { color: #ffd66b; }

.vault-ideas { margin-top: 0.7rem; }
.vault-ideas .label { display: block; margin-bottom: 0.5rem; color: var(--muted); }
.vault-steps .vault-milestones strong { display: inline; font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; }
.vault-steps .vault-milestones li { display: block; }

.vault-milestones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vault-milestones li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #081656;
  font-size: 0.88rem;
  line-height: 1.25;
}

.vault-milestones span {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy-900);
  font-size: 0.85rem;
  font-weight: 800;
}

.vault-milestones .is-done span { background: var(--green); }
.vault-milestones .is-done strong { color: var(--muted); }

.vault-milestones strong { color: var(--white); font-weight: 700; }

.vault-milestones b {
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.vault-console {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vault-console-head {
  position: absolute;
  z-index: 5;
  top: 22px;
  left: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vault-console-head span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vault-console-head strong {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
}

.vault-console-head strong::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 10px rgba(255, 214, 10, 0.9);
  animation: twinkle 1.6s ease-in-out infinite;
}

/* Power cell: a tall battery with a vault-door dial holding the coin. */
.vault-battery {
  position: relative;
  height: clamp(400px, 34vw, 480px);
  overflow: hidden;
  border: 6px solid #26327a;
  border-radius: 46px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 214, 10, 0.14), transparent 45%),
    linear-gradient(180deg, #07124d 0%, #040a35 100%);
  box-shadow:
    inset 0 0 0 8px #0a1450,
    0 30px 60px rgba(0, 0, 0, 0.38),
    0 0 44px rgba(255, 214, 10, 0.1);
}

.vault-door {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 13%;
  display: grid;
  place-items: center;
  width: clamp(128px, 11vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, #16236e 0 50%, #33408f 51% 55%, #0c1655 56% 70%, #3a468f 71% 74%, #111b5c 75%);
  box-shadow:
    0 0 0 6px #1b2670,
    0 0 0 8px rgba(255, 214, 10, 0.35),
    0 18px 30px rgba(0, 0, 0, 0.45);
}

.vault-door::before,
.vault-door::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 88%;
  height: 8px;
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 0 0 14px rgba(255, 214, 10, 0.6);
  transform: translate(-50%, -50%) rotate(45deg);
}

.vault-door::after { transform: translate(-50%, -50%) rotate(-45deg); }

.vault-door img {
  width: 56%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

.vault-battery-fill {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 22% 70%, rgba(255, 255, 255, 0.55) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.45) 0 3px, transparent 4px),
    radial-gradient(circle at 48% 85%, rgba(255, 255, 255, 0.5) 0 5px, transparent 6px),
    linear-gradient(180deg, var(--yellow-soft) 0%, var(--yellow) 40%, #ffb800 100%);
  transition: height 1.2s ease;
}

.vault-battery-fill::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  height: 12px;
  background: radial-gradient(circle at 50% 100%, var(--yellow-soft) 68%, transparent 70%) 0 0 / 36px 24px repeat-x;
  animation: wave 3s linear infinite;
}

.vault-battery > strong {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: 53%;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 6.4vw, 5.4rem);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-shadow: 0 4px 0 var(--navy-900), 0 0 24px rgba(3, 10, 44, 0.6);
}

.vault-battery > span {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(53% + clamp(3.9rem, 6.8vw, 5.7rem));
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgba(3, 10, 44, 0.78);
  width: max-content;
  max-width: calc(100% - 2.5rem);
  transform: translateX(-50%);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(3, 10, 44, 0.8);
}

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

.vault-readout div {
  padding: 0.8rem 1rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #081656;
}

.vault-readout dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vault-readout dd {
  margin: 0.2rem 0 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.vault-readout .vault-readout-wide { grid-column: 1 / -1; }
.vault-zaza-total { margin-left: 0.35rem; color: var(--yellow); font-family: var(--font-body); font-size: 0.95rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.vault-readout dd small {
  display: block;
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Where the card money is: one line per place, wrapping on narrow phones. */
.vault-readout .vault-where small { margin-top: 0.1rem; white-space: normal; }
.vault-readout .vault-where small:first-child { margin-top: 0.15rem; }
.vault-readout .vault-where b { color: var(--white); }

/* Who is charging: overlapping profile pictures, ⚡ for wallets without one (same as the rewards board). */
.vault-readout .vault-chargers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.3rem;
  margin: 0.6rem 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
}
.vault-charger {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: -0.4rem;
  overflow: hidden;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  background: #13288f;
  box-shadow: 0 0 0 2px #081656;
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.vault-charger img { width: 100%; height: 100%; object-fit: cover; }
a.vault-charger:hover, a.vault-charger:focus-visible { position: relative; z-index: 1; transform: translateY(-2px) scale(1.08); }
.vault-charger-more { border-color: var(--line); font-size: 0.7rem; }
/* What chargers and LPs fight with in ZAZA World (pool.js CHARGE_POWER, LP_TIERS power): a small pill, the vault's yellow
   for chargers, the aura's blue for LPs, linking to the docs. */
.vault-readout .vault-power { margin: 0.55rem 0 0; font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; line-height: 1.3; }
.vault-power a { display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid rgba(255, 214, 10, 0.5); border-radius: 0.9rem; background: rgba(255, 210, 63, 0.1); color: var(--yellow); text-decoration: none; text-wrap: balance; }
.vault-power a:hover, .vault-power a:focus-visible { background: rgba(255, 210, 63, 0.2); }
.vault-power b { color: var(--white); font-weight: 800; }
.vault-lp-power a { border-color: rgba(127, 212, 255, 0.5); background: rgba(63, 200, 255, 0.1); color: #bfe8ff; }
.vault-lp-power a:hover, .vault-lp-power a:focus-visible { background: rgba(63, 200, 255, 0.2); }

/* Extra liquidity providers (vault-lp.js), right under the chargers and smaller than them (owner, 2026-10-11: "make the
   liquidity providers section smaller"): what the community added to the pool, the faces of the wallets in it ringed in
   their aura's colour and everyone in the pool side by side on a stage in their auras beside two small buttons (as wide as who's
   on it, sized by vault-lp.js); under them, the Saiyan power LPs fight with, as wide as the box like the chargers'. */
.vault-readout .vault-lp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "dt stage" "added stage" "faces stage" "actions stage" "power power" "note note";
  grid-template-rows: auto auto auto 1fr auto auto;
  column-gap: 0.9rem;
  align-items: start;
  padding: 0.65rem 0.85rem;
}
/* More than three on the stage, two on a phone (vault-lp.js BESIDE): it takes its own row across the box, under the heading. */
.vault-readout .vault-lp.is-wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dt" "stage" "added" "faces" "actions" "power" "note"; grid-template-rows: none; }
.vault-readout .vault-lp.is-wide > .vault-lp-stage { margin-top: 0.5rem; }
.vault-readout .vault-lp.is-wide .vault-lp-cast { width: var(--cast-w); min-width: 0; }
.vault-readout .vault-lp > dt { grid-area: dt; }
.vault-readout .vault-lp > .vault-lp-added { grid-area: added; font-size: 1.1rem; }
.vault-readout .vault-lp > .vault-lp-added .vault-zaza-total { font-size: 0.8rem; }
.vault-readout .vault-lp > .vault-lp-added small { font-size: 0.72rem; }
.vault-readout .vault-lp > .vault-lp-faces { grid-area: faces; margin-top: 0.4rem; }
.vault-lp-faces .vault-charger { width: 1.6rem; height: 1.6rem; margin-left: -0.3rem; font-size: 0.75rem; }
.vault-readout .vault-lp > .vault-lp-power { grid-area: power; margin-top: 0.55rem; }
.vault-readout .vault-lp > .vault-lp-note { grid-area: note; margin-top: 0.5rem; color: var(--muted); font-family: var(--font-body); font-size: 0.74rem; font-weight: 600; line-height: 1.4; }
.vault-readout .vault-lp > .vault-lp-actions { display: flex; flex-wrap: wrap; grid-area: actions; align-self: end; gap: 0.4rem; margin-top: 0.55rem; font-family: var(--font-body); font-size: 0.8rem; }
.vault-readout .vault-lp small, .vault-readout .vault-lp .vault-zaza-total { white-space: normal; }
.vault-readout .vault-lp > .vault-lp-stage {
  display: grid;
  grid-area: stage;
  justify-items: center;
  gap: 0.3rem;
  min-width: 11rem; /* room for the names under the half-size characters, three of them */
  margin: 0;
  padding: 0.45rem 0.55rem 0.4rem;
  border: 2px solid rgba(127, 212, 255, 0.45);
  border-radius: var(--radius-sm);
  background: radial-gradient(ellipse at 50% 72%, rgba(63, 200, 255, 0.28), #050f3f 70%);
  color: #bfe8ff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vault-readout .vault-lp > .vault-lp-stage[hidden] { display: none; }
.vault-readout .vault-lp > .vault-lp-stage.is-gold { border-color: rgba(255, 214, 10, 0.6); background: radial-gradient(ellipse at 50% 72%, rgba(255, 210, 63, 0.26), #050f3f 70%); color: var(--yellow); }
.vault-lp-stage canvas { display: block; image-rendering: pixelated; }
/* Under each wallet on the stage: its name (as written, cut short if long) and its tier; never wider than the stage. */
.vault-lp-stage .vault-lp-cast { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0.2rem; width: 0; min-width: 100%; line-height: 1.35; text-align: center; }
.vault-lp-cast > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vault-lp-stage .vault-lp-cast b { display: block; overflow: hidden; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; }
.vault-lp-stage .vault-lp-cast em { display: block; color: var(--white); font-style: normal; font-weight: 700; }
.vault-lp-stage .vault-lp-cast .is-none em { color: inherit; font-weight: 600; opacity: 0.75; } /* in the pool, under the first aura */
.vault-lp-stage b { font-weight: 700; }
.vault-lp-stage i { font-style: normal; }
.vault-lp-actions .btn { flex: 0 1 auto; min-height: 2.1rem; padding: 0 0.75rem; font-size: 0.8rem; }
.vault-lp-actions .btn-yellow { box-shadow: 0 3px 0 var(--drop); }
.vault-lp-face { border-color: var(--ring, #7fd8ff); }
.vault-lp-face img.px { image-rendering: pixelated; }
@media (max-width: 520px) {
  .vault-readout .vault-lp { grid-template-areas: "dt stage" "added stage" "faces stage" "power power" "note note" "actions actions"; grid-template-rows: auto auto 1fr auto auto auto; }
  .vault-readout .vault-lp.is-wide { grid-template-areas: "dt" "stage" "added" "faces" "power" "note" "actions"; grid-template-rows: none; }
  .vault-readout .vault-power { font-size: 0.7rem; }
  .vault-lp-stage canvas { width: calc(var(--sw, 48) * 2px); height: 116px; }
  .vault-readout .vault-lp > .vault-lp-stage { text-align: center; }
  .vault-lp-stage b { display: block; }
  .vault-lp-stage i { display: none; }
  .vault-lp-stage .vault-lp-cast b { font-size: 0.68rem; }
}


.vault-pending {
  display: grid;
  gap: 0.5rem;
  padding: 0.9rem 1rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #081656;
}
.vault-pending-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; color: var(--yellow); font-weight: 800; }
.vault-pending-row strong { color: var(--white); font-family: var(--font-display); font-weight: 400; white-space: nowrap; }
/* Small battery: fills toward Stonk.fun's $50 payout, empties when it pays out. */
.vault-cell {
  position: relative;
  height: 38px;
  margin-right: 10px;
  padding: 4px;
  border: 4px solid #26327a;
  border-radius: 12px;
  background: linear-gradient(180deg, #07124d, #040a35);
  box-shadow: inset 0 0 0 2px #0a1450;
}
.vault-cell::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 8px;
  height: 14px;
  border-radius: 0 4px 4px 0;
  background: #26327a;
  transform: translateY(-50%);
}
.vault-cell i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(3, 10, 44, 0.35) 22px 25px),
    linear-gradient(180deg, #ffe45c, var(--yellow) 55%, #ffb800);
  box-shadow: 0 0 16px rgba(255, 214, 10, 0.45);
  transition: width 0.8s ease;
}
.vault-cell b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  text-shadow: 0 2px 0 var(--navy-900), 0 0 10px rgba(3, 10, 44, 0.8);
}
.vault-pending small { color: var(--muted); font-size: 0.8rem; font-weight: 600; }

.vault-top {
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(3, 10, 44, 0.45);
}

.vault-top ol {
  display: grid;
  gap: 0.3rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: top;
}

.vault-top li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--white);
  font-weight: 700;
}

.vault-top li::before {
  content: counter(top) ".";
  counter-increment: top;
  margin-right: 0.5rem;
  color: var(--yellow);
}

.vault-top li span { flex: 1; }
.vault-top li b { color: var(--yellow); }

.vault-footnote {
  margin: -0.35rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

/* Under "Your charge" (owner, 2026-10-11: less empty space under Connect wallet); under the power cell on a phone. */
.vault-meter-note {
  grid-column: 1;
  grid-row: 3;
  margin-top: calc(1rem - var(--vault-gap)); /* 1rem under "Your charge", not the full grid gap */
  color: var(--muted);
  font-size: 0.88rem;
}

.vault-history { grid-column: 1; margin-top: calc(1rem - var(--vault-gap)); padding: 0; }

.vault-history summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15rem 1rem;
  padding: 1rem 1.3rem;
  cursor: pointer;
  list-style: none;
}
.vault-history summary::-webkit-details-marker { display: none; }
.vault-history summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: var(--radius); }
.vault-history-heading { color: var(--yellow); font-family: var(--font-display); font-size: 1.25rem; }
.vault-history-summary { grid-column: 1; color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.vault-history-chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 0.35rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.vault-history-chevron::after { content: "Show ▾"; }
.vault-history[open] .vault-history-chevron::after { content: "Hide ▴"; }
.vault-history[open] { padding-bottom: 1rem; }
.vault-history-sub { display: block; margin: 0 1.3rem 0.8rem; }
.vault-history .vault-top { margin: 0 1.3rem 1rem; }
.vault-history .vault-history-list { margin: 0 1.3rem; }

.vault-history-list {
  max-height: 360px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.vault-history-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.2rem;
  border-top: 1px solid rgba(58, 102, 255, 0.22);
}

.vault-history-list li:first-child { border-top: 0; }
.vault-history-list li.is-empty { display: block; color: var(--muted); }

.vault-history-list .icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 214, 10, 0.15);
  font-size: 1rem;
}

.vault-history-list .is-marketingSpend .icon { background: rgba(255, 46, 77, 0.18); }
.vault-history-list .is-contribution .icon { background: rgba(61, 220, 132, 0.18); }

.vault-history-list .what { color: var(--white); font-weight: 700; }
.vault-history-list .what small { display: block; color: var(--muted); font-weight: 600; }

.vault-history-list .when {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-align: right;
}

.vault-history-list .when a { color: var(--yellow); }


.vault-safety {
  grid-column: 2;
  grid-row: 4;
  align-self: stretch;
  margin-top: calc(1rem - var(--vault-gap)); /* level with the Donate card */
  padding: 1.2rem 1.5rem;
  border: 2px dashed rgba(61, 220, 132, 0.55);
  border-radius: var(--radius);
  background: rgba(61, 220, 132, 0.06);
}

.vault-safety .label { color: var(--green); }

.vault-safety ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem 2rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.vault-safety li { color: var(--white); }
.vault-safety li strong { color: var(--green); }
.vault-safety a { color: var(--yellow); text-decoration: underline; }

.vault-verify {
  margin-top: 0.9rem;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
}

.vault-verify a { color: var(--yellow); font-family: var(--font-mono); text-decoration: underline; }

.vault-note {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- ZAZA World sneak peek + card hunt ---------- */

.world-peek-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.world-peek-head .section-head { flex: 1 1 100%; max-width: 900px; margin-bottom: 0; }
.world-peek-head .section-head > p:not(.kicker) { max-width: 720px; }
.world-peek-head h2 span { display: block; }
/* "Explore the ZAZA World." always on one line: the heading shrinks to fit narrow screens (the line is ~13.2em wide). */
.world-peek-head h2 { font-size: min(clamp(2.3rem, 4.4vw, 4rem), calc((100vw - 2 * var(--gutter)) / 14.2)); }
.world-peek-head h2 .peek-l1 { white-space: nowrap; color: inherit; }
.world-peek-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }

@keyframes peekBlink { 50% { opacity: 0.35; } }

/* Real gameplay wide (a silent loop, world-peek.js), three real battle frames under it. Nothing sits on a picture. */
.world-peek-shots {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}

.world-peek-shots::before {
  content: "";
  position: absolute;
  inset: -6% -4% -4%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 40% 35%, rgba(29, 75, 255, 0.45) 0%, rgba(29, 75, 255, 0) 100%),
    radial-gradient(closest-side at 70% 85%, rgba(255, 214, 10, 0.14) 0%, rgba(255, 214, 10, 0) 100%);
  pointer-events: none;
}

.peek-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 4px solid var(--blue);
  border-radius: var(--radius);
  background: var(--navy-800);
  box-shadow: 0 10px 0 var(--drop), 0 30px 60px rgba(0, 0, 0, 0.45);
}

.peek-shot img { display: block; width: 100%; height: auto; image-rendering: auto; }
.peek-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--navy-900); }
.peek-play figcaption { grid-template-columns: auto minmax(0, 1fr) auto; }
.peek-pause {
  grid-row: 1 / span 2;
  grid-column: 3;
  min-height: 2.3rem;
  padding: 0 1rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: rgba(3, 10, 44, 0.6);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.peek-pause:hover { border-color: var(--yellow); }

/* The caption sits under the picture: a sticker icon, the title and one line of what it is. */
.peek-shot figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.8rem;
  padding: 0.75rem 1rem 0.85rem;
  border-top: 3px solid var(--drop);
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  line-height: 1.25;
}
.peek-shot figcaption b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--drop);
  border-radius: 0.75rem;
  background: var(--yellow);
  box-shadow: 0 3px 0 var(--drop);
  font-size: 1.25rem;
  font-weight: 400;
  transform: rotate(-5deg);
}
.peek-shot figcaption strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--yellow); }
.peek-shot figcaption span { font-size: 0.88rem; color: var(--muted); }

.peek-battles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.peek-battles .peek-shot { border-color: var(--yellow); transition: transform 0.2s ease; }
.peek-battles .peek-shot:hover { transform: translateY(-4px) rotate(-0.6deg); }

.world-peek-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.world-peek-features li {
  display: grid;
  gap: 0.2rem;
  padding: 1.05rem 1.1rem;
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(10, 26, 107, 0.6);
}

.world-peek-features b { font-size: 1.5rem; line-height: 1.2; font-weight: 400; }
.world-peek-features strong { color: var(--white); font-family: var(--font-display); font-size: 1.12rem; font-weight: 400; }
.world-peek-features span { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }

.p2e-band {
  display: flex;
  align-items: center;
  gap: 0.9rem 1.1rem;
  margin: 0.9rem 0 0;
  padding: 0.85rem 1.1rem;
  border: 3px solid var(--yellow);
  border-radius: var(--radius-sm);
  background: rgba(10, 26, 107, 0.6);
}
.p2e-badge { flex: none; display: block; border-radius: 50%; }
.p2e-badge img { display: block; width: 84px; height: auto; transition: transform 0.15s ease; }
.p2e-badge:hover img, .p2e-badge:focus-visible img { transform: translateY(-2px) scale(1.04); }
.p2e-band p { display: grid; justify-items: start; gap: 0.15rem; flex: 1; margin: 0; }
.p2e-band strong { display: flex; align-items: center; gap: 0.45em; color: var(--white); font-family: var(--font-display); font-size: 1.12rem; font-weight: 400; }
.p2e-band span { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.p2e-band strong span { color: inherit; font-size: inherit; line-height: 1.1; }
.p2e-band .btn span { color: inherit; font-size: inherit; line-height: inherit; }
/* While it's ranked: a 🏆 before "#3 on PlayToEarn", and its place on each Solana/genre list where it's in the top 10,
   best first, a #1 in gold (main.js loadP2eRank). The emoji sits in a box of its own, so its font can't push the words. */
.p2e-band .p2e-cup { flex: none; display: grid; place-items: center; width: 1.75em; height: 1.75em; border: 2px solid var(--yellow); border-radius: 50%; background: radial-gradient(circle at 50% 35%, #23389e 0%, var(--navy-900) 100%); font-family: system-ui, sans-serif; font-size: 0.9em; line-height: 1; }
.p2e-band .p2e-ranks { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.25rem 0 0.2rem; }
.p2e-band .p2e-ranks span { display: inline-flex; align-items: baseline; gap: 0.3em; padding: 0.32em 0.7em 0.36em; border: 2px solid rgba(255, 214, 10, 0.45); border-radius: 999px; background: rgba(255, 214, 10, 0.08); color: var(--white); font-size: 0.84rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.p2e-band .p2e-ranks b { color: var(--yellow); font-family: var(--font-display); font-size: 1.08em; font-weight: 400; }
.p2e-band .p2e-ranks .is-first { border-color: var(--yellow); background: var(--yellow); color: var(--navy-900); }
.p2e-band .p2e-ranks .is-first b { color: var(--navy-900); }
@media (max-width: 720px) {
  .p2e-band { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .p2e-band .btn { grid-column: 1 / -1; }
  .p2e-badge img { width: 64px; }
}

/* The card hunt: the copy and the hunt's numbers beside the next drop (the sealed pack + countdown), then the real
   cards players pulled (newest first, world-peek.js keeps them live), the four steps and who can hunt. Every label
   sits under its card, never on it. */
.hunt-show {
  --hunt-pad: clamp(1.4rem, 3.5vw, 2.8rem);
  margin-top: clamp(40px, 6vw, 72px);
  padding: var(--hunt-pad);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(255, 214, 10, 0.18) 0%, rgba(255, 214, 10, 0) 50%),
    radial-gradient(ellipse at 15% 70%, rgba(58, 102, 255, 0.3) 0%, rgba(58, 102, 255, 0) 60%),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 100%);
  box-shadow: 0 10px 0 var(--drop);
}

.hunt-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* "Real Pokémon cards," always on one line (it is ~11.3em wide): the heading follows the column's width. */
.hunt-copy { container-type: inline-size; }
.hunt-copy h3 { color: var(--white); font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-size: min(2.9rem, 100cqi / 11.6); text-shadow: 0 0.07em 0 var(--blue-deep); }
.hunt-copy h3 span { display: block; white-space: nowrap; }
.hunt-copy h3 span + span { color: var(--yellow); }
.hunt-copy > p:not(.kicker) { margin-top: 0.9rem; color: var(--muted); max-width: 36rem; }
.hunt-copy a:not(.btn) { color: var(--yellow-soft); text-decoration: underline; text-underline-offset: 3px; }

.hunt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.4rem 0 0;
}

/* The number on top, its label under it (the label comes first for screen readers). */
.hunt-stats div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem 0.8rem;
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(3, 10, 44, 0.5);
}
.hunt-stats dd {
  margin: 0;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1;
  text-shadow: 0 3px 0 var(--drop);
}
.hunt-stats dt { color: var(--muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; }

.hunt-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
}
.hunt-next-pack {
  width: clamp(84px, 9vw, 116px);
  height: auto;
  rotate: -7deg;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 18px rgba(255, 214, 10, 0.25));
  animation: huntFloat 4.5s ease-in-out infinite;
}
.hunt-next .hunt-cd { margin-top: 0; }

@keyframes huntFloat { 50% { translate: 0 -8px; } }

.hunt-pulls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.1rem, 1.8vw, 1.4rem) clamp(0.7rem, 1.4vw, 1.1rem);
  margin: clamp(1.8rem, 3.4vw, 2.6rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Ring colours by rarity, as /hunt/ and the World's card hunt window; the top pull is gold. */
.pull { --ring: rgba(61, 220, 132, 0.6); position: relative; }
.pull.r-uncommon { --ring: #5fd0ff; }
.pull.r-rare { --ring: var(--yellow); }
.pull.r-epic { --ring: #b77bff; }
.pull.is-top { --ring: var(--yellow); }

.pull a {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  height: 100%;
  padding: 0.5rem 0.5rem 0.7rem;
  border: 3px solid var(--ring);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #0b1650 0%, #050c33 100%);
  box-shadow: 0 6px 0 var(--drop), 0 0 22px color-mix(in srgb, var(--ring) 28%, transparent);
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pull a:hover, .pull a:focus-visible { transform: translateY(-4px) rotate(-0.8deg); box-shadow: 0 9px 0 var(--drop), 0 0 30px color-mix(in srgb, var(--ring) 45%, transparent); }
.pull.is-top a { box-shadow: 0 6px 0 var(--drop), 0 0 34px rgba(255, 214, 10, 0.5); }

/* "Top pull" rides the tile's top edge, above the photo (it never covers it). */
.pull.is-top a::before {
  content: "Top pull";
  position: absolute;
  top: -0.72rem;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  height: 1.35rem;
  padding: 0 0.6rem;
  border: 2px solid var(--drop);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy-900);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--drop);
}

.pull-slab { display: block; aspect-ratio: 400 / 676; overflow: hidden; border-radius: 9px; background: #05070f; }
.pull-slab img { width: 100%; height: 100%; object-fit: contain; }

.pull strong {
  display: -webkit-box;
  min-height: 2.4em;
  overflow: hidden;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(0.86rem, 1.1vw, 0.98rem);
  font-weight: 400;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pull-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.pull-meta b {
  display: inline-flex;
  align-items: center;
  height: 1.4rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.pull-meta em { color: var(--green); font-family: var(--font-display); font-size: 1.2rem; font-style: normal; line-height: 1; text-shadow: 0 2px 0 #0d4a24; }
.pull small { color: var(--muted); font-size: 0.76rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
/* the finder's hero beside their name (world-peek.js puts the look, home-hero.js draws it), in the World's pixels */
.pull-by { display: flex; align-items: center; gap: 6px; }
.pull-by canvas { flex: none; width: auto; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.pull-by canvas[hidden] { display: none; }

.hunt-pulls-note { margin-top: 1.2rem; color: var(--muted); font-size: 0.92rem; text-align: center; }

.hunt-show .hunt-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.2rem;
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  padding-top: clamp(1.4rem, 2.6vw, 2rem);
  border-top: 2px dashed rgba(255, 214, 10, 0.3);
}
.hunt-show .hunt-steps strong { font-size: 1.05rem; line-height: 1.2; }
.hunt-show .hunt-steps span { display: block; margin-top: 0.3rem; font-size: 0.92rem; line-height: 1.45; }

.hunt-who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  padding: 0.8rem 1rem;
  border: 2px solid rgba(255, 214, 10, 0.34);
  border-radius: var(--radius-sm);
  background: rgba(255, 214, 10, 0.08);
  color: var(--yellow-soft);
  font-weight: 700;
  line-height: 1.45;
}
.hunt-who b { flex: none; font-size: 1.3rem; font-weight: 400; line-height: 1; }

.hunt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.hunt-show .hunt-actions { align-items: center; column-gap: 1rem; }
.hunt-show .hunt-docs { margin-left: 0.4rem; color: var(--yellow-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* What happens at the next levels: three frames of the map as everyone sees it today (the game's own smoke and level
   plates), each caption under its frame with the level on the sticker. Level 11 is framed in gold. world-peek.js fills
   the "ZAZA is Level N today" pill and marks reached stops Open. */
.world-levels { margin-top: clamp(40px, 6vw, 72px); }
/* Under the ZAZA Map (#vision) it opens its own section, whose padding already spaces it. */
.world-grows .world-levels { margin-top: 0; }
.world-levels-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(18px, 2.6vw, 28px);
}
.world-levels-head > div { max-width: 44rem; }
.world-levels-head h3 { color: var(--white); font-size: clamp(1.9rem, 3.4vw, 3rem); text-shadow: 0 0.07em 0 var(--blue-deep); text-wrap: balance; }
.world-levels-head > div > p:not(.kicker) { margin-top: 0.8rem; color: var(--muted); }
.levels-now {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--yellow);
  border-radius: 999px;
  background: rgba(6, 18, 79, 0.85);
  color: var(--white);
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 5px 0 var(--drop);
}
.levels-now::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); vertical-align: 0.05em; }
.levels-now b { color: var(--yellow); font-family: var(--font-display); font-weight: 400; }

.level-road {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.level-road li { display: flex; }
.level-road .peek-shot { flex: 1; display: flex; flex-direction: column; transition: transform 0.2s ease; }
.level-road .peek-shot:hover { transform: translateY(-4px) rotate(-0.6deg); }
.level-road .peek-shot figcaption { flex: 1; grid-template-columns: auto minmax(0, 1fr) auto; align-content: center; }
.level-road figcaption strong, .level-road figcaption span { grid-column: 2; }
.level-road figcaption b { color: var(--navy-900); font-family: var(--font-display); font-size: 1.15rem; }
.level-road .lv-11 .peek-shot { border-color: var(--yellow); box-shadow: 0 10px 0 var(--drop), 0 0 36px rgba(255, 214, 10, 0.35), 0 30px 60px rgba(0, 0, 0, 0.45); }
.level-road .is-open .peek-shot { border-color: var(--green); }
.lv-open {
  grid-row: 1 / span 2;
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: var(--green);
  color: #06331a;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

@media (min-width: 561px) {
  .hunt-next .hunt-cd-tiles { grid-template-columns: repeat(4, minmax(0, 6.6rem)); gap: 0.6rem; }
  .hunt-next .hunt-cd-tiles b { font-size: clamp(2.1rem, 3.1vw, 2.7rem); }
}

@media (max-width: 980px) {
  .hunt-top { grid-template-columns: minmax(0, 1fr); }
  .hunt-show .hunt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world-peek-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .peek-battles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 16px; scrollbar-width: none; }
  .peek-battles::-webkit-scrollbar { display: none; }
  .peek-battles .peek-shot { scroll-snap-align: center; }
  .peek-battles .peek-shot:hover { transform: none; }
  /* The cards swipe sideways on phones, edge to edge of the hunt card, a bit of the next one showing. */
  .hunt-pulls {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--hunt-pad);
    margin-inline: calc(-1 * var(--hunt-pad));
    padding: 0.9rem var(--hunt-pad) 1rem;
    scrollbar-width: none;
  }
  .hunt-pulls::-webkit-scrollbar { display: none; }
  .level-road { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 16px; scrollbar-width: none; }
  .level-road::-webkit-scrollbar { display: none; }
  .level-road li { scroll-snap-align: center; }
  .level-road .peek-shot:hover { transform: none; }
  .pull { scroll-snap-align: start; }
  .pull a:hover { transform: none; }
  .hunt-pulls-note { margin-top: 0.4rem; font-size: 0.86rem; }
}

@media (max-width: 560px) {
  .hunt-next { grid-template-columns: minmax(0, 1fr); }
  .hunt-next-pack { display: none; }
  .hunt-show .hunt-steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .world-peek-features { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .world-peek-features li { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.8rem; padding: 0.8rem 0.95rem; }
  .world-peek-features b { grid-row: span 2; align-self: center; }
  .hunt-actions .btn, .world-peek-ctas .btn { width: 100%; justify-content: center; }
  .hunt-show .hunt-docs { margin-left: 0; }
  .hunt-stats { gap: 0.45rem; }
  .hunt-stats div { padding: 0.7rem 0.6rem 0.65rem; }
  .hunt-stats dt { font-size: 0.66rem; letter-spacing: 0.02em; }
  .hunt-pulls { grid-auto-columns: 58%; }
}

/* ZAZA World app: the home-screen web app (/world/app/), copy on the left and two phones on the right. */
.world-app {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(1.4rem, 3.5vw, 2.8rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 55%, rgba(58, 102, 255, 0.35) 0%, rgba(58, 102, 255, 0) 60%),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 100%);
  box-shadow: 0 10px 0 var(--drop);
}

/* The app card opens the section after the rewards board (.join-section): the section's padding is its gap. */
.join-section > .world-app { margin-top: 0; }
.world-app-copy h3 { color: var(--white); font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.world-app-copy > p:not(.kicker) { margin-top: 0.8rem; color: var(--muted); }
.world-app-copy > p strong { color: var(--white); }

.world-app-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}

.world-app-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(6, 18, 79, 0.55);
}

.world-app-list b { font-size: 1.35rem; line-height: 1.2; font-weight: 400; }
.world-app-list div { display: grid; gap: 0.15rem; min-width: 0; }
.world-app-list strong { color: var(--white); font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; }
.world-app-list span { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }

.world-app-copy .world-app-how { margin-top: 1rem; font-size: 0.9rem; }

.world-app-phones { width: 100%; max-width: 480px; margin-inline: auto; }

/* One picture of both phones, drawn offline with the tilt, bezels and shadows (so it stays sharp at 1:1 pixels).
   It spreads 10% past the box on every side, where the tilted corners and shadows reach. */
.world-app-phones img { display: block; width: 120%; max-width: none; height: auto; margin: -10%; }

@media (max-width: 980px) {
  .world-app { grid-template-columns: minmax(0, 1fr); }
  .world-app-phones { max-width: 420px; }
}

@media (max-width: 480px) {
  .world-app-list { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

/* Ambassadors, then Creators, each a full-width band under the app (owner 2026-10-06: "horizontal and not vertical side by
   side"): the words beside the picture (Creators mirrored), what it pays across the whole width, then the note and the
   buttons. Then the Dev log across the whole width with a picture for each update. */
.world-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(28px, 4vw, 44px);
}

.more-head { grid-column: 1 / -1; display: grid; gap: 0.4rem; justify-items: center; text-align: center; }
.more-head h3 { color: var(--white); font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 400; line-height: 1.15; }
.more-head h3 span { color: var(--yellow); }
.more-head p { max-width: 46rem; color: var(--muted); }
.more-head p b { color: var(--white); }

.world-more > .card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 100%);
  box-shadow: 0 10px 0 var(--drop);
}

.world-more .world-amb {
  background:
    radial-gradient(ellipse at 88% 12%, rgba(255, 214, 10, 0.16) 0%, rgba(255, 214, 10, 0) 55%),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 100%);
}

.world-more .world-creators {
  background:
    radial-gradient(ellipse at 12% 12%, rgba(95, 208, 255, 0.18) 0%, rgba(95, 208, 255, 0) 58%),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 100%);
}

.world-more > .world-amb,
.world-more > .world-creators {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  grid-template-areas: "copy shot" "money money" "foot foot";
  align-items: center;
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(1.1rem, 2.2vw, 1.7rem);
}
.world-more > .world-creators { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
/* Compact (owner 2026-10-06: "the ambassador and creator windows feel a bit too big"). */
.world-amb h3, .world-creators h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
.world-more .world-amb .kicker, .world-more .world-creators .kicker { margin-bottom: 0.6rem; font-size: 0.72rem; }
.world-more .more-copy > p:not(.kicker) { margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.5; }
.world-more > .world-creators { grid-template-areas: "shot copy" "money money" "foot foot"; }
.more-copy { grid-area: copy; }
.world-more .more-shot { grid-area: shot; margin: 0; }
.more-money {
  grid-area: money;
  margin-top: clamp(1rem, 2vw, 1.4rem);
  padding-top: clamp(0.9rem, 1.8vw, 1.2rem);
  border-top: 2px dashed rgba(255, 214, 10, 0.3);
}
.world-more .more-money-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  margin: 0 0 0.7rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.15;
}
.world-more .more-money-head em { color: var(--muted); font-family: var(--font-body); font-size: 0.88rem; font-style: normal; font-weight: 700; }
.more-foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  margin-top: 0.9rem;
}
.more-foot .amb-note { flex: 1 1 24rem; margin: 0; font-size: 0.84rem; }

.world-more h3 { color: var(--white); font-size: clamp(1.6rem, 2.4vw, 2.1rem); text-wrap: balance; }
.world-more .more-copy > p:not(.kicker) { margin-top: 0.8rem; color: var(--muted); }
.world-more .more-copy > p strong { color: var(--white); }
.world-more .hunt-actions { margin-top: auto; padding-top: 1.4rem; }
.world-more .more-foot .hunt-actions { margin: 0; padding: 0; }
.world-more .hunt-actions { align-items: center; column-gap: 1.2rem; }
.world-amb .hunt-docs, .world-creators .hunt-docs { color: var(--yellow-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* A picture from the game, whole, with its caption under it (never over it). */
.more-shot { margin: 1.2rem 0 0; }
.more-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--navy-950);
  image-rendering: auto;
}
.world-amb .more-shot img { image-rendering: pixelated; }
.more-shot figcaption { margin-top: 0.55rem; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.more-shot figcaption b { color: var(--white); }

/* Three steps, the same shape in both cards. */
.more-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.more-steps li { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border: 3px solid var(--line); border-radius: var(--radius-sm); background: rgba(6, 18, 79, 0.55); color: var(--white); font-size: 0.88rem; font-weight: 800; line-height: 1.25; }
.more-steps b { flex: none; display: grid; place-items: center; width: 1.7rem; aspect-ratio: 1; border: 2px solid var(--drop); border-radius: 50%; background: var(--yellow); color: var(--drop); font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; line-height: 1; }

/* Tier medals: the ZAZA coin in each metal (the same filters as /ambassadors/), the multiple of Bronze under it. */
.amb-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each tier a step up: a bigger medal, a stronger tint and glow in its own metal. */
.amb-tiers li {
  --s: 0;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.65rem 0.3rem 0.55rem;
  border: 3px solid color-mix(in srgb, var(--t) 55%, var(--line));
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--t) calc(10% + var(--s) * 4%), rgba(6, 18, 79, 0.55)), rgba(6, 18, 79, 0.55));
  box-shadow: 0 0 calc(12px + var(--s) * 6px) color-mix(in srgb, var(--t) calc(14% + var(--s) * 6%), transparent);
  text-align: center;
}
.amb-tiers .t-silver { --s: 1; }
.amb-tiers .t-gold { --s: 2; }
.amb-tiers .t-diamond { --s: 3; }

.amb-tiers img {
  width: min(calc(42px + var(--s) * 9px), 100%);
  height: auto;
  border-radius: 50%;
  filter: var(--coin) drop-shadow(0 4px 4px rgba(0, 4, 24, 0.55)) drop-shadow(0 0 12px color-mix(in srgb, var(--t) 50%, transparent));
}

.amb-tiers b { margin-top: 0.25rem; color: var(--t); font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 400; line-height: 1.05; text-shadow: 0 3px 0 var(--drop); }
.amb-tiers span { color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.amb-tiers .t-bronze { --t: #e39a5c; --coin: grayscale(1) sepia(1) saturate(2.6) hue-rotate(-24deg) brightness(0.78) contrast(1.2); }
.amb-tiers .t-silver { --t: #d6dceb; --coin: grayscale(1) brightness(1.2) contrast(1.18); }
.amb-tiers .t-gold { --t: var(--yellow); --coin: saturate(1.08) brightness(1.04); }
.amb-tiers .t-diamond { --t: #8fe4ff; --coin: grayscale(1) sepia(1) hue-rotate(158deg) saturate(2.4) brightness(1.18) contrast(1.05); }
.world-more .amb-note { font-size: 0.88rem; }

/* An ambassador's tier moves with the players they bring: up (green) or down (orange). */
.amb-move { display: grid; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.amb-move li { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.7rem; border: 3px solid var(--line); border-radius: var(--radius-sm); background: rgba(6, 18, 79, 0.55); color: var(--muted); font-size: 0.85rem; font-weight: 700; line-height: 1.25; }
.amb-move strong { color: var(--white); }
.amb-move b { flex: none; display: grid; place-items: center; width: 1.7rem; aspect-ratio: 1; border-radius: 50%; color: var(--drop); font-size: 0.8rem; line-height: 1; }
.amb-move .up { border-color: rgba(61, 220, 132, 0.45); }
.amb-move .up b { background: var(--green); }

/* What a creator's own page tracks, then their targets as what they earn in all by each step (main.js loads the team's
   ladder): a staircase, each step a little taller and brighter, the last one glowing. */
.cr-tracks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.cr-tracks li { display: grid; justify-items: center; gap: 0.2rem; padding: 0.45rem 0.3rem 0.4rem; border: 3px solid var(--line); border-radius: var(--radius-sm); background: rgba(6, 18, 79, 0.55); text-align: center; }
.cr-tracks b { font-size: 1.2rem; font-weight: 400; line-height: 1; }
.cr-tracks span { color: var(--muted); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
/* What you earn in all: a bar chart rising left to right, the total big on top of each bar, the players at its foot; each
   bar taller, its gold stronger (--k 0-5), the top one solid gold and glowing. Phones: the bars lie down and grow to
   the right. */
.cr-ladder {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: clamp(0.4rem, 1.2vw, 0.9rem);
  margin: 0;
  padding: 0;
  border-bottom: 3px solid rgba(255, 214, 10, 0.4);
  list-style: none;
}
.cr-ladder li {
  --k: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  min-height: calc(4.2rem + var(--k) * 1.15rem);
  padding: 0.55rem 0.2rem 0.5rem;
  border: 3px solid color-mix(in srgb, var(--yellow) calc(30% + var(--k) * 12%), var(--line));
  border-bottom: 0;
  border-radius: 16px 16px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--yellow) calc(10% + var(--k) * 7%), var(--navy-800)) 0%, rgba(6, 18, 79, 0.6) 100%);
  box-shadow: 0 0 calc(var(--k) * 7px) rgba(255, 214, 10, calc(0.05 + var(--k) * 0.06));
  text-align: center;
}
.cr-ladder li:nth-child(2) { --k: 1; }
.cr-ladder li:nth-child(3) { --k: 2; }
.cr-ladder li:nth-child(4) { --k: 3; }
.cr-ladder li:nth-child(5) { --k: 4; }
.cr-ladder li:nth-child(n + 6) { --k: 5; }
.cr-ladder li:last-child {
  border-color: #fff1a6;
  background: linear-gradient(180deg, #fff1a6 0%, var(--yellow) 38%, #f0a800 100%);
  box-shadow: 0 0 44px rgba(255, 214, 10, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
/* The amount sized to its own bar ("$2,000" fits six a row): container units, a plain size where they're missing. */
.cr-ladder li { container-type: inline-size; }
.cr-ladder b { color: var(--yellow); font-family: var(--font-display); font-size: clamp(0.95rem, 1.4vw, 1.6rem); font-size: clamp(0.95rem, 22cqi, 1.9rem); font-weight: 400; line-height: 1; white-space: nowrap; text-shadow: 0 3px 0 var(--drop); }
.cr-ladder span { display: block; color: var(--muted); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; word-spacing: 100vw; } /* "1,000" over "players" in every bar */
.cr-ladder span::first-line { color: var(--white); font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0; }
.cr-ladder li:last-child b { color: var(--navy-900); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55); }
.cr-ladder li:last-child span, .cr-ladder li:last-child span::first-line { color: var(--navy-900); }

/* Dev log: the whole width, the newest updates as picture tiles (each picture whole, on a blurred copy of itself), then
   the newer ones without a picture in one line. */
.world-more .world-log { grid-column: 1 / -1; }
/* The head: the copy, the pace right under it and the button at the bottom down the left, the calendar beside all three,
   as tall as they are (on a tablet the copy runs across the top and the pace stacks beside the calendar; on a phone it
   all stacks). */
.log-head { display: grid; grid-template-columns: minmax(30rem, 1fr) auto; grid-template-rows: auto auto 1fr; grid-template-areas: "copy cal" "pace cal" "btn cal"; align-items: end; gap: 1rem 2rem; }
.log-head > div { grid-area: copy; align-self: start; }
.log-head > .btn { grid-area: btn; justify-self: start; }
.log-head p:not(.kicker) { margin-top: 0.6rem; color: var(--muted); text-wrap: balance; }
/* The pace under the copy, across its whole width: builds so far, a day on average, in the last 7 days and the days in a
   row with a build (edged in the calendar's gold), as the card hunt's figures. */
.log-pace { display: grid; grid-area: pace; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 0; }
.log-pace div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.3rem;
  padding: 0.7rem 0.9rem 0.65rem;
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(3, 10, 44, 0.5);
}
.log-pace dd { margin: 0; color: var(--yellow); font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; text-shadow: 0 3px 0 var(--drop); }
.log-pace dt { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; text-wrap: balance; }
.log-pace .log-pace-run { border-color: rgba(255, 214, 10, 0.4); }
/* The calendar (main.js drawCal), as the pace's tiles: "Day by day" over a column a week, a square a day, one yellow ramp
   from quiet to busy, today outlined (not over yet), the days before the first build and those still to come left out
   (as GitHub's). Pointing at a day reads it out in the caption. */
.log-cal {
  grid-area: cal;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  min-width: 19rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(3, 10, 44, 0.5);
}
.log-cal figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; min-height: 2.8em; font-size: 0.86rem; line-height: 1.4; }
.log-cal figcaption b { color: var(--white); font-weight: 800; }
.log-cal-note { color: var(--muted); }
.log-cal-days { min-width: 0; }
.log-cal-grid { display: grid; grid-auto-flow: column; grid-template-rows: auto repeat(7, auto); grid-template-columns: 1.9rem repeat(var(--weeks, 6), minmax(0, 26px)); justify-content: center; gap: 4px; }
.log-cal-grid > span { aspect-ratio: 1; border-radius: 5px; background: rgba(58, 102, 255, 0.16); }
.log-cal-grid > :is(.mo, .wd) { aspect-ratio: auto; background: none; color: var(--muted); font-size: 0.66rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.log-cal-grid > .wd { display: flex; align-items: center; }
.log-cal-grid > .off { background: none; }
.log-cal .l1 { background: #7a5c00; }
.log-cal .l2 { background: #b38700; }
.log-cal .l3 { background: #e6b400; }
.log-cal .l4 { background: linear-gradient(180deg, #fff1a6, var(--yellow)); box-shadow: 0 0 8px rgba(255, 214, 10, 0.35); }
.log-cal-grid > .today { outline: 2px solid var(--white); outline-offset: 1px; }
.log-cal-grid > [data-n]:hover { outline: 2px solid var(--yellow); outline-offset: 1px; }
.log-cal-key { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 0.55rem; color: var(--muted); font-size: 0.66rem; font-weight: 700; }
.log-cal-key i { width: 11px; height: 11px; border-radius: 3px; background: rgba(58, 102, 255, 0.16); }

.log-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}

.log-list a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(6, 18, 79, 0.55);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.log-list a:hover { border-color: var(--yellow); transform: translateY(-2px); }

.log-pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-950); }
.log-pic img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.log-pic .log-fill { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(14px) brightness(0.5) saturate(1.2); }
.log-pic.phone img:not(.log-fill) { padding: 0.5rem 0; filter: drop-shadow(0 6px 10px rgba(0, 4, 24, 0.6)); }

.log-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.2rem;
  padding: 0.8rem 0.9rem 0.95rem;
}

/* The day over a short month, so Titan One's narrow space never runs "1 Oct" together. */
.log-list time {
  grid-row: span 2;
  align-self: start;
  display: grid;
  place-items: center;
  min-width: 2.9rem;
  padding: 0.3rem 0.4rem 0.35rem;
  border: 2px solid var(--drop);
  border-radius: 0.6rem;
  background: var(--yellow);
  box-shadow: 0 3px 0 var(--drop);
  color: var(--drop);
  font-family: var(--font-display);
  font-size: 0.7rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.log-list time b { font-size: 1.3rem; font-weight: 400; line-height: 1.05; }

.log-list strong { color: var(--white); font-family: var(--font-display); font-size: 1.02rem; font-weight: 400; line-height: 1.25; }
.log-list .log-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.log-also { margin-top: 1rem; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.log-also a { color: var(--yellow-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .more-steps { grid-template-columns: minmax(0, 1fr); }
  .log-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; grid-template-areas: "copy copy" "pace cal" "btn cal"; gap: 1rem 1.5rem; }
  .log-pace { grid-template-columns: minmax(0, 1fr); align-self: stretch; }
  .log-pace div { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.9rem; }
}

/* Too narrow for the pace beside the calendar: all stacked, the pace four across again (two by two on a phone). */
@media (max-width: 800px) {
  .log-head { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "copy" "pace" "cal" "btn"; }
  .log-pace { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .log-pace div { flex-direction: column-reverse; justify-content: flex-end; align-items: stretch; gap: 0.3rem; }
  .log-cal { min-width: 0; }
}

@media (max-width: 980px) {
  .world-more > .world-amb,
  .world-more > .world-creators { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "shot" "money" "foot"; }
  .world-more .more-shot { margin-top: 1.2rem; }
  .more-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .log-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: the dev log tiles slide sideways (each most of the screen wide), so the page stays short. */
@media (max-width: 640px) {
  .more-steps { grid-template-columns: minmax(0, 1fr); }
  .cr-ladder { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0.45rem; border-bottom: 0; border-left: 3px solid rgba(255, 214, 10, 0.4); }
  .cr-ladder li { flex-direction: row; width: calc(52% + var(--k) * 9.6%); min-height: 0; padding: 0.55rem 0.9rem; border: 3px solid color-mix(in srgb, var(--yellow) calc(30% + var(--k) * 12%), var(--line)); border-left: 0; border-radius: 4px 14px 14px 4px; }
  .cr-ladder li:last-child { border-color: #fff1a6; }
  .cr-ladder b { font-size: 1.25rem; }
  .cr-ladder li { padding: 0.4rem 0.8rem; }
  .log-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.4rem;
    scrollbar-width: thin;
  }
  .log-list li { scroll-snap-align: start; }
  .log-head .btn { width: 100%; justify-content: center; }
  .log-pace { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .log-pace div { padding: 0.6rem 0.7rem 0.55rem; }
  .log-pace dt { font-size: 0.66rem; letter-spacing: 0.02em; }
  .log-cal { gap: 0.6rem; padding: 0.8rem 0.75rem; }
  .log-cal-grid { grid-template-columns: 1.9rem repeat(var(--weeks, 6), minmax(0, 30px)); }
}

@media (max-width: 480px) {
  .amb-tiers { gap: 0.4rem; }
  .amb-tiers li { padding: 0.7rem 0.15rem 0.6rem; }
  .amb-tiers b { font-size: 1.2rem; }
  .amb-tiers span { font-size: 0.62rem; letter-spacing: 0.03em; }
  .cr-tracks span { font-size: 0.6rem; letter-spacing: 0.02em; }
  .world-more .hunt-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Community rewards board ---------- */

.community-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.community-head .section-head { flex: 1 1 520px; max-width: 660px; margin-bottom: 0; }

.auto-word {
  color: var(--yellow);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.auto-badge {
  --tilt: 2deg;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex: none;
  padding: 1.1rem 1.8rem 1.1rem 1.2rem;
  border: 3px solid var(--drop);
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--navy-900);
  box-shadow: 0 7px 0 var(--drop), 0 0 50px rgba(255, 214, 10, 0.3);
  transform: rotate(var(--tilt));
}

/* $CARDS coin inside the badge (the energy card until 2026-10-12, as on the rewards card); its dark rim reads on
   yellow. It turns half a cycle after the card's coin. */
.auto-badge-coin {
  flex: none;
  width: 4.4rem;
  height: auto;
  animation: coinSpin 6s ease-in-out 3s infinite;
}
@media (prefers-reduced-motion: reduce) { .auto-badge-coin { animation: none; } }

.auto-badge-copy {
  display: grid;
  gap: 0.25rem;
}

.auto-badge strong {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.auto-badge span {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.25;
}


.community-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.community-totals small {
  display: block;
  margin-top: 0.35rem;
  color: var(--white);
  font-weight: 700;
}

.holders-table {
  position: relative;
  overflow: auto;
  border: 3px solid var(--blue);
  border-radius: var(--radius);
  background: var(--navy-800);
  scrollbar-color: var(--blue) var(--navy-900);
}

.holder-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 1.5rem;
  border-top: 1px solid rgba(58, 102, 255, 0.22);
}

.holder-row:nth-child(odd):not(.holder-head) { background: rgba(255, 255, 255, 0.025); }
.holder-row.is-fomo { background: rgba(255, 214, 10, 0.08); }

.holder-head {
  position: sticky;
  top: 0;
  z-index: 2;
  border-top: 0;
  background: var(--navy-700);
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.holder-identity {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.holder-rank {
  min-width: 2.3rem;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1rem;
}

.holder-avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  overflow: hidden;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  background: #13288f;
  font-size: 0.85rem;
}

.holder-avatar img { width: 100%; height: 100%; object-fit: cover; }

.holder-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.holder-name-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.holder-name {
  overflow: hidden;
  color: var(--white);
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holder-name:hover { color: var(--yellow); }

.holder-wallet {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holder-wallet:hover { color: var(--yellow); text-decoration: underline; }

.holder-actions {
  display: flex;
  flex: none;
  gap: 0.3rem;
}

.holder-actions:empty { display: none; }

.holder-action {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--white);
  color: #000;
  font-size: 0.78rem;
  font-weight: 800;
}

.holder-action img { width: 100%; height: 100%; object-fit: cover; }
.holder-action.is-disabled { opacity: 0.4; }

.holder-bag,
.holder-reward {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.holder-bag strong,
.holder-reward strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.2;
}

.holder-bag strong { color: var(--white); }
.holder-reward strong { color: var(--yellow); }

.holder-bag small,
.holder-reward small {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.2;
}

.holder-reward small.holder-vault { color: var(--yellow); }

.podium-vault {
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1.1vw, 0.74rem);
  font-weight: 700;
  text-align: center;
}

.community-note { margin-top: 1rem; max-width: 52rem; }

/* ---------- World famous Zaza (Instagram wall) ---------- */

.zaza-world-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}

.zaza-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  overflow: hidden;
  border: 3px solid var(--yellow);
  border-radius: var(--radius);
  background: var(--navy-950);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--navy-800);
}

.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.ig-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(3, 10, 44, 0);
  transition: background 200ms ease;
}

.ig-tile:hover img { transform: scale(1.04); }
.ig-tile:hover::before { background: rgba(3, 10, 44, 0.22); }

/* Reel marker in the corner, like Instagram's own grid. */
.ig-tile.is-video::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5' fill='white'/%3E%3Cpath d='M10 8.3v7.4l6.2-3.7z' fill='%23111'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.gallery-credit {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.gallery-credit a { color: var(--white); }
.gallery-credit a:hover { color: var(--yellow); }

/* ---------- FAQ ---------- */

.faq-section {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
  gap: 24px clamp(28px, 5vw, 72px);
  align-items: start;
}

.faq-section h2 { font-size: clamp(3rem, 7vw, 5.4rem); }

.faq-list {
  display: grid;
  gap: 16px;
}

.faq-list details {
  overflow: hidden;
  border: 3px solid var(--blue);
  border-radius: var(--radius);
  background: var(--navy-800);
  transition: border-color 150ms ease;
}

.faq-list details[open] { border-color: var(--yellow); }

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  color: var(--white);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy-900);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.faq-list details[open] summary::after { content: "–"; }
.faq-list details[open] summary { border-bottom: 2px solid rgba(255, 214, 10, 0.3); }

.faq-list details p a { color: var(--yellow); text-decoration: underline; }

.faq-list details p {
  padding: 1.1rem 1.5rem 1.4rem;
  color: #d5ddff;
  font-size: 1.04rem;
}

/* ---------- $CARDS branding ---------- */

.cards-icon {
  display: inline-block;
  width: auto;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
}

.btn-white { background: var(--white); color: var(--navy-900); }
.btn-white:hover { background: #eef2ff; }
.cards-market-link img { height: 1.25em; }

/* $CARDS sticker slapped on the lead card's top-left corner, like a set badge on a trading card. */
.hero-cards-badge {
  position: absolute;
  z-index: 2;
  top: calc(var(--reel-w) * 0.07);
  left: calc(50% - var(--reel-w) * 0.5 - 2.8rem);
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1rem 0.5rem 0.65rem;
  border: 3px solid var(--drop);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.05;
  box-shadow: 0 5px 0 var(--drop), 0 14px 30px rgba(0, 0, 0, 0.35);
  transform: rotate(-8deg);
  transition: transform 150ms ease;
}

.hero-cards-badge:hover { transform: rotate(-8deg) translateY(-2px); }
.hero-cards-badge img { height: 2.1rem; width: auto; }

/* A fanned hand of three full 9:16 reel covers from Instagram that deals through the feed. Covers are never cropped: the
   full cover sits on top of a blurred copy of itself, which fills the card when a cover is not 9:16. Owner 2026-10-18 took
   it down to one cover with the next one behind it, then: "its too vertical.. the previous 3 way was better". */
.hero-reels {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--navy-900);
  transition: transform 150ms ease;
}

.hero-reels:hover { transform: translateY(-3px); }

.hero-reels-hand {
  position: relative;
  width: calc(var(--reel-w) * 2.25);
  height: calc(var(--reel-w) * 16 / 9 + 14px);
}

.hero-reel {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--reel-w);
  aspect-ratio: 9 / 16;
  margin-left: calc(var(--reel-w) / -2);
  overflow: hidden;
  border: 4px solid var(--yellow);
  border-radius: 16px;
  background: var(--navy-800);
  box-shadow: 0 5px 0 var(--drop), 0 16px 34px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 100%;
  transition: transform 200ms ease;
}

.hero-reel img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-reel .hero-reel-fill {
  position: absolute;
  inset: 0;
  object-fit: cover;
  filter: blur(14px) brightness(0.6) saturate(1.2);
  scale: 1.25;
}

/* DOM order is front, left, right so the front card always shows the newest clip in the rotation. The two at the sides
   fan out far enough to see who's in them. */
.hero-reel:nth-child(1) { z-index: 1; transform: translateY(-14px); box-shadow: 0 6px 0 var(--drop), 0 0 0 6px rgba(255, 214, 10, 0.16), 0 22px 44px rgba(0, 0, 0, 0.55); }
.hero-reel:nth-child(2) { transform: translateX(-56%) rotate(-10deg); }
.hero-reel:nth-child(3) { transform: translateX(56%) rotate(10deg); }
.hero-reels:hover .hero-reel:nth-child(1) { transform: translateY(-20px) scale(1.03); }
.hero-reels:hover .hero-reel:nth-child(2) { transform: translateX(-64%) rotate(-13deg); }
.hero-reels:hover .hero-reel:nth-child(3) { transform: translateX(64%) rotate(13deg); }

.hero-reel:nth-child(1)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5' fill='white'/%3E%3Cpath d='M10 8.3v7.4l6.2-3.7z' fill='%23111'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.hero-reels.is-dealing .hero-reel img { animation: reelDeal 420ms ease both; }
.hero-reels.is-dealing .hero-reel:nth-child(2) img { animation-delay: 70ms; }
.hero-reels.is-dealing .hero-reel:nth-child(3) img { animation-delay: 140ms; }

@keyframes reelDeal {
  from { opacity: 0.2; transform: scale(1.15); }
  to { opacity: 1; transform: none; }
}

.hero-reels-label {
  position: relative;
  z-index: 2;
  margin-top: -18px;
  padding: 0.42rem 0.9rem;
  border: 2px solid var(--drop);
  border-radius: 999px;
  background: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--drop), 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: rotate(4deg);
}

.hero-reels-label span { font-size: 0.8em; }

.mascot-lockup {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem 0.55rem 0.55rem;
  border: 3px solid var(--yellow);
  border-radius: 999px;
  background: var(--navy-800);
  box-shadow: 0 0 0 6px rgba(255, 214, 10, 0.12);
}

.mascot-lockup img { width: clamp(3.4rem, 5.5vw, 4.4rem); height: auto; }
.mascot-lockup .lockup-cards { width: auto; height: clamp(2.9rem, 4.6vw, 3.7rem); }

.mascot-lockup span {
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.token-head-copy { flex: 1; min-width: min(100%, 320px); }
.token-head .cards-market-link { flex: none; }

.coin-cards-line { display: inline-flex; align-items: center; }

/* ---------- $CARDS rewards podium ---------- */

.podium-wrap {
  margin-bottom: 20px;
  padding: clamp(1.3rem, 2.6vw, 2.2rem) clamp(1rem, 2.6vw, 2.2rem) 0;
  overflow: hidden;
  border: 3px solid var(--blue);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 214, 10, 0.16), transparent 60%),
    var(--navy-800);
}

.podium-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.6rem;
  color: var(--white);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 2vw, 18px);
  max-width: 820px;
  margin: 0 auto;
}

.podium-step {
  --medal: #dfe6f1;
  --medal-deep: #8d9ab0;
  --step-h: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.podium-step.is-gold { --medal: #ffd60a; --medal-deep: #c98a00; --step-h: 150px; }
.podium-step.is-bronze { --medal: #f0a36b; --medal-deep: #9c5424; --step-h: 80px; }

.podium-avatar {
  display: grid;
  place-items: center;
  width: clamp(3.2rem, 6vw, 4.4rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 4px solid var(--medal);
  border-radius: 50%;
  background: #13288f;
  font-size: 1.5rem;
  box-shadow: 0 0 22px color-mix(in srgb, var(--medal) 45%, transparent);
}

.is-gold .podium-avatar { width: clamp(3.8rem, 7.5vw, 5.4rem); }
.podium-avatar img { width: 100%; height: 100%; object-fit: cover; }

.podium-name {
  max-width: 100%;
  margin-top: 0.65rem;
  overflow: hidden;
  color: var(--white);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-name:hover { color: var(--yellow); }

.podium-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
  color: var(--medal);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  font-weight: 400;
  line-height: 1.1;
}

.podium-unit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--white);
  font-size: clamp(0.72rem, 1.3vw, 0.9rem);
  font-weight: 800;
}

.podium-unit img { height: 1.05em; width: auto; }

.podium-block {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--step-h);
  margin-top: 0.9rem;
  border: 3px solid var(--drop);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, var(--medal), var(--medal-deep));
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

/* ---------- Footer ---------- */

/* Three parts on a computer (brand | links | socials), then the fine print under a line. */
.footer {
  position: relative;
  z-index: 1;
  padding: 36px max(var(--gutter), (100% - var(--container)) / 2) 30px;
  border-top: 2px solid rgba(255, 214, 10, 0.25);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
}

.footer-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem 2.5rem;
}

.footer-brand { display: grid; justify-items: start; gap: 0.6rem; }

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
}

.footer-logo img { width: 2.6rem; height: 2.6rem; border: 2px solid var(--yellow); border-radius: 50%; }
.footer-logo b { color: var(--yellow); font-weight: 400; }

.footer-cards {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem 0.3rem 0.55rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--white);
  font-size: 0.85rem;
  line-height: 1;
  transition: border-color 150ms ease, color 150ms ease;
}

.footer-cards:hover { border-color: var(--yellow); color: var(--yellow); }
.footer-cards img { height: 1rem; width: auto; }

.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.7rem; }
.footer-nav a { color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; }
.footer-nav a:hover { color: var(--yellow); }

.footer-reach { display: grid; justify-items: end; gap: 0.6rem; }
.footer-social { display: flex; gap: 0.5rem; }

.footer-social a {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid var(--blue);
  border-radius: 50%;
  color: var(--white);
  transition: background 150ms ease;
}

.footer-social a:hover { background: var(--blue); }
.footer-social svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.footer-social img { width: 1.25rem; height: 1.25rem; border-radius: 50%; object-fit: contain; }

.footer-contact { color: rgba(255, 255, 255, 0.68); font-size: 0.82rem; font-weight: 700; }
.footer-contact:hover { color: var(--yellow); }

.footer-fine { display: grid; gap: 0.45rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.footer-risk { margin: 0 0 0.2rem; color: var(--yellow); font-family: var(--font-display); font-size: 0.95rem; font-weight: 400; text-wrap: balance; }
.footer-risk a { text-decoration: underline; text-underline-offset: 0.18em; }
.footer-legal { margin: 0; color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; font-weight: 600; line-height: 1.6; }

/* Tablets: the links take a row of their own under the brand and the socials. */
@media (max-width: 980px) {
  .footer-main { grid-template-columns: minmax(0, 1fr) auto; }
  .footer-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding-top: 1.1rem; border-top: 1px solid var(--line); }
}

/* Phones: one column, everything to the left; the socials and the address share a row. */
@media (max-width: 560px) {
  .footer { padding-top: 30px; }
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .footer-nav { grid-row: auto; gap: 0.55rem 1.3rem; padding-top: 0; border-top: 0; }
  .footer-reach { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; }
  .footer-risk { font-size: 0.86rem; }
}


/* ---------- Animations ---------- */

@keyframes coinFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wave { to { background-position: 36px 0; } }

/* ---------- Responsive ---------- */

/* Below this width the centred nav would run into the action buttons, so it sits between them instead. These two go by
   the width the top bar is laid out at: on big screens it's the window's over the scale (The first screen: Big screens),
   about 1536 px or, on windows wider for their height, 782 px times the width over the height. */
@media (max-width: 1780px), (min-width: 1690px) and (min-height: 861px) and (max-aspect-ratio: 1780/782) {
  .nav {
    position: static;
    margin: 0 auto;
    transform: none;
  }
}

/* Wider still, where the centred nav would run into the buttons all the same (a short window, or a very wide one for
   its height), i18n.js fit() puts it between them too. */
.nav.nav-flow { position: static; margin: 0 auto; transform: none; }

/* Nine nav tabs need the room: the brand pill keeps just the coin until the nav folds away at 1140px. */
@media (max-width: 1640px), (min-width: 1690px) and (min-height: 861px) and (max-aspect-ratio: 1640/782) {
  .topbar { gap: 0.6rem; }
  .topbar-actions { gap: 0.5rem; }
  .nav a { padding: 0.5rem 0.55rem; font-size: 0.95rem; }
  .brand > span:last-child { display: none; }
  .brand { padding-right: 0.4rem; }
}

@media (max-width: 1240px) {
  .nav { gap: 0; }
  .nav a { padding: 0.45rem 0.42rem; font-size: 0.86rem; }
}

/* Below 1140px the nine tabs no longer fit beside the buttons: the nav folds into the menu button and the brand pill
   shows $ZAZA again. */
@media (max-width: 1140px) {
  .nav { display: none; }
  .brand > span:last-child { display: inline; }
  .brand { padding-right: 1.3rem; }
}

@media (max-width: 1100px) {
  .token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buy-main { grid-template-columns: minmax(0, 1fr); }
  .runner-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  :root { --topbar-h: 72px; }

  .brand { height: 3rem; font-size: 1.25rem; }
  .brand-mark { width: 2.2rem; height: 2.2rem; }
  .icon-pill { width: 3rem; height: 3rem; }
  .buy-pill { min-height: 3rem; padding: 0 1.3rem; font-size: 1.02rem; }

  .rewards-card { text-align: left; }
  .coin-copy .rewards-card { margin-inline: auto; }
  .hero-show { --reel-w: clamp(128px, 35vw, 200px); z-index: auto; margin-top: 0.9rem; }
  .hero-cards-badge { left: calc(50% - var(--reel-w) * 0.5 - 2.2rem); font-size: 0.8rem; }
  .hero-cards-badge img { height: 1.8rem; }

  .story,
  .coin-showcase,
  .vault,
  .faq-section { grid-template-columns: minmax(0, 1fr); }
  .vault-console,
  .vault-meter-note { grid-column: auto; grid-row: auto; }
  .vault-safety { grid-column: auto; grid-row: auto; margin-top: 0; }
  .vault-safety ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }


  .runner-card { grid-template-columns: minmax(0, 1fr); }
  .runner-pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .coin-copy { text-align: center; }
  .coin-copy > p:not(.kicker) { margin-inline: auto; }

  .vault-battery { height: clamp(400px, 90vw, 520px); }

}

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

  .token-grid,
  .community-totals,

  .zaza-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .meter-card,
  .energy-card-panel { grid-column: 1 / -1; }
  .meter-card .reward-note { display: none; }

  .runner-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contract-card { grid-template-columns: minmax(0, 1fr); }
  .contract-buy { width: 100%; }

  .contract-box {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }

  .contract-box code { text-align: center; }

  .vault-safety ul { grid-template-columns: minmax(0, 1fr); }
  .vault-history-list li { grid-template-columns: auto minmax(0, 1fr); }
  .vault-history-list .when { grid-column: 2; text-align: left; }


  .holder-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem 1rem;
    padding: 0.6rem 1rem;
  }

  .holder-identity { grid-column: 1 / -1; }

  /* Column labels live in the header on phones instead of repeating on every row. */
  .holder-head span:first-child { grid-column: 1 / -1; }

  .auto-badge { --tilt: 1deg; width: 100%; gap: 0.8rem; padding: 1rem 1rem 1rem 0.9rem; }
  .auto-badge-coin { width: 3.4rem; }
  .auto-badge strong { font-size: clamp(1.35rem, 6.7vw, 2rem); }
  .auto-badge span { font-size: clamp(0.85rem, 3.9vw, 1.05rem); }

  .podium-step { --step-h: 84px; }
  .podium-step.is-gold { --step-h: 116px; }
  .podium-step.is-bronze { --step-h: 60px; }
}

@media (max-width: 480px) {
  .topbar { gap: 0.5rem; }
  .brand { padding-right: 0.9rem; font-size: 1.1rem; gap: 0.5rem; }
  .topbar-actions { gap: 0.4rem; }
  .icon-pill { width: 2.7rem; height: 2.7rem; border-width: 2px; }
  .buy-pill { min-height: 2.8rem; padding: 0 1rem; font-size: 0.95rem; box-shadow: 0 4px 0 var(--drop); }

  .btn-lg { min-height: 3.5rem; padding: 0 1.5rem; font-size: 1.1rem; }
  .hero-actions .btn { flex: 1 1 0; }
  .rewards-card { width: 100%; }

  .buy-head h2 { font-size: clamp(2.5rem, 13vw, 3.4rem); }
  .steps, .buy-main .steps { grid-template-columns: minmax(0, 1fr); }

  .energy-card-panel { flex-direction: column; align-items: flex-start; }
  .vault-caps button { flex: 1 1 40%; }
  .vault-caps input { flex: 1 1 100%; width: auto; }
  .vault-gift-tokens { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vault-me, .vault-readout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 400px) {
  .brand { height: 2.7rem; padding: 0 0.75rem 0 0.3rem; gap: 0.4rem; font-size: 1rem; }
  .brand-mark { width: 1.9rem; height: 1.9rem; }
  .icon-pill { width: 2.5rem; height: 2.5rem; }
  .icon-pill svg { width: 1rem; height: 1rem; }
  .buy-pill { min-height: 2.6rem; padding: 0 0.8rem; font-size: 0.88rem; }
}

/* Phone menu: the same pill nav drops down under the top bar as a stacked panel. */
@media (max-width: 1140px) {
  .menu-toggle { display: grid; }

  .topbar.is-menu-open .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: var(--gutter);
    right: var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    max-height: calc(100svh - var(--topbar-h) - 24px);
    overflow-y: auto;
    padding: 0.55rem;
    border-radius: var(--radius);
    background: rgba(6, 18, 79, 0.98);
    box-shadow: 0 8px 0 var(--drop), 0 24px 48px rgba(0, 0, 0, 0.45);
    animation: menu-drop 160ms ease-out;
  }

  .topbar.is-menu-open .nav a {
    padding: 0.85rem 1.2rem;
    font-size: 1.25rem;
  }
}

/* Small phones: the brand pill keeps just the coin so the menu button fits beside X, Telegram and Pump.fun (from 620px
   down: at 576-600px the menu button ran off the screen). */
@media (max-width: 620px) {
  .brand > span:last-child { display: none; }
  .brand { padding: 0 0.3rem; }
}

@media (max-width: 370px) {
  .topbar-actions { gap: 0.3rem; }
  .icon-pill { width: 2.4rem; height: 2.4rem; }
  .buy-pill { padding: 0 0.7rem; }
}

/* CoinGecko sits after Dexscreener on top (owner, 2026-11-01: "add dextscreener at the bottom and coingecko on top"), and
   the 🌐 language circle before X (owner, 2026-11-08: "add the language button to the top there on the left of the other
   buttons"). Where the nine nav tabs or the menu button leave no room for them all, CoinGecko gives way first, then
   Dexscreener (big screens lay the bar out wider than these widths): both stay in the footer and the Buy section's link
   strip. Under 681px the language is the ≡ menu's row and the footer's link instead of a circle. A width still short
   (another font, a translation) shrinks the nav's tabs until the bar fits: i18n.js fit(). */
@media (min-width: 1141px) and (max-width: 1440px), (max-width: 760px) {
  .gecko-pill { display: none; }
}
@media (min-width: 1141px) and (max-width: 1359px) {
  .dex-pill { display: none; }
}
@media (max-width: 680px) {
  .lang-pill { display: none; }
}

/* Phones: Discord keeps its place beside Telegram, and the Dexscreener link moves to the Buy section's link strip (owner,
   2026-10-22: "add link on website near telegram"). The smallest phones keep Discord there too. */
@media (max-width: 460px) {
  .dex-pill { display: none; }
}
@media (max-width: 350px) {
  .discord-pill { display: none; }
}

@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

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

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

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--yellow);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 520px) {
  .vault-battery > span { padding: 0.3rem 0.7rem; font-size: 0.74rem; letter-spacing: 0.12em; }
  .vault-zaza-total { display: block; margin: 0.2rem 0 0; }
}

/* ---------- Vault withdraw helper (unlisted page for the multisig) ---------- */
.withdraw-page { min-height: 100vh; }
.withdraw { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 2.5rem 0 4rem; }
.withdraw h1 { margin: 0.6rem 0 0.8rem; color: var(--yellow); font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3rem); font-weight: 400; }
.withdraw-back { color: var(--muted); font-weight: 700; }
.withdraw-lead { color: var(--white); }
.withdraw-card { display: grid; gap: 0.8rem; margin-top: 1.2rem; }
.withdraw-card .label { color: var(--yellow); }
.withdraw-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.withdraw-balances div { padding: 0.7rem 0.9rem; border: 2px solid var(--line); border-radius: var(--radius-sm); background: #081656; }
.withdraw-balances dt { color: var(--muted); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.withdraw-balances dd { margin: 0.2rem 0 0; color: var(--white); font-family: var(--font-display); font-size: 1.2rem; }
.withdraw-amount { display: flex; flex-wrap: wrap; gap: 8px; }
.withdraw-amount input { flex: 1 1 200px; min-width: 0; padding: 0.7rem 0.9rem; border: 2px solid var(--line); border-radius: 999px; background: #081656; color: var(--white); font: inherit; font-weight: 700; }
.withdraw-msg { margin: 0; color: var(--muted); font-weight: 700; }
.withdraw-msg.is-error, .withdraw-summary .is-error { color: #ff9aaa; }
.withdraw-msg.is-ok, .withdraw-summary .is-ok { color: var(--green); }
.withdraw-summary { margin: 0; padding-left: 1.1rem; color: var(--white); }
.withdraw-summary li + li { margin-top: 0.3rem; }
.withdraw-summary a, .withdraw-steps a { color: var(--yellow); text-decoration: underline; }
.withdraw textarea { width: 100%; padding: 0.7rem; border: 2px solid var(--line); border-radius: var(--radius-sm); background: #040a35; color: var(--white); font-family: var(--font-mono); font-size: 0.75rem; word-break: break-all; resize: vertical; }
.withdraw-steps { margin: 0; padding-left: 1.2rem; color: var(--white); }
.withdraw-steps li + li { margin-top: 0.45rem; }
.withdraw-steps code { color: var(--yellow); font-family: var(--font-mono); }
.withdraw-note { margin: 0; color: var(--muted); font-size: 0.88rem; }
@media (max-width: 520px) { .withdraw-balances { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pop-up: the ZAZA World trailer, a way into the game and the card hunt (promo.js) ---------- */

html:has(.promo[open]) { overflow: hidden; }

.promo {
  width: min(600px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 3px solid var(--yellow);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 60%, var(--navy-900) 100%);
  color: var(--text);
  box-shadow: 0 8px 0 var(--drop), 0 30px 90px rgba(0, 0, 0, 0.65);
}

.promo::backdrop {
  background: rgba(3, 10, 44, 0.74);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.promo[open] { animation: promo-pop 560ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.promo[open]::backdrop { animation: promo-fade 320ms ease both; }
.promo.is-closing { animation: promo-out 180ms ease both; }
.promo.is-closing::backdrop { animation: promo-fade 180ms ease reverse both; }

@keyframes promo-pop {
  0% { opacity: 0; transform: translateY(48px) scale(0.55) rotate(-4deg); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes promo-out { to { opacity: 0; transform: translateY(16px) scale(0.92); } }
@keyframes promo-fade { from { opacity: 0; } to { opacity: 1; } }

.promo-card {
  display: grid;
  gap: 0.9rem;
  max-height: calc(100dvh - 38px);
  padding: 1.3rem 1.5rem 1.2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.promo-card:focus { outline: none; }

.promo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.promo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.3rem;
  margin: 0;
  padding: 0 0.85rem 0 0.3rem;
  border: 2px solid var(--yellow);
  border-radius: 999px;
  background: var(--navy-900);
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}
.promo-lockup img { width: 1.65rem; height: 1.65rem; }
.promo-lockup .promo-cards { width: auto; height: 1.3rem; margin-left: 0.1rem; }
.promo-lockup i { color: var(--white); font-style: normal; font-size: 0.9rem; }
/* Titan One's capitals sit low in a line-height 1 box: lift the words onto the middle of their chips. */
.promo-lockup > span, .promo-soon > span { display: block; translate: 0 -0.08em; }
.promo-soon > span { translate: 0 -0.1em; }

.promo-x {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.1rem -0.5rem -0.3rem 0; /* centred on the ZAZA × CARDS chip */
  padding: 0;
  border: 2px solid rgba(179, 192, 240, 0.4);
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  cursor: pointer;
}
.promo-x:hover, .promo-x:focus-visible { border-color: var(--yellow); color: var(--yellow); }
.promo-x svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

.promo h2 { font-size: clamp(2rem, 6.2vw, 2.8rem); }

.promo-lead { color: var(--muted); font-size: 1rem; line-height: 1.5; }

/* The trailer, gold-framed as on the homepage (#world). Nothing is drawn over the picture. Its height is capped by the
   screen's (--promo-rest: the rest of the card's height, set per layout below), so the whole card fits without
   scrolling from 1280x720 laptops down to 360x640 phones. */
.promo-watch { --promo-rest: 740px; display: grid; gap: 0.9rem; min-width: 0; }
.promo-trailer {
  display: block;
  justify-self: center;
  width: min(100%, calc((100dvh - var(--promo-rest)) * 16 / 9));
  min-width: min(100%, 15rem);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 3px solid var(--yellow);
  border-radius: var(--radius-sm);
  background: var(--navy-950);
  box-shadow: 0 5px 0 var(--drop), 0 0 32px rgba(255, 214, 10, 0.22);
  cursor: pointer;
}
.promo-trailer[controls] { cursor: auto; }
.promo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.promo-actions .btn { flex: 1 1 auto; margin-bottom: 4px; }
.promo-film small { font-size: 0.8em; opacity: 0.75; }
.promo-narrow { display: none; }

.promo-hunt {
  --gacha-w: 12rem;
  container-type: inline-size; /* the title sizes itself to the room left beside the machine */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gacha-w);
  align-items: center;
  gap: 1.8rem;
  padding: 1rem 1.2rem 1rem 1.3rem;
  border: 3px solid var(--drop);
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--navy-900);
  box-shadow: 0 5px 0 var(--drop);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.promo-hunt:hover, .promo-hunt:focus-visible { transform: translateY(-2px); box-shadow: 0 7px 0 var(--drop); }
.promo-hunt-copy { display: grid; gap: 0.55rem; justify-items: start; min-width: 0; }
.promo-hunt-head { display: grid; gap: 0.4rem; justify-items: start; min-width: 0; }
.promo-soon {
  display: inline-flex;
  align-items: center;
  height: 1.95em;
  padding: 0 0.85em;
  border-radius: 999px;
  background: var(--navy-900);
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
}
/* "Pokémon cards" is the big line; the white drop matches the white-on-blue headings. Its size keeps "Pokémon"
   (5.02em wide) inside the room beside the machine, so it wraps before it can run into it. */
.promo-hunt strong {
  display: grid;
  font-family: var(--font-display);
  font-size: min(2.7rem, calc((100cqw - var(--gacha-w) - 1.8rem) / 5.3));
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 0.07em 0 var(--white);
}
.promo-hunt strong small { margin-bottom: 0.2rem; font-size: 0.46em; text-shadow: none; }
/* Collector Crypt's gacha machine, with a ZAZA pack dropping out of its slot. */
.promo-gacha { position: relative; align-self: center; }
.promo-machine { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 0 rgba(0, 10, 46, 0.3)); }
.promo-pack {
  position: absolute;
  bottom: -0.3rem;
  left: -1rem;
  width: 31%;
  height: auto;
  transform: rotate(-12deg);
  filter: drop-shadow(0 4px 0 rgba(0, 10, 46, 0.35));
}
.promo-hunt-text { font-size: 0.88rem; font-weight: 600; line-height: 1.45; }
.promo-hunt em { font-style: normal; font-weight: 800; }
.promo-hunt-link { font-family: var(--font-display); font-size: 0.98rem; text-decoration: underline; text-underline-offset: 3px; }

.promo-later {
  justify-self: center;
  padding: 0.35rem 0.8rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
}
.promo-later:hover, .promo-later:focus-visible { color: var(--white); text-decoration: underline; }

/* Wide screens: the trailer on the left, the title, the words and the buttons beside it, centred on it. */
@media (min-width: 900px) {
  .promo { width: min(900px, calc(100vw - 32px)); }
  .promo-card { padding: 1.4rem 1.8rem 1.1rem; }
  .promo-watch {
    --promo-rest: 480px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: "video ." "video title" "video lead" "video actions" "video .";
    gap: 0 1.6rem; /* margins, not row gaps: the empty rows above and below take the spare height */
  }
  .promo-trailer { grid-area: video; align-self: center; width: min(31rem, calc((100dvh - var(--promo-rest)) * 16 / 9)); }
  .promo-watch h2 { grid-area: title; font-size: 2.35rem; }
  .promo-watch h2 span { display: block; }
  .promo-lead { grid-area: lead; margin-top: 0.7rem; font-size: 0.95rem; }
  .promo-actions { grid-area: actions; flex-direction: column; align-items: stretch; margin-top: 1rem; }
}
/* Laptops under 860 px tall: the buttons side by side ("Watch 0:30") and the shorter lead, so the column stays as
   short as the trailer. */
@media (min-width: 900px) and (max-height: 859px) {
  .promo-more, .promo-film-words { display: none; }
  .promo-actions { flex-direction: row; }
}

@media (max-width: 560px) {
  .promo { border-radius: var(--radius); }
  .promo-card { gap: 0.65rem; padding: 1rem 1rem 0.9rem; }
  /* "ZAZA World is open." (10.7em wide) on one line: the card's inner width is the screen less 70px. */
  .promo h2 { font-size: min(2rem, calc((100vw - 70px) / 11.1)); }
  .promo-lead { font-size: 0.94rem; }
  .promo-watch { gap: 0.65rem; }
  .promo-trailer { width: 100%; }
  .promo-actions .btn { flex: 1 1 0; padding: 0 0.5rem; }
  .promo-narrow { display: inline; }
  .promo-film-words { display: none; }
  /* The chip, title and link sit beside the machine, centred on it (the empty 1fr rows above and below); the text
     goes underneath at full width. */
  .promo-hunt {
    --gacha-w: clamp(6.2rem, calc(30vw - 0.25rem), 8.4rem);
    grid-template-columns: minmax(0, 1fr) var(--gacha-w);
    grid-template-rows: 1fr auto auto 1fr auto;
    grid-template-areas: ". gacha" "head gacha" "link gacha" ". gacha" "text text";
    column-gap: 0.9rem;
    row-gap: 0;
    padding: 0.8rem 0.8rem 0.8rem 0.9rem;
  }
  .promo-hunt-copy { display: contents; }
  .promo-hunt-head { grid-area: head; }
  .promo-hunt strong { font-size: min(2.1rem, calc((100cqw - var(--gacha-w) - 0.9rem) / 5.3)); }
  .promo-gacha { grid-area: gacha; }
  .promo-pack { bottom: 0.1rem; left: -0.4rem; }
  /* One line beside the machine: "Preview the hunt →" (about 10.6em). */
  .promo-hunt-link { grid-area: link; justify-self: start; margin-top: 0.55rem; font-size: min(0.92rem, calc((100cqw - var(--gacha-w) - 0.9rem) / 11)); white-space: nowrap; }
  .promo-wide { display: none; }
  .promo-hunt-text { grid-area: text; margin-top: 0.55rem; font-size: 0.82rem; line-height: 1.4; }
}
/* Phones with less room: the trailer shows what the game is, then the hunt's title says what the hunt is. */
@media (max-width: 560px) and (max-height: 820px) {
  .promo-lead { display: none; }
}
@media (max-width: 560px) and (max-height: 750px) {
  .promo-hunt-text { display: none; }
}

/* ===== Card hunt countdown (hunt-countdown.js) =====
   A pill above ZAZA WORLD on the first screen, tiles in the card hunt card (#hunt) and the pop-up's chip. Every number sits
   in its own fixed-width box, so nothing wobbles as the seconds tick. The pill is in the World's look, as the first screen
   (owner, 2026-10-25: "the countdown is not matching the style now"): dark glass, a thin gold edge, the words in small gold
   capitals and the time in a gold pill, the pack peeking out on the left. */
.hero-hunt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  height: 40px;
  margin-bottom: 0.45rem;
  padding: 0 5px 0 50px;
  border: 1px solid rgba(232, 196, 106, 0.34);
  border-radius: 999px;
  background: rgba(8, 10, 32, 0.8);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 240, 200, 0.08);
  backdrop-filter: blur(4px);
  color: #e8c46a;
  font: 400 11px/1 var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 150ms ease;
}
.hero-hunt:hover, .hero-hunt:focus-visible { border-color: #e8c46a; }
.hero-hunt img { position: absolute; left: 12px; bottom: 3px; width: 30px; height: auto; rotate: -10deg; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); animation: huntPack 4.2s ease-in-out infinite; }
.hero-hunt b { padding: 7px 13px 6px; border: 1px solid rgba(255, 210, 63, 0.55); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 210, 63, 0.2), rgba(255, 210, 63, 0.06)); color: #ffd23f; font: 400 17px/1 var(--font-display); letter-spacing: 0.03em; text-transform: none; text-shadow: 0 2px 0 rgba(40, 20, 0, 0.8); }
@keyframes huntPack { 0%, 78%, 100% { rotate: -10deg; } 84% { rotate: -2deg; } 90% { rotate: -15deg; } 95% { rotate: -7deg; } }
@media (prefers-reduced-motion: reduce) {
  .hero-hunt img { animation: none; }
}
/* Phones: the live clock with its seconds ("2d 03h 52m 19s") made the pill wider than the screen and pushed the title
   block off its side, so there the pill is a size smaller and its clock leaves out the seconds (about 280 px). */
@media (max-width: 800px) {
  .hero-hunt { gap: 7px; padding-left: 44px; font-size: 10px; letter-spacing: 0.08em; }
  .hero-hunt .hunt-sec { display: none; }
  .hero-hunt img { left: 9px; width: 27px; }
  .hero-hunt b { padding: 6px 10px 5px; font-size: 15px; }
}
.promo-soon { white-space: nowrap; }
.hero-hunt i, .promo-soon i { display: inline-block; min-width: 1.2em; font-style: normal; text-align: right; }

.hunt-cd {
  margin-top: 1.1rem;
  padding: 0.95rem 1.05rem 1.05rem;
  border: 2px solid rgba(255, 214, 10, 0.5);
  border-radius: var(--radius-sm);
  background: rgba(3, 10, 44, 0.55);
}
.hunt-cd p { margin: 0; color: var(--white); font-size: 1.08rem; font-weight: 700; }
.hunt-cd p strong { color: var(--yellow); white-space: nowrap; }
.hunt-cd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 6.6rem)); gap: 0.8rem; margin-top: 0.9rem; }
.hunt-cd-tiles span {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 0.85rem 0 0.7rem;
  border-radius: 14px;
  background: var(--yellow);
  color: var(--navy-900);
  box-shadow: 0 5px 0 var(--drop);
}
.hunt-cd-tiles b { font-family: var(--font-display); font-size: 3rem; font-weight: 400; line-height: 1; }
.hunt-cd-tiles small { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.hunt-cd .hunt-cd-local { margin-top: 0.7rem; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.hunt-cd[data-state="live"] .hunt-cd-tiles, .hunt-cd[data-state="live"] .hunt-cd-local,
.hunt-cd[data-state="wait"] .hunt-cd-tiles, .hunt-cd[data-state="wait"] .hunt-cd-local { display: none; }

/* Pop-up on phones: the chip shows just the clock (about 9.6em) in the room beside the gacha machine. */
@media (max-width: 560px) {
  .promo-soon { font-size: min(1rem, calc((100cqw - var(--gacha-w) - 0.9rem) / 9.8)); }
}
@media (max-width: 480px) {
  .hero-hunt-wide { display: none; }
  .hunt-cd { padding: 0.85rem 0.8rem 0.95rem; }
  .hunt-cd p { font-size: 1rem; }
  .hunt-cd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
  .hunt-cd-tiles span { padding: 0.75rem 0 0.6rem; }
  .hunt-cd-tiles b { font-size: min(2.6rem, (100vw - 7rem) * 0.13); } /* "00" keeps a margin in its tile (a quarter of the row) */
  .hunt-cd-tiles small { font-size: 0.72rem; }
}

/* ---------- The ZAZA World trailer (#world, trailer.js): a gold-framed premiere above the gameplay loop. The silent loop
   plays in the frame; the caption under it holds the "Watch with sound" button, nothing sits on the picture; the full
   film plays with sound in a dialog over the page. ---------- */
.peek-trailer { border-color: var(--yellow); box-shadow: 0 10px 0 var(--drop), 0 0 46px rgba(255, 214, 10, 0.3), 0 30px 60px rgba(0, 0, 0, 0.45); }
.peek-trailer .peek-video { cursor: pointer; }
.peek-trailer figcaption { grid-template-columns: auto minmax(0, 1fr) auto; }
.trailer-btn { grid-row: 1 / span 2; grid-column: 3; min-height: 2.9rem; padding: 0 1.3rem; font-size: 1rem; }
.trailer-btn small { font-family: inherit; font-size: 0.8em; opacity: 0.7; }
.trailer-dialog {
  width: min(1280px, 94vw);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 4px solid var(--yellow);
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 12px 0 var(--drop), 0 40px 90px rgba(0, 0, 0, 0.6);
}
.trailer-dialog::backdrop { background: rgba(2, 6, 28, 0.88); }
.trailer-dialog video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: calc(var(--radius) - 4px); }
.trailer-close {
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 3px solid var(--drop);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy-900);
  font: 400 1.6rem/1 var(--font-display);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--drop);
}
.trailer-close:focus-visible, .trailer-btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
@media (max-width: 720px) {
  .peek-trailer figcaption { grid-template-columns: auto minmax(0, 1fr); }
  .trailer-btn { grid-row: auto; grid-column: 1 / -1; justify-self: start; margin-top: 0.75rem; }
  .trailer-close { top: -56px; right: 0; }
}