/*
===============================================================================
ORCAUNIVERSAL MUSIC ARTIST
Unified V1 responsive stylesheet
-------------------------------------------------------------------------------
Replaces:
    Music_Desktop/Grid_CSS.css
    Music_Desktop/songRatingForm.css

Design goals:
    • Keep the existing V1 markup and JavaScript contract intact.
    • Keep artist-selectable LEFT / CENTER / RIGHT layouts.
    • Keep custom themes, colors, panoramas and extras backgrounds.
    • Keep collapsible News / Videos / Pics behavior.
    • Preserve the desktop composition while adapting it for tablets/phones.
    • Refresh spacing, surfaces, typography, controls and scrolling.
===============================================================================
*/


/* ==========================================================================
   01 — BASE / RESET
   ========================================================================== */

:root {
    color-scheme: dark;
    --ou-radius-sm: 6px;
    --ou-radius-md: 10px;
    --ou-radius-lg: 14px;
    --ou-gap: clamp(5px, 0.65vw, 10px);
    --ou-shadow:
        0 10px 30px rgba(0, 0, 0, 0.28);
    --ou-shadow-deep:
        0 18px 55px rgba(0, 0, 0, 0.42);
    --ou-panel:
        rgba(0, 0, 0, 0.14);
    --ou-panel-strong:
        rgba(0, 0, 0, 0.28);
    --ou-hairline:
        rgba(255, 255, 255, 0.10);
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    scroll-behavior: smooth;
}


body {
    width: 100%;
    min-width: 0;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    overflow: hidden;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.45;
    text-rendering: optimizeLegibility;
}


button,
input,
select,
textarea {
    font: inherit;
}


img,
video,
iframe,
canvas,
svg {
    max-width: 100%;
}


img {
    height: auto;
}


a:link,
a:visited {
    color: silver;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}


a:link:active,
a:visited:active {
    color: gray;
}



/* ==========================================================================
   02 — PAGE SHELL
   ========================================================================== */

#artistPage {
    width: 100%;
    height: 100dvh;
    min-height: 0;

    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;

    overflow: hidden;
}


/*
    V1 historically used ".container { width:100vh; }".
    Support both the class and the actual #container id, but size by width.
*/

.container,
#container {
    position: relative;

    width: min(100%, 1680px);
    min-width: 0;
    height: 100%;
    min-height: 0;

    margin: 0 auto;
    padding: 4px 6px;

    overflow: hidden;
}


.footer,
#footer {
    width: min(calc(100% - 12px), 1668px);
    min-height: 28px;
    height: auto;

    margin: 3px auto 2px;
    padding: 2px 7px;

    overflow: hidden;

    border-radius: var(--ou-radius-md);
    box-shadow: var(--ou-shadow);
}



#versionBadge {
    position: absolute;
    z-index: 20;

    top: 7px;
    left: 10px;

    color: rgb(25, 25, 25);

    font-size: 10px;
    line-height: 1;

    pointer-events: none;
}


/* ==========================================================================
   03 — SHARED V1 LAYOUT SURFACES
   ========================================================================== */

.center,
.left,
.right {
    display: none;

    width: 100%;
    min-width: 0;

    gap: var(--ou-gap);

    /*
        The existing JS turns the selected layout to display:grid.
        These dimensions are therefore ready before showLayout() runs.
    */
    min-height: 0;
    height: 100%;
}


.center > div,
.left > div,
.right > div {
    min-width: 0;
    min-height: 0;
    text-align: center;
}


/*
    music_desktop.js applies theme colors/borders inline.
    We leave those colors alone and only modernize shape/depth.
*/

.childBox {
    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-radius: var(--ou-radius-md) !important;

    box-shadow: var(--ou-shadow);

    transition:
        opacity 160ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}


/*
    The theme JS sets 2px margins and padding on every childBox.
    Let CSS own the spacing so the grid gap stays consistent.
*/

.center > .childBox,
.left > .childBox,
.right > .childBox {
    margin: 0 !important;
    padding: 2px !important;
}



/* ==========================================================================
   04 — CENTER LAYOUT
   ========================================================================== */

/*
    V1 concept:
        panorama | cover stack | panorama
        songs    | cover stack | extras
*/

.center {
    grid-template-columns:
        minmax(300px, 1.15fr)
        minmax(240px, 0.82fr)
        minmax(300px, 1.15fr);

    grid-template-rows:
        clamp(68px, 9dvh, 92px)
        minmax(0, 1fr);

    height: 100%;
}


.panoramaLC {
    grid-column: 1;
    grid-row: 1;
}


.songsC {
    grid-column: 1;
    grid-row: 2;
}


.coverStackC {
    grid-column: 2;
    grid-row: 1 / span 2;
}


.panoramaRC {
    grid-column: 3;
    grid-row: 1;
}


.extrasC {
    grid-column: 3;
    grid-row: 2;
}



/* ==========================================================================
   05 — LEFT LAYOUT
   ========================================================================== */

/*
    V1 concept:
        cover | panorama --------
        cover | songs    | extras
*/

.left {
    grid-template-columns:
        minmax(240px, 0.82fr)
        minmax(320px, 1.15fr)
        minmax(320px, 1.15fr);

    grid-template-rows:
        clamp(68px, 9dvh, 92px)
        minmax(0, 1fr);

    height: 100%;
}


