@import"https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Comic+Neue:wght@700&display=swap";:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow:hidden}#app{width:100%;height:100vh}#ui-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#start-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;pointer-events:auto;z-index:100}#rhythm-bar,#score,#status-meter{display:none}#game-title{max-width:600px;width:80%;height:auto;filter:drop-shadow(8px 8px 0px rgba(0,0,0,.5))}#start-btn{font-size:2rem;padding:1rem 2rem;background:#fbff00;color:#000;border:4px solid #000;font-weight:700;cursor:pointer;transform:rotate(-3deg);transition:transform .1s}#start-btn:hover{transform:scale(1.1) rotate(2deg)}#rhythm-bar{position:absolute;top:20px;left:50%;transform:translate(-50%);width:800px;height:60px;background:#ffffffd9;border:4px solid #000;border-radius:10px;overflow:hidden;box-shadow:5px 5px #00000080;opacity:.9}#beat-line{position:absolute;top:50%;width:100%;height:4px;background:#ddd;transform:translateY(-50%)}#target-line{position:absolute;top:0;left:20%;width:4px;height:100%;background:red;z-index:10;border-left:2px solid black;border-right:2px solid black}#target-line:after{content:"HIT";position:absolute;top:-20px;left:50%;transform:translate(-50%);font-weight:700;color:red;font-size:12px}.note{position:absolute;top:50%;width:30px;height:30px;width:40px;height:40px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:monospace;font-size:24px;color:#fff;border:2px solid white;border-radius:5px;box-shadow:2px 2px #00000080}.note.left{background-color:#f0f}.note.left:after{content:"←"}.note.right{background-color:#0ff;color:#000;border-color:#000}.note.right:after{content:"→"}.note.up{background-color:#0f0;color:#000;border-color:#000}.note.up:after{content:"↑"}.note.down{background-color:#00f}.note.down:after{content:"↓"}#game-over-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#280000e6;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;font-family:Luckiest Guy,cursive;text-align:center;pointer-events:auto}#game-over-overlay h1{font-size:6rem;margin-bottom:0;text-shadow:5px 5px 0 #000}#game-over-overlay button{font-family:Luckiest Guy,cursive;font-size:2.5rem;padding:15px 40px;background:#fbff00;color:#000;border:4px solid #000;cursor:pointer;margin-top:20px;box-shadow:5px 5px #00000080}#status-meter{position:absolute;bottom:320px;right:120px;display:flex;align-items:flex-start;gap:25px;pointer-events:none;z-index:50;height:180px}#status-prefix{font-family:Comic Neue,cursive;font-size:1.8rem;color:#fff;text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;white-space:nowrap;height:45px;line-height:45px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}#status-list{display:flex;flex-direction:column;gap:0px;font-family:Luckiest Guy,cursive;align-items:flex-start}#status-list div{font-size:2.1rem;color:#333;text-shadow:3px 3px 0 rgba(0,0,0,.5);height:45px;line-height:45px;transition:all .3s}#status-list div.active{color:#fbff00;text-shadow:3px 3px 0 #000}@keyframes rainbow-strobe{0%{color:red}20%{color:#ff0}40%{color:#0f0}60%{color:#0ff}80%{color:#00f}to{color:#f0f}}.status-3 .active,.status-3 #status-prefix{animation:rainbow-strobe .5s infinite linear}@keyframes bw-strobe{0%,49%{color:#fff;text-shadow:2px 2px 0 #000}50%,to{color:#000;text-shadow:2px 2px 0 #fff}}.status-1 .active,.status-1 #status-prefix{animation:bw-strobe .4s infinite steps(1)}@keyframes yb-strobe{0%,49%{color:#fbff00;text-shadow:2px 2px 0 #000}50%,to{color:#000;text-shadow:2px 2px 0 #fbff00}}.status-0 .active,.status-0 #status-prefix{animation:yb-strobe .2s infinite steps(1)}#status-list div.active:after{content:" !";color:inherit}#score{position:absolute;bottom:280px;left:80px;font-family:Luckiest Guy,cursive;font-size:2rem;color:#fff;text-shadow:3px 3px 0 #000;z-index:50}#touch-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:grid;grid-template-columns:repeat(3,50px);grid-template-columns:repeat(3,85px);grid-template-rows:repeat(3,85px);gap:8px;pointer-events:auto;z-index:60;opacity:.2}.touch-btn{width:85px;height:85px;border-radius:8px;border:3px solid white;background:#0009;color:#fff;font-size:40px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.touch-btn.left{grid-column:1;grid-row:2}.touch-btn.up{grid-column:2;grid-row:1}.touch-btn.right{grid-column:3;grid-row:2}.touch-btn.down{grid-column:2;grid-row:3}.touch-btn:active{background:#fff6;transform:scale(.95)}@media (max-width: 600px){#rhythm-bar{width:90%;height:50px}#game-title{width:90%}#status-meter{right:20px;transform:scale(.8);transform-origin:bottom right}#score{left:20px;font-size:1.5rem}#touch-controls{bottom:20px}}