@import"https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=ZCOOL+KuaiLe&display=swap";:root{--bg: #1A4A78;--surface: #0F3358;--primary: #FFD600;--primary-dark: #E5BC00;--accent: #FF8C00;--text: #FFFFFF;--text-muted: #A8C8E0;--border: #2A5A88;--success: #7FC242;--warning: #FF8C00;--danger: #FFAA33;--radius: 20px;--shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04)}body{margin:0;padding:0;height:100vh;overflow:hidden;background:radial-gradient(circle at 10% 20%,#FF8C0033 0%,transparent 40%),radial-gradient(circle at 90% 80%,#FFD60022 0%,transparent 40%),var(--bg);color:var(--text);font-family:Quicksand,ZCOOL KuaiLe,Nunito,sans-serif;display:flex;justify-content:center;align-items:center}.app-container{width:100%;max-width:800px;height:100vh;max-height:900px;background-color:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:background .5s ease-in-out}.app-header{padding:15px 20px;background:linear-gradient(to right,var(--primary),var(--accent));color:var(--surface);text-align:center;border-bottom:2px solid var(--border);position:relative;font-family:ZCOOL KuaiLe,Quicksand,sans-serif;box-shadow:var(--shadow)}.app-title{margin:0;font-size:1.8em;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.cloud-status{position:absolute;top:5px;right:10px;font-size:.8em;color:var(--text);background:#fff3;padding:3px 8px;border-radius:10px;font-weight:500}.cloud-status.error{color:var(--danger)}.start-screen,.selection-screen,.game-over-screen,.reward-screen,.unlock-notification{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;text-align:center;background:var(--surface);border-radius:var(--radius);margin:20px;box-shadow:var(--shadow);position:absolute;top:0;left:0;width:calc(100% - 40px);height:calc(100% - 40px)}.character-display{width:180px;height:180px;margin-bottom:20px;background:var(--primary);border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 0 20px #ffd60099;overflow:hidden}.character-image{width:120%;height:120%;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(0,0,0,.3))}.start-title,.selection-title,.game-over-title,.reward-title{font-family:ZCOOL KuaiLe,Quicksand,sans-serif;font-size:2.5em;color:var(--primary);margin-bottom:15px;text-shadow:3px 3px 6px rgba(0,0,0,.3)}.high-score-display,.final-score{font-size:1.2em;color:var(--text-muted);margin-bottom:25px}.primary-button,.secondary-button{display:flex;align-items:center;justify-content:center;padding:12px 25px;margin:10px 0;border:none;border-radius:var(--radius);font-size:1.1em;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow)}.primary-button{background:linear-gradient(45deg,var(--primary),var(--accent));color:var(--surface);text-shadow:1px 1px 2px rgba(0,0,0,.2)}.primary-button:hover{box-shadow:0 4px 15px #ffd60066}.secondary-button{background:var(--border);color:var(--text)}.secondary-button:hover{background:var(--text-muted);color:var(--surface)}.selection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin:30px 0;width:100%;max-width:600px}.selection-card{background:var(--surface);border-radius:var(--radius);padding:15px;box-shadow:var(--shadow);cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border:3px solid transparent}.selection-card.selected{border-color:var(--primary);box-shadow:0 0 15px var(--primary)}.selection-card.locked{opacity:.5;cursor:not-allowed}.locked-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--text);font-weight:700;font-size:1.2em;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.card-image{width:100px;height:100px;object-fit:contain;margin-bottom:10px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2))}.scene-preview{width:100px;height:100px;border-radius:10px;margin-bottom:10px;border:2px solid var(--text)}.selection-card h3{margin:5px 0;font-size:1.2em;color:var(--primary)}.selection-card p{font-size:.9em;color:var(--text-muted)}.game-screen{flex-grow:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.game-hud{display:flex;justify-content:space-around;align-items:center;padding:10px 20px;background:var(--surface);border-bottom:2px solid var(--border);box-shadow:var(--shadow);z-index:20}.hud-item{display:flex;align-items:center;gap:5px;font-size:1.1em;font-weight:500;color:var(--text)}.hud-item.lives svg{margin-right:-5px}.note-progress-bar{width:calc(100% - 40px);height:15px;background:var(--border);border-radius:10px;margin:10px 20px;overflow:hidden;position:relative;box-shadow:inset 0 1px 3px #0003}.progress-fill{height:100%;background:linear-gradient(to right,var(--primary),var(--success));border-radius:10px;transition:width .3s ease-out}.progress-text{position:absolute;width:100%;text-align:center;line-height:15px;font-size:.8em;color:var(--surface);font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.note-falling-area{flex-grow:1;position:relative;width:100%;overflow:hidden;height:calc(100% - 250px)}.falling-note{position:absolute;top:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:1.1em;color:var(--surface);text-shadow:1px 1px 2px rgba(0,0,0,.3);z-index:5}.falling-note svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.note-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.8em;color:var(--surface);text-shadow:1px 1px 2px rgba(0,0,0,.2)}.note-hit{animation:hit-feedback .3s ease-out forwards}.note-missed{animation:missed-feedback .5s ease-out forwards}@keyframes hit-feedback{0%{transform:scale(1) translateY(0);opacity:1}50%{transform:scale(1.2) translateY(-10px);opacity:.8}to{transform:scale(.8) translateY(-20px);opacity:0}}@keyframes missed-feedback{0%{transform:translate(-50%) rotate(0);opacity:1}25%{transform:translate(-50%) rotate(-5deg)}75%{transform:translate(-50%) rotate(5deg)}to{transform:translate(-50%) rotate(0);opacity:0}}.piano-keyboard{display:flex;position:relative;height:180px;background:var(--border);border-top:5px solid var(--surface);padding:10px 0;justify-content:center;align-items:flex-end;box-shadow:inset 0 5px 10px #0000004d}.piano-key{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border:none;cursor:pointer;transition:all .1s ease;background:transparent;padding:0}.piano-key.white-key{width:60px;height:120px;margin-right:-1px;z-index:1}.piano-key.black-key{width:40px;height:80px;background-color:var(--surface);border-radius:0 0 8px 8px;margin-left:-20px;margin-right:-20px;z-index:10;box-shadow:0 5px 10px #0000004d}.piano-key.white-key.pressed svg rect{fill:var(--primary)}.piano-key.black-key.pressed svg rect{fill:var(--primary-dark)}.key-label{position:absolute;bottom:10px;font-size:.9em;font-weight:700;color:var(--surface);text-shadow:1px 1px 2px rgba(0,0,0,.2);z-index:11}.piano-key.black-key .key-label{color:var(--text)}.key-input-hint{position:absolute;top:5px;font-size:.7em;color:var(--text-muted);opacity:.7;z-index:11}.piano-key.black-key .key-input-hint{color:var(--text)}.reward-screen{background:linear-gradient(to top left,var(--primary),var(--accent))}.reward-chest{width:150px;height:150px;margin-bottom:30px;display:flex;justify-content:center;align-items:center}.chest-image{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 15px rgba(0,0,0,.4))}.unlock-notification{background:linear-gradient(to right,var(--success),#A8C8E0);color:var(--surface);padding:30px;border-radius:var(--radius);box-shadow:0 10px 30px #0006;z-index:100}.unlock-notification h2{color:var(--surface);font-size:2em;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.unlocked-item-name{font-size:1.5em;font-weight:700;color:var(--primary);margin-bottom:20px;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.loading-spinner{border:4px solid rgba(255,255,255,.3);border-top:4px solid var(--primary);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:20px auto}.loading-spinner.small{width:20px;height:20px;border-width:2px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}