iframe {
    width: 750px;
    border: none;
}

table {
    display: block;
}

/* Large video overlay: the 3D scene stays full-screen and permanent, and the small audio screen stays glued to the furniture; this overlay is only for the YouTube video, opened over everything on a badge click. Same visual family as .setlist-dialog (backdrop + centered card). z-index 950: above the 3D scene and small screen (800/900), below the setlist management modal (1000) in case both were open at once. */
.video-overlay {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.video-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}
.video-overlay-content {
    position: relative;
    z-index: 1;
    width: min(92vw, 1100px);
    aspect-ratio: 16 / 9;
}
.video-overlay-close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 3px solid var(--bb-ink);
    border-radius: 50%;
    background: var(--bb-gold);
    color: var(--bb-ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.video-overlay-close:hover,
.video-overlay-close:focus-visible {
    background: var(--bb-gold-pale);
}
.video-overlay-close:focus-visible {
    outline: 3px solid var(--bb-white);
    outline-offset: 2px;
}

.player-wrap {
    background: transparent;
}

/* .row:first-child is the "screen" (waveform), positioned/sized by updateOverlayPosition() in music.js (position:fixed + left/top/width/height set in JS); the padding below eats a few px inward to reveal a "metal/wood" frame around it. z-index:900: above the 3D scene (800) once switched to position:fixed by JS. */
.player-wrap .row:first-child {
    background: linear-gradient(155deg, #8a6a4c 0%, #695044 45%, #382c26 100%);
    padding: 5px;
    box-sizing: border-box;
    border-radius: 7px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 2px 3px rgba(255, 255, 255, 0.12),
        inset 0 -3px 5px rgba(0, 0, 0, 0.45),
        0 0 20px 2px rgba(var(--bb-gold-rgb), 0.22);
    z-index: 900;
}
/* Screws at the frame corners: a "handmade furniture" detail consistent with the rest of the site, kept subtle and never overlapping real text. */
.player-wrap .row:first-child::before,
.player-wrap .row:first-child::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    top: 6px;
    background: radial-gradient(circle at 35% 35%, #cbb08c, #4a3a2c 70%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.player-wrap .row:first-child::before {
    left: 7px;
}
.player-wrap .row:first-child::after {
    right: 7px;
}
/* flex + align-items:center: without it, children (links, svg, range input) align on their default baseline, wildly different from one element to the next. Same "furniture facade" language as .row:first-child above (wood/metal gradient, screws) so the button row doesn't look flat next to a reworked screen. */
.player-wrap .row.playerButtons {
    display: flex;
    align-items: center;
    background: linear-gradient(155deg, #8a6a4c 0%, #695044 45%, #382c26 100%);
    padding: 4px 12px;
    box-sizing: border-box;
    border-radius: 7px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 -3px 5px rgba(0, 0, 0, 0.35);
    z-index: 900;
}
.player-wrap .row.playerButtons::before,
.player-wrap .row.playerButtons::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    bottom: 5px;
    background: radial-gradient(circle at 35% 35%, #cbb08c, #4a3a2c 70%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.player-wrap .row.playerButtons::before {
    left: 7px;
}
.player-wrap .row.playerButtons::after {
    right: 7px;
}


/* Both .playlist and .members-only get their own scroll/overflow treatment: a song with several voices (e.g. 10 mp3s in one folder) can overflow, and without it the bottom of the voice list was simply cropped by this wrapper's overflow:hidden with no way to reach it. */
.playlist-wrap {
    background: #4a3d37;
    border: 5px solid;
    border-image: linear-gradient(155deg, #a4855f, #895b41 55%, #4a3a2c) 1;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 900;
    box-shadow: 0 0 20px 2px rgba(var(--bb-gold-rgb), 0.12);
}

/* Decorative "console" label above the playlist, same family as the screen's track counter, visually tying the two boxes into one "device" rather than two unrelated blocks. */
.console-label {
    margin: 0 0 0.4rem;
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bb-gold-pale);
    opacity: 0.75;
}

.playlist, .members-only {
    height: 100%;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 50%;
    padding: 0.75rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bb-gold-pale) transparent;
}
.playlist {
    border-right: 1px solid #664c40;
}
.playlist::-webkit-scrollbar,
.members-only::-webkit-scrollbar {
    width: 8px;
}
.playlist::-webkit-scrollbar-track,
.members-only::-webkit-scrollbar-track {
    background: transparent;
}
.playlist::-webkit-scrollbar-thumb,
.members-only::-webkit-scrollbar-thumb {
    background: var(--bb-gold-pale);
    border-radius: 4px;
}
.playlist::-webkit-scrollbar-thumb:hover,
.members-only::-webkit-scrollbar-thumb:hover {
    background: var(--bb-gold);
}

/* Background inherited from .playlist-wrap (#4a3d37, very dark brown, L≈0.05): without an explicit color, text would default to black and links would inherit the global green (~1:1, unreadable here). Same reasoning applies to .list-group-item and .loggedinContent below. */
.members-prompt {
    margin: 0;
    color: var(--bb-gold-pale);
    font-size: 13px;
    line-height: 1.5;
}
.members-prompt a {
    color: var(--bb-white);
    font-weight: bold;
    text-decoration: underline;
}
.members-prompt a:hover,
.members-prompt a:focus-visible {
    color: var(--bb-gold);
}

.empty-note {
    color: var(--bb-gold-pale);
    opacity: 0.75;
    font-size: 13px;
}

/* Bootstrap gives .list-group-item a white background by default, unrelated to the .card wrapper no longer used here: without removing it, the gold text lands on white (~1.35:1, unreadable) instead of the intended brown. */
.playlist .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.4rem;
    margin-bottom: 0.15rem;
    border-radius: 4px;
    background-color: transparent;
    border: 0;
    color: var(--bb-gold-pale);
    text-decoration: none;
}
.playlist .list-group-item svg {
    flex: 0 0 auto;
    opacity: 0.8;
}
/* Without an explicit color, this link would inherit the global green (~1:1 on the very dark brown background, unreadable), so it falls back to --bb-gold-pale like the rest of this area. */
.playlist .list-group-item .badge {
    margin-left: auto;
    color: var(--bb-gold-pale);
    text-decoration: underline;
}
.playlist .list-group-item .badge:hover,
.playlist .list-group-item .badge:focus-visible {
    color: var(--bb-gold);
}
.playlist .list-group-item .badge:focus-visible {
    outline: 2px solid var(--bb-white);
    outline-offset: 2px;
}
.playlist .list-group-item:hover,
.playlist .list-group-item:focus-visible {
    background: rgba(var(--bb-gold-rgb), 0.15);
    color: var(--bb-gold);
}
.playlist .list-group-item:focus-visible {
    outline: 2px solid var(--bb-white);
    outline-offset: -2px;
}
.playlist .list-group-item.active {
    background-color: var(--bb-green-mid);
}

.loggedinContent .list-group-item {
    display: block;
    padding: 0.4rem 0;
    background-color: transparent;
    border: 0;
    color: var(--bb-gold-pale);
    font-size: 13px;
}
.loggedinContent .list-group-item a {
    color: var(--bb-white);
    font-weight: bold;
}
.loggedinContent .list-group-item a:hover,
.loggedinContent .list-group-item a:focus-visible {
    color: var(--bb-gold);
}

/* .desk-voice-toggle/.desk-voice-players were designed for the light file manager background; on this very dark brown (#4a3d37, L≈0.05) they're nearly unreadable (~1.5:1 and ~1:1). --bb-gold-pale (7.71:1 here, AAA) is the established fallback color for this area. The .active state (solid --bb-green-mid fill, --bb-white text, 6.82:1) doesn't have this problem and is left untouched. */
.members-only .desk-voice-toggle {
    border-color: var(--bb-gold-pale);
    color: var(--bb-gold-pale);
}
.members-only .desk-voice-players {
    color: var(--bb-gold-pale);
}

.waveW {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55);
}
/* Screen scanlines + vignette, purely visual (pseudo-element, never exposed to the accessibility tree unlike a <div>). Kept subtle: the waveform underneath must stay readable, this CRT effect is a texture, not a filter degrading usability. */
.waveW::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, 0.16) 3px
        ),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
}