.coverStackL {
    grid-column: 1;
    grid-row: 1 / span 2;
}


.panoramaL {
    grid-column: 2 / span 2;
    grid-row: 1;
}


.songsL {
    grid-column: 2;
    grid-row: 2;
}


.extrasL {
    grid-column: 3;
    grid-row: 2;
}



/* ==========================================================================
   06 — RIGHT LAYOUT
   ========================================================================== */

/*
    V1 concept:
        -------- panorama | cover
        extras | songs    | cover
*/

.right {
    grid-template-columns:
        minmax(320px, 1.15fr)
        minmax(320px, 1.15fr)
        minmax(240px, 0.82fr);

    grid-template-rows:
        clamp(68px, 9dvh, 92px)
        minmax(0, 1fr);

    height: 100%;
}


.panoramaR {
    grid-column: 1 / span 2;
    grid-row: 1;
}


.extrasR {
    grid-column: 1;
    grid-row: 2;
}


.songsR {
    grid-column: 2;
    grid-row: 2;
}


.coverStackR {
    grid-column: 3;
    grid-row: 1 / span 2;
}



/* ==========================================================================
   07 — PANORAMAS / THEME IMAGES
   ========================================================================== */

.panoramaLC,
.panoramaRC,
.panoramaL,
.panoramaR {
    position: relative;

    overflow: hidden;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    box-shadow: var(--ou-shadow-deep);
}


/*
    Prevent custom/theme images from becoming visually flat on giant screens.
    No overlay is added here because the artist image itself is part of the
    customization and should remain visually dominant.
*/



/* ==========================================================================
   08 — COVER STACK
   ========================================================================== */

.coverStackC,
.coverStackL,
.coverStackR {
    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.28)
        transparent;
}


#coverStackI {
    width: 100%;
    min-width: 0;
    padding: clamp(4px, 0.6vw, 10px);
}


#coverStackI img,
.projectPic {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;

    border-radius: var(--ou-radius-sm);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.28);
}


.projectBox {
    width: min(150px, 100%);
    height: auto;
    aspect-ratio: 1;
    margin-inline: auto;
    text-align: center;
}


.projectName {
    display: none;

    padding: 5px;

    border: 1px solid black;
    border-radius: var(--ou-radius-sm);

    background-color: black;

    font-size: clamp(24px, 2.2vw, 36px);
    line-height: 1.1;
    vertical-align: middle;
}


.centerMe {
    vertical-align: middle;
}



/* ==========================================================================
   09 — SONG PLAYER / SONG LIST
   ========================================================================== */

.songsC,
.songsL,
.songsR {
    overflow: hidden;
}


#playerTab {
    width: 100%;
    min-width: 0;
    height: 100%;
}


#musicplayer {
    width: 100%;
    min-width: 0;
}


#musiclist {
    width: 100%;
    min-width: 0;

    /*
        Use the available panel rather than assuming a fixed 65vh.
        The audio/player area remains above it.
    */
    height: min(65dvh, calc(100% - 88px));
    min-height: 220px;

    padding:
        10px
        clamp(4px, 0.65vw, 10px)
        12px;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.30)
        transparent;

    -webkit-overflow-scrolling: touch;
}


#myAudio {
    display: block;

    width: 100%;
    min-width: 100%;
    max-width: 100%;
}


#playControl {
    display: none;

    position: absolute;
    z-index: 900;
}


.musicBox {
    margin-bottom: 7px;
}


.musicRow {
    display: inline;
    cursor: pointer;
}


.musicNum {
    display: inline;
}


#activePlayListButton {
    display: none;

    width: 60px;
    height: 15px;

    padding-left: 3px;

    border: 2px solid yellow;

    background-color: red;
    color: yellow;

    font-family: sans-serif;
    font-size: 8px;
}



/* ==========================================================================
   10 — NEWS / VIDEOS / PICS EXTRAS
   ========================================================================== */

/*
    Preserve the original V1 interaction exactly:

        compressed:
            all three .extraBox panels are visible
            each panel is 32% of the parent height
            each panel scrolls internally

        expanded:
            showExtra() hides the other two panels
            selected panel becomes 98% of parent height

    The key is that the extras parent must have a real, bounded height.
*/

#extrasC,
#extrasL,
#extrasR {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    min-height: 0;

    gap: 1%;

    padding: 4px !important;

    overflow: hidden;

    opacity: 0.90;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}


#extrasC > div,
#extrasL > div,
#extrasR > div {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;
    min-height: 0;

    text-align: center;
}


/*
    Do not use !important on height.
    showExtra() writes 32% and 98% inline and must be allowed to win.
*/

.newsBlogC,
.musicVideosC,
.imagesC,
.newsBlogL,
.musicVideosL,
.imagesL,
.newsBlogR,
.musicVideosR,
.imagesR {
    height: 32%;

    overflow-x: hidden;
    overflow-y: auto;

    border-radius: var(--ou-radius-md) !important;

    background-color:
        rgba(0, 0, 0, 0.28);

    backdrop-filter:
        blur(6px)
        saturate(115%);

    -webkit-backdrop-filter:
        blur(6px)
        saturate(115%);

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.30)
        transparent;

    -webkit-overflow-scrolling: touch;
}


