/* OUTLIER — app shell views */
.view{position:fixed;inset:0;z-index:3;overflow:auto;padding:72px 16px 24px;display:flex;flex-direction:column;align-items:center}
.view.v-game{overflow:hidden;padding:0}
.corner{position:fixed;z-index:9;display:flex;flex-direction:column;gap:6px}
.corner.tl{left:10px;top:10px}.corner.tr{right:10px;top:10px}
.iconbtn{width:44px;height:40px;border:2px solid var(--line);background:var(--panel-solid);color:#cfd4ff;font-family:var(--px);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.iconbtn:hover{border-color:var(--cyan)}
.burger{display:flex;flex-direction:column;gap:4px}.burger i{display:block;width:20px;height:3px;background:#cfd4ff}

/* title */
.v-title{justify-content:space-between;padding-top:12vh}
.title-wrap{text-align:center}
.subtitle{margin-top:24px;font-weight:700;font-size:24px;letter-spacing:12px;color:var(--cyan);text-shadow:0 0 14px rgba(95,243,255,.7)}
.tag{margin-top:16px;font-size:16px;letter-spacing:3px;color:var(--ink-2)}
.title-actions{width:min(520px,94vw);display:flex;flex-direction:column;gap:16px;margin-bottom:4vh}
.livecard{position:relative;display:flex;flex-direction:column;gap:2px;padding:16px 20px;background:var(--panel-solid);border:4px solid var(--cyan);text-decoration:none;color:var(--ink);box-shadow:0 0 16px rgba(95,243,255,.3)}
.livecard .pill{position:absolute;left:16px;top:-14px;background:var(--cyan);color:#06061e;font-size:16px;letter-spacing:2px;padding:0 8px}
.livecard .lc-name{font-weight:700;font-size:24px;letter-spacing:6px}.livecard .lc-sub{font-size:16px;color:var(--ink-3)}
.title-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:16px;letter-spacing:2px;color:var(--ink-3)}
.tf-btns{display:flex;gap:8px}.tf-btns .btn{padding:6px 12px;text-decoration:none}

/* menu */
.menu{width:min(760px,96vw)}
.sect{margin-top:24px;font-size:16px;letter-spacing:4px;text-transform:uppercase;color:var(--ink-3);border-bottom:2px dashed #2a2468;padding-bottom:4px}
.grid,.hg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:12px}
.tile{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px;background:#0e0b34;border:2px solid #2a2470;color:var(--ink);text-decoration:none;cursor:pointer;text-align:left;font-family:var(--px);transition:border-color .15s,transform .1s}
.tile::before{content:'';position:absolute;left:0;top:0;width:24px;height:4px;background:var(--gc)}
.tile:hover{border-color:var(--gc);transform:translateY(-2px);box-shadow:0 0 18px color-mix(in srgb,var(--gc) 40%,transparent)}
.t-ic{height:48px;display:flex;align-items:center}.t-name{font-weight:700;font-size:16px;letter-spacing:4px;text-transform:uppercase}.t-tag{font-size:16px;color:var(--ink-3)}
.t-done{font-size:16px;color:#2ee6a8}.t-new{font-size:16px;color:var(--gc)}.t-new.live{color:#ff5fb4}

/* modal */
.modal{position:fixed;inset:0;z-index:20;background:rgba(4,2,14,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.mbox{width:min(560px,96vw)}
.avs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.av{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:#0e0b34;border:2px solid #2a2470;color:var(--ink);font-family:var(--px);font-size:16px;cursor:pointer}
.av small{font-size:16px;color:var(--ink-3)}.av.on{border-color:var(--cyan);box-shadow:0 0 12px rgba(95,243,255,.5)}.av:disabled{opacity:.35;cursor:not-allowed}

/* results */
.v-results{justify-content:center}
.results{width:min(560px,96vw);text-align:center}
.rs-score{margin-top:16px}.rs-n{font-weight:700;font-size:96px;line-height:1;color:var(--gold);text-shadow:-4px 0 rgba(255,61,154,.7),4px 0 rgba(46,240,255,.7),0 0 30px rgba(255,211,77,.7)}.rs-u{font-size:24px;color:var(--ink-2);margin-left:8px}
.rs-reached{margin-top:8px;font-size:16px;color:var(--ink-2)}.rs-reached b{color:#fff}
.rs-tiers{display:flex;gap:8px;justify-content:center;margin-top:16px}.rs-sum{margin-top:12px;font-size:16px;color:var(--ink-2)}
.rs-rank{margin-top:12px;font-size:16px;color:var(--cyan)}
.rs-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px}.rs-btns .btn{text-decoration:none}

/* board */
.board{width:min(640px,96vw)}
.tabs{display:flex;gap:8px;margin-top:16px}.tab{flex:1;font-family:var(--px);font-size:16px;letter-spacing:3px;text-transform:uppercase;padding:8px;background:#0e0b34;border:2px solid #2a2470;color:var(--ink-2);cursor:pointer}.tab.on{border-color:var(--cyan);color:#fff;box-shadow:0 0 12px rgba(95,243,255,.4)}
.sel{margin-top:12px;font-size:16px;padding:8px}
.mode-note{margin-top:12px;font-size:16px;color:var(--ink-3)}

/* profile */
.me{width:min(560px,96vw)}.me-top{display:flex;gap:16px;align-items:center;margin-top:12px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.stats div{background:#0d0a30;padding:12px;text-align:center}.stats b{display:block;font-size:32px;color:var(--cyan)}.stats span{font-size:16px;color:var(--ink-3)}
.bests{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin-top:8px;font-size:16px}.bests div{display:flex;justify-content:space-between}.bests b{color:var(--gold)}

/* host + join */
.hostgate,.joinbox,.wait{width:min(440px,96vw);margin-top:10vh}
.input.code{font-size:48px;text-align:center;letter-spacing:16px;text-transform:uppercase}
.jmsg{margin-top:8px;font-size:16px;color:var(--ink-2)}
.wait{text-align:center}.wtxt{margin-top:8px;color:var(--ink-2)}.wav{margin-top:24px}
.v-host{padding-top:64px}
.host-top{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:16px;width:min(1200px,96vw)}
.hcode{text-align:center}.hurl{font-size:16px;color:var(--cyan)}.hc{font-size:96px;letter-spacing:16px;line-height:1.1}
.qr{display:flex;justify-content:center;margin-top:8px}.qr canvas,.qr svg{image-rendering:pixelated;background:#fff;padding:8px}
.plist{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.pp{display:flex;gap:6px;align-items:center;padding:4px 10px;background:#0e0b34;border:2px solid #2a2470;font-size:16px;animation:pipPop .5s cubic-bezier(.2,1.7,.35,1)}
.hgames{width:min(1200px,96vw);margin-top:16px}
.v-host.playing .host-top,.v-host.playing .hgames{display:none}
.hstage{width:100%;flex:1;display:flex;flex-direction:column;align-items:center}
.errbox{margin-top:20vh;color:#ffb0b0}
body.nogl{background:radial-gradient(ellipse at 50% 30%,#2a1060,#07051a 70%)}
@media (max-width:700px){.host-top{grid-template-columns:1fr}.hc{font-size:64px}.avs{grid-template-columns:repeat(4,1fr)}.rs-n{font-size:64px}}
.title-wrap{position:relative;padding:24px 32px}
.title-wrap::before{content:'';position:absolute;inset:-10% -15%;background:radial-gradient(closest-side,rgba(10,6,40,.55),rgba(10,6,40,.35) 55%,transparent);z-index:-1}

@media (max-width:700px){
  .v-title{padding-top:9vh}
  .subtitle{font-size:16px;letter-spacing:8px}
  .title-actions{gap:24px;margin-top:32px}
  .btn.big{font-size:16px;letter-spacing:4px;padding:16px 16px}
  .livecard .lc-name{font-size:16px;letter-spacing:4px}
  .avs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .av{min-width:0;padding:6px 2px;font-size:8px;letter-spacing:1px}.av small{font-size:8px}
  .rows .av{padding:0}
}
/* pill sits inside the notched card (clip-path would cut it off outside) */
.livecard .pill{position:static;align-self:flex-start;margin-bottom:8px}

/* ===== view transitions ===== */
.view-ghost{position:fixed;inset:0;z-index:2;overflow:hidden;pointer-events:none;animation:ghostOut .24s cubic-bezier(.4,0,1,1) both}
@keyframes ghostOut{to{opacity:0;transform:translateY(-10px) scale(.985)}}
#veil{position:fixed;inset:0;z-index:1;background:#05030f;opacity:0;pointer-events:none}
#veil.dip{animation:veilDip .55s cubic-bezier(.4,0,.2,1)}
@keyframes veilDip{0%{opacity:.85}100%{opacity:0}}
.view>*{animation:viewIn .42s cubic-bezier(.16,1,.3,1) backwards}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}}
/* menu: panel settles, then its rows and tiles cascade in */
.v-menu .menu{animation:menuIn .46s cubic-bezier(.16,1,.3,1) backwards}
@keyframes menuIn{from{opacity:0;transform:translateY(18px) scale(.985)}}
.v-menu .menu>.label,.v-menu .menu>.logo,.v-menu .menu>.sect{animation:itemIn .4s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(60ms + var(--i,0) * 40ms)}
.v-menu .tile{animation:tileIn .44s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(140ms + var(--i,0) * 32ms)}
@keyframes itemIn{from{opacity:0;transform:translateY(8px)}}
@keyframes tileIn{from{opacity:0;transform:translateY(12px)}}
.v-menu .tile::before{animation:tabIn .5s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(260ms + var(--i,0) * 32ms)}
@keyframes tabIn{from{width:0}}
.v-game>*{animation:none}
.view-ghost,.view-ghost *{animation-name:none!important}
.view-ghost{animation:ghostOut .24s cubic-bezier(.4,0,1,1) both!important}

/* ===== sound toggle: crisp speaker, waves ripple while on; muting folds them away and draws a slash ===== */
#snd-btn .snd{display:block;overflow:visible}
#snd-btn .spk{fill:#e8eaff;transition:fill .25s,transform .25s cubic-bezier(.34,1.56,.64,1);transform-origin:8px 12px}
#snd-btn .w1,#snd-btn .w2,#snd-btn .mx{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#snd-btn .w1,#snd-btn .w2{stroke:var(--cyan);transform-origin:12px 12px;transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
#snd-btn .w1{animation:sndWave 1.8s ease-in-out infinite}
#snd-btn .w2{animation:sndWave 1.8s ease-in-out .25s infinite}
@keyframes sndWave{0%,100%{opacity:1}50%{opacity:.45}}
#snd-btn .mx{stroke:#ff6aa8;stroke-dasharray:8;stroke-dashoffset:8;transition:stroke-dashoffset .3s ease .08s}
#snd-btn.off .w1,#snd-btn.off .w2{animation:none;opacity:0;transform:scale(.4)}
#snd-btn.off .w2{transition-delay:.04s}
#snd-btn.off .mx{stroke-dashoffset:0}
#snd-btn.off .spk{fill:#8f93bf}
#snd-btn:active .spk{transform:scale(.88)}
#snd-btn:not(.off) .w2{transition-delay:.08s}
#snd-btn:hover .spk{fill:#ffffff}
@media (prefers-reduced-motion:reduce){#snd-btn .w1,#snd-btn .w2{animation:none}}
.v-board .board{min-height:min(560px,80vh)}

.me-miss{margin-top:12px;padding:10px 12px;font-size:16px;color:var(--ink-2);background:rgba(255,95,180,.08);box-shadow:inset 0 0 0 2px rgba(255,95,180,.3)}
.me-miss a{color:var(--cyan)}

/* ===== leaderboard (clean): segmented tabs · podium · hairline list ===== */
.board{width:min(600px,96vw);padding:24px 28px 20px}
.lb-logo{font-size:40px;letter-spacing:6px;margin-top:2px;max-width:100%}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;padding:4px;background:#0a0826;box-shadow:inset 0 0 0 2px #221c5c}
.seg-ind{position:absolute;left:0;top:4px;bottom:4px;background:linear-gradient(180deg,#1f1a66,#151052);box-shadow:inset 0 0 0 2px var(--cyan),0 0 14px rgba(95,243,255,.25);transition:transform .38s cubic-bezier(.34,1.3,.5,1),width .38s cubic-bezier(.34,1.3,.5,1)}
.seg-b{position:relative;z-index:1;font-family:var(--px);font-size:16px;letter-spacing:3px;text-transform:uppercase;padding:10px 4px;min-height:44px;background:none;border:0;color:var(--ink-3);cursor:pointer;transition:color .25s}
.seg-b:hover{color:var(--ink)}.seg-b.on{color:#fff}
.seg-b:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* podium */
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px;margin-top:24px;min-height:0}
.podium:empty{display:none}
.pod{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.pod-av{position:relative;z-index:1;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--mc) 55%,transparent));animation:podBob 2.6s ease-in-out infinite}
.pod.p1 .pod-av{animation-duration:2.2s}
@keyframes podBob{50%{transform:translateY(-4px)}}
.pod.p1 .pod-av::before{content:'';position:absolute;left:50%;top:-14px;width:24px;height:12px;transform:translateX(-50%);background:var(--mc);clip-path:polygon(0 100%,0 30%,25% 60%,50% 0,75% 60%,100% 30%,100% 100%);filter:drop-shadow(0 0 6px var(--mc))}
.pod-nm{margin-top:8px;max-width:100%;font-size:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;justify-content:center;gap:8px;align-items:center}
.pod-sc{margin-top:2px;font-size:24px;font-weight:700;color:var(--mc);text-shadow:0 0 12px color-mix(in srgb,var(--mc) 50%,transparent)}
.pod-base{position:relative;width:100%;margin-top:10px;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--mc) 28%,#120e3c),#0c0a2c 85%);box-shadow:inset 0 2px 0 var(--mc),inset 0 0 0 1px rgba(255,255,255,.04);transform-origin:bottom}
.pod-base b{font-size:32px;color:var(--mc);opacity:.9}
.pod.p1 .pod-base{height:92px}.pod.p2 .pod-base{height:68px}.pod.p3 .pod-base{height:52px}
.pod-base::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);transform:translateX(-110%);animation:podSheen 5s ease-in-out 1.6s infinite}
@keyframes podSheen{0%{transform:translateX(-110%)}30%,100%{transform:translateX(110%)}}
.podium.rise .pod-base{animation:podRise .7s cubic-bezier(.2,1.25,.4,1) backwards}
.podium.rise .p3 .pod-base{animation-delay:.1s}.podium.rise .p2 .pod-base{animation-delay:.22s}.podium.rise .p1 .pod-base{animation-delay:.36s}
@keyframes podRise{from{transform:scaleY(0)}}
.podium.rise .pod-av,.podium.rise .pod-nm,.podium.rise .pod-sc{animation:podDrop .6s cubic-bezier(.2,1.5,.4,1) backwards}
.podium.rise .p3 :is(.pod-av,.pod-nm,.pod-sc){animation-delay:.4s}.podium.rise .p2 :is(.pod-av,.pod-nm,.pod-sc){animation-delay:.52s}.podium.rise .p1 :is(.pod-av,.pod-nm,.pod-sc){animation-delay:.68s}
@keyframes podDrop{from{opacity:0;transform:translateY(-18px)}}
.pod.is-me .pod-base{box-shadow:inset 0 2px 0 var(--mc),inset 0 0 0 2px rgba(255,95,180,.6)}
.pod.is-me.found .pod-av{animation:meFoundPod .9s cubic-bezier(.2,1.6,.4,1)}
@keyframes meFoundPod{30%{transform:translateY(-12px) scale(1.12)}}
/* list */
.rows{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column}
.rows li{position:relative;display:grid;grid-template-columns:36px 28px 1fr auto;align-items:center;gap:12px;padding:0 12px;min-height:44px;font-size:16px;border-top:1px solid rgba(120,110,220,.16);transition:background .2s}
.rows li:last-child{border-bottom:1px solid rgba(120,110,220,.16)}
.rows li:hover{background:rgba(95,243,255,.04)}
.rows .rk{color:var(--ink-3);text-align:right}
.rows .av{display:flex;opacity:.9}
.rows .nm{display:flex;align-items:center;gap:10px;min-width:0}.nm-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.rows .sc{font-weight:700;color:#e6e8ff;font-variant-numeric:tabular-nums}
.rows li.empty{display:block;text-align:center;color:var(--ink-3);padding:16px;border:0}
.rows.cascade li{animation:rowIn .5s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(420ms + var(--i) * 45ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}}
/* you */
.rows li.is-me{border-top-color:transparent;background:linear-gradient(90deg,rgba(255,95,180,.16),rgba(95,243,255,.06) 70%,transparent);box-shadow:inset 2px 0 0 var(--pink)}
.rows li.is-me+li{border-top-color:transparent}
.rows li.is-me::after,.pod.is-me .pod-base::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);transform:translateX(-120%);animation:podSheen 4.5s ease-in-out 1.4s infinite}
.rows li.is-me .av{filter:drop-shadow(0 0 6px rgba(95,243,255,.8))}
.me-name{font-weight:700;color:#fff6fb;text-shadow:-2px 0 rgba(255,61,154,.7),2px 0 rgba(46,240,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-name span{display:inline-block}
.you{flex:none;font-size:16px;letter-spacing:2px;padding:0 6px;line-height:20px;background:var(--pink);color:#1a0620}
.rows li.is-me .sc{color:#fff;text-shadow:0 0 10px rgba(255,95,180,.7)}
.rows li.is-me.found{animation:meFound .8s cubic-bezier(.2,1.5,.4,1)}
@keyframes meFound{25%{background-color:rgba(255,255,255,.08)}}
.found .me-name span{animation:meWave .7s cubic-bezier(.2,1.8,.4,1) backwards;animation-delay:calc(var(--l) * 40ms)}
@keyframes meWave{35%{transform:translateY(-7px);color:#5ff3ff}}
.climb{position:absolute;right:80px;top:50%;font-size:16px;font-weight:700;color:#2ee6a8;text-shadow:0 0 10px rgba(46,230,168,.7);animation:climbPop 2.4s cubic-bezier(.2,1.6,.4,1) both;pointer-events:none}
.pod .climb{right:auto;left:50%;top:-8px}
@keyframes climbPop{0%{opacity:0;transform:translate(0,-50%) scale(.4)}15%{opacity:1;transform:translate(0,-50%) scale(1.25)}30%{transform:translate(0,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(0,-160%)}}

@media (max-width:700px){.board{padding:20px 16px}.lb-logo{font-size:min(32px,7.4vw);letter-spacing:min(6px,.6vw)}.seg-b{letter-spacing:1px}.pod-sc{font-size:16px}.pod.p1 .pod-base{height:76px}.pod.p2 .pod-base{height:56px}.pod.p3 .pod-base{height:44px}.pod-base b{font-size:24px}.pod-nm .you{display:none}.rows li{gap:8px;padding:0 8px}}
.rows .av{background:none;border:0;padding:0;box-shadow:none;cursor:default}
.pod-base{overflow:hidden}