/* =========================================================
   RETROBASS R-26
   Bedienelemente und Typenschild

   Phase 4.3
   - Typenschild aus Messing
   - Power-Taste aus dunkel patiniertem Messing
   - Funktionstasten aus satiniertem Messing
   - Lautstärkeregler aus Messing mit Aluminiumring
   ========================================================= */


/* =========================================================
   Bedienfeld-Grundaufbau
   ========================================================= */

.controls {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(130px, 22%)
        minmax(290px, 1fr)
        minmax(120px, 18%);

    align-items: center;
    gap: clamp(12px, 2vw, 28px);

    width: 100%;
    height: 100%;

    padding:
        clamp(8px, 1.2vw, 14px)
        clamp(13px, 1.8vw, 22px);
}


/* =========================================================
   Typenschild
   ========================================================= */

.nameplate {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 72%;

    padding: 8px 20px;

    overflow: hidden;

    border:
        1px solid
        rgba(49, 28, 10, 0.82);

    border-radius: 5px;

    color: #33200f;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.075) 0,
            rgba(255, 255, 255, 0.075) 1px,
            transparent 1px,
            transparent 3px
        ),

        linear-gradient(
            135deg,
            #a97532 0%,
            #deb467 23%,
            #956126 51%,
            #d3a14f 76%,
            #70491b 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 245, 211, 0.36),

        inset 0 -2px 4px
        rgba(54, 29, 8, 0.36),

        inset 0 0 0 1px
        rgba(255, 223, 158, 0.08),

        0 2px 5px
        rgba(0, 0, 0, 0.29);

    text-shadow:
        0 1px 0
        rgba(255, 235, 189, 0.24);
}


/* innere Gravurkante */

.nameplate::before {
    content: "";

    position: absolute;
    inset: 4px;

    border:
        1px solid
        rgba(73, 42, 14, 0.32);

    border-radius: 3px;

    pointer-events: none;
}


/* leichte Materialvariation */

.nameplate::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.24;

    background:
        radial-gradient(
            circle at 24% 18%,
            rgba(255, 241, 198, 0.14),
            transparent 24%
        ),

        radial-gradient(
            circle at 78% 82%,
            rgba(61, 31, 7, 0.12),
            transparent 32%
        ),

        linear-gradient(
            112deg,
            transparent 0 42%,
            rgba(255, 255, 255, 0.035) 47%,
            transparent 54%
        );
}


.nameplate strong {
    position: relative;
    z-index: 2;

    font-size:
        clamp(
            0.66rem,
            1.2vw,
            0.92rem
        );

    font-weight: 600;
    letter-spacing: 0.14em;
}


.nameplate > span:not(.nameplate__screw) {
    position: relative;
    z-index: 2;

    margin-top: 2px;

    font-size:
        clamp(
            0.64rem,
            1.1vw,
            0.86rem
        );

    letter-spacing: 0.12em;
}


.nameplate small {
    position: relative;
    z-index: 2;

    margin-top: 4px;

    font-size:
        clamp(
            0.32rem,
            0.58vw,
            0.48rem
        );

    letter-spacing: 0.09em;
    white-space: nowrap;
}


/* =========================================================
   Messingfarbene Schlitzschrauben
   ========================================================= */

.nameplate__screw {
    position: absolute;
    z-index: 3;

    width: 9px;
    aspect-ratio: 1;

    border:
        1px solid
        rgba(74, 43, 14, 0.76);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            #f2d58c 0%,
            #c8953f 38%,
            #7e501d 72%,
            #4c2d0d 100%
        );

    box-shadow:
        inset 0 1px 1px
        rgba(255, 246, 203, 0.42),

        inset -1px -1px 2px
        rgba(47, 22, 4, 0.28),

        0 1px 2px
        rgba(0, 0, 0, 0.34);
}


