/* Street Pro's self-hosted faces, served beside this file under /assets. */
@font-face{font-family:"Archivo";src:url("archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("archivo-italic.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}
@font-face{font-family:"Anton";src:url("anton.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("jetbrains-mono.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{
  color-scheme:dark;
  --frame:#121316;--ink:#0e0f11;--rail:#26272b;--paper:#ebebed;--paper2:#f6f6f7;--hatch:#d9d9dc;
  --text:#f4f4f2;--muted:#9a9ca3;--lime:#bcff5b;--lime2:#a0fe5d;--violet:#7d5cfb;--orchid:#a25bfd;--lilac:#b7a4ff;
  --expo:cubic-bezier(.16,1,.3,1);--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.3,1.25,.5,1);--inout:cubic-bezier(.76,0,.24,1);
  --cond:'Anton',Impact,'Arial Narrow',sans-serif;--wide:'Archivo',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --base:.08s;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;background:var(--frame);color:var(--text)}
body{font:500 15px/1.5 var(--wide);overflow:hidden;
  background:radial-gradient(55% 45% at 12% 105%,rgba(125,92,251,.22),transparent 70%),radial-gradient(40% 35% at 95% 0,rgba(188,255,91,.07),transparent 70%),var(--frame)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono{font:700 11px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.cond{font-family:var(--cond);font-weight:400;text-transform:uppercase;line-height:.9}
.wide{font-family:var(--wide);font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:.01em;line-height:.95}

/* ------------------------------------------------------------ frame */
.app{position:relative;height:100%;min-height:680px;overflow:clip;display:grid;grid-template-rows:auto 1fr;padding:18px 24px 0 18px}
.top{position:relative;z-index:6;display:flex;align-items:center;justify-content:flex-end;height:70px}
.nav{position:absolute;top:-18px;right:-24px;display:flex;gap:18px;padding:18px 36px 16px 40px;background:var(--frame);border:3px solid var(--rail);border-top:0;border-right:0;border-bottom-left-radius:36px}
.nav::before{content:'';position:absolute;left:-26px;top:0;width:26px;height:26px;background:radial-gradient(circle at 0 100%,transparent 23px,var(--rail) 23px 26px,var(--frame) 26px)}
.nav-btn{position:relative;z-index:1;width:50px;height:50px;display:grid;place-items:center;border-radius:14px;color:#fff;transition:color .35s var(--ease),transform .22s var(--ease)}
.nav-btn:hover{color:#dfe8c8}
.nav-btn:active{transform:scale(.92);transition-duration:.08s}
.nav-btn[aria-current=true]{color:var(--lime)}
.nav-btn svg{width:26px;height:26px}
.nav-btn .tip{position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 4px;opacity:0;pointer-events:none;white-space:nowrap;padding:6px 10px;border-radius:8px;background:#f4f4f2;color:#111;font:700 11px/1 var(--wide);transition:opacity .18s ease,translate .24s var(--ease)}
.nav-btn:hover .tip,.nav-btn:focus-visible .tip{opacity:1;translate:-50% 0}

.stage{position:relative;display:grid;grid-template-columns:76px 1fr;gap:18px;min-height:0;padding-bottom:clamp(58px,9vh,96px)}
.giant{position:absolute;left:94px;right:0;bottom:-2.4vw;z-index:0;font:italic 900 15.5vw/1 var(--wide);font-stretch:125%;letter-spacing:.02em;color:#1b1c20;white-space:nowrap;pointer-events:none;user-select:none;transform:translateX(calc(var(--mx,0) * -18px))}

/* rail */
.rail{position:relative;z-index:2;align-self:end;display:grid;justify-items:center;gap:18px;padding:12px 10px;margin-bottom:-6px;border:3px solid var(--rail);border-radius:30px;background:var(--frame)}
.rail-btn{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--lime);color:#000;transition:transform .22s var(--ease),filter .2s ease,background-color .2s ease,opacity .2s ease}
.rail-btn:hover{filter:brightness(1.08)}
.rail-btn:active{transform:scale(.92);transition-duration:.08s}
.rail-btn[disabled]{background:#cfd1d4;opacity:.9;cursor:default;filter:none}
.rail-btn svg{width:30px;height:30px}
.rail-num{height:58px;width:52px;overflow:hidden;display:grid;place-items:center}
.rail-roll{display:grid;transform:rotate(90deg)}
.rail-clip{height:52px;overflow:hidden}
.rail-col{display:grid;transition:transform .6s var(--expo)}
.rail-col span{height:52px;font:400 52px/52px var(--cond);text-align:center}
.rail[data-v=rank] .rail-col{transform:translateY(-52px)}

/* ------------------------------------------------------------ panel */
.panel{position:relative;z-index:1;border-radius:40px;overflow:hidden;background:var(--paper);min-height:0;isolation:isolate}
.hatch{position:absolute;inset:0 -40px 0 -200px;background:repeating-linear-gradient(-45deg,var(--hatch) 0 2px,transparent 2px 9px);animation:hatch 14s linear infinite;z-index:-1}
@keyframes hatch{to{transform:translateX(127.28px)}}
.deco{position:absolute;background:var(--paper2);z-index:-1}
.deco-a{left:0;top:9%;width:31%;height:8%;border-radius:0 40px 40px 0}
.deco-b{right:0;bottom:0;width:24%;height:9%;border-radius:40px 0 0 0}
.deco-c{left:14%;bottom:0;width:36%;height:5%;border-radius:40px 40px 0 0}
.band{position:absolute;left:0;right:0;top:24%;height:50%;background:var(--ink)}
.band::after{content:'';position:absolute;right:0;bottom:0;width:40%;height:22%;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px);border-top-left-radius:40px}
.slab{position:absolute;left:0;top:24%;height:50%;width:47%;background:var(--lime);clip-path:polygon(0 0,100% 0,86% 100%,0 100%)}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
.note{position:absolute;right:30px;top:32px;z-index:3;color:#7d7f86}

/* views share the panel; only the lit one is visible */
.view{position:absolute;inset:0;visibility:hidden}
.view.on{visibility:visible}
.slab-txt{position:absolute;left:7%;top:calc(24% + 5%);color:#000;display:grid;gap:18px}
.slab-txt .cond{font-size:clamp(28px,4.6vh,46px);letter-spacing:.02em}
.striped{justify-self:start;padding:.04em .1em .04em 0;font:400 clamp(120px,27vh,250px)/.82 var(--cond);color:transparent;-webkit-text-stroke:3px #000;background:repeating-linear-gradient(-45deg,#000 0 3px,transparent 3px 7px);-webkit-background-clip:text;background-clip:text;letter-spacing:-.01em}
.art{position:absolute;left:26%;top:49%;translate:0 -50%;width:min(66vh,36vw);aspect-ratio:1}
#v-rank .art{left:14%}
.par{position:absolute;inset:0;transform:translate(calc(var(--mx,0) * 16px),calc(var(--my,0) * 12px))}
.art canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.art .shadow{position:absolute;left:14%;right:14%;bottom:-3%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(2px)}
.info{position:absolute;right:4%;top:calc(24% + 7%);width:min(29%,420px);display:grid;gap:14px}
.info .mono{color:var(--lilac)}
.info h1,.info h2{margin:0;font-size:clamp(30px,3.5vw,54px)}
#v-rank .info{left:47%;width:auto}
#rName{min-width:0;font-size:clamp(30px,3vw,48px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info p{margin:0;color:#c9cad0;max-width:34ch}
.live{display:flex;align-items:center;gap:10px;color:#c9cad0;font-weight:700;font-size:14px}
.live b{font:400 22px/1 var(--cond);color:#fff;letter-spacing:.02em}
.live i{width:8px;height:8px;border-radius:50%;background:var(--lime);position:relative}
.live i::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--lime);animation:ping 1.8s ease-out infinite}

/* dock: the lime-ringed pill under the band */
.dock{position:absolute;left:50%;bottom:6%;translate:-50% 0;display:flex;align-items:center;gap:6px;padding:5px;border-radius:99px;background:var(--ink);box-shadow:0 0 0 3px var(--lime),0 18px 40px rgba(0,0,0,.28)}
.dbtn{height:58px;min-width:58px;padding:0 22px;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--lime);color:#000;font:italic 900 15px/1 var(--wide);font-stretch:118%;text-transform:uppercase;letter-spacing:.02em;box-shadow:inset 0 0 0 3px #000;transition:transform .22s var(--ease),filter .2s ease,gap .24s var(--ease)}
.dbtn:hover{filter:brightness(1.08);gap:14px}
.dbtn:active{transform:scale(.95);transition-duration:.08s}
.dbtn svg{width:22px;height:22px;flex:none}
.dbtn.round{padding:0;width:66px}
.dbtn.dark{background:#1d1e22;color:#fff;box-shadow:inset 0 0 0 2px #34363c}
.dbtn.dark:hover{color:var(--lime);box-shadow:inset 0 0 0 2px var(--lime)}
.cubes{position:relative;display:flex;gap:8px;padding:0 6px}
.cube-btn{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#1d1e22;transition:transform .32s var(--spring),background-color .2s ease}
.cube-btn svg{width:34px;height:34px;transition:transform .32s var(--spring)}
.cube-btn:hover{background:#2a2c31}
.cube-btn:hover svg{transform:rotate(-12deg) scale(1.08)}
.cube-btn[aria-current=true] svg{transform:scale(1.12)}
.cube-ind{position:absolute;left:6px;top:0;width:54px;height:54px;border-radius:50%;box-shadow:0 0 0 3px var(--lime),0 0 18px rgba(188,255,91,.45);transition:transform .5s var(--spring);pointer-events:none}


/* rank view pieces */
.ring{position:absolute;inset:14%;border-radius:50%;border:3px dashed rgba(188,255,91,.45);animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.cube-big{position:absolute;left:31%;top:31%;width:38%;height:38%}
.cube-big svg{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 10px 0 rgba(0,0,0,.35))}
.cube-shadow{position:absolute;left:31%;width:38%;top:73%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.lvl{display:flex;align-items:baseline;gap:14px}
.lvl b{font:400 34px/1 var(--cond);letter-spacing:.02em}
.lvl span{color:var(--muted);font-weight:700}
.xp{height:10px;border-radius:99px;background:#26272c;overflow:hidden}
.xp i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--lime2),var(--lime));transform-origin:left;transform:scaleX(var(--p,0));transition:transform 1s var(--expo);box-shadow:0 0 12px rgba(188,255,91,.4)}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:26px;margin-top:4px}
.stats div{display:grid;gap:4px}
.stats b{font:400 30px/1 var(--cond);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.stats .mono{color:var(--muted);font-size:10px}
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}
.lvlbox{display:grid;gap:10px}
.bit{position:absolute;width:10px;height:10px;border:2px solid #000;pointer-events:none}

/* ------------------------------------------------------------ entry choreography */
.ready .nav{animation:navIn .9s var(--expo) .12s backwards}
.ready .rail{animation:slideL .9s var(--expo) .3s backwards}
.ready .panel{animation:panelIn 1.05s var(--expo) .08s backwards}
.ready .band{animation:bandIn .9s var(--expo) .28s backwards;transform-origin:right}
.ready .slab{animation:slabIn .9s var(--expo) .36s backwards}
.ready .giant{animation:giantIn 1.2s var(--expo) .2s backwards}
.ready .note{animation:fadeUp .7s var(--expo) .5s backwards}
.ready .view.on .e{animation:var(--k,fadeUp) .8s var(--expo) calc(var(--base) + var(--i,0) * 70ms) backwards}
body.intro{--base:.5s}
.kL{--k:slideL}.kR{--k:slideR}.kP{--k:artPop}.kS{--k:stripeIn}.kU{--k:fadeUp}
@keyframes dropIn{from{opacity:0;transform:translateY(-16px)}}
@keyframes navIn{from{transform:translateY(-110%)}}
@keyframes slideL{from{opacity:0;transform:translateX(-36px)}}
@keyframes slideR{from{opacity:0;transform:translateX(56px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}}
@keyframes panelIn{from{clip-path:inset(12% 10% 12% 10% round 40px);transform:scale(.97)}to{clip-path:inset(0 0 0 0 round 40px)}}
@keyframes bandIn{from{transform:scaleX(0)}}
@keyframes slabIn{from{clip-path:polygon(0 0,0 0,-14% 100%,0 100%)}}
@keyframes giantIn{from{opacity:0;translate:0 40%}}
@keyframes popIn{from{opacity:0;transform:scale(.6) rotate(-6deg)}}
@keyframes artPop{0%{opacity:0;transform:translateY(80px) scale(.84)}60%{opacity:1;transform:translateY(-8px) scale(1.02)}100%{transform:none}}
@keyframes stripeIn{from{opacity:0;transform:translateY(26px)}}

/* panel wipe between views */
.wipe{position:absolute;top:-10%;bottom:-10%;left:-30%;width:160%;z-index:10;pointer-events:none;transform:translateX(-130%) skewX(-16deg);
  background:linear-gradient(90deg,var(--ink) 0 4%,var(--lime) 4% 86%,var(--ink) 86% 91%,transparent 91% 93%,var(--violet) 93% 96%,transparent 96%)}
.wipe svg{position:absolute;left:45%;top:50%;width:120px;height:120px;translate:-50% -50%;transform:skewX(16deg)}

/* ------------------------------------------------------------ staff window */
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px}
.scrim{position:absolute;inset:0;background:rgba(8,9,10,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s ease}
.win{position:relative;width:min(540px,100%);padding:74px 44px 36px;background:#111214;border-radius:32px;color:#fff;
  clip-path:circle(0 at 88% 3%);transition:clip-path .7s var(--expo);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.win-cut{position:absolute;right:0;top:0;width:36%;height:40px;background:var(--lime);clip-path:polygon(18% 0,100% 0,100% 100%,30% 100%);border-top-right-radius:32px}
.win-ctl{position:absolute;right:18px;top:4px;z-index:2;display:flex;gap:4px}
.win-ctl button{width:34px;height:32px;display:grid;place-items:center;color:#000;border-radius:8px;transition:background-color .2s ease,transform .22s var(--ease)}
.win-ctl button:hover{background:rgba(0,0,0,.12)}
.win-ctl button:active{transform:scale(.9)}
.win-ctl svg{width:22px;height:22px}
.win-body{position:relative;display:grid;gap:18px}
.win h2{margin:0 0 6px;text-align:center;font-size:30px}
.win p{margin:0;text-align:center;color:#a9abb2;font-size:14px}
.field{display:flex;align-items:center;gap:16px;height:64px;padding:0 20px;border-radius:16px;background:#dededf;color:#3c3d42;font-weight:600;font-size:16px}
.field svg{width:26px;height:26px;color:#4a4b50;flex:none}
.field em{margin-left:auto;font:700 10px/1 var(--mono);letter-spacing:.14em;color:#6b6d73;font-style:normal}
.go{height:66px;border-radius:16px;background:var(--lime);color:#000;display:flex;align-items:center;justify-content:center;gap:12px;font:italic 900 20px/1 var(--wide);font-stretch:125%;text-transform:uppercase;margin-top:10px;transition:transform .22s var(--ease),filter .2s ease,box-shadow .3s var(--ease)}
.go:hover{filter:brightness(1.06);box-shadow:0 12px 34px -8px rgba(188,255,91,.55)}
.go:active{transform:scale(.97);transition-duration:.08s}
.go svg{width:24px;height:24px;transition:transform .24s var(--ease)}
.go:hover svg{transform:translateX(4px)}
.win-foot{display:flex;justify-content:space-between;gap:16px;margin-top:4px;font:italic 800 12px/1.3 var(--wide);font-stretch:118%}
.win-foot button{transition:color .2s ease}
.win-foot button:hover{color:var(--lime)}
.win-foot a{text-decoration:underline;text-underline-offset:3px;transition:color .2s ease}
.win-foot a:hover{color:var(--lime)}
.win-foot span{color:#7d7f86;text-align:right}
.modal.open .scrim{opacity:1}
.modal.open .win{clip-path:circle(150% at 88% 3%)}
.modal.open .win-body>*{animation:fadeUp .7s var(--expo) backwards;animation-delay:calc(.12s + var(--i,0) * 60ms)}
.modal.closing .win{transition:clip-path .4s cubic-bezier(.7,0,.84,0)}

/* ------------------------------------------------------------ loader */
#boot{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--frame);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .95s var(--expo)}
#boot.out{clip-path:polygon(100% 0,100% 0,84% 100%,84% 100%)}
.blob-wrap{position:relative;width:270px;height:200px;display:grid;place-items:center}
.blob-s{position:absolute;inset:0;transition:transform .8s cubic-bezier(.7,0,.84,0)}
.blob{position:absolute;inset:0;background:var(--lime);border-radius:56% 44% 47% 53% / 55% 52% 48% 45%;animation:morph 2.2s ease-in-out infinite alternate,spin 11s linear infinite}
@keyframes morph{
  0%{border-radius:56% 44% 47% 53% / 55% 52% 48% 45%}
  33%{border-radius:42% 58% 60% 40% / 45% 38% 62% 55%}
  66%{border-radius:60% 40% 38% 62% / 58% 60% 40% 42%}
  100%{border-radius:48% 52% 55% 45% / 38% 55% 45% 62%}}
#boot.grow .blob-s{transform:scale(16)}
.load{position:relative;display:flex;align-items:center;gap:14px;color:#000;transition:opacity .2s ease,transform .3s var(--ease)}
#boot.grow .load{opacity:0;transform:scale(.9)}
.load b{display:block;font:400 34px/.95 var(--cond);letter-spacing:.01em;transform:skewX(-10deg)}
.load small{display:block;font:700 9px/1 var(--mono);letter-spacing:.42em;margin-top:6px}
.load small i{font-style:normal;animation:blink 1.2s steps(1) infinite}
.load small i:nth-child(2){animation-delay:.2s}.load small i:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:0}}
.mascot{width:44px;height:44px;animation:hop .55s cubic-bezier(.3,0,.4,1) infinite alternate}
@keyframes hop{from{transform:translateY(4px) rotate(-8deg) scaleY(.94)}to{transform:translateY(-8px) rotate(6deg)}}

/* ------------------------------------------------------------ narrow screens: stack */
@media (max-width:900px){
  body{overflow:auto}
  .app{height:auto;padding:12px 16px 0}
  .nav{position:static;margin-left:auto;padding:0;border:0;background:none;gap:4px}.nav::before{display:none}
  .stage{grid-template-columns:1fr;padding-bottom:110px}
  .rail,.giant{display:none}
  .panel{min-height:900px}
  .band,.slab{top:20%;height:34%}.slab{width:62%}
  .slab-txt{top:23%}
  .art{left:50%;top:auto;bottom:22%;translate:-50% 0;width:min(78vw,380px)}
  .info{left:6%;right:6%;width:auto;top:56%;display:none}
  #v-rank .art{left:50%;bottom:44%}
  #v-rank .info{display:grid;left:6%;right:6%;top:56%}
  #rName{font-size:clamp(30px,6vw,44px)}
  .dock{bottom:3%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}