/**
 * Toggle Track Skin — Lo-Fi Boombox
 *
 * 80s/90s portable stereo. Street-level energy. Chunky rounded
 * housing, speaker grille mesh, cassette tape window, big physical
 * buttons, retro typography. Boxy plastic with sheen.
 *
 * @package ToggleTrack
 * @since   1.0.0
 */

/* ---------- Color Palette ---------- */

.tt-skin-lo-fi-boombox {
    --tt-bg: #2a2a2e;
    --tt-text: #c0c0c0;
    --tt-active: #ffffff;
    --tt-controls: #363638;
    --tt-progress: #3a3a3e;
    --tt-accent: #ff2020;
}

/* ---------- Container — Plastic Housing ---------- */

.tt-skin-lo-fi-boombox {
    border-radius: 14px;
    border: 2px solid #3e3e42;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    /* Plastic sheen gradient */
    background:
        linear-gradient(
            170deg,
            rgba(255, 255, 255, 0.04) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0, 0, 0, 0.08) 100%
        ),
        linear-gradient(
            180deg,
            #30303a 0%,
            #2a2a2e 40%,
            #252528 100%
        );
}

/* Speaker grille mesh — left side */
.tt-skin-lo-fi-boombox::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 3px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 9px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 15px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 21px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 27px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 33px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 3px 9px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 9px 9px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 15px 9px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 21px 9px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 27px 9px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 33px 9px, #1a1a1e 1.5px, transparent 1.5px);
    background-size: 36px 12px;
    border: 2px solid #3a3a3e;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

