/*
 * Klavier Explorer – Stile für die Klaviatur und die Grundton-/Akkord-Buttons.
 * Baut auf base.css auf (Navigation, Layout, Farbvariablen). Farben für
 * Grundton (rot) und Akkordton (blau) kommen wie überall aus den CSS-Variablen
 * --color-root / --color-interval.
 */

/* ── Legenden-Farbkästchen (wie in fretboard.css) ─────── */
.root-box {
    background: var(--color-root);
}

.third-box {
    background: var(--color-third);
}

.interval-box {
    background: var(--color-interval);
}

.scale-box {
    background: var(--color-scale);
}

/* ── Auswahl-Buttons (Grundton & Akkord) ──────────────── */
.pill-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 760px;
    margin: 0 auto 8px;
}

.pill-group button {
    min-width: 42px;
    padding: 9px 14px;
    font-size: 15px;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: background .12s, color .12s, box-shadow .12s, transform .05s;
}

.pill-group button:hover {
    background: #eee;
}

/* Aktiver Grundton: rot (wie der Grundton auf dem Griffbrett). */
#rootButtons button.active {
    background: var(--color-root);
    border-color: var(--color-root);
    color: #fff;
    box-shadow: 0 4px 12px rgba(229, 57, 53, .35);
}

/* Aktiver Akkord: blau (wie der Intervallton). */
#chordButtons button.active {
    background: var(--color-interval);
    border-color: var(--color-interval);
    color: #fff;
    box-shadow: 0 4px 12px rgba(25, 118, 210, .35);
}

.control-block {
    margin-bottom: 18px;
}

.control-block .control-label {
    text-align: center;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
}

.control-block #rootNote {
    min-width: 120px;
    font-size: 16px;
    padding: 9px 14px;
    text-align: center;
}

/* Grundton-Dropdown und Dur/Moll-Schalter nebeneinander. */
.root-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* Segmentierter Dur/Moll-Schalter. */
.mode-toggle {
    display: inline-flex;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
}

.mode-toggle button {
    min-width: 62px;
    padding: 9px 16px;
    font-size: 15px;
    font-weight: bold;
    border: none;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.mode-toggle button + button {
    border-left: 1px solid #ccc;
}

.mode-toggle button:hover {
    background: #eee;
}

/* Aktive Schalterstellung: rot wie der Grundton. */
.mode-toggle button.active {
    background: var(--color-root);
    color: #fff;
}

.mode-toggle button.active:hover {
    background: var(--color-root);
}

/* ── Info-Zeile über der Klaviatur ────────────────────── */
.chord-info {
    text-align: center;
    font-size: 16px;
    color: #333;
    margin: 4px auto 20px;
}

.chord-info .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-root);
    margin-right: 8px;
    vertical-align: middle;
}

.chord-info strong {
    color: var(--color-root);
}

.chord-info .chord-notes {
    color: #777;
}

/* ── Klaviatur ────────────────────────────────────────── */
.piano-scroll {
    overflow-x: auto;
    padding: 4px 0 12px;
}

.piano-frame {
    width: max-content;
    margin: 0 auto;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #3a3630 0%, #2a2723 100%);
    box-shadow: 0 20px 45px -25px rgba(0, 0, 0, .6),
                inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Filzstreifen über den Tasten. */
.piano-felt {
    height: 8px;
    border-radius: 4px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, #7a1e1e, #a83232, #7a1e1e);
    opacity: .9;
}

#keyboard {
    position: relative;
    height: 250px;
}

/* ── Mobil (Hochformat): Klaviatur quer/seitlich darstellen ─────────
   Analog zum Griffbrett (css/fretboard.css) ist die Klaviatur sehr breit
   (14 weiße Tasten × 58px = 812px, mit Rahmen-Padding 848px) und würde auf
   schmalen Hochformat-Bildschirmen sonst winzig skaliert bzw. horizontal
   weggescrollt. Deshalb drehen wir den ganzen Klavier-Rahmen um 90°: die
   Tasten laufen dann von oben nach unten (tiefe Töne oben), man scrollt
   vertikal durch die Tastatur, und die Tasten bleiben groß und gut tippbar.

   Der Container reserviert genau die Höhe, die die gedrehte lange Seite des
   Rahmens (848px) einnimmt; der Rahmen wird darin zentriert und gedreht. */
@media (max-width: 768px) and (orientation: portrait) {
    .piano-scroll {
        position: relative;
        overflow: hidden;
        height: 848px;   /* lange Rahmenseite: 14×58 (Tasten) + 2×18 (Padding) */
    }

    .piano-frame {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center center;
    }
}

.key {
    position: absolute;
    top: 0;
    padding: 0;
    cursor: pointer;
    transition: transform .05s, background .12s, box-shadow .12s;
}

.key.white {
    width: 56px;   /* WHITE_W (58) minus 2px Fuge */
    height: 250px; /* WHITE_H */
    border: 1px solid #c9c2b2;
    border-radius: 0 0 7px 7px;
    background: linear-gradient(180deg, #fbf9f4 0%, #efe9dd 100%);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .25);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1;
}

.key.black {
    width: 36px;   /* BLACK_W */
    height: 155px; /* BLACK_H */
    border: 1px solid #0c0b0f;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(180deg, #3a3742 0%, #1b1920 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, .5);
    z-index: 2;
}

.key-label {
    font-family: "Fragment Mono", monospace;
    font-size: 12px;
    padding-bottom: 12px;
    color: #8a8478;
    pointer-events: none;
}

/* ── Quintenzirkel-Section (analog fretboard.css) ─────── */
.quintenzirkel-section {
    margin-top: 8px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quintenzirkel-section h2 {
    margin: 0 0 16px;
}

.quintenzirkel-section canvas {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    max-width: 100%;
    height: auto;
}

.quintenzirkel-section #info {
    margin-top: 16px;
    font-size: 18px;
    min-height: 30px;
    color: #444;
}

/* Gedrückte Taste (kurzes Aufblitzen). */
.key.pressed {
    transform: translateY(2px);
}

.key.white.pressed {
    background: linear-gradient(180deg, #e7e0d1 0%, #dcd3c0 100%);
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .12);
}

.key.black.pressed {
    box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .4);
}

/* Markierte Töne des gewählten Akkords. */
.key.hl-root {
    background: var(--color-root) !important;
    border-color: transparent !important;
}

.key.hl-third {
    background: var(--color-third) !important;
    border-color: transparent !important;
}

.key.hl-tone {
    background: var(--color-interval) !important;
    border-color: transparent !important;
}

.key.white.hl-root .key-label,
.key.white.hl-third .key-label,
.key.white.hl-tone .key-label {
    color: #fff;
    font-weight: bold;
}

/* Töne der gewählten Tonleiter: grüner Punkt auf der Taste. Als Marker (kein
 * volles Füllen), damit er sichtbar bleibt, wenn die Taste zugleich ein
 * Akkordton ist. */
.key.hl-scale::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-scale);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .75);
    pointer-events: none;
}

.key.white.hl-scale::after {
    bottom: 32px;
}

.key.black.hl-scale::after {
    bottom: 12px;
}