/* Cassette player Base Formatting Stylesheet

======= LICENSE ==========
Copyright (c) Johan Lövstedt 2026
Licensed under the MIT License for open-source software

======= IMAGE METADATA REFERENCE SHEET ========
tape-mask-frame.png
tape-mask-backing.png
tape-screws.png

    width: 1192px
    height: 761px

spindle_static.png
spindle_animated.gif
    width: 315px
    height: 315px

Tape label dimensions:
    width: 1083
    height: 510px
    approx aspect ratio: 101 / 51 ≃ 2 / 1
*/

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

/*MOBILE LAYOUT*/
.cassette-player {
    margin: auto;
    width: fit-content;
    display: grid;
    grid-template-columns: 20px auto 20px;
    grid-template-areas: 
        "sidePnL vu-meters sidePnR"
        "sidePnL themesel sidePnR"
        "sidePnL title sidePnR"
        "sidePnL tape-deck sidePnR"
        "sidePnL album-selector sidePnR"
        "sidePnL meta sidePnR"
        "sidePnL tracklist sidePnR";
    gap: 1rem;
    background-color: transparent;
}
.sidePnL {
    grid-area: sidePnL;
}
.sidePnR {
    grid-area: sidePnR;
}
.tape-deck {
    grid-area: tape-deck;
}
.themeSelector {
    grid-area: themesel;
}
.album-selector {
    grid-area: album-selector;
    display: block;
}
.cassette-player-title {
    grid-area: title;
}


.cassette-tracklist {
    grid-area: tracklist;
}
#playlist {
    list-style: none;
    padding: 0;
    width: 100%;
}
.vu-meters {
    grid-area: vu-meters;
    display: none;
}
.album-list {
    display: none;
}

/*DESKTOP (FULL)*/
@media (min-width: 768px) {
    .cassette-player {
        grid-template-columns: 20px 2fr auto 20px;
        grid-template-areas:
            "sidePnL title      vu-meters sidePnR"
            "sidePnL tracklist vu-meters sidePnR"
            "sidePnL tracklist themesel sidePnR"
            "sidePnL tracklist tape-deck sidePnR"
            "sidePnL tracklist meta      sidePnR"
            "sidePnL tracklist album-list sidePnR" ;
    }
    .vu-meters,
    .album-list,
    .sidePnL,
    .sidePnR {
        display: block;
    }
    .album-selector {
        display: none;
    }
    .sidePnL {
        grid-area: sidePnL;
    }
      .sidePnR {
        grid-area: sidePnR;
    }
}

/*DESKTOP (COMPACT)*/
.cassette-player.--compact {
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    grid-template-areas: 
        "sidePnL tape-deck sidePnR"
        "sidePnL album sidePnR"
        "sidePnL title sidePnR"
        "sidePnL meta sidePnR"
        "sidePnL tracklist sidePnR";
    gap: 1rem;   
}
.cassette-player.--compact .album-list,
.cassette-player.--compact .vu-meters,
.cassette-player.--compact .themeSelector {
  display: none;
}
.mediaMetaDisplay {
    grid-area: meta;
}

.cassette-player.--compact .album-selector {
  display: block;
  grid-area: album;
}


/*

======== BASIC FORMATTING ================

*/
/*-------------- Side Panels ----------------*/
.sidePnL,
.sidePnR {
    width: 20px;
    height: auto;
    background: none;
}

/* ================= Media Meta Display ================= */
.mediaMetaDisplay {
    background-color: black;
    color: #d4841c;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    width: 380px;               /* fixed width in parity with cassette */
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 6px inset rgb(105, 61, 3);
    border-radius: 12px;
    box-sizing: border-box;
}

