*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);min-height:100vh;color:#fff}#app{max-width:900px;margin:0 auto;padding:20px}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}header{text-align:center;margin-bottom:40px}header h1{font-size:3rem;background:linear-gradient(135deg,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(255,215,0,.3);margin-bottom:8px;letter-spacing:-.02em}header .subtitle{color:#a0a0b0;font-size:1.15rem}main{position:relative}#menu{text-align:center;margin-bottom:20px}.menu-content{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:35px 40px;display:inline-block;backdrop-filter:blur(10px);max-width:450px;animation:fadeSlideUp .5s ease-out}.menu-section{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.08)}.menu-section:last-child{border-bottom:none;padding-bottom:0}.menu-section:first-child{padding-top:0}.section-label{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;font-size:1.1rem;color:#fff;font-weight:600}.label-icon{font-size:1.3rem;color:gold}#songSelect{width:100%;padding:14px 18px;font-size:1rem;border:2px solid transparent;border-radius:10px;background:#ffffff14;color:#fff;cursor:pointer;transition:all .2s ease}#songSelect:hover{background:#ffffff1f;border-color:#ffd70033}#songSelect:focus{outline:none;border-color:#ffd70066;box-shadow:0 0 15px #ffd70026}#songSelect option{background:#1a1a2e;color:#fff}#songSelect optgroup{background:#1a1a2e;color:#888;font-style:normal;font-weight:600;padding:8px 0}.import-row{margin-top:12px;display:flex;gap:8px;justify-content:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-family:inherit;font-size:.95rem;font-weight:500;line-height:1;border:none;border-radius:8px;cursor:pointer;transition:all .15s ease;text-decoration:none}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:disabled:active{transform:none}.btn-primary{background:#fff;color:#1a1a2e}.btn-primary:hover:not(:disabled){background:#ffffffe6}.btn-secondary{background:#ffffff1a;color:#fff}.btn-secondary:hover:not(:disabled){background:#ffffff26}.btn-ghost{background:transparent;color:#fff9}.btn-ghost:hover:not(:disabled){color:#fff;background:#ffffff0d}.btn-sm{padding:8px 16px;font-size:.85rem}.btn-lg{padding:16px 32px;font-size:1.1rem;font-weight:600}.btn-block{width:100%}.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;font-size:.9rem;font-weight:500;border:none;border-radius:8px;background:#ffffff1a;color:#fff;cursor:pointer;transition:all .15s ease}.secondary-button:hover{background:#ffffff26}.secondary-button:active{transform:scale(.97)}.help-toggle{padding:10px 16px;font-size:.85rem;font-weight:500;color:#fff9;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .15s ease}.help-toggle:hover{color:#fff;background:#ffffff0d}.help-toggle:active{transform:scale(.97)}.help-toggle[aria-expanded=true]{color:#fff;background:#ffffff1a}.format-help{margin-top:12px;padding:15px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:8px;text-align:left}.format-title{font-size:.85rem;font-weight:600;color:gold;margin-bottom:8px}.format-code{font-family:Monaco,Consolas,monospace;font-size:.75rem;line-height:1.4;color:#a0e0a0;background:#0006;padding:10px;border-radius:6px;overflow-x:auto;margin-bottom:10px}.format-note{font-size:.75rem;color:#999;line-height:1.6}.format-note strong{color:#ccc}.import-message{margin-top:12px;padding:10px 15px;border-radius:8px;font-size:.9rem;text-align:left;white-space:pre-wrap;word-break:break-word}.import-message.success{background:#4caf5026;border:1px solid rgba(76,175,80,.3);color:#4caf50}.import-message.error{background:#e74c3c26;border:1px solid rgba(231,76,60,.3);color:#e74c3c}.section-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#888;margin-bottom:18px;text-align:left}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0}.setting-row:first-of-type{padding-top:0}.setting-info{display:flex;flex-direction:column;gap:4px;text-align:left}.setting-label{font-weight:600;color:#fff;font-size:1rem}.setting-description{font-size:.85rem;color:#888}.toggle-group{display:flex;align-items:center;gap:10px}.toggle-option{color:#aaa;font-size:.9rem;font-weight:500;min-width:70px;text-align:right}.toggle-switch{position:relative;display:inline-block;width:54px;height:28px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background:linear-gradient(135deg,#3a3a5a,#2a2a4a);transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:28px;box-shadow:inset 0 2px 4px #0000004d}.toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:3px;bottom:3px;background:linear-gradient(135deg,#fff,#e8e8e8);transition:transform .3s cubic-bezier(.4,0,.2,1);border-radius:50%;box-shadow:0 2px 6px #0000004d}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,#4caf50,#388e3c)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(26px)}.toggle-switch:active .toggle-slider{transform:scale(.96)}#startButton{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 32px;font-family:inherit;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;background:#fff;color:#1a1a2e;cursor:pointer;transition:all .15s ease;margin-bottom:15px}#startButton:hover:not(:disabled){background:#ffffffe6}#startButton:active:not(:disabled){transform:scale(.97)}#startButton:disabled{opacity:.5;cursor:not-allowed}#startButton:disabled:active{transform:none}.button-icon{font-size:.9rem}#status{color:#888;font-size:.9rem;margin:0}#gameContainer{text-align:center;animation:fadeSlideUp .4s ease-out}#gameCanvas{border-radius:15px;box-shadow:0 10px 40px #00000080}#results{text-align:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:40px;max-width:420px;margin:0 auto;animation:fadeSlideUp .5s ease-out}#results h2{font-size:2rem;margin-bottom:30px;color:gold}#resultsContent{margin-bottom:30px}.result-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}.result-item:last-child{border-bottom:none}.result-label{color:#888}.result-value{font-weight:700;color:#fff}.grade-S{color:gold!important;font-size:2rem;text-shadow:0 0 15px rgba(255,215,0,.6)}.grade-A{color:#4caf50!important;font-size:1.5rem}.grade-B{color:#8bc34a!important;font-size:1.5rem}.grade-C{color:#ffc107!important;font-size:1.5rem}.grade-D{color:#ff9800!important;font-size:1.5rem}.grade-F{color:#f44336!important;font-size:1.5rem}.results-banner{padding:12px 20px;border-radius:8px;font-weight:600;font-size:1.1rem;margin-bottom:20px;text-align:center;animation:bannerPulse .5s ease-out}.results-banner.new-record{background:linear-gradient(135deg,#ffd70033,#ffa50033);color:gold;border:1px solid rgba(255,215,0,.3)}.results-banner.near-best{background:#ffffff0d;color:#a0a0b0}@keyframes bannerPulse{0%{transform:scale(.9);opacity:0}50%{transform:scale(1.02)}to{transform:scale(1);opacity:1}}.results-grade{margin-bottom:25px}.grade-display{display:inline-block;font-size:4rem;font-weight:700;animation:gradeReveal .6s cubic-bezier(.34,1.56,.64,1)}.grade-display.grade-S{color:gold;text-shadow:0 0 30px rgba(255,215,0,.6),0 0 60px rgba(255,215,0,.3);animation:gradeReveal .6s cubic-bezier(.34,1.56,.64,1),gradeGlow 2s ease-in-out infinite}.grade-display.grade-A{color:#4caf50;text-shadow:0 0 20px rgba(76,175,80,.4)}.grade-display.grade-B{color:#8bc34a}.grade-display.grade-C{color:#ffc107}.grade-display.grade-D{color:#ff9800}.grade-display.grade-F{color:#f44336}@keyframes gradeReveal{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes gradeGlow{0%,to{text-shadow:0 0 30px rgba(255,215,0,.6),0 0 60px rgba(255,215,0,.3)}50%{text-shadow:0 0 40px rgba(255,215,0,.8),0 0 80px rgba(255,215,0,.5)}}.results-encouragement{margin-top:20px;padding:12px 20px;background:#ffc1071a;border:1px solid rgba(255,193,7,.2);border-radius:8px;color:#ffc107;font-size:.95rem}.result-value.personal-best{color:#888;font-size:.9rem}.results-actions{display:flex;gap:12px;justify-content:center;margin-top:25px}#shareButton{padding:14px 24px;font-family:inherit;font-size:1rem;font-weight:500;border:none;border-radius:8px;background:#ffffff1a;color:#fff;cursor:pointer;transition:all .15s ease}#shareButton:hover{background:#ffffff26}#shareButton:active{transform:scale(.97)}#playAgainButton{padding:16px 32px;font-family:inherit;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;background:#fff;color:#1a1a2e;cursor:pointer;transition:all .15s ease}#playAgainButton:hover{background:#ffffffe6}#playAgainButton:active{transform:scale(.97)}footer{text-align:center;margin-top:35px;color:#666;font-size:.9rem}.support-button{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#ff5e5b,#ff8a5b);border:none;border-radius:50px;text-decoration:none;transition:all .2s ease;margin-bottom:10px;box-shadow:0 4px 15px #ff5e5b4d;animation:subtle-pulse 3s ease-in-out infinite}@keyframes subtle-pulse{0%,to{box-shadow:0 4px 15px #ff5e5b4d}50%{box-shadow:0 4px 25px #ff5e5b80}}.support-button:hover{color:#fff;background:linear-gradient(135deg,#ff7a78,#ffa07a);transform:translateY(-2px);box-shadow:0 6px 20px #ff5e5b66}.support-button:active{transform:translateY(0) scale(.98);box-shadow:0 2px 10px #ff5e5b4d}.hidden{display:none!important}@media (max-width: 850px){#app{padding:15px}header h1{font-size:2.2rem}header{margin-bottom:30px}.menu-content{width:100%;max-width:none;padding:25px 20px;border-radius:15px}.setting-row{flex-direction:column;align-items:flex-start;gap:12px}.toggle-group{width:100%;justify-content:flex-end}#gameCanvas{max-width:100%;height:auto}}@media (max-width: 480px){header h1{font-size:1.9rem}header .subtitle{font-size:1rem}.menu-content{padding:20px 15px}#startButton,#playAgainButton{width:100%;padding:14px 24px;font-size:1rem}#results{padding:30px 20px}}@media (hover: none) and (pointer: coarse){.toggle-switch{width:60px;height:32px}.toggle-slider:before{height:26px;width:26px}.toggle-switch input:checked+.toggle-slider:before{transform:translate(28px)}#songSelect{padding:16px 18px;font-size:1.05rem}#startButton,#playAgainButton,.secondary-button{padding:14px 28px}}