.nameplate__screw::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 6px;
    height: 1px;

    background:
        rgba(70, 39, 11, 0.80);

    transform:
        translate(-50%, -50%)
        rotate(-12deg);
}


.nameplate__screw--top-left {
    top: 5px;
    left: 6px;
}


.nameplate__screw--top-right {
    top: 5px;
    right: 6px;
}


.nameplate__screw--bottom-left {
    bottom: 5px;
    left: 6px;
}


.nameplate__screw--bottom-right {
    right: 6px;
    bottom: 5px;
}


/* =========================================================
   Tastenbereich
   ========================================================= */

.control-buttons {
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    gap:
        clamp(
            7px,
            1.3vw,
            18px
        );

    min-width: 0;
}


.control-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 38px;
    padding: 0;

    border: 0;

    color: #2e251c;
    background: transparent;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;
}


.control-button__label {
    min-height: 14px;
    margin-bottom: 5px;

    font-size:
        clamp(
            0.43rem,
            0.72vw,
            0.62rem
        );

    line-height: 1;
}


/* =========================================================
   Power-Taste
   Dunkles, schweres Hauptschalter-Messing
   ========================================================= */

.control-button--power
.control-button__label {
    color: #3c2915;

    font-weight: 600;
    letter-spacing: 0.09em;

    text-shadow:
        0 1px 0
        rgba(255, 228, 176, 0.16);
}


.control-button--power
.control-button__knob {
    position: relative;

    display: block;

    width:
        clamp(
            25px,
            3vw,
            34px
        );

    aspect-ratio: 1;

    border:
        1px solid
        rgba(53, 29, 8, 0.96);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 27%,
            #f2d18a 0%,
            #c18b3c 18%,
            #936022 42%,
            #694116 66%,
            #3e240b 84%,
            #211205 100%
        );

    box-shadow:
        inset 1px 1px 1px
        rgba(255, 240, 198, 0.44),

        inset -2px -3px 5px
        rgba(28, 13, 2, 0.72),

        inset 0 0 0 1px
        rgba(255, 211, 125, 0.10),

        0 0 0 2px
        rgba(49, 27, 9, 0.72),

        0 3px 5px
        rgba(0, 0, 0, 0.46),

        0 6px 10px
        rgba(0, 0, 0, 0.18);

    transition:
        transform 110ms ease,
        filter 180ms ease,
        box-shadow 180ms ease;
}


/* gedrehte Metalloberfläche */

.control-button--power
.control-button__knob::before {
    content: "";

    position: absolute;

    inset: 3px;

    border:
        1px solid
        rgba(74, 42, 13, 0.44);

    border-radius: 50%;

    pointer-events: none;

    background:
        repeating-conic-gradient(
            from 12deg,

            rgba(255, 235, 184, 0.055)
            0deg 1deg,

            rgba(64, 34, 8, 0.035)
            1deg 2deg,

            transparent
            2deg 4deg
        ),

        radial-gradient(
            circle at 38% 31%,

            rgba(255, 238, 192, 0.25)
            0%,

            rgba(207, 148, 65, 0.12)
            28%,

            rgba(79, 44, 12, 0.22)
            72%,

            rgba(30, 15, 3, 0.48)
            100%
        );

    box-shadow:
        inset 1px 1px 1px
        rgba(255, 242, 204, 0.17),

        inset -2px -2px 3px
        rgba(20, 9, 1, 0.44);
}


/*
   ::after wird bewusst nicht belegt.
   Dort sitzt die Power-Leuchte aus boot.css.
*/


.control-button--power:hover
.control-button__knob {
    filter:
        brightness(1.035)
        saturate(1.025);

    box-shadow:
        inset 1px 1px 1px
        rgba(255, 240, 198, 0.50),

        inset -2px -3px 5px
        rgba(28, 13, 2, 0.68),

        inset 0 0 0 1px
        rgba(255, 211, 125, 0.13),

        0 0 0 2px
        rgba(61, 35, 11, 0.78),

        0 3px 5px
        rgba(0, 0, 0, 0.44),

        0 0 8px
        rgba(181, 111, 31, 0.08);
}


