@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";body,html,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:"Press Start 2P",cursive,sans-serif;background-color:#0d0d1a;color:#e0e0ff;display:flex;justify-content:center;align-items:center}.app-container{position:relative;width:100%;max-width:800px;height:100%;max-height:600px;background-color:#1a0a2a;border:4px solid #0ff;box-shadow:0 0 20px #0ffc,0 0 40px #0ff6;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;--note-speed: 200px;--judgment-line-y: 500px;--note-spawn-y: -100px;--track-width: 100px;--track-offset: 150px}.app-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,rgba(0,255,255,.1) 0%,transparent 70%);animation:background-pulse 10s infinite alternate;z-index:0;pointer-events:none}@keyframes background-pulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}to{transform:scale(1);opacity:.8}}.star-particles{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;z-index:1;overflow:hidden}.star-particles:before{content:"";position:absolute;top:-100%;left:0;width:100%;height:200%;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.2) 0px,rgba(255,255,255,.2) 2px,transparent 3px,transparent 20px);animation:star-fall 10s linear infinite}@keyframes star-fall{0%{transform:translateY(0)}to{transform:translateY(50%)}}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0d0d1af2;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#0ff;font-size:1.2em;z-index:1000}.spinner{border:4px solid rgba(0,255,255,.3);border-top:4px solid #0ff;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-tip{font-size:.9em;color:#aaa;margin-top:10px}.start-screen,.game-over-screen{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-size:cover;background-position:center;text-align:center;position:relative;padding:20px;box-sizing:border-box}.game-title{font-size:3.5em;color:#f0f;text-shadow:0 0 10px #ff00ff,0 0 20px #ff00ff,0 0 30px #0ff,0 0 40px #0ff;margin-bottom:20px;animation:pulse 1.5s infinite alternate}@keyframes pulse{0%{transform:scale(1);text-shadow:0 0 10px #ff00ff,0 0 20px #ff00ff,0 0 30px #0ff,0 0 40px #0ff}to{transform:scale(1.05);text-shadow:0 0 15px #ff00ff,0 0 25px #ff00ff,0 0 35px #0ff,0 0 45px #0ff}}.high-score-display{font-size:1.5em;color:#0ff;text-shadow:0 0 5px #00ffff;margin-bottom:30px}.start-button,.restart-button{background:linear-gradient(45deg,#f0f,#0ff);border:none;padding:15px 30px;font-size:1.8em;color:#fff;border-radius:10px;cursor:pointer;box-shadow:0 0 15px #ff00ffb3,0 0 25px #00ffffb3;transition:all .3s ease;display:flex;align-items:center;gap:10px}.start-button:hover,.restart-button:hover{box-shadow:0 0 20px #f0f,0 0 30px #0ff;transform:translateY(-2px)}.start-button svg,.restart-button svg{stroke:#fff}.controls-hint{margin-top:30px;font-size:.9em;color:#aaa;line-height:1.5}.controls-hint p{margin:5px 0}.game-playing-container{position:relative;width:100%;height:100%;background-color:#1a0a2a;cursor:none}.combo-flash-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff3;pointer-events:none;z-index:100;animation:combo-flash .2s ease-out forwards}@keyframes combo-flash{0%{opacity:0}50%{opacity:.2}to{opacity:0}}.transformed-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(170,255,170,.2) 0%,transparent 70%);pointer-events:none;z-index:99;animation:transformed-glow .8s infinite alternate}@keyframes transformed-glow{0%{opacity:.5;transform:scale(1)}to{opacity:.8;transform:scale(1.05)}}.hud{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;background-color:#0009;padding:10px 20px;border-radius:8px;border:1px solid #0ff;box-shadow:0 0 10px #00ffff80;z-index:10}.hud-item{display:flex;align-items:center;gap:8px;font-size:1.1em;color:#fff;text-shadow:0 0 5px #0ff}.hud-item svg{stroke:#0ff}.boss-area{position:absolute;top:80px;right:20px;display:flex;flex-direction:column;align-items:flex-end;z-index:5}.boss-hp-bar-container{width:180px;height:20px;background-color:#ff00004d;border:2px solid #f00;border-radius:10px;overflow:hidden;margin-bottom:10px;position:relative;box-shadow:0 0 10px #ff0000b3}.boss-hp-bar{height:100%;background:linear-gradient(90deg,red,#f60);transition:width .3s ease-out;border-radius:8px}.boss-hp-text{position:absolute;width:100%;text-align:center;line-height:20px;font-size:.9em;color:#fff;text-shadow:0 0 5px #000}.boss-character{width:150px;height:150px;display:flex;justify-content:center;align-items:center;background-color:#0000004d;border-radius:50%;box-shadow:0 0 15px #ff00ffb3}.boss-character img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px #ff00ff)}.player-area{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;z-index:5}.player-character{width:120px;height:120px;display:flex;justify-content:center;align-items:center;background-color:#0000004d;border-radius:50%;box-shadow:0 0 15px #00ffffb3;position:relative}.player-character img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px #00ffff)}.player-character.transformed img{filter:drop-shadow(0 0 10px #aaffaa) drop-shadow(0 0 20px #aaffaa);animation:player-transformed-pulse .5s infinite alternate}@keyframes player-transformed-pulse{0%{transform:scale(1)}to{transform:scale(1.05)}}.transform-aura{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.transform-aura svg{filter:drop-shadow(0 0 10px #aaffaa)}.attack-effect{position:absolute;top:-80px;width:100px;height:100px;display:flex;justify-content:center;align-items:center;pointer-events:none}.attack-effect img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 15px #ff00ff)}.note-tracks-container{position:absolute;width:calc(var(--track-width) * 4);height:100%;left:var(--track-offset);top:0;pointer-events:none}.note-track{position:absolute;width:var(--track-width);height:100%;border-left:2px dashed rgba(0,255,255,.2);border-right:2px dashed rgba(0,255,255,.2);background-image:linear-gradient(to top,rgba(0,255,255,.05) 0%,transparent 100%);transition:background-color .1s ease-out,box-shadow .1s ease-out}.note-track:last-child{border-right:none}.note-track.active-track{background-color:#00ffff1a;box-shadow:inset 0 0 10px #00ffff80}.judgment-line{position:absolute;bottom:calc(600px - var(--judgment-line-y));width:calc(var(--track-width) * 4);height:5px;background:linear-gradient(90deg,transparent,#00ffff,#ff00ff,#00ffff,transparent);box-shadow:0 0 15px #0ff,0 0 25px #f0f;z-index:5;left:0;pointer-events:none;animation:judgment-pulse 1.5s infinite alternate}.judgment-line.hit-effect{animation:hit-effect-pulse .1s ease-out forwards}@keyframes judgment-pulse{0%{box-shadow:0 0 10px #0ff,0 0 20px #f0f}to{box-shadow:0 0 15px #0ff,0 0 25px #f0f,0 0 35px #0ff}}@keyframes hit-effect-pulse{0%{transform:scaleX(1);opacity:1;box-shadow:0 0 20px #fff,0 0 30px #fff}50%{transform:scaleX(1.05);opacity:.8;box-shadow:0 0 25px #fff,0 0 40px #fff}to{transform:scaleX(1);opacity:1;box-shadow:0 0 15px #0ff,0 0 25px #f0f}}.player-track-indicator{position:absolute;width:var(--track-width);height:10px;background:linear-gradient(90deg,transparent,#00ffff,#ff00ff,transparent);box-shadow:0 0 15px #0ff,0 0 25px #f0f;z-index:9;bottom:calc(600px - var(--judgment-line-y) - 5px);pointer-events:none;border-radius:5px}.note-wrapper{position:absolute;width:60px;height:60px;transform:translate(-50%);pointer-events:none;display:flex;justify-content:center;align-items:center;z-index:8}.note-wrapper svg{width:100%;height:100%;filter:drop-shadow(0 0 5px rgba(255,255,255,.5))}.note-wrapper.note-transform svg{filter:drop-shadow(0 0 8px #aaffaa) drop-shadow(0 0 15px rgba(170,255,170,.7));animation:transform-note-glow 1s infinite alternate}@keyframes transform-note-glow{0%{transform:scale(1);opacity:1}to{transform:scale(1.1);opacity:.9}}.score-pop{position:absolute;font-size:1.5em;font-weight:700;color:#fc0;text-shadow:0 0 8px #ffcc00,0 0 15px rgba(255,204,0,.5);pointer-events:none;z-index:100}.empty-notes-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5em;color:#aaa;text-shadow:0 0 5px #aaa;z-index:7}.pause-button{position:absolute;top:10px;right:10px;background-color:#000000b3;border:2px solid #0ff;color:#0ff;width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 0 10px #00ffff80;z-index:15}.pause-button svg{stroke:#0ff}.pause-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000e6;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#0ff;font-size:1.5em;z-index:20}.pause-overlay h2{font-size:2em;color:#f0f;text-shadow:0 0 10px #ff00ff;margin-bottom:30px}.pause-overlay button{background:linear-gradient(45deg,#f0f,#0ff);border:none;padding:10px 20px;font-size:1.2em;color:#fff;border-radius:8px;cursor:pointer;box-shadow:0 0 10px #ff00ffb3,0 0 15px #00ffffb3;transition:all .3s ease;margin:10px}.pause-overlay button:hover{box-shadow:0 0 15px #f0f,0 0 20px #0ff;transform:translateY(-2px)}.game-over-title{font-size:3.5em;color:red;text-shadow:0 0 10px #ff0000,0 0 20px #ff0000,0 0 30px #ff6600;margin-bottom:20px;animation:flicker .8s infinite alternate}@keyframes flicker{0%{opacity:1;text-shadow:0 0 10px #ff0000}to{opacity:.8;text-shadow:0 0 15px #ff0000,0 0 25px #ff6600}}.final-score{font-size:1.8em;color:#fff;text-shadow:0 0 8px #fff;margin-bottom:10px}.new-high-score{font-size:1.5em;color:#fc0;text-shadow:0 0 10px #ffcc00;margin-bottom:30px}.cloud-status-indicator{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background-color:#0009;padding:5px 15px;border-radius:5px;font-size:.9em;color:#0ff;text-shadow:0 0 5px #0ff;white-space:nowrap;z-index:20}.start-screen-cloud-status,.game-over-cloud-status{bottom:20px}