:root{--ink: #0b0c08;--panel: #262b1c;--green: #7cfa0c;--red: #f10704;--paper: #f0edd5;--rim: 1.5px 0 var(--ink), -1.5px 0 var(--ink), 0 1.5px var(--ink), 0 -1.5px var(--ink), 1px 1px var(--ink), -1px 1px var(--ink), 1px -1px var(--ink), -1px -1px var(--ink), 2.5px 3px 0 rgba(0, 0, 0, .45)}*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ink)}body{position:fixed;inset:0;color:var(--paper);font:italic 900 12px/1.25 Arial Black,Helvetica Neue,Helvetica,Arial,sans-serif;letter-spacing:.03em;text-transform:uppercase;text-shadow:var(--rim);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.bolt{display:inline-block;width:.62em;height:.95em;background:var(--red);clip-path:polygon(38% 0,100% 0,66% 38%,94% 38%,20% 100%,40% 55%,6% 55%);filter:drop-shadow(1.5px 2px 0 rgba(0,0,0,.6))}#game{position:absolute;left:0;top:0;display:block}@property --p{syntax: "<number>"; inherits: true; initial-value: 0;}body.booting .screen,body.booting #hud{visibility:hidden}#boot{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding-bottom:calc(env(safe-area-inset-bottom) + 15vh);pointer-events:none;background-color:#0b0c0800;transition:opacity .45s,background-color .22s;animation:pour 6s cubic-bezier(.1,.7,.3,1) forwards}@keyframes pour{to{--p: .28}}#boot.live{animation:none}#boot.cut{background-color:var(--ink)}#boot.gone{opacity:0}#boot p{display:flex;align-items:baseline;gap:10px;color:var(--green);font-size:14px}#boot-pct{min-width:3.4em;color:var(--paper);font-variant-numeric:tabular-nums;text-align:right}.counter{display:flex;align-items:flex-end;gap:4px;padding:9px 13px}.counter i{--f: clamp(0, calc(var(--p) * 10 - var(--i)), 1);width:17px;height:22px;transform:skew(-14deg);background:linear-gradient(to right,var(--green) calc(var(--f) * 100%),#1a1d13 calc(var(--f) * 100%))}.counter i:last-child{background:linear-gradient(to right,var(--red) calc(var(--f) * 100%),#1a1d13 calc(var(--f) * 100%))}#hud{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 14px) 0 calc(env(safe-area-inset-left) + 14px);pointer-events:none}.stat{display:flex;align-items:baseline;gap:5px}.stat span{color:var(--green);font-size:34px;line-height:1;font-variant-numeric:tabular-nums}.stat small{font-size:13px}.stat.pts{transform-origin:0 50%}.stat.pts span{font-size:54px}.stat.pts .bolt{font-size:34px}.stat.far{padding-top:6px}.stat.far span{color:var(--paper);font-size:18px}.stat.far small{font-size:11px}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 9vh) 20px calc(env(safe-area-inset-bottom) + 24px);text-align:center;pointer-events:none}.label{font-size:13px}.go{color:var(--green);font-size:22px;animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:0}}button,.chip,.keys,.counter{border:2px solid var(--green);border-radius:9px;background:linear-gradient(var(--panel),var(--ink));color:var(--paper)}button,.chip{font:inherit;letter-spacing:inherit;text-transform:inherit;text-shadow:inherit;text-decoration:none;pointer-events:auto;touch-action:manipulation;cursor:pointer}button:active{border-color:var(--red);color:var(--red)}.chip{padding:8px 12px 7px;font-size:10px}.mark{display:flex;flex-direction:column;align-items:center;margin-bottom:auto;color:var(--red);font-size:min(15.5vw,78px);line-height:.92;letter-spacing:0;text-shadow:2px 0 var(--green),-2px 0 var(--green),0 2px var(--green),0 -2px var(--green),1.5px 1.5px var(--green),-1.5px 1.5px var(--green),1.5px -1.5px var(--green),-1.5px -1.5px var(--green),4px 5px 0 var(--ink)}.mark small{color:var(--paper);font-size:.24em;line-height:1.5;letter-spacing:.12em;text-shadow:var(--rim)}#title .go{margin-bottom:14px}#scores-open{height:46px;padding:0 28px;color:var(--green);font-size:17px}#title .sound{margin-top:10px}#title .keys{margin-top:10px;padding:8px 14px 7px;font-size:10px;line-height:1.7}#pick{display:block;padding:0;text-align:left}.spine{position:absolute;left:calc(env(safe-area-inset-left) + 2px);bottom:calc(env(safe-area-inset-bottom) + 92px);writing-mode:vertical-rl;transform:rotate(180deg);color:var(--red);font-size:42px;line-height:1;letter-spacing:.01em;white-space:nowrap}#pick-stage{position:absolute;left:0;right:0;top:17%;bottom:calc(env(safe-area-inset-bottom) + 162px)}.rail{position:absolute;left:0;right:0;top:19%;bottom:calc(env(safe-area-inset-bottom) + 92px);display:flex;flex-direction:column;justify-content:flex-end}.arrows{flex:none;display:flex;justify-content:space-between;margin-bottom:auto;padding:0 max(0px,calc(50% - (100vh - 220px) / 3 - 54px)) 8px;padding:0 max(0px,calc(50% - (100dvh - 220px) / 3 - 54px)) 8px}.rail .spine{position:static;flex:none;align-self:flex-start;margin-left:calc(env(safe-area-inset-left) + 2px);font-size:clamp(22px,calc((100dvh - 330px) / 9.2),42px)}#pick-name{position:absolute;left:calc(env(safe-area-inset-left) + 56px);right:12px;top:calc(env(safe-area-inset-top) + 16px);font-size:34px;line-height:1;font-weight:900}#pick-name.long{font-size:min(21px,5.6vw);line-height:1.5;white-space:nowrap}#top{position:absolute;left:calc(env(safe-area-inset-left) + 56px);bottom:calc(env(safe-area-inset-bottom) + 92px)}#top.on{border-color:var(--red);color:var(--red)}#pose{position:absolute;right:calc(env(safe-area-inset-right) + 12px);top:calc(env(safe-area-inset-top) + 62px);padding:10px 16px 9px;color:var(--green);font-size:13px}.arrow{position:relative;width:54px;height:64px;border:0;background:none}.arrow:after{content:"";position:absolute;inset:14px 12px;background:var(--red);clip-path:polygon(0 50%,100% 0,100% 100%);filter:drop-shadow(0 0 0 var(--ink))}.arrow:active:after{background:var(--green)}#next:after{transform:scaleX(-1)}.card{position:absolute;right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 92px);color:var(--green);font-size:10px;line-height:1.5;text-align:right;white-space:nowrap}.card p:nth-of-type(n+2){color:var(--paper)}.card .bolt{margin-left:4px}.nav{position:absolute;left:calc(env(safe-area-inset-left) + 14px);right:calc(env(safe-area-inset-right) + 14px);bottom:calc(env(safe-area-inset-bottom) + 20px);display:flex;gap:10px}.nav button{height:54px;padding:0 18px;font-size:15px}#ok{flex:1;color:var(--green);font-size:20px}@media(min-aspect-ratio:1/1){#pick-name{font-size:46px}#pick-stage{top:16%;bottom:12%}.arrows{position:absolute;left:0;right:0;top:0;padding:0 calc(50% - (100vh - 154px) / 3 - 54px);padding:0 calc(50% - (100dvh - 154px) / 3 - 54px)}.nav{left:auto;width:380px}}body.board #title,body.board #over{visibility:hidden}#scores{display:block;padding:0;text-align:left;background:#0b0c08d6;pointer-events:auto}#scores h1{position:absolute;left:calc(env(safe-area-inset-left) + 56px);top:calc(env(safe-area-inset-top) + 16px);font-size:34px;line-height:1;font-weight:900}#scores-list{position:absolute;left:calc(env(safe-area-inset-left) + 56px);right:calc(env(safe-area-inset-right) + 14px);top:calc(env(safe-area-inset-top) + 66px);max-width:420px;list-style:none;font-size:14px}#scores-list li{display:grid;grid-template-columns:20px 1fr auto 62px;align-items:baseline;gap:8px;padding:5px 9px 4px;border:2px solid transparent;border-radius:8px}#scores-list li.me{border-color:var(--green);background:linear-gradient(var(--panel),var(--ink))}#scores-list li.none{opacity:.45}#scores-list .rank{color:var(--red)}#scores-list .who{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#scores-list .pts{color:var(--green);font-variant-numeric:tabular-nums}#scores-list .pts .bolt{margin-left:4px}#scores-list .far{color:var(--paper);font-size:10px;text-align:right}#scores-note{position:absolute;left:calc(env(safe-area-inset-left) + 56px);right:14px;bottom:calc(env(safe-area-inset-bottom) + 92px);font-size:10px}#over{justify-content:center;gap:10px;padding-bottom:28vh;background:#0b0c08a8}#over .score{display:flex;align-items:baseline;gap:6px;color:var(--green);font-size:84px;line-height:1;font-variant-numeric:tabular-nums}#over .score .bolt{font-size:54px}#over .go{margin-top:14px}#change{margin-top:4px}#new-record{color:var(--red);font-size:16px}#pick-record{color:var(--paper)}
