@font-face { font-family: "Pixelify Sans"; src: url("../assets/PixelifySans.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }

/* Palette = Walkbit/Theme/Theme.swift */
:root {
  --bg: #0A0F1D; --bg-top: #0E1629; --panel: #111A2C; --panel-2: #172237; --border: #223049;
  --neon: #4ADE80; --neon-bright: #6CF5A0; --neon-deep: #22C55E;
  --text: #EEF2F7; --dim: #8B95A9; --faint: #566178;
  --purple: #8B7CF6; --orange: #F5A524; --pink: #E879C9; --blue: #5AA9FF; --gold: #F5B92E; --danger: #FF5A6E;
  --btn: linear-gradient(90deg, #5BE890, #34D399);
  --glow: 0 0 18px rgba(74,222,128,.55), 0 0 2px rgba(108,245,160,.9);
  --r: 18px;
  --pixel: "Pixelify Sans", ui-monospace, monospace;
  --cond: "Barlow Condensed", "SF Pro Display Condensed", system-ui, sans-serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, canvas, svg { display: block; }
a { color: inherit; }
b, strong { font-weight: 650; color: var(--text); }
.pixel { font-family: var(--pixel); font-weight: 700; letter-spacing: .01em; }
.neon { color: var(--neon); text-shadow: 0 0 18px rgba(74,222,128,.45); }
.muted { color: var(--faint); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.wrap.narrow { width: min(760px, 100% - 32px); }
canvas[data-sprite] { image-rendering: pixelated; }
:focus-visible { outline: 2px solid var(--neon-bright); outline-offset: 3px; border-radius: 6px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--btn); color: #062012; font: 700 17px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 12px; box-shadow: 0 6px 24px rgba(52,211,153,.28), inset 0 -3px 0 rgba(0,0,0,.14);
  transition: transform .15s, box-shadow .2s, filter .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(52,211,153,.45), inset 0 -3px 0 rgba(0,0,0,.14); filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn-lg { padding: 18px 28px; font-size: 19px; }
.btn-sm { padding: 10px 16px; font-size: 15px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn-ghost:hover { border-color: var(--neon); box-shadow: 0 0 0 1px rgba(74,222,128,.3); }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--dim); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { color: var(--neon); border-color: var(--neon); }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 12px max(16px, calc((100% - 1180px)/2));
  background: rgba(10,15,29,.72); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgba(34,48,73,.6); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 20px; white-space: nowrap; }
.brand img { border-radius: 9px; }
.brand em, .foot em { font-style: normal; color: var(--neon); }
.links { display: flex; gap: 22px; margin-right: auto; }
.links a { text-decoration: none; color: var(--dim); font: 600 16px var(--cond); letter-spacing: .05em; text-transform: uppercase; }
.links a:hover { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.pass { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; font: 600 14px var(--cond); letter-spacing: .05em; }
.pass:hover, .pass[aria-expanded="true"] { border-color: var(--neon); }
.pass-lvl b { color: var(--neon); }
.pass-bar, .bar { position: relative; display: block; width: 64px; height: 6px; border-radius: 6px; background: #1d2a42; overflow: hidden; }
.pass-bar i, .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--btn); border-radius: 6px; box-shadow: 0 0 10px rgba(74,222,128,.7); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.pass-badges { display: flex; align-items: center; gap: 4px; color: var(--dim); }
.pass-badges svg { width: 14px; height: 14px; fill: var(--gold); }
.pass-badges b { color: var(--text); }
.pass.bump { animation: bump .5s; }
@keyframes bump { 30% { transform: scale(1.08); box-shadow: var(--glow); } }
.pass-panel { position: absolute; right: max(16px, calc((100% - 1180px)/2)); top: 64px; width: min(380px, calc(100% - 32px)); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.pass-head { display: flex; justify-content: space-between; align-items: end; }
.pass-head small { display: block; color: var(--dim); font: 600 12px var(--cond); letter-spacing: .12em; }
.pass-head strong { font: 700 24px var(--cond); }
.pass-pts { text-align: right; font: 700 26px var(--pixel); color: var(--neon); }
.pass-pts small { font: 600 12px var(--cond); color: var(--dim); margin-left: 4px; }
.pass-note { color: var(--dim); font-size: 13px; margin: 8px 0 12px; }
.badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.badges li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid transparent; font-size: 14px; color: var(--faint); }
.badges li .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #151e31; font: 700 15px var(--pixel); color: var(--faint); flex: none; }
.badges li small { display: block; font-size: 12px; }
.badges li.got { color: var(--text); border-color: rgba(74,222,128,.25); }
.badges li.got .ico { background: rgba(74,222,128,.14); color: var(--neon); }
.badges li.got small { color: var(--dim); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 110px 0 70px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 70% 45%, rgba(74,222,128,.13), transparent 70%),
  radial-gradient(40% 40% at 15% 80%, rgba(139,124,246,.12), transparent 70%),
  linear-gradient(var(--bg-top), var(--bg)); }
.hero-bg::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(34,48,73,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(34,48,73,.35) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--border); background: rgba(17,26,44,.7); color: var(--dim); font: 600 15px var(--cond); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 22px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.title { font-size: clamp(56px, 9.5vw, 128px); line-height: .92; margin: 0 0 24px; text-shadow: 0 6px 0 rgba(0,0,0,.35); }
.title > span:first-child { color: var(--neon); }
.title .neon { display: inline-block; animation: flicker 6s infinite; }
.tagline { font-size: clamp(20px, 2.4vw, 30px); letter-spacing: .12em; color: var(--text); margin: -8px 0 24px; }
.tagline span { color: var(--neon); }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--dim); max-width: 34em; margin: 0 0 32px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-stats { display: flex; gap: 36px; margin: 44px 0 0; }
.hero-stats dt { font: 700 30px var(--pixel); color: var(--text); }
.hero-stats dd { margin: 0; color: var(--faint); font: 600 14px var(--cond); letter-spacing: .08em; text-transform: uppercase; }
.scroll-cue { position: absolute; bottom: 22px; left: 50%; translate: -50%; width: 26px; height: 42px; border: 2px solid var(--border); border-radius: 14px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; background: var(--neon); border-radius: 2px; animation: cue 1.6s infinite; }
@keyframes cue { 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- phone ---------- */
.phone { position: relative; width: min(360px, 100%); aspect-ratio: 9 / 18.6; margin-inline: auto; border-radius: 48px; padding: 12px;
  background: linear-gradient(145deg, #2a3650, #10182a 40%, #1f2a40); box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px #34425f, 0 0 80px rgba(74,222,128,.14); }
.phone-notch { position: absolute; top: 22px; left: 50%; translate: -50%; width: 96px; height: 28px; border-radius: 20px; background: #000; z-index: 3; }
.phone-screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
.hero-phone { width: min(340px, 100%, calc((100svh - 170px) * 9 / 18.6)); transform: rotate(3deg); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 50% { transform: rotate(2deg) translateY(-12px); } }
.run-hud { display: grid; grid-template-columns: repeat(3, 1fr); padding: 58px 18px 10px; background: var(--panel); }
.run-hud small, .run-foot small, .run-level small, .hud-cell small, .hud-level small { display: block; color: var(--dim); font: 600 11px var(--cond); letter-spacing: .1em; }
.run-hud b { font: 700 clamp(12px, 4.2cqi, 17px) var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.run-hud { gap: 6px; }
.phone-screen { container-type: inline-size; }
.run-level { display: flex; align-items: center; gap: 10px; padding: 4px 18px 12px; background: var(--panel); border-bottom: 1px solid var(--border); }
.run-level .bar { flex: 1; }
.hero-canvas { flex: 1; width: 100%; min-height: 0; }
.run-foot { display: grid; grid-template-columns: 1fr 1fr; margin: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.run-foot > div + div { border-left: 1px solid var(--border); padding-left: 16px; }
.run-foot b { display: flex; align-items: center; gap: 6px; font: 700 22px var(--sans); }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--border); background: #0c1323; padding: 14px 0; }
.ticker-track { display: flex; gap: 28px; width: max-content; animation: tick 40s linear infinite; font: 700 20px var(--pixel); color: var(--dim); }
.ticker-track i { color: var(--neon); font-style: normal; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 10vw, 130px) 0; position: relative; }
.sec-head { max-width: 760px; margin-bottom: 40px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2, .goal h2, .privacy h2 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.02; margin: 0 0 18px; }
.sec-head p { color: var(--dim); font-size: 18px; margin: 0; }
.kicker { display: inline-block; font: 700 15px var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); margin: 0 0 12px; }

/* ---------- game ---------- */
.game-card { border: 1px solid var(--border); border-radius: 24px; background: var(--panel); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(74,222,128,.06); }
.game-hud { display: grid; grid-template-columns: repeat(6, 1fr) 1.6fr; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.hud-cell b { font: 700 22px var(--sans); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hud-cell b.pop { animation: numpop .45s; }
@keyframes numpop { 40% { transform: scale(1.18); color: var(--neon-bright); } }
.hud-rank b { font-size: 18px; }
.shield { width: 14px; height: 16px; background: linear-gradient(#c79a6b, #7b5433); clip-path: polygon(50% 0, 100% 18%, 92% 70%, 50% 100%, 8% 70%, 0 18%); }
.hud-level { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; }
.hud-level .bar { width: 100%; height: 8px; }
.hud-level small:last-child { grid-column: 2; text-align: right; color: var(--faint); }
.game-stage { position: relative; }
.game-canvas { width: 100%; height: clamp(420px, 62vh, 620px); touch-action: none; cursor: crosshair; }
.intro, .captured { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(7,10,18,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 16px; }
.intro[hidden], .captured[hidden] { display: none; }
.intro-card, .captured-card { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 26px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: pop-in .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop-in { from { transform: scale(.85); opacity: 0; } }
.intro-sprites { display: flex; align-items: end; justify-content: center; gap: 10px; margin-bottom: 8px; }
.intro-loop { width: 120px; height: 60px; }
.intro-loop path { fill: none; stroke: var(--neon); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; filter: drop-shadow(0 0 5px var(--neon)); animation: drawloop 2.4s ease-in-out infinite; }
@keyframes drawloop { 60%, 100% { stroke-dashoffset: 0; } }
.intro-card h3 { font-size: 30px; margin: 6px 0 12px; }
.intro-card ol { text-align: left; color: var(--dim); margin: 0 0 20px; padding-left: 22px; }
.intro-card li { margin: 4px 0; }
.intro-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.captured { background: rgba(7,10,18,.35); }
.captured-card h3 { font-size: 34px; margin: 0; }
.captured-card > p { margin: 2px 0 18px; color: var(--dim); }
.captured-card dl { margin: 0; text-align: left; }
.captured-card dl div { display: flex; justify-content: space-between; padding: 8px 0; font: 600 16px var(--cond); letter-spacing: .06em; }
.captured-card dt small { color: var(--dim); }
.captured-card dd { margin: 0; color: var(--neon); font-weight: 700; }
.cap-total { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--border); margin: 10px 0 18px; padding-top: 14px; font: 700 18px var(--cond); color: var(--neon); letter-spacing: .06em; }
.cap-total b { margin-left: auto; font: 700 40px var(--sans); }
.game-toast { position: absolute; left: 50%; bottom: 18px; translate: -50% 20px; opacity: 0; pointer-events: none; transition: .3s; background: rgba(17,26,44,.95); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px; font-weight: 600; font-size: 15px; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.game-toast.show { opacity: 1; translate: -50% 0; }
.game-toast.warn { border-color: var(--danger); color: #ffc2ca; }
.game-toast.good { border-color: var(--neon); }
.game-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 28px; padding: 16px 20px; border-top: 1px solid var(--border); background: #0f1728; }
.tool-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tool-label { color: var(--dim); font: 600 13px var(--cond); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.coins { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); }
.coins i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe08a, var(--gold) 60%, #b7811b); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: 600 15px var(--cond); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: .15s; }
.chip svg { width: 16px; height: 16px; fill: currentColor; }
.chip:hover { border-color: var(--neon); color: var(--neon-bright); }
.chip-warn:hover { border-color: var(--purple); color: #c4bbff; }
.chip-quiet { background: transparent; color: var(--dim); }
.swatches { display: flex; gap: 8px; }
.swatch { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--bg); outline: 2px solid transparent; cursor: pointer; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); transition: .15s; }
.swatch[aria-pressed="true"] { outline-color: var(--c); transform: scale(1.1); }
.swatch.locked { filter: grayscale(1) brightness(.45); box-shadow: none; cursor: not-allowed; }
.swatch.locked::after { content: ""; position: absolute; inset: 8px 9px 7px; background: #cfd6e3; clip-path: polygon(20% 40%, 20% 20%, 35% 5%, 65% 5%, 80% 20%, 80% 40%, 100% 40%, 100% 100%, 0 100%, 0 40%, 32% 40%, 32% 24%, 40% 16%, 60% 16%, 68% 24%, 68% 40%); }
.swatch.just { animation: unlockpop .8s; }
@keyframes unlockpop { 30% { transform: scale(1.5); box-shadow: 0 0 30px var(--c); } }
.powerups { display: flex; gap: 8px; }
.pu { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: 600 14px var(--cond); letter-spacing: .04em; cursor: pointer; }
.pu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.pu small { color: var(--gold); }
.pu:disabled { opacity: .45; cursor: not-allowed; }
.pu.active { border-color: var(--neon); color: var(--neon-bright); box-shadow: var(--glow); }
.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.rule { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: rgba(17,26,44,.5); color: var(--dim); font-size: 14px; line-height: 1.45; }
.rule b { font-size: 24px; color: var(--neon); min-width: 64px; white-space: nowrap; }

/* ---------- how ---------- */
.how { background: linear-gradient(transparent, rgba(17,26,44,.55) 20%, rgba(17,26,44,.55) 80%, transparent); }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .4s; max-width: 30em; }
.step.is-on { opacity: 1; }
.step-n { font-size: 60px; color: var(--neon); line-height: 1; text-shadow: 0 0 24px rgba(74,222,128,.4); }
.step h3 { font: 700 40px/1.1 var(--cond); letter-spacing: .02em; text-transform: uppercase; margin: 10px 0 12px; }
.step p { color: var(--dim); font-size: 18px; margin: 0; }
.how-phone-wrap { position: sticky; top: 12vh; height: 76vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.how-phone { width: auto; height: min(640px, 70vh); }
.screen-dots { display: flex; gap: 8px; }
.screen-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--border); transition: .3s; }
.screen-dots i.on { width: 26px; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.screens { font-size: 13px; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: scale(.97); transition: opacity .45s, transform .45s; pointer-events: none; }
.screen.is-on { opacity: 1; transform: none; }
.screen canvas[data-sprite] { position: absolute; }
.tabbar { margin-top: auto; display: flex; justify-content: space-around; padding: 12px 8px 22px; border-top: 1px solid var(--border); background: var(--panel); }
.tabbar i { font-style: normal; font-size: 11px; color: var(--faint); }
.tabbar i.on { color: var(--neon); }
.fake-btn { margin: 14px 20px; padding: 13px; text-align: center; border-radius: 12px; background: var(--btn); color: #062012; font: 700 15px var(--cond); letter-spacing: .08em; box-shadow: 0 6px 20px rgba(52,211,153,.3); }
.s-home { text-align: center; padding-top: 56px; background: radial-gradient(80% 50% at 50% 55%, rgba(74,222,128,.08), transparent); }
.s-home h4 { font-size: 44px; line-height: .95; margin: 8px 0 4px; }
.s-home h6 { font-size: 14px; letter-spacing: .12em; margin: 0 0 12px; }
.s-home p { color: var(--dim); margin: 0; }
.s-home-board { position: relative; flex: 1; margin: 30px 26px 0; }
.s-walker { left: 10%; top: 0; animation: patrol 6s linear infinite; z-index: 2; }
@keyframes patrol { 0% { left: 6%; top: 2%; } 25% { left: 74%; top: 2%; } 50% { left: 78%; top: 56%; } 75% { left: 4%; top: 56%; } 100% { left: 6%; top: 2%; } }
.neon-box { position: absolute; inset: 22% 4% 12%; border: 4px solid var(--neon); border-radius: 12px; box-shadow: var(--glow), inset 0 0 22px rgba(74,222,128,.25); background: rgba(12,20,38,.7); transform: perspective(400px) rotateX(10deg); }
.neon-box.filled { background: rgba(74,222,128,.22); animation: capglow 2s infinite; }
@keyframes capglow { 50% { box-shadow: 0 0 34px rgba(74,222,128,.8), inset 0 0 30px rgba(74,222,128,.4); } }
.s-run { background: #0c1424; }
.s-run .run-hud { padding-top: 54px; }
.run-hud.small b { font-size: 14px; }
.run-level.small small:last-child { white-space: nowrap; }
.s-run-map { position: relative; flex: 1; background: repeating-linear-gradient(0deg, transparent 0 34px, #16213a 34px 37px), repeating-linear-gradient(90deg, transparent 0 44px, #16213a 44px 47px); }
.s-run-map svg { position: absolute; inset: 6% 4%; width: 92%; height: 88%; }
.s-run-map path { fill: rgba(139,124,246,.08); stroke: var(--neon); stroke-width: 5; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--neon)); stroke-dasharray: 760; stroke-dashoffset: 760; }
.screen.is-on .s-run-map path { animation: drawrun 4s ease-in-out infinite; }
@keyframes drawrun { 80%, 100% { stroke-dashoffset: 110; } }
.run-walker { left: 12%; top: 14%; z-index: 2; }
.screen.is-on .run-walker { animation: runwalk 4s ease-in-out infinite; }
@keyframes runwalk { 0% { left: 13%; top: 16%; } 22% { left: 68%; top: 16%; } 42% { left: 75%; top: 50%; } 55% { left: 56%; top: 52%; } 70% { left: 56%; top: 76%; } 88%, 100% { left: 14%; top: 76%; } }
.s-cap { text-align: center; padding-top: 60px; }
.s-cap h4 { font-size: 30px; margin: 0; }
.s-cap > p { color: var(--dim); margin: 2px 0 0; }
.s-cap-board { position: relative; height: 34%; margin: 0 20px; }
.s-cap-board .neon-box { inset: 14% 2% 4%; }
.plus { position: absolute; font: 700 14px var(--pixel); color: var(--neon-bright); animation: rise 2s infinite; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }
.s-cap-rows { margin: 16px 22px 0; text-align: left; }
.s-cap-rows div { display: flex; justify-content: space-between; padding: 5px 0; font: 600 14px var(--cond); letter-spacing: .06em; }
.s-cap-rows dd { margin: 0; color: var(--neon); }
.s-cap-rows .tot { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; color: var(--neon); }
.s-cap-rows .tot dd { font: 700 26px var(--sans); }
.s-map { padding-top: 52px; }
.s-map h5 { text-align: center; font: 700 18px var(--cond); letter-spacing: .08em; margin: 0 0 10px; }
.s-map-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 16px 12px; border-block: 1px solid var(--border); }
.s-map-stats small { display: block; font: 600 10px var(--cond); color: var(--dim); letter-spacing: .1em; }
.s-map-stats b { font: 700 18px var(--sans); }
.s-map-board { position: relative; flex: 1; background: #0c1424; overflow: hidden; }
.s-map-board svg { width: 100%; height: 100%; }
.s-map-goal { margin: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.s-map-goal small { display: block; font: 600 10px var(--cond); letter-spacing: .1em; color: var(--dim); }
.s-map-goal b { display: block; margin-bottom: 6px; }
.s-map-goal .bar { width: 100%; }

/* ---------- trailer ---------- */
.video-frame { position: relative; max-width: 1040px; margin: 0 auto; padding: 10px; border-radius: 28px; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 0 80px rgba(74,222,128,.1); }
.video-frame::before { content: ""; position: absolute; inset: -2px; border-radius: 30px; padding: 2px; background: linear-gradient(135deg, var(--neon), transparent 30%, transparent 70%, var(--purple)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; background: #000; }

/* ---------- goal ---------- */
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.goal p { color: var(--dim); font-size: 18px; }
.slider { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 32px 0 20px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r); background: var(--panel); }
.slider span { color: var(--dim); font: 600 14px var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.slider output { font: 700 28px var(--pixel); color: var(--neon); }
.slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--neon); height: 28px; }
.goal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.goal-stats div { padding: 14px; border: 1px solid var(--border); border-radius: 14px; }
.goal-stats dt { color: var(--dim); font: 600 12px var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.goal-stats dd { margin: 0; font: 700 20px var(--sans); white-space: nowrap; }
.goal-board { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 0 120px rgba(74,222,128,.08); }
.goal-board svg { width: 100%; height: 100%; }
.goal-ring { fill: rgba(74,222,128,.05); stroke: var(--neon); stroke-width: 3; stroke-dasharray: 10 8; filter: drop-shadow(0 0 6px var(--neon)); transition: r .5s cubic-bezier(.2,.8,.2,1); animation: ringspin 30s linear infinite; transform-origin: 200px 200px; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.goal-walker { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -80%); }
#goalEnemies image { transition: opacity .4s; }

/* ---------- rewards ---------- */
.tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); margin-bottom: 24px; }
.tabs button { border: 0; background: transparent; color: var(--dim); padding: 10px 22px; border-radius: 10px; font: 600 16px var(--cond); letter-spacing: .05em; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.panel-note { color: var(--faint); font-size: 14px; margin: 14px 0 0; }
.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.avatar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 10px 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; color: var(--text); font: inherit; transition: .2s; }
.avatar:hover { transform: translateY(-4px); border-color: #34425f; }
.avatar[aria-pressed="true"] { border-color: var(--neon); box-shadow: var(--glow); }
.avatar .stage { height: 110px; display: grid; place-items: end center; }
.avatar.locked canvas { filter: brightness(.55) saturate(.6); }
.avatar .lock { position: absolute; top: 60px; left: 50%; translate: -50%; width: 30px; height: 30px; border-radius: 50%; background: rgba(139,124,246,.85); display: grid; place-items: center; }
.avatar .lock svg { width: 14px; height: 14px; fill: #fff; }
.avatar strong { font-size: 14px; }
.avatar small { color: var(--dim); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.trail-grid, .pu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trail-card, .pu-card { padding: 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--panel); }
.trail-card svg { width: 100%; height: 70px; }
.trail-card path { fill: none; stroke: var(--c); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--c)); stroke-dasharray: 300; animation: trailrun 3s linear infinite; }
@keyframes trailrun { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.trail-card div { display: flex; justify-content: space-between; margin-top: 8px; }
.trail-card small, .pu-card small { color: var(--dim); display: inline-flex; align-items: center; gap: 4px; }
.pu-card .pu-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(74,222,128,.12); color: var(--neon); margin-bottom: 12px; }
.pu-card .pu-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; }
.pu-card h4 { margin: 0 0 4px; font: 700 22px var(--cond); letter-spacing: .03em; }
.pu-card p { margin: 0 0 12px; color: var(--dim); font-size: 15px; }
.ladder { margin-top: 56px; padding: 24px; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); }
.ladder-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ladder-head h3 { margin: 0; font: 700 24px var(--cond); text-transform: uppercase; letter-spacing: .04em; }
.ladder-head span { color: var(--dim); }
.ladder-head b { color: var(--neon); }
.ladder-track { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; }
.rung { position: relative; padding: 12px 4px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); text-align: center; font: 600 13px var(--cond); color: var(--faint); letter-spacing: .03em; }
.rung i { display: block; width: 18px; height: 20px; margin: 0 auto 6px; background: var(--tc); clip-path: polygon(50% 0, 100% 18%, 92% 70%, 50% 100%, 8% 70%, 0 18%); opacity: .4; }
.rung small { display: block; font-size: 11px; color: var(--faint); }
.rung.reached { color: var(--text); border-color: color-mix(in srgb, var(--tc) 50%, var(--border)); }
.rung.reached i { opacity: 1; filter: drop-shadow(0 0 6px var(--tc)); }
.rung.current { box-shadow: 0 0 0 2px var(--neon), var(--glow); color: var(--neon-bright); }

/* ---------- bestiary ---------- */
.beasts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.beast { text-align: center; padding: 26px 14px 20px; border-radius: 20px; border: 1px solid var(--border); background: var(--panel); transition: .25s; cursor: pointer; color: var(--text); font: inherit; }
.beast:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--c); box-shadow: 0 0 30px color-mix(in srgb, var(--c) 30%, transparent); }
.beast .stage { height: 70px; display: grid; place-items: center; }
.beast canvas { margin: auto; }
.beast h4 { margin: 12px 0 2px; font: 700 22px var(--cond); text-transform: uppercase; letter-spacing: .04em; color: var(--c); }
.beast p { margin: 0; color: var(--dim); font-size: 14px; }
.beast .pts { display: inline-block; margin-top: 10px; font: 700 15px var(--pixel); color: var(--neon); }
.beast.zap { animation: zap .5s; }
@keyframes zap { 30% { transform: scale(.9); filter: brightness(2); } }

/* ---------- privacy / faq / join ---------- */
.priv-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.priv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.priv-list li { position: relative; padding: 18px 20px 18px 56px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); color: var(--dim); }
.priv-list li::before { content: ""; position: absolute; left: 20px; top: 22px; width: 18px; height: 18px; border-radius: 5px; background: var(--neon); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 70%); }
details { border: 1px solid var(--border); border-radius: 16px; background: var(--panel); margin-bottom: 10px; }
summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 600; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 700 22px var(--pixel); color: var(--neon); line-height: 1; transition: .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0; padding: 0 22px 20px; color: var(--dim); }
.join-card { position: relative; text-align: center; padding: clamp(40px, 7vw, 80px) 24px; border-radius: 32px; border: 1px solid var(--border); overflow: hidden;
  background: radial-gradient(60% 80% at 50% 0%, rgba(74,222,128,.18), transparent 70%), var(--panel); }
.join-card::before { content: ""; position: absolute; inset: 18px; border: 3px solid rgba(74,222,128,.5); border-radius: 22px; box-shadow: var(--glow); pointer-events: none; }
.join-sprites { display: flex; justify-content: center; align-items: end; gap: 28px; margin-bottom: 20px; }
.join-card h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; margin: 0 0 14px; }
.join-card > p { color: var(--dim); font-size: 18px; margin: 0 0 26px; }
.join-form { position: relative; display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.join-form input { flex: 1; min-width: 0; height: 54px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; }
.join-form input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(74,222,128,.2); }
.join-msg { min-height: 1.6em; margin: 14px 0 0; color: var(--neon); font-weight: 600; }
.foot { border-top: 1px solid var(--border); padding: 28px 0 40px; color: var(--dim); font-size: 14px; }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.foot .pixel { font-size: 18px; color: var(--text); }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: grid; gap: 10px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; min-width: 260px; border-radius: 14px; background: rgba(17,26,44,.96); border: 1px solid var(--neon); box-shadow: var(--glow), 0 20px 40px rgba(0,0,0,.5); animation: toastin .5s cubic-bezier(.2,1.4,.4,1), toastout .4s 3.6s forwards; }
.toast .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(245,185,46,.15); }
.toast .ico svg { width: 22px; height: 22px; fill: var(--gold); }
.toast small { display: block; color: var(--neon); font: 700 11px var(--cond); letter-spacing: .14em; }
.toast b { display: block; font-size: 15px; }
.toast span { color: var(--dim); font-size: 13px; }
@keyframes toastin { from { transform: translateX(-120%); } }
@keyframes toastout { to { transform: translateX(-120%); opacity: 0; } }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .links { display: none; }
  .nav { justify-content: space-between; }
  .game-hud { grid-template-columns: repeat(3, 1fr); }
  .hud-level { grid-column: 1 / -1; }
  .rules { grid-template-columns: 1fr 1fr; }
  .avatar-grid { grid-template-columns: repeat(3, 1fr); }
  .beasts { grid-template-columns: repeat(3, 1fr); }
  .ladder-track { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 860px) {
  .hero { padding-top: 96px; }
  .hero-grid, .goal-grid, .priv-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-phone { width: min(300px, 80%); }
  .hero-stats { gap: 24px; }
  .how-grid { grid-template-columns: 1fr; gap: 0; }
  .how-phone-wrap { order: -1; top: 64px; height: auto; z-index: 4; padding: 8px 0 14px; background: linear-gradient(#0d1425 88%, transparent); gap: 10px; }
  .how-phone { height: 620px; zoom: .6; }
  .step { min-height: 58vh; justify-content: flex-start; padding-top: 8px; }
  .goal-stats { grid-template-columns: 1fr 1fr; }
  .trail-grid, .pu-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nav { gap: 8px; }
  .brand span, .nav .btn-sm { display: none; }
  .pass-bar { width: 40px; }
  .hero-stats dt { font-size: 24px; }
  .game-hud { padding: 12px 14px; gap: 8px; }
  .hud-cell b { font-size: 18px; }
  .game-canvas { height: 64vh; }
  .game-tools { padding: 14px; }
  .rules { grid-template-columns: 1fr; }
  .avatar-grid { grid-template-columns: repeat(2, 1fr); }
  .beasts { grid-template-columns: repeat(2, 1fr); }
  .ladder-track { grid-template-columns: repeat(4, 1fr); }
  .join-form { flex-direction: column; }
  .tabs { display: flex; }
  .tabs button { flex: 1; padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
}
.foot-credit { display: inline-flex; align-items: center; gap: 12px; }
.foot-credit a { color: var(--dim); text-decoration: none; transition: color .15s; }
.foot-credit a:hover { color: var(--neon); }
.foot-social { display: inline-flex; padding: 4px; }