/* $CHIP website · "follow the cat": fixed cinematic stage + 3D Chip + seven themed chapters. Dark mode only. */
@font-face { font-family: Cinzel; src: url(/fonts/cinzel.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Outfit; src: url(/fonts/outfit.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

/* theme colours animate between chapters */
@property --a1 { syntax: '<color>'; inherits: true; initial-value: #ffb23e; }
@property --a2 { syntax: '<color>'; inherits: true; initial-value: #ff8a1c; }
@property --a3 { syntax: '<color>'; inherits: true; initial-value: #ffe0a0; }
@property --bg { syntax: '<color>'; inherits: true; initial-value: #050404; }
:root { --ink: #f6efe3; --mut: #c9b9a2; --a1: #ffb23e; --a2: #ff8a1c; --a3: #ffe0a0; --bg: #050404; --line: rgba(255, 190, 90, .22);
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  transition: --a1 .9s, --a2 .9s, --a3 .9s, --bg .9s; }
html[data-theme=roof]   { --a1: #ffb23e; --a2: #ff8a1c; --a3: #ffe0a0; --bg: #050404; }
html[data-theme=alley]  { --a1: #ff9b3d; --a2: #ff4d2e; --a3: #ffd2a1; --bg: #0a0403; }
html[data-theme=cosmos] { --a1: #ffe6b0; --a2: #c7a35a; --a3: #fff6e0; --bg: #03030a; }
html[data-theme=glitch] { --a1: #ff3b3b; --a2: #ffb23e; --a3: #ffffff; --bg: #000; }
html[data-theme=vault]  { --a1: #ffd25e; --a2: #e8a019; --a3: #fff1c2; --bg: #0b0803; }
html[data-theme=portal] { --a1: #ffc46b; --a2: #ff8a1c; --a3: #fff3da; --bg: #050404; }

* { box-sizing: border-box; }
html { background: #050404; color: var(--ink); scrollbar-width: thin; scrollbar-color: var(--a2) #050404; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); font: 400 17px/1.55 Outfit, system-ui, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
body.loading { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
em { font-style: normal; color: var(--a1); text-shadow: 0 0 28px color-mix(in srgb, var(--a1) 55%, transparent); }
::selection { background: var(--a1); color: #000; }

/* ---------- preloader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: #050404; display: grid; place-content: center; justify-items: center; gap: 14px; transition: clip-path 1s var(--ease), visibility 0s 1s; clip-path: circle(150% at 50% 50%); }
.loader.done { clip-path: circle(0% at 50% 45%); visibility: hidden; }
.ld-eyes { display: flex; gap: 34px; }
.ld-eyes i { width: 38px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 55%, #fff6d0 0 8%, #ffcf55 22%, #ff8a1c 70%); box-shadow: 0 0 30px #ffb23e, 0 0 70px #ff8a1c; position: relative; animation: blink 2.4s infinite; }
.ld-eyes i::after { content: ''; position: absolute; left: 47%; top: 8%; width: 6%; height: 84%; border-radius: 9px; background: #120800; }
@keyframes blink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
.ld-n { font: 900 clamp(64px, 14vw, 150px)/1 Cinzel; background: linear-gradient(180deg, #fff3cf, #ffb23e 60%, #c35a00); -webkit-background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.ld-t { letter-spacing: .5em; text-transform: uppercase; font-size: 12px; color: var(--mut); }

/* ---------- fixed stage: worlds crossfade, the iris wipes between themes ---------- */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
.world { position: absolute; inset: -4%; opacity: 0; transition: opacity 1.1s var(--ease), transform 1.6s var(--ease); transform: scale(1.12); will-change: opacity, transform; }
.world.on { opacity: 1; transform: scale(1); }
.world img, .world video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.world video { opacity: 0; transition: opacity .8s; }
.world video.ready { opacity: 1; }
.glitchw { background: radial-gradient(ellipse at 50% 40%, #2a0505, #000 70%); }
.glitchw::before, .glitchw::after { content: ''; position: absolute; inset: 0; }
.glitchw::before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.glitchw::after { background: linear-gradient(90deg, transparent 0 30%, rgba(255,59,59,.12) 30% 31%, transparent 31% 62%, rgba(255,178,62,.1) 62% 63%, transparent 63%); animation: gl-bars 3.2s steps(2) infinite; }
@keyframes gl-bars { 0% { transform: translateY(0); } 25% { transform: translateY(18vh); } 50% { transform: translateY(-30vh) scaleX(1.4); } 75% { transform: translateY(40vh); } }
.shade { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 30%, color-mix(in srgb, var(--bg) 82%, transparent) 100%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), transparent 22%, transparent 70%, color-mix(in srgb, var(--bg) 80%, transparent)); pointer-events: none; }
.iris { position: absolute; inset: 0; background: var(--a1); clip-path: circle(0% at 50% 50%); mix-blend-mode: overlay; pointer-events: none; }
.iris.go { animation: iris .9s var(--ease); }
@keyframes iris { 0% { clip-path: circle(0% at var(--ix, 50%) var(--iy, 50%)); opacity: .9; } 100% { clip-path: circle(140% at var(--ix, 50%) var(--iy, 50%)); opacity: 0; } }

/* 3D layer + 2D fallback cat */
.gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 2; pointer-events: none; }
.cat2d { position: fixed; z-index: 2; width: min(34vw, 260px); left: 70%; top: 52%; pointer-events: none; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--a1) 45%, transparent)); transform: translate(-50%, -50%); transition: opacity .6s; }
html.has3d .cat2d { opacity: 0; }

.grain { position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain .6s steps(3) infinite; }
@keyframes grain { 33% { transform: translate(3%, -2%); } 66% { transform: translate(-2%, 3%); } }

/* custom cursor (mouse only) */
.cursor { position: fixed; z-index: 60; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid var(--a1); pointer-events: none; mix-blend-mode: difference; transition: width .25s, height .25s, margin .25s, background .25s; display: none; }
html.fine .cursor { display: block; }
.cursor.big { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: color-mix(in srgb, var(--a1) 30%, transparent); }
.paw { position: fixed; z-index: 59; width: 16px; height: 16px; pointer-events: none; background: radial-gradient(circle at 50% 70%, var(--a1) 0 34%, transparent 36%), radial-gradient(circle at 20% 28%, var(--a1) 0 13%, transparent 15%), radial-gradient(circle at 50% 14%, var(--a1) 0 13%, transparent 15%), radial-gradient(circle at 80% 28%, var(--a1) 0 13%, transparent 15%); opacity: .7; animation: pawfade 1.1s var(--ease) forwards; }
@keyframes pawfade { to { opacity: 0; transform: scale(.4); } }

/* the way: progress trail on the left */
.way { position: fixed; z-index: 40; left: 18px; top: 18vh; bottom: 18vh; width: 40px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.way-line { position: relative; flex: 1; width: 2px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 4px, transparent 4px 10px); }
.way-line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--a3), var(--a1)); box-shadow: 0 0 12px var(--a1); }
#wayCat { position: absolute; left: 0; top: 0; width: 40px; height: 40px; transform: translateY(-50%); filter: drop-shadow(0 0 8px var(--a1)); }
#wayPct { position: absolute; bottom: -26px; font: 700 11px Outfit; letter-spacing: .1em; color: var(--a1); }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 45; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 18px; padding: 14px clamp(16px, 4vw, 40px); padding-top: max(14px, env(safe-area-inset-top)); transition: background .4s, backdrop-filter .4s; }
.nav.solid { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 20px Cinzel; letter-spacing: .04em; }
.brand img { width: 36px; height: 36px; filter: drop-shadow(0 0 10px var(--a1)); }
.links { display: flex; gap: 22px; margin-left: auto; }
.links a { text-decoration: none; color: var(--mut); font-weight: 600; font-size: 14px; position: relative; }
.links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px; background: var(--a1); transition: right .35s var(--ease); }
.links a:hover { color: var(--ink); } .links a:hover::after { right: 0; }
@media (max-width: 860px) { .links { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- buttons ---------- */
.btn { --h: 50px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--h); padding: 0 26px; border-radius: 99px; text-decoration: none; font: 800 16px Outfit; color: #1b0d00; background: linear-gradient(180deg, var(--a3), var(--a1) 55%, var(--a2)); box-shadow: 0 10px 34px color-mix(in srgb, var(--a2) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.6); overflow: hidden; isolation: isolate; transition: transform .3s var(--spring), box-shadow .3s; white-space: nowrap; }
.btn span { position: relative; z-index: 1; display: inline-block; }
.btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3.4s var(--ease) infinite; }
@keyframes shine { 60%, 100% { transform: translateX(120%); } }
.btn:hover { box-shadow: 0 16px 50px color-mix(in srgb, var(--a1) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.6); }
.btn.big { --h: 60px; font-size: 18px; padding: 0 34px; }
.btn.sm { --h: 40px; font-size: 14px; padding: 0 18px; }
.btn.ghost { color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(8px); }
.btn.ghost::before { display: none; }

/* ---------- chapters ---------- */
main { position: relative; z-index: 3; }
.ch { position: relative; padding: clamp(90px, 14vh, 160px) clamp(20px, 6vw, 90px); padding-left: max(clamp(20px, 6vw, 90px), 70px); }
@media (max-width: 760px) { .ch { padding-left: 20px; padding-right: 20px; } .way { left: 4px; width: 26px; } #wayCat { width: 26px; height: 26px; } #wayPct { display: none; } }
.eyebrow { font: 700 13px Outfit; letter-spacing: .32em; text-transform: uppercase; color: var(--a1); margin: 0 0 14px; }
.h2 { font: 900 clamp(42px, 7.4vw, 108px)/.94 Cinzel; margin: 0 0 22px; letter-spacing: -.01em; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.h3 { font: 800 clamp(22px, 2.6vw, 32px)/1.1 Cinzel; margin: 0 0 16px; }
.body { font-size: clamp(16px, 1.35vw, 19px); color: var(--mut); max-width: 560px; text-shadow: 0 2px 18px rgba(0,0,0,.9); }
.body.center { margin: 0 auto; text-align: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.split.rev .txt { order: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chips span { padding: 9px 16px; border-radius: 99px; background: rgba(0,0,0,.45); border: 1px solid var(--line); backdrop-filter: blur(8px); font-weight: 700; font-size: 14px; }

/* 0 · hero */
.hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 110px; }
.kick { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 8px 16px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--a1) 50%, transparent); background: color-mix(in srgb, var(--a1) 12%, transparent); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--a3); margin: 0 0 18px; backdrop-filter: blur(6px); }
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--a1); }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--a1); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.mega { margin: 0; font: 900 clamp(64px, 15vw, 230px)/.84 Cinzel; letter-spacing: -.02em; display: flex; flex-wrap: wrap; gap: 0 .22em; perspective: 900px; }
.mega .w { display: inline-flex; }
.mega .c { display: inline-block; transform-origin: 50% 80%; background: linear-gradient(180deg, #fff8e8 10%, var(--a3) 45%, var(--a1) 75%, var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(0,0,0,.6)); }
.mega .hot .c { background: linear-gradient(180deg, var(--a3), var(--a1) 40%, var(--a2)); -webkit-background-clip: text; background-clip: text; animation: hotglow 2.2s ease-in-out infinite alternate; }
@keyframes hotglow { to { filter: drop-shadow(0 0 26px var(--a1)) drop-shadow(0 8px 30px rgba(0,0,0,.6)); } }
.lead { font-size: clamp(17px, 1.7vw, 22px); max-width: 620px; color: var(--ink); text-shadow: 0 2px 20px #000; margin: 26px 0 30px; }
.lead b { color: var(--a1); }
.cta { display: flex; flex-wrap: wrap; gap: 14px; }
.stats { display: flex; gap: clamp(20px, 4vw, 48px); margin-top: 38px; }
.stats b { display: block; font: 900 clamp(28px, 3.4vw, 44px) Cinzel; color: var(--a3); }
.stats small { color: var(--mut); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }
.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--mut); }
.scroll-hint i { width: 22px; height: 36px; border: 2px solid var(--mut); border-radius: 12px; position: relative; }
.scroll-hint i::after { content: ''; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--a1); animation: wheel 1.6s infinite; }
@keyframes wheel { to { transform: translateY(12px); opacity: 0; } }

/* marquee bands */
.bandw { position: relative; z-index: 3; overflow: hidden; padding: 46px 0; margin: -46px 0; }
.band { position: relative; z-index: 3; overflow: hidden; padding: 14px 0; background: var(--a1); color: #1a0c00; transform: rotate(-3deg) scale(1.12); box-shadow: 0 0 60px color-mix(in srgb, var(--a1) 50%, transparent); }
.band.b2 { transform: rotate(2.5deg) scale(1.12); background: #000; color: var(--a1); border-block: 1px solid var(--a1); }
.band.b3 { transform: rotate(-2deg) scale(1.12); background: linear-gradient(90deg, var(--a2), var(--a1), var(--a3)); }
.band-t { display: flex; width: max-content; font: 900 clamp(20px, 3vw, 38px)/1 Cinzel; letter-spacing: .04em; white-space: nowrap; will-change: transform; animation: marq 26s linear infinite; }
.b2 .band-t { animation-direction: reverse; }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }
.band-t span { padding-right: .6em; }

/* 1 · journey (pinned) */
.journey { height: 320vh; padding: 0; }
.journey .pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.jl { position: absolute; margin: 0; font: 900 clamp(38px, 7vw, 110px)/1 Cinzel; text-align: center; padding: 0 20px; opacity: 0; color: var(--ink); text-shadow: 0 6px 50px #000, 0 0 30px rgba(0,0,0,.8); }
.jl.big { font-size: clamp(54px, 11vw, 170px); color: var(--a1); text-shadow: 0 0 40px color-mix(in srgb, var(--a1) 60%, transparent), 0 6px 50px #000; }

/* 2 · feed */
.feed { min-height: 120vh; display: grid; align-content: center; }
.ring-wrap { position: relative; width: min(78vw, 420px); aspect-ratio: 1; justify-self: center; display: grid; place-content: center; text-align: center; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .rb { stroke: rgba(255,255,255,.1); }
.ring .rf { stroke: var(--a1); stroke-linecap: round; stroke-dasharray: 603; stroke-dashoffset: 603; filter: drop-shadow(0 0 14px var(--a1)); }
.ring-n { font: 900 clamp(90px, 16vw, 180px)/1 Cinzel; color: var(--a3); text-shadow: 0 0 40px var(--a1); font-variant-numeric: tabular-nums; }
.ring-s { letter-spacing: .4em; text-transform: uppercase; color: var(--mut); font-size: 12px; }
.fishes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fishes img { position: absolute; width: clamp(50px, 7vw, 100px); opacity: .9; filter: drop-shadow(0 0 16px var(--a1)); }
.skew { will-change: transform; }

/* 3 · boosts: horizontal 3D track */
.boosts { padding: 0; height: 360vh; }
.hpin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 30px; perspective: 1200px; }
.htitle { padding-left: max(clamp(20px, 6vw, 90px), 70px); }
@media (max-width: 760px) { .htitle { padding-left: 20px; } }
.htrack { display: flex; gap: clamp(16px, 3vw, 36px); padding: 0 40vw 0 max(clamp(20px, 6vw, 90px), 70px); width: max-content; transform-style: preserve-3d; will-change: transform; }
.card3d { flex: none; width: clamp(240px, 26vw, 340px); padding: 26px; border-radius: 28px; background: linear-gradient(160deg, rgba(40,22,10,.82), rgba(10,6,4,.9)); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,160,.12); backdrop-filter: blur(10px); transform-style: preserve-3d; will-change: transform; }
.card3d img { width: 62%; margin: -6px auto 10px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)) drop-shadow(0 0 22px color-mix(in srgb, var(--a1) 40%, transparent)); transform: translateZ(50px); }
.card3d h3 { font: 800 26px Cinzel; margin: 0 0 8px; color: var(--a3); }
.card3d p { margin: 0; color: var(--mut); }
.card3d b { color: var(--a1); }

/* 4 · leagues: 3D orbit */
.leagues { height: 260vh; padding: 0; }
.lpin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; justify-items: center; text-align: center; padding: 0 20px; overflow: hidden; }
.orbit { position: relative; width: min(64vw, 320px); height: min(60vw, 300px); margin: 30px 0 40px; perspective: 1400px; transform-style: preserve-3d; }
.orbit .badge { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; transform-style: preserve-3d; backface-visibility: hidden; transition: filter .5s, opacity .5s; }
.badge img { width: 70%; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--a1) 55%, transparent)); }
.badge b { font: 800 22px Cinzel; color: var(--a3); }
.badge small { color: var(--mut); font-weight: 700; }

/* 5 · frens (glitch world) */
.frens { min-height: 130vh; display: grid; align-content: center; gap: 70px; }
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.glitch::before { color: #ff3b3b; transform: translate(-3px, 0); clip-path: inset(10% 0 55% 0); animation: gl1 2.6s steps(2) infinite; mix-blend-mode: screen; }
.glitch::after { color: #ffb23e; transform: translate(3px, 0); clip-path: inset(60% 0 8% 0); animation: gl2 2.1s steps(2) infinite; mix-blend-mode: screen; }
@keyframes gl1 { 0%, 82% { clip-path: inset(10% 0 85% 0); } 84% { clip-path: inset(40% 0 30% 0); transform: translate(-8px, 2px); } 88% { clip-path: inset(70% 0 5% 0); transform: translate(6px, -1px); } 92%, 100% { clip-path: inset(10% 0 85% 0); } }
@keyframes gl2 { 0%, 76% { clip-path: inset(80% 0 5% 0); } 78% { clip-path: inset(20% 0 60% 0); transform: translate(8px, -2px); } 84% { clip-path: inset(50% 0 20% 0); transform: translate(-6px, 1px); } 90%, 100% { clip-path: inset(80% 0 5% 0); } }
.h2.big { font-size: clamp(50px, 9vw, 140px); }
.table { border-radius: 24px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,59,59,.35); overflow: hidden; backdrop-filter: blur(10px); box-shadow: 0 0 60px rgba(255,59,59,.12); }
.tr { display: flex; justify-content: space-between; gap: 14px; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 600; }
.tr:last-child { border: 0; }
.tr b { font: 900 20px Outfit; color: var(--a2); font-variant-numeric: tabular-nums; }
.squads { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sq { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(0,0,0,.55); border: 1px solid var(--line); }
.sq .ava { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; color: #000; }
.sq small { display: block; color: var(--mut); }
.sq .n { margin-left: auto; font-weight: 900; color: var(--a1); }
.empty { color: var(--mut); }

/* 6 · board */
.board { min-height: 110vh; }
.boardg { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; margin-top: 30px; }
@media (max-width: 860px) { .boardg { grid-template-columns: 1fr; } }
.glass { padding: 26px; border-radius: 26px; background: rgba(4,4,12,.62); border: 1px solid rgba(255,230,176,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.glass h3 { font: 800 22px Cinzel; margin: 0 0 14px; color: var(--a3); }
.glass .mt { margin-top: 26px; }
.top { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.top li { counter-increment: r; display: flex; align-items: center; gap: 12px; padding: 11px 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.top li::before { content: counter(r); width: 28px; font: 900 18px Cinzel; color: var(--a1); }
.top li:nth-child(1)::before { content: '👑'; }
.top img { width: 30px; height: 30px; }
.top .nm { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .sc { font: 900 18px Outfit; color: var(--a3); font-variant-numeric: tabular-nums; }
.lbars { display: grid; gap: 10px; }
.lbar { display: grid; grid-template-columns: 26px 80px 1fr 50px; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.lbar img { width: 26px; }
.lbar i { height: 8px; border-radius: 9px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.lbar i::after { content: ''; position: absolute; inset: 0; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--a2), var(--a1)); border-radius: 9px; }
.feedl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.feedl li { display: flex; gap: 8px; } .feedl li span { margin-left: auto; color: var(--mut); }

/* 7 · airdrop */
.airdrop { min-height: 140vh; display: grid; align-content: center; justify-items: center; text-align: center; }
.vault-c { display: grid; justify-items: center; }
.pool { display: grid; gap: 4px; margin: 10px 0 30px; padding: 26px 40px; border-radius: 30px; background: rgba(12,8,2,.6); border: 1px solid color-mix(in srgb, var(--a1) 45%, transparent); backdrop-filter: blur(12px); box-shadow: 0 0 80px color-mix(in srgb, var(--a1) 25%, transparent); }
.pool b { font: 900 clamp(40px, 7vw, 92px)/1 Cinzel; background: linear-gradient(180deg, #fff6d8, var(--a1) 55%, var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.pool small { letter-spacing: .3em; text-transform: uppercase; color: var(--mut); font-size: 12px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; text-align: left; }
.ticks li { padding: 10px 16px 10px 40px; border-radius: 14px; background: rgba(0,0,0,.5); position: relative; font-weight: 600; backdrop-filter: blur(6px); }
.ticks li::before { content: '✦'; position: absolute; left: 16px; color: var(--a1); }

/* 8 · play: portal + phone */
.play { min-height: 120vh; display: grid; align-content: center; }
.phone-wrap { perspective: 1400px; justify-self: center; }
.phone { position: relative; width: min(72vw, 320px); aspect-ratio: 780 / 1688; border-radius: 46px; padding: 12px; background: linear-gradient(145deg, #2a1d10, #0a0705); box-shadow: 0 0 0 2px rgba(255,190,90,.25), 0 50px 120px rgba(0,0,0,.7), 0 0 80px color-mix(in srgb, var(--a1) 30%, transparent); transform: rotateY(-16deg) rotateX(6deg) rotateZ(2deg); transform-style: preserve-3d; will-change: transform; }
.phone .notch { position: absolute; z-index: 3; top: 20px; left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 20px; background: #000; }
.phone-shot, .phone-live, .phone-live iframe { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 36px; object-fit: cover; border: 0; }
.phone-live iframe { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s; }
.phone-live iframe.on { opacity: 1; }

/* 9 · faq + final */
.faq { min-height: 100vh; }
.faql { display: grid; gap: 12px; max-width: 820px; margin-top: 20px; }
.faql details { border-radius: 18px; background: rgba(0,0,0,.6); border: 1px solid var(--line); backdrop-filter: blur(10px); padding: 0 22px; }
.faql summary { cursor: pointer; padding: 18px 0; font-weight: 800; font-size: 18px; list-style: none; display: flex; justify-content: space-between; }
.faql summary::after { content: '+'; color: var(--a1); font-size: 24px; line-height: 1; transition: transform .3s; }
.faql details[open] summary::after { transform: rotate(45deg); }
.faql p { margin: 0 0 18px; color: var(--mut); }
.final { text-align: center; padding: 120px 0 60px; display: grid; justify-items: center; gap: 30px; }
.mega2 { margin: 0; font: 900 clamp(54px, 12vw, 190px)/.85 Cinzel; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .2em; }
.mega2 span { background: linear-gradient(180deg, #fff8e8, var(--a1) 70%, var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 30px 0 10px; border-top: 1px solid var(--line); color: var(--mut); font-size: 13px; }

/* scroll reveals (JS adds .in) */
.rv { opacity: 0; transform: translateY(50px) rotateX(-25deg); transform-origin: 50% 100%; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .grain, .glitchw::after, .btn::before { animation: none; }
  .rv { opacity: 1; transform: none; }
}

/* phones: keep it smooth (no full-screen animated grain, no animated filters on the big title) */
@media (pointer: coarse), (max-width: 760px) {
  .grain { animation: none; opacity: .05; }
  .mega .hot .c { animation: none; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--a1) 60%, transparent)); }
  .btn::before { animation-duration: 6s; }
  .glitchw::after { animation: none; }
}

/* off-screen chapters: animations pause (smooth phones) */
.off *, .off *::before, .off *::after { animation-play-state: paused !important; }
@media (pointer: coarse), (max-width: 760px) { .brand .glitch::before, .brand .glitch::after { display: none; } }