:root{--cyan:#5ff6ff;--magenta:#ff5fd2;--gold:#ffd166;--violet:#9d6bff;--red:#ff4d6d;--green:#7dffb0;--ink:#070312;--paper:#e8ecff;--font-pixel:"Press Start 2P", "Courier New", monospace;--font-term:"VT323", "Courier New", monospace}*{box-sizing:border-box}html,body{background:var(--ink);height:100%;color:var(--paper);font-family:var(--font-pixel);-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}#gl{width:100%;height:100%;image-rendering:pixelated;display:block;position:fixed;inset:0}#vignette{pointer-events:none;z-index:2;background:radial-gradient(#0000 55%,#0000008c 100%);position:fixed;inset:0}#flash{pointer-events:none;z-index:3;opacity:0;background:#fff;transition:opacity .35s ease-out;position:fixed;inset:0}#flash.on{transition:none}#scanlines{pointer-events:none;z-index:4;background:repeating-linear-gradient(#00000012 0 1px,#0000 1px 3px);position:fixed;inset:0}.hidden{display:none!important}#hud{z-index:10;pointer-events:none;text-shadow:0 0 6px #5ff6ff80,2px 2px #000;flex-direction:column;justify-content:space-between;padding:18px 22px;display:flex;position:fixed;inset:0}.hud-top{justify-content:space-between;align-items:flex-start;display:flex}.hud-block{min-width:180px}.hud-block.right{text-align:right}.hud-block.center{text-align:center;flex:1}.label{letter-spacing:2px;color:var(--cyan);opacity:.85;margin-bottom:6px;font-size:10px}.big{font-size:22px;line-height:1.2}.combo{color:var(--gold);min-height:18px;margin-top:8px;font-size:14px}.combo.hot{color:var(--magenta);animation:.4s ease-out pulse}.key{color:var(--violet);margin-top:8px;font-size:11px}.stage{color:var(--green);letter-spacing:1px;margin-top:8px;font-size:10px}.lives{color:var(--magenta);letter-spacing:4px;text-shadow:0 0 12px var(--magenta), 2px 2px 0 #000;font-size:26px;line-height:1}.health{border:2px solid var(--cyan);width:min(360px,40vw);height:14px;image-rendering:pixelated;background:#00000080;margin:0 auto;box-shadow:0 0 10px #5ff6ff66,inset 0 0 8px #000c}#health-bar{background:linear-gradient(90deg, var(--cyan), var(--green));width:100%;height:100%;transition:width .25s ease-out,background .25s}#health-bar.low{background:linear-gradient(90deg, var(--red), var(--magenta))}#judgement{text-align:center;pointer-events:none;font-size:28px;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.judge{white-space:nowrap;animation:.9s ease-out forwards judge;position:absolute;left:50%;transform:translate(-50%)}.judge.perfect{color:var(--gold);text-shadow:0 0 18px var(--gold), 3px 3px 0 #000}.judge.good{color:var(--cyan);text-shadow:0 0 14px var(--cyan), 3px 3px 0 #000}.judge.miss{color:var(--red);text-shadow:0 0 14px var(--red), 3px 3px 0 #000}.judge.crash{color:var(--magenta);text-shadow:0 0 14px var(--magenta), 3px 3px 0 #000}.judge.level{color:var(--green);text-shadow:0 0 14px var(--green), 3px 3px 0 #000;font-size:22px;animation-duration:1.6s}.judge small{opacity:.9;margin-top:8px;font-size:11px;display:block}@keyframes judge{0%{opacity:0;transform:translate(-50%,20px)scale(.6)}15%{opacity:1;transform:translate(-50%)scale(1.15)}30%{transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%,-40px)scale(1)}}@keyframes pulse{0%{transform:scale(1.4)}to{transform:scale(1)}}.hud-bottom{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:10px;display:flex}.hud-bottom .side{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.chord-lane{text-align:left;min-width:220px}.chord-now{color:#fff;min-height:40px;text-shadow:0 0 20px var(--chord-color,var(--cyan)), 3px 3px 0 #000;font-size:34px;transition:color .2s}.chord-now.flash{animation:.3s ease-out pulse}.chord-next{color:#e8ecffa6;letter-spacing:1px;margin-top:8px;font-size:11px}.chord-next span{margin:0 8px}.piano{background:#0000008c;border:2px solid #5ff6ff80;height:54px;padding:3px;display:flex;position:relative;box-shadow:0 0 12px #5ff6ff40}.pk{background:#d9deea;border-radius:0 0 2px 2px;width:18px;height:100%;margin-right:1px;position:relative}.pk.black{z-index:2;background:#15102a;border:1px solid #000;border-radius:0 0 2px 2px;width:12px;height:58%;margin:0;position:absolute;top:3px}.pk.hint{background:var(--violet);box-shadow:inset 0 -6px #0000004d}.pk.black.hint{background:#6a3fd6}.pk.held{box-shadow:0 0 10px var(--cyan);background:var(--cyan)!important}.pk.held.hint{box-shadow:0 0 10px var(--green);background:var(--green)!important}.pk.wrong{box-shadow:0 0 10px var(--red);background:var(--red)!important}.pk .c-label{text-align:center;color:#333;font-size:7px;position:absolute;bottom:2px;left:0;right:0}.hint-text{font-family:var(--font-term);color:#e8ecffb3;letter-spacing:1px;min-height:22px;font-size:20px}.screen{z-index:20;background:radial-gradient(at 50% 30%,#3c147859,#070312bf 70%);flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:24px;display:flex;position:fixed;inset:0;overflow-y:auto}#title{flex-flow:wrap;place-content:flex-start center;align-items:flex-start;gap:18px 22px}#title .logo,#title .credit{text-align:center;width:100%}#title .panel{width:min(620px,94vw)}#title .board{align-self:stretch;width:min(400px,94vw)}.logo{text-align:center}.logo-main{letter-spacing:4px;color:#fff;text-shadow:0 0 24px var(--cyan), 0 0 60px #5ff6ff80, 5px 5px 0 #2a0a5a, 8px 8px 0 #000;font-size:clamp(34px,7vw,72px);animation:3s ease-in-out infinite floaty}.logo-main.small{font-size:clamp(26px,4vw,40px)}.logo-main span{color:var(--magenta);text-shadow:0 0 24px var(--magenta), 0 0 60px #ff5fd280, 5px 5px 0 #2a0a5a, 8px 8px 0 #000}.logo-sub{font-family:var(--font-term);color:var(--cyan);letter-spacing:1px;margin-top:14px;font-size:22px}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.panel{border:3px solid var(--cyan);background:#070312c7;flex-direction:column;gap:18px;width:min(680px,94vw);padding:22px 26px;display:flex;box-shadow:0 0 30px #5ff6ff40,inset 0 0 40px #0009,8px 8px #000}.row{flex-direction:column;gap:8px;display:flex}.row-label{letter-spacing:2px;color:var(--magenta);font-size:10px}.row-body{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.row-note{font-family:var(--font-term);color:#e8ecffb3;font-size:18px}.row-note.ok{color:var(--green)}.row-note.bad{color:var(--red)}select{min-width:220px;font-family:var(--font-term);color:var(--paper);border:2px solid var(--violet);background:#0c0620;outline:none;flex:1;padding:6px 10px;font-size:20px}.btn{font-family:var(--font-pixel);color:var(--paper);border:2px solid var(--violet);cursor:pointer;background:#15102a;padding:12px 16px;font-size:12px;transition:transform 80ms,box-shadow 80ms,background .15s;box-shadow:4px 4px #000}.btn:hover{background:#241a44}.btn:active{transform:translate(3px,3px);box-shadow:1px 1px #000}.btn.small{padding:8px 10px;font-size:9px}.btn.primary{background:var(--magenta);color:#fff;text-shadow:2px 2px #7a1a5a;border-color:#fff;padding:18px 28px;font-size:16px;box-shadow:0 0 24px #ff5fd280,6px 6px #000}.btn.primary:hover{background:#ff7add}.btn.primary:disabled{opacity:.5;cursor:not-allowed}.seg{gap:8px}.seg-btn{flex-direction:column;flex:1;align-items:center;gap:6px;min-width:110px;padding:12px 8px;display:flex}.seg-btn small{font-family:var(--font-term);opacity:.7;font-size:16px}.seg-btn.active{background:var(--violet);color:#fff;border-color:#fff}.check{cursor:pointer;align-items:center;gap:8px;font-size:9px;line-height:1.5;display:flex}.check input{accent-color:var(--magenta);width:16px;height:16px}.small-select{flex:0;min-width:150px;padding:3px 6px;font-size:16px}.help{font-family:var(--font-term);color:#e8ecffbf;flex-direction:column;gap:4px;font-size:18px;line-height:1.4;display:flex}.credit{font-family:var(--font-term);color:#e8ecff66;font-size:18px}.board{border:3px solid var(--magenta);background:#070312c7;flex-direction:column;gap:10px;width:min(680px,94vw);padding:16px 22px;display:flex;box-shadow:0 0 30px #ff5fd233,inset 0 0 40px #0009,8px 8px #000}.board-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.board-tabs{flex-wrap:wrap;gap:5px;display:flex}.board-tabs .btn.active,.settings-toggle.active{background:var(--magenta);color:#fff;border-color:#fff}.board-sub{color:var(--gold);letter-spacing:1px;font-size:9px}.btn.tiny{padding:7px 9px;font-size:8px;box-shadow:3px 3px #000}.midi-line{font-family:var(--font-term);color:#e8ecffcc;align-items:center;gap:10px;font-size:19px;display:flex}#midi-status{flex:1;min-width:0;line-height:1.2}.midi-line select{flex:1;min-width:180px;padding:4px 8px;font-size:18px}.dot{background:#555;border-radius:50%;flex:none;width:12px;height:12px;box-shadow:0 0 6px #0009}.dot.ok{background:var(--green);box-shadow:0 0 10px var(--green)}.dot.bad{background:var(--red);box-shadow:0 0 10px var(--red)}.dot.pulse{animation:.35s ease-out dotpulse}@keyframes dotpulse{0%{background:#fff;transform:scale(2.2)}to{transform:scale(1)}}.start-row{flex-wrap:wrap;gap:12px;display:flex}.start-btn{color:#fff;text-shadow:2px 2px #0009;border-width:3px;flex-direction:column;flex:1;align-items:center;gap:10px;min-width:150px;padding:24px 14px;font-size:18px;display:flex;box-shadow:0 0 22px #ffffff1f,6px 6px #000}.start-btn small{font-family:var(--font-term);opacity:.85;text-shadow:none;font-size:17px}.start-btn.easy{border-color:var(--green);background:#1e8a5a}.start-btn.easy:hover{background:#26a86e}.start-btn.medium{border-color:var(--violet);background:#6a3fd6}.start-btn.medium:hover{background:#7d52e8}.start-btn.hard{border-color:var(--red);background:#c0254f}.start-btn.hard:hover{background:#d93863}.settings-toggle{align-self:flex-end}.settings{border-top:2px solid #9d6bff59;flex-direction:column;gap:14px;padding-top:14px;display:flex}.board-head .row-label{margin:0}#board-diff{color:var(--gold);margin-top:6px;display:block}#board-table{border-collapse:collapse;width:100%;font-family:var(--font-term);font-size:20px}#board-table th{font-family:var(--font-pixel);letter-spacing:1px;color:var(--cyan);text-align:left;border-bottom:2px solid #5ff6ff4d;padding:4px 6px;font-size:8px}#board-table td{color:var(--paper);padding:3px 6px}#board-table td.num,#board-table th.num{text-align:right}#board-table tr:first-child td{color:var(--gold)}#board-table tr:nth-child(2) td{color:#d9deea}#board-table tr:nth-child(3) td{color:#d9a066}#board-table tr.mine td{background:#9d6bff40}.entry{flex-direction:column;align-items:center;gap:10px;display:flex}#over-name{font-family:var(--font-pixel);width:240px;color:var(--gold);border:2px solid var(--magenta);text-transform:uppercase;background:#0c0620;outline:none;padding:10px 12px;font-size:14px}.rank{color:var(--green);text-shadow:0 0 12px var(--green), 2px 2px 0 #000;font-size:14px}.stats{border:3px solid var(--magenta);background:#070312c7;grid-template-columns:1fr 1fr;gap:14px 40px;padding:22px 30px;display:grid;box-shadow:8px 8px #000}.stats div{flex-direction:column;align-items:center;gap:8px;display:flex}.stats b{color:var(--gold);font-size:22px}@media (width<=720px){.hud-block{min-width:0}.big{font-size:14px}.chord-now{font-size:24px}.pk{width:12px}.pk.black{width:8px}.hud-block.center{display:none}}