#waveform {
    background: #4a3d37;
    height: 100%;
}

/* Lives in #videoOverlay, not .waveW: fills the container plainly, no bezel/scanlines since a YouTube video already has its own controls. */
#youtube-embed {
    width: 100%;
    height: 100%;
    background: #000;
}
#youtube-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
/* wavesurfer.js creates an internal <wave> element (overflow-x:auto, no class/id) for horizontal scrolling when zoomed past the frame width; without this, its default gray browser scrollbar clashes with the theme. */
#waveform wave {
    scrollbar-width: thin;
    scrollbar-color: var(--bb-gold-pale) transparent;
}
#waveform wave::-webkit-scrollbar {
    height: 8px;
}
#waveform wave::-webkit-scrollbar-track {
    background: transparent;
}
#waveform wave::-webkit-scrollbar-thumb {
    background: var(--bb-gold-pale);
    border-radius: 4px;
}
#waveform wave::-webkit-scrollbar-thumb:hover {
    background: var(--bb-gold);
}

/* LED/counter overlaid in a screen corner, no dedicated space reserved for them. */
.screen-chrome {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    font-family: "IBM Plex Mono", "Courier New", monospace;
}

.power-led {
    position: absolute;
    top: 6px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a1414;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.6);
}
/* Red is never the only difference between the two states: the LED also changes size/glow, not just hue, since meaning should never rest on color alone even for a purely decorative element. */
.power-led.is-playing {
    background: var(--bb-red);
    box-shadow: 0 0 6px 2px rgba(188, 39, 39, 0.85);
    animation: bb-led-pulse 1.6s ease-in-out infinite;
}

