/* Grand Theft Launchpad: layout v2 "cinematic panels" (docs/STYLE_BIBLE.md). Vice City at dusk, Unbounded + Inter.
   The home is a deck of full-viewport panels; the scroll-linked curtain is driven by --e (enter) and --c (cover) per slot, animated
   by CSS view() timelines (html.sda) or written by /js/deck.js. Every motion is transform or opacity. */
@property --e{syntax:'<number>';inherits:true;initial-value:1}
@property --c{syntax:'<number>';inherits:true;initial-value:0}
:root{
  --ink:#0b0616;--bg:#120a22;--bg2:#2a0f4a;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.2);--glass:rgba(18,10,34,.62);
  --text:#fff5fb;--soft:#ecdff7;--muted:#b9a7cc;--dim:#8d7ba3;
  --pink:#ff5fa2;--hot:#f5338d;--orange:#ffb347;--coral:#ff7b5c;--violet:#7c3aed;--lav:#c7a1ff;--teal:#38bdf8;--palm:#34d399;--red:#ff6b7d;
  --sunset:linear-gradient(180deg,#7c3aed 0%,#ff5fa2 55%,#ffb347 100%);
  --neon:linear-gradient(100deg,#ff5fa2 0%,#ff7b5c 38%,#ffb347 68%,#c7a1ff 100%);
  --display:'Unbounded',system-ui,sans-serif;--body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:ui-monospace,'Cascadia Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --padx:clamp(20px,7vw,120px);--padr:clamp(20px,9vw,150px);--top:clamp(112px,14vh,140px);--hdr:72px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--ink);color:var(--text);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1100px 520px at 85% -8%,rgba(124,58,237,.3),transparent 62%),radial-gradient(1400px 520px at 50% 112%,rgba(255,123,92,.18),transparent 62%),linear-gradient(180deg,#120a22,#1b0d33 50%,#0b0616)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,h5{margin:0;font-family:var(--display);font-weight:700}
b,strong{font-weight:700}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.muted{color:var(--muted)}.none{color:var(--dim)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes deck-e{from{--e:0}to{--e:1}}
@keyframes deck-c{from{--c:0}to{--c:1}}

/* ---------- buttons, pills, small pieces */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.07);color:var(--text);font:600 14px/1 var(--body);white-space:nowrap;transition:transform .3s var(--ease),background-color .25s,border-color .25s}
.btn:hover{transform:translate3d(0,-2px,0);background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.36)}
.btn.primary{background:linear-gradient(135deg,var(--pink),var(--hot) 55%,var(--coral));border-color:transparent;color:#fff;box-shadow:0 12px 36px rgba(245,51,141,.42),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.primary:hover{background:linear-gradient(135deg,#ff74b0,#ff4a9b 55%,#ff8c6f)}
.btn.big{min-height:56px;padding:0 30px;font-size:16px}
.btn.glass{background:rgba(11,6,22,.42)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(11,6,22,.35);font-size:12.5px;color:var(--muted);font-weight:600}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--palm);box-shadow:0 0 10px var(--palm)}
.pill b{color:var(--text)}
.mint{font-family:var(--mono);letter-spacing:.01em}
.sfx{color:var(--pink);font-weight:800;text-shadow:0 0 12px rgba(255,95,162,.7);text-transform:none}
/* addresses and tickers keep their exact case inside uppercase type (a real address ends in GTAVi or GTAV1) */
.nt{text-transform:none!important}
.wallet-addr{font-family:var(--mono)}
.st{display:inline-block;font:700 10.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--muted)}
.st.live{background:rgba(52,211,153,.16);color:var(--palm)}.st.pending{background:rgba(255,179,71,.16);color:var(--orange)}.st.graduated{background:rgba(199,161,255,.2);color:var(--lav)}.st.failed{background:rgba(255,107,125,.16);color:var(--red)}
.stars{display:inline-flex;gap:2px}
.stars svg{width:14px;height:14px;display:block;fill:rgba(255,255,255,.18)}
.stars i.on svg{fill:#fff5fb;filter:drop-shadow(0 0 4px rgba(255,95,162,.9))}
.bar{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--orange));transform-origin:0 50%;transform:scaleX(var(--w,0));transition:transform .9s var(--ease)}
.eyebrow-s{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:700 11px/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--lav)}
.eyebrow-s i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:pulse 1.6s infinite}
.eyebrow-s.bad{color:var(--pink)}

/* ---------- the brand */
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{display:flex;align-items:center;transition:transform .3s var(--ease)}
.brand .mark img{width:44px;height:44px;filter:drop-shadow(0 0 14px rgba(255,95,162,.45))}
.brand .mark b{display:none}
.brand .mark.txt b{display:inline;font:900 34px/1 var(--display);letter-spacing:-.02em;color:var(--pink);text-shadow:0 0 14px rgba(255,95,162,.7)}
.brand:hover .mark{transform:translate3d(0,-2px,0)}
.brand .word{display:flex;flex-direction:column;font:700 13px/1.15 var(--display);letter-spacing:.12em;text-transform:uppercase}
.brand .word small{font-size:10px;letter-spacing:.32em;color:var(--pink);margin-top:3px}

/* ---------- fixed chrome: header, progress bar, panel rail, cursor glow */
.top{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:22px;padding:14px clamp(16px,3vw,44px);view-transition-name:top-bar}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,7,28,.82),rgba(14,7,28,.6));-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);opacity:0;transition:opacity .5s var(--ease)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,95,162,.6),rgba(255,179,71,.5),transparent);opacity:0;transition:opacity .5s var(--ease)}
.top.solid::before,.top.solid::after,body:not(.page-home) .top::before,body:not(.page-home) .top::after{opacity:1}
.nav{display:flex;gap:2px}
.nav a{padding:8px 12px;border-radius:10px;font:600 11.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,245,251,.75);transition:color .2s}
.nav a:hover{color:var(--text)}
.top .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.progress{position:fixed;top:0;left:0;right:0;z-index:70;height:3px;pointer-events:none;view-transition-name:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--pink),var(--orange));box-shadow:0 0 12px rgba(255,95,162,.7);transform-origin:0 50%;transform:scaleX(0)}
.rail{position:fixed;right:clamp(12px,2.2vw,36px);top:50%;z-index:58;display:flex;flex-direction:column;gap:4px;transform:translate3d(0,-50%,0)}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:12px;height:30px;color:rgba(255,245,251,.55);text-shadow:0 1px 10px rgba(6,3,13,.9);transition:color .3s}
.rail a b{padding:3px 5px;border-radius:6px;background:rgba(9,4,18,.62);font:700 11px/1 var(--display);letter-spacing:.08em}
.rail a span{order:-1;font:600 10.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translate3d(10px,0,0);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.rail a::after{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;transform-origin:100% 50%;transform:scaleX(.5);transition:transform .45s var(--ease)}
.rail a:hover,.rail a.on{color:var(--text)}
.rail a.on::after{transform:scaleX(1.5);background:var(--pink);box-shadow:0 0 10px var(--pink)}
/* labels on hover only: the active panel is the lit number and the pink dash, so text columns on the right never meet a label */
.rail:hover a span{opacity:1;transform:none}
.glow{position:fixed;left:0;top:0;z-index:58;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,95,162,.14),rgba(124,58,237,.07) 42%,transparent 68%);mix-blend-mode:screen;opacity:0;transition:opacity .6s}
.glow.on{opacity:1}
body:not(.page-home) .progress,body:not(.page-home) .rail{display:none}

/* ---------- the deck: slots, panels, pictures */
.deck{position:relative}
.slot{position:relative;z-index:calc(var(--i,0) + 1)}
.panel{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;background:var(--ink);
  --r:clamp(0,(var(--e,1) - .6) * 2.5,1);--re:calc(1 - (1 - var(--r)) * (1 - var(--r)))}
/* the leading edge of an incoming panel: a neon hairline that fades as it settles */
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:6;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,95,162,.85),rgba(255,179,71,.7),transparent);opacity:calc(1 - var(--e,1))}
.ph{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.zoom,.kb{position:absolute;inset:0}
/* scroll-linked: the incoming picture settles 1.15 -> 1 rising out of a 6 % parallax; the covered one zooms to 1.12 and drifts down 6 % */
.zoom{transform-origin:50% 45%;transform:translate3d(0,calc((var(--c,0) - (1 - var(--e,1))) * 6%),0) scale(calc(1 + (1 - var(--e,1)) * .15 + var(--c,0) * .12))}
.kb{transform-origin:62% 38%}
.panel.live .zoom>.kb,.panel.live .gi.on>.kb{animation:kb 12s ease-in-out infinite alternate}
.ph img{position:absolute;max-width:none;-webkit-user-drag:none;user-select:none}
.ph picture{position:absolute;inset:0}
.ph .full{inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* a cast picture is a 768x1024 portrait: shown sharp at its own size, the same picture blurred fills the rest of the frame */
.ph .bleed{left:-6%;top:-6%;width:112%;height:112%;object-fit:cover;filter:blur(30px) saturate(1.35) brightness(.6)}
.ph .por{top:0;height:100%;width:min(75vh,58vw);width:min(75svh,58vw);object-fit:cover;object-position:50% 22%}
.side-r .por{right:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.side-l .por{left:0;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 34%);mask-image:linear-gradient(270deg,transparent 0,#000 34%)}
.shade{position:absolute;inset:0;pointer-events:none}
.shade::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay}
.side-r .shade{background:linear-gradient(90deg,rgba(11,6,22,.94) 0%,rgba(11,6,22,.76) 30%,rgba(11,6,22,.22) 58%,rgba(11,6,22,0) 76%),linear-gradient(0deg,rgba(11,6,22,.85) 0%,rgba(11,6,22,0) 32%),linear-gradient(180deg,rgba(11,6,22,.55) 0%,rgba(11,6,22,0) 20%),radial-gradient(70% 60% at 88% 8%,rgba(124,58,237,.3),transparent 70%)}
.side-l .shade{background:linear-gradient(270deg,rgba(11,6,22,.94) 0%,rgba(11,6,22,.76) 30%,rgba(11,6,22,.22) 58%,rgba(11,6,22,0) 76%),linear-gradient(0deg,rgba(11,6,22,.85) 0%,rgba(11,6,22,0) 32%),linear-gradient(180deg,rgba(11,6,22,.55) 0%,rgba(11,6,22,0) 20%),radial-gradient(70% 60% at 12% 8%,rgba(245,51,141,.26),transparent 70%)}
.hero-ph .shade{background:linear-gradient(180deg,rgba(11,6,22,.6) 0%,rgba(11,6,22,.08) 26%,rgba(11,6,22,.25) 62%,rgba(11,6,22,.94) 100%),radial-gradient(56% 48% at 50% 54%,rgba(11,6,22,.55),transparent 72%)}
.veil{position:absolute;inset:0;z-index:5;pointer-events:none;background:#06030d;opacity:calc(var(--c,0) * .6)}

/* panel content: one typographic block; scroll-linked rise (60 px over the last 40 % of the entry) + time-based reveals (.in) */
.pc{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;padding:var(--top) var(--padr) clamp(28px,6vh,72px) var(--padx);
  transform:translate3d(0,calc((1 - var(--re,1)) * 60px - var(--c,0) * 80px),0);opacity:calc(var(--re,1) * (1 - var(--c,0) * .6))}
.pc-in{width:min(760px,54vw)}
.eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 clamp(12px,2.2vh,22px);font:600 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,245,251,.85)}
.eyebrow .no{display:inline-flex;align-items:center;gap:14px;font:700 12px/1 var(--display);letter-spacing:.08em;color:var(--pink)}
.eyebrow .no::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,var(--pink),transparent)}
.title{margin:0 0 clamp(14px,2.6vh,26px);font:900 min(clamp(40px,7vw,112px),11.5vh)/.9 var(--display);text-transform:uppercase;letter-spacing:.005em;filter:drop-shadow(0 8px 30px rgba(11,6,22,.6))}
.title .lt{display:block}
.title .ln{display:block}
.title .ln.grad{filter:drop-shadow(0 0 24px rgba(255,95,162,.4))}
.title .w{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding:.06em .03em .1em;margin:-.06em -.03em -.1em}
.title .ch{display:inline-block;transform:translate3d(0,115%,0);transition:transform 1s var(--ease) calc(var(--d) * 25ms)}
.in .title .ch{transform:none}
.title.huge{font-size:min(clamp(56px,9.6vw,168px),19vh);letter-spacing:-.01em;margin:0;white-space:nowrap}
.lead{margin:0;max-width:560px;font-size:clamp(16px,1.3vw,20px);line-height:1.55;color:var(--soft)}
.lead b{color:var(--text)}
.rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease) var(--rd,120ms),transform .9s var(--ease) var(--rd,120ms)}
.in .rv{opacity:1;transform:none}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.pc .cta{margin-top:clamp(18px,3.4vh,34px)}

