/* =========================================================
   RETROBASS R-26
   Phase 4: Displayglas und Equalizer
   ========================================================= */

.receiver__display-area {
    position: relative;

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

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 48% 34%,
            rgba(116, 73, 31, 0.09),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #100f0e 0%,
            #070706 58%,
            #030303 100%
        );

    box-shadow:
        inset 3px 0 7px rgba(0, 0, 0, 0.72),
        inset 0 0 22px rgba(0, 0, 0, 0.86);
}

/* ---------------------------------------------------------
   gesamte Displayeinheit
   --------------------------------------------------------- */

.display-unit {
    position: relative;

    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: clamp(11px, 1.5vw, 18px);

    width: 82%;
    height: 68%;

    min-width: 0;
}

/* ---------------------------------------------------------
   vertikaler Equalizer
   --------------------------------------------------------- */

.display-equalizer {
    position: relative;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;

    width: 100%;
    height: 100%;

    padding:
        clamp(9px, 1.2vw, 14px)
        5px;

    overflow: hidden;

    border: 1px solid rgba(190, 124, 47, 0.19);
    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 171, 59, 0.025),
            rgba(0, 0, 0, 0.24)
        ),
        rgba(2, 2, 2, 0.82);

    box-shadow:
        inset 0 0 9px rgba(0, 0, 0, 0.90),
        0 0 0 1px rgba(0, 0, 0, 0.42);
}

.display-equalizer::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.35;

    background:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 7px,
            rgba(255, 166, 47, 0.11) 8px,
            transparent 9px
        );
}

.display-equalizer span {
    position: relative;
    z-index: 1;

    flex: 1 1 0;

    max-width: 3px;
    height: var(--level);

    border-radius: 2px 2px 0 0;

    background:
        linear-gradient(
            180deg,
            #ffc062 0%,
            #df871e 35%,
            #9c4f0b 100%
        );

    box-shadow:
        0 0 4px rgba(230, 131, 27, 0.44),
        0 0 9px rgba(211, 105, 14, 0.16);

    opacity: 0.88;
}

/* ---------------------------------------------------------
   schwarzes Glas
   --------------------------------------------------------- */

.display-glass {
    position: relative;

    min-width: 0;
    height: 100%;

    padding: clamp(9px, 1.2vw, 14px);

    overflow: hidden;

    border: 1px solid rgba(213, 147, 68, 0.32);
    border-radius: clamp(7px, 1vw, 11px);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.065) 0%,
            rgba(255, 255, 255, 0.012) 22%,
            transparent 43%
        ),
        linear-gradient(
            145deg,
            #11100f 0%,
            #050504 58%,
            #020202 100%
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.022),
        inset 0 -8px 18px rgba(0, 0, 0, 0.76),
        0 4px 10px rgba(0, 0, 0, 0.42);
}

/* dezente Glasreflexion */

.display-glass::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: -18%;
    left: -28%;

    width: 78%;
    height: 55%;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0.14;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 239, 216, 0.34),
            transparent 70%
        );

    filter: blur(7px);
    transform: rotate(-18deg);
}

.display-glass::after {
    content: "";

    position: absolute;
    z-index: 2;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            112deg,
            transparent 0 56%,
            rgba(255, 255, 255, 0.022) 58%,
            transparent 63%
        );
}

/* ---------------------------------------------------------
   innerer Bildschirm
   --------------------------------------------------------- */

.display-screen {
    position: relative;
    z-index: 1;

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

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 1px solid rgba(185, 104, 22, 0.12);
    border-radius: 5px;

    color: rgba(221, 126, 24, 0.36);

    background:
        radial-gradient(
            circle at 50% 44%,
            rgba(191, 94, 14, 0.035),
            transparent 51%
        ),
        #030302;

    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.96);
}

/* sehr feines OLED-Raster */

.display-screen::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.18;

    background:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 2px,
            rgba(222, 121, 19, 0.035) 3px
        );
}

/* momentan nur Orientierung */

.display-screen__label {
    position: relative;
    z-index: 1;

    font-size: clamp(0.55rem, 1.1vw, 0.82rem);
    font-weight: 500;
    letter-spacing: 0.25em;
}

.display-screen__model {
    position: relative;
    z-index: 1;

    margin-top: 0.45rem;

    font-size: clamp(0.65rem, 1.25vw, 0.95rem);
    letter-spacing: 0.18em;
}

/* ---------------------------------------------------------
   Display bleibt ausgeschaltet
   --------------------------------------------------------- */

