.piano-base{background-color:#444;padding:5px;border-radius:10px}.piano{width:100%;height:200px;position:relative}.white-keys{display:flex;width:100%;height:100%}.white-key{flex:1;background:#fff;border:1px solid #000;box-sizing:border-box;position:relative;z-index:1;border-radius:0 0 6px 6px}.black-keys{position:absolute;top:0;left:0;width:100%;height:60%;pointer-events:none}.black-key{position:absolute;background:#000;width:2%;height:100%;z-index:2;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000004d;transform:translate(-50%)}.active-key{background:#ffe082!important;box-shadow:0 0 10px #ffd54f}@media (max-width: 600px){.piano{height:120px}}.note-name{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:12px;color:#333;font-family:Arial,sans-serif;font-weight:600;z-index:3;white-space:nowrap;background-color:#fffc;padding:2px 4px;border-radius:3px}@media (max-width: 600px){.note-name{font-size:10px;bottom:5px}}.white-key.active-key,.black-key.active-key{background-color:#ffc107;border-color:#e0a800}.white-key.highlight-group-1,.black-key.highlight-group-1{background-color:#a2d9ce!important;border-color:#7fbbaf!important;color:#333!important}.white-key.highlight-group-1 .note-name,.black-key.highlight-group-1 .note-name{color:#fff!important;background-color:#0009!important}.white-key.highlight-group-2,.black-key.highlight-group-2{background-color:#d8bfd8!important;border-color:#b49cc1!important;color:#333!important}.white-key.highlight-group-2 .note-name,.black-key.highlight-group-2 .note-name{color:#fff!important;background-color:#0009!important}.key .note-name{font-family:Arial,sans-serif;font-size:.8em;padding:2px 4px;border-radius:3px;font-weight:700}.note-name{position:absolute;bottom:5px;left:50%;transform:translate(-50%);font-size:10px;padding:2px 4px;border-radius:3px}.white-key .note-name{color:#000;background-color:#ffffffb3}.black-key .note-name{color:#fff;background-color:#000c}.chord-button{width:100%;height:80px;padding:10px;border:2px solid #666;border-radius:8px;cursor:pointer;opacity:1;font-weight:700;font-size:inherit;text-shadow:none;transition:background .3s,color .3s,opacity .3s,box-shadow .3s,text-shadow .3s;margin-bottom:5px;text-align:left;position:relative;overflow:visible;background:#333;color:#333}.chord-button.flipped{color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.chord-button.matched{opacity:.7;cursor:default}.chord-button .flip-inner{display:block;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,2,.6,1);will-change:transform;transform-style:preserve-3d;position:relative}.chord-button.flipped .flip-inner{transform:rotateY(180deg)}.chord-button .flip-front,.chord-button .flip-back{position:absolute;width:100%;height:100%;left:0;top:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:flex-start;font-size:inherit;font-weight:inherit;background:inherit;color:inherit;border-radius:inherit;padding:inherit}.chord-button .flip-front{z-index:2;color:#fff;font-size:2.5em;justify-content:center}.chord-button .flip-back{background:var(--card-background, #f0f0f0);transform:rotateY(180deg);display:flex;flex-direction:column}.chord-button.selected{box-shadow:0 0 50px #ffd54f}.note-name{display:flex;flex-direction:column}.chord-columns{display:flex;gap:20px;padding:20px;justify-content:space-between}.chord-column{flex:1;display:flex;flex-direction:column}.chord-column h2{text-align:center;margin-bottom:15px}.chord-button{width:100%;padding:10px;border:none;border-radius:4px;cursor:pointer;transition:transform .1s;margin-bottom:5px;text-align:left}.chord-button.inverted{transform:scale(.7)}.chord-button:hover{transform:scale(1.05)}.chord-button.selected{background-color:#fff8e1;outline:3px solid #ffab00;box-shadow:0 0 0 4px #ffeb3b80,0 0 18px 8px #ffd54fe6,inset 0 0 8px #ffc10799;color:#000;font-weight:700;transform:scale(1.03);z-index:10;position:relative;transition:all .2s ease-in-out}.chord-name{font-weight:700;font-size:10px;margin-bottom:4px;opacity:.7}.chord-notes{font-size:18px;opacity:.8}.search-container{padding:20px;display:flex;justify-content:center}.chord-search{width:300px;padding:10px 15px;font-size:16px;border:2px solid #ddd;border-radius:8px;outline:none;transition:border-color .2s}.chord-search:focus{border-color:#666}.piano-container{padding:10px;background:var(--piano-background, transparent);transition:background .3s ease}.game-info{padding:20px;text-align:center}.win-message{color:green;font-size:3.125rem;font-weight:700}.new-game-button{margin-bottom:20px}