.ddr-game-container{width:100%;display:flex;justify-content:center;overflow:hidden;margin:0 auto;padding:20px 0}.game-area{width:100%;max-width:600px;height:400px;background-color:#f0f0f0;border-radius:10px;box-shadow:0 5px 15px #0000001a;position:relative;overflow:hidden;user-select:none;padding:15px;font-family:Arial,sans-serif;box-sizing:border-box}.game-start{text-align:center;position:absolute;top:100px;left:0;right:0;z-index:20}.game-start h3{margin:0 0 10px;font-size:24px}.game-start p{margin:0 0 15px;font-size:14px}#start-button{background-color:#4caf50;border:none;color:#fff;padding:8px 18px;border-radius:5px;cursor:pointer;font-size:15px;font-weight:700;position:relative;z-index:30}.score-panel{position:absolute;top:40px;left:8px;z-index:10;background-color:#0000001a;padding:5px 8px;border-radius:5px;font-size:13px;font-weight:700}.score-panel div{margin-bottom:2px}.score-panel span{color:#333}.stop-panel{position:absolute;top:40px;right:8px;z-index:10}#stop-button{background-color:#f55;border:none;color:#fff;padding:4px 8px;border-radius:5px;cursor:pointer;font-size:13px}.target-line{position:absolute;left:15px;right:15px;top:20%;height:4px;background-color:#3333334d;z-index:0;border-radius:2px}.reference-arrows{position:absolute;left:0;right:0;top:20%;transform:translateY(-50%);display:flex;justify-content:space-around;padding:0 10%;width:80%;margin:0 auto;z-index:2}.arrow-ref{width:36px;height:36px;display:flex;justify-content:center;align-items:center;border-radius:50%;opacity:.8;font-size:18px;background-color:#ffffff80;box-shadow:0 0 5px #0003}.arrow-ref.left,.note.left{border:2px solid #ff5555}.arrow-ref.up,.note.up{border:2px solid #55ff55}.arrow-ref.down,.note.down{border:2px solid #5555ff}.arrow-ref.right,.note.right{border:2px solid #ffff55}.notes-container{position:absolute;width:100%;height:100%;left:0;top:0;pointer-events:none;z-index:10}.note{pointer-events:auto}.countdown{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:60px;font-weight:700;color:#333;text-align:center;background-color:#ffffffb3;border-radius:50%;width:100px;height:100px;display:flex;align-items:center;justify-content:center}.note{position:absolute;width:36px;height:36px;border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:700;font-size:18px;transition:opacity .2s;box-shadow:0 2px 4px #0003;z-index:15}.note.left{background-color:#f55}.note.up{background-color:#5f5}.note.down{background-color:#55f}.note.right{background-color:#ff5}.note.scored{opacity:.2}.hit-rating{position:absolute;font-size:24px;font-weight:700;color:#fff;text-shadow:0 0 5px rgba(0,0,0,.7);transform:translate(-50%,-50%);animation:fadeOut 1s forwards;z-index:20}.hit-rating.perfect{color:#fc0;text-shadow:0 0 10px rgba(255,200,0,.7)}.hit-rating.good{color:#0c0}.hit-rating.ok{color:#09f}@keyframes fadeOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}.note.long{border:3px solid white;position:relative;z-index:15}.note.long:after{content:"";position:absolute;width:100%;left:0;background-color:inherit;opacity:.7;border-radius:0 0 18px 18px;z-index:-1;box-shadow:0 0 10px #ffffff80;transition:box-shadow .3s ease}.note.long:before{content:"";position:absolute;width:100%;left:0;background:repeating-linear-gradient(to bottom,transparent,transparent 5px,rgba(255,255,255,.7) 5px,rgba(255,255,255,.7) 7px);z-index:-1;opacity:.9;border-radius:0 0 18px 18px}.note.long.active{animation:pulse .5s infinite alternate}.note.long.active:after{opacity:.9;box-shadow:0 0 15px currentColor;background:linear-gradient(to bottom,currentColor 80%,rgba(255,255,255,.8))}.note.long.completed{opacity:.2;transition:opacity .5s}.note.long.completed:after{opacity:.2;box-shadow:0 0 20px #0f0c;transition:all .5s}.note.long.failed:after{background-color:#f009;box-shadow:0 0 10px #ff0000b3}@keyframes pulse{0%{box-shadow:0 0 8px #fffc;transform:translate(-50%,-50%) scale(1)}to{box-shadow:0 0 20px #fff;transform:translate(-50%,-50%) scale(1.05)}}