.display-unit:not(.is-powered) .display-screen__label,
.display-unit:not(.is-powered) .display-screen__model,
.display-unit:not(.is-powered) .display-equalizer span {
    opacity: 0.24;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 720px) {
    .display-unit {
        grid-template-columns: 19px minmax(0, 1fr);
        gap: 8px;

        width: 86%;
        height: 67%;
    }

    .display-equalizer {
        gap: 1px;
        padding-inline: 3px;
    }

    .display-equalizer span {
        max-width: 2px;
    }

    .display-glass {
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .display-unit {
        grid-template-columns: 14px minmax(0, 1fr);
        gap: 6px;

        width: 89%;
        height: 63%;
    }

    .display-equalizer {
        padding: 6px 2px;
    }

    .display-equalizer span:nth-child(even) {
        display: none;
    }

    .display-screen__label {
        letter-spacing: 0.15em;
    }
}

/* =========================================================
   RETROBASS R-26
   Phase 4.2e
   Mechanische Einbettung der Displayeinheit
   ========================================================= */


/* ---------------------------------------------------------
   Displayeinheit erhält eine echte Montagevertiefung
   --------------------------------------------------------- */

.display-unit::before {
    content: "";

    position: absolute;
    z-index: -2;

    inset:
        -5.5%
        -3.2%;

    border-radius:
        clamp(
            9px,
            1.2vw,
            14px
        );

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                230,
                196,
                0.018
            ),
            transparent 14%
        ),

        linear-gradient(
            145deg,
            #090807 0%,
            #030303 58%,
            #010101 100%
        );

    box-shadow:
        inset 0 4px 8px
        rgba(
            255,
            224,
            181,
            0.016
        ),

        inset 0 -10px 18px
        rgba(
            0,
            0,
            0,
            0.90
        ),

        0 7px 14px
        rgba(
            0,
            0,
            0,
            0.38
        );
}


/* ---------------------------------------------------------
   Schmale Montagefuge unmittelbar um die Einheit
   --------------------------------------------------------- */

.display-unit::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset:
        -2.4%
        -1.5%;

    border:
        1px solid
        rgba(
            32,
            18,
            8,
            0.88
        );

    border-radius:
        clamp(
            8px,
            1.1vw,
            13px
        );

    pointer-events:
        none;

    box-shadow:
        inset 0 1px 2px
        rgba(
            255,
            235,
            207,
            0.020
        ),

        inset 0 -3px 6px
        rgba(
            0,
            0,
            0,
            0.74
        ),

        0 0 0 1px
        rgba(
            139,
            86,
            34,
            0.075
        );
}


/* ---------------------------------------------------------
   Equalizer und Glas wirken als gemeinsam montierte Einheit
   --------------------------------------------------------- */

.display-equalizer,
.display-glass {
    transform:
        translateZ(0);

    backface-visibility:
        hidden;
}


/* ---------------------------------------------------------
   Untere Schattenkante vermittelt Gewicht
   --------------------------------------------------------- */

.display-glass {
    filter:
        drop-shadow(
            0
            2px
            2px
            rgba(
                0,
                0,
                0,
                0.28
            )
        );
}


/* ---------------------------------------------------------
   Warmer Kontaktpunkt zwischen Glas und Rahmen
   --------------------------------------------------------- */

.display-glass {
    outline:
        1px solid
        rgba(
            198,
            125,
            47,
            0.055
        );

    outline-offset:
        -2px;
}


/* ---------------------------------------------------------
   Ausgeschaltet bleibt die Einbautiefe sichtbar
   --------------------------------------------------------- */

.receiver:not(.is-powered)
.display-unit::before {
    box-shadow:
        inset 0 3px 7px
        rgba(
            255,
            224,
            181,
            0.010
        ),

        inset 0 -11px 20px
        rgba(
            0,
            0,
            0,
            0.94
        ),

        0 7px 14px
        rgba(
            0,
            0,
            0,
            0.34
        );
}


/* ---------------------------------------------------------
   Im aktiven Zustand wird nur die Materialkante minimal klarer
   --------------------------------------------------------- */

.receiver.is-ready
.display-unit::after {
    border-color:
        rgba(
            46,
            26,
            11,
            0.94
        );

    box-shadow:
        inset 0 1px 2px
        rgba(
            255,
            235,
            207,
            0.026
        ),

        inset 0 -3px 6px
        rgba(
            0,
            0,
            0,
            0.72
        ),

        0 0 0 1px
        rgba(
            170,
            105,
            40,
            0.095
        );

    transition:
        border-color 420ms ease-out,
        box-shadow 420ms ease-out;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 720px) {
    .display-unit::before {
        inset:
            -4.5%
            -2.5%;
    }

    .display-unit::after {
        inset:
            -2%
            -1.2%;
    }
}