.extraBox:hover {
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.35);
}


.extraControl {
    position: sticky;
    top: 0;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 6px;

    min-height: 32px;

    padding: 5px 7px;

    text-align: left;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.62),
            rgba(0, 0, 0, 0.40)
        );

    color: inherit;

    font-size: 0.74rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.addContent,
.showHideButton {
    width: 24px;
    min-width: 24px;
    height: 24px;

    margin-right: 2px;
    padding: 0;

    border:
        1px solid rgba(255, 255, 255, 0.22);

    border-radius: var(--ou-radius-sm);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.10)
        );

    color: inherit;

    font-size: 15px;
    line-height: 22px;
    text-align: center;

    cursor: pointer;

    transition:
        transform 140ms ease,
        background 140ms ease;
}


.addContent:hover,
.showHideButton:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.32),
            rgba(255, 255, 255, 0.15)
        );
}


#blogI,
#videosI,
#imagesI {
    width: 100%;
    min-width: 0;

    padding:
        4px
        7px
        10px;
}


#imagesI img,
#videosI img {
    max-width: 100%;
    height: auto;

    border-radius: var(--ou-radius-sm);
}



/* ==========================================================================
   11 — COMMON CONTROLS / UTILITY UI
   ========================================================================== */

.loader {
    display: none;

    width: 100px;
    height: 100px;
}


.bigBox {
    display: none;
}


.artistTab {
    display: inline-block;
    cursor: pointer;
}


#addProject {
    color: inherit;
    background-color: inherit;

    font-size: clamp(48px, 8vw, 100px);

    cursor: pointer;
}


#hidden-iframe {
    height: 30px;
}


#newsUpdate,
#newsReupdate {
    display: none;

    position: fixed;
    z-index: 950;

    top: 10px;
    left: 10px;

    width: min(450px, calc(100vw - 20px));
    height: min(500px, calc(100dvh - 20px));

    border-radius: var(--ou-radius-md);

    box-shadow: var(--ou-shadow-deep);
}


.overDiv {
    height: 98%;
    overflow-y: auto;

    scrollbar-width: thin;
}


.blogTitle {
    font-size: large;
}


.otherBox {
    display: none;
}


#colorChooser {
    display: none;

    position: absolute;
    z-index: 30;

    top: 0;
    left: 0;

    padding: 5px;

    border: 1px solid #ddd;
    border-radius: var(--ou-radius-sm);

    background-color: black;

    box-shadow: var(--ou-shadow);
}


.colorButton {
    width: 40px;
    height: 20px;

    margin-left: 3px;

    border: 4px solid silver;
    border-radius: var(--ou-radius-sm);

    background-color: black;
}


#whiteB {
    background-color: white;
}


#silverB {
    background-color: silver;
}


#grayB {
    background-color: gray;
}


#blackB {
    background-color: black;
}


.customTools {
    display: none;
}


.inline {
    display: inline-block;
}


.editArea {
    border: 1px solid silver;
    border-radius: var(--ou-radius-md);

    background-color: black;
    color: silver;

    box-shadow: var(--ou-shadow-deep);
}


.likeMe {
    display: inline;

    float: right;

    width: 20px;
    height: 20px;

    background-image:
        url("Thumbs_Up_silver.png");

    background-size: 100% 100%;

    cursor: pointer;
}


.likeMe:hover {
    background-image:
        url("Thumbs_Up_red.png");

    background-size: 100% 100%;
}



/* ==========================================================================
   12 — SONG RATING FORM
   ========================================================================== */

#songRatingForm {
    display: none;

    position: fixed;
    z-index: 1000;

    top: 50%;
    left: 50%;

    width: min(92vw, 800px);
    max-height: min(86dvh, 900px);

    margin: 0;
    padding: clamp(14px, 2vw, 22px);

    overflow-x: hidden;
    overflow-y: auto;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: var(--ou-radius-lg);

    background:
        linear-gradient(
            180deg,
            rgba(30, 30, 30, 0.985),
            rgba(12, 12, 12, 0.985)
        );

    color: #e8e8e8;

    font-family:
        Inter,
        Arial,
        sans-serif;

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.65);

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 255, 255, 0.26)
        transparent;
}


.category {
    margin-bottom: 16px;
    padding: 15px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: var(--ou-radius-md);

    background:
        rgba(255, 255, 255, 0.05);

    box-shadow:
        0 5px 16px rgba(0, 0, 0, 0.20);
}


.rating-toggle {
    display: block;

    margin-top: 15px;

    color: #f5f5f5;

    font-weight: 700;
}


.slider-container {
    width: 100%;
    margin-top: 10px;
}


.slider {
    width: 100%;
    height: 8px;

    appearance: none;

    border-radius: 999px;

    outline: none;

    background: #444;

    cursor: pointer;

    transition:
        background 180ms ease;
}


.slider:hover {
    background: #666;
}


.slider-labels {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    margin-top: 5px;

    color: #bbb;

    font-size: 12px;
}


#orcaRatingForm button {
    padding: 9px 16px;

    border:
        1px solid rgba(255, 255, 255, 0.15);

    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            #ffad32,
            #e98900
        );

    color: white;

    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.24);

    transition:
        filter 160ms ease,
        transform 120ms ease;
}


#orcaRatingForm button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}


