body.ocean {
    background: radial-gradient(circle 30vw at center, var(--babyblue), var(--oceanblue));
}

.main {
    overflow-x: hidden !important;
}

:root {
    --track: #888888;
    --thumb: #FFFFFF;

    /* GLOBAL UI CONTROLLERS FOR MUSIC CARDS
       Use vw (not %) so every element shifts by the same amount.
       NOTE: the desktop block below uses fixed positions and does not apply these. */
    --ui_x_controller: -3vw;  /* shift everything horizontally (+ or -) */
    --ui_y_controller: 0vw;   /* shift everything vertically (+ or -) */

    /* STAR CONTROLLERS */
    --star-scale: 2.0;       /* overall star size multiplier */
    --star-gap-y: 9vw;       /* vertical distance between each star row */
    --star-start-y: 40vw;    /* how far above the first card the stars begin (behind logo/header) */

    /* PLAY BUTTON ICON */
    --play-icon-color: var(--yellow);  /* color of the triangle / pause bars */
    --play-icon-size: 55%;             /* icon size relative to the button */

    /* REMIX BUTTON */
    --remix-active-color: var(--yellow);   /* button color while on the remix ("ORIGINAL" shown) */
    --remix-active-text: black;            /* text color while active */

    /* ---------- VOLUME POPUP CONTROLS (mobile / default values) ----------
       Desktop overrides live in the @media (min-width:850px) block at the bottom. */
    --volume-popup-image: url('../assets/music/volume_bg.webp');
    --volume-popup-color: rgba(0, 0, 0, 0);     /* use transparent if your image covers everything */

    /* Background image (volume_bg.webp): sized and positioned independently of the popup box,
       so it can be bigger/smaller than the box and shifted around. */
    --volume-bg-width: 100%;         /* image width  (100% = same as the popup box, or e.g. 14vw) */
    --volume-bg-height: 100%;        /* image height (100% = same as the popup box, or e.g. 30vw) */
    --volume-bg-x: 0vw;              /* shift image horizontally from centered (+ = right, - = left) */
    --volume-bg-y: 0vw;              /* shift image vertically from centered (+ = down, - = up) */

    --volume-popup-width: 10vw;      /* width of the popup box */
    --volume-popup-height: auto;     /* height of the popup box ("auto" = fit the content, or e.g. 30vw) */
    --volume-popup-x: 20vw;         /* horizontal position (+ = right, - = left) */
    --volume-popup-y: 24vw;          /* vertical position (+ = down, - = up) */
    --volume-popup-radius: 5vw;      /* corner roundness */
    --volume-popup-padding: 2vw;     /* space above the number / below the slider */
    --volume-popup-gap: 1.5vw;       /* space between the number and the slider */
    --volume-value-size: 2.5vw;      /* font size of the volume number */
    --volume-slider-length: 20vw;    /* how tall the slider is */
    --volume-slider-thickness: 3vw;  /* width of the slider's clickable area (keep >= thumb size) */
    --volume-track-thickness: 1.5vw; /* thickness of the grey bar */
    --volume-thumb-size: 3vw;        /* diameter of the round thumb */

    /* TRACK SLIDER (used by both Chrome/Safari and Firefox styles) */
    --track-thickness: 1.5vw;        /* thickness of the grey bar */
    --track-thumb-size: 3vw;         /* diameter of the round thumb */

    /* TIMESTAMP */
    --time-color: #FFFFFF;
    --time-size: 2.5vw;
    --time-y: 49vw;          /* vertical position; the slider itself sits at 46vw */

    /* REMIX BUTTON SHAPE (em = scales with the button's text size) */
    --remix-pad-x: 0.9em;       /* yellow space left/right of the text */
    --remix-pad-y: 0.6em;       /* yellow space above/below the text */
    --remix-text-nudge: 0em;    /* + moves the text down inside the yellow, - moves it up */
}

.page_text {
    width: 85vw;
    height: 60vw;
    margin: 20px auto 0;

    background-image: url("../assets/music/music_text_M.webp");
    background-size: 100% 100%;
    background-position: center;
    transform: translateY(2vw);
    background-repeat: no-repeat;
    z-index: 5;
}

