*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}.pxtext{display:inline-flex;line-height:0}.pxtext canvas{display:block;image-rendering:pixelated}#stage{position:relative;width:1280px;height:720px;transform-origin:center center;background:#000;overflow:hidden;border:3px solid #ffffff}#gl{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}#lcd-overlay{position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0px,rgba(0,0,0,.3) 1px,transparent 1px,transparent 4px)}#flash{position:absolute;inset:0;pointer-events:none;z-index:7;background:#fff;opacity:0;transition:opacity .05s linear}#flash.on{opacity:.85;transition:none}#hud{position:absolute;inset:0;z-index:10;pointer-events:none}.hud-top{position:absolute;top:12px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-start}.hud-block{display:flex;flex-direction:column;gap:4px}.hud-block.center{align-items:center}.hud-block.right{align-items:flex-end}.miss-row{display:flex;align-items:center;gap:8px;margin-top:2px}.miss-label.warn{animation:hardblink .4s steps(1) infinite}.miss-dot{width:14px;height:14px;border-radius:0;background:#fff}.miss-dot.broken{background:transparent;border:2px solid #ffffff}.fever-meter{width:224px;height:8px;margin-top:7px;border:2px solid #ffffff;background:#000}#fever-fill{height:100%;width:0%;background:#fff;transition:width .18s steps(6)}.fever-meter.surging{animation:invertblink .3s steps(1) infinite}@keyframes invertblink{50%{background:#fff}}.fever-label{animation:hardblink .35s steps(1) infinite}@keyframes hardblink{50%{opacity:0}}.combo-flash{position:absolute;top:64px;left:50%;transform:translate(-50%);animation:combo .8s steps(8) forwards}@keyframes combo{0%{opacity:1;transform:translate(-50%) scale(1.35)}to{opacity:0;transform:translate(-50%) scale(1)}}#popups{position:absolute;inset:0;z-index:11;pointer-events:none}.popup{position:absolute;animation:popup .9s steps(10) forwards;transform:translate(-50%,-50%)}.popup.gold{animation:popup .9s steps(10) forwards,hardblink .2s steps(1) 4}.popup.bad{animation:popup .9s steps(10) forwards,hardblink .12s steps(1) 6}@keyframes popup{0%{opacity:1;margin-top:0}to{opacity:0;margin-top:-46px}}#touch-ui{position:absolute;inset:0;z-index:12}.touch-zone{position:absolute;width:26%;height:30%;background:transparent;border:none;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.touch-zone:after{content:"";position:absolute;inset:14px;border:2px dashed #ffffff}.touch-zone:active:after,.touch-zone.active:after{border-style:solid;background:#fff}.touch-zone.tl{top:6%;left:2%}.touch-zone.tr{top:6%;right:2%}.touch-zone.bl{bottom:6%;left:2%}.touch-zone.br{bottom:6%;right:2%}.screen{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#000}.menu-frame{display:flex;flex-direction:column;align-items:center;gap:16px;padding:34px 56px;border:3px solid #ffffff;background:#000;text-align:center}.lcd-button{pointer-events:auto;display:flex;align-items:center;justify-content:center;padding:14px 30px;background:#000;border:3px solid #ffffff;cursor:pointer}.lcd-button:active{background:#fff}.lcd-button:active canvas{filter:invert(1)}.lcd-button:focus-visible{outline:2px solid #ffffff;outline-offset:3px}#btn-start{animation:hardblink .9s steps(1) infinite}.lcd-button.ghost{border-width:2px}.new-record{animation:hardblink .5s steps(1) infinite}.go-stats{display:flex;gap:44px;margin:4px 0}.go-stat{display:flex;flex-direction:column;gap:6px;align-items:center}.menu-foot{display:flex;align-items:center;gap:10px}#rotate-hint{position:absolute;top:8px;left:50%;transform:translate(-50%);z-index:40;display:none;padding:7px 10px;background:#fff}#rotate-hint canvas{filter:invert(1)}@media (orientation: portrait){#rotate-hint{display:inline-flex}}.hidden{display:none!important}#stage.fever-border{animation:feverinvert .5s steps(1) infinite}@keyframes feverinvert{50%{border-color:#000;box-shadow:inset 0 0 0 3px #fff}}
