@font-face{font-family:Jersey;src:url('assets/jersey.woff') format('woff');font-display:swap}
@font-face{font-family:Pixel;src:url('assets/pixel.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--bg:#091c26;--green:#57ff4f;--gold:#ffe16a;--line:#193744;--muted:#89a6b3}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;height:100%;overflow:hidden}
body{background:var(--bg);color:#e8f3ef;font-family:Jersey,sans-serif;overscroll-behavior:none}
button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:5px}
.field{position:fixed;inset:20px;border:1px solid var(--line);pointer-events:none;background-image:radial-gradient(#23404a .8px,transparent .8px);background-size:32px 32px;overflow:hidden}
.field:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 25%,#091c2680 90%)}
.field:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,#8e722b29,transparent 52%);opacity:var(--ceremony-light,0)}
.corner{position:absolute;width:12px;height:12px;border-color:#567e8b;border-style:solid;z-index:2}
.tl{left:-1px;top:-1px;border-width:2px 0 0 2px}.tr{right:-1px;top:-1px;border-width:2px 2px 0 0}.bl{left:-1px;bottom:-1px;border-width:0 0 2px 2px}.br{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
header{position:fixed;inset:43px 52px auto;display:flex;align-items:flex-start;justify-content:space-between;z-index:5;pointer-events:none}
header a{pointer-events:auto}.brand{display:flex;gap:11px;align-items:center;font-size:32px;letter-spacing:-.6px;padding-top:3px}.brand img{image-rendering:pixelated;object-fit:contain}.lime{color:var(--green)}
.launch-status{text-align:right;background:#091c26e8;padding:7px 0 7px 12px}
.coming{font:10px Pixel,monospace;display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--green)}
.coming i{width:6px;height:6px;background:var(--green)}
main{isolation:isolate}.hero{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;width:760px;max-width:94vw;z-index:1;opacity:var(--hero-visibility,1)}
h1{font-size:clamp(104px,10.6vw,154px);font-weight:400;line-height:.78;letter-spacing:1px;margin:0;text-shadow:0 5px #020e16,0 8px #13343c;transition:opacity .65s}h1 span{color:var(--green)}
.intro{color:#b2c7cc;font-family:Arial,Helvetica,sans-serif;font-size:17px;font-weight:400;line-height:1.6;letter-spacing:.01em;margin:30px auto 0;text-wrap:balance;transition:opacity .45s}
.follow{position:fixed;z-index:4;top:calc(42% + 174px);left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border:1px solid #567d7b;box-shadow:0 4px 0 #020f16;background:#123238;font-size:22px;white-space:nowrap;pointer-events:auto;opacity:var(--follow-visibility,1);transition:top .5s cubic-bezier(.2,.8,.2,1),left .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1),background .15s,color .15s}
.follow-content{display:flex;align-items:center;justify-content:center;gap:9px}.follow-label{text-align:center}.follow svg{width:15px;height:15px;fill:currentColor;flex:none}.follow:hover{background:var(--green);color:#09251b;transform:translateX(-50%) translateY(-2px);border-color:var(--green)}.follow:active{transform:translateX(-50%) translateY(2px);box-shadow:0 1px 0 #020f16}
#arena{position:fixed;inset:0;width:100%;height:100%;z-index:2;touch-action:none;cursor:crosshair!important;opacity:var(--arena-visibility,1)}#arena:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--green)}
body.playing h1{opacity:.18}body.playing .intro{opacity:0}
body.playing .follow{top:96px;left:calc(100% - 52px);transform:translateX(-100%);min-height:39px;padding:7px 13px;font-size:19px}
body.playing .follow-content{gap:7px}body.playing .follow svg{width:13px;height:13px}body.playing .follow:hover{transform:translateX(-100%) translateY(-2px)}body.playing .follow:active{transform:translateX(-100%) translateY(2px)}
.champion{position:fixed;top:22%;left:50%;transform:translate(-50%,var(--champion-offset,0px));width:94vw;text-align:center;z-index:3;pointer-events:none;color:var(--gold);opacity:var(--champion-visibility,0)}
.champion[hidden]{display:none}.champion-label{font:8px Pixel,monospace;color:#d5c9a2;letter-spacing:1px;margin:0 0 15px}.champion h2{font-size:clamp(34px,4.5vw,66px);font-weight:400;line-height:1;margin:0;text-shadow:0 3px #12170e}.champion-name{margin:10px 0 0;font-size:26px;color:#f4edcf}
body.ascending #arena{cursor:default!important}body.returning .follow,body.returning h1,body.returning .intro{transition:none}
footer{position:fixed;left:52px;right:52px;bottom:42px;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:5;pointer-events:none;min-height:40px}
.preview-info{display:flex}#capacity{font-size:19px;color:#638b9d}body.full #capacity{color:#ffe16a}
#hint{margin:0;position:absolute;left:50%;transform:translateX(-50%);font-size:21px;color:#a4c0c8;display:flex;align-items:center;gap:11px;white-space:nowrap;transition:color .2s}.mouse-icon{display:inline-block;width:13px;height:18px;flex:none;border:1px solid #91afb9;border-radius:6px;position:relative}.mouse-icon:after{content:'';position:absolute;width:2px;height:4px;left:5px;top:3px;background:var(--green)}
.controls{display:flex;gap:6px;pointer-events:auto;margin-left:auto}.controls[hidden]{display:none}.controls button{width:38px;height:38px;display:grid;place-items:center;background:#0b212b;border:1px solid #254653;color:#8eaeba;cursor:pointer;transition:color .15s,border-color .15s}.controls button:hover{color:var(--green);border-color:#63808d}.controls svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.sound-on,.play-icon{display:none}#sound[aria-pressed=true] .sound-on{display:block}#sound[aria-pressed=true] .sound-off{display:none}#sound[aria-pressed=true]{color:var(--green)}#pause[aria-pressed=true] .pause-icon{display:none}#pause[aria-pressed=true] .play-icon{display:block}#pause[aria-pressed=true]{color:var(--green)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fallback{position:fixed;bottom:110px;padding:0 25px;width:100%;text-align:center;color:var(--muted);font-size:20px;z-index:8}
@media(max-width:760px){
 .field{inset:12px;background-size:26px 26px}header{inset:28px 28px auto}.brand{font-size:27px;gap:8px}.brand img{width:23px;height:29px}.coming{font-size:8px;gap:7px}.launch-status{padding-left:5px}
 .hero{top:40%}h1{font-size:clamp(89px,20vw,118px);line-height:.81}.intro{font-size:15px;max-width:calc(100vw - 56px);margin-top:25px}.follow{top:calc(40% + 140px);font-size:21px}
 body.playing .follow{top:92px;left:calc(100% - 28px);font-size:18px;min-height:38px;padding:7px 11px}
 footer{left:28px;right:28px;bottom:28px;gap:12px}#capacity{font-size:17px}#hint{position:fixed;bottom:92px;font-size:18px;max-width:calc(100vw - 40px);white-space:normal;text-align:center;justify-content:center;width:max-content}.controls{gap:5px}.controls button{width:38px;height:42px}
 .champion{top:27%}.champion h2{font-size:36px}.champion-name{font-size:24px}.champion-label{font-size:7px}
}
@media(max-height:550px){header{top:23px}.hero{top:42%}h1{font-size:76px;line-height:.9}h1 br{display:none}h1 span:before{content:' '}.intro{font-size:15px;margin-top:15px}.follow{top:67%;min-height:40px;font-size:20px}body.playing .follow{top:85px;left:calc(100% - 28px)}footer{bottom:22px}#capacity{font-size:16px}#hint{position:static;transform:none;font-size:17px;max-width:42vw}.champion{top:23%}.champion-label{display:none}.champion h2{font-size:36px}.champion-name{font-size:20px;margin-top:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:350px){.hero{max-width:calc(100vw - 40px)}}
