:root {
    --back-gradient: linear-gradient(
      180deg,
      rgba(62, 67, 76, 0.25) 0%,
      rgba(30, 32, 36, 0.25) 100%
    );
    --front-gradient: linear-gradient(
      180deg,
      rgba(49, 56, 61, 0.25) 0%,
      rgba(24, 25, 29, 0.25) 100%
    );
    --header-button-wrapper-gradient: linear-gradient(
      135deg,
      rgba(43, 47, 52, 0.35) 0%,
      rgba(49, 56, 61, 0.35) 100%
    );
    --header-button-wrapper-neu-shadows: 0.2vw 0.2vw 0.7vw #16191b,
      -0.2vw -0.2vw 0.7vw #4c575f;
    --header-pressed-wrapper-gradient: linear-gradient(
      135deg,
      rgba(218, 77, 12, 0.5) 0%,
      rgba(180, 54, 19, 0.5) 100%
    );
    --header-normal-button-front-gradient: linear-gradient(
      135deg,
      rgba(46, 52, 57, 0.5) 0%,
      rgba(27, 30, 34, 0.5) 100%
    );
    --header-pressed-button-front-gradient: linear-gradient(
      135deg,
      rgba(222, 57, 19, 0.5) 0%,
      rgba(234, 81, 14, 0.5) 100%
    );
    --header-pressed-button-inset-shadows: inset 0.75vw 0.75vw 0.75vw
      rgba(0, 0, 0, 0.3);
    --main-cover-wrapper-gradient: linear-gradient(
      135deg,
      rgba(31, 36, 40, 0.5) 0%,
      rgba(22, 23, 25, 0.5) 100%
    );
    --main-cover-neu-shadows: 0.5vw 0.5vw 0.5vw #1a1e20,
      -0.5vw -0.5vw 0.75vw #363e44;
    --slider-track-gradient: linear-gradient(
      90deg,
      rgba(217, 61, 7, 1) 0%,
      rgba(147, 113, 20, 1) 100%
    );

    --controls-normal-button-wrapper-gradient: linear-gradient(
      135deg,
      rgba(32, 37, 41, 0.5) 0%,
      rgba(22, 24, 25, 0.5) 100%
    );
    --controls-button-wrapper-neu-shadows: 0.2vw 0.2vw 0.5vw #16191b,
      -0.2vw -0.2vw 0.5vw #363e44;
    --controls-normal-button-front-gradient: linear-gradient(
      135deg,
      rgba(40, 43, 48, 0.5) 0%,
      rgba(29, 32, 35, 0.5) 100%
    );
    --controls-normal-button-inset-shadows: inset 0 0 0.3vw
      rgba(255, 255, 255, 0.1);
    --controls-pressed-button-wrapper-gradient: linear-gradient(
      135deg,
      rgba(214, 78, 12, 1) 0%,
      rgba(166, 47, 19, 1) 100%
    );
    --controls-pressed-button-front-gradient: linear-gradient(
      135deg,
      rgba(183, 29, 16, 1) 0%,
      rgba(236, 86, 12, 1) 100%
    );
    --controls-pressed-button-inset-shadows: inset 0.75vw 0.75vw 0.75vw
      rgba(0, 0, 0, 0.2);
    --main-icon-text-color: rgba(255, 255, 255, 0.5);
}

div.audio {
    border-radius: 50%;
}

.phone button {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    outline: none;
    border-radius: 50%;
    cursor: pointer;
}

.phone {
    flex: 1;
    max-width: 650px;
    backdrop-filter: blur(2px);
}

.phone.hidden {
  display: none;
}

