@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap";:root{--primary-color: #ff00ff;--secondary-color: #00ffff;--bg-color: #111;--lane-color: rgba(255, 255, 255, .1);--judgment-line-color: #ff0055}body{margin:0;font-family:Inter,sans-serif;background-color:var(--bg-color);color:#fff;overflow:hidden;-webkit-user-select:none;user-select:none}.game-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,#222,#000)}.screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:0;left:0;animation:fadeEnter .6s cubic-bezier(.22,1,.36,1)}@keyframes fadeEnter{0%{opacity:0;transform:scale(.95);filter:blur(10px)}to{opacity:1;transform:scale(1);filter:blur(0)}}.title-screen h1{font-size:4rem;background:linear-gradient(45deg,#f0f,#0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2rem;text-shadow:0 0 20px rgba(255,0,255,.5)}.start-btn{padding:1rem 3rem;font-size:2rem;background:transparent;border:2px solid white;color:#fff;cursor:pointer;transition:all .3s;border-radius:50px}.start-btn:hover{background:#fff;color:#000;box-shadow:0 0 20px #fff;transform:scale(1.1)}.select-screen{background:url(/images/select_bg.jpg) no-repeat center center;background-size:cover}.select-screen h2{font-size:3rem;margin-bottom:2rem;text-shadow:0 0 10px black}.song-list{display:flex;flex-direction:column;gap:1rem;width:80%;max-width:600px}.song-item{background:#000000b3;padding:1rem;border-radius:8px;cursor:pointer;transition:all .2s;border-left:5px solid transparent;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,.1)}.song-item:hover{background:#323232cc;border-left:5px solid cyan;transform:translate(10px);box-shadow:0 0 15px #00ffff4d}.song-info-main{flex:1}.song-title{font-size:1.5rem;font-weight:700;color:#fff}.song-artist{font-size:1rem;color:#ccc}.song-meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.song-diff{font-weight:700;padding:2px 8px;border-radius:4px;font-size:.9rem}.song-diff[data-diff=NORMAL]{background:#0c0;color:#000;box-shadow:0 0 5px #0c0}.song-diff[data-diff=HARD]{background:#f05;color:#fff;box-shadow:0 0 5px #f05}.song-bpm,.song-duration{font-size:.8rem;color:#888;font-family:monospace}.instructions-box{background:#0009;padding:1rem;border-radius:8px;margin-bottom:2rem;text-align:center;border:1px solid rgba(255,255,255,.2)}kbd{background:#333;border:1px solid #666;border-radius:4px;padding:2px 6px;margin:0 2px;font-family:monospace}.game-screen{justify-content:flex-start;padding-top:20px}.lanes-container{width:90%;max-width:500px;position:relative;background:linear-gradient(to bottom,#000c,#00323280);border-left:2px solid rgba(255,255,255,.2);border-right:2px solid rgba(255,255,255,.2);overflow:hidden;transform:perspective(1000px) rotateX(10deg);transform-style:preserve-3d}.lane{position:absolute;top:0;bottom:0;width:25%;border-right:1px solid rgba(255,255,255,.1);box-sizing:border-box}.lane:nth-child(1){left:0%}.lane:nth-child(2){left:25%}.lane:nth-child(3){left:50%}.lane:nth-child(4){left:75%;border-right:none}.judgement-line{position:absolute;top:var(--hit-y);left:0;right:0;height:4px;background:#0ff;box-shadow:0 0 10px #0ff;z-index:5}@media(max-width:768px){.key-hint{display:none}.judgement-line{height:5px;box-shadow:0 0 15px #0ff}.judge-img{max-height:20vh;opacity:.9}.combo-display{top:10%}.lanes-container{width:100%;border:none;transform:none;background:#000c}.title-screen h1{font-size:2.5rem}.start-btn{font-size:1.5rem;padding:.8rem 2rem}}.note{position:absolute;width:25%;height:20px;background:#f0f;border-radius:4px;box-shadow:0 0 10px #f0f;border:1px solid white}.note.rare{background:gold;box-shadow:0 0 15px gold}.vfx{position:absolute;top:0;width:25%;height:100%;background:linear-gradient(to bottom,#ffffff1a,#fff6);pointer-events:none;z-index:4;opacity:0;transition:opacity .2s ease-out}.vfx.active{opacity:1;transition:none;transform:scaleX(1)}.vfx.perfect{background:linear-gradient(to bottom,#ffd70000,#ffd70099)}.vfx.good{background:linear-gradient(to bottom,#0ff0,#0ff9)}.vfx.miss{background:linear-gradient(to bottom,#f000,#f006)}.vfx.tap{background:linear-gradient(to bottom,#fff0,#fffc)}.judgement-display{position:absolute;top:40%;width:100%;text-align:center;font-size:3rem;font-weight:700;text-shadow:0 0 10px black;z-index:20;pointer-events:none}.hud{position:absolute;top:50px;left:20px;text-align:left}.combo-display{position:absolute;top:15%;width:100%;text-align:center;z-index:25;pointer-events:none;font-family:Inter,sans-serif}.combo-count{font-size:5rem;font-weight:900;color:#fff;text-shadow:0 0 10px #00ffff,0 0 20px #00ffff,0 0 40px #00ffff;animation:pulseCombo .1s ease-out}.combo-label{font-size:1.5rem;color:#cff;letter-spacing:.5rem;text-shadow:0 0 5px cyan}@keyframes pulseCombo{0%{transform:scale(1.5);opacity:.8}to{transform:scale(1);opacity:1}}.score{font-size:2rem;color:#fff;text-shadow:0 0 5px purple}.judge-image-container{position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:1;animation:popIn .2s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;opacity:.6;width:100%;display:flex;justify-content:center;align-items:flex-end}.judge-img{width:100%;height:auto;max-height:50vh;object-fit:contain;box-shadow:none;border:none;filter:none}@keyframes popIn{0%{transform:translate(-50%) scale(.8);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}.back-btn{position:absolute;top:20px;left:20px;padding:10px 20px;background:#ff00004d;border:1px solid red;color:#fff;cursor:pointer;z-index:100}.key-hint{position:absolute;bottom:20px;width:100%;text-align:center;font-size:2rem;font-weight:700;color:#ffffff80;text-shadow:0 0 5px cyan;pointer-events:none}@media(max-width:768px){.key-hint{display:none}.title-screen h1{font-size:1.8rem;white-space:nowrap}.start-btn{font-size:1.5rem;padding:.8rem 2rem}.lanes-container{width:100%;max-width:100%;border:none;transform:none;background:#000c}.combo-display{top:12%}.combo-count{font-size:3rem}.combo-label{font-size:1rem;letter-spacing:.2rem}.judgement-display{font-size:2rem;top:45%}.judgement-line{height:6px;box-shadow:0 0 15px #0ff}.hud{top:60px;left:10px;font-size:.8rem}.score{font-size:1.2rem}.game-header-info{font-size:.9em!important;top:5px!important;right:5px!important}.judge-img{max-height:25vh;opacity:1}.back-btn{padding:5px 10px;font-size:.8rem;top:10px;left:10px}}
