* {
    box-sizing: border-box;
}


:root {
    --bg: #0b0f14;

    --panel: #141a22;
    --panel-soft: #1a222c;

    --border: #2a3542;

    --text: #f3f6f9;
    --muted: #9ba7b5;

    --accent: #6eb6ff;
    --accent-strong: #8ec8ff;

    --paper: #f4f1e8;
}


body {
    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(65, 115, 170, 0.16),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #0a0e13 0%,
            #0f141b 100%
        );

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


button,
input {
    font: inherit;
}


.app-shell {
    width: min(
        1180px,
        calc(100% - 32px)
    );

    margin: 0 auto;

    padding:
        32px
        0
        48px;
}


.panel {
    background:
        rgba(
            20,
            26,
            34,
            0.96
        );

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    padding:
        22px;

    margin-bottom:
        18px;
}


.panel-heading {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        24px;

    margin-bottom:
        20px;
}


.eyebrow {
    margin:
        0
        0
        4px;

    color:
        var(--accent);

    font-size:
        0.8rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


h1,
h2,
p {
    margin-top:
        0;
}


h1 {
    margin-bottom:
        0;

    font-size:
        clamp(
            1.8rem,
            4vw,
            2.8rem
        );
}


h2 {
    margin-bottom:
        18px;

    font-size:
        1.15rem;
}


.timer-box {
    min-width:
        110px;

    padding:
        10px
        14px;

    border-radius:
        12px;

    background:
        var(--panel-soft);

    border:
        1px solid
        var(--border);

    text-align:
        right;
}


.timer-label {
    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--muted);

    font-size:
        0.75rem;
}


#timer_text {
    font-size:
        1.15rem;

    font-weight:
        700;
}



/* =========================
   NOTENFENSTER
   ========================= */

.trainer-window {
    position:
        relative;

    width:
        100%;

    height:
        320px;

    overflow:
        hidden;

    border-radius:
        16px;

    border:
        1px solid
        #cfc8b7;

    background:
        var(--paper);
}


#note-track {
    position:
        absolute;

    top:
        0;

    left:
        0;

    height:
        100%;

    will-change:
        transform;

    transform:
        translateX(0);
}


#output {
    height:
        100%;
}


#output svg {
    display:
        block;
}



/* =========================
   SPIELLINIE
   ========================= */

.play-line {
    position:
        absolute;

    left:
        35%;

    top:
        0;

    bottom:
        0;

    width:
        2px;

    background:
        rgba(
            220,
            50,
            50,
            0.85
        );

    z-index:
        10;

    pointer-events:
        none;
}


.play-line span {
    position:
        absolute;

    top:
        8px;

    left:
        50%;

    transform:
        translateX(-50%);

    padding:
        4px
        7px;

    border-radius:
        6px;

    background:
        rgba(
            220,
            50,
            50,
            0.92
        );

    color:
        white;

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}



/* =========================
   SETTINGS
   ========================= */

.settings-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        14px;
}


.setting-card {
    display:
        block;

    padding:
        15px;

    border-radius:
        14px;

    background:
        var(--panel-soft);

    border:
        1px solid
        var(--border);
}


.setting-label {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        12px;

    color:
        var(--muted);

    font-size:
        0.9rem;
}


.setting-label strong {
    color:
        var(--text);
}


input[type="range"] {
    width:
        100%;

    accent-color:
        var(--accent);
}


.checkbox-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        12px;

    margin-top:
        16px;
}


.checkbox-grid label {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        44px;

    padding:
        10px
        12px;

    border-radius:
        12px;

    border:
        1px solid
        var(--border);

    background:
        var(--panel-soft);

    color:
        var(--muted);
}


.checkbox-grid input {
    width:
        18px;

    height:
        18px;

    accent-color:
        var(--accent);
}



/* =========================
   PLAYER CONTROLS
   ========================= */

.player-controls {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        18px;

    margin-top:
        22px;
}


.player-btn {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border:
        1px solid
        var(--border);

    cursor:
        pointer;

    user-select:
        none;

    transition:
        transform 120ms ease,
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}


.player-btn.secondary {
    width:
        50px;

    height:
        50px;

    border-radius:
        50%;

    background:
        #19212b;

    color:
        var(--text);

    font-size:
        1.45rem;
}


.player-btn.primary {
    width:
        72px;

    height:
        72px;

    border-radius:
        50%;

    border:
        none;

    background:
        var(--accent);

    color:
        #07101a;

    font-size:
        1.85rem;

    font-weight:
        700;
}


/*
   Das Play-Dreieck wirkt optisch etwas
   weiter links als das Pause-Zeichen.
*/
.player-btn.primary.playing-icon {
    padding-left:
        4px;
}


.player-btn:hover {
    transform:
        scale(1.06);
}


.player-btn:active {
    transform:
        scale(0.96);
}


.player-btn.secondary:hover {
    background:
        #222d39;

    border-color:
        #3b4a5b;
}


.player-btn.primary:hover {
    background:
        var(--accent-strong);
}


.player-btn.danger:hover {
    color:
        #ff7474;

    border-color:
        #834747;
}



/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 820px) {

    .settings-grid {
        grid-template-columns:
            1fr;
    }


    .checkbox-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 560px) {

    .app-shell {
        width:
            min(
                100% - 20px,
                1180px
            );

        padding-top:
            16px;
    }


    .panel {
        padding:
            15px;
    }


    .panel-heading {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .timer-box {
        text-align:
            left;
    }


    .trainer-window {
        height:
            280px;
    }


    .checkbox-grid {
        grid-template-columns:
            1fr;
    }


    .player-controls {
        gap:
            14px;
    }


    .player-btn.secondary {
        width:
            46px;

        height:
            46px;
    }


    .player-btn.primary {
        width:
            64px;

        height:
            64px;
    }
}