/* WOBBLE website. Palette from the game (ui_kit.gd, tier_badge.gd).
   Fonts are self-hosted (SIL OFL): Unbounded for display, Inter for text. */

@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #090619;
  --bg-2: #120c2c;
  --panel: rgba(28, 24, 56, 0.62);
  --panel-solid: #1c1838;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.18);
  --text: #f6f3ff;
  --muted: #aaa4cf;
  --safe: #3ee0a6;
  --risk: #ffc94a;
  --danger: #ff5d73;
  --accent: #7c6cff;
  --accent-2: #b26bff;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--risk); }
a:hover { color: #ffe08a; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--risk); outline-offset: 3px; border-radius: 6px; }

/* ---------- ambient background --------------------------------------------- */

.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(124, 108, 255, 0.28), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(178, 107, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #0b0720 0%, var(--bg) 60%);
}
.aurora i {
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  mix-blend-mode: screen;
  animation: drift 28s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { background: #7c6cff; left: -20vmax; top: 40vh; }
.aurora i:nth-child(2) { background: #ff5d73; right: -25vmax; top: 120vh; animation-duration: 34s; opacity: 0.12; }
.aurora i:nth-child(3) { background: #3ee0a6; left: 30vw; top: 240vh; animation-duration: 40s; opacity: 0.1; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(8vw, -10vh, 0) scale(1.2); }
}

.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  background: linear-gradient(90deg, var(--safe), var(--risk), var(--danger));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

/* ---------- header / footer ------------------------------------------------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  transition: background 0.4s, backdrop-filter 0.4s, padding 0.4s;
}
.site-header.scrolled {
  background: rgba(9, 6, 25, 0.66);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  padding-top: 10px; padding-bottom: 10px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark { display: inline-flex; flex-direction: column-reverse; gap: 2px; }
.brand-mark i { display: block; height: 5px; border-radius: 2px; }
.brand-mark i:nth-child(1) { width: 22px; background: #ff7a6b; }
.brand-mark i:nth-child(2) { width: 18px; background: var(--risk); margin-left: 3px; }
.brand-mark i:nth-child(3) { width: 14px; background: var(--safe); margin-left: 1px; }
.brand:hover .brand-mark i:nth-child(3) { animation: hop 0.6s var(--ease-out); }
@keyframes hop { 40% { transform: translateY(-5px) rotate(-6deg); } }
.brand-word { font: 800 20px/1 var(--display); letter-spacing: 0.04em; }
.brand-word b { color: var(--risk); font-weight: 800; }

.site-nav { display: flex; gap: clamp(12px, 2.5vw, 28px); flex-wrap: wrap; justify-content: flex-end; }
.site-nav a {
  position: relative;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px;
  transition: color 0.2s;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--risk); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 40px var(--gutter) 48px;
  color: var(--muted);
  font-size: 14px;
}
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ---------- shared bits ----------------------------------------------------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  color: var(--risk);
  font: 700 13px/1 var(--display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }

.safe { color: var(--safe); }
.risk { color: var(--risk); }
.danger { color: var(--danger); }

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 26px;
  border-radius: 16px;
  font: 700 15px/1 var(--display);
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.btn-primary {
  color: #160f2e;
  background: linear-gradient(135deg, #ffe08a, var(--risk) 45%, #ff9f43);
  box-shadow: 0 10px 40px -8px rgba(255, 201, 74, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: sweep 3.6s ease-in-out infinite;
}
.btn-primary span { position: relative; }
.btn-primary:hover { color: #160f2e; box-shadow: 0 16px 50px -8px rgba(255, 201, 74, 0.75), inset 0 -3px 0 rgba(0, 0, 0, 0.18); }
.btn-ghost { color: var(--muted); border: 1px solid var(--line-2); background: rgba(9, 6, 25, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--body); font-weight: 600; }
@keyframes sweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* Scroll reveal (JS adds .in; without JS everything is visible). */
.js .reveal { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 110px var(--gutter) 80px;
  overflow: hidden;
  isolation: isolate;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 6, 25, 0.9) 0%, rgba(9, 6, 25, 0.55) 38%, transparent 62%),
    linear-gradient(0deg, var(--bg) 0%, transparent 22%);
}
.hero-fallback { display: none; }
.no-webgl .hero-canvas { display: none; }
.no-webgl .hero-fallback {
  position: absolute; z-index: -2; right: 12%; bottom: 18%;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 4px;
}
.hero-fallback i { display: block; height: 30px; border-radius: 6px; box-shadow: 0 0 24px rgba(255, 255, 255, 0.15); }
.hero-fallback i:nth-child(1) { width: 220px; background: #ff7a6b; }
.hero-fallback i:nth-child(2) { width: 210px; background: #ffa94d; margin-left: 12px; }
.hero-fallback i:nth-child(3) { width: 200px; background: #ffd95a; margin-left: -6px; }
.hero-fallback i:nth-child(4) { width: 190px; background: #a6e36b; margin-left: 10px; }
.hero-fallback i:nth-child(5) { width: 180px; background: #3ee0a6; margin-left: 2px; }
.hero-fallback i:nth-child(6) { width: 170px; background: #57c7ff; margin-left: -8px; }
.hero-fallback i:nth-child(7) { width: 160px; background: #7c6cff; margin-left: 6px; }
.hero-fallback i:nth-child(8) { width: 150px; background: #c084fc; margin-left: -2px; }

.hero-copy { position: relative; max-width: min(760px, 100%); margin-left: max(0px, calc((100vw - var(--max)) / 2 - var(--gutter))); }

.headline {
  margin: 0 0 26px;
  font: 900 clamp(40px, 6.2vw, 92px)/0.95 var(--display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.headline .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.headline .line > span { display: inline-block; }
.js .headline .line > span { transform: translate3d(0, 110%, 0) rotate(6deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease-out); }
.js .headline.in .line > span { transform: none; }
.headline .line:nth-child(2) > span { transition-delay: 0.08s; }
.headline .line:nth-child(3) > span { transition-delay: 0.16s; }
.headline .line:nth-child(4) > span { transition-delay: 0.24s; }
.headline .gold > span {
  background: linear-gradient(100deg, #ffe08a 0%, var(--risk) 30%, #ff9f43 50%, #ffe08a 70%, var(--risk) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5s linear infinite;
}
.headline .danger > span { color: var(--danger); }
.js .headline.in .danger > span { animation: wobble 3.2s ease-in-out 1.4s infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes wobble {
  0%, 70%, 100% { transform: rotate(0); }
  74% { transform: rotate(-4deg) translateX(-2px); }
  80% { transform: rotate(3deg) translateX(2px); }
  86% { transform: rotate(-2deg); }
  92% { transform: rotate(1deg); }
}

.lead { margin: 0 0 34px; max-width: 520px; font-size: clamp(17px, 1.6vw, 20px); color: #cfc9ee; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

.hud {
  position: absolute; z-index: 2;
  right: max(var(--gutter), calc((100vw - var(--max)) / 2));
  top: 104px;
  width: min(340px, calc(100% - 2 * var(--gutter)));
  padding: 16px 18px 14px;
  border-radius: 20px;
  background: rgba(20, 15, 44, 0.55);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
}
.hud-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hud-cell { display: flex; flex-direction: column; gap: 4px; }
.hud-label { font: 700 10px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hud-value { font: 800 22px/1 var(--display); font-variant-numeric: tabular-nums; transition: transform 0.25s var(--ease-out); }
.hud-value.pop { transform: scale(1.18); }
.hud-meter { margin-top: 12px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.hud-meter i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--safe), var(--risk), var(--danger)); transform-origin: 0 50%; transform: scaleX(0.05); transition: transform 0.5s var(--ease-out); }
.hud-toast {
  position: absolute; left: 50%; top: -18px;
  padding: 7px 14px; border-radius: 999px;
  font: 800 13px/1 var(--display); letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0; transform: translate(-50%, 10px) scale(0.9);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
  pointer-events: none;
}
.hud-toast.show { opacity: 1; transform: translate(-50%, -14px) scale(1); }
.hud-toast.perfect { background: #fff; color: #1a1236; box-shadow: 0 0 30px rgba(255, 255, 255, 0.6); }
.hud-toast.bank { background: var(--safe); color: #062b1e; box-shadow: 0 0 30px rgba(62, 224, 166, 0.6); }
.hud-toast.fall { background: var(--danger); color: #fff; box-shadow: 0 0 30px rgba(255, 93, 115, 0.6); }

.scroll-cue { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid var(--line-2); border-radius: 14px; }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--text); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- marquee --------------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(124, 108, 255, 0.12), rgba(255, 201, 74, 0.08), rgba(255, 93, 115, 0.12));
  transform: rotate(-2deg) scale(1.04);
  margin: 10px 0 40px;
}
.marquee-track { display: flex; width: max-content; gap: 34px; padding: 18px 0; animation: marquee 36s linear infinite; }
.marquee span { font: 800 clamp(20px, 3vw, 34px)/1 var(--display); letter-spacing: 0.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(246, 243, 255, 0.55); }
.marquee span:nth-of-type(3n + 1) { color: var(--text); -webkit-text-stroke: 0; }
.marquee b { color: var(--risk); font-size: 22px; align-self: center; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections -------------------------------------------------------- */

.section { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(80px, 12vw, 150px) var(--gutter); }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 70px); }
.section h2, .final h2 {
  margin: 0;
  font: 900 clamp(36px, 6vw, 72px)/1.02 var(--display);
  letter-spacing: -0.02em;
}
.section h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--text); }
.section-lead { margin: 22px 0 0; color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); max-width: 600px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; perspective: 1200px; }
.step {
  position: relative;
  padding: 28px 28px 30px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  overflow: hidden;
}
.step:nth-child(2) { --d: 0.1s; }
.step:nth-child(3) { --d: 0.2s; }
.step-num { position: absolute; right: 22px; top: 14px; font: 900 64px/1 var(--display); color: rgba(255, 255, 255, 0.05); }
.step h3 { margin: 22px 0 8px; font: 800 22px/1.2 var(--display); }
.step p { margin: 0; color: var(--muted); }
.step-art { position: relative; height: 150px; border-radius: 18px; background: radial-gradient(120% 120% at 50% 100%, rgba(124, 108, 255, 0.25), rgba(9, 6, 25, 0.6)); border: 1px solid var(--line); overflow: hidden; }

.art-tap .base { position: absolute; left: 50%; bottom: 26px; width: 120px; height: 24px; margin-left: -60px; border-radius: 6px; background: #ff7a6b; box-shadow: 0 0 24px rgba(255, 122, 107, 0.5); }
.art-tap .slider { position: absolute; left: 50%; bottom: 50px; width: 120px; height: 24px; margin-left: -60px; border-radius: 6px; background: var(--risk); box-shadow: 0 0 24px rgba(255, 201, 74, 0.5); animation: slide 2.4s ease-in-out infinite; }
.art-tap .ripple { position: absolute; left: 50%; top: 28px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: ripple 2.4s ease-out infinite; }
@keyframes slide {
  0% { transform: translateX(-110px); }
  45% { transform: translateX(14px); }
  50%, 92% { transform: translateX(14px) translateY(0); }
  100% { transform: translateX(-110px); }
}
@keyframes ripple { 0%, 44% { opacity: 0; transform: scale(0.3); } 48% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(2); } }

.art-mult { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.mult-num { font: 900 46px/1 var(--display); color: var(--risk); text-shadow: 0 0 30px rgba(255, 201, 74, 0.5); animation: pulse 1.2s ease-in-out infinite; }
.mult-bar { display: block; width: 70%; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.mult-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--safe), var(--risk), var(--danger)); transform-origin: 0 50%; animation: fill 3s var(--ease-out) infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes fill { 0% { transform: scaleX(0.1); } 80%, 100% { transform: scaleX(1); } }

.art-bank { display: flex; align-items: center; justify-content: center; }
.bank-btn { padding: 16px 34px; border-radius: 16px; background: var(--safe); color: #062b1e; font: 900 22px/1 var(--display); letter-spacing: 0.08em; box-shadow: 0 0 0 0 rgba(62, 224, 166, 0.6), inset 0 -4px 0 rgba(0, 0, 0, 0.2); animation: press 2.2s ease-in-out infinite; }
.bank-coin { position: absolute; left: 50%; top: 50%; font: 800 20px/1 var(--display); color: var(--safe); opacity: 0; animation: coin 2.2s ease-out infinite; }
@keyframes press {
  0%, 30% { transform: scale(1); box-shadow: 0 0 0 0 rgba(62, 224, 166, 0.6), inset 0 -4px 0 rgba(0, 0, 0, 0.2); }
  36% { transform: scale(0.92); }
  48% { transform: scale(1); box-shadow: 0 0 0 26px rgba(62, 224, 166, 0), inset 0 -4px 0 rgba(0, 0, 0, 0.2); }
  100% { transform: scale(1); }
}
@keyframes coin { 0%, 36% { opacity: 0; transform: translate(-50%, 0); } 44% { opacity: 1; } 80%, 100% { opacity: 0; transform: translate(-50%, -64px); } }

/* Zones */
.zones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; counter-reset: z; }
.zone {
  position: relative;
  padding: 22px 20px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.zone::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--zc); box-shadow: 0 0 20px var(--zc); }
.zone:nth-child(1) { --zc: #3ee0a6; }
.zone:nth-child(2) { --zc: #57c7ff; --d: 0.06s; }
.zone:nth-child(3) { --zc: #7c6cff; --d: 0.12s; }
.zone:nth-child(4) { --zc: #ffc94a; --d: 0.18s; }
.zone:nth-child(5) { --zc: #ff9f43; --d: 0.24s; }
.zone:nth-child(6) { --zc: #ff5d73; --d: 0.3s; }
.zone-h { display: block; font: 900 34px/1 var(--display); color: var(--zc); }
.zone-h::after { content: " blocks"; font: 600 12px/1 var(--body); color: var(--muted); letter-spacing: 0.04em; }
.zone strong { display: block; margin-top: 12px; font: 800 17px/1.2 var(--display); }
.zone p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.zone-storm { background: radial-gradient(120% 140% at 100% 0%, rgba(255, 93, 115, 0.28), rgba(255, 255, 255, 0.03)); }
.zone-storm::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255, 255, 255, 0.05) 18px 20px);
  animation: rain 0.8s linear infinite;
}
@keyframes rain { to { background-position: 40px 0; } }

/* Ranks */
.tiers { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 50px; }
.tier {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent);
  background: color-mix(in srgb, var(--tc) 10%, transparent);
  font: 700 14px/1 var(--display);
  color: var(--tc);
}
.tier i {
  width: 26px; height: 28px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #fff 0%, var(--tc) 40%, color-mix(in srgb, var(--tc) 50%, #000) 100%);
  position: relative; overflow: hidden;
}
.tier i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%); transform: translateX(-120%); animation: sweep 4s ease-in-out infinite; animation-delay: var(--sd, 0s); }
.t-bronze { --tc: #c8834f; --sd: 0s; }
.t-silver { --tc: #b8c4d6; --sd: 0.15s; }
.t-gold { --tc: #ffc94a; --sd: 0.3s; }
.t-platinum { --tc: #4fd1c5; --sd: 0.45s; }
.t-diamond { --tc: #7cb7ff; --sd: 0.6s; }
.t-master { --tc: #c084fc; --sd: 0.75s; }
.t-grandmaster { --tc: #ff5d73; --sd: 0.9s; }
.t-legend { --tc: #ffe08a; --sd: 1.05s; }
.tier.t-legend { box-shadow: 0 0 30px rgba(255, 224, 138, 0.35); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 50px rgba(255, 224, 138, 0.6); } }
.tier i::after { animation-delay: var(--sd); }
.legend-text {
  -webkit-text-stroke: 0 !important;
  background: linear-gradient(100deg, #ffe08a, #fff 30%, #ffc94a 50%, #ff9f43 70%, #ffe08a);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: shimmer 4s linear infinite;
}

.board-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 70px); align-items: center; perspective: 1400px; }
.board {
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(170deg, rgba(40, 32, 84, 0.9), rgba(20, 15, 44, 0.92));
  border: 1px solid var(--line-2);
  box-shadow: 0 50px 120px -40px rgba(124, 108, 255, 0.55);
}
.board-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.board-tabs span { padding: 8px 14px; border-radius: 12px; font: 700 12px/1 var(--display); color: var(--muted); }
.board-tabs .on { background: var(--accent); color: #fff; }
.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.board-list li, .board-you {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 64px; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 15px;
}
.pos { font: 800 15px/1 var(--display); color: var(--muted); text-align: center; }
.who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp { font: 700 14px/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.tier-chip { padding: 5px 9px; border-radius: 999px; font: 700 10px/1 var(--display); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); white-space: nowrap; }
.medal-1 .pos, .medal-2 .pos, .medal-3 .pos { width: 30px; height: 30px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #1a1236; }
.medal-1 .pos { background: radial-gradient(circle at 35% 30%, #fff6c9, #ffc94a 55%, #c98a10); box-shadow: 0 0 18px rgba(255, 201, 74, 0.6); }
.medal-2 .pos { background: radial-gradient(circle at 35% 30%, #fff, #c8d2e2 55%, #7f8aa0); }
.medal-3 .pos { background: radial-gradient(circle at 35% 30%, #ffe0c4, #c8834f 55%, #7d4a24); }
.board-you {
  position: relative;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(255, 201, 74, 0.22), rgba(124, 108, 255, 0.22));
  border: 1px solid rgba(255, 201, 74, 0.6);
  box-shadow: 0 0 0 0 rgba(255, 201, 74, 0.5);
  animation: youPulse 2.4s ease-in-out infinite;
}
.board-you .pos { color: var(--risk); }
.board-you .who { color: var(--risk); letter-spacing: 0.08em; }
@keyframes youPulse { 50% { box-shadow: 0 0 34px -4px rgba(255, 201, 74, 0.55); } }
.board-you.climb { animation: youPulse 2.4s ease-in-out infinite, climb 0.6s var(--ease-out); }
@keyframes climb { 30% { transform: translateY(-6px) scale(1.02); } }
.board-next { margin: 12px 4px 2px; font-size: 14px; color: var(--muted); }
.board-next strong { color: var(--text); }

.rank-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rank-points li { padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--muted); }
.rank-points li:nth-child(2) { --d: 0.08s; }
.rank-points li:nth-child(3) { --d: 0.16s; }
.rank-points li:nth-child(4) { --d: 0.24s; }
.rank-points strong { display: block; color: var(--text); font: 700 16px/1.3 var(--display); margin-bottom: 4px; }

/* Themes */
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; perspective: 1400px; }
.theme {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--sky);
  box-shadow: 0 40px 80px -40px var(--glow, rgba(0, 0, 0, 0.8));
}
.theme:nth-child(2) { --d: 0.06s; }
.theme:nth-child(3) { --d: 0.12s; }
.theme:nth-child(4) { --d: 0.18s; }
.theme:nth-child(5) { --d: 0.24s; }
.theme:nth-child(6) { --d: 0.3s; }
.theme-scene { position: absolute; inset: 0; }
.theme-scene::before, .theme-scene::after { content: ""; position: absolute; pointer-events: none; }
.theme-scene i { position: absolute; z-index: 1; left: 50%; height: 7.4%; border-radius: 6px; box-shadow: 0 0 22px var(--bglow, transparent); }
.theme-scene i:nth-child(1) { bottom: 30%; width: 56%; margin-left: -28%; background: var(--b1); }
.theme-scene i:nth-child(2) { bottom: 38%; width: 52%; margin-left: -24%; background: var(--b2); }
.theme-scene i:nth-child(3) { bottom: 46%; width: 49%; margin-left: -26%; background: var(--b3); }
.theme-scene i:nth-child(4) { bottom: 54%; width: 45%; margin-left: -22%; background: var(--b4); }
.theme-scene i:nth-child(5) { bottom: 66%; width: 45%; margin-left: -22%; background: var(--b5); animation: hover 2.6s ease-in-out infinite; }
@keyframes hover { 0%, 100% { transform: translateX(-60%); } 50% { transform: translateX(60%); } }
.theme-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent); display: flex; flex-direction: column; gap: 2px; transform: translateZ(40px); }
.theme-info strong { font: 800 22px/1.1 var(--display); }
.theme-info span { font-size: 13px; color: rgba(255, 255, 255, 0.75); }

.th-classic { --sky: linear-gradient(180deg, #070a22, #231a4d 60%, #4a2a6b); --b1: #ff7a6b; --b2: #ffa94d; --b3: #ffd95a; --b4: #a6e36b; --b5: #3ee0a6; --glow: rgba(124, 108, 255, 0.6); }
.th-classic .theme-scene::before { inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 20%, #fff, transparent), radial-gradient(1px 1px at 70% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 35%, #fff, transparent), radial-gradient(1px 1px at 35% 40%, #fff, transparent), radial-gradient(1px 1px at 55% 25%, #fff, transparent), radial-gradient(1.2px 1.2px at 12% 55%, #fff, transparent); animation: twinkle 3s ease-in-out infinite alternate; }
.th-classic .theme-scene::after { width: 54px; height: 54px; right: 16%; top: 10%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #e8e1ff); box-shadow: 0 0 40px rgba(232, 225, 255, 0.6); }
@keyframes twinkle { to { opacity: 0.4; } }

.th-candy { --sky: linear-gradient(180deg, #3a1f4f, #6b3a72 55%, #ff9cc6); --b1: #ff8fc8; --b2: #ffd1e8; --b3: #9be7ff; --b4: #ffe08a; --b5: #c9a7ff; --glow: rgba(255, 143, 200, 0.6); }
.th-candy .theme-scene::before { inset: 0; background-image: radial-gradient(3px 8px at 20% 30%, #ff5d73, transparent), radial-gradient(3px 8px at 70% 20%, #3ee0a6, transparent), radial-gradient(3px 8px at 40% 60%, #ffc94a, transparent), radial-gradient(3px 8px at 85% 50%, #57c7ff, transparent), radial-gradient(3px 8px at 10% 70%, #fff, transparent); background-size: 100% 100%; animation: fall 4s linear infinite; }
.th-candy .theme-scene::after { content: "♥"; left: 18%; top: 22%; font-size: 26px; color: #ff8fc8; text-shadow: 0 0 16px #ff8fc8; animation: float 3s ease-in-out infinite; }
@keyframes fall { from { transform: translateY(-30%); } to { transform: translateY(30%); } }
@keyframes float { 50% { transform: translateY(-14px) scale(1.15); } }

.th-ocean { --sky: linear-gradient(180deg, #020b1c, #0a3552 55%, #0d6a7a); --b1: rgba(79, 209, 197, 0.85); --b2: rgba(87, 199, 255, 0.85); --b3: rgba(79, 209, 197, 0.75); --b4: rgba(124, 183, 255, 0.85); --b5: rgba(62, 224, 166, 0.85); --bglow: rgba(79, 209, 197, 0.6); --glow: rgba(79, 209, 197, 0.55); }
.th-ocean .theme-scene::before { inset: 0; background-image: radial-gradient(circle at 20% 80%, transparent 5px, rgba(255, 255, 255, 0.6) 6px, transparent 7px), radial-gradient(circle at 75% 70%, transparent 8px, rgba(255, 255, 255, 0.5) 9px, transparent 10px), radial-gradient(circle at 60% 90%, transparent 4px, rgba(255, 255, 255, 0.6) 5px, transparent 6px), radial-gradient(circle at 30% 50%, transparent 3px, rgba(255, 255, 255, 0.5) 4px, transparent 5px); animation: rise 5s linear infinite; }
.th-ocean .theme-scene::after { inset: 0; background: repeating-linear-gradient(100deg, transparent 0 40px, rgba(120, 220, 255, 0.07) 40px 70px); animation: caustic 6s linear infinite; }
@keyframes rise { from { transform: translateY(20%); } to { transform: translateY(-40%); } }
@keyframes caustic { to { background-position: 220px 0; } }

.th-sunset { --sky: linear-gradient(180deg, #2a0f3a, #7a2c40 50%, #ff9f43 90%); --b1: #ff7a5c; --b2: #ff9f43; --b3: #ffc94a; --b4: #ff8fa3; --b5: #ffd27a; --glow: rgba(255, 159, 67, 0.6); }
.th-sunset .theme-scene::before { left: 50%; top: 52%; width: 70%; aspect-ratio: 1; margin-left: -35%; border-radius: 50%; background: radial-gradient(circle, #ffe08a, #ff9f43 55%, transparent 70%); opacity: 0.85; animation: pulse 4s ease-in-out infinite; }
.th-sunset .theme-scene::after { left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, #3d1236, #1a0820); clip-path: polygon(0 55%, 14% 22%, 26% 48%, 40% 8%, 55% 44%, 68% 18%, 82% 50%, 92% 30%, 100% 46%, 100% 100%, 0 100%); }

.th-neon { --sky: linear-gradient(180deg, #020208, #141127 70%, #2a0f5a); --b1: #ff3df2; --b2: #3df2ff; --b3: #b26bff; --b4: #ff3df2; --b5: #3df2ff; --bglow: rgba(255, 61, 242, 0.8); --glow: rgba(255, 61, 242, 0.55); }
.th-neon .theme-scene::before { left: -50%; right: -50%; bottom: 0; height: 45%; background-image: linear-gradient(rgba(255, 61, 242, 0.7) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(61, 242, 255, 0.6) 1.5px, transparent 1.5px); background-size: 40px 40px; transform: perspective(200px) rotateX(60deg); transform-origin: 50% 100%; animation: grid 1.2s linear infinite; }
.th-neon .theme-scene::after { left: 50%; top: 14%; width: 46%; aspect-ratio: 1; margin-left: -23%; border-radius: 50%; background: repeating-linear-gradient(0deg, #ff3df2 0 6px, transparent 6px 10px), linear-gradient(#ffcf3d, #ff3df2); background-blend-mode: multiply; opacity: 0.8; -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); }
@keyframes grid { to { background-position: 0 40px; } }

.th-gold { --sky: linear-gradient(180deg, #070503, #2a1e0c 60%, #5a3e10); --b1: linear-gradient(90deg, #8a5a10, #ffe08a, #c98a10); --b2: linear-gradient(90deg, #8a5a10, #fff2c4, #c98a10); --b3: linear-gradient(90deg, #8a5a10, #ffe08a, #c98a10); --b4: linear-gradient(90deg, #8a5a10, #fff2c4, #c98a10); --b5: linear-gradient(90deg, #8a5a10, #ffe08a, #c98a10); --bglow: rgba(255, 201, 74, 0.5); --glow: rgba(255, 201, 74, 0.55); }
.th-gold .theme-scene::before { inset: 0; background: radial-gradient(2px 2px at 25% 30%, #ffe08a, transparent), radial-gradient(2px 2px at 75% 22%, #ffe08a, transparent), radial-gradient(1.5px 1.5px at 60% 45%, #fff, transparent), radial-gradient(2px 2px at 15% 60%, #ffe08a, transparent); animation: twinkle 1.6s ease-in-out infinite alternate; }
.th-gold .theme-scene::after { inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 240, 200, 0.35) 50%, transparent 60%); background-size: 250% 100%; animation: shimmer 3.5s linear infinite; }

/* Challenge */
.challenge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(30px, 6vw, 90px); align-items: center; }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.ticks li::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--safe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23062b1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.phone {
  width: min(320px, 80vw);
  aspect-ratio: 9 / 18.5;
  padding: 12px;
  border-radius: 46px;
  background: linear-gradient(145deg, #3a3460, #15112c);
  box-shadow: 0 60px 120px -40px rgba(124, 108, 255, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  animation: phoneFloat 6s ease-in-out infinite;
}
.js .phone.reveal.in { transform: none; }
@keyframes phoneFloat { 50% { translate: 0 -16px; rotate: -2deg; } }
.phone-screen { height: 100%; border-radius: 36px; background: linear-gradient(180deg, #120c2c, #0b0720); padding: 50px 16px 20px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.msg { max-width: 75%; padding: 10px 14px; border-radius: 18px; font-size: 14px; }
.msg-in { align-self: flex-start; background: #2c2850; border-bottom-left-radius: 6px; }
.typing { align-self: flex-start; display: flex; gap: 5px; padding: 12px 14px; border-radius: 18px; border-bottom-left-radius: 6px; background: #2c2850; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: dot 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: 0.4; } }
.msg-out { align-self: flex-end; background: var(--accent); border-bottom-right-radius: 6px; }
.msg-card { align-self: flex-start; width: 85%; padding: 16px; border-radius: 20px; background: linear-gradient(170deg, #231a4d, #4a2a6b); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; text-align: center; }
.msg-eyebrow { font: 700 9px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--risk); }
.msg-card strong { font: 700 15px/1.2 var(--display); margin-top: 6px; }
.msg-score { font: 900 40px/1 var(--display); color: var(--safe); text-shadow: 0 0 24px rgba(62, 224, 166, 0.5); font-variant-numeric: tabular-nums; }
.msg-sub { font-size: 12px; color: var(--muted); }
.msg-btn { margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--risk); color: #1a1236; font: 800 12px/1 var(--display); letter-spacing: 0.06em; }

/* Final CTA */
.final { position: relative; isolation: isolate; text-align: center; padding: clamp(110px, 16vw, 200px) var(--gutter); overflow: hidden; }
.final h2 { font-size: clamp(48px, 10vw, 140px); text-transform: uppercase; }
.final h2 span { background: linear-gradient(100deg, var(--safe), var(--risk) 45%, var(--danger)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.final p { margin: 14px 0 40px; color: var(--muted); font-size: clamp(17px, 2vw, 22px); }
.final-glow { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(124, 108, 255, 0.4), rgba(255, 201, 74, 0.3), rgba(255, 93, 115, 0.35), rgba(62, 224, 166, 0.3), rgba(124, 108, 255, 0.4)); filter: blur(90px); opacity: 0.55; animation: spin 18s linear infinite; z-index: -1; }
@keyframes spin { to { transform: rotate(360deg); } }
.stores { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.store { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 12px 22px; min-width: 190px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.35); font: 700 19px/1.15 var(--display); text-align: left; }
.store small { font: 500 11px/1.4 var(--body); color: var(--muted); }

/* 3D tilt (JS sets --rx/--ry) */
.tilt { transform-style: preserve-3d; transition: transform 0.5s var(--ease-out), opacity 0.9s var(--ease-out); }
.js .tilt.in { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tilt.tilting { transition: transform 0.12s linear; }
.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.12), transparent 40%);
  opacity: 0; transition: opacity 0.3s;
}
.tilt.tilting::after { opacity: 1; }

/* ---------- legal / content pages ------------------------------------------ */

.page { max-width: 880px; margin: 0 auto; padding: 120px var(--gutter) 60px; }
article.doc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(24px, 5vw, 52px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 40px 100px -50px rgba(124, 108, 255, 0.5);
}
article.doc h1 { font: 900 clamp(32px, 6vw, 52px)/1.05 var(--display); letter-spacing: -0.02em; margin: 0 0 10px; }
article.doc h2 { font: 800 clamp(19px, 2.4vw, 23px)/1.25 var(--display); margin: 40px 0 10px; color: var(--risk); }
article.doc h3 { font: 700 17px/1.3 var(--display); margin: 22px 0 6px; }
article.doc .meta { color: var(--muted); margin: 0 0 24px; font-size: 15px; }
article.doc li { margin: 6px 0; }
article.doc p, article.doc li { color: #ddd8f5; }
article.doc strong { color: var(--text); }
.table-scroll { overflow-x: auto; margin: 14px 0; border-radius: 16px; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { color: var(--risk); font: 700 13px/1.3 var(--display); letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.03); }
.note { border: 1px solid rgba(62, 224, 166, 0.35); padding: 14px 18px; background: rgba(62, 224, 166, 0.08); border-radius: 16px; }

.notfound { min-height: 80vh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 60px; }
.notfound h1 { margin: 0; font: 900 clamp(90px, 20vw, 220px)/1 var(--display); background: linear-gradient(180deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound .tumble { display: inline-block; animation: tumble 2.4s var(--ease-out) infinite; }
@keyframes tumble { 0% { transform: translateY(-40px) rotate(-20deg); opacity: 0; } 30% { transform: translateY(0) rotate(8deg); opacity: 1; } 45% { transform: rotate(-4deg); } 60%, 100% { transform: rotate(0); } }
.notfound p { color: var(--muted); font-size: 19px; margin: 10px 0 30px; }

/* ---------- responsive ------------------------------------------------------ */

@media (max-width: 900px) {
  .board-wrap, .challenge { grid-template-columns: 1fr; }
  .phone { margin: 0 auto; }
}

@media (max-width: 700px) {
  .site-nav a:nth-child(n + 3) { display: none; }
  .hero { align-items: flex-start; padding-top: 96px; min-height: 128svh; }
  .scroll-cue { display: none; }
  .hero-shade { background: linear-gradient(180deg, rgba(9, 6, 25, 0.92) 0%, rgba(9, 6, 25, 0.5) 40%, transparent 52%), linear-gradient(0deg, var(--bg) 0%, transparent 14%); }
  .hud { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 28px; }
  .hud-value { font-size: 18px; }
  .board-list li, .board-you { grid-template-columns: 38px minmax(0, 1fr) auto 50px; font-size: 14px; padding: 10px; }
  .tier-chip { font-size: 9px; padding: 4px 7px; }
  .marquee { transform: rotate(-2deg) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal, .js .headline .line > span { opacity: 1; transform: none; }
}