@media (min-width: 275px) {
    .phone .content .header div,
    .phone .content .visual div,
    .phone .content .catalog .catalog-content .entry-wrapper .entry div {
        display: flex;
        width: 40px;
        height: 40px;
        background: var(--header-button-wrapper-gradient);
        box-shadow: var(--header-button-wrapper-neu-shadows);
        border-radius: 50%;
    }

    .phone .content .header div.pressed,
    .phone .content .visual div.pressed,
    .phone .content .catalog .catalog-content .entry-wrapper .entry div.pressed,
    .phone:nth-of-type(1) .content .header div:nth-of-type(1).shuffle-active {
        background: linear-gradient(
          135deg,
          rgba(218, 77, 12, 1) 0%,
          rgba(180, 54, 19, 1) 100%
        );
    }

    .phone .content .header div button,
    .phone .content .visual div button,
    .phone .content .catalog .catalog-content .entry-wrapper .entry div button {
        margin: auto;
        transform: scale(0.9);
    }

    .phone .content .header div button:active,
    .phone .content .visual div button:active,
    .phone .content .catalog .catalog-content .entry-wrapper .entry div button:active {
        box-shadow: var(--header-pressed-button-inset-shadows);
        transition: all 0.1s ease;
    }

    .phone .content .controls .audio {
        width: 50px;
        height: 50px;
        background: var(--controls-normal-button-wrapper-gradient);
        box-shadow: var(--controls-button-wrapper-neu-shadows);
    }

    .phone .content .controls .audio.pressed {
        background: var(--controls-pressed-button-wrapper-gradient);
    }

    .phone .content .controls .audio button {
        width: 100%;
        height: 100%;
        transform: scale(0.925);
        background: var(--controls-normal-button-front-gradient);
        box-shadow: var(--controls-normal-button-inset-shadows);
        transition: all 0.1s linear;
    }

    .phone .content .controls .audio button:active,
    .phone .content .controls .audio button.pressed {
        box-shadow: var(--controls-pressed-button-inset-shadows);
    }

    .phone .content .controls .audio:nth-of-type(1) {
        /* Inherits base styles from .phone .content .controls .audio */
    }

    .phone .content .controls .audio:nth-of-type(1) button {
        background: url("/uploads/img/button/rewind-grey.svg"), var(--controls-normal-button-front-gradient);
        background-size: 20%, auto;
        background-repeat: no-repeat;
        background-position: 48% 52%, center;
    }

    .phone .content .controls .audio:nth-of-type(1) button:active {
        background: url("/uploads/img/button/rewind-white.svg"), var(--controls-pressed-button-front-gradient);
        background-size: 20%, auto;
        background-repeat: no-repeat;
        background-position: 48% 52%, center;
    }

    .phone .content .controls .audio:nth-of-type(2) {
        width: 75px;
        height: 75px;
    }

    .phone .content .controls .audio:nth-of-type(2) button {
        background: url("/uploads/img/button/play-grey.svg"), var(--controls-normal-button-front-gradient);
        background-size: 20%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
    }

    .phone .content .controls .audio:nth-of-type(2) button:active,
    .phone .content .controls .audio:nth-of-type(2) button.pressed {
        background: url("/uploads/img/button/pause-white.svg"), var(--controls-pressed-button-front-gradient);
        background-size: 20%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
    }

    .phone .content .controls .audio:nth-of-type(3) {
        /* Inherits base styles from .phone .content .controls .audio */
    }

    .phone .content .controls .audio:nth-of-type(3) button {
        background: url("/uploads/img/button/forward-grey.svg"), var(--controls-normal-button-front-gradient);
        background-size: 20%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
    }

    .phone .content .controls .audio:nth-of-type(3) button:active {
        background: url("/uploads/img/button/forward-white.svg"), var(--controls-pressed-button-front-gradient);
        background-size: 20%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
    }

    .phone .content .visual article {
        margin: 5px auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center; 
        position: relative;
        background: var(--main-cover-wrapper-gradient);
        border-radius: 10%;
        box-shadow: var(--main-cover-neu-shadows);
    }

    .phone .content .main article div,
    .phone .content .visual article div {
        border-radius: 10%;
        background: url(/uploads/img/music/album.jpg);
        background-size: cover;
    }

    .phone {
        width: 95%;
        height: 50vh;
        position: relative;
        margin: 10px 0;
        background: var(--back-gradient);
        border-radius: 20px;
        box-shadow: 2vw 2vw 8vw black;
    }

    .phone:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        transform: scale(0.97, 0.985);
        background: var(--front-gradient);
    }

    .phone .content {
        text-align: center;
        width: 100%;
        height: 98.5%;
        position: relative;
        top: 0.75%;
        border-radius: 25px;
        display: grid;
    }

    .phone .content .header {
        grid-area: header;
        display: flex;
        justify-content: space-between;
        align-items: center;
        justify-content: center;
        padding-top: 2vw;
        border-top-left-radius: 19px;
        border-top-right-radius: 19px;
        width: 100%;
    }

    .phone .content .visual {
        left: 7.5%;
    }

    .phone .content .header h1 {
        font-size: 18px;
        width: 50%;
        color: var(--main-icon-text-color);
    }

    .phone.left .content .header div:nth-of-type(1) {
        opacity: 1;
    }

    .phone.right .content .visual div:nth-of-type(2) {
        opacity: 1;
    }

    /* Primary Music Player */
    .phone:nth-of-type(1) {
        margin: auto;
    }

    .phone:nth-of-type(1) .content {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(18, 1fr);
        grid-template-areas:
            "header header header header header header header header"
            "header header header header header header header header"
            "header header header header header header header header"
            "main main main main main main main main"
            "main main main main main main main main"
            "main main main main main main main main"
            "main main main main main main main main"
            "main main main main main main main main"
            "main main main main main main main main"
            "main main main main main main main main"
            "main main main main main main main main"
            "main main main main main main main main"
            "title title title title title title title title"
            " slider slider slider slider slider slider slider slider"
            "controls controls controls controls controls controls controls controls"
            "controls controls controls controls controls controls controls controls"
            "controls controls controls controls controls controls controls controls";
    }

    .phone:nth-of-type(1) .content .header div {
        display: flex;
    }

    .phone:nth-of-type(1) .content .header div:nth-of-type(1) button {
        background: url("/uploads/img/button/shuffle-grey.png"), var(--header-normal-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
    }

    .phone:nth-of-type(1) .content .header div:nth-of-type(1) button:active, 
    .phone:nth-of-type(1) .content .header div:nth-of-type(1) button.pressed {
        background: url("/uploads/img/button/shuffle-white.png"), var(--header-pressed-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
    }

    .phone:nth-of-type(1) .content .header div:nth-of-type(1) button.shuffle-active {
        background: url("/uploads/img/button/shuffle-white.png"), var(--header-pressed-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
        box-shadow: var(--header-pressed-button-inset-shadows);
    }

    .phone:nth-of-type(1) .content .header div:nth-of-type(2) button {
        background: url("/uploads/img/button/menu-grey.svg"), var(--header-normal-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
    }

    .phone:nth-of-type(1) .content .header div:nth-of-type(2) button:active {
        background: url("/uploads/img/button/menu-white.svg"), var(--header-pressed-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
    }

    .phone:nth-of-type(1) .content .main {
        grid-area: main;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        position: relative;
        border-radius: 8px;
    }

    /* Album Cover */
    .phone:nth-of-type(1) .content .main article {
        width: 225px;
        height: 225px;
        margin: 5px auto 0;
        padding-top: 10px;
        transition: width 0.3s ease, height 0.3s ease;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }

    .phone:nth-of-type(1) .content .main article div {
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
        border-radius: 8px;
    }

    .phone:nth-of-type(1) .content .title {
        grid-area: title;
        position: relative;
        margin: 0;
        padding: 0;
        display: none; /* Hidden - song info now displayed in header */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2;
        background: transparent;
        min-height: 0;
    }

    .phone:nth-of-type(1) .content .title h1 {
        width: 100%;
        position: relative;
        color: rgba(255, 255, 255, 0.75);
        font-size: 14px;
        margin: 15px 0 0 0;
        padding: 0;
        text-align: center;
        line-height: 1.3;
    }

    .phone:nth-of-type(1) .content .title h3 {
        width: 100%;
        position: relative;
        color: var(--main-icon-text-color);
        font-size: 10px;
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 1.1;
    }

    /* Waveform Visualizer */
    .jukebox-visualizer-container {
        grid-area: slider;
        width: 92.5%;
        height: 100%;
        position: relative;
        pointer-events: none;
        z-index: 2;
        margin: auto;
    }

    #jukeboxVisualizerCanvas {
        width: 95%;
        height: 100%;
        display: block;
        border-radius: 8px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Time Track Slider */
    .phone:nth-of-type(1) .content .slider {
        grid-area: slider;
        position: relative;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        &#primary {
            height: 110px;
        }
    }

    .phone:nth-of-type(1) .content .slider input[type="range"] {
        appearance: none;
        width: 90%;
        height: 8%;
        background: rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 -1px 2px var(--main-icon-text-color);
        border-radius: 1vw;
        z-index: 2;
        position: relative;
        margin: auto;
    }

    .phone:nth-of-type(1) .content .slider input[type="range"]:focus {
        outline: 0;
    }

    .phone:nth-of-type(1) .content .slider input[type="range"]::-moz-focus-outer {
        outline: 0;
        border: 0;
    }

    .phone:nth-of-type(1) .content .slider input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          orange 0,
          orange 4px,
          #24292d 4px,
          #24292d 8px,
          #212529 8px,
          #212529
        );
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15),
          inset 1px 0 1px rgba(255, 255, 255, 0.08),
          inset -1px 0 1px rgba(255, 255, 255, 0.01),
          inset 0 -1px 1px rgba(0, 0, 0, 0.5),
          5px 5px 5px rgba(0, 0, 0, 0.4);
        background-clip: border-box;
        position: relative;
    }

    .phone:nth-of-type(1) .content .slider input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          orange 0,
          orange 4px,
          #24292d 4px,
          #24292d 8px,
          #212529 8px,
          #212529
        );
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15),
          inset 1px 0 1px rgba(255, 255, 255, 0.08),
          inset -1px 0 1px rgba(255, 255, 255, 0.01),
          inset 0 -1px 1px rgba(0, 0, 0, 0.5),
          5px 5px 5px rgba(0, 0, 0, 0.4);
        background-clip: border-box;
        position: relative;
        border: none;
    }

    /* Slider Timestamp */
    .phone:nth-of-type(1) .content .slider label {
        position: absolute;
        width: 15%;
        height: 20%;
        bottom: -15%;
        color: var(--main-icon-text-color);
        font-size: 15px;
    }

    .phone:nth-of-type(1) .content .slider label#passed {
        left: 3%;
    }

    .phone:nth-of-type(1) .content .slider label#left {
        right: 3%;
    }

    .phone:nth-of-type(1) .content .controls {
        grid-area: controls;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .phone:nth-of-type(1) .content .controls div {
        /* Inherits styles from .phone .content .controls div via %big-button */
    }

    .phone:nth-of-type(2) {
        /* margin: auto; */
    }

    /* Secondary Music Player (List) */
    .phone:nth-of-type(2) .content {
        position: relative;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr 1fr 1fr 1fr repeat(6, 1fr);
        grid-template-areas:
            "header header header header header header header header"
            "visual visual visual visual visual visual visual visual"
            "visual visual visual visual visual visual visual visual"
            "visual visual visual visual visual visual visual visual"
            "catalog catalog catalog catalog catalog catalog catalog catalog"
            "catalog catalog catalog catalog catalog catalog catalog catalog"
            "catalog catalog catalog catalog catalog catalog catalog catalog"
            "catalog catalog catalog catalog catalog catalog catalog catalog"
            "catalog catalog catalog catalog catalog catalog catalog catalog"
            "catalog catalog catalog catalog catalog catalog catalog catalog"
            "catalog catalog catalog catalog catalog catalog catalog catalog";
    }

    .phone:nth-of-type(2) .content .header {
        grid-area: header;
    }

    .phone:nth-of-type(2) .content .visual {
        grid-area: visual;
        width: 87.5%;
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .phone:nth-of-type(2) .content .visual div {
        /* Inherits styles from .phone .content .visual div via %small-button */
    }

    .phone:nth-of-type(2) .content .visual div:nth-of-type(1) {
        transform: translate(12%, -5%);
    }

    .phone:nth-of-type(2) .content .visual div:nth-of-type(2) button {
        background: url("/uploads/img/button/heart-grey.svg"), var(--header-normal-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 48% 52%, center;
    }

    .phone:nth-of-type(2) .content .visual div:nth-of-type(2) button:active {
        background: url("/uploads/img/button/heart-white.svg"), var(--header-pressed-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 48% 52%, center;
    }

    .phone:nth-of-type(2) .content .visual div:nth-of-type(2) button.pressed {
        background: url("/uploads/img/button/heart-white.svg"), var(--header-pressed-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 48% 52%, center;
    }

    .phone:nth-of-type(2) .content .visual div:nth-of-type(2) button.heart-pressed {
        background: url("/uploads/img/button/heart-red.svg"), var(--header-normal-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 48% 52%, center;
    }

    .phone:nth-of-type(2) .content .visual div:nth-of-type(2) button.heart-back {
        background: url("/uploads/img/button/heart-white.svg"), var(--header-pressed-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 48% 52%, center;
    }

    .phone:nth-of-type(2) .content .visual div:nth-of-type(2) {
        transform: translate(-12%, -5%);
    }

    .phone:nth-of-type(2) .content .visual div:nth-of-type(1) button {
        background: url("/uploads/img/button/arrow-left-grey.svg"), var(--header-normal-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 48% 52%, center;
        background-position: 48% 50%, center;
    }

    .phone:nth-of-type(2) .content .visual div:nth-of-type(1) button:active {
        background: url("/uploads/img/button/arrow-left-white.svg"), var(--header-pressed-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 48% 52%, center;
        background-position: 48% 50%, center;
    }

    /* Album Cover (Secondary) */
    .phone:nth-of-type(2) .content .visual article {
        transform: translateY(-5%);
        width: 125px;
        height: 125px;
    }

    .phone:nth-of-type(2) .content .visual article div {
        width: 90%;
        height: 90%;
        box-shadow: none;
        transform: none !important;
    }

    /* Catalogue */
    .phone:nth-of-type(2) .content .catalog {
        grid-area: catalog;
        position: relative;
        display: flex;
        overflow-y: scroll;
    }
    
    .phone:nth-of-type(2) .content .catalog .catalog-content {
        gap: 2.5px;
        margin: auto;
        width: 95%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
    }

    .phone:nth-of-type(2) .content .catalog .catalog-content .entry-wrapper {
        width: 100%;
        height: 35px;
        border-radius: 1.25vw;
        display: flex;
        background: transparent;
        border: none;
    }

    .phone:nth-of-type(2) .content .catalog .catalog-content .entry-wrapper.pressed {
        background: linear-gradient(
          180deg,
          rgba(51, 57, 63, 0.75) 0%,
          rgba(18, 20, 23, 0.75) 100%
        );
    }

    .phone:nth-of-type(2) .content .catalog .catalog-content .entry-wrapper .entry {
        width: 99%;
        height: 95%;
        margin: auto;
        border-radius: 1.25vw;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        justify-items: start;
        align-items: start;
        gap: 0;
        grid-template-areas:
            "title title title . . control"
            "sub sub sub . . control";
        cursor: pointer;
        padding: 2.5px 0px;
        background: transparent;
        border: none;
    }

    .phone:nth-of-type(2) .content .catalog .catalog-content .entry-wrapper .entry.pressed {
        background: linear-gradient(
          135deg,
          rgba(19, 21, 23, 1) 0%,
          rgba(27, 29, 32, 1) 100%
        );
    }

    .phone:nth-of-type(2) .content .catalog .catalog-content .entry-wrapper .entry h1 {
        grid-area: title;
        font-size: 15px;
        margin-top: 1px;
        margin-left: 10%;
        color: rgba(255, 255, 255, 0.8);
        pointer-events: none;
    }

    .phone:nth-of-type(2) .content .catalog .catalog-content .entry-wrapper .entry h3 {
        grid-area: sub;
        text-align: left;
        font-size: 10px;
        margin-top: -12.5px;
        margin-left: 10%;
        color: var(--main-icon-text-color);
        pointer-events: none;
    }

    .phone:nth-of-type(2) .content .catalog .catalog-content .entry-wrapper .entry div {
        grid-area: control;
        transform: translate(20%, 0%);
        width: 27.5px;
        height: 27.5px;
        border-radius: 50%;
    }

    .phone:nth-of-type(2) .content .catalog .catalog-content .entry-wrapper .entry div button {
        background: url("/uploads/img/button/play-grey.svg"), var(--header-normal-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
        background-position: center, center;
    }

    .phone:nth-of-type(2) .content .catalog .catalog-content .entry-wrapper .entry div button.pressed {
        background: url("/uploads/img/button/pause-white.svg"), var(--header-pressed-button-front-gradient);
        background-size: 30%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
        background-position: center, center;
    }

    .phone:nth-of-type(2):after {
        content: "";
        width: 99%;
        height: 15%;
        background: linear-gradient(to top, rgba(28, 30, 34, 1), transparent);
        position: absolute;
        left: 0.5%;
        bottom: 0;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        pointer-events: none;
    }

    /* --- Mini Music Player --- */
    .phone.mini {
        position: fixed;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%) scale(1);
        width: 75vw;
        max-height: 215px;
        max-width: 550px;
        margin: 0;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
        z-index: 2500;
    }

    .phone.mini::before {
        transform: scale(0.975, 0.95);
    }

    .phone.mini .content .main {
        display: none;
    }

    .phone.mini.music-player-hidden {
        opacity: 0;
        transform: translateX(-50%) scale(0.01);
        pointer-events: none;
        visibility: hidden;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    }

    .phone.mini .content {
        grid-template-rows: 1.5fr 1.5fr 3fr;
        grid-template-areas:
            "header header header header header header header header"
            "slider slider slider slider slider slider slider slider"
            "controls controls controls controls controls controls controls controls";
        padding-bottom: 10px;
    }

    .phone.mini .content .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        padding-top: 15px;
        margin-bottom: 5px;
        width: 90%;
    }

    .phone.mini .content .header div {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

    .phone.mini .content .header div button {
        transform: scale(0.8);
    }

    /* --- Header Button --- */
    .phone.mini .content .header div:nth-of-type(1) button,
    .phone.mini .content .header div:nth-of-type(1) button.pressed {
        background: url("/uploads/img/button/shuffle-grey.png"), var(--header-normal-button-front-gradient);
        background-size: 40%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
    }

    .phone.mini .content .header div:nth-of-type(1) button:active,
    .phone.mini .content .header div:nth-of-type(1) button.shuffle-active {
        background: url("/uploads/img/button/shuffle-white.png"), var(--header-pressed-button-front-gradient);
        background-size: 40%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
        box-shadow: var(--header-pressed-button-inset-shadows);
    }

    .phone.mini .content .header a div.audio button {
        background: url("/uploads/img/button/menu-grey.svg"), var(--header-normal-button-front-gradient);
        background-size: 40%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
    }

    .phone.mini .content .header a div.audio button:active {
        background: url("/uploads/img/button/menu-white.svg"), var(--header-pressed-button-front-gradient);
        background-size: 40%, auto;
        background-repeat: no-repeat;
        background-position: 50% 52%, center;
        box-shadow: var(--header-pressed-button-inset-shadows);
    }

    .phone.mini .content .header a {
        background-color: transparent;
        text-decoration: none;
        display: inline-block;
    }

    .phone.mini .content .title {
        flex-grow: 1;
        text-align: center;
        margin-left: 5px;
        margin-right: 5px;
        position: relative;
        height: 100%;
        display: flex; /* Show title area for mini player */
        flex-direction: column;
        justify-content: center;
    }
    .phone.mini .content .title h1 {
        font-size: 16px;
        margin: 0;
    }

    .phone.mini .content .title h3 {
        font-size: 12px;
        margin: 2px 0 0 0;
        position: static;
    }

    /* Mini Player Visualizer */
    .mini-player-visualizer {
        grid-area: slider;
        width: 94%;
        height: 50px !important;
        margin: 0 auto;
        position: relative;
        padding: 8px 0;
    }

    #miniJukeboxVisualizerCanvas {
        width: 100%;
        height: 50%;
        position: absolute;
        left: 0;
        right: 0;
        transform: none;
        border-radius: 8px;
        z-index: 1;
    }

    .phone.mini .content .slider {
        position: relative;
        z-index: 2;
        padding: 0 3%;
    }

    #jukeboxVisualizerCanvas#mini {
        width: 95%;
        height: 25px;
        display: block;
    }

    /* Mini Player Slider */
    .phone.mini .content .slider {
    }
    .phone.mini .content .slider input[type="range"] {
        appearance: none;
        width: 90%;
        height: 4%;
        background: black;
        box-shadow: inset 0 -1px 2px var(--main-icon-text-color);
        border-radius: 20px;
        padding: 0;
    }

    .phone.mini .content .slider input[type="range"]::-webkit-slider-thumb {
        width: 15px;
        height: 15px;
    }

    .phone.mini .content .slider input[type="range"]::-moz-range-thumb {
        width: 10px;
        height: 10px;
    }

    /* Timestamp Track */
    .phone.mini .content .slider label {
        font-size: 12px;
        bottom: -25%;
    }

    .phone.mini .content .controls div {
        width: 40px;
        height: 40px;
        transform: translateY(0);
    }

    .phone.mini .content .controls div:nth-of-type(2) {
        width: 50px;
        height: 50px;
    }

    .phone.mini .content .controls div button {
        background-size: 35%, auto !important;
    }
}