.theme-music { background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%); }
.theme-music .game-header h1 { color: #c2185b; }
.note-display { text-align: center; font-size: 3rem; font-weight: 800; font-family: 'Baloo 2', cursive; color: #c2185b; margin: 15px auto; animation: noteBounce 0.4s ease; }
@keyframes noteBounce { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.piano-keys { display: flex; justify-content: center; gap: 4px; margin: 20px auto; max-width: 400px; padding: 0 10px; }
.piano-key {
    flex: 1; min-width: 40px; height: 120px; border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, #fff 80%, #e0e0e0); border: 2px solid #bdbdbd;
    cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding-bottom: 10px; font-size: 1.1rem; font-weight: 800; font-family: 'Baloo 2', cursive;
    color: #555; transition: all 0.1s; box-shadow: 0 4px 0 #9e9e9e;
}
.piano-key:active, .piano-key.pressed { transform: translateY(4px); box-shadow: 0 0 0; background: linear-gradient(180deg, #f5f5f5 80%, #bdbdbd); }
.piano-key.correct { background: linear-gradient(180deg, #e8f5e9 80%, #a5d6a7); border-color: #4caf50; }
.piano-key.wrong { background: linear-gradient(180deg, #ffebee 80%, #ef9a9a); border-color: #f44336; }

.piano-key:nth-child(1) { background: linear-gradient(180deg, #ffcdd2 80%, #ef9a9a); }
.piano-key:nth-child(2) { background: linear-gradient(180deg, #ffe0b2 80%, #ffcc80); }
.piano-key:nth-child(3) { background: linear-gradient(180deg, #fff9c4 80%, #fff176); }
.piano-key:nth-child(4) { background: linear-gradient(180deg, #c8e6c9 80%, #a5d6a7); }
.piano-key:nth-child(5) { background: linear-gradient(180deg, #bbdefb 80%, #90caf9); }
.piano-key:nth-child(6) { background: linear-gradient(180deg, #d1c4e9 80%, #b39ddb); }
.piano-key:nth-child(7) { background: linear-gradient(180deg, #f8bbd0 80%, #f48fb1); }

@media (max-width: 400px) { .piano-key { height: 100px; min-width: 35px; font-size: 0.95rem; } }