.track-counter {
    position: absolute;
    top: 4px;
    right: 8px;
    padding: 1px 5px;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--bb-gold-pale);
    background: rgba(0, 0, 0, 0.35);
    border-radius: 3px;
}

/* Current track title, a visual duplicate of #now-playing (aria-live, sr-only): this one is purely decorative (aria-hidden), the screen reader announcement goes through the other element. Ellipsis rather than auto-scroll: a truncated long title stays readable without a continuous on-screen animation. */
.screen-ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    margin: 0;
    padding: 3px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    color: var(--bb-gold-pale);
    font-family: "VT323", "Courier New", monospace;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-shadow: 0 0 6px rgba(var(--bb-gold-rgb), 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

@keyframes bb-led-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.55;
    }
}

/* Brief brightness flicker on track change (added/removed by Player.js), a subtle echo of a real device's "channel change": ~200ms, never repeated unless the track changes again. */
@keyframes bb-screen-flicker {
    0% {
        filter: brightness(1);
    }
    35% {
        filter: brightness(1.9);
    }
    100% {
        filter: brightness(1);
    }
}
.waveW.screen-flicker {
    animation: bb-screen-flicker 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .power-led.is-playing {
        animation: none;
        opacity: 1;
    }
    .waveW.screen-flicker {
        animation: none;
    }
}

#uploadNew {
    width: 35%;
}

/* Native zoom slider: by default a generic gray browser control that doesn't fit the theme, same story as the scrollbars. */
input#slider {
    width: 15%;
    margin-left: 10px;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(var(--bb-gold-rgb), 0.3);
    border-radius: 2px;
    outline: none;
}
input#slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bb-gold-pale);
    border: 2px solid var(--bb-green-deep);
    cursor: pointer;
}
input#slider::-moz-range-track {
    height: 4px;
    background: rgba(var(--bb-gold-rgb), 0.3);
    border-radius: 2px;
}
input#slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bb-gold-pale);
    border: 2px solid var(--bb-green-deep);
    cursor: pointer;
}
input#slider:hover::-webkit-slider-thumb,
input#slider:focus-visible::-webkit-slider-thumb {
    background: var(--bb-gold);
}
input#slider:hover::-moz-range-thumb,
input#slider:focus-visible::-moz-range-thumb {
    background: var(--bb-gold);
}
input#slider:focus-visible {
    outline: 2px solid var(--bb-white);
    outline-offset: 2px;
}

#loopRegion, #uploadNew {
    margin-top: 5px;
}