.music-grid-container {
    top: -4vw;
    position: relative;
    isolation: isolate;      /* keeps the stars' z-index contained in this section */
    width: 100%;
    align-self: stretch;
    transform: translateY(50px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* General absolute positioning helper */
.abs {
    position: absolute;
}

/* ---------- Play / Pause button ---------- */
.play-btn {
    position: absolute;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 9vw;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(calc(14vw + var(--ui_x_controller)), calc(44vw + var(--ui_y_controller)));
    z-index: 5;
}

.play-icon {
    position: relative;
    display: block;
    width: var(--play-icon-size);
    aspect-ratio: 1 / 1;
    transform: translateX(8%);                 /* optically centers the triangle */
    transition: transform 0.25s ease;
}

.play-half {
    position: absolute;
    inset: 0;                                  /* both halves fill the icon box */
    background: var(--play-icon-color);
    transition: clip-path 0.25s ease;
}

/* PLAY state: the two halves together form a triangle.
   They overlap by 20% (x = 40% to 60%) and their slanted edges sit on the
   same lines, so no hairline seam can show between them. */
.play-half.left {
    clip-path: polygon(0% 0%, 60% 30%, 60% 70%, 0% 100%);
}

.play-half.right {
    clip-path: polygon(40% 20%, 100% 50%, 100% 50%, 40% 80%);
}

/* PAUSE state: the halves become two vertical bars */
.play-btn.playing .play-icon {
    transform: translateX(0);
}

.play-btn.playing .play-half.left {
    clip-path: polygon(5% 0%, 38% 0%, 38% 100%, 5% 100%);
}

.play-btn.playing .play-half.right {
    clip-path: polygon(62% 0%, 95% 0%, 95% 100%, 62% 100%);
}

/* Stars: height comes from the card grid, so the last card controls scroll length */
.star_container {
    position: absolute;
    top: calc(var(--star-start-y) * -1);  /* extends upward only, never adds scroll length */
    bottom: 0;                            /* bottom edge = bottom of the last card */
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
    overflow: clip;                       /* stars past the last card are cut off */
}

.star {
    position: absolute;
    top: calc(var(--row) * var(--star-gap-y));
    will-change: transform;
    width: calc(var(--base-width) * var(--star-scale));
}

.music-cover {
    width: 25vw;
    transform: translate(calc(3vw + var(--ui_x_controller)), calc(3vw + var(--ui_y_controller)));
    z-index: 5;
}

/* Use the separate `translate` property so these nudges STACK with the
   .music-cover transform instead of replacing it. */
.cover_4 {
    translate: 0 -2vw;
}

.cover_8 {
    translate: 0 -3vw;
}

.music-desc {
    width: 50vw;
    transform: translate(calc(58% + var(--ui_x_controller)), calc(5% + var(--ui_y_controller)));
}

.music-title {
    width: 80vw;
    transform: translate(calc(15vw + var(--ui_x_controller)), calc(18vw + var(--ui_y_controller)));
    z-index: 4;
}

.play-background {
    width: 17vw;
    transform: translate(calc(60% + var(--ui_x_controller)), calc(325% + var(--ui_y_controller)));
    z-index: 4;
}

.player-background {
    width: 65vw;
    transform: translate(calc(53% + var(--ui_x_controller)), calc(315% + var(--ui_y_controller)));
    z-index: 4;
}

.music-card {
    z-index: 4;
    height: 60vw;
    width: 100%;
    position: relative;
}

/* ---------- Remix button ---------- */
.remix-toggle {
    position: absolute;
    display: block;
    box-sizing: border-box;
    margin: 0;
    /* the padding is the yellow space around the text; the nudge shifts the text up/down inside it */
    padding: calc(var(--remix-pad-y) + var(--remix-text-nudge)) var(--remix-pad-x) calc(var(--remix-pad-y) - var(--remix-text-nudge));
    font-size: 2.2vw;
    line-height: 1;              /* same line height on every device */
    text-align: center;
    white-space: nowrap;
    font-family: 'Grobold', sans-serif;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;

    transform: translate(calc(80vw + var(--ui_x_controller)), calc(13vw + var(--ui_y_controller)));
    z-index: 7;
    color: black;
    transition: color 0.2s ease;
}

/* the skewed yellow shape fills exactly the button box, so it is always centered on the text */
.remix-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--yellow);
    transform: skew(-15deg);
    z-index: -1;
    transition: background-color 0.2s ease;
}