.control-button--power:active
.control-button__knob {
    transform:
        translateY(2px)
        scale(0.965);

    filter:
        brightness(0.94)
        saturate(0.96);

    box-shadow:
        inset 2px 3px 5px
        rgba(25, 11, 1, 0.66),

        inset -1px -1px 2px
        rgba(255, 226, 165, 0.16),

        0 0 0 2px
        rgba(42, 22, 6, 0.82),

        0 1px 2px
        rgba(0, 0, 0, 0.36);
}


.receiver.is-powered
.control-button--power
.control-button__knob {
    filter:
        brightness(1.025)
        saturate(1.035);

    box-shadow:
        inset 1px 1px 1px
        rgba(255, 240, 198, 0.46),

        inset -2px -3px 5px
        rgba(28, 13, 2, 0.69),

        inset 0 0 0 1px
        rgba(255, 211, 125, 0.12),

        0 0 0 2px
        rgba(57, 32, 10, 0.78),

        0 3px 5px
        rgba(0, 0, 0, 0.44),

        0 0 8px
        rgba(206, 132, 42, 0.075);
}


/* =========================================================
   Funktionstasten
   Helleres, satiniertes Messing
   ========================================================= */

.control-button:not(.control-button--power)
.control-button__label {
    color: #3b2b19;

    font-weight: 550;
    letter-spacing: 0.08em;

    text-shadow:
        0 1px 0
        rgba(255, 235, 195, 0.14);

    transition:
        color 180ms ease,
        text-shadow 180ms ease;
}


.control-button:not(.control-button--power)
.control-button__knob {
    position: relative;

    display: block;

    width:
        clamp(
            25px,
            3vw,
            34px
        );

    aspect-ratio: 1;

    border:
        1px solid
        rgba(63, 39, 14, 0.94);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            #f3d798 0%,
            #d0a052 20%,
            #a87331 44%,
            #795021 68%,
            #4c2f10 86%,
            #2b1907 100%
        );

    box-shadow:
        inset 1px 1px 1px
        rgba(255, 243, 207, 0.48),

        inset -2px -3px 5px
        rgba(38, 19, 4, 0.60),

        inset 0 0 0 1px
        rgba(255, 219, 145, 0.10),

        0 0 0 2px
        rgba(63, 39, 15, 0.58),

        0 3px 5px
        rgba(0, 0, 0, 0.38),

        0 6px 10px
        rgba(0, 0, 0, 0.12);

    transition:
        transform 110ms ease,
        filter 180ms ease,
        box-shadow 180ms ease;
}


.control-button:not(.control-button--power)
.control-button__knob::before {
    content: "";

    position: absolute;

    inset: 3px;

    border:
        1px solid
        rgba(91, 57, 20, 0.34);

    border-radius: 50%;

    pointer-events: none;

    background:
        repeating-conic-gradient(
            from 8deg,

            rgba(255, 240, 199, 0.052)
            0deg 1deg,

            rgba(75, 44, 13, 0.028)
            1deg 2deg,

            transparent
            2deg 4deg
        ),

        radial-gradient(
            circle at 38% 31%,

            rgba(255, 243, 207, 0.30)
            0%,

            rgba(219, 169, 87, 0.14)
            30%,

            rgba(111, 69, 24, 0.18)
            70%,

            rgba(45, 24, 6, 0.42)
            100%
        );

    box-shadow:
        inset 1px 1px 1px
        rgba(255, 246, 215, 0.18),

        inset -2px -2px 3px
        rgba(31, 15, 2, 0.38);
}