.orcaImage {
    width: auto;
    max-width: 100%;
    height: 100px;

    margin-right: 10px;
}



/* ==========================================================================
   13 — SCROLLBARS — WEBKIT
   ========================================================================== */

#musiclist::-webkit-scrollbar,
#extrasC::-webkit-scrollbar,
#extrasL::-webkit-scrollbar,
#extrasR::-webkit-scrollbar,
.extraBox::-webkit-scrollbar,
.coverStackC::-webkit-scrollbar,
.coverStackL::-webkit-scrollbar,
.coverStackR::-webkit-scrollbar,
#songRatingForm::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}


#musiclist::-webkit-scrollbar-thumb,
.extraBox::-webkit-scrollbar-thumb,
.coverStackC::-webkit-scrollbar-thumb,
.coverStackL::-webkit-scrollbar-thumb,
.coverStackR::-webkit-scrollbar-thumb,
#songRatingForm::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.22);
}


#musiclist::-webkit-scrollbar-track,
.extraBox::-webkit-scrollbar-track,
.coverStackC::-webkit-scrollbar-track,
.coverStackL::-webkit-scrollbar-track,
.coverStackR::-webkit-scrollbar-track,
#songRatingForm::-webkit-scrollbar-track {
    background: transparent;
}



/* ==========================================================================
   14 — LARGE / ULTRAWIDE SCREENS
   ========================================================================== */

@media (min-width: 1500px) {

    .center,
    .left,
    .right {
        /*
            Keep the page feeling designed rather than simply stretched.
        */
        min-height: 0;
        height: 100%;
    }


    .center {
        grid-template-columns:
            minmax(360px, 1.12fr)
            minmax(280px, 0.82fr)
            minmax(360px, 1.12fr);
    }


    .left {
        grid-template-columns:
            minmax(280px, 0.82fr)
            minmax(380px, 1.12fr)
            minmax(380px, 1.12fr);
    }


    .right {
        grid-template-columns:
            minmax(380px, 1.12fr)
            minmax(380px, 1.12fr)
            minmax(280px, 0.82fr);
    }
}



/* ==========================================================================
   15 — TABLET / SMALL LAPTOP
   ========================================================================== */

/*
    Keep the original V1 composition through this range.
    No re-stacking here — only proportional compression.
*/

@media (max-width: 1050px) {

    :root {
        --ou-gap: 5px;
    }

    body {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    #artistPage {
        height: 100dvh;
        min-height: 0;

        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;

        overflow: hidden;
    }

    .container,
    #container {
        height: 100%;
        min-height: 0;

        padding: 4px;

        overflow: hidden;
    }

    .center,
    .left,
    .right {
        height: 100%;
        min-height: 0;

        gap: var(--ou-gap);
    }

    .center {
        grid-template-columns:
            minmax(0, 36fr)
            minmax(0, 26fr)
            minmax(0, 36fr);

        grid-template-rows:
            clamp(58px, 8dvh, 78px)
            minmax(0, 1fr);
    }

    .left {
        grid-template-columns:
            minmax(0, 26fr)
            minmax(0, 36fr)
            minmax(0, 36fr);

        grid-template-rows:
            clamp(58px, 8dvh, 78px)
            minmax(0, 1fr);
    }

    .right {
        grid-template-columns:
            minmax(0, 36fr)
            minmax(0, 36fr)
            minmax(0, 26fr);

        grid-template-rows:
            clamp(58px, 8dvh, 78px)
            minmax(0, 1fr);
    }

    .coverStackC,
    .coverStackL,
    .coverStackR,
    .songsC,
    .songsL,
    .songsR,
    #extrasC,
    #extrasL,
    #extrasR {
        min-width: 0;
        min-height: 0;
    }

    #coverStackI {
        padding: 4px;
    }

    .projectBox {
        width: min(130px, 100%);
        max-width: 100%;
        height: auto;

        aspect-ratio: 1 / 1;

        margin-inline: auto;
    }

    .projectPic {
        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;
    }

    #musiclist {
        height: calc(100% - 82px);
        min-height: 0;
    }

    .extraControl {
        min-height: 28px;

        padding: 3px 5px;

        font-size: 0.68rem;
    }

    .addContent,
    .showHideButton {
        width: 22px;
        min-width: 22px;
        height: 22px;

        line-height: 20px;
    }
}



/* ==========================================================================
   16 — PHONE
   ========================================================================== */

/*
    Phone flow:
        cover / logo / album chooser
        player + song list
        extras
        footer

    Decorative panoramas disappear on phones.
*/