/* #stopTrack/#playPause/#loopRegion are real <button> elements: this resets default browser button styling (border/background/font), the rest of their appearance is carried by the id-based rules below unchanged. */
.player-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

/* Player icons sit on a #695044 background (medium brown, L≈0.09). Dark tones there fall under the 3:1 WCAG minimum for icons/UI, while --bb-gold-pale reaches ~5.5:1. */
#loopRegion, a#loopRegion:hover {
    margin-left: 5px;
    color: var(--bb-gold-pale);
}

#uploadNew, a#uploadNew:hover {
    padding: 0 0;
    color: var(--bb-gold-pale);
    text-decoration: none;
}

#upload svg {
    color: var(--bb-gold-pale);
    width: 32px;
    height: 32px;
    margin-top: -3px;
}
#play svg {
    color: var(--bb-gold-pale);
    width: 42px;
    height: 42px;
}
#pause svg {
    color: var(--bb-white);
    width: 42px;
    height: 42px;
}
#stop svg {
    color: var(--bb-gold-pale);
    width: 42px;
    height: 42px;
}
#loop svg {
    color: var(--bb-gold-pale);
    width: 32px;
    height: 32px;
    margin-top: 0px;
}
#loopRegion.looping #loop svg {
    color: var(--bb-gold);
}


/* Same :focus-visible treatment as the rest of the site: white comfortably clears the 3:1 minimum for a focus indicator on this dark #695044 background. */
.player-btn:focus-visible,
#uploadNew:focus-visible {
    outline: 2px solid var(--bb-white);
    outline-offset: 2px;
}

/* The playlist/voice list are real <ul>/<li> elements, so a screen reader announces "list of N items" instead of saying nothing for a plain <a>/<span> stream; this neutralizes the browser's default list styling. */
.playlist,
.loggedinContent {
    list-style: none;
    margin: 0;
}

/* "Manage setlist" trigger button lives inside .members-only, so it needs no positioning of its own; it inherits .playlist-wrap's already-functional layout. Only the modal itself (.setlist-dialog) stays outside that system. */
.setlist-manage-trigger {
    display: block;
    margin-bottom: 0.6rem;
}

/* Setlist management modal. z-index 1000: above the 3D canvas (800) and player/playlist (900), never competing with them. Light --bb-gold-pale background + --bb-ink text (13.6:1, AAA) rather than the dark green a bare <form> inherits by default (--bb-gold on --bb-green-mid only reaches 3.63:1, below AA). */
.setlist-dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.setlist-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}
.setlist-dialog-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 42rem;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bb-gold-pale);
    color: var(--bb-ink);
    border-radius: 10px;
    box-shadow: var(--bb-shadow-soft);
    padding: 1.5rem;
    box-sizing: border-box;
}
.setlist-dialog .dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.setlist-dialog .dialog-header h2 {
    margin: 0;
    color: var(--bb-ink);
    font-size: 1.3rem;
}
.setlist-dialog .close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bb-ink);
    cursor: pointer;
}
.setlist-dialog .close:hover,
.setlist-dialog .close:focus-visible {
    color: var(--bb-green-mid);
}
.setlist-dialog .close:focus-visible {
    outline: 3px solid var(--bb-ink);
    outline-offset: 2px;
}
.setlist-dialog h3 {
    color: var(--bb-ink);
    font-size: 1.05rem;
    margin: 1.5rem 0 0.75rem;
}
.setlist-dialog h3:first-of-type {
    margin-top: 0;
}

/* Forms inside the modal: neutralizes the inherited global "form" styling, since the modal's light background already carries its own readability. */
.setlist-dialog form {
    background: transparent;
    color: var(--bb-ink);
    padding: 0;
    border: 0;
}
.setlist-dialog label {
    display: block;
    margin-top: 0.75rem;
    font-weight: bold;
    color: var(--bb-ink);
}
.setlist-dialog input[type="text"],
.setlist-dialog input[type="url"],
.setlist-dialog select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    margin-top: 0.3rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--bb-ink);
    border-radius: 8px;
    background: var(--bb-white);
    color: var(--bb-ink);
}
.setlist-dialog input:focus-visible,
.setlist-dialog select:focus-visible {
    outline: 3px solid var(--bb-ink);
    outline-offset: 1px;
}
.setlist-dialog .field-hint {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    opacity: 0.8;
}
.setlist-dialog .btn-green {
    margin-top: 1rem;
}