.control-button:not(.control-button--power):hover
.control-button__knob {
    filter:
        brightness(1.045)
        saturate(1.025);

    box-shadow:
        inset 1px 1px 1px
        rgba(255, 245, 210, 0.54),

        inset -2px -3px 5px
        rgba(38, 19, 4, 0.56),

        inset 0 0 0 1px
        rgba(255, 222, 151, 0.14),

        0 0 0 2px
        rgba(77, 48, 17, 0.66),

        0 3px 5px
        rgba(0, 0, 0, 0.36),

        0 0 8px
        rgba(194, 127, 43, 0.08);
}


.control-button:not(.control-button--power):active
.control-button__knob {
    transform:
        translateY(2px)
        scale(0.965);

    filter:
        brightness(0.94)
        saturate(0.96);

    box-shadow:
        inset 2px 3px 5px
        rgba(34, 16, 2, 0.62),

        inset -1px -1px 2px
        rgba(255, 232, 178, 0.18),

        0 0 0 2px
        rgba(54, 31, 9, 0.76),

        0 1px 2px
        rgba(0, 0, 0, 0.30);
}


.control-button:not(.control-button--power):active
.control-button__label {
    color: #2e1f10;
    text-shadow: none;
}


/* Favoritentaste */

.control-button[data-control="favorite"]
.control-button__label {
    color: #59401f;

    font-size:
        clamp(
            0.54rem,
            0.86vw,
            0.72rem
        );

    line-height: 1;
}


/* Fokus */

.control-button:focus-visible {
    outline:
        2px solid
        rgba(198, 132, 50, 0.82);

    outline-offset: 5px;
    border-radius: 4px;
}


/* =========================================================
   Lautstärkeregler
   Messing mit dezentem Aluminiumring
   ========================================================= */

.volume-control {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
    min-width: 0;
}


.volume-control__label {
    position: absolute;

    top: 0;
    left: 50%;

    color: #3b2916;

    font-size:
        clamp(
            0.42rem,
            0.7vw,
            0.58rem
        );

    font-weight: 600;
    letter-spacing: 0.10em;

    text-shadow:
        0 1px 0
        rgba(255, 235, 193, 0.14);

    transform:
        translateX(-50%);
}


/* ---------------------------------------------------------
   massiver Messing-Außenkörper
   --------------------------------------------------------- */

.volume-control__knob {
    position: relative;
    z-index: 3;

    width:
        clamp(
            62px,
            8vw,
            88px
        );

    aspect-ratio: 1;

    padding: 0;

    border:
        1px solid
        rgba(48, 27, 8, 0.98);

    border-radius: 50%;

    background:
        conic-gradient(
            from 214deg,

            #4a2b0c 0deg,
            #8a5a20 36deg,
            #d2a057 72deg,
            #f0cf8c 110deg,
            #9c6828 150deg,
            #5a3410 190deg,
            #c28c43 228deg,
            #e6bc70 270deg,
            #754718 312deg,
            #4a2b0c 360deg
        );

    box-shadow:
        inset 2px 2px 3px
        rgba(255, 242, 202, 0.42),

        inset -5px -6px 9px
        rgba(28, 13, 2, 0.68),

        inset 0 0 0 2px
        rgba(255, 212, 132, 0.08),

        0 0 0 3px
        rgba(52, 29, 8, 0.74),

        0 6px 10px
        rgba(0, 0, 0, 0.46),

        0 12px 18px
        rgba(0, 0, 0, 0.18);

    cursor: pointer;

    transition:
        transform 170ms ease,
        filter 180ms ease,
        box-shadow 180ms ease;

    -webkit-tap-highlight-color:
        transparent;
}


/* ---------------------------------------------------------
   gedrehte Messing-Mittelfläche
   --------------------------------------------------------- */

