:root{--paper: #f3efe5;--ink: #0b0b0b;--red: #b3121b;--brush: "Permanent Marker", "Brush Script MT", cursive;--mono: "Space Mono", ui-monospace, monospace;--sl: env(safe-area-inset-left, 0px);--sr: env(safe-area-inset-right, 0px);--sb: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--mono);-webkit-user-select:none;user-select:none}#app canvas{display:block}body.invert #app canvas{filter:invert(1) contrast(1.6)}body.storm #app canvas{filter:contrast(1.35) saturate(1.4)}#grain,#vignette,#hurt,#speedlines{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#grain{opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}#vignette{background:radial-gradient(ellipse at center,transparent 55%,rgba(60,45,30,.28) 100%)}#hurt{opacity:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(179,18,27,.55) 100%)}#hurt.on{animation:hurt .45s ease-out}@keyframes hurt{0%{opacity:1}to{opacity:0}}#speedlines{opacity:0;transition:opacity .15s;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(11,11,11,.5) 0deg .7deg,transparent .7deg 6deg);-webkit-mask:radial-gradient(circle at center,transparent 28%,#000 70%);mask:radial-gradient(circle at center,transparent 28%,#000 70%)}#speedlines.on{opacity:1;animation:spin .35s steps(3) infinite}@keyframes spin{to{transform:rotate(6deg) scale(1.03)}}kbd{font-family:var(--mono);font-size:.78em;font-weight:700;border:2px solid var(--ink);border-radius:3px;padding:0 5px;margin:0 1px;box-shadow:2px 2px 0 var(--ink);background:var(--paper)}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .4s}#hud.show{opacity:1}.tl{position:absolute;left:calc(24px + var(--sl));top:20px;width:min(340px,60vw);display:grid;grid-template-columns:34px 1fr;gap:6px 8px;align-items:center}.label{font-family:var(--brush);font-size:15px}.bar{position:relative;height:16px;border:3px solid var(--ink);background:var(--paper);transform:skew(-12deg);overflow:hidden}.bar .fill,.bar .lag{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left}.hp .fill{background:var(--ink)}.hp .lag{background:var(--red)}#hud.low .hp{animation:pulse .5s infinite alternate}@keyframes pulse{to{border-color:var(--red)}}.focus{height:10px}.focus .fill{background:repeating-linear-gradient(-45deg,var(--ink) 0 6px,#444 6px 9px)}#hud.ready .focus .fill{background:var(--red);animation:glow .4s infinite alternate}@keyframes glow{to{filter:brightness(1.6)}}.focusLabel{grid-column:2;font-size:11px;font-weight:700;color:var(--red);opacity:0;transition:opacity .2s}#hud.ready .focusLabel{opacity:1}.tr{position:absolute;right:calc(24px + var(--sr));top:18px;text-align:right}#floorName{font-family:var(--brush);font-size:22px}#waveInfo{font-size:12px;letter-spacing:.15em;text-transform:uppercase;opacity:.7}#score{font-family:var(--brush);font-size:30px;margin-top:4px}#combo{position:absolute;right:calc(36px + var(--sr));top:34%;text-align:right;transform:rotate(-6deg);opacity:0;transition:opacity .25s}#combo.show{opacity:1}#combo.pop #comboNum{animation:pop .18s ease-out}@keyframes pop{0%{transform:scale(1.5);color:var(--red)}to{transform:scale(1)}}#comboNum{font-family:var(--brush);font-size:84px;line-height:.9;display:inline-block}.hits{font-family:var(--brush);font-size:20px;letter-spacing:.2em}#styleRank{font-family:var(--brush);font-size:30px;margin-top:10px;min-height:36px}#styleRank[data-tier="4"],#styleRank[data-tier="5"]{color:var(--red)}#styleRank[data-tier="5"]{font-size:40px;text-shadow:3px 3px 0 var(--ink)}#styleRank.up{animation:stamp .3s cubic-bezier(.2,2,.4,1)}@keyframes stamp{0%{transform:scale(2.4) rotate(8deg);opacity:0}to{transform:none;opacity:1}}.rankBar{width:160px;height:5px;margin-left:auto;background:#0b0b0b26}#rankFill{height:100%;background:var(--ink);transform-origin:left}#bossBar{position:absolute;left:50%;bottom:34px;width:min(620px,80vw);transform:translate(-50%);opacity:0;transition:opacity .4s}#bossBar.show{opacity:1}#bossName{font-family:var(--brush);font-size:22px;text-align:center;margin-bottom:4px}#bossBar .bar{height:14px}#bossBar .fill{background:var(--red)}#exitHint{position:absolute;right:calc(30px + var(--sr));bottom:30%;font-family:var(--brush);font-size:34px;opacity:0}#exitHint.show{opacity:1;animation:nudge .6s infinite alternate ease-in-out}#exitHint span{color:var(--red)}@keyframes nudge{to{transform:translate(14px)}}#banner{position:fixed;left:0;right:0;top:30%;text-align:center;pointer-events:none;opacity:0}#banner.show{animation:banner 2.6s forwards}#banner .t{font-family:var(--brush);font-size:clamp(48px,9vw,120px);line-height:1}#banner .s{font-size:14px;letter-spacing:.4em;text-transform:uppercase;margin-top:8px}@keyframes banner{0%{opacity:0;transform:scale(1.6);filter:blur(6px)}8%{opacity:1;transform:scale(1);filter:none}85%{opacity:1;transform:translate(-12px)}to{opacity:0;transform:translate(-60px)}}#callout{position:fixed;left:50%;top:20%;pointer-events:none}.call{position:absolute;left:0;top:0;white-space:nowrap;transform:translate(-50%) rotate(var(--r));font-family:var(--brush);font-size:40px;color:var(--ink);animation:call 1.4s forwards}.call.big{font-size:72px;color:var(--red);text-shadow:4px 4px 0 var(--ink)}@keyframes call{0%{opacity:0;transform:translate(-50%) rotate(var(--r)) scale(2.2)}10%{opacity:1;transform:translate(-50%) rotate(var(--r)) scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-40px) rotate(var(--r))}}.screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;opacity:0;transition:opacity .35s;padding:16px calc(16px + var(--sr)) calc(16px + var(--sb)) calc(16px + var(--sl))}.screen.show{opacity:1}#screen-pause.show,#screen-dead.show,#screen-win.show{background:#f3efe5d1}.screen h1{font-family:var(--brush);font-size:clamp(80px,17vw,220px);margin:0;line-height:.9;letter-spacing:.02em;text-shadow:6px 6px 0 var(--red)}.screen h2{font-family:var(--brush);font-size:clamp(56px,11vw,130px);margin:0;line-height:1}#screen-dead h2{color:var(--red)}.tag{font-size:14px;letter-spacing:.35em;text-transform:uppercase;margin:14px 0 26px}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:10px 32px;text-align:left;font-size:13px}.press{font-family:var(--brush);font-size:30px;margin-top:30px;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.25}}#loader{display:none;width:min(300px,70vw);margin-top:30px;animation:appear .3s .4s backwards}body.loading #loader{display:block}body.loading #screen-title .press{display:none}#loader .bar{height:12px}#loader .fill{background:var(--ink);transform:scaleX(0);transition:transform .25s}#loader.retry .fill{background:var(--red)}#loader p{font-family:var(--brush);font-size:20px;margin:6px 0 0}#loader b{font-weight:400}@keyframes appear{0%{opacity:0}}.small{font-size:12px;opacity:.7}.body .row{display:flex;justify-content:space-between;gap:40px;width:min(360px,80vw);font-size:14px;border-bottom:2px dashed rgba(11,11,11,.25);padding:6px 0}.body .row b{font-family:var(--brush);font-size:22px;font-weight:400}.results{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:18px 48px}.results .body .row{width:min(340px,42vw)}.board{width:min(330px,44vw);text-align:left}.board:empty,.record:empty{display:none}.board h3{font-family:var(--brush);font-weight:400;font-size:26px;margin:0 0 4px}.board ol{list-style:none;margin:0;padding:0}.board li{display:grid;grid-template-columns:2em minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:3px 0;border-bottom:2px dashed rgba(11,11,11,.22);font-size:12px}.board li i{font-style:normal;font-weight:700;opacity:.55}.board li span{font-family:var(--brush);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board li em{font-style:normal;font-size:10px;letter-spacing:.12em;opacity:.55}.board li b{font-family:var(--brush);font-weight:400;font-size:18px}.board li:first-child span,.board li:first-child b{color:var(--red)}.board li.me{background:var(--ink);color:var(--paper);padding:3px 6px;border-bottom-color:transparent}.board li.me span,.board li.me b{color:var(--paper)}.board li.gap{display:block;text-align:center;border:0;opacity:.5}.board .note{font-size:12px;margin:8px 0 0}.board form{display:flex;gap:8px;margin-top:10px}.board input{flex:1;min-width:0;padding:6px 8px;border:3px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:700 16px var(--mono);user-select:text;-webkit-user-select:text}.board input::placeholder{color:#0b0b0b66}.board input:focus{outline:none;box-shadow:4px 4px 0 var(--red)}.board button{cursor:pointer;padding:6px 14px;font:700 13px var(--mono);letter-spacing:.14em;color:var(--paper);background:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--red)}.board button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--red)}.board .rename{margin-top:8px;padding:0;border:0;box-shadow:none;background:none;color:var(--ink);font-size:11px;letter-spacing:.06em;text-decoration:underline;opacity:.6}.screen.show .board form,.screen.show .board button{pointer-events:auto}#screen-title .board{display:none;position:absolute;right:28px;bottom:28px;width:280px;padding:12px 16px;background:var(--paper);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--red);transform:rotate(1.2deg)}.record{margin:10px 0 0;font-weight:700;letter-spacing:.08em}body:not(.touch):has(#screen-dead.show,#screen-win.show) #caption{top:18px;bottom:auto}@media (min-width: 1280px) and (min-height: 760px){#screen-title .board:not(:empty){display:block}#screen-title .record{display:none}}body.demo .board,body.demo .record{display:none}#screen-wall.show{background:#f3efe5e6;pointer-events:auto;cursor:pointer}#screen-wall .tag{margin-bottom:18px}#screen-wall .board{width:min(460px,90vw)}#screen-wall .board li{padding:5px 0;font-size:13px}#screen-wall .board li span,#screen-wall .board li b{font-size:22px}#screen-wall .board .note{text-align:center}.board .best{font-family:var(--brush);font-size:48px;line-height:1;margin:4px 0 0}.board .gcBtn{margin-top:12px}#screen-lock.show{background:#f3efe5e6}#screen-lock .tag{margin-bottom:18px}.lockPrice{font-weight:700;font-size:13px;letter-spacing:.08em;margin:20px 0 12px}.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px}.badges img{display:block;height:48px}#wipe{position:fixed;top:-10%;right:-10%;bottom:-10%;left:-10%;background:var(--ink);pointer-events:none;transform:translate(-130%) skew(-14deg)}#wipe.in{transition:transform .5s cubic-bezier(.7,0,.3,1);transform:translate(0) skew(-14deg)}#wipe.out{transform:translate(0) skew(-14deg);animation:wipeout .55s cubic-bezier(.7,0,.3,1) forwards}@keyframes wipeout{to{transform:translate(130%) skew(-14deg)}}@media (max-width: 640px){.controls{grid-template-columns:1fr}#comboNum{font-size:56px}.tl{left:calc(16px + var(--sl))}.tr{right:calc(16px + var(--sr))}}body.demo,body.demo *{cursor:none!important}body.demo #screen-title .controls,body.demo #screen-title .small,body.demo #screen-win .press{display:none}#screen-end .press{margin-top:10px}#screen-end{background:#f3efe5d1}#caption{position:fixed;left:50%;bottom:13%;max-width:min(88vw,1100px);transform:translate(-50%,10px);font-family:var(--mono);font-weight:700;font-size:clamp(16px,2vw,30px);line-height:1.35;text-align:center;color:var(--paper);background:var(--ink);padding:.3em .75em;box-shadow:5px 5px 0 var(--red);opacity:0;transition:opacity .15s,transform .15s;pointer-events:none;z-index:20}#caption.show{opacity:1;transform:translate(-50%)}#caption b{display:inline-block;margin-right:.6em;padding:0 .35em;background:var(--red);color:var(--paper)}#caption.nib{color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}#caption.nib b{background:var(--ink)}#donation{position:fixed;left:calc(24px + var(--sl));top:118px;max-width:min(440px,80vw);padding:.45em .8em;z-index:20;font-family:var(--mono);font-weight:700;color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--red);pointer-events:none;transform:translate(-130%) rotate(-2deg);transition:transform .4s cubic-bezier(.2,1.3,.4,1)}#donation.show{transform:translate(0) rotate(-2deg)}#donation b{font-family:var(--brush);font-weight:400;font-size:clamp(18px,1.6vw,30px)}#donation i{font-style:normal;font-size:clamp(11px,.9vw,16px);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:var(--red);padding:.1em .4em;margin-left:.6em;vertical-align:.3em}#donation span{display:block;margin-top:.2em;font-size:clamp(14px,1.3vw,24px)}#donation span:before,#donation span:after{content:'"'}.voiceBtn,.wallBtn{pointer-events:auto;cursor:pointer;margin:18px 0 4px;padding:8px 14px;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--red)}.voiceBtn:hover,.wallBtn:hover{background:var(--ink);color:var(--paper)}.voiceBtn:active,.wallBtn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--red)}.screen:not(.show) .voiceBtn,.screen:not(.show) .wallBtn{pointer-events:none}body.demo .voiceBtn,body.demo .wallBtn{display:none}.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px}.wallBtn kbd{margin-left:4px;font-size:.85em}.touchOnly{display:none}body.touch .touchOnly{display:grid}body.touch .keysOnly{display:none}.controls b{font-family:var(--brush);font-weight:400}#touch{display:none;position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none;-webkit-touch-callout:none}body.touch #touch{display:block}.tb{position:absolute;display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:50%;font-family:var(--brush);font-size:calc(var(--s) * .27);color:var(--ink);background:#f3efe5bf;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);opacity:0;transition:opacity .25s;pointer-events:none}#touch.live .tb{opacity:.88;pointer-events:auto}.tb.on{background:var(--ink);color:var(--paper);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.b-light{--s: 84px;right:calc(24px + var(--sr) * .7);bottom:calc(24px + var(--sb) * .5)}.b-heavy{--s: 66px;right:calc(124px + var(--sr) * .7);bottom:calc(18px + var(--sb) * .5)}.b-jump{--s: 66px;right:calc(34px + var(--sr) * .7);bottom:calc(124px + var(--sb) * .5)}.b-dash{--s: 56px;right:calc(118px + var(--sr) * .7);bottom:calc(102px + var(--sb) * .5)}.b-block{--s: 56px;right:calc(206px + var(--sr) * .7);bottom:calc(22px + var(--sb) * .5)}.b-special{--s: 56px;right:calc(40px + var(--sr) * .7);bottom:calc(206px + var(--sb) * .5)}.b-pause{--s: 40px;left:calc(50% - 20px);top:10px;font-size:13px;font-family:var(--mono);font-weight:700}#hud.ready~#touch .b-special{background:var(--red);color:var(--paper);animation:glow .4s infinite alternate}.stick{position:absolute;left:0;top:0;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px dashed rgba(11,11,11,.55);opacity:0;pointer-events:none;transition:opacity .15s}.stick i{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:var(--ink);opacity:.8}#touch.live .stick{opacity:.3}#touch.live .stick:not(.on){transform:translate(calc(110px + var(--sl) * .7),calc(100vh - 110px - var(--sb) * .5))!important}#touch.live .stick.on{opacity:1}body.touch #caption{top:70px;bottom:auto;max-width:58vw;font-size:13px}body.touch .tl{width:min(340px,calc(50vw - 56px - var(--sl)))}body.touch .focusLabel{display:none}body.touch #combo{right:calc(250px + var(--sr) * .7);top:24%}body.touch #comboNum{font-size:60px}body.touch #styleRank{font-size:24px;margin-top:4px;min-height:28px}body.touch #styleRank[data-tier="5"]{font-size:30px}body.touch .rankBar{width:120px}@media (max-height: 500px){.screen h1{font-size:64px}.screen h2{font-size:48px}.tag{margin:4px 0 10px;font-size:11px}.controls{font-size:11px;gap:4px 20px}.press{font-size:22px;margin-top:10px}#loader{margin-top:10px}#loader p{font-size:16px}.voiceBtn,.wallBtn{margin:8px 0 2px;padding:5px 10px;font-size:11px}#donation{top:92px}.results .body .row{padding:3px 0}.results .body .row b{font-size:17px}.board h3{font-size:20px}.board li span,.board li b{font-size:15px}.board li:nth-child(n+6):not(.me):not(.gap){display:none}.board .best{font-size:34px}.lockPrice{margin:10px 0 8px;font-size:11px}.badges img{height:40px}#screen-wall .tag{display:none}#screen-wall .board li:nth-child(n+6){display:grid}#screen-wall .board li{padding:1px 0}#screen-wall .board li span,#screen-wall .board li b{font-size:15px}}#rotate{display:none}@media (pointer: coarse) and (orientation: portrait){#rotate{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;background:var(--paper)}#rotate h2{font-family:var(--brush);font-size:clamp(40px,12vw,80px);margin:0;line-height:1}}.screen a{pointer-events:auto;color:inherit}.screen a:hover{color:var(--red)}.screen:not(.show) a{pointer-events:none}