/* 01 hero */
.p-hero .pc{align-items:center;text-align:center;padding-left:var(--padr)}
.p-hero .pc-in{width:auto;display:flex;flex-direction:column;align-items:center}
.vi-mark{width:min(clamp(96px,14vw,220px),24vh);height:auto;margin-bottom:clamp(2px,.8vh,10px);filter:drop-shadow(0 0 40px rgba(255,95,162,.45))}
.kicker{margin:0 0 clamp(8px,1.4vh,14px);font:700 clamp(13px,1.6vw,24px)/1 var(--display);letter-spacing:.62em;text-indent:.62em;text-transform:uppercase}
.tag{margin:clamp(14px,2.4vh,26px) 0 0;font:500 clamp(17px,1.6vw,24px)/1.4 var(--body);color:var(--soft)}
.p-hero .cta{justify-content:center}
.counter{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(16px,3vh,28px);padding:9px 16px;border-radius:999px;background:rgba(11,6,22,.5);border:1px solid var(--line);font-size:13px;color:var(--soft)}
.counter i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--palm);box-shadow:0 0 12px var(--palm);animation:pulse 1.6s infinite}
.counter b{color:var(--text)}
.cue{position:absolute;left:50%;bottom:20px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;font:600 10.5px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,245,251,.72);transform:translate3d(-50%,0,0)}
.cue i{width:1px;height:44px;background:linear-gradient(180deg,#fff5fb,transparent);transform-origin:50% 0;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* 02 live in Vice City: a horizontal rail of large cards */
.tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:clamp(16px,2.6vh,24px)}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:rgba(11,6,22,.4);color:var(--soft);font:700 11.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;transition:border-color .2s,background-color .2s}
.chip.on,.chip:hover{border-color:rgba(255,95,162,.7);background:rgba(255,95,162,.18);color:var(--text)}
.hrail{position:relative;margin:clamp(18px,3.6vh,36px) calc(-1 * var(--padr)) 0 calc(-1 * var(--padx))}
.lgrid{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--padx);padding:8px var(--padr) 16px var(--padx);scrollbar-width:none}
.lgrid::-webkit-scrollbar{display:none}
.rh{position:absolute;right:var(--padr);top:-50px;display:flex;gap:8px}
.rh-b{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:rgba(11,6,22,.5);color:var(--text);font-size:18px;transition:transform .3s var(--ease),border-color .2s}
.rh-b:hover{transform:scale(1.08);border-color:var(--pink)}
.lc{flex:none;scroll-snap-align:start;width:clamp(300px,26vw,390px);display:grid;grid-template-columns:clamp(96px,8.4vw,128px) minmax(0,1fr);gap:16px;padding:12px;border-radius:24px;background:rgba(18,10,34,.66);border:1px solid rgba(255,255,255,.13);box-shadow:0 20px 50px rgba(4,1,12,.45);cursor:pointer;transition:transform .4s var(--ease),border-color .3s}
.lc:hover,.lc:focus-visible{transform:translate3d(0,-5px,0);border-color:rgba(255,95,162,.6)}
.lc-img{aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--sunset)}
.lc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.lc:hover .lc-img img{transform:scale(1.07)}
.lc-b{min-width:0;display:flex;flex-direction:column;justify-content:center}
.lc .nm{display:flex;align-items:center;gap:8px;min-width:0}
.lc .nm b{font:700 16px/1.2 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em}
.lc .nm .st{margin-left:auto;flex:none}
.lc .sym,.lc .by{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.lc .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.lc .row b{font:700 18px/1 var(--display);color:var(--text)}
.empty{flex:none;width:min(640px,100%);padding:26px 28px;border-radius:24px;background:rgba(18,10,34,.66);border:1px dashed rgba(255,95,162,.55);color:var(--soft)}
.empty h3{margin:0 0 8px;font:900 clamp(17px,1.7vw,24px)/1.15 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.empty p{margin:0 0 18px;color:var(--muted)}

/* 03 most wanted: the board reads like a wanted list, the text block sits on the right */
/* the text block sits opposite the picture's subject (shared/cast.js focus): .txt-r panels put it on the right */
.panel:not(.p-crew).txt-r .pc{align-items:flex-end}
.panel:not(.p-crew).txt-r .pc-in{width:min(660px,47vw)}
.wl{display:grid;gap:10px;margin-top:clamp(16px,2.8vh,28px)}
.leader{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 18px;border-radius:24px;background:linear-gradient(120deg,rgba(255,95,162,.22),rgba(124,58,237,.24));border:1px solid rgba(255,95,162,.55);box-shadow:0 22px 60px rgba(245,51,141,.18);cursor:pointer;transition:transform .4s var(--ease)}
.leader:hover{transform:translate3d(0,-3px,0)}
.leader.open{grid-template-columns:minmax(0,1fr) auto;cursor:default}
.leader .limg{width:clamp(72px,6.4vw,96px);aspect-ratio:1;border-radius:18px;object-fit:cover;background:var(--sunset)}
.leader .stars{margin-top:8px}.leader .stars svg{width:20px;height:20px}
.leader h3{margin:6px 0 4px;font:900 clamp(20px,2.1vw,30px)/1.05 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.leader p{margin:0;font-size:13.5px;color:var(--soft)}
.wrows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rw{display:grid;grid-template-columns:28px 40px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:9px 14px;border-radius:16px;background:rgba(18,10,34,.64);border:1px solid var(--line);cursor:pointer;transition:transform .35s var(--ease),border-color .25s}
.rw:hover,.rw:focus-visible{transform:translate3d(-4px,0,0);border-color:rgba(255,95,162,.5)}
.rw .rk{font:900 17px/1 var(--display);color:var(--lav)}
.rw img,.rw .pimg{width:40px;height:40px;border-radius:12px;object-fit:cover;background:var(--sunset)}
.rw .pimg{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2)}
.rw .nm{min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw .nm small{display:block;font-weight:500;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.rw .v{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font:700 14px/1 var(--display)}
.rw .bar{grid-column:2/-1;height:3px;margin-top:8px}
.rw.placeholder{cursor:default;opacity:.66}
.rw.placeholder:hover{transform:none;border-color:var(--line)}

/* 04 how it works: three steps, revealed one by one */
.how{list-style:none;margin:clamp(14px,2.6vh,28px) 0 0;padding:0;max-width:620px}
.hc{display:grid;grid-template-columns:clamp(58px,6vw,86px) minmax(0,1fr);column-gap:18px;padding:clamp(10px,1.8vh,18px) 0;border-top:1px solid rgba(255,255,255,.14);opacity:0;transform:translate3d(0,36px,0);transition:opacity .8s var(--ease) calc(320ms + var(--k) * 200ms),transform .9s var(--ease) calc(320ms + var(--k) * 200ms)}
.in .hc{opacity:1;transform:none}
.hc .n{grid-row:1/3;font:900 clamp(30px,3.6vw,54px)/1 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--pink)}
.hc h3{margin:4px 0 6px;font:800 clamp(14px,1.2vw,17px)/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase}
.hc p{margin:0;font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:var(--soft)}

/* 05 the crew: one picture at a time, cross-fade + slide */
.p-crew{touch-action:pan-y}
.gal{position:absolute;inset:0}
.gi{position:absolute;inset:0;margin:0;opacity:0;transform:translate3d(9%,0,0);transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.gi.l{transform:translate3d(-9%,0,0)}
.gi.on{z-index:1;opacity:1;transform:none}
.gbar{display:flex;align-items:flex-end;gap:28px;margin-top:clamp(18px,3.4vh,34px)}
.gcount{display:flex;align-items:baseline;gap:12px;overflow:hidden;font-family:var(--display)}
.gcount b{display:inline-block;font-weight:900;font-size:min(clamp(56px,8vw,128px),15vh);line-height:.95}
.gcount span{font-weight:700;font-size:clamp(16px,1.6vw,24px);letter-spacing:.08em;color:var(--muted)}
.gnav{display:flex;gap:10px;padding-bottom:8px}
.gticks{display:flex;gap:6px;max-width:440px;margin-top:22px}
.gticks i{position:relative;flex:1;height:3px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.2)}
.gticks i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--pink),var(--orange));opacity:0;transition:opacity .5s}
.gticks i.on::after{opacity:1}

/* 06 launch now: the CTA and the footer close the deck */
.p-launch{display:flex;flex-direction:column}
.p-launch .pc{flex:1;min-height:0}
.p6foot{position:relative;z-index:3}