.mediaMetaDisplay ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mediaMetaDisplay li {
    margin: 4px 0;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.mediaMetaDisplay .meta-label {
    font-weight: 400;
    opacity: 0.7;
    flex-shrink: 0;
}

.mediaMetaDisplay .scroll-wrapper {
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    max-width: calc(100% - 50px); /* leave some room for label */
    vertical-align: baseline;
}

.mediaMetaDisplay .scroll-content {
    display: inline-block;
    padding-right: 2rem; /* will be set dynamically in JS if needed */
    animation: scroll-loop 12s linear infinite
}
.mediaMetaDisplay .scroll-content span {
    display: inline-block;
    white-space: nowrap;
    padding-right: 2rem; /* will be set dynamically in JS if needed */
}

.mediaMetaDisplay .meta-value {
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    color: inherit; 
    white-space: nowrap;
}

@keyframes scroll-loop {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}



/*

======== TAPE DECK CONTENT FORMATTING ================

*/

.tape-deck {
    border-style: inset;
}

/*MEDIA PLAYER ELEMENT TITLE*/
.cassette-player-title {
    width: auto;
    height: 25px;
    margin-bottom: 2px;
    text-align: center;
    padding: 4px;
    font-weight: bold;
    text-align: center;
}
/*THEME SELECTOR*/
.themeSelector {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.themeBtn {
    z-index: 1;
    position: relative;
    height: 25px;
    width: 25px;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s, box-shadow 0.1s;
    cursor: pointer;
}
.themeBtn:hover {
    transform: scale(1.1);
}
.themeBtn.active {
    box-shadow: 0 0 0 2px white inset;
}
/*CASSETTE ELEMENT CONTAINER*/
.cassette {
    position:relative;
    width: 360px;
    aspect-ratio: 1192 / 761;
    justify-self: center;
    margin-left: 10px;
}
.cassette img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   pointer-events: none;
}
.cassette-label { z-index: 3;}
#cassette-label {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 70%;
    object-fit: cover; /* or contain if you prefer */
    z-index: 2; /* update per layer */
}
#cassetteShell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 4;
    pointer-events: none;

}
.cassette-screws { z-index: 4;}

#spindleLeft, #spindleRight {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 37%;
    object-position: center;
    transform: translateY(-50, -50%);
    pointer-events: none;
    z-index: 5;
}
#spindleLeft { left: 23%; }
#spindleRight { left: 65%; }

/* ======== UI Controls =============*/
.controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.media-btn {
    z-index: 1;
    position: relative;
    height: 45px;
    width: 45px;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
}
.media-btn div {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#playBtn.play-Flash {
    animation: playFlash 1.0s step-start infinite;
}
@keyframes playFlash {
    50% { background-color: rgb(255, 136, 0); }
}

/* Optionally override Play All with a different color */

#playBtn:hover {
    background-color: rgb(255, 136, 0);
    color: black;
}
#playBtn.active {
    background-color: rgb(255, 136, 0);
    color: rgb(255, 255, 255);
}
#playBtn.play-flash {
    animation: playFlash 0.7s step-start infinite;
}
@keyframes playFlash {
    50% { background-color: rgb(255, 136, 0); }
}
#playAllBtn:hover {
    background-color: rgb(113, 212, 0);
    color: black;
}
#playAllBtn.active {
    background-color: rgb(113, 212, 0);
    color: white;
}
#pauseBtn:hover {
    background-color: rgb(0, 162, 255);
}
#pauseBtn.active {
    background-color: rgb(0, 162, 255);
}
#stopBtn:hover {
    background-color: rgb(255, 8, 0);
}
.media-btn#ffBtn:hover, 
.media-btn#rewBtn:hover {
    background-color: rgb(255, 115, 22);
}
#ffBtn.play-flash {
    animation: playFlash 1.0s step-start infinite;
}
#rewBtn.play-flash {
    animation: playFlash 1.0s step-start infinite;
}
#cycleBtn:hover{
    background-color: rgb(255, 196, 0);
}
#cycleBtn.active{
    background-color: rgb(255, 196, 0);
}

/* ============== TRANSPORT ICONS ============= */
#playIcon {
    width: 0;
    height: 0;
    border-left: 18px solid white;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}
#playAllBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    height: 45px;
    width: 45px;
}
#playAllIcon {
    z-index: 1;
    position: relative;
    width: 14px;
    height: 14px;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    background-color: white;
    flex-shrink: 0;
    margin-right: 50%;
    margin-bottom: 35px;
}
#playAllLabel {
    z-index: 2;
    color: white;
    text-align: bottom;
    justify-content: center;
    margin-top: 14px;
    font-weight: bold;
}

#pauseIcon {
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
#pauseIcon::before,
#pauseIcon::after {
    content: '';
    display: block;
    width: 4px;
    height: 20px;
    background: white;
}
#stopIcon {
    width: 21px;
    height: 21px;
    background: white;
}

#rewIcon {
    display: flex;
    justify-content: space-between;
    width: 24px;
    height: 24px;
}
#rewIcon::before,
#rewIcon::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-right: 10px solid white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
#rewIcon::before {
    left: 0;
}
#rewIcon::after {
    left: 10px;
}

#ffIcon {
    display: flex;
    justify-content: space-between;
    width: 24px;
    height: 24px;
}
#ffIcon::before,
#ffIcon::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
#ffIcon::before {
    left: 4px;
}
#ffIcon::after {
    left: 14px;
}
/* CYCLE*/
#cycleBtn:hover {
    background-color: black;
}
#cycleBtn #back {
    z-index: 1;
    width: 16px;
    height: 16px;
    border: 4px solid white;
    border-radius: 4px;
    pointer-events: none;
}
#cycleBtn #arrow {
    z-index: 1;
    pointer-events: none;
    position: relative;
    width: 11px;
    height: 13px;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    background-color: white;
    flex-shrink: 0;
    margin-right: 1px;
    margin-bottom: 14px;
    transform: translate(-10px, -15px);
}



/* ================ Tracklist Base formatting ===============*/
/*MEDIA PLAYER ELEMENT TITLE*/
.tracklist-title {
    width: 100%;
    height: 25px;
    margin-bottom: 2px;
    text-align: center;
    padding: 4px;
    font-weight: bold;
    text-align: center;
}
.cassette-tracklist li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    margin-bottom: 4px;
    margin-top: 2px;
    cursor: pointer;
    transition: background-color 0.2s; 
    border: white 1px;  
}

.track-title {
    flex: 1;
    text-align: left;
    pointer-events: none;
}
.track-time {
    margin-left: 1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

/* ============== ALBUM LIST & SELECTOR BASE FORMATTING =============*/
.album-list li,
.album-selector {
    list-style-type: none;
    cursor: pointer;
    padding: 6px 8px;
}


/* ============================ VU-METERS ========================== */
/*VU Case formatting*/
.vu-container {
    position: relative;
    width: 150px;
    height: 50px;
    overflow: hidden;
    background-color: black;
    border: 2px white solid;
    border-radius: 5px;
    padding: 10px;
}

/*VU Meter Formatting*/
.vu-meters {
    display: flex;
    gap: 8px;
    padding: 8px;
}
.vu-meter {
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: black;
}
/*DIAL FORMATTING*/
.dial {
    position: absolute;
    z-index: 1;
    width: 150px;
    height: 150px;
    border-radius: 50%; 
    background: conic-gradient(
        rgb(204, 204, 204) 55deg 78deg,
        transparent 78deg 80deg,
        rgb(110, 0, 0) 80deg 99deg,
        transparent 99deg 101deg,
        rgb(126, 1, 1) 101deg 109deg,
        transparent 110deg 360deg
    );
    transform: rotate(-55deg);
}
.dial_outline { 
    position: absolute;
    z-index: 2;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border-color: rgb(255, 0, 0);
    border-width: 5px;
    background-color: transparent;
}
.dial_cover { 
    position: absolute;
    z-index: 3;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color:black;
    left: 10px;
    bottom: 10px;
    text-align: center;
    text-transform: capitalize;
}


.dial_text {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    text-align: center;
    text-shadow: 1px 1px rgb(172, 169, 169);
    top: 30px;
    color: rgb(46, 46, 46);
}
.needle {
    z-index: 5;
  width: 2px;
  height: 50%;
  background: red;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: rotate(-55deg); /* rest position */
}
.vu-meter.right .needle {
  background: red;
}