.volume-control__knob::before {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 8%;

    border:
        1px solid
        rgba(66, 39, 12, 0.56);

    border-radius: 50%;

    pointer-events: none;

    background:
        repeating-conic-gradient(
            from 6deg,

            rgba(255, 239, 190, 0.048)
            0deg 0.9deg,

            rgba(73, 41, 10, 0.030)
            0.9deg 1.8deg,

            transparent
            1.8deg 3.4deg
        ),

        radial-gradient(
            circle at 37% 30%,
            #edc980 0%,
            #c18c3e 23%,
            #936021 47%,
            #684016 70%,
            #3a2109 100%
        );

    box-shadow:
        inset 2px 2px 3px
        rgba(255, 242, 204, 0.30),

        inset -4px -4px 6px
        rgba(27, 12, 2, 0.50),

        0 0 0 1px
        rgba(255, 218, 143, 0.07);
}


/* ---------------------------------------------------------
   Aluminiumring auf der Oberfläche

   Sichtbar, aber bewusst nicht dominant.
   --------------------------------------------------------- */

.volume-control__knob::after {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 16%;

    border:
        1px solid
        rgba(218, 215, 207, 0.72);

    border-radius: 50%;

    pointer-events: none;

    opacity: 0.82;

    background:
        repeating-conic-gradient(
            from 8deg,

            rgba(255, 255, 255, 0.060)
            0deg 0.8deg,

            rgba(61, 58, 53, 0.035)
            0.8deg 1.6deg,

            transparent
            1.6deg 3.2deg
        );

    box-shadow:
        inset 1px 1px 1px
        rgba(255, 255, 255, 0.38),

        inset -1px -1px 2px
        rgba(37, 34, 29, 0.38),

        0 0 0 1px
        rgba(66, 47, 24, 0.30),

        0 1px 2px
        rgba(0, 0, 0, 0.24);

    mask:
        radial-gradient(
            circle,
            transparent 0 86%,
            #000 87% 100%
        );

    filter:
        saturate(0.30)
        brightness(0.98);

    transition:
        opacity 180ms ease,
        filter 180ms ease;
}


/* ---------------------------------------------------------
   Positionsanzeige
   --------------------------------------------------------- */

.volume-control__indicator {
    position: absolute;
    z-index: 4;

    top: 8%;
    left: 50%;

    width: 2px;
    height: 19%;

    border-radius: 2px;

    background:
        linear-gradient(
            180deg,
            #ffe5b0 0%,
            #c88731 36%,
            #6e3c0c 100%
        );

    box-shadow:
        0 0 1px
        rgba(255, 239, 199, 0.52),

        0 1px 3px
        rgba(0, 0, 0, 0.42);

    transform:
        translateX(-50%);

    transform-origin:
        center 220%;
}


/* ---------------------------------------------------------
   Hover
   --------------------------------------------------------- */

.volume-control__knob:hover {
    filter:
        brightness(1.035)
        saturate(1.025);

    box-shadow:
        inset 2px 2px 3px
        rgba(255, 242, 202, 0.48),

        inset -5px -6px 9px
        rgba(28, 13, 2, 0.64),

        inset 0 0 0 2px
        rgba(255, 212, 132, 0.11),

        0 0 0 3px
        rgba(62, 35, 10, 0.80),

        0 6px 10px
        rgba(0, 0, 0, 0.44),

        0 0 10px
        rgba(199, 129, 43, 0.07);
}


.volume-control__knob:hover::after {
    opacity: 0.92;

    filter:
        saturate(0.24)
        brightness(1.055);
}


/* ---------------------------------------------------------
   aktiver Druckzustand
   --------------------------------------------------------- */

.volume-control__knob:active {
    filter:
        brightness(0.96)
        saturate(0.98);

    box-shadow:
        inset 3px 4px 6px
        rgba(25, 11, 1, 0.62),

        inset -1px -1px 2px
        rgba(255, 226, 171, 0.14),

        0 0 0 3px
        rgba(45, 24, 6, 0.82),

        0 3px 5px
        rgba(0, 0, 0, 0.36);
}


.volume-control__knob:active::after {
    opacity: 0.70;

    filter:
        saturate(0.20)
        brightness(0.84);
}