/* Song list with meaningful order (the move up/down buttons confirm it): each item's edit <details> is styled as a real collapsible button, since <summary> is natively keyboard-focusable/actionable with no JS required. */
.setlist-admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.setlist-admin-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(22, 20, 15, 0.15);
}
.setlist-admin-list li:last-child {
    border-bottom: none;
}
.setlist-admin-list details.setlist-edit {
    flex: 1 1 100%;
}
.setlist-admin-list summary {
    padding: 0.5rem 0.75rem;
    background: var(--bb-white);
    border: 2px solid var(--bb-ink);
    border-radius: 8px;
    color: var(--bb-ink);
    font-weight: bold;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.setlist-admin-list summary:focus-visible {
    outline: 3px solid var(--bb-ink);
    outline-offset: 2px;
}
.setlist-admin-list details[open] summary {
    border-radius: 8px 8px 0 0;
    border-bottom: none;
}
.setlist-admin-list details form {
    padding: 0.75rem;
    border: 2px solid var(--bb-ink);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.setlist-files-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0 0.5rem;
    color: var(--bb-green-deep);
    font-weight: bold;
}
.setlist-files-link:hover,
.setlist-files-link:focus-visible {
    color: var(--bb-green-mid);
}
.setlist-files-link:focus-visible {
    outline: 3px solid var(--bb-ink);
    outline-offset: 2px;
}

/* Move up/down buttons sized to the recommended 44px minimum tap target. */
.setlist-order-btn {
    width: 44px;
    height: 44px;
    border: 2px solid var(--bb-ink);
    border-radius: 8px;
    background: var(--bb-white);
    color: var(--bb-ink);
    font-size: 1.1rem;
    cursor: pointer;
}
.setlist-order-btn:hover,
.setlist-order-btn:focus-visible {
    background: var(--bb-green-mid);
    color: var(--bb-white);
    border-color: var(--bb-green-mid);
}
.setlist-order-btn:focus-visible {
    outline: 3px solid var(--bb-ink);
    outline-offset: 2px;
}

.setlist-admin-list .btn-red {
    min-height: 44px;
}

/* Mobile mode (<=700px): music.js skips the Three.js init in this case (the 3D furniture is unreadable small), so the player and playlist stay displayed as normal document flow instead of the position:fixed computed by 3D->2D projection.
   The hamburger button (.navbar-toggler, position:fixed with no explicit top) computes its static-position fallback from the first content in <body>'s flow, here .mobile-note: increasing this note's margin-top pushes the button down by the same amount, since they have no direct CSS relationship but the gap between them stays roughly constant. So the banner is shifted horizontally past the button (left: ~86px) instead of vertically below it. */
.mobile-note {
    display: none;
}
html.is-mobile .mobile-note {
    display: block;
    margin: 0.75rem 1rem 0.75rem 86px;
    padding: 0.6rem 0.8rem;
    background: var(--bb-gold-pale);
    color: var(--bb-ink);
    font-size: 0.85rem;
    font-style: italic;
    border-radius: 4px;
}

html.is-mobile .mascotte,
html.is-mobile .loading {
    display: none;
}

html.is-mobile .overlay {
    max-width: 500px;
    margin: 0 auto;
    padding: 0.75rem;
}
html.is-mobile .player-wrap .row:first-child {
    position: static;
    width: 100%;
    height: 91px;
}
html.is-mobile .player-wrap .row.playerButtons {
    position: static;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
}
html.is-mobile .playlist-wrap {
    position: static;
    width: 100%;
    height: auto;
    max-height: 60vh;
}
html.is-mobile .video-overlay {
    padding: 0.5rem;
}
/* Two 50% columns become unreadable below ~500px, so they're stacked instead, with .members-only after .playlist since it's secondary. */
html.is-mobile .playlist,
html.is-mobile .members-only {
    display: block;
    width: 100%;
}
html.is-mobile .playlist {
    border-right: 0;
    border-bottom: 1px solid #664c40;
}