*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:#111;

    color:#fff;

}

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

.player{

    width:420px;

    max-width:95%;

    margin:25px auto;

    padding:25px;

    background:#1a1a1a;

    border-radius:18px;

    border:1px solid #2f2f2f;

    box-shadow:
        0 0 30px rgba(0,0,0,.45);

    text-align:center;

}

/*=======================================================
  LOGO
=======================================================*/

.logoBox{

    margin-bottom:10px;

}

#stationLogo{

    width:450px;

    max-width:95%;

    height:auto;

    user-select:none;

}

/*=======================================================
  OKŁADKA
=======================================================*/

.coverBox{

    width:120px;

    height:120px;

    margin:0 auto 20px auto;

    border-radius:14px;

    overflow:hidden;

    background:#222;

    border:2px solid #333;

}

#cover{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        opacity .25s ease,
        transform .25s ease;

}

/* animacja zmiany okładki */

.coverHide{

    opacity:0;

    transform:scale(.96);

}



#modeLabel{

    font-size:15px;

    font-weight:700;

    color:#ffb000;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:10px;

    min-height:20px;

}

/*=======================================================
  WYKONAWCA
=======================================================*/

#artist{

    font-size:22px;

    font-weight:700;

    line-height:1.3;

    color:#f89c1c;

    margin-bottom:8px;

    word-break:break-word;

}

/*=======================================================
  TYTUŁ
=======================================================*/

#title{

    font-size:17px;

    color:#ffb43d;

    line-height:1.4;

    min-height:24px;

    margin-bottom:18px;

    word-break:break-word;

}

/*=======================================================
  LIVE
=======================================================*/

.liveBox{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin:12px 0;

    font-size:15px;

    font-weight:700;

    color:#ff4040;

    letter-spacing:1px;

}

.liveDot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#ff2020;

    animation:liveBlink 1s infinite;

}

@keyframes liveBlink{

    0%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.25;

        transform:scale(.7);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

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

.controls{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:25px 0 18px;

}

/*=======================================================
  PLAY BUTTON
=======================================================*/

#playButton{

    width:78px;

    height:78px;

    border:none;

    border-radius:50%;

    background:#f89c1c;

    cursor:pointer;

    transition:
        transform .15s ease,
        background .2s ease,
        box-shadow .2s ease;

    box-shadow:
        0 0 18px rgba(248,156,28,.45);

}

#playButton:hover{

    transform:scale(1.05);

    background:#ffb43d;

}

#playButton:active{

    transform:scale(.95);

}

#playButton svg{

    width:34px;

    height:34px;

    fill:#fff;

}

/*=======================================================
  VOLUME
=======================================================*/

.volumeBox{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:18px;

}

.speaker{

    font-size:22px;

    user-select:none;

}

#volume{

    flex:1;

    cursor:pointer;

    accent-color:#e53935;

}

/* Firefox */

#volume::-moz-range-track{

    height:6px;

    background:#444;

    border-radius:4px;

}

#volume::-moz-range-thumb{

    width:16px;

    height:16px;

    border:none;

    border-radius:50%;

    background:#ffffff;

}

/* Chrome / Edge */

#volume::-webkit-slider-runnable-track{

    height:6px;

    background:#444;

    border-radius:4px;

}

#volume::-webkit-slider-thumb{

    appearance:none;

    width:16px;

    height:16px;

    margin-top:-5px;

    border-radius:50%;

    background:#fff;

    cursor:pointer;

}

/*=======================================================
  STATUS
=======================================================*/

#status{

    margin-top:18px;

    min-height:20px;

    font-size:14px;

    color:#a8a8a8;

    letter-spacing:.5px;

}
/*=======================================================
  VU METER
=======================================================*/

.vuContainer{

    margin:18px 0;

}

#vuLeft,
#vuRight{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:3px;

    margin:6px 0;

    height:18px;

}

/*=======================================================
  SEGMENT
=======================================================*/

.vuBar{

    width:10px;

    height:16px;

    border-radius:2px;

    background:#262626;

    transition:
        background .05s linear,
        transform .05s linear;

}

/*=======================================================
  ACTIVE
=======================================================*/

.green{

    background:#00d84a;

}

.yellow{

    background:#ffd400;

}

.red{

    background:#ff3030;

}

/*=======================================================
  OPTIONAL PEAK
=======================================================*/

.peak{

    border:1px solid #ffffff;

    background:#ffffff !important;

}

/*=======================================================
  HOVER
=======================================================*/

#cover:hover{

    transform:scale(1.02);

}

#stationLogo{

    transition:transform .25s ease;

}

#stationLogo:hover{

    transform:scale(1.02);

}

/*=======================================================
  MOBILE
=======================================================*/

@media (max-width:640px){

.player{

    width:96%;

    padding:18px;

}

.vuContainer{

    display:none;

}

.volumeBox{

    display:none;

}


#stationLogo{

    width:320px;

}

.coverBox{

    width:50px;

    height:50px;

}

.stationName{

    font-size:22px;

}

#artist{

    font-size:20px;

}

#title{

    font-size:16px;

}

#playButton{

    width:48px;

    height:48px;

}

#playButton svg{

    width:20px;

    height:20px;

}

.vuBar{

    width:8px;

    height:14px;

}

}

/*=======================================================
  SMALL PHONE
=======================================================*/

@media (max-width:420px){

.coverBox{

    width:180px;

    height:180px;

}

.stationName{

    font-size:20px;

}

#artist{

    font-size:18px;

}

#title{

    font-size:15px;

}

.liveBox{

    font-size:13px;

}

#status{

    font-size:12px;

}

.vuBar{

    width:7px;

    height:12px;

}

}

/*=======================================================
  SELECTION
=======================================================*/

::selection{

    background:#e53935;

    color:#fff;

}

/*=======================================================
  TOUCH DEVICES
=======================================================*/

@media (hover: none) and (pointer: coarse) {

    .vuContainer{

        display:none;

    }

    .volumeBox{

        display:none;

    }

    .controls{

        margin-top:10px;

    }

}