/* ---------- footer (inside panel 06 on the home page, closing the page elsewhere) */
.foot{position:relative;padding:clamp(18px,3vh,30px) var(--padr) clamp(14px,2.4vh,22px) var(--padx);background:linear-gradient(180deg,rgba(11,6,22,0),rgba(11,6,22,.86) 30%,rgba(11,6,22,.96))}
body:not(.page-home) .foot{background:var(--ink);border-top:1px solid var(--line)}
.fwrap{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(18px,3vw,44px);padding-top:clamp(16px,2.6vh,26px);border-top:1px solid rgba(255,255,255,.12)}
body:not(.page-home) .fwrap{border-top:0;padding-top:0}
.foot p{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.foot h5{margin:2px 0 8px;font:700 11px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--lav)}
.foot .fcol a{display:block;padding:3px 0;font-size:13.5px;color:var(--muted);transition:color .2s}
.foot .fcol a:hover{color:var(--text)}
.foot .brand .mark img{width:40px;height:40px}
.foot .copy{margin-top:clamp(12px,2.2vh,20px);font-size:12px;color:var(--dim)}

/* ---------- coin page: one cinematic header with the coin's own picture */
.coinhero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:calc(var(--top) + 8px) clamp(16px,6vw,96px) clamp(40px,8vh,80px);overflow:hidden;isolation:isolate}
.cbg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--ink)}
.cbg img{position:absolute;left:-8%;top:-8%;width:116%;height:116%;max-width:none;object-fit:cover;filter:blur(48px) saturate(1.4) brightness(.5)}
.cbg.city img{left:0;top:0;width:100%;height:100%;filter:none;animation:kb 14s ease-in-out infinite alternate}
.cshade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,6,22,.65),rgba(11,6,22,.3) 40%,rgba(11,6,22,.94)),radial-gradient(60% 60% at 30% 40%,rgba(124,58,237,.22),transparent 70%)}
.cwrap{display:grid;grid-template-columns:minmax(240px,440px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;width:100%;max-width:1280px}
.cwrap.center{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:780px;text-align:center}
.cimg{aspect-ratio:1;border-radius:32px;overflow:hidden;background:var(--sunset);box-shadow:0 40px 100px rgba(4,1,12,.6),0 0 0 1px rgba(255,95,162,.4),0 0 80px rgba(245,51,141,.25)}
.cimg img{width:100%;height:100%;object-fit:cover;view-transition-name:coin-hero}
.cinfo{min-width:0}
.ctitle{margin:12px 0 14px;font:900 clamp(34px,5.4vw,84px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.cwrap.center .ctitle{font-size:clamp(32px,5.6vw,80px)}
.cinfo .lead{max-width:640px}
.back{display:inline-flex;gap:6px;align-items:center;margin-bottom:14px;font-size:13px;color:var(--muted);transition:color .2s}
.back:hover{color:var(--text)}
.addr{margin:16px 0 0;padding:11px 14px;border-radius:12px;background:rgba(11,6,22,.55);border:1px solid var(--line);font:500 12.5px/1.5 var(--mono);color:var(--muted);word-break:break-all}
.addr .mint{font-size:14px;color:var(--soft)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.stat{padding:14px 16px;border-radius:16px;background:rgba(18,10,34,.6);border:1px solid var(--line)}
.stat b{display:block;font:700 clamp(17px,1.6vw,22px)/1.2 var(--display)}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.bar.big{height:8px;margin-top:16px}
.cinfo .cta{margin-top:24px}
.created{margin:18px 0 0;font-size:13px;color:var(--muted)}
.nocoin .stars svg{width:30px;height:30px}
.nocoin p{margin:0 0 6px;max-width:460px;color:var(--soft)}
.addr-bad{display:block;max-width:100%;padding:9px 14px;border-radius:12px;background:rgba(11,6,22,.6);border:1px solid var(--line);font-size:13px;color:var(--muted);word-break:break-all}

/* ---------- the launch wizard: a full-screen takeover */
.modal{position:fixed;inset:0;z-index:100}
body.wiz-covered #view,body.wiz-covered .foot,body.wiz-covered .rail,body.wiz-covered .glow{visibility:hidden}
.modal::before{content:"";position:fixed;inset:0;background:rgba(6,3,13,.62)}
.modal.opening::before{animation:fade-in .5s both}
.modal.closing::before{animation:fade-in .42s reverse both}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.sheet{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(1200px 600px at 85% -10%,rgba(124,58,237,.34),transparent 60%),radial-gradient(900px 500px at 0% 110%,rgba(245,51,141,.2),transparent 60%),linear-gradient(180deg,#1a0c31 0%,#120a22 55%,#0b0616 100%);box-shadow:0 -30px 80px rgba(0,0,0,.5)}
.modal.opening .sheet{animation:sheet-in .75s var(--ease) both}
.modal.closing .sheet{animation:sheet-out .42s cubic-bezier(.5,0,.75,0) both}
@keyframes sheet-in{from{transform:translate3d(0,100%,0)}to{transform:none}}
@keyframes sheet-out{from{transform:none}to{transform:translate3d(0,100%,0)}}
.sheet-bg{position:absolute;inset:-80px;z-index:0;pointer-events:none;background-size:cover;background-position:50% 25%;filter:blur(44px) saturate(1.3);opacity:.2}
.sheet::after{content:"VI";position:absolute;right:-3vw;bottom:-10vh;z-index:0;pointer-events:none;font:900 min(46vw,72vh)/.8 var(--display);color:transparent;-webkit-text-stroke:2px rgba(255,95,162,.05)}
.sheet-top{position:relative;z-index:2;display:flex;align-items:center;gap:18px;padding:14px clamp(16px,3vw,40px);border-bottom:1px solid var(--line);background:rgba(11,6,22,.35)}
.brand.mini .mark img{width:34px;height:34px}
.steps{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}
.steps span{display:inline-flex;align-items:center;gap:9px;font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.steps span b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);font:700 11px/1 var(--display);letter-spacing:0;color:var(--muted)}
.steps span.on{color:var(--text)}
.steps span.on b{background:linear-gradient(135deg,var(--pink),var(--coral));border-color:transparent;color:#fff;box-shadow:0 0 18px rgba(255,95,162,.55)}
.steps span.past{color:var(--palm)}
.steps span.past b{border-color:rgba(52,211,153,.6);color:var(--palm)}
.steps .sep{width:clamp(14px,4vw,60px);height:1px;background:var(--line2)}
.sheet .x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.05);font-size:22px;line-height:1;transition:transform .3s var(--ease)}
.sheet .x:hover{transform:rotate(90deg)}
.sheet-main{position:relative;z-index:1;flex:1;overflow-x:hidden;overflow-y:auto;padding:clamp(22px,6vh,64px) clamp(16px,5vw,80px) 56px}
#mBody{max-width:1120px;margin:0 auto}
.step-ghost{position:absolute;pointer-events:none}
.stp{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.5fr);gap:clamp(24px,6vw,96px);align-items:start}
.st-head{position:sticky;top:0}
.st-n{margin-bottom:14px;font:900 clamp(72px,11vw,170px)/.82 var(--display);color:transparent;-webkit-text-stroke:2px rgba(255,95,162,.9)}
.st-head h2{margin:0 0 14px;font:900 clamp(30px,3.8vw,56px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.sheet .sub{margin:0;max-width:360px;font-size:15px;color:var(--muted)}
.st-body{min-width:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.f input,.f textarea{min-width:0;padding:13px 15px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:var(--text);font:inherit;outline:none;transition:border-color .15s}
.f input:focus,.f textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,95,162,.2)}
.f textarea{min-height:90px;resize:vertical}
.f .big-in{font:700 clamp(24px,3vw,36px)/1.2 var(--display);padding:14px 18px}
.hint{font-size:12px;color:var(--dim)}
.fees{margin:14px 0 0;font-size:12.5px}
.coinrow{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:stretch}
.coinf{display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.upl{position:relative;display:flex;align-items:center;justify-content:center;width:190px;height:190px;overflow:hidden;border-radius:24px;border:2px dashed rgba(255,95,162,.6);background:rgba(255,95,162,.07);text-align:center;cursor:pointer;outline:none;transition:border-color .2s,background-color .2s}
.upl:hover,.upl:focus-visible,.upl.over{border-color:var(--pink);background:rgba(255,95,162,.16)}
.upl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.upl .upl-in{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;font-size:14px}
.upl .upl-in span{font-size:11.5px;line-height:1.5;color:var(--muted)}
.upl.has{border-style:solid}
.upl.has .upl-in{position:absolute;inset:0;justify-content:center;align-items:center;background:rgba(18,10,34,.74);opacity:0;transition:opacity .2s}
.upl.has:hover .upl-in{opacity:1}
.upl.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translate3d(-6px,0,0)}40%,80%{transform:translate3d(6px,0,0)}}
.ideas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
.ideas .hint{margin-right:4px}
.ideas button{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,95,162,.4);background:rgba(255,95,162,.08);font-size:12.5px;font-weight:600;color:var(--pink);transition:background-color .2s,color .2s}
.ideas button:hover{background:rgba(255,95,162,.22);color:#fff}
.actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:26px}
.amts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.amts button{padding:10px 15px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.05);font-weight:700;font-size:14px;transition:border-color .2s,background-color .2s}
.amts button.on{border-color:var(--pink);background:rgba(255,95,162,.18)}
.calc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.calc div{padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.calc b{display:block;font:700 18px/1.2 var(--display)}
.calc span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.review{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:start}
.review img{width:150px;height:150px;border-radius:20px;object-fit:cover;border:1px solid rgba(255,95,162,.45)}
.review dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;margin:0;font-size:14px}
.review dt{color:var(--muted)}.review dd{margin:0;font-weight:600;word-break:break-word;min-width:0}
.contract{margin-top:20px;padding:16px 18px;border-radius:18px;background:rgba(11,6,22,.6);border:1px solid rgba(255,95,162,.4);box-shadow:0 0 40px rgba(245,51,141,.12)}
.contract .lbl{display:block;margin-bottom:8px;font:700 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--lav)}
.cval{min-height:1.45em;font:500 clamp(14px,1.55vw,20px)/1.45 var(--mono);word-break:break-all}
.pend{color:var(--orange);font-family:var(--body);font-size:14px}
.typing::after{content:"";display:inline-block;width:.6em;height:1.1em;margin-left:2px;vertical-align:-.2em;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:caret .7s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.log{margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.38);border:1px solid var(--line);font:12.5px/1.5 var(--mono);color:var(--muted);max-height:200px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.log .ok{color:var(--palm)}.log .err{color:var(--red)}.log .now{color:var(--text)}
.done{max-width:720px;margin:0 auto;text-align:center}
.done .big{font:900 clamp(34px,5vw,64px)/1 var(--display);text-transform:uppercase;background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent}
.done .stars{margin-top:12px}.done .stars svg{width:24px;height:24px}
.done img{width:170px;height:170px;margin:18px auto;border-radius:26px;object-fit:cover;border:1px solid rgba(255,95,162,.45);box-shadow:0 0 50px rgba(255,95,162,.3)}
.done h2{font:900 clamp(22px,2.6vw,34px)/1.1 var(--display);text-transform:uppercase}
.done .sub{max-width:none;margin:8px 0 0;font-size:13px}
.done .links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.toast{position:fixed;left:50%;bottom:24px;z-index:200;max-width:min(520px,90vw);padding:12px 18px;border-radius:14px;background:#221238;border:1px solid rgba(255,95,162,.4);box-shadow:0 20px 60px rgba(4,1,12,.55);font-weight:600;font-size:14px;transform:translate3d(-50%,0,0)}
.toast.bad{border-color:rgba(255,107,125,.65)}
.toast a{color:var(--pink);text-decoration:underline}


/* ====================================================================================================================================
   Layout v3 "attention mode" (docs/STYLE_BIBLE.md). Every live number, ticker item, toast and blip comes from /api/state.
   Motion is transform/opacity only; a hidden tab pauses everything; the hero's loops pause while it is off screen; reduced motion
   turns off the intro, flashes, sirens, glitch, the trailer cut and every loop (see the reduced-motion block at the end).
   ==================================================================================================================================== */
html.tab-hidden *,html.tab-hidden *::before,html.tab-hidden *::after{animation-play-state:paused!important}
/* the desktop HUD's radar sits bottom-left: content keeps clear of it */
@media (min-width:901px){:root{--padx:clamp(150px,11vw,200px)}}

/* ---------- 1. intro: black, siren sweep, the VI mark slams in, the name types in, cut to the hero (1.6 s, pure CSS) */
.intro{position:fixed;inset:0;z-index:300;animation:in-life 1.6s linear forwards}
html.no-intro .intro{display:none}
@keyframes in-life{0%,99%{visibility:visible}100%{visibility:hidden}}
.intro::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;animation:in-flash 1.6s linear forwards}
@keyframes in-flash{0%,87%{opacity:0}89%{opacity:.5}100%{opacity:0}}
.in-wrap{position:absolute;inset:0;overflow:hidden;background:#000;animation:in-cut 1.6s steps(1,end) forwards}
@keyframes in-cut{0%{opacity:1}88%,100%{opacity:0}}
.in-siren{position:absolute;top:50%;left:0;width:110vmax;height:110vmax;margin:-55vmax 0 0 -55vmax;border-radius:50%;opacity:0}
.in-siren.r{background:radial-gradient(closest-side,rgba(255,42,61,.7),rgba(255,42,61,0));animation:in-sw-r .55s cubic-bezier(.5,0,.5,1) forwards}
.in-siren.b{background:radial-gradient(closest-side,rgba(42,107,255,.75),rgba(42,107,255,0));animation:in-sw-b .55s .12s cubic-bezier(.5,0,.5,1) forwards}
@keyframes in-sw-r{0%{opacity:0;transform:translate3d(-15vw,0,0)}35%{opacity:1}100%{opacity:0;transform:translate3d(115vw,0,0)}}
@keyframes in-sw-b{0%{opacity:0;transform:translate3d(115vw,0,0)}35%{opacity:1}100%{opacity:0;transform:translate3d(-15vw,0,0)}}
.in-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;animation:in-shake .26s .54s linear both}
@keyframes in-shake{0%{transform:none}20%{transform:translate3d(-6px,4px,0)}40%{transform:translate3d(6px,-5px,0)}60%{transform:translate3d(-5px,-3px,0)}80%{transform:translate3d(4px,5px,0)}100%{transform:none}}
.in-mark{position:relative;width:min(36vw,34vh,300px);aspect-ratio:1;animation:in-slam .2s .34s cubic-bezier(.55,0,1,.45) both}
@keyframes in-slam{0%{opacity:0;transform:scale(2.4)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.in-mark img{position:absolute;inset:0;width:100%;height:100%}
.in-mark .gr{filter:sepia(1) saturate(9) hue-rotate(-30deg);mix-blend-mode:screen;opacity:0;animation:in-rgb-r .5s .54s ease-out both}
.in-mark .gc{filter:sepia(1) saturate(9) hue-rotate(150deg);mix-blend-mode:screen;opacity:0;animation:in-rgb-c .5s .54s ease-out both}
@keyframes in-rgb-r{0%{opacity:.9;transform:translate3d(-14px,3px,0)}100%{opacity:0;transform:none}}
@keyframes in-rgb-c{0%{opacity:.9;transform:translate3d(14px,-3px,0)}100%{opacity:0;transform:none}}
.in-type{font:900 clamp(15px,2.6vw,34px)/1 var(--display);letter-spacing:.2em;color:#fff;white-space:nowrap;text-transform:uppercase}
.in-type i{font-style:normal;opacity:0;animation:in-ch 1ms calc(.66s + var(--i) * 24ms) forwards}
@keyframes in-ch{to{opacity:1}}
.in-skip{position:absolute;left:0;right:0;bottom:5vh;text-align:center;font:600 10.5px/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.45);opacity:0;animation:in-ch 1ms .3s forwards}
/* while the intro plays the hero holds its reveal, so the cut lands on the title rising */
html.intro-on .p-hero .title .ch{transform:translate3d(0,115%,0)!important}
html.intro-on .p-hero .rv{opacity:0!important;transform:translate3d(0,26px,0)!important}

/* ---------- 4. live ticker under the header (every page) */
.ticker{position:fixed;left:0;right:0;top:var(--hdr);z-index:59;display:flex;height:32px;background:rgba(9,4,18,.82);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,95,162,.32);overflow:hidden;view-transition-name:ticker}
.tk-hud{display:none}
.tk-view{position:relative;flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.tk-track{display:flex;width:max-content;height:100%;animation:tk var(--dur,40s) linear infinite}
.ticker:hover .tk-track,.ticker:focus-within .tk-track{animation-play-state:paused}
@keyframes tk{to{transform:translate3d(-50%,0,0)}}
.tk-run{display:flex;flex:none;align-items:center}
.tk{display:inline-flex;align-items:center;gap:6px;padding:0 12px;white-space:nowrap;font:600 11.5px/1 var(--body);letter-spacing:.05em;text-transform:uppercase;color:#e9dcf5}
a.tk:hover{color:#fff}
.tk b{font-weight:800;color:#fff}
.tk.new b,.tk.up b{color:var(--palm)}.tk.grad b{color:var(--lav)}.tk.king b{color:#ffd400}.tk.cta{color:#ffd400;font-weight:800}
.tk-sep{font-style:normal;font-size:9px;color:var(--pink)}

/* ---------- 3. GTA HUD (desktop): cash, wanted stars, radar */
.hud{position:fixed;right:clamp(14px,2vw,28px);top:calc(var(--hdr) + 44px);z-index:57;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}
.hud-cash{display:flex;font:900 clamp(20px,1.9vw,28px)/1.15 var(--display);color:#86efac;-webkit-text-stroke:1px #052e16;filter:drop-shadow(0 2px 0 #052e16) drop-shadow(0 0 10px rgba(52,211,153,.35))}
/* fixed-width rolling columns: every digit centred in the same width, so the counter never jitters */
.hud-cash .strips{display:flex}
.hud-cash .dg{display:inline-block;width:.8em;height:1.15em;overflow:hidden;text-align:center}
.hud-cash .col{display:flex;flex-direction:column;transition:transform 1s var(--ease)}
.hud-cash .col i{display:block;height:1.15em;font-style:normal}
.hud-cash .sep{display:inline-block;height:1.15em}
.hud-stars{display:flex;gap:3px}
.hud-stars svg{display:block;width:20px;height:20px;fill:rgba(0,0,0,.4);stroke:rgba(255,255,255,.55);stroke-width:1.3}
.hud-stars i.on svg{fill:#fff;stroke:#000;filter:drop-shadow(0 0 6px rgba(255,255,255,.75))}
.radar{position:fixed;left:clamp(14px,2vw,28px);bottom:clamp(14px,2.4vh,28px);z-index:57;width:clamp(100px,8.6vw,128px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle,rgba(22,64,44,.9),rgba(9,28,22,.94) 62%,rgba(5,14,12,.97));box-shadow:0 0 0 3px rgba(11,6,22,.9),0 0 0 4px rgba(255,255,255,.2),0 14px 34px rgba(0,0,0,.55)}
.radar::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle,transparent 0 23%,rgba(134,239,172,.2) 23% 24%),linear-gradient(90deg,transparent calc(50% - .5px),rgba(134,239,172,.22) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),rgba(134,239,172,.22) 50%,transparent calc(50% + .5px))}
.rd-beam{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(134,239,172,.5),rgba(134,239,172,0) 24%,transparent);animation:spin 3.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rd-blips{position:absolute;inset:0}
.blip{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;background:#ffd400;box-shadow:0 0 8px #ffd400;cursor:pointer}
.blip::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #ffd400;opacity:0;animation:blip 2s ease-out infinite}
@keyframes blip{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2)}}
.rd-empty{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:18%;text-align:center;font:800 9.5px/1.25 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(134,239,172,.9);text-shadow:0 1px 4px #000}
.radar.empty .rd-empty{display:flex}
@media (max-width:900px){.hud,.radar{display:none}}
body.wiz-covered .ticker,body.wiz-covered .hud,body.wiz-covered .radar{visibility:hidden}

/* ---------- 8. the sound toggle */
.snd{width:44px;padding:0}
.snd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.snd .spk{fill:currentColor;stroke:none}
.snd .w1,.snd .w2,.snd.on .x{display:none}
.snd.on .w1,.snd.on .w2{display:inline}
.snd.on{border-color:rgba(52,211,153,.7);color:var(--palm)}

/* ---------- 2. the hero, built for the first second */
.tl{position:absolute;inset:0;z-index:1;opacity:0}
.tl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* each trailer frame is pushed hard to its subject's side (shared/cast.js focus): cover anchored at that edge plus a static 1.22 scale
   about the far edge, so faces drift out of the centred title block */
.tl[data-f="right"] img{object-position:100% 30%;transform:scale(1.22);transform-origin:0 40%}
.tl[data-f="left"] img{object-position:0 30%;transform:scale(1.22);transform-origin:100% 40%}
/* the title block: a soft dark radial scrim behind VI / GRAND THEFT / stars / LAUNCHPAD. It is the z -1 layer of .pc (a stacking
   context): over every picture, under every letter, cutout and tape, so a face behind the block never competes with the letters */
.hero-head{position:relative;display:flex;flex-direction:column;align-items:center}
.hero-head::before{content:"";position:absolute;left:-14%;right:-14%;top:-18%;bottom:-22%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(8,4,16,.78),rgba(8,4,16,.55) 52%,rgba(8,4,16,.2) 80%,rgba(8,4,16,0))}
.flash{position:absolute;inset:0;z-index:1;background:#fff;opacity:0;pointer-events:none}
.hero-ph .shade{background:radial-gradient(60% 46% at 50% 42%,rgba(11,6,22,.52),rgba(11,6,22,0) 78%),linear-gradient(180deg,rgba(11,6,22,.62) 0%,rgba(11,6,22,.12) 26%,rgba(11,6,22,.3) 60%,rgba(11,6,22,.94) 100%)}
.sirens{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.siren{position:absolute;top:-40vh;width:72vw;height:84vh;border-radius:50%}
.siren.r{left:-24vw;background:radial-gradient(closest-side,rgba(255,42,61,.55),rgba(255,42,61,0));animation:sir-r 1s ease-in-out infinite}
.siren.b{right:-24vw;background:radial-gradient(closest-side,rgba(42,107,255,.6),rgba(42,107,255,0));animation:sir-b 1s ease-in-out infinite}
@keyframes sir-r{0%,100%{opacity:.55;transform:translate3d(0,0,0) rotate(-8deg)}50%{opacity:.06;transform:translate3d(7vw,0,0) rotate(4deg)}}
@keyframes sir-b{0%,100%{opacity:.06;transform:translate3d(-7vw,0,0) rotate(8deg)}50%{opacity:.55;transform:translate3d(0,0,0) rotate(-4deg)}}
.p-hero .pc-in{position:static}
.p-hero .vi-mark{width:min(clamp(80px,9vw,140px),15vh)}
.kicker{text-shadow:0 2px 14px rgba(6,3,13,.8)}
.hstars{display:flex;gap:10px;margin:0 0 clamp(6px,1.2vh,12px)}
.hstars i{display:block;opacity:.2;animation:hs-on 7s calc(var(--k) * .22s) infinite}
.hstars svg{display:block;width:clamp(22px,2.1vw,32px);height:auto;fill:#fff;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,255,255,.55));animation:hs-blink 7s infinite}
@keyframes hs-on{0%{opacity:.2;transform:scale(.8)}3%{opacity:1;transform:scale(1.28)}6%{transform:scale(1)}90%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(.8)}}
@keyframes hs-blink{0%,52%{opacity:1}57%{opacity:.25}62%{opacity:1}67%{opacity:.25}72%,100%{opacity:1}}
/* the title group stands IN FRONT of the cutouts: z 3 over the figures (1) and the tapes (2); the action stack is on top (4) */
.title.huge{position:relative;z-index:3}
.p-hero .vi-mark,.p-hero .kicker,.p-hero .hstars{position:relative;z-index:3}
.gh{position:absolute;left:0;right:0;top:0;opacity:0;pointer-events:none}
.gh.r .ch{color:#ff2a3d!important}.gh.c .ch{color:#22e4ff!important}
.gh.r{clip-path:inset(0 0 46% 0)}.gh.c{clip-path:inset(54% 0 0 0)}
.title.huge.glitch .gh.r{animation:gl-r .42s steps(1,end) both}
.title.huge.glitch .gh.c{animation:gl-c .42s steps(1,end) both}
.title.huge.glitch>.lt{animation:gl-m .42s steps(1,end) both}
@keyframes gl-r{0%{opacity:.85;transform:translate3d(-8px,0,0)}25%{transform:translate3d(6px,-2px,0)}50%{opacity:.55;transform:translate3d(-4px,1px,0)}75%{opacity:.85;transform:translate3d(9px,0,0)}100%{opacity:0;transform:none}}
@keyframes gl-c{0%{opacity:.85;transform:translate3d(8px,0,0)}25%{transform:translate3d(-6px,2px,0)}50%{opacity:.55;transform:translate3d(5px,-1px,0)}75%{opacity:.85;transform:translate3d(-9px,0,0)}100%{opacity:0;transform:none}}
@keyframes gl-m{0%{transform:translate3d(2px,0,0)}33%{transform:translate3d(-3px,0,0)}66%{transform:translate3d(1px,0,0)}100%{transform:none}}
.cuts{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:center;align-items:flex-end;height:min(51vh,580px);height:min(51svh,580px);pointer-events:none}
/* the duo (1242 x 1400, faces in its top third: Jason x 63-77 %, Lucia x 28-40 %) stands at the right, its top just under the title, its
   legs breaking out of the hero's bottom edge into the curtain; Jason's face ends at 92.5vw (before the rail), Lucia's starts right of the
   action column. Checked at 1280x720, 1440x900, 1920x1080: no face behind a letter (scratch test d3faces) */
@media (min-width:901px){
  .cuts.solo{top:60vh;bottom:auto;left:calc(92.5vw - 70vh * .683);right:auto;display:block;height:70vh}
  .cuts.solo .cut{height:100%}
}
.cuts .cut{height:100%;width:auto;max-width:none;opacity:0;transform:translate3d(0,6%,0);filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));transition:opacity .8s var(--ease),transform 1s var(--ease)}
.cuts .cut.on{opacity:1;transform:none}
.cuts.pair .cut.l{margin-right:-5%}.cuts.pair .cut.r{margin-left:-5%}
.tape{position:absolute;left:-10vw;z-index:2;display:flex;align-items:center;width:120vw;height:clamp(30px,4.4vh,46px);overflow:hidden;background:#ffd400;color:#0b0616;border-top:2px solid #0b0616;border-bottom:2px solid #0b0616;box-shadow:0 8px 22px rgba(0,0,0,.45);pointer-events:none}
.tape.t1{transform:rotate(-4deg)}
.tape.t2{transform:rotate(3deg)}
/* the tapes ride on the content, not on the panel height: the upper one is centred in its own gap between the title block and the
   CTA, the lower one hangs 18 px under the "contracts ready" pill, so neither ever crosses a pill or the CTA, at any screen height */
.tape-slot{position:relative;z-index:2;align-self:stretch;height:clamp(64px,10vh,112px);pointer-events:none}
.tape-slot.s2{height:0}
.tape-slot .tape{left:50%;width:130vw;margin-left:-65vw}
.tape-slot.s1 .tape{top:50%;margin-top:calc(clamp(30px,4.4vh,46px) / -2)}
.tape-slot.s2 .tape{top:18px}
.tape-in{display:flex;flex:none;width:max-content;animation:tape 28s linear infinite}
.tape.t2 .tape-in{animation-direction:reverse;animation-duration:32s}
.tape-in span{flex:none;padding-right:.5em;font:900 clamp(12px,1.25vw,18px)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
@keyframes tape{to{transform:translate3d(-50%,0,0)}}
.hero-act{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-act .btn{min-height:38px;padding:0 16px;font-size:13px}
.cta-mega{position:relative;padding:0;border:0;border-radius:999px;background:none;color:#fff;cursor:pointer;transition:transform .3s var(--ease)}
.cta-mega:hover{transform:translate3d(0,-3px,0) scale(1.03)}
.cta-mega::before{content:"";position:absolute;inset:-20px -30px;border-radius:999px;background:radial-gradient(closest-side,rgba(255,95,162,.8),rgba(255,95,162,0));opacity:.35;pointer-events:none;animation:cta-pulse 1.6s ease-in-out infinite}
@keyframes cta-pulse{50%{opacity:1}}
.cta-mega span{position:relative;display:block;overflow:hidden;padding:clamp(17px,2.4vh,24px) clamp(32px,3.6vw,56px);border-radius:inherit;font:900 clamp(17px,1.9vw,28px)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(135deg,#ff5fa2,#f5338d 50%,#ff7b5c);box-shadow:0 16px 44px rgba(245,51,141,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.cta-mega span::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translate3d(-160%,0,0) skewX(-20deg);animation:cta-shine 2.5s ease-in-out infinite}
@keyframes cta-shine{0%,55%{transform:translate3d(-160%,0,0) skewX(-20deg)}100%{transform:translate3d(360%,0,0) skewX(-20deg)}}
.p-hero .tag{position:relative;z-index:4;display:inline-block;margin-top:16px;padding:7px 16px;border-radius:999px;background:rgba(11,6,22,.68);color:#fff;font-size:clamp(15px,1.3vw,19px)}
.p-hero .counter{position:relative;z-index:4;margin-top:10px;background:rgba(11,6,22,.72)}
.p-hero .cue{display:none}
/* the hero's loops wait while it is off screen */
.p-hero:not(.live) .siren,.p-hero:not(.live) .tape-in,.p-hero:not(.live) .hstars i,.p-hero:not(.live) .hstars svg,.p-hero:not(.live) .cta-mega::before,.p-hero:not(.live) .cta-mega span::after,.p-hero:not(.live) .counter i{animation-play-state:paused}

/* ---------- 6. King of Vice City (top of panel 02) */
#king{margin:0 0 clamp(12px,2.2vh,22px)}
.king{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;max-width:640px;padding:14px 18px 14px 14px;border-radius:24px;background:linear-gradient(120deg,rgba(255,212,0,.16),rgba(255,95,162,.18) 60%,rgba(124,58,237,.22));border:1px solid rgba(255,212,0,.6);cursor:pointer;transition:transform .35s var(--ease)}
.king:hover{transform:translate3d(0,-3px,0)}
.king::before{content:"";position:absolute;inset:-14px;z-index:-1;border-radius:32px;background:radial-gradient(60% 90% at 18% 50%,rgba(255,212,0,.42),rgba(255,212,0,0) 72%);opacity:.35;pointer-events:none;animation:cta-pulse 2s ease-in-out infinite}
.k-pic{position:relative;width:clamp(82px,7.6vw,118px);aspect-ratio:1;border-radius:20px;background:var(--sunset);box-shadow:0 0 0 2px #ffd400,0 0 30px rgba(255,212,0,.45)}
.k-pic img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.crown{position:absolute;left:50%;top:-24px;width:46px;height:auto;fill:#ffd400;filter:drop-shadow(0 2px 0 #6b4f00) drop-shadow(0 0 10px rgba(255,212,0,.7));transform:translate3d(-50%,0,0) rotate(-8deg)}
.k-lbl{font:800 11px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:#ffd400}
.king h3{margin:6px 0 4px;font:900 clamp(18px,1.9vw,28px)/1.05 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.k-row b{font:700 18px/1 var(--display)}.k-row span{margin-left:8px;font-size:13px;color:var(--soft)}
.king.empty{cursor:default}.king.empty:hover{transform:none}
.king.empty .k-pic{display:grid;place-items:center;background:rgba(255,212,0,.08);box-shadow:inset 0 0 0 2px rgba(255,212,0,.6),0 0 30px rgba(255,212,0,.25)}
.k-q{font:900 44px/1 var(--display);color:rgba(255,212,0,.75)}
.king.empty p{margin:6px 0 0;font-size:14px;color:var(--soft)}
.t-live{font-size:min(clamp(36px,5.4vw,88px),9vh)}

/* ---------- 7. Most Wanted: wanted posters */
.posters{display:flex;align-items:flex-end;gap:14px;margin-top:clamp(14px,2.4vh,24px)}
.poster{position:relative;flex:0 0 auto;width:clamp(148px,13.4vw,206px);padding:14px 12px 14px;text-align:center;color:#24140a;cursor:pointer;
  background:#e6d6b0 url(/art/fx/paper.jpg) center/cover;box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 0 44px rgba(110,70,25,.38);transform:rotate(var(--rot,0deg));transition:transform .35s var(--ease)}
.poster.r1{width:clamp(166px,15.2vw,234px);--rot:-2deg}.poster.r2{--rot:1.6deg}.poster.r3{--rot:-1deg}
.poster[data-coin]:hover,.poster[data-coin]:focus-visible{transform:translate3d(0,-6px,0) scale(1.02)}
.poster::before{content:"";position:absolute;top:6px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a8a,#9d1220);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.pp-h{margin:6px 0 8px;font:900 clamp(17px,1.8vw,27px)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#2a1608}
.pp-img{aspect-ratio:4/3;overflow:hidden;background:#cbb991;border:3px solid #2a1608;filter:sepia(.2) contrast(1.05)}
.pp-img img{width:100%;height:100%;object-fit:cover}
.pp-img.q{display:grid;place-items:center;font:900 46px/1 var(--display);color:rgba(42,22,8,.4)}
.poster .stars{justify-content:center;margin:8px 0 4px}
.poster .stars svg{width:15px;height:15px;fill:rgba(42,22,8,.22)}
.poster .stars i.on svg{fill:#2a1608;filter:none}
.pp-n{overflow:hidden;font:900 12.5px/1.15 var(--display);text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap}
.pp-s{margin-top:2px;font:700 12px/1.2 var(--mono)}
.pp-rw{margin-top:8px;padding-top:6px;border-top:2px dashed rgba(42,22,8,.45);font:800 10.5px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase}
.pp-rw b{display:block;margin-top:2px;font-size:clamp(14px,1.35vw,19px);letter-spacing:.02em;color:#7a0d14}
.poster.blank{opacity:.55;cursor:default}
.poster .btn{margin-top:10px;min-height:34px;padding:0 14px;font-size:12px}
.also{display:grid;gap:8px;max-width:660px;margin:14px 0 0;padding:0;list-style:none}

/* ---------- 9. share buttons */
.share{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.share .sx{background:#000;border-color:rgba(255,255,255,.4)}
.share .sx svg{width:15px;height:15px;fill:#fff}
.done .share{justify-content:center}

/* ---------- 5. real-event overlays: arrival toast, graduation banner, the creator's own MISSION PASSED */
.fx-toasts{position:fixed;left:clamp(14px,2vw,28px);bottom:calc(clamp(14px,2.4vh,28px) + clamp(100px,8.6vw,128px) + 14px);z-index:80;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.fx-toast{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;width:min(340px,86vw);padding:10px 14px 10px 10px;border-radius:18px;background:rgba(11,6,22,.94);border:1px solid rgba(52,211,153,.65);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 30px rgba(52,211,153,.22);pointer-events:auto;animation:toast-in .5s var(--ease) both}
.fx-toast img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.fx-toast small{display:block;font:800 10px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--palm)}
.fx-toast b{display:block;margin-top:3px;font:900 18px/1.1 var(--display)}
.fx-toast span{display:block;overflow:hidden;font-size:12.5px;color:var(--soft);text-overflow:ellipsis;white-space:nowrap}
.fx-toast.out{animation:toast-out .4s ease-in both}
@keyframes toast-in{from{opacity:0;transform:translate3d(-30px,0,0)}}
@keyframes toast-out{to{opacity:0;transform:translate3d(-30px,0,0)}}
@media (max-width:900px){.fx-toasts{left:12px;bottom:14px}}
.fx-banner{position:fixed;left:0;right:0;top:50%;z-index:90;pointer-events:none;transform:translate3d(0,-50%,0)}
.fb-in{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;background:linear-gradient(90deg,rgba(6,3,13,0),rgba(6,3,13,.9) 16%,rgba(6,3,13,.9) 84%,rgba(6,3,13,0))}
.fx-banner b{font:900 clamp(30px,5.6vw,84px)/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#ffd400;-webkit-text-stroke:2px #1a1200;text-shadow:0 4px 0 #1a1200,0 0 30px rgba(255,212,0,.45)}
.fx-banner span{font:800 clamp(14px,1.6vw,22px)/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.fx-banner.go .fb-in{animation:ban 2.5s var(--ease) both}
@keyframes ban{0%{opacity:0;transform:scale(1.25)}10%{opacity:1;transform:scale(1)}85%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.mission{position:fixed;inset:0;z-index:150;display:grid;place-items:center;overflow:hidden;background:rgba(6,3,13,.84)}
.mission.go{animation:fade-in .35s both}
.ms-cash{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bill{position:absolute;top:-12vh;left:var(--x);width:56px;height:26px;border-radius:4px;background:linear-gradient(135deg,#46a552,#2b7a35);border:2px solid #1f5c27;font:900 15px/22px var(--display);font-style:normal;text-align:center;color:#dcffdc;animation:bill var(--t) var(--d) linear both}
@keyframes bill{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(0,126vh,0) rotate(var(--r))}}
.ms-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px;text-align:center}
.ms-t{font:900 clamp(40px,8vw,120px)/1 var(--display);text-transform:uppercase;color:#ffd400;-webkit-text-stroke:3px #1a1200;text-shadow:0 6px 0 #1a1200,0 0 40px rgba(255,212,0,.5);animation:ms-pop .6s var(--ease) both}
@keyframes ms-pop{from{opacity:0;transform:scale(1.6)}}
.ms-r{font:900 clamp(18px,2.4vw,34px)/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#fff;animation:ms-pop .6s .25s var(--ease) both}
.ms-coin{display:flex;align-items:center;gap:12px;margin-top:8px;padding:10px 18px 10px 10px;border-radius:18px;background:rgba(255,255,255,.08);text-align:left;animation:ms-pop .6s .45s var(--ease) both}
.ms-coin img{width:56px;height:56px;border-radius:12px;object-fit:cover}
.ms-coin b{display:block;font:900 20px/1.1 var(--display)}.ms-coin span{font-size:13px;color:var(--soft)}
.ms-act{display:flex;flex-direction:column;align-items:center;gap:14px;animation:ms-up .5s 1.4s var(--ease) both}
.ms-act .share{justify-content:center;margin-top:6px}
@keyframes ms-up{from{opacity:0;transform:translate3d(0,20px,0)}}

/* ---------- short desktop screens: a tighter hero, so the lower tape (91 %) always clears the "contracts ready" pill */
@media (max-height:780px) and (min-width:641px){
  .p-hero .vi-mark{width:min(8vw,10vh)}
  .p-hero .kicker{margin-bottom:6px}
  .hstars{margin-bottom:4px}.hstars svg{width:22px}
  .p-hero .title.huge{font-size:min(9.6vw,16vh)}
  .hero-act{gap:8px}
  .hero-act .btn{display:none}
  .p-hero .tag{margin-top:10px;padding:5px 14px}
  .p-hero .counter{margin-top:8px;padding:7px 14px}
  .p-hero .pc{padding-bottom:12vh}
}

/* ---------- phones: the HUD rides in the ticker; a tighter hero */
@media (max-width:640px){
  .ticker{height:30px}
  .tk-hud{display:flex;flex:none;align-items:center;gap:6px;padding:0 10px;border-right:1px solid rgba(255,255,255,.14)}
  .tk-hud b{font:900 12px/1 var(--display);color:#86efac}
  .tk-stars{display:flex;gap:1px}
  .tk-stars svg{display:block;width:10px;height:10px;fill:rgba(255,255,255,.22)}
  .tk-stars i.on svg{fill:#fff}
  .p-hero .pc{justify-content:flex-start;padding-top:calc(var(--top) + 3vh);padding-bottom:max(56px,8vh)}
  .p-hero .pc-in{flex:1}
  .p-hero .vi-mark{width:64px}
  .hstars{gap:7px}.hstars svg{width:22px}
  .cuts{height:48svh}
  .tape{height:30px}
  .tape-slot.s1{height:56px}
  .tape-slot.s1 .tape{margin-top:-15px}
  .hero-act{margin-top:auto;gap:10px}
  .hero-act .btn{display:none}
  .cta-mega span{padding:16px 28px;font-size:17px}
  .posters{flex-wrap:wrap;justify-content:center}
  .poster{width:44vw}.poster.r1{width:min(260px,70vw)}
  .king{grid-template-columns:auto minmax(0,1fr);padding:12px}
  .king .btn{grid-column:1/-1}
}


/* ====================================================================================================================================
   F1: the Flywheel and Rewards (the /flywheel and /rewards pages, deck panel 05). Read-only ledger: every number is real.
   ==================================================================================================================================== */
.lstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(18px,3vh,28px);max-width:920px}
.lstats.four{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px}
.lstat{position:relative;overflow:hidden;padding:16px 18px;border-radius:18px;background:rgba(11,6,22,.66);border:1px solid rgba(255,212,0,.35)}
.lstat::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,#ffd400,var(--pink),transparent)}
.lstat span{display:block;font:700 10.5px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lstat b{display:block;margin-top:8px;font:900 clamp(22px,2.4vw,36px)/1 var(--display);color:#86efac;-webkit-text-stroke:1px #052e16}
.lstat small{display:block;margin-top:6px;font-size:12px;color:var(--soft)}
.lstats.mini .lstat{padding:12px 14px}.lstats.mini .lstat b{font-size:clamp(18px,1.9vw,28px)}
.lrows{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.lrow{display:grid;grid-template-columns:34px minmax(0,1.6fr) minmax(0,.8fr) minmax(120px,1fr);gap:14px;align-items:center;padding:10px 14px;border-radius:16px;background:rgba(18,10,34,.66);border:1px solid var(--line)}
.lrows.hist .lrow{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,.6fr) auto}
.lrk{font:900 18px/1 var(--display);color:#ffd400}
.lcoin{display:flex;align-items:center;gap:12px;min-width:0}
.lcoin img{flex:none;width:42px;height:42px;border-radius:12px;object-fit:cover;background:var(--sunset)}
.lcoin span{min-width:0}.lcoin b{display:block;font:800 15px/1.2 var(--display)}
.lcoin small{display:block;overflow:hidden;font-size:12px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.lmc{font:700 15px/1.2 var(--display)}.lmc small{display:block;font:500 11px/1.4 var(--body);color:var(--muted)}
.lw b{font:800 15px/1 var(--display);color:#ffd400}
.lw i{display:block;height:4px;margin-top:6px;border-radius:4px;background:linear-gradient(90deg,#ffd400,var(--pink));transform-origin:0 50%;transform:scaleX(var(--w,0))}
.ltime{font-size:13px;color:var(--soft)}
.ltx{display:flex;gap:10px;justify-content:flex-end}
.lk{font:700 12px/1 var(--body);color:var(--pink);white-space:nowrap}.lk:hover{color:#fff}
.lempty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 24px;border-radius:20px;background:rgba(18,10,34,.66);border:1px dashed rgba(255,212,0,.5)}
.lempty b{font:900 clamp(16px,1.6vw,22px)/1.2 var(--display);text-transform:uppercase;letter-spacing:.04em}
.lempty p{margin:0;color:var(--soft)}
/* deck panel 05 */
.wtop{margin-top:clamp(14px,2.4vh,22px);max-width:640px}
.wtop-h{margin-bottom:8px;font:800 11px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#ffd400}
.wtop-h small{margin-left:8px;font:500 11px/1 var(--body);letter-spacing:.02em;text-transform:none;color:var(--muted)}
.wtop .lrow{grid-template-columns:30px minmax(0,1.6fr) minmax(0,.8fr) minmax(90px,1fr);padding:6px 12px}
.wtop .lcoin img{width:34px;height:34px}
.p-wheel .title{font-size:min(clamp(36px,5.4vw,88px),9vh)}
.p-wheel .lead{max-width:560px}
@media (max-height:960px) and (min-width:641px){.p-wheel .lead{display:none}}
/* the pages */
.lpage{position:relative}
.lhero{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--top) + 16px) 0 clamp(36px,6vh,64px)}
.lbg{position:absolute;inset:0;z-index:-2}
.lbg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.lshade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,6,22,.94) 0%,rgba(11,6,22,.78) 48%,rgba(11,6,22,.5) 100%),linear-gradient(0deg,var(--ink) 0%,rgba(11,6,22,0) 40%)}
.lwrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
/* desktop: the page keeps clear of the HUD radar (bottom-left) */
@media (min-width:901px){.lwrap,.ldisc{width:min(1180px,calc(100% - 340px))}}
.ltitle{margin:10px 0 8px;font:900 clamp(44px,8vw,120px)/.9 var(--display);text-transform:uppercase;background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 30px rgba(11,6,22,.6))}
.lsub{margin:0;font:800 clamp(18px,2vw,28px)/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#ffd400}
.lexp{max-width:720px;margin:16px 0 0;font-size:clamp(15px,1.2vw,18px);color:var(--soft)}
.lstatus{max-width:760px;margin:14px 0 0;padding:10px 14px;border-left:3px solid #ffd400;background:rgba(255,212,0,.08);font-size:13.5px;color:var(--soft)}
.lhow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:920px;margin:20px 0 0;padding:0;list-style:none}
.lhow li{padding:14px 16px;border-radius:16px;background:rgba(11,6,22,.6);border:1px solid var(--line)}
.lhow b{font:900 22px/1 var(--display);color:transparent;-webkit-text-stroke:1.2px var(--pink)}
.lhow span{display:block;margin-top:6px;font:800 13px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase}
.lhow p{margin:6px 0 0;font-size:13.5px;color:var(--soft)}
.lsec{padding:clamp(24px,4vh,44px) 0}
.lhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px;margin-bottom:14px}
.lhead h2{font:900 clamp(22px,2.6vw,36px)/1 var(--display);text-transform:uppercase}
.lhead p{margin:0;max-width:640px;font-size:13.5px;color:var(--muted)}
.lform{display:flex;gap:10px;max-width:720px}
.lform input{flex:1;min-width:0;padding:13px 15px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:var(--text);font:500 14px var(--mono);outline:none}
.lform input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,95,162,.2)}
.lmsg{margin:14px 0 10px;color:var(--soft)}.lmsg.bad{color:var(--red)}
.ldisc{width:min(1180px,calc(100% - 32px));margin:8px auto 36px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.ldisc b{display:block;margin-bottom:6px;font:800 11px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.ldisc p{margin:5px 0 0;max-width:920px;color:var(--muted)}
/* the fee mode (F2): wizard step 2 (two radio cards), the review, the done screen, coin pages */
.fmode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;margin:0 0 22px;padding:0;border:0}
.fmode legend{grid-column:1/-1;float:left;width:100%;margin:0 0 10px;padding:0;font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fm{position:relative;display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border-radius:16px;border:1px solid var(--line2);background:rgba(255,255,255,.04);cursor:pointer;transition:border-color .2s,background-color .2s}
.fm:hover{border-color:rgba(255,95,162,.5)}
.fm.on{border-color:var(--pink);background:rgba(255,95,162,.14)}
.fm input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--pink)}
.fm input:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.fm-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.fm-b b{font:800 15px/1.2 var(--display);letter-spacing:.02em}
.fm-b span{font-size:14px;font-weight:600;color:var(--text)}
.fm-b small{font-size:12.5px;line-height:1.45;color:var(--muted)}
.mode{display:inline-block;font:700 10.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.mode.m-creator{background:rgba(56,189,248,.16);color:var(--teal)}
.mode.m-rewards{background:rgba(255,212,0,.16);color:#ffd400}
.cmode{margin:14px 0 0;max-width:620px;font-size:13.5px;color:var(--soft)}
.cmode a{color:var(--pink);font-weight:700;text-decoration:none}.cmode a:hover{text-decoration:underline}
.done .dmode{color:var(--soft)}
@media (max-width:640px){.fmode{grid-template-columns:1fr}}
@media (max-width:900px){
  .lstats.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lhow{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lstats{grid-template-columns:1fr 1fr}.lstats .lstat:first-child{grid-column:1/-1}
  .lstats.four .lstat:first-child{grid-column:auto}
  .lrow,.wtop .lrow{grid-template-columns:26px minmax(0,1fr) auto;gap:10px}
  .lrow .lw{grid-column:2/-1}
  .lrows.hist .lrow{grid-template-columns:minmax(0,1fr) auto}
  .lrows.hist .lrow .ltime,.lrows.hist .lrow .ltx{grid-column:1/-1;justify-content:flex-start}
  .lform{flex-direction:column}
}

/* ---------- page changes (View Transitions API): the old page recedes, the new one rises; the coin picture flies on its own */
::view-transition-old(root){animation:vt-out .42s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vt-in .62s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:scale(.965)}}
@keyframes vt-in{from{opacity:0;transform:translate3d(0,48px,0)}}
::view-transition-group(coin-hero){animation-duration:.62s;animation-timing-function:var(--ease)}
::view-transition-old(coin-hero),::view-transition-new(coin-hero){height:100%;object-fit:cover;border-radius:24px;overflow:hidden}

/* ---------- deck mode: pinned panels and the curtain (desktop and tablets, motion allowed, not too short) */
@media (min-width:641px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
  .deck .slot{height:200vh;height:200svh;margin-top:-100vh;margin-top:-100svh}
  .deck .slot:first-child{margin-top:0}
  .deck .slot:last-child{height:100vh;height:100svh}
  .deck .slot.crew{--step:26svh;--dwell:calc(var(--step) * (var(--n) - 1));height:calc(200svh + var(--dwell))}
  .deck .panel{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
  .deck .slot:not(:first-child) .panel{box-shadow:0 -30px 70px rgba(4,1,12,.6)}
  .deck .pc{min-height:0;height:100%}
  .deck .p-launch .pc{height:auto}
  /* only the panels on screen (at most two during a transition) get their own layers */
  .deck .panel.live .zoom,.deck .panel.live .pc{will-change:transform}
  .deck .panel.live .veil{will-change:opacity}
  body.page-home .nav a.sec{display:none}
  /* CSS scroll-driven animations: --e over the first 100svh of the slot's view timeline, --c over the next panel's entry */
  html.sda .deck .slot{animation:deck-e linear both,deck-c linear both;animation-timeline:view(),view();animation-range:cover 0% cover 100svh,cover calc(100svh + var(--dwell,0px)) cover calc(200svh + var(--dwell,0px))}
  html.sda .deck .slot:first-child{animation:deck-c linear both;animation-timeline:view();animation-range:cover calc(100svh + var(--dwell,0px)) cover calc(200svh + var(--dwell,0px))}
  html.sda .deck .slot:last-child{animation:deck-e linear both;animation-timeline:view();animation-range:cover 0% cover 100svh}
}
@media (max-height:760px){.cue{display:none}}
@media (max-height:820px) and (min-width:641px){.p-wanted .lead{display:none}}
/* a full board (leader + four rows) needs the room of the lead on screens up to 980 px tall */
@media (max-height:980px) and (min-width:641px){.p-wanted:has(.poster[data-coin]) .lead{display:none}}
@media (max-width:1180px){.nav a.sec{display:none}}
@media (max-width:900px){.nav{display:none}}

/* ---------- portrait screens: the cast portrait covers the whole frame, text sits on a bottom shade */
@media (max-aspect-ratio:1/1){
  .ph .bleed{display:none}
  .ph .por{left:0;right:0;width:100%;-webkit-mask-image:none;mask-image:none;object-position:50% 20%}
  .side-r .shade,.side-l .shade{background:linear-gradient(180deg,rgba(11,6,22,.6) 0%,rgba(11,6,22,.1) 22%,rgba(11,6,22,.45) 52%,rgba(11,6,22,.92) 78%,var(--ink) 100%)}
  .pc{justify-content:flex-end}
  .pc-in,.panel:not(.p-crew).txt-r .pc-in{width:auto;max-width:640px}
  .panel.txt-r .pc{align-items:stretch}
}

/* ---------- wide landscape screens, >= 900 px and >= 7:5 (SCENE_MQ in app.js): the artist's 16:9 scenes full-bleed, no blurred fill; the subject keeps its
   focus side, the text the calm side, with a light shade there and a stronger soft scrim only for calm sides that are bright or busy */
@media (min-width:900px) and (min-aspect-ratio:7/5){
  .ph .bleed{display:none}
  .ph .por{left:0;right:0;width:100%;-webkit-mask-image:none;mask-image:none;object-position:88% 38%}
  .side-l .por,.gi.f-left .por{object-position:12% 38%}
  .gi.f-right .por{object-position:88% 38%}
  .f-right .kb,.gi.f-right .kb{transform-origin:70% 40%}
  .f-left .kb,.gi.f-left .kb{transform-origin:30% 40%}
  .side-r .shade,.gi.f-right .shade{background:linear-gradient(90deg,rgba(11,6,22,.84) 0%,rgba(11,6,22,.58) 28%,rgba(11,6,22,.16) 50%,rgba(11,6,22,0) 66%),linear-gradient(0deg,rgba(11,6,22,.82) 0%,rgba(11,6,22,0) 30%),linear-gradient(180deg,rgba(11,6,22,.5) 0%,rgba(11,6,22,0) 18%)}
  .side-l .shade,.gi.f-left .shade{background:linear-gradient(270deg,rgba(11,6,22,.84) 0%,rgba(11,6,22,.58) 28%,rgba(11,6,22,.16) 50%,rgba(11,6,22,0) 66%),linear-gradient(0deg,rgba(11,6,22,.82) 0%,rgba(11,6,22,0) 30%),linear-gradient(180deg,rgba(11,6,22,.5) 0%,rgba(11,6,22,0) 18%)}
  .scrim .shade::before{content:"";position:absolute;inset:0;background:radial-gradient(46% 72% at 27% 54%,rgba(11,6,22,.74),rgba(11,6,22,.4) 55%,rgba(11,6,22,0) 82%)}
  .scrim.f-left .shade::before{background:radial-gradient(46% 72% at 73% 54%,rgba(11,6,22,.74),rgba(11,6,22,.4) 55%,rgba(11,6,22,0) 82%)}
  /* many subjects stand near the centre, so every scene is pushed 15 % towards its focus edge (a static scale about the far edge) */
  .ph .por{transform:scale(1.15)}
  .side-r .por,.gi.f-right .por{transform-origin:0 40%}
  .side-l .por,.gi.f-left .por{transform-origin:100% 40%}
  /* the crew: the text is a compact column that glides to the calm edge of the picture shown (transform only) */
  .p-crew .pc-in{width:min(460px,34vw);transition:transform 1.1s var(--ease)}
  .p-crew.txt-r .pc-in{transform:translate3d(calc(100vw - var(--padx) - var(--padr) - 100%),0,0)}
  .p-crew .title{font-size:min(clamp(40px,5.6vw,92px),10vh)}
  .p-crew .gcount b{font-size:min(clamp(48px,6.4vw,104px),12vh)}
  .p-crew .gbar{gap:20px}
}

/* ---------- tablets */
@media (max-width:980px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fwrap{grid-template-columns:1fr 1fr}
  .fcol.about{grid-column:1/-1}
  .cwrap{grid-template-columns:minmax(200px,320px) minmax(0,1fr)}
  .stp{grid-template-columns:1fr;gap:18px}
  .st-head{position:static}
  .st-n{font-size:72px}
  .sheet .sub{max-width:none}
}

/* ---------- phones: natural scrolling, rail hidden, same reveals */
@media (max-width:640px){
  :root{--padx:20px;--padr:20px;--top:100px;--hdr:60px}
  .rail,.glow{display:none}
  .top{gap:10px;padding:10px 14px}
  .top .right .pill,.top .right .ghost{display:none}
  .top .right .snd{display:inline-flex;width:40px;min-height:40px}
  .top .btn.primary{min-height:40px;padding:0 16px;font-size:13px}
  .brand{gap:9px}.brand .mark img{width:36px;height:36px}.brand .word{font-size:11px}.brand .word small{font-size:8.5px}
  .ph{bottom:auto;height:100vh;height:100svh}
  .panel{background:var(--ink)}
  .pc{padding-bottom:44px}
  .title{font-size:min(clamp(40px,12vw,72px),9.5vh)}
  .title.huge{font-size:clamp(32px,10.2vw,72px)}
  .kicker{letter-spacing:.45em;text-indent:.45em}
  /* phone hero: the title group sits in the top band, the action stack at the bottom (layout in the v3 block). Behind the trailer cut
     the dusk scrim is >= .56 across the title band, so even the small kicker keeps >= 4.5:1 over the brightest frame (sRGB blend
     1 - .96 * .56 = .46 -> luminance .18 -> 1.05 / .23 = 4.6:1); the tagline and the counter carry their own .68 / .72 pills */
  .hero-ph .full{object-position:57% 50%}
  .hero-ph .shade{background:linear-gradient(180deg,rgba(11,6,22,.62) 0%,rgba(11,6,22,.58) 16%,rgba(11,6,22,.58) 44%,rgba(11,6,22,.3) 56%,rgba(11,6,22,.7) 78%,rgba(11,6,22,.9) 100%)}
  .tag{color:#fff;text-shadow:0 1px 14px rgba(6,3,13,.8)}
  .cue{display:none}
  .btn.big{min-height:52px;padding:0 22px;font-size:15px}
  .p-hero .cta .btn{flex:1 1 100%}
  .lc{width:82vw;grid-template-columns:96px minmax(0,1fr)}
  .rh{display:none}
  .empty{padding:22px 20px}
  .leader{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .leader .btn{grid-column:1/-1}
  .leader.open{grid-template-columns:1fr}
  .gbar{gap:18px}
  .fwrap{grid-template-columns:1fr 1fr;gap:18px}
  .fcol.about,.fcol:last-child{grid-column:1/-1}
  .coinhero{padding:calc(var(--top) + 4px) 16px 48px}
  .cwrap{grid-template-columns:1fr;gap:22px}
  .cimg{width:min(300px,78vw);margin:0 auto}
  .ctitle{font-size:clamp(28px,9vw,44px)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sheet-top{gap:10px;padding:10px 12px}
  .steps{gap:6px}
  .steps span{font-size:0;gap:0}
  .steps span b{font-size:11px}
  .steps .sep{width:14px}
  .sheet-main{padding:20px 16px 40px}
  .st-n{font-size:56px;margin-bottom:8px}
  .coinrow{grid-template-columns:1fr}
  .upl{width:100%;height:200px}
  .form{grid-template-columns:1fr 1fr}
  .review{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .actions .btn.big{flex:1}
}

/* ---------- reduced motion: plain stacking, no scale or parallax, no letter reveals, no slides */
@media (prefers-reduced-motion:reduce){
  .panel.live .zoom>.kb,.panel.live .gi.on>.kb,.cbg.city img{animation:none}
  .zoom{transform:none}
  .pc{transform:none;opacity:1}
  .title .ch{transform:none;transition:none}
  .rv,.hc{opacity:1;transform:none;transition:none}
  .gi,.gi.l{transform:none;transition:opacity .25s linear}
  .p-crew .pc-in{transition:none}
  .cue i,.counter i,.eyebrow-s i,.typing::after{animation:none}
  .modal.opening .sheet,.modal.closing .sheet,.modal.opening::before,.modal.closing::before{animation:none}
  .btn,.lc,.rw,.leader,.rh-b,.lc-img img,.bar i{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .intro,.sirens,.gh,.ms-cash,.flash,.tl{display:none!important}
  .tape-in,.tk-track,.rd-beam,.blip::after,.hstars i,.hstars svg,.cta-mega::before,.cta-mega span::after,.king::before,.fx-toast,.fx-toast.out,.fx-banner.go .fb-in,.mission.go,.ms-t,.ms-r,.ms-coin,.ms-act{animation:none!important}
  .hstars i{opacity:1}
  .tk-view{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .hud-cash .col,.cuts .cut,.poster,.king{transition:none}
}

/* ====================================================================================================================================
   T1: the platform's own token (hero block, footer line, ticker item) · R2.1: a coin's platform share on its page.
   Hidden while /api/state has no platformToken. Addresses keep their exact case (.nt); long ones wrap instead of overflowing.
   ==================================================================================================================================== */
.ca-hero{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(760px,100%);margin-top:16px}
.ca-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;padding:9px 10px 9px 18px;border-radius:999px;background:rgba(11,6,22,.78);border:1px solid rgba(255,212,0,.55);box-shadow:0 0 0 1px rgba(255,212,0,.12),0 10px 34px rgba(0,0,0,.4),0 0 26px rgba(255,212,0,.18)}
.ca-sym{font:900 clamp(15px,1.4vw,20px)/1 var(--display);letter-spacing:.04em;color:#ffd400}
.ca-row i{font-style:normal;color:var(--dim)}
.ca-lbl{font:800 11px/1 var(--display);letter-spacing:.18em;color:var(--soft)}
.ca-addr{font:600 clamp(12px,1.05vw,15px)/1.3 var(--mono);color:#fff;overflow-wrap:anywhere;word-break:break-all;text-align:center}
.ca-copy{min-height:32px;padding:0 14px;border-radius:999px;border:0;background:linear-gradient(135deg,#ffd400,var(--orange));color:#1b1206;font:800 12px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;transition:transform .2s var(--ease)}
.ca-copy:hover{transform:translate3d(0,-1px,0) scale(1.04)}
.ca-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:13px;font-weight:600}
.ca-links a{color:var(--soft);text-shadow:0 1px 10px rgba(6,3,13,.9)}.ca-links a:hover{color:#ffd400}
.fca{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px!important;color:var(--soft)!important}
.fca code{font:600 12px/1.4 var(--mono);color:#fff;overflow-wrap:anywhere;word-break:break-all}
.fca b{color:#ffd400}
.fca .ca-copy{min-height:26px;padding:0 10px;font-size:10.5px}
.fca .ca-links{justify-content:flex-start;gap:4px 12px;font-size:12px}
.tk.ca{color:#fff}.tk.ca b{color:#ffd400}
.crev{display:flex;align-items:baseline;gap:8px;max-width:620px;margin:8px 0 0;font-size:13.5px;color:var(--soft)}
.crev .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dim);transform:translateY(-1px)}
.crev.rv-shared .dot,.crev.rv-fee_paid .dot{background:var(--palm);box-shadow:0 0 10px rgba(52,211,153,.7)}
.crev.rv-pending .dot{background:#ffd400;animation:pulse 1.6s ease-in-out infinite}
@media (max-width:640px){
  .ca-hero{margin-top:12px;gap:6px}
  .ca-row{border-radius:20px;padding:8px 10px}
  .ca-addr{font-size:11.5px}
  .ca-links{font-size:12px}
}
@media (max-height:780px) and (min-width:641px){ .ca-hero{margin-top:10px} .ca-links{display:none} }