/* Speaker grille mesh — right side */
.tt-skin-lo-fi-boombox::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 3px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 9px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 15px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 21px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 27px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 33px 3px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 3px 9px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 9px 9px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 15px 9px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 21px 9px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 27px 9px, #1a1a1e 1.5px, transparent 1.5px),
        radial-gradient(circle at 33px 9px, #1a1a1e 1.5px, transparent 1.5px);
    background-size: 36px 12px;
    border: 2px solid #3a3a3e;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

/* Make room for speaker grilles */
.tt-skin-lo-fi-boombox .tt-wrapper {
    position: relative;
    z-index: 2;
    padding: 18px 60px;
}

/* ---------- Track Buttons — Preset Buttons ---------- */

.tt-skin-lo-fi-boombox .tt-track-btn {
    border-radius: 6px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.06em;
    padding: 8px 16px;
    border: 1px solid #4a4a4e;
    box-shadow:
        0 3px 0 #1a1a1e,
        0 4px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tt-skin-lo-fi-boombox .tt-track-btn:hover {
    background: #404044;
}

.tt-skin-lo-fi-boombox .tt-track-btn:active {
    box-shadow:
        0 1px 0 #1a1a1e,
        inset 0 2px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(2px);
}

.tt-skin-lo-fi-boombox .tt-track-btn.tt-active {
    box-shadow:
        0 3px 0 #8a0000,
        0 4px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tt-skin-lo-fi-boombox .tt-track-btn.tt-active:active {
    box-shadow:
        0 1px 0 #8a0000,
        inset 0 2px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(2px);
}

/* ---------- Play Button — Big Physical Button ---------- */

.tt-skin-lo-fi-boombox .tt-play-btn {
    border-radius: 8px;
    width: 52px;
    height: 52px;
    font-size: 22px;
    border: 2px solid #4a4a4e;
    box-shadow:
        0 4px 0 #1a1a1e,
        0 5px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(
            180deg,
            #404044 0%,
            #363638 50%,
            #2e2e30 100%
        );
}

.tt-skin-lo-fi-boombox .tt-play-btn:hover {
    background:
        linear-gradient(
            180deg,
            #4a4a4e 0%,
            #404044 50%,
            #363638 100%
        );
}

.tt-skin-lo-fi-boombox .tt-play-btn:active {
    box-shadow:
        0 1px 0 #1a1a1e,
        inset 0 3px 4px rgba(0, 0, 0, 0.4);
    transform: translateY(3px);
}

/* ---------- Progress Bar — Cassette Tape Window ---------- */

.tt-skin-lo-fi-boombox .tt-progress-bar {
    height: 24px;
    border-radius: 8px;
    border: 2px solid #4a4a4e;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.1) 30%,
            rgba(0, 0, 0, 0.1) 70%,
            rgba(0, 0, 0, 0.3) 100%
        ),
        #2a2a2e;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.tt-skin-lo-fi-boombox .tt-progress-fill {
    border-radius: 6px;
    background: linear-gradient(
        180deg,
        #ff4040 0%,
        #ff2020 40%,
        #cc1818 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 6px rgba(255, 32, 32, 0.3);
}

/* Cassette reel markers at left and right of progress */
.tt-skin-lo-fi-boombox .tt-progress-wrap::before,
.tt-skin-lo-fi-boombox .tt-progress-wrap::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #4a4a4e;
    background:
        radial-gradient(
            circle at center,
            #1a1a1e 3px,
            #2a2a2e 3px,
            #2a2a2e 5px,
            transparent 5px
        );
    z-index: 3;
    pointer-events: none;
}

.tt-skin-lo-fi-boombox .tt-progress-wrap {
    position: relative;
    padding-left: 22px;
    padding-right: 22px;
}

.tt-skin-lo-fi-boombox .tt-progress-wrap::before {
    left: 0;
}

.tt-skin-lo-fi-boombox .tt-progress-wrap::after {
    right: 0;
}

/* ---------- Time Display — LED Counter ---------- */

.tt-skin-lo-fi-boombox .tt-time {
    font-weight: 800;
    font-size: 0.9em;
    letter-spacing: 0.04em;
    text-align: center;
}

/* ---------- Control Buttons — Chunky Physical Buttons ---------- */

.tt-skin-lo-fi-boombox .tt-loop-btn,
.tt-skin-lo-fi-boombox .tt-loudness-btn,
.tt-skin-lo-fi-boombox .tt-ab-btn {
    border-radius: 6px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border: 1px solid #4a4a4e;
    box-shadow:
        0 2px 0 #1a1a1e,
        0 3px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tt-skin-lo-fi-boombox .tt-loop-btn:hover,
.tt-skin-lo-fi-boombox .tt-loudness-btn:hover,
.tt-skin-lo-fi-boombox .tt-ab-btn:hover {
    background: #404044;
}

.tt-skin-lo-fi-boombox .tt-loop-btn:active,
.tt-skin-lo-fi-boombox .tt-loudness-btn:active,
.tt-skin-lo-fi-boombox .tt-ab-btn:active {
    box-shadow:
        0 0 0 #1a1a1e,
        inset 0 2px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(2px);
}

.tt-skin-lo-fi-boombox .tt-loop-btn.tt-active,
.tt-skin-lo-fi-boombox .tt-loudness-btn.tt-active,
.tt-skin-lo-fi-boombox .tt-ab-btn.tt-active {
    box-shadow:
        0 2px 0 #8a0000,
        0 3px 3px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ---------- Volume / Speed Labels ---------- */

.tt-skin-lo-fi-boombox .tt-volume-label,
.tt-skin-lo-fi-boombox .tt-speed-label {
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* ---------- Meter ---------- */

.tt-skin-lo-fi-boombox .tt-meter {
    border: 2px solid #4a4a4e;
    border-radius: 4px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.tt-skin-lo-fi-boombox .tt-meter-label {
    text-transform: uppercase;
    font-size: 0.65em;
    font-weight: 800;
}

/* ---------- Loading Overlay ---------- */

.tt-skin-lo-fi-boombox .tt-loading {
    background: rgba(42, 42, 46, 0.96);
    border-radius: 14px;
}

.tt-skin-lo-fi-boombox .tt-loading-text {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.1em;
    font-size: 0.85em;
}

.tt-skin-lo-fi-boombox .tt-loading-bar {
    border-radius: 4px;
    border: 2px solid #4a4a4e;
}

/* ---------- Loop Markers ---------- */

.tt-skin-lo-fi-boombox .tt-loop-marker {
    width: 3px;
    border-radius: 1px;
}

/* ---------- Responsive — Stack speakers differently ---------- */

@media (max-width: 500px) {
    .tt-skin-lo-fi-boombox::before,
    .tt-skin-lo-fi-boombox::after {
        display: none;
    }

    .tt-skin-lo-fi-boombox .tt-wrapper {
        padding: 14px 16px;
    }

    .tt-skin-lo-fi-boombox .tt-progress-wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .tt-skin-lo-fi-boombox .tt-progress-wrap::before,
    .tt-skin-lo-fi-boombox .tt-progress-wrap::after {
        display: none;
    }
}