:root{--bg-color: #1a1a2e;--bg-image: none;--bg-overlay-opacity: 0}body{margin:0;padding:0;font-family:Courier New,monospace;background-color:var(--bg-color);background-image:var(--bg-image);background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;color:#fff;overflow:hidden}#app:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,var(--bg-overlay-opacity));pointer-events:none;z-index:0}#app>*{position:relative;z-index:1}#game-canvas{display:block;position:absolute;top:0;left:0;width:100vw;height:100vh}.main-menu,.calibration,.results{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.song-select{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:2rem;min-height:100vh;padding:2rem;max-width:1400px;margin:0 auto;width:100%;align-self:stretch}.song-list{grid-column:1;grid-row:1 / 3;min-height:0;overflow:hidden}.difficulty-select{grid-column:2;grid-row:1 / 3}.controls{grid-column:1 / 3;grid-row:3}h1{font-size:3rem;margin:0 0 1rem;text-align:center}h2{font-size:2rem;margin:1rem 0;text-align:center}.logo{display:none;padding:1.5rem 3rem;margin-bottom:1rem}body.bg-solid .logo{display:block}.title{font-size:4rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(45deg,#0ff,#f0f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:1.2rem;margin-bottom:3rem;color:#888}.menu-items,.song-list,.difficulty-list{display:flex;flex-direction:column;gap:1rem;margin:2rem 0}.menu-item,.song-item,.difficulty-item{font-size:1.5rem;padding:.5rem 1rem;cursor:pointer;transition:all .2s;border-left:3px solid transparent}.menu-item:hover,.song-item:hover,.difficulty-item:hover{background:#ffffff14}.menu-item.selected,.song-item.selected,.difficulty-item.selected{color:#0ff;background:#00ffff1a;border-left:3px solid #00ffff;transform:translate(10px)}.song-item.selected:hover,.difficulty-item.selected:hover{background:#00ffff26}.song-artist{font-size:1rem;color:#888;margin-left:1.5rem}.controls{margin-top:3rem;text-align:center;color:#888;font-size:.9rem}.beat-indicator{font-size:3rem;margin:2rem 0;color:#0ff;animation:pulse .5s ease-in-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.offset-info{margin:2rem 0;text-align:center}.offset-info p{margin:.5rem 0;font-size:1.2rem}.offset-bars{display:flex;justify-content:center;align-items:flex-end;gap:8px;margin-top:1rem;height:150px;padding:1rem;background:#ffffff0d;border-radius:8px}.offset-bar-wrapper{display:flex;flex-direction:column;align-items:center;gap:4px}.offset-value{font-size:.75rem;color:#fff;font-weight:700;min-height:1.2em;white-space:nowrap}.offset-bar{width:20px;min-height:2px;border-radius:2px;transition:all .2s ease}.hint{margin-top:2rem;color:#888}.song-info{text-align:center;margin-bottom:2rem}.song-title{font-size:2rem;font-weight:700}.difficulty{font-size:1.2rem;color:#888;margin-top:.5rem}.grade{font-size:6rem;font-weight:700;margin:1rem 0;text-shadow:0 0 20px currentColor}.accuracy{font-size:3rem;margin:1rem 0}.max-combo{font-size:1.5rem;margin:1rem 0;color:#ff0}.judgment-breakdown{margin:2rem 0;width:100%;max-width:500px}.judgment-list{display:flex;flex-direction:column;gap:.5rem}.judgment-row{display:flex;justify-content:space-between;padding:.5rem 1rem;background-color:#ffffff0d;border-radius:4px}.judgment-row.marvelous{border-left:4px solid #00ffff}.judgment-row.perfect{border-left:4px solid #ffff00}.judgment-row.great{border-left:4px solid #00ff00}.judgment-row.good{border-left:4px solid #0088ff}.judgment-row.boo{border-left:4px solid #888888}.judgment-row.miss{border-left:4px solid #ff0000}.judgment-label{font-weight:700}.judgment-count{font-size:1.2rem}.song-item{display:flex;gap:1rem;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.song-info{flex:1;min-width:0}.song-info h3{margin:0 0 .25rem;font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-info p{margin:.25rem 0;font-size:.9rem;color:#888}.song-info .artist{color:#aaa}.bpm{color:#0ff!important;font-weight:700}.banner{width:80px;height:80px;object-fit:cover;border-radius:4px;flex-shrink:0;border:2px solid rgba(255,255,255,.1)}.banner-placeholder{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00ffff1a,#ff00ff1a);border:2px solid rgba(0,255,255,.3);border-radius:4px;font-size:2.5rem;color:#00ffff80;flex-shrink:0}.difficulty-item{display:flex;justify-content:space-between;align-items:center;background:#ffffff0d;border-radius:4px;margin-bottom:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.diff-name{font-weight:700;flex:1}.diff-level{color:#ff0;margin:0 1rem}.diff-notes{color:#888;font-size:.9rem}.difficulty-details{margin-top:2rem;padding:1rem;background:#00ffff1a;border:1px solid #00ffff;border-radius:4px}.difficulty-details h3{margin:0 0 .5rem;color:#0ff}.songs,.difficulties{flex:1;min-height:0;max-height:80vh;overflow-y:auto;padding-right:1rem;scroll-behavior:smooth}.songs::-webkit-scrollbar,.difficulties::-webkit-scrollbar{width:8px}.songs::-webkit-scrollbar-track,.difficulties::-webkit-scrollbar-track{background:#ffffff0d}.songs::-webkit-scrollbar-thumb,.difficulties::-webkit-scrollbar-thumb{background:#0ff;border-radius:4px}.settings-screen{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;max-height:100vh;padding:2rem;max-width:800px;margin:0 auto;overflow-y:auto;box-sizing:border-box}.settings-screen .header{text-align:center;margin-bottom:3rem}.settings-list{width:100%;display:flex;flex-direction:column;gap:1.5rem;margin:2rem 0}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#ffffff0d;border-radius:8px;border:1px solid rgba(255,255,255,.1);transition:all .3s;scroll-margin-top:20px;scroll-margin-bottom:20px}.setting-item:hover{background:#ffffff14;border-color:#00ffff4d}.setting-label{flex:1}.setting-label h3{margin:0 0 .5rem;font-size:1.3rem;color:#fff}.setting-label p{margin:0;font-size:.9rem;color:#888}.setting-info{color:#888;font-size:.9rem}.toggle-button{padding:.75rem 2rem;font-size:1.1rem;font-weight:700;font-family:Courier New,monospace;border:2px solid;border-radius:6px;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:1px}.toggle-button.toggle-on{background:#0f03;color:#0f0;border-color:#0f0}.toggle-button.toggle-on:hover{background:#00ff004d;box-shadow:0 0 15px #00ff0080}.toggle-button.toggle-off{background:#8888881a;color:#888;border-color:#888}.toggle-button.toggle-off:hover{background:#8883}.settings-screen .footer{margin-top:3rem}.settings-screen .footer-info{margin-top:1rem;text-align:center;color:#888;font-size:.9rem}.menu-button{padding:1rem 3rem;font-size:1.2rem;font-family:Courier New,monospace;background:#00ffff1a;color:#0ff;border:2px solid #00ffff;border-radius:6px;cursor:pointer;transition:transform .15s ease,filter .15s ease,background .3s,box-shadow .3s;text-transform:uppercase;letter-spacing:1px}.menu-button:hover{background:#0ff3;box-shadow:0 0 15px #00ffff80;transform:scale(1.02);filter:brightness(1.1)}.menu-button:active{transform:scale(.98);filter:brightness(.9)}.menu-button:focus-visible{outline:2px solid #00ffff;outline-offset:2px}.menu-button.selected{background:#00ffff40;box-shadow:0 0 20px #0ff9;border-left:4px solid #00ffff}.setting-select{padding:.75rem 1.5rem;font-size:1.1rem;font-family:Courier New,monospace;background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:6px;cursor:pointer;transition:all .3s;-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:150px}.setting-select:hover{border-color:#00ffff80}.setting-select:focus{outline:none;border-color:#0ff;box-shadow:0 0 10px #00ffff4d}.setting-select option{background:#1a1a2e;color:#fff}.version{color:#666;font-size:.9rem;margin-bottom:2rem}.player-info{margin-top:2rem;text-align:center}.player-info button{padding:.5rem 1.5rem;margin-top:.5rem;font-size:.9rem;font-family:Courier New,monospace;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:4px;cursor:pointer;transition:all .3s}.player-info button:hover{background:#fff3}.text-button{background:transparent;border:none;color:#0ff;cursor:pointer;text-decoration:underline;font-family:Courier New,monospace}.text-button:hover{color:#f0f}.speed-mod-selector{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.speed-mod-selector h3{font-size:2rem;margin-bottom:2rem;text-align:center}.speed-mod-list{display:flex;flex-direction:column;gap:.5rem;max-width:600px;width:100%;margin-bottom:2rem;max-height:60vh;overflow-y:auto}.speed-mod-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:4px;cursor:pointer;transition:all .2s}.speed-mod-item:hover{background:#ffffff1a;border-color:#ffffff4d}.speed-mod-item.active{background:#0ff3;border-color:#0ff}.speed-mod-item.selected{border-left:4px solid #00ff00}.speed-mod-label{font-size:1.2rem;font-weight:700}.speed-mod-description{font-size:.9rem;color:#888}.speed-mod-selector .hint{color:#666;font-size:.9rem;text-align:center}.multiplayer-indicator{position:absolute;top:20px;right:20px;background:#0f03;border:2px solid #0f0;padding:8px 16px;border-radius:4px;color:#0f0;font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:1px}.screen-with-background{position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#1a1a2e}.screen-with-background:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;z-index:0;pointer-events:none}.screen-with-background>*{position:relative;z-index:1}.main-menu.screen-with-background{background-image:url(/assets/backgrounds/main-menu.svg)}.song-select.screen-with-background{background-image:url(/assets/backgrounds/song-select.svg)}.results.screen-with-background{background-image:url(/assets/backgrounds/results.svg)}.screen-loading{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a2ef2;z-index:1000;gap:1rem;color:#0ff;font-size:1.2rem}.loading-spinner{width:40px;height:40px;border:3px solid rgba(0,255,255,.2);border-top-color:#0ff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.leaderboard-section{margin:2rem 0;width:100%;max-width:500px}.leaderboard-section h3{margin:0 0 1rem;text-align:center;color:#0ff}.leaderboard-list{display:flex;flex-direction:column;gap:.5rem}.leaderboard-list .status{text-align:center;color:#888;margin:0}.leaderboard-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#ffffff0d;border-radius:4px;border-left:3px solid #00ffff;font-size:1rem}.leaderboard-row .rank{font-weight:700;color:#0ff;width:40px}.leaderboard-row .name{flex:1;margin:0 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-row .accuracy{color:#ff0;width:80px;text-align:right;font-size:1rem;margin-right:.5rem}.leaderboard-row .grade{font-size:1rem!important;font-weight:700;width:50px;text-align:right;text-shadow:none!important;margin:0!important}.recent-scores-screen{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;padding:2rem}.recent-scores-screen h1{color:#f0f;margin-bottom:1.5rem;font-size:2rem}.scores-list{width:100%;max-width:500px;display:flex;flex-direction:column;gap:.5rem;margin-bottom:2rem;max-height:70vh;overflow-y:auto}.scores-list .empty-state,.scores-list .error-state{text-align:center;color:#888;padding:2rem;font-size:1rem}.scores-list .error-state{color:#f66}.score-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#ffffff0d;border-radius:4px;border-left:3px solid #ff00ff;font-size:1rem}.score-row .score-info{flex:1;display:flex;flex-direction:column;gap:.2rem;overflow:hidden;margin-right:1rem}.score-row .player-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}.score-row .song-info{font-size:.8rem;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-row .accuracy{color:#ff0;width:70px;text-align:right;font-size:1rem;margin-right:.5rem}.score-row .grade{font-size:1rem!important;font-weight:700;width:40px;text-align:right;text-shadow:none!important;margin:0!important}.recent-scores-screen .controls{text-align:center}.recent-scores-screen .controls p{margin-top:1rem;color:#888;font-size:.9rem}.multiplayer-results{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.multiplayer-results h1{font-size:2.5rem;color:#0ff;margin-bottom:1rem}.winner-announcement{font-size:2rem;color:#ff0;text-shadow:0 0 20px rgba(255,255,0,.5);margin-bottom:2rem;text-align:center}.players-results{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;max-width:1200px;margin-bottom:2rem}.player-result{background:#ffffff0d;border:2px solid rgba(0,255,255,.3);border-radius:8px;padding:1.5rem;min-width:250px;text-align:center}.player-result:first-child{border-color:#ff0;background:#ffff001a}.player-rank{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.player-name{font-size:1.2rem;color:#888;margin-bottom:1rem}.player-grade{font-size:4rem;font-weight:700;text-shadow:0 0 20px currentColor;margin-bottom:.5rem}.player-accuracy{font-size:2rem;color:#ff0;margin-bottom:.5rem}.player-combo{font-size:1.2rem;color:#0f0;margin-bottom:1rem}.judgment-summary{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;font-size:.9rem}.judgment-marvelous{color:#0ff}.judgment-perfect{color:#ff0}.judgment-great{color:#0f0}.judgment-good{color:#08f}.judgment-boo{color:#888}.judgment-miss{color:red}.song-search-input{position:fixed;top:10px;left:50%;transform:translate(-50%);width:300px;padding:8px 12px;font-size:16px;font-family:Courier New,monospace;border:2px solid #444;border-radius:4px;background:#222;color:#fff;z-index:100;transition:border-color .2s}.song-search-input:focus{outline:none;border-color:#0ff;box-shadow:0 0 10px #00ffff4d}.song-search-input::placeholder{color:#666}.sort-toggle{display:inline-block;margin-bottom:1rem;padding:.5rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;font-size:.9rem;color:#888;transition:all .2s;-webkit-user-select:none;user-select:none}.sort-toggle:hover{background:#00ffff1a;border-color:#0ff;color:#0ff}.play-count-badge{font-size:.85rem;color:#888;background:#ffffff1a;padding:2px 8px;border-radius:10px;flex-shrink:0;margin-left:auto}.song-item.selected .play-count-badge{background:#0ff3;color:#0ff}.pause-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.pause-menu{background:#1a1a2ef2;border:2px solid #00ffff;border-radius:8px;padding:2rem 3rem;text-align:center}.pause-menu h2{font-size:3rem;color:#0ff;margin:0 0 2rem;text-shadow:0 0 20px rgba(0,255,255,.5)}.pause-options{display:flex;flex-direction:column;gap:.5rem}.pause-option{font-size:1.5rem;padding:.75rem 2rem;cursor:pointer;border-left:3px solid transparent;transition:all .2s}.pause-option:hover{background:#ffffff14}.pause-option.selected{color:#0ff;background:#00ffff1a;border-left-color:#0ff}.calibration-hint{margin:1.5rem 0;padding:1rem 1.5rem;background:#ffc80026;border:1px solid rgba(255,200,0,.5);border-radius:6px;max-width:500px;text-align:center}.calibration-hint p{margin:0;font-size:.95rem;color:#ffc800;line-height:1.4}.diff-beginner{color:#32cd32}.diff-easy{color:#4169e1}.diff-medium{color:gold}.diff-hard{color:#dc143c}.diff-challenge{color:#9932cc}.diff-expert{color:#f0f}.diff-edit{color:#888}.song-item{scroll-margin-top:20px;scroll-margin-bottom:20px}.mapping-separator{border-top:1px solid rgba(255,255,255,.2);margin:.5rem 0}.mapping-none{color:#666;font-style:italic}.learn-hint{font-size:.9rem;color:#888;margin-bottom:1rem}.learn-buttons{display:flex;gap:1rem;justify-content:center}.setting-item.selected{background:#ffffff1a;border-left:3px solid var(--accent-color, #00ffff)}.setting-control.cycler{display:flex;align-items:center;gap:.5rem}.setting-control.cycler .arrow-btn{padding:.5rem 1rem;font-size:1.2rem;font-family:Courier New,monospace;background:#ffffff1a;color:#0ff;border:1px solid rgba(255,255,255,.3);border-radius:4px;cursor:pointer;transition:all .2s}.setting-control.cycler .arrow-btn:hover{background:#0ff3;border-color:#0ff}.setting-control.cycler .value{min-width:100px;text-align:center;font-size:1.1rem;color:#fff}