/* Active state: the remix is playing, so the button offers "ORIGINAL" */
.remix-toggle.active {
    color: var(--remix-active-text);
}

.remix-toggle.active::before {
    background-color: var(--remix-active-color);
}

.volume-btn {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer; /* Makes it clickable */

    /* Hooked into global controllers and given a high z-index so it doesn't get blocked */
    transform: translate(calc(1vw + var(--ui_x_controller)), calc(50vw + var(--ui_y_controller)));
    z-index: 6;
}

.volume-img {
    width: 9vw;
    display: none;                 /* hidden on mobile; shown on desktop below */
}

/* ---------- Volume popup ---------- */
.volume-popup {
    position: absolute;            /* needed for top/left, z-index and the ::before layer */
    top: 0;
    left: 3vw;
    display: none;                 /* hidden until the volume button is clicked */
    flex-direction: column;
    align-items: center;
    gap: var(--volume-popup-gap);
    width: var(--volume-popup-width);
    height: var(--volume-popup-height);
    padding: var(--volume-popup-padding) 0;
    box-sizing: border-box;        /* so a fixed height includes the padding */

    /* Solid color behind everything (the image itself is the ::before layer below) */
    background-color: var(--volume-popup-color);
    border-radius: var(--volume-popup-radius);

    /* Position is controlled by --volume-popup-x / --volume-popup-y (plus the global UI controllers) */
    transform: translate(calc(var(--volume-popup-x) + var(--ui_x_controller)), calc(var(--volume-popup-y) + var(--ui_y_controller)));
    z-index: 8;
}

/* Popup stays hidden on mobile on purpose (phones use the device volume).
   It becomes display:flex on desktop in the media query below. */
.volume-popup.open {
    display: none;
}

/* The volume_bg.webp image layer: sits behind the number + slider, and is sized and
   positioned by --volume-bg-width / --volume-bg-height / --volume-bg-x / --volume-bg-y.
   Because it's its own layer, it can extend past the edges of the popup box. */
.volume-popup::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--volume-bg-width);
    height: var(--volume-bg-height);
    transform: translate(calc(-50% + var(--volume-bg-x)), calc(-50% + var(--volume-bg-y)));
    background-image: var(--volume-popup-image);
    background-size: 100% 100%;    /* stretches the image to fill this layer */
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--volume-popup-radius);
    z-index: -1;                   /* behind the number and slider */
    pointer-events: none;
}

.volume-value {
    color: white;
    font-family: 'Grobold', sans-serif;
    font-size: var(--volume-value-size);
    line-height: 1;
}

.volume-slider {
    flex-shrink: 0;                /* IMPORTANT: stops the popup's fixed height from squashing the slider */
    writing-mode: vertical-lr;     /* makes the slider vertical */
    direction: rtl;                /* bottom = 0, top = 100 */
    width: var(--volume-slider-thickness);
    height: var(--volume-slider-length);
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.volume-slider::-webkit-slider-runnable-track {
    width: var(--volume-track-thickness);
    height: 100%;
    background: var(--track);
    border-radius: 10px;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--volume-thumb-size);
    height: var(--volume-thumb-size);
    /* centers the thumb on the track, whatever the two sizes are */
    margin-left: calc((var(--volume-track-thickness) - var(--volume-thumb-size)) / 2);
    background: var(--thumb);
    border-radius: 50%;
    cursor: pointer;
}

.volume-slider::-moz-range-track {
    width: var(--volume-track-thickness);
    background: var(--track);
    border-radius: 10px;
}

.volume-slider::-moz-range-thumb {
    width: var(--volume-thumb-size);
    height: var(--volume-thumb-size);
    background: var(--thumb);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* Track Slider Custom Styling
   Chrome/Safari and Firefox now share the same --track-* variables,
   so both scale the same way and get the same desktop overrides. */
.track-slider {
    width: 55vw;
    transform: translate(calc(65% + var(--ui_x_controller)), calc(46vw + var(--ui_y_controller)));
    z-index: 5;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.track-slider::-webkit-slider-runnable-track {
    height: var(--track-thickness);
    background: var(--track);
    border-radius: 10px;
}

.track-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--track-thumb-size);
    height: var(--track-thumb-size);
    background: var(--thumb);
    border-radius: 50%;
    /* centers the thumb on the track: (track - thumb) / 2 */
    margin-top: calc((var(--track-thickness) - var(--track-thumb-size)) / 2);
    cursor: pointer;
}