/* =========================================================
   Lautstärkeskala
   ========================================================= */

.volume-control__scale {
    position: absolute;
    z-index: 1;

    inset: 4%;

    border-radius: 50%;
}


.volume-control__mark {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 2px;
    height: 5px;

    border-radius: 1px;

    background:
        linear-gradient(
            180deg,
            #4c3117,
            #201307
        );

    box-shadow:
        0 1px 0
        rgba(255, 232, 191, 0.10);

    transform-origin:
        50% 36px;
}


.volume-control__mark--1 {
    transform:
        translate(-50%, -36px)
        rotate(-70deg);
}


.volume-control__mark--2 {
    transform:
        translate(-50%, -36px)
        rotate(-47deg);
}


.volume-control__mark--3 {
    transform:
        translate(-50%, -36px)
        rotate(-24deg);
}


.volume-control__mark--4 {
    transform:
        translate(-50%, -36px)
        rotate(0deg);
}


.volume-control__mark--5 {
    transform:
        translate(-50%, -36px)
        rotate(24deg);
}


.volume-control__mark--6 {
    transform:
        translate(-50%, -36px)
        rotate(47deg);
}


.volume-control__mark--7 {
    transform:
        translate(-50%, -36px)
        rotate(70deg);
}


/* =========================================================
   MIN / MAX
   ========================================================= */

.volume-control__min,
.volume-control__max {
    position: absolute;

    bottom: 1px;

    color: #3a2919;

    font-size:
        clamp(
            0.38rem,
            0.62vw,
            0.52rem
        );

    font-weight: 550;
    letter-spacing: 0.04em;

    text-shadow:
        0 1px 0
        rgba(255, 236, 198, 0.10);
}


.volume-control__min {
    left: 5%;
}


.volume-control__max {
    right: 3%;
}


/* Fokus */

.volume-control__knob:focus-visible {
    outline:
        2px solid
        rgba(198, 132, 50, 0.84);

    outline-offset: 5px;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 720px) {
    .controls {
        grid-template-columns:
            minmax(90px, 21%)
            minmax(190px, 1fr)
            minmax(75px, 18%);

        gap: 8px;

        padding-inline: 9px;
    }

    .nameplate {
        height: 68%;

        padding-inline: 12px;
    }

    .nameplate small {
        display: none;
    }

    .control-buttons {
        gap: 4px;
    }

    .control-button {
        min-width: 28px;
    }

    .control-button__knob,
    .control-button--power
    .control-button__knob,
    .control-button:not(.control-button--power)
    .control-button__knob {
        width:
            clamp(
                20px,
                4vw,
                28px
            );
    }

    .volume-control__knob {
        width:
            clamp(
                48px,
                10vw,
                66px
            );
    }

    .volume-control__mark {
        display: none;
    }
}


@media (max-width: 480px) {
    .controls {
        grid-template-columns:
            26%
            1fr
            20%;

        gap: 4px;

        padding-inline: 6px;
    }

    .nameplate {
        height: 62%;

        padding:
            4px 8px;
    }

    .nameplate strong {
        font-size: 0.48rem;
    }

    .nameplate > span:not(.nameplate__screw) {
        font-size: 0.46rem;
    }

    .nameplate__screw {
        width: 6px;
    }

    .nameplate__screw::after {
        width: 4px;
    }

    .control-button__label {
        font-size: 0.34rem;
    }

    .control-button__knob,
    .control-button--power
    .control-button__knob,
    .control-button:not(.control-button--power)
    .control-button__knob {
        width: 19px;
    }

    .volume-control__knob {
        width: 46px;
    }

    .volume-control__min,
    .volume-control__max {
        display: none;
    }
}


/* =========================================================
   Bewegungsreduzierung
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .control-button__knob,
    .volume-control__knob,
    .volume-control__knob::after {
        transition-duration:
            1ms !important;
    }
}