@media (max-width: 700px) {

    :root {
        --ou-gap: 6px;
    }

    body {
        height: auto;
        min-height: 100dvh;

        overflow-x: hidden;
        overflow-y: auto;
    }

    #artistPage {
        height: auto;
        min-height: 100dvh;

        display: flex;
        flex-direction: column;

        overflow: visible;
    }

    .container,
    #container {
        width: 100%;
        height: auto;
        min-height: 0;

        padding: 5px;

        overflow: visible;
    }

    .left,
    .right,
    .center {
        width: 100%;
        height: auto;
        min-height: 0;

        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;

        gap: var(--ou-gap);

        overflow: visible;
    }

    .left,
    .right,
    .center {
        grid-template-areas:
            "cover"
            "songs"
            "extras";
    }

    .left .coverStackL,
    .right .coverStackR,
    .center .coverStackC {
        grid-area: cover;
    }

    .left .songsL,
    .right .songsR,
    .center .songsC {
        grid-area: songs;
    }

    .left .extrasL,
    .right .extrasR,
    .center .extrasC {
        grid-area: extras;
    }

    .panoramaL,
    .panoramaR,
    .panoramaLC,
    .panoramaRC {
        display: none;
    }

    .coverStackC,
    .coverStackL,
    .coverStackR {
        width: 100%;
        height: auto;
        max-height: 42dvh;

        overflow-x: hidden;
        overflow-y: auto;

        padding: 4px !important;
    }

    #coverStackI {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 6px;

        padding: 6px;
    }

    .projectBox {
        width: min(48vw, 180px);
        max-width: 180px;
        height: auto;

        aspect-ratio: 1 / 1;

        flex: 0 0 auto;
    }

    .projectPic {
        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;
    }

    .songsC,
    .songsL,
    .songsR {
        width: 100%;
        min-height: 0;

        overflow: hidden;
    }

    #playerTab {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    #musicplayer {
        width: 100%;
    }

    #musiclist {
        width: 100%;
        height: min(48dvh, 420px);
        min-height: 220px;

        overflow-x: hidden;
        overflow-y: auto;
    }

    #extrasC,
    #extrasL,
    #extrasR {
        width: 100%;
        height: min(62dvh, 560px);
        min-height: 430px;

        padding: 5px !important;

        overflow: hidden;
    }

    .newsBlogC,
    .musicVideosC,
    .imagesC,
    .newsBlogL,
    .musicVideosL,
    .imagesL,
    .newsBlogR,
    .musicVideosR,
    .imagesR {
        min-height: 0;
    }

    .extraControl {
        min-height: 36px;

        padding: 5px 7px;

        font-size: 0.72rem;
    }

    .addContent,
    .showHideButton {
        width: 28px;
        min-width: 28px;
        height: 28px;

        line-height: 26px;
    }

    .footer,
    #footer {
        width: calc(100% - 10px);
        min-height: 34px;

        margin: 5px auto;
        padding: 4px 6px;

        overflow: visible;
    }

    #newsUpdate,
    #newsReupdate {
        inset: 6px;

        width: auto;
        height: auto;
    }

    #songRatingForm {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);

        padding: 12px;

        border-radius: var(--ou-radius-md);
    }

    .category {
        padding: 12px;
    }

    .orcaImage {
        height: 72px;
    }
}



/* ==========================================================================
   17 — SMALL PHONES
   ========================================================================== */

@media (max-width: 430px) {

    .container,
    #container {
        padding: 4px;
    }

    .coverStackC,
    .coverStackL,
    .coverStackR {
        max-height: 38dvh;
    }

    .projectBox {
        width: min(52vw, 165px);
        max-width: 165px;
    }

    #musiclist {
        height: 44dvh;
        min-height: 210px;
    }

    #extrasC,
    #extrasL,
    #extrasR {
        height: 58dvh;
        min-height: 400px;
    }

    .extraControl {
        padding-inline: 5px;

        font-size: 0.67rem;
        letter-spacing: 0.04em;
    }

    .slider-labels {
        font-size: 10px;
    }

    #orcaRatingForm button {
        width: 100%;
        margin-top: 6px;
    }
}



/* ==========================================================================
   18 — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   19 — ARTIST-DYNAMIC UI / FOOTER
   ========================================================================== */

/*
    music_V1.php supplies these values as CSS custom properties on <body>:
        --artist-bg
        --artist-border
        --artist-font

    All actual visual rules live here.
*/

.footerLink,
.footerLink:visited,
.footerLink:hover,
.footerLink:active,
.footerLink:focus {
    display: inline-block;

    max-width: 100%;

    padding: 4px;

    border: 1px solid var(--artist-border);
    border-radius: 5px;

    background:
        radial-gradient(
            ellipse,
            var(--artist-bg),
            var(--artist-border)
        );

    color: white;

    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;

    transition:
        background 0.3s ease,
        transform 0.2s ease;
}


#lyricReupdate {
    display: none;

    position: fixed;
    z-index: 402;

    top: 10px;
    left: 10px;

    width: min(95vw, 1100px);
    height: min(90dvh, 900px);

    padding: 10px;

    overflow-x: hidden;
    overflow-y: auto;
}


.lyricsText {
    width: 95%;
    min-height: 12rem;
    height: auto;

    padding: 5px;

    border-radius: 5px;

    background-color: var(--artist-bg);
    color: var(--artist-font);

    font-size: 1.5em;
}


#lyricForm {
    background-color: var(--artist-bg);
    color: var(--artist-font);
}


.lyricsButton:hover {
    border: 1px solid gray;
    cursor: pointer;
}


.lyricCloseButton {
    float: right;
}


.lyricChordBin {
    height: 30%;

    overflow-x: auto;
    overflow-y: auto;

    background-color: silver;
}


#time-spent {
    display: none;

    margin: 2px;

    color: #333;

    font-size: 1.5rem;
}


#timeButton {
    margin-top: 1px;
}