.track-slider::-moz-range-track {
    height: var(--track-thickness);
    background: var(--track);
    border-radius: 10px;
}

.track-slider::-moz-range-thumb {
    width: var(--track-thumb-size);
    height: var(--track-thumb-size);
    background: var(--thumb);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* ---------- Timestamp (bottom left of the track slider) ---------- */
.track-time {
    width: 30vw;                   /* same x position as the slider, so it lines up with its left edge */
    text-align: left;
    font-family: 'Grobold', sans-serif;
    font-size: var(--time-size);
    line-height: 1;
    color: var(--time-color);
    pointer-events: none;          /* never blocks clicks on the slider */
    transform: translate(calc(120% + var(--ui_x_controller)), calc(var(--time-y) + var(--ui_y_controller)));
    z-index: 5;
}

/* ---------- Footer ---------- */
.footer {
    top: 15vw;
    padding-bottom: 3vw;
    display: block;          /* removes the small gap inline images leave underneath */
    justify-self: center;    /* centers it in the grid row (replaces stretch, since the width is now fixed) */
    width: 45vw;
    height: auto;
    position: relative;      /* keeps the footer above the star layer */
    z-index: 5;
}

@media (min-width: 850px) {
    .footer {
        width: 20vw;
    }

    .volume-img {
        display: block;
    }

    .volume-popup.open {
        display: flex;
    }

    /* ---------- DESKTOP VOLUME POPUP CONTROLS ----------
       Same variables as the :root block above; anything listed here
       overrides the mobile value on desktop. Add any other
       --volume-* variable here to change it on desktop only. */
    :root {
        /* Desktop background image (volume_bg.webp) size + position */
        --volume-bg-width: 120%;
        --volume-bg-height: 180%;
        --volume-bg-x: 0vw;
        --volume-bg-y: 3vw;

        --volume-popup-width: 4vw;
        --volume-popup-height: 7vw;
        --volume-popup-x: 43.5vw;
        --volume-popup-y: 6.5vw;
        --volume-slider-thickness: 2vw;   /* must be >= thumb size (1.5vw) or the thumb gets clipped */

        --volume-slider-length: 8vw;
        --volume-track-thickness: 0.8vw;
        --volume-thumb-size: 1.5vw;
        --volume-value-size: 1.2vw;
        --volume-popup-padding: 1vw;
        --volume-popup-gap: 0.8vw;

        /* Desktop track slider (applies to Chrome, Safari AND Firefox) */
        --track-thickness: 0.7vw;
        --track-thumb-size: 1.2vw;

        --star-scale: 1;
    }

    .music-card {
        height: 29vw;
    }

    .music-cover {
        width: 20vw;
        transform: translate(5vw, 3vw);
    }

    .music-desc {
        width: 28vw;
        transform: translate(15vw, 15vw);
    }

    .music-title {
        width: 35vw;
        transform: translate(32vw, 2vw);
    }

    .player-background {
        width: 28vw;
        transform: translate(58vw, 16vw);
    }

    .play-background {
        width: 9vw;
        transform: translate(47.5vw, 16vw);
    }

    .play-btn {
        width: 5vw;
        transform: translate(50vw, 17vw);
    }

    .remix-toggle {
        font-size: 1.5vw;
        transform: translate(72vw, 9vw);
        --remix-pad-x: 1.7em;     /* matches your old -30px sides */
        --remix-pad-y: 0.5em;     /* matches your old -10px top/bottom */
    }

    .volume-img {
        width: 6vw;
    }

    .volume-btn {
        transform: translate(43vw, 20vw);
    }

    .track-slider {
        width: 25vw;
        transform: translate(59vw, 18.2vw);
    }

    .track-time {
        font-size: 1vw;
        transform: translate(60vw, 19.5vw);
    }

    .page_text {
        width: 40vw;
        height: 20vw;
        background-image: url("../assets/music/music_text.webp");
        margin-bottom: 3vw;
    }
}