/*
 * 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;
}

.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;
}