#artistTier,
.genreBadge,
.musicPlayerButton {
    text-align: center;

    padding: 5px;

    border-radius: 12px;

    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#artistTier {
    border: 2px solid var(--artist-font);

    background:
        linear-gradient(
            135deg,
            var(--artist-bg),
            var(--artist-border)
        );

    color: var(--artist-font);

    font-size: 8px;
}


#artistTier,
#artistTier:visited,
#artistTier:hover,
#artistTier:active {
    text-decoration: none;
}


.genreBadge {
    border: 2px solid var(--artist-font);

    background:
        linear-gradient(
            135deg,
            var(--artist-bg),
            var(--artist-border)
        );

    color: var(--artist-font);

    font-size: 6px;
}


.genreBadge,
.genreBadge:visited,
.genreBadge:hover,
.genreBadge:active {
    text-decoration: none;
}


.musicPlayerButton {
    border: 2px solid var(--artist-font);

    background:
        radial-gradient(
            circle,
            var(--artist-border),
            var(--artist-bg)
        );

    color: var(--artist-font);

    font-size: 6px;

    cursor: pointer;
}


/* ==========================================================================
   20 — RESPONSIVE POLISH
   ========================================================================== */

/*
    Keep cover artwork fully contained in its own square.
*/

.projectBox {
    width: min(150px, 100%);
    max-width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;

    margin-inline: auto;

    overflow: hidden;
}


.projectPic,
#coverStackI img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    margin-inline: auto;
}


/*
    Keep themed panel borders inside the viewport.
*/

#artistPage,
#container,
.container,
.center,
.left,
.right,
.coverStackC,
.coverStackL,
.coverStackR,
.songsC,
.songsL,
.songsR,
#extrasC,
#extrasL,
#extrasR,
.extraBox {
    max-width: 100%;
}


/*
    Extras retain their rounded right edge even with an internal scrollbar.
*/

.newsBlogC,
.musicVideosC,
.imagesC,
.newsBlogL,
.musicVideosL,
.imagesL,
.newsBlogR,
.musicVideosR,
.imagesR {
    border-radius: var(--ou-radius-md) !important;

    overflow-x: hidden;
    overflow-y: auto;

    clip-path: inset(0 round var(--ou-radius-md));
}


@media (max-width: 700px) {

    html {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;

        scrollbar-width: auto;
        scrollbar-color:
            rgba(255, 255, 255, 0.62)
            rgba(0, 0, 0, 0.28);
    }


    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
        overflow-y: auto;
    }


    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 14px;
    }


    html::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        background:
            rgba(0, 0, 0, 0.28);
    }


    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb {
        border: 3px solid rgba(0, 0, 0, 0.22);
        border-radius: 999px;

        background:
            rgba(255, 255, 255, 0.62);

        background-clip: padding-box;
    }


    /*
        Keep one artist logo/banner visible above the stacked phone layout.
    */

    .left .panoramaL,
    .right .panoramaR,
    .center .panoramaLC {
        display: block;

        width: 100%;
        min-height: clamp(110px, 28vw, 170px);

        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }


    .center .panoramaRC {
        display: none;
    }


    .left {
        grid-template-areas:
            "panorama"
            "cover"
            "songs"
            "extras";
    }


    .right {
        grid-template-areas:
            "panorama"
            "cover"
            "songs"
            "extras";
    }


    .center {
        grid-template-areas:
            "panoL"
            "cover"
            "songs"
            "extras";
    }


    .left .panoramaL {
        grid-area: panorama;
    }


    .right .panoramaR {
        grid-area: panorama;
    }


    .center .panoramaLC {
        grid-area: panoL;
    }


    /*
        Footer becomes a wrapping button row.
    */

    #footer,
    .footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        gap: 4px;

        width: calc(100% - 10px);
        max-width: 100%;

        overflow-x: hidden;
    }


    .footerLink {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        max-width: 100%;

        padding: 5px 7px;

        white-space: normal;
        overflow-wrap: anywhere;
    }


    /*
        Prevent theme borders/padding from pushing the right edge inward.
    */

    .childBox,
    .center > .childBox,
    .left > .childBox,
    .right > .childBox,
    #extrasC,
    #extrasL,
    #extrasR {
        max-width: 100%;

        margin-inline: 0 !important;
    }


    #extrasC,
    #extrasL,
    #extrasR {
        overflow: hidden;

        border-radius: var(--ou-radius-md) !important;
    }


    .newsBlogC,
    .musicVideosC,
    .imagesC,
    .newsBlogL,
    .musicVideosL,
    .imagesL,
    .newsBlogR,
    .musicVideosR,
    .imagesR {
        width: 100%;
        max-width: 100%;

        border-radius: var(--ou-radius-md) !important;

        overflow-x: hidden;
        overflow-y: auto;

        clip-path: inset(0 round var(--ou-radius-md));
    }


    #lyricReupdate {
        inset: 6px;

        width: auto;
        height: auto;

        max-width: none;
        max-height: none;
    }


    .lyricsText {
        width: 100%;

        font-size: 1rem;
    }
}


@media (max-width: 430px) {

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 16px;
    }


    .left .panoramaL,
    .right .panoramaR,
    .center .panoramaLC {
        min-height: clamp(100px, 30vw, 145px);
    }
}



