:root{--color-bg: #1a1a2e;--color-bg-secondary: #16213e;--color-bg-dark: #0f3460;--color-primary: #ff6b35;--color-primary-dark: #e55a2b;--color-secondary: #00ff88;--color-accent: #ff6b6b;--color-coin: #ffcc00;--color-text: #888888;--color-white: #ffffff}*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(180deg,#1a1a2e,#16213e,#0f3460);min-height:100vh;display:flex;justify-content:center;align-items:center;font-family:Courier New,monospace;color:var(--color-primary);overflow:hidden}#game-container{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px}#game-canvas{width:640px;height:480px;border:3px solid var(--color-primary);background-color:#0a0a0a;box-shadow:0 0 20px #ff6b354d;image-rendering:pixelated;image-rendering:crisp-edges}#ui{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:640px}#scores{display:flex;justify-content:space-between;width:100%;font-size:12px}#score,#high-score,#lives{background-color:#0000004d;padding:8px 12px;border:2px solid var(--color-primary);border-radius:5px}#score span,#high-score span{color:var(--color-secondary);text-shadow:0 0 5px var(--color-secondary)}#high-score{color:var(--color-coin)}#high-score span{color:var(--color-coin);text-shadow:0 0 5px var(--color-coin)}#lives span{color:var(--color-accent);text-shadow:0 0 5px var(--color-accent);letter-spacing:2px}#controls{display:flex;justify-content:space-between;align-items:center;width:100%;flex-wrap:wrap;gap:12px}#level-section{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#level-label{font-size:10px;color:var(--color-text);text-transform:uppercase}#level-selector{display:flex;gap:4px}.level-btn{width:32px;height:32px;font-family:Courier New,monospace;font-size:12px;background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-white);border:2px solid var(--color-primary);border-radius:5px;cursor:pointer;transition:all .1s;box-shadow:0 3px 0 var(--color-primary-dark)}.level-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--color-primary-dark),0 0 10px #ff6b3580}.level-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--color-primary-dark)}.level-btn.active{background:var(--color-secondary);border-color:var(--color-secondary);color:#1a1a2e;box-shadow:0 3px #00cc6a,0 0 15px #00ff8880}.level-btn:disabled{opacity:.5;cursor:not-allowed}#level-name{font-size:10px;color:var(--color-secondary);min-width:80px;text-shadow:0 0 5px var(--color-secondary)}#buttons{display:flex;gap:8px}#start-btn,#mute-btn{font-family:Courier New,monospace;font-size:12px;padding:10px 16px;background:linear-gradient(180deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-white);border:2px solid var(--color-primary);border-radius:5px;cursor:pointer;transition:all .1s;box-shadow:0 4px 0 var(--color-primary-dark);text-transform:uppercase;letter-spacing:1px}#start-btn:hover,#mute-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--color-primary-dark),0 0 15px #ff6b3580}#start-btn:active,#mute-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--color-primary-dark)}#mute-btn{background:linear-gradient(180deg,#444,#333);border-color:#555;box-shadow:0 4px #222}#mute-btn:hover{box-shadow:0 6px #222,0 0 10px #fff3}#mute-btn.muted{background:linear-gradient(180deg,var(--color-accent) 0%,#cc5555 100%);color:var(--color-white);border-color:var(--color-accent);box-shadow:0 4px #c55,0 0 10px #ff6b6b80}#piano{display:flex;gap:4px;margin-top:8px}.key{width:80px;height:60px;background:#0000004d;border:2px solid var(--color-primary);border-radius:5px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:14px;color:var(--color-primary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .05s}.key span{font-size:10px;margin-top:4px;color:var(--color-text)}.key:hover{background:#ff6b3533;box-shadow:0 0 10px #ff6b354d}.key.active,.key:active{background:var(--color-primary);color:var(--color-white);transform:translateY(2px);box-shadow:0 0 15px #ff6b3580}.key.active span,.key:active span{color:var(--color-white)}.key.hit{background:var(--color-secondary)!important;border-color:var(--color-secondary)!important;color:#1a1a2e!important;box-shadow:0 0 20px #00ff8880!important}.key.hit span{color:#1a1a2e!important}#instructions{font-size:10px;color:var(--color-text);text-align:center;margin-top:8px;text-transform:uppercase;letter-spacing:2px}#instructions p{margin:4px 0}@media (max-width: 700px){#game-canvas{width:100%;max-width:480px;height:auto;aspect-ratio:4 / 3}.key{width:60px;height:50px;font-size:12px}.key span{font-size:8px}#scores{font-size:10px}#start-btn,#mute-btn{font-size:10px;padding:8px 12px}}@media (max-width: 500px){#game-container{padding:8px;gap:8px}#game-canvas{max-width:100%;width:100%}#piano{width:100%;justify-content:center}.key{width:48px;height:56px;font-size:16px;font-weight:700}#level-section,#buttons{width:100%;justify-content:center}#instructions{display:none}}@media (max-width: 380px){.key{width:42px;height:50px;font-size:14px}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:1000}.modal.hidden{display:none}.modal-content{background:linear-gradient(180deg,var(--color-bg) 0%,var(--color-bg-secondary) 100%);border:3px solid var(--color-primary);border-radius:10px;padding:24px 32px;max-width:500px;width:90%;text-align:center;box-shadow:0 0 30px #ff6b3580}.modal-content h2{color:var(--color-primary);font-family:"Press Start 2P",monospace;font-size:18px;margin-bottom:20px;text-shadow:0 0 10px var(--color-primary)}.help-section{margin:16px 0;color:var(--color-white);font-size:12px;line-height:1.8}.help-section p{margin:8px 0}.help-keys{display:flex;justify-content:center;gap:8px;margin:20px 0}.help-key{width:40px;height:40px;background:var(--color-primary);color:var(--color-white);font-family:"Press Start 2P",monospace;font-size:14px;display:flex;justify-content:center;align-items:center;border-radius:5px;box-shadow:0 3px 0 var(--color-primary-dark)}.help-tips{margin:20px 0;padding:12px;background:#ffcc001a;border:2px solid var(--color-coin);border-radius:5px;color:var(--color-coin);font-size:11px}.help-tips p{margin:6px 0}#help-ok-btn,#leaderboard-close-btn{font-family:"Press Start 2P",monospace;font-size:12px;padding:12px 24px;margin-top:16px;background:linear-gradient(180deg,var(--color-secondary) 0%,#00cc6a 100%);color:var(--color-bg);border:2px solid var(--color-secondary);border-radius:5px;cursor:pointer;box-shadow:0 4px #00cc6a;transition:all .1s}#help-ok-btn:hover,#leaderboard-close-btn:hover{transform:translateY(-2px);box-shadow:0 6px #00cc6a,0 0 15px #00ff8880}#help-ok-btn:active,#leaderboard-close-btn:active{transform:translateY(2px);box-shadow:0 2px #00cc6a}.help-checkbox{display:block;margin-top:16px;color:var(--color-text);font-size:10px;cursor:pointer}.help-checkbox input{margin-right:8px;cursor:pointer}#leaderboard-list{margin:16px 0}.leaderboard-entry{display:flex;justify-content:space-between;padding:8px 12px;margin:4px 0;background:#0000004d;border:1px solid var(--color-bg-dark);border-radius:3px;font-size:11px}.leaderboard-entry .rank{color:var(--color-primary);width:30px;text-align:left}.leaderboard-entry .name{color:var(--color-white);flex:1;text-align:left}.leaderboard-entry .lb-score{color:var(--color-secondary);width:80px;text-align:right}.leaderboard-entry:first-child{border-color:var(--color-coin);background:#ffcc001a}.leaderboard-entry:first-child .rank{color:var(--color-coin)}.leaderboard-status{color:var(--color-text);font-size:10px;margin:12px 0;font-style:italic}#help-btn{font-family:"Press Start 2P",monospace;font-size:12px;width:40px;height:40px;padding:0;background:linear-gradient(180deg,var(--color-coin) 0%,#cc9900 100%);color:var(--color-bg);border:2px solid var(--color-coin);border-radius:50%;cursor:pointer;box-shadow:0 3px #c90;transition:all .1s}#help-btn:hover{transform:translateY(-2px);box-shadow:0 5px #c90,0 0 10px #ffcc0080}#leaderboard-btn{font-family:Courier New,monospace;font-size:10px;padding:10px 12px;background:linear-gradient(180deg,#444,#333);color:var(--color-white);border:2px solid #555;border-radius:5px;cursor:pointer;box-shadow:0 4px #222;transition:all .1s}#leaderboard-btn:hover{box-shadow:0 6px #222,0 0 10px #fff3}@keyframes bonusPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@keyframes textGlow{0%,to{text-shadow:0 0 10px var(--color-primary),0 0 20px var(--color-primary)}50%{text-shadow:0 0 15px var(--color-primary),0 0 30px var(--color-primary)}}.title-glow{animation:textGlow 1.5s ease-in-out infinite}.bonus-pulse{animation:bonusPulse .5s ease-in-out infinite}