/* players drawn by our own renderer (assets/js/ns-skin3d.js) */
lcs-skin{display:inline-block;position:relative;flex:none;overflow:hidden}
lcs-skin canvas{display:block;width:100%;height:100%}
.bust,.pcol lcs-skin{overflow:visible}
/* The season recap show (Views/pages/season_recap.php, assets/js/ns-recap.js). Designed on a 1920 x 1080 stage that is scaled to fit. */
:root{--hi:#9bff80;--lo:#2fc41a;--glow:rgba(77,220,50,.35);--tx:#f2f4f2;--mu:#9aa39a;--line:rgba(255,255,255,.12);--display:Sora,system-ui,sans-serif;--text:Manrope,system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#050607;overflow:hidden;color:var(--tx);font-family:var(--text)}
#viewport{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;left:50%;top:50%;margin:-540px 0 0 -960px;width:1920px;height:1080px;transform-origin:center center;overflow:hidden;background:#0a0c0e;cursor:pointer}
/* ---------- backdrop ---------- */
.bg,.bg>*{position:absolute;inset:0}
.photo{background-size:cover;background-position:center;filter:blur(6px) saturate(.9) brightness(.42);transform:scale(1.08);animation:kb 40s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.22) translate(-1.5%,-1%)}}
.glow{background:radial-gradient(1100px 760px at 70% 50%,var(--glow),transparent 62%),radial-gradient(900px 600px at 10% 100%,var(--glow),transparent 60%);transition:background .8s}
.beam{mix-blend-mode:screen;opacity:.16;background:conic-gradient(from 0deg at 50% 118%,transparent 0 40%,var(--hi) 46% 49%,transparent 55% 100%);animation:sweep 16s ease-in-out infinite alternate}
.beam.b2{animation-duration:22s;animation-direction:alternate-reverse;opacity:.1;transform-origin:30% 120%}
@keyframes sweep{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.motes i{position:absolute;bottom:-20px;width:6px;height:6px;border-radius:50%;background:var(--hi);opacity:0;box-shadow:0 0 14px var(--hi);animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(-1150px);opacity:0}}
.vig{background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.72) 100%)}
/* ---------- scene plumbing ---------- */
#scene{position:absolute;inset:0}
#scene>*{position:absolute;inset:0}
[data-r]{opacity:0;transform:translateY(46px) scale(.97);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
[data-r].in{opacity:1;transform:none}
[data-r="pop"]{transform:scale(.4)}
[data-r="pop"].in{transform:none;transition-timing-function:cubic-bezier(.3,1.5,.5,1)}
[data-r="left"]{transform:translateX(-120px)}
[data-r="right"]{transform:translateX(120px)}
[data-r="slam"]{transform:scale(2.4);transition-duration:.35s;transition-timing-function:cubic-bezier(.2,.9,.3,1)}
.fast *{animation:none!important;transition:none!important}
.exit{opacity:0;transition:opacity .45s}
/* ---------- type ---------- */
.kicker{font:500 30px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--hi)}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px}
.title{font:800 190px/1 var(--display);margin:0;letter-spacing:-.03em;text-shadow:0 10px 60px rgba(0,0,0,.6)}
.logo-big{height:210px;filter:drop-shadow(0 0 60px var(--glow))}
.dates{display:flex;gap:26px;align-items:center;font:600 36px var(--text);color:#d6dcd6}
.dates i{width:90px;height:3px;background:linear-gradient(90deg,var(--lo),var(--hi));border-radius:3px}
.dates b{padding:8px 22px;border-radius:99px;border:2px solid var(--hi);color:var(--hi);font-size:30px}
/* ---------- numbers ---------- */
.nums{padding:96px 130px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.nums h2{grid-column:1/-1;margin:0 0 4px;font:800 80px var(--display)}
.tile{padding:26px 36px;border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:2px solid var(--line);backdrop-filter:blur(8px)}
.tile.big{background:linear-gradient(160deg,var(--lo),#1c7d10);border-color:var(--hi);color:#04200a}
.tile small{display:block;font:500 24px var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.tile .nv{display:flex;align-items:baseline;gap:12px;margin-top:6px;white-space:nowrap}
.tile b{font:800 92px/1.05 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile em{font:600 32px var(--text);font-style:normal;opacity:.8}
.tile .sub{font:600 26px var(--text);opacity:.8;margin-top:2px}
.facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 44px;padding-top:4px}
.facts p{margin:0;font:600 34px/1.3 var(--text);color:#e8ece8}
.facts p b{color:var(--hi);font-family:var(--display)}
/* ---------- roster ---------- */
.roster{position:absolute;inset:0;padding:0 150px;display:flex;flex-direction:column;gap:36px;align-items:center;justify-content:center}
.roster h2{margin:0;font:800 120px var(--display);letter-spacing:-.03em}
.faces{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:1560px}
.faces img,.faces lcs-skin{width:96px;height:96px;border-radius:16px;image-rendering:pixelated;box-shadow:0 8px 24px rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.15)}
.dim .faces{opacity:.18;transition:opacity .8s}
/* ---------- tier scenes ---------- */
.tierwrap{padding:96px 120px 0;display:flex;flex-direction:column;gap:30px}
.tierwrap h2{margin:0;font:800 130px/1 var(--display);letter-spacing:-.03em;color:var(--hi);text-shadow:0 0 70px var(--glow)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tcard{height:330px;padding:28px 32px;border-radius:28px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:2px solid var(--line);display:flex;flex-direction:column;gap:12px;backdrop-filter:blur(8px)}
.tcard .row{display:flex;align-items:center;gap:20px}
.tcard .bd{width:104px;height:104px;flex:none;filter:drop-shadow(0 0 20px var(--glow))}
.tcard h3{margin:0;font:700 36px/1.1 var(--display)}
.who{display:flex;align-items:center;gap:16px;font:800 44px var(--display)}
.who img,.who lcs-skin{width:60px;height:60px;border-radius:12px;image-rendering:pixelated}
.val{font:800 64px/1 var(--display);color:var(--hi);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.val small{font:600 28px var(--text);color:var(--mu);margin-left:10px}
.tcard.q{align-items:center;justify-content:center;opacity:.35;font:800 90px var(--display);color:var(--hi)}
/* ---------- award reveal ---------- */
.aw-left .kicker{font-size:25px;letter-spacing:.22em;white-space:nowrap}
.aw-left{position:absolute;left:110px;top:112px;width:960px;display:flex;flex-direction:column;gap:20px}
.aw-head{display:flex;align-items:center;gap:36px}
.aw-badge{width:240px;height:240px;flex:none;filter:drop-shadow(0 0 50px var(--glow))}
.aw-head h2{margin:0;font:800 100px/1.02 var(--display);letter-spacing:-.03em}
.aw-who{display:flex;align-items:center;gap:26px;margin-top:6px}
.aw-who img,.aw-who lcs-skin{width:110px;height:110px;border-radius:22px;image-rendering:pixelated}
.aw-who b{font:800 130px/1 var(--display);letter-spacing:-.03em}
.aw-val{display:flex;align-items:baseline;white-space:nowrap;font:800 210px/1 var(--display);color:var(--hi);letter-spacing:-.04em;text-shadow:0 0 90px var(--glow);font-variant-numeric:tabular-nums}
.aw-val small{font:600 .27em var(--text);color:#c4cbc4;margin-left:22px;letter-spacing:0;text-shadow:none}
.ru{display:flex;flex-direction:column;gap:12px;font:600 38px var(--text);color:#d3dad3}
.ru div{display:flex;align-items:center;gap:16px}
.ru i{font:700 34px var(--mono);font-style:normal;color:var(--mu)}
.ru img,.ru lcs-skin{width:56px;height:56px;border-radius:12px;image-rendering:pixelated}
.ru b{font-family:var(--display);color:var(--tx)}
.ask{font:600 62px var(--text);color:#d6dcd6;letter-spacing:.01em}
.ask span{display:inline-block;animation:bob 1.2s infinite}
.ask span:nth-child(2){animation-delay:.15s}.ask span:nth-child(3){animation-delay:.3s}
@keyframes bob{50%{transform:translateY(-12px)}}
.stagebox{position:absolute;right:60px;top:90px;width:700px;height:900px}
.spot{position:absolute;left:-120px;right:-120px;top:-40px;bottom:-40px;background:radial-gradient(closest-side at 50% 58%,var(--glow),transparent 72%);opacity:.9}
.mystery{position:absolute;left:100px;top:260px;width:500px;height:500px;border-radius:44px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:3px dashed var(--hi);display:grid;place-items:center;font:800 330px var(--display);color:var(--hi);text-shadow:0 0 80px var(--glow);animation:pulse 2s infinite}
@keyframes pulse{50%{transform:scale(1.04);box-shadow:0 0 90px var(--glow)}}
.mystery.gone{opacity:0;transform:scale(1.4);transition:all .35s}
.bust{position:absolute;left:60px;bottom:30px;width:600px;height:600px;image-rendering:pixelated;filter:drop-shadow(0 30px 40px rgba(0,0,0,.65))}
.bust[data-r]{transform:translateY(260px) scale(.8)}
.bust.in{transform:none}
.permit{position:absolute;right:-30px;bottom:-30px;height:460px;transform-origin:50% 0;filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}
.permit[data-r]{transform:translateY(-900px) rotate(-18deg);transition:transform 1s cubic-bezier(.3,1.35,.5,1),opacity .3s}
.permit.in{transform:rotate(6deg)}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:fl .6s ease-out}
@keyframes fl{0%{opacity:.85}100%{opacity:0}}
.pill{position:absolute;right:130px;top:40px;font:500 26px var(--mono);letter-spacing:.2em;color:var(--mu)}
/* ---------- decorated ---------- */
.deco{padding-top:72px;display:flex;flex-direction:column;align-items:center;gap:4px}
.deco h2{margin:4px 0 0;font:800 104px var(--display);letter-spacing:-.03em}
.podium{display:flex;align-items:flex-end;gap:46px;margin-top:auto}
.pcol{display:flex;flex-direction:column;align-items:center;width:470px}
.pcol img,.pcol lcs-skin{width:330px;height:330px;image-rendering:pixelated;filter:drop-shadow(0 24px 30px rgba(0,0,0,.6))}
.pcol .nm{font:800 62px var(--display);margin-top:6px}
.pcol .ct{font:600 36px var(--text);color:var(--hi)}
.pcol .ped{width:100%;margin-top:14px;border-radius:22px 22px 0 0;background:linear-gradient(180deg,var(--lo),#14610a);display:grid;place-items:center;font:800 80px var(--display);color:#04200a;box-shadow:0 0 80px var(--glow)}
.pcol.p1 .ped{height:190px}.pcol.p2 .ped{height:140px}.pcol.p3 .ped{height:104px}
.pcol.p1 img,.pcol.p1 lcs-skin{width:380px;height:380px}
.tiers{display:flex;gap:18px;margin-top:6px}
.tiers span{display:inline-flex;align-items:center;gap:8px;font:800 28px var(--display)}
.tiers i{width:20px;height:22px;background:var(--c);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* ---------- credits ---------- */
.credits{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent 0,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 13%,#000 87%,transparent 100%)}
.ctrack{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;will-change:transform;transform:translateY(1080px)}
.chead{height:760px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}
.cend{height:1080px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}
.csec{margin:60px 0 34px;font:500 28px var(--mono);letter-spacing:.38em;color:var(--hi);text-transform:uppercase}
.crow{display:flex;align-items:center;justify-content:center;gap:30px;height:118px;width:1100px}
.crow img,.crow lcs-skin{width:88px;height:88px;border-radius:16px;image-rendering:pixelated;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.crow span{font:700 58px var(--display);letter-spacing:-.01em}
/* the awards a player won, overlapping like a hand of cards: best tier on top */
.cbs{display:flex;align-items:center;margin-left:26px}
.cbs i{display:block;width:64px;height:64px;margin-left:-22px;filter:drop-shadow(0 5px 9px rgba(0,0,0,.65))}
.cbs i:first-child{margin-left:0}
.orow .cbs i{width:76px;height:76px;margin-left:-26px}.orow .cbs i:first-child{margin-left:0}
.tie{font:600 30px var(--text);color:#ffd24d;letter-spacing:.02em}
.cops{display:flex;flex-direction:column;align-items:center;gap:18px;margin:120px 0 60px;text-align:center}
.cops .csec{margin:0;color:#ffd24d}
.cops h2{margin:0;font:800 120px/1 var(--display);letter-spacing:-.03em;text-shadow:0 0 80px var(--glow)}
.cops p{margin:0 0 30px;font:600 38px/1.35 var(--text);color:#d6dcd6;max-width:1100px}
.orow{display:flex;align-items:center;justify-content:center;gap:36px;height:170px;width:1200px}
.orow img,.orow lcs-skin{width:130px;height:130px;border-radius:24px;image-rendering:pixelated;border:3px solid var(--hi);box-shadow:0 0 60px var(--glow),0 10px 30px rgba(0,0,0,.6)}
.orow span{font:800 82px var(--display);letter-spacing:-.02em}
.cside{position:absolute;left:0;right:0;top:0;will-change:transform;transform:translateY(1080px)}
.cperm{position:absolute;width:300px;display:flex;flex-direction:column;align-items:center;gap:14px}
.cperm.l{left:80px}.cperm.r{right:80px}
.cperm img{height:380px;transform:rotate(var(--rot));transform-origin:50% 30%;animation:sway 7s ease-in-out infinite alternate;filter:drop-shadow(0 24px 30px rgba(0,0,0,.6)) drop-shadow(0 0 46px var(--c))}
.cperm span{font:500 22px var(--mono);letter-spacing:.26em;color:var(--c);text-transform:uppercase}
@keyframes sway{from{transform:rotate(calc(var(--rot) - 3deg))}to{transform:rotate(calc(var(--rot) + 3deg))}}
/* ---------- outro ---------- */
.outro .title{font-size:150px}
.thanks{font:600 46px var(--text);color:#d6dcd6;max-width:1200px;line-height:1.3}
.ring{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:1500px;margin-top:10px}
.ring img{width:72px;height:72px;border-radius:12px;image-rendering:pixelated;opacity:.9}
/* ---------- hud ---------- */
#confetti{position:absolute;inset:0;pointer-events:none}
.hud{position:absolute;left:0;right:0;display:flex;align-items:center;gap:20px;padding:0 44px;pointer-events:none;transition:opacity .6s}
.hud.top{top:26px}.hud.top img{height:62px}.hud.top span{font:500 22px var(--mono);letter-spacing:.24em;color:var(--mu);text-transform:uppercase}
.hud.bottom{bottom:8px;justify-content:space-between}
#dots{display:flex;gap:2px;pointer-events:auto}
#dots button{position:relative;background:none;border:0;padding:16px 4px;cursor:pointer}
#dots button::after{content:attr(data-label);position:absolute;bottom:100%;left:50%;transform:translate(-50%,6px);margin-bottom:2px;padding:10px 18px;border-radius:12px;background:rgba(10,12,14,.94);border:1.5px solid var(--hi);color:#fff;font:700 26px var(--display);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;box-shadow:0 10px 40px rgba(0,0,0,.6);z-index:40}
#dots button:hover::after,#dots button:focus-visible::after,#dots button.hv::after{opacity:1;transform:translate(-50%,0)}
#dots button:nth-child(-n+5)::after{left:0;transform:translate(0,6px)}
#dots button:nth-child(-n+5):hover::after,#dots button:nth-child(-n+5):focus-visible::after,#dots button:nth-child(-n+5).hv::after{transform:translate(0,0)}
#dots button:nth-last-child(-n+4)::after{left:auto;right:0;transform:translate(0,6px)}
#dots button:nth-last-child(-n+4):hover::after,#dots button:nth-last-child(-n+4):focus-visible::after,#dots button:nth-last-child(-n+4).hv::after{transform:translate(0,0)}
#dots button i{display:block;width:34px;height:8px;border-radius:8px;background:rgba(255,255,255,.18);transition:background .3s,transform .2s}
#dots button:hover i{background:rgba(255,255,255,.7);transform:scaleY(1.7)}
#dots button.done i{background:rgba(255,255,255,.5)}#dots button.now i{background:var(--hi);box-shadow:0 0 14px var(--hi)}
#dots button:focus-visible{outline:2px solid var(--hi);outline-offset:-4px;border-radius:8px}
#hint{font:500 21px var(--mono);letter-spacing:.08em;color:var(--mu)}
.hidehud .hud{opacity:0;pointer-events:none}.hidehud #dots{pointer-events:none}
#pauseOv{position:absolute;inset:0;display:none;place-items:center;background:rgba(0,0,0,.5);backdrop-filter:blur(5px);z-index:30;pointer-events:none}
#pauseOv.on{display:grid}
.pbox{display:flex;flex-direction:column;align-items:center;gap:20px}
.pbox .bars{display:flex;gap:26px}.pbox .bars i{display:block;width:34px;height:120px;border-radius:10px;background:var(--hi);box-shadow:0 0 50px var(--glow)}
.pbox b{font:800 84px var(--display)}.pbox span{font:500 28px var(--mono);letter-spacing:.14em;color:var(--mu)}
body.paused #stage *{animation-play-state:paused!important}
#flags b{pointer-events:auto;cursor:pointer}
#flags{position:absolute;right:44px;top:30px;display:flex;gap:12px;font:500 22px var(--mono);letter-spacing:.14em;color:var(--mu)}
#flags b{padding:6px 14px;border-radius:99px;border:1.5px solid var(--line);font-weight:500}
#flags b.on{border-color:var(--hi);color:var(--hi)}
/* ---------- start card ---------- */
#start{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:radial-gradient(900px 600px at 50% 40%,rgba(77,220,50,.22),transparent 70%),#07090a;text-align:center}
#start .box{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:760px;padding:30px}
#start img{height:120px}
#start h1{margin:0;font:800 64px var(--display);letter-spacing:-.02em}
#start p{margin:0;color:var(--mu);font:500 18px/1.55 var(--text)}
#start button{margin-top:10px;padding:18px 44px;border-radius:99px;border:0;background:var(--hi);color:#06210a;font:800 22px var(--display);cursor:pointer;box-shadow:0 0 50px rgba(77,220,50,.5)}
#start button:hover{filter:brightness(1.08)}
#start kbd{font:500 15px var(--mono);padding:3px 9px;border-radius:7px;border:1px solid var(--line);color:#cfd6cf}
.opts{display:flex;gap:10px;margin-top:4px}
.opts label{display:flex;gap:8px;align-items:center;font:600 15px var(--text);color:#cfd6cf;padding:8px 14px;border-radius:99px;border:1px solid var(--line);cursor:pointer}

/* links back to the season, on the start card and the end screen */
.backlink{color:var(--mu);font:600 15px var(--text);text-decoration:none;border-bottom:1px solid transparent}
.backlink:hover,.backlink:focus-visible{color:var(--tx);border-bottom-color:var(--hi)}
#again .againbox{display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:auto}
#start .note{color:#ffd24d;font:600 14px var(--text)}

.musiccredit{margin-top:40px;font:500 20px 'IBM Plex Mono',monospace;color:rgba(255,255,255,.4);letter-spacing:.04em;text-align:center}