/* ========================================================================== 
   21 — MODERN ARTIST SURFACE PASS
   --------------------------------------------------------------------------
   Visual-only refinement. The V1 left / center / right geometry and the
   existing JavaScript contract remain untouched.
   ========================================================================== */

:root {
    --ou-radius-sm: 7px;
    --ou-radius-md: 12px;
    --ou-radius-lg: 16px;

    --ou-surface-glow:
        color-mix(in srgb, var(--artist-border, #888) 24%, transparent);

    --ou-surface-light:
        color-mix(in srgb, var(--artist-font, #fff) 10%, transparent);

    --ou-surface-dark:
        color-mix(in srgb, var(--artist-bg, #000) 76%, rgba(0, 0, 0, 0.48));

    --ou-outline:
        color-mix(in srgb, var(--artist-border, #888) 58%, rgba(255, 255, 255, 0.14));

    --ou-control-border:
        color-mix(in srgb, var(--artist-font, #fff) 24%, var(--artist-border, #777));

    --ou-shadow:
        0 8px 24px rgba(0, 0, 0, 0.24),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;

    --ou-shadow-deep:
        0 18px 48px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}


/* The artist's selected background remains authoritative. */
body {
    background-image:
        radial-gradient(
            circle at 50% -20%,
            color-mix(in srgb, var(--artist-border, #777) 16%, transparent),
            transparent 44rem
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--artist-font, #fff) 3%, transparent),
            transparent 34%,
            rgba(0, 0, 0, 0.08)
        );

    color: var(--artist-font, inherit);
}


/* Panels keep their exact placement while gaining a more finished edge. */
.childBox {
    position: relative;

    border:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 72%, rgba(255, 255, 255, 0.12)) !important;

    background-image:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--artist-font, #fff) 5%, transparent),
            transparent 34%,
            color-mix(in srgb, var(--artist-border, #777) 8%, transparent)
        );

    box-shadow:
        var(--ou-shadow),
        0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}


.childBox:hover {
    box-shadow:
        0 11px 30px rgba(0, 0, 0, 0.30),
        0 0 0 1px var(--ou-surface-glow) inset,
        0 1px 0 rgba(255, 255, 255, 0.07) inset;
}


/* Panoramas keep the actual artist image untouched. */
.panoramaLC,
.panoramaRC,
.panoramaL,
.panoramaR {
    border:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 64%, rgba(255, 255, 255, 0.16)) !important;

    border-radius: var(--ou-radius-md) !important;

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.34),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}


/* Cover artwork gets a restrained gallery treatment. */
#coverStackI img,
.projectPic {
    border:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 54%, rgba(255, 255, 255, 0.18));

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.30),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}


.projectBox:hover #coverStackI img,
.projectBox:hover .projectPic,
#coverStackI img:hover,
.projectPic:hover {
    transform: translateY(-1px);

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.36),
        0 0 0 1px var(--ou-surface-glow);

    filter: saturate(1.04) contrast(1.02);
}


/* Music list rows become easier to scan without changing their structure. */
.musicBox {
    padding: 5px 7px;

    border:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 22%, transparent);

    border-radius: var(--ou-radius-sm);

    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--artist-bg, #000) 72%, rgba(0, 0, 0, 0.18)),
            color-mix(in srgb, var(--artist-border, #777) 7%, transparent)
        );

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.035) inset;

    transition:
        transform 140ms ease,
        border-color 140ms ease,
        background 140ms ease;
}


.musicBox:hover {
    transform: translateX(2px);

    border-color:
        color-mix(in srgb, var(--artist-border, #777) 62%, rgba(255, 255, 255, 0.12));

    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--artist-border, #777) 15%, var(--artist-bg, #000)),
            color-mix(in srgb, var(--artist-bg, #000) 82%, transparent)
        );
}


.musicRow {
    text-decoration: none;
}


.musicRow:hover {
    text-shadow:
        0 0 12px
        color-mix(in srgb, var(--artist-font, #fff) 25%, transparent);
}


/* Extras preserve the existing 32% / 98% JS behavior. */
.newsBlogC,
.musicVideosC,
.imagesC,
.newsBlogL,
.musicVideosL,
.imagesL,
.newsBlogR,
.musicVideosR,
.imagesR {
    border:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 52%, rgba(255, 255, 255, 0.10));

    background-color:
        color-mix(in srgb, var(--artist-bg, #000) 66%, rgba(0, 0, 0, 0.30));

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.23),
        0 1px 0 rgba(255, 255, 255, 0.055) inset;

    backdrop-filter:
        blur(7px)
        saturate(118%);

    -webkit-backdrop-filter:
        blur(7px)
        saturate(118%);
}


.extraControl {
    border-bottom:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 45%, rgba(255, 255, 255, 0.08));

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--artist-bg, #000) 72%, rgba(0, 0, 0, 0.46)),
            color-mix(in srgb, var(--artist-border, #777) 12%, rgba(0, 0, 0, 0.40))
        );

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 5px 14px rgba(0, 0, 0, 0.14);
}


/* Small utility controls use one visual language. */
.addContent,
.showHideButton,
.musicPlayerButton,
#timeButton,
.lyricsButton,
.editButton {
    border:
        1px solid
        var(--ou-control-border);

    border-radius: var(--ou-radius-sm);

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--artist-font, #fff) 16%, var(--artist-bg, #000)),
            color-mix(in srgb, var(--artist-border, #777) 14%, var(--artist-bg, #000))
        );

    color: var(--artist-font, #eee);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.09) inset;

    cursor: pointer;

    transition:
        transform 130ms ease,
        filter 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}


.addContent:hover,
.showHideButton:hover,
.musicPlayerButton:hover,
#timeButton:hover,
.lyricsButton:hover,
.editButton:hover {
    transform: translateY(-1px);
    filter: brightness(1.12);

    border-color:
        color-mix(in srgb, var(--artist-font, #fff) 44%, var(--artist-border, #777));

    box-shadow:
        0 7px 17px rgba(0, 0, 0, 0.30),
        0 0 0 1px var(--ou-surface-glow) inset;
}


.addContent:active,
.showHideButton:active,
.musicPlayerButton:active,
#timeButton:active,
.lyricsButton:active,
.editButton:active {
    transform: translateY(0);
    filter: brightness(0.96);
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        2px solid
        color-mix(in srgb, var(--artist-font, #fff) 62%, var(--artist-border, #777));

    outline-offset: 2px;
}


/* Artist badges gain depth but continue using the selected palette. */
#artistTier,
.genreBadge,
.musicPlayerButton {
    border-width: 1px;

    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--artist-font, #fff) 8%, var(--artist-bg, #000)),
            color-mix(in srgb, var(--artist-border, #777) 42%, var(--artist-bg, #000))
        );

    box-shadow:
        0 4px 11px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}


/* Footer: understated glass strip with clearly related controls. */
.footer,
#footer {
    text-align: center;

    border:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 56%, rgba(255, 255, 255, 0.10));

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--artist-bg, #000) 76%, rgba(255, 255, 255, 0.05)),
            color-mix(in srgb, var(--artist-bg, #000) 86%, rgba(0, 0, 0, 0.22))
        );

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.24),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.footerLink,
.footerLink:visited,
.footerLink:hover,
.footerLink:active,
.footerLink:focus {
    padding: 4px 7px;

    border:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 64%, rgba(255, 255, 255, 0.10));

    border-radius: 7px;

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--artist-font, #fff) 9%, var(--artist-bg, #000)),
            color-mix(in srgb, var(--artist-border, #777) 20%, var(--artist-bg, #000))
        );

    color:
        color-mix(in srgb, var(--artist-font, #fff) 88%, white);

    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}


.footerLink:hover,
.footerLink:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.12);
}


.timeSpentControl {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    width: 100%;

    margin-top: 3px;
}


#time-spent {
    display: none;

    margin: 0;
    padding: 3px 7px;

    border:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 42%, transparent);

    border-radius: 7px;

    background:
        color-mix(in srgb, var(--artist-bg, #000) 82%, rgba(0, 0, 0, 0.18));

    color: var(--artist-font, inherit);

    font-size: 11px;
    white-space: nowrap;
}


#time-spent.is-open {
    display: inline-block;
}


#timeButton {
    min-width: 30px;
    min-height: 24px;

    margin: 0;
    padding: 2px 7px;

    font-size: 14px;
    line-height: 1;
}


/* Always readable, but intentionally subordinate to the artist design. */
#versionBadge {
    z-index: 100;

    padding: 3px 6px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;

    background: rgba(0, 0, 0, 0.42);
    color: rgba(255, 255, 255, 0.88);

    font-size: 10px;
    line-height: 1;
    white-space: nowrap;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.80);

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


/* Lyrics inherit the artist language while remaining legible as an editor. */
#lyricReupdate,
.editArea {
    border:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 68%, rgba(255, 255, 255, 0.12));

    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--artist-bg, #000) 90%, rgba(255, 255, 255, 0.04)),
            color-mix(in srgb, var(--artist-bg, #000) 88%, rgba(0, 0, 0, 0.28))
        );

    color: var(--artist-font, #eee);

    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.50),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.lyricsText {
    border:
        1px solid
        color-mix(in srgb, var(--artist-border, #777) 56%, rgba(255, 255, 255, 0.10));

    background:
        color-mix(in srgb, var(--artist-bg, #000) 92%, black);

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
}


/* Scrollbars use the artist border color as a subtle accent. */
#musiclist,
.extraBox,
.coverStackC,
.coverStackL,
.coverStackR {
    scrollbar-color:
        color-mix(in srgb, var(--artist-border, #777) 58%, rgba(255, 255, 255, 0.32))
        rgba(0, 0, 0, 0.10);
}


#musiclist::-webkit-scrollbar-thumb,
.extraBox::-webkit-scrollbar-thumb,
.coverStackC::-webkit-scrollbar-thumb,
.coverStackL::-webkit-scrollbar-thumb,
.coverStackR::-webkit-scrollbar-thumb {
    border: 2px solid transparent;

    background:
        color-mix(in srgb, var(--artist-border, #777) 58%, rgba(255, 255, 255, 0.30));

    background-clip: padding-box;
}


@media (max-width: 700px) {

    /* Keep the modern pass restrained on small screens. */
    .childBox {
        box-shadow:
            0 7px 18px rgba(0, 0, 0, 0.24),
            0 1px 0 rgba(255, 255, 255, 0.05) inset;
    }


    .musicBox {
        padding: 6px 7px;
    }


    .footer,
    #footer {
        padding: 5px;
    }
}