/* ==========================================================================
   Tuner: styles taken from the HTML Radio Tuner plugin (fm-am-dark design)
   unchanged. All selectors are already scoped inside .floating-player-card,
   so the file does not touch the rest of the page. The accent variables below
   are what the plugin's script injects when it loads its settings.
   ========================================================================== */
.floating-player-card {
    /* the site accent (ember) instead of the plugin's orange */
    --rtp-accent-color: #C9502A;
    --rtp-accent-rgb: 201, 80, 42;
}

/* icons: in the plugin Font Awesome draws them, here inline SVGs of the same
   size — the button's font-size controls the size, like a font icon */
.floating-player-card .rt-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
}

/* ==========================================================================
   Premium Radio Tuner Scoped Style Sheet
   ========================================================================== */

/* Scoped variables under the player class */
.floating-player-card {
    --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-button: 0 4px 12px rgba(var(--rtp-accent-rgb), 0.2);
    --primary-orange: var(--rtp-accent-color, #ff6f00);
    --primary-orange-hover: var(--rtp-accent-color, #e06200);

    /* Default (Dark) Design variables fallback */
    --bg-color: #0b0b0c;
    --card-bg: #0b0b0c;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border-color: rgba(255, 255, 255, 0.18);
    --active-bg: rgba(var(--rtp-accent-rgb), 0.15);
    --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --tuner-lines-color: rgba(255, 255, 255, 0.55);
    --cover-bg: transparent;
    --cover-border: 1px solid rgb(255 255 255 / 49%);

    box-sizing: border-box;
    font-family: var(--font-main);
    color: var(--text-primary);
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: var(--shadow-premium);
    display: grid;
    grid-template-columns: 28% 46% 26%;
    align-items: stretch;
    padding: 16px;
    z-index: 99999;
    
    /* Premium Glassmorphism blur */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Explicit Light Theme Variables styling */
.floating-player-card.rtp-design-light {
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --text-primary: #181816;
    --text-secondary: #6e6c64;
    --text-muted: #a3a096;
    --border-color: rgba(229, 226, 217, 0.6);
    --active-bg: rgba(var(--rtp-accent-rgb), 0.08);
    --shadow-premium: 0 20px 40px rgba(24, 24, 22, 0.08);
    --tuner-lines-color: rgba(229, 226, 217, 0.9);
    --cover-bg: var(--bg-color);
    --cover-border: 1px solid var(--border-color);
}

/* Explicit Dark Theme Variables styling */
.floating-player-card.rtp-design-dark {
    --bg-color: #0b0b0c;
    --card-bg: #0b0b0c;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border-color: rgba(255, 255, 255, 0.18);
    --active-bg: rgba(var(--rtp-accent-rgb), 0.15);
    --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --tuner-lines-color: rgba(255, 255, 255, 0.55);
    --cover-bg: transparent;
    --cover-border: 1px solid rgb(255 255 255 / 49%);
}

/* Explicit Glassmorphism Theme Variables styling */
.floating-player-card.rtp-design-glassmorphism {
    --bg-color: transparent;
    --card-bg: rgba(20, 20, 27, 0.45);
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border-color: rgba(255, 255, 255, 0.08);
    --active-bg: rgba(var(--rtp-accent-rgb), 0.2);
    --shadow-premium: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --tuner-lines-color: rgba(255, 255, 255, 0.45);
    --cover-bg: rgba(255, 255, 255, 0.05);
    --cover-border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

/* Floating player-specific positioning */
.floating-player-card.rtp-floating-player {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    margin: 0 auto;
    max-width: 1200px;
    width: calc(100% - 40px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
}

.floating-player-card.rtp-floating-player.rtp-layout-centered {
    max-width: 1200px;
    left: 20px;
    right: 20px;
    width: calc(100% - 40px);
}

.floating-player-card.rtp-floating-player.rtp-layout-fullwidth {
    max-width: none;
    left: 40px;
    right: 40px;
    width: calc(100% - 80px);
}

/* Inline player-specific positioning */
.floating-player-card.rtp-inline-player {
    position: relative;
    margin: 30px auto;
    max-width: 100%;
    width: 100%;
}

.floating-player-card * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.floating-player-card img {
    max-width: 100%;
    height: auto;
}

.floating-player-card button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

/* --- COLUMN 1: STATION DETAILS --- */
.floating-player-card .player-station-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 20px;
    border-right: 1px solid var(--border-color);
}

.floating-player-card .player-cover {
    width: auto;
    max-width: 100%;
    height: 159px;
    background-color: var(--cover-bg);
    border: var(--cover-border);
    padding: 3px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
}

.floating-player-card .player-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* the house plate is the template's own, not a channel's; it is cut to the
   frame exactly as a channel's artwork is */
.floating-player-card .player-cover-img.is-house {
    object-fit: cover;
}

.floating-player-card .player-meta {
    overflow: hidden;
    flex-grow: 1;
    width: 100%;
    min-width: 0;
}

.floating-player-card .live-status {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-orange);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

.floating-player-card .live-dot {
    width: 6px;
    height: 6px;
    background-color: var(--primary-orange);
    border-radius: 50%;
    animation: rtpPulseDot 1s infinite alternate;
}

@keyframes rtpPulseDot {
    0% { opacity: 0.4; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.1); }
}

.floating-player-card .track-title-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

html body .floating-player-card .player-now-playing {
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-orange);
    margin-top: 3px;
    margin-bottom: 3px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.floating-player-card .track-artist-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-player-card .player-action-icons {
    display: flex;
    gap: 12px;
}

.floating-player-card .player-action-icons .icon-btn {
    font-size: 14px;
    color: var(--text-secondary);
}

.floating-player-card .player-action-icons .icon-btn:hover,
.floating-player-card .player-action-icons .icon-btn.liked {
    color: var(--primary-orange);
    transform: scale(1.1);
}

/* --- COLUMN 2: TUNER SCALE --- */
.floating-player-card .player-tuner-section {
    padding: 0 40px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.floating-player-card .tuner-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 8px;
}

.floating-player-card .tuner-arrow {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 12px;
    transition: var(--transition-smooth);
}

.floating-player-card .tuner-arrow:hover {
    background-color: var(--border-color);
    color: var(--primary-orange);
}

.floating-player-card .tuner-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.floating-player-card .tuner-prefix,
.floating-player-card .tuner-suffix {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.floating-player-card .active-station-freq {
    font-size: 48px;
    font-weight: 800;
    color: var(--primary-orange);
    line-height: 1;
    display: inline-block;
    min-width: 3.2em;
    width: auto;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.floating-player-card .tuner-scale-wrapper {
    position: relative;
    padding: 6px 0;
}

.floating-player-card .tuner-scale-container {
    height: 65px;
    position: relative;
    cursor: pointer;
    overflow: hidden; /* clip backlight glow at tuner boundaries */
}

.floating-player-card .tuner-lines {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 12px;
    background: repeating-linear-gradient(90deg, 
        var(--tuner-lines-color) 0px, 
        var(--tuner-lines-color) 1.5px, 
        transparent 1.5px, 
        transparent 5%
    );
    opacity: 0.85;
}

.floating-player-card .tuner-lines::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1.5px;
    height: 100%;
    background-color: var(--tuner-lines-color);
}

.floating-player-card .tuner-labels {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.floating-player-card .tuner-labels span {
    position: absolute;
    transform: translateX(-50%);
}

.floating-player-card .tuner-needle {
    position: absolute;
    top: 0px;
    left: 43.5%;
    transform: translateX(-50%);
    height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: left 0.1s ease-out;
    pointer-events: none;
}

.floating-player-card .tuner-needle.dragging {
    transition: none;
}

.floating-player-card .needle-line {
    width: 2px;
    height: 45px;
    background-color: var(--primary-orange);
    border-radius: 1px;
}

.floating-player-card .needle-knob {
    width: 6px;
    height: 6px;
    background-color: var(--primary-orange);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(var(--rtp-accent-rgb), 0.4);
}

/* --- COLUMN 3: AUDIO CONTROLS & EQUALIZER --- */
.floating-player-card .player-controls-section {
    padding-left: 20px;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    align-self: center;
}

.floating-player-card .eq-status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 10px;
    font-family: var(--font-main);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.floating-player-card .eq-status-indicator .status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #888;
}

.floating-player-card .eq-status-indicator.active .status-dot,
.floating-player-card .eq-status-indicator.bypassed .status-dot {
    background-color: #10b981;
    box-shadow: 0 0 4px #10b981;
}

.floating-player-card .player-equalizer-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-grow: 1;
    padding-top: 5px;
    padding-bottom: 5px;
}

.floating-player-card .equalizer-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    height: 100%;
    justify-content: flex-end;
}

.floating-player-card .equalizer-track {
    position: relative;
    width: 1px;
    height: 44px;
    background-color: var(--border-color);
}

.floating-player-card .equalizer-track::before {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 7px;
    height: 100%;
    background: repeating-linear-gradient(to bottom,
        var(--text-muted) 0px,
        var(--text-muted) 1px,
        transparent 1px,
        transparent 5px
    );
    opacity: 0.5;
}

.floating-player-card .equalizer-handle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 12px;
    height: 12px;
    background-color: var(--text-primary);
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 50%;
    transition: bottom 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: grab;
}

.floating-player-card .equalizer-handle.dragging {
    transition: none;
}

.floating-player-card .equalizer-handle .handle-dot {
    width: 4px;
    height: 4px;
    background-color: var(--primary-orange);
    border-radius: 50%;
}

.floating-player-card .equalizer-label {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1;
    text-align: center;
}

.floating-player-card .player-controls-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 6px 0;
    width: 100%;
}

.floating-player-card .player-volume-play-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 36px;
}

.floating-player-card .volume-icon-btn {
    font-size: 14px;
    color: var(--primary-orange);
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.floating-player-card .volume-icon-btn svg.icon-volume {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transition: fill var(--transition-smooth), opacity var(--transition-smooth);
}

.floating-player-card .volume-icon-btn:hover {
    color: var(--primary-orange);
    opacity: 0.8;
}

.floating-player-card .volume-slider-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.floating-player-card .volume-slider-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
}

.floating-player-card .volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: transparent;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    z-index: 2;
    margin: 0;
    padding: 0;
}

.floating-player-card .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-orange);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: var(--transition-smooth);
}

.floating-player-card .volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: var(--primary-orange);
}

.floating-player-card .volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background: var(--primary-orange);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: var(--transition-smooth);
}

.floating-player-card .volume-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: var(--primary-orange);
}

.floating-player-card .volume-slider-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 80%;
    height: 4px;
    background-color: var(--primary-orange);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

.floating-player-card .player-play-btn {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--primary-orange);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    transition: color var(--transition-smooth), transform var(--transition-smooth);
}

.floating-player-card .player-play-btn:hover {
    color: var(--primary-orange);
    background-color: transparent;
    border-color: transparent;
    transform: scale(1.15);
}

.floating-player-card .player-play-btn.playing {
    color: var(--primary-orange);
    background-color: transparent;
    border-color: transparent;
}


/* ==========================================================================
   Responsive Scoped Styles
   ========================================================================== */

@media (max-width: 1200px) {
    .floating-player-card {
        grid-template-columns: 33% 40% 27%;
    }
    .floating-player-card.rtp-floating-player {
        width: calc(100% - 80px);
        margin: 0 auto 16px auto;
    }
}

@media (max-width: 991px) {
    .floating-player-card {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    .floating-player-card.rtp-floating-player {
        margin: 0 20px 16px 20px;
        width: calc(100% - 40px);
        max-width: 100%;
    }
    .floating-player-card .player-station-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 15px;
    }
    .floating-player-card .player-action-icons {
        justify-content: center;
    }
    .floating-player-card .live-status {
        justify-content: center;
    }
    .floating-player-card .player-tuner-section {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 0 0 15px 0;
    }
    .floating-player-card .player-controls-section {
        padding-left: 0;
        padding-right: 0;
        align-self: stretch;
    }
}

@media (max-width: 768px) {
    #rt-player-card.rtp-floating-player,
    #rt-player-card.rtp-floating-player.rtp-layout-centered,
    #rt-player-card.rtp-floating-player.rtp-layout-fullwidth {
        left: 10px;
        right: 10px;
        width: calc(100% - 20px);
        margin: 0 auto 16px auto;
        max-width: calc(100% - 20px);
    }
    .floating-player-card {
        padding: 15px;
    }
    .floating-player-card .player-cover {
        width: 100%;
        max-width: 100%;
        height: 100px;
    }
    html body .floating-player-card .player-tuner-section {
        display: flex;
        padding: 15px 0;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    html body .floating-player-card .tuner-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0;
        margin-bottom: 10px;
    }
    .floating-player-card .tuner-arrow {
        width: 36px;
        height: 36px;
        font-size: 11px;
    }
    .floating-player-card .tuner-title {
        gap: 10px;
    }
    .floating-player-card .tuner-prefix,
    .floating-player-card .tuner-suffix {
        font-size: 14px;
    }
    .floating-player-card .active-station-freq {
        font-size: 40px;
        min-width: 3.2em;
        width: auto;
    }
    .floating-player-card .tuner-scale-container {
        height: 38px;
    }
    .floating-player-card .tuner-labels {
        font-size: 11px;
        top: 25px;
    }
    .floating-player-card .tuner-needle {
        height: 32px;
    }
    .floating-player-card .needle-line {
        height: 24px;
        width: 2px;
    }
    .floating-player-card .needle-knob {
        width: 6px;
        height: 6px;
    }

    /* Hide the station cover logo on mobile */
    html body .floating-player-card .player-cover {
        display: none;
    }

    /* Position minimize button in the top-right corner of the player card / info box */
    html body .floating-player-card:not(.rtp-minimized) .rtp-minimize-btn {
        top: 15px;
        right: 15px;
        left: auto;
        z-index: 100;
    }
}

/* ==========================================================================
   Collapsible / Minimized Player States
   ========================================================================== */

/* Minimize Button (Main View) */
.floating-player-card .rtp-minimize-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    color: var(--primary-orange);
    cursor: pointer;
    font-size: 16px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition-smooth);
    z-index: 10;
    width: 32px;
    height: 32px;
}
.floating-player-card .rtp-minimize-btn:hover {
    background-color: var(--active-bg);
    opacity: 0.8;
}

/* Minimized View Bar */
.floating-player-card .rtp-minimized-bar {
    display: none;
}

/* Minimized Player Card Modifier */
#rt-player-card.rtp-minimized {
    display: block;
    grid-template-columns: none;
    width: 320px;
    max-width: calc(100% - 40px);
    height: 72px;
    padding: 12px 16px;
    border-radius: 36px;
    overflow: hidden;
    bottom: 20px;
    left: auto;
    right: 20px;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Minimized Elements Toggle */
#rt-player-card.rtp-minimized .player-station-info,
#rt-player-card.rtp-minimized .player-band-section,
#rt-player-card.rtp-minimized .player-tuner-section,
#rt-player-card.rtp-minimized .player-vu-section,
#rt-player-card.rtp-minimized .player-controls-section,
#rt-player-card.rtp-minimized .rtp-minimize-btn {
    display: none;
}

#rt-player-card.rtp-minimized .rtp-minimized-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    gap: 12px;
}

/* Minimized Inner Layout */
.rtp-minimized-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.rtp-minimized-cover {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 2px solid var(--border-color);
    background-color: var(--bg-color);
}
html body .floating-player-card .rtp-minimized-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: rtp-spin 12s linear infinite;
    animation-play-state: paused;
}
.floating-player-card.rtp-playing .rtp-minimized-cover-img {
    animation-play-state: running;
}
.rtp-minimized-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.rtp-minimized-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.rtp-minimized-desc {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    line-height: 1.2;
}

/* Minimized Action Controls */
.rtp-minimized-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.rtp-minimized-play-btn,
.rtp-minimized-expand-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background-color: var(--active-bg);
    color: var(--primary-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 12px;
}
.rtp-minimized-play-btn:hover,
.rtp-minimized-expand-btn:hover {
    background-color: var(--primary-orange);
    color: #ffffff;
}

/* Spin Animation */
@keyframes rtp-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mobile responsive minimized positions */
@media (max-width: 768px) {
    html body .floating-player-card.rtp-minimized {
        left: 10px;
        right: 10px;
        margin: 0 auto;
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        bottom: 16px;
    }
}

/* Explicit VU Meter Light Theme Variables styling */
.floating-player-card.rtp-design-vu-light {
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --text-primary: #181816;
    --text-secondary: #6e6c64;
    --text-muted: #a3a096;
    --border-color: rgba(229, 226, 217, 0.6);
    --active-bg: rgba(var(--rtp-accent-rgb), 0.08);
    --shadow-premium: 0 20px 40px rgba(24, 24, 22, 0.08);
    --tuner-lines-color: rgba(229, 226, 217, 0.9);
    --cover-bg: var(--bg-color);
    --cover-border: 1px solid var(--border-color);
}

/* Explicit VU Meter Dark Theme Variables styling */
.floating-player-card.rtp-design-vu-dark {
    --bg-color: #0b0b0c;
    --card-bg: #0b0b0c;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border-color: rgba(255, 255, 255, 0.18);
    --active-bg: rgba(var(--rtp-accent-rgb), 0.15);
    --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --tuner-lines-color: rgba(255, 255, 255, 0.55);
    --cover-bg: transparent;
    --cover-border: 1px solid rgb(255 255 255 / 49%);
}

/* VU Layout Grid & Section Styling */
.rtp-vu-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    width: 100%;
    padding-right: 3px;
}

.rtp-vu-top-row .eq-status-indicator {
    margin-bottom: 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.rtp-vu-eq-toggle-link {
    font-size: 10px;
    font-family: var(--font-main);
    font-weight: 700;
    color: var(--primary-orange);
    text-decoration: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1;
    transition: var(--transition-smooth);
}
.rtp-vu-eq-toggle-link:hover {
    color: var(--primary-orange-hover);
    opacity: 0.8;
}

.rtp-vu-middle-area {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    margin: 0px 0 2px 0;
}

.rtp-vu-meter-layout .rtp-vu-middle-area {
    height: auto;
    align-items: flex-start;
}

.rtp-vu-meter-layout .vu-meters-container {
    display: flex;
    gap: 12px;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
}

.rtp-vu-meter-layout .vu-meter-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 50%;
    width: 50%;
    height: auto;
}

.rtp-vu-meter-layout .vu-dial-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 150;
    max-height: 125px;
    margin: 0 auto;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.rtp-vu-meter-layout .vu-dial-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 8px;
    box-sizing: border-box;
}

.rtp-design-vu-light .vu-dial-wrapper::after {
    box-shadow: 
        inset 0 8px 12px rgba(0, 0, 0, 0.16),
        inset 4px 0 6px rgba(0, 0, 0, 0.06),
        inset -4px 0 6px rgba(0, 0, 0, 0.06),
        inset 0 -2px 4px rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.rtp-design-vu-dark .vu-dial-wrapper::after {
    box-shadow: 
        inset 0 8px 12px rgba(0, 0, 0, 0.65),
        inset 4px 0 6px rgba(0, 0, 0, 0.4),
        inset -4px 0 6px rgba(0, 0, 0, 0.4),
        inset 0 -2px 4px rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.floating-player-card .player-controls-section.rtp-vu-meter-layout {
    justify-content: flex-start;
}

.floating-player-card .player-controls-section.rtp-vu-meter-layout .player-volume-play-row {
    margin-top: auto;
}

.rtp-vu-meter-layout .vu-dial-svg {
    width: 100%;
    height: auto;
    display: block;
}

.rtp-vu-meter-layout .player-volume-play-row {
    height: 20px;
}

.rtp-vu-meter-layout .player-volume-play-row .volume-icon-btn svg.icon-volume {
    width: 16px;
    height: 16px;
}

.rtp-vu-meter-layout .player-volume-play-row .player-play-btn {
    font-size: 13px;
    padding: 3px;
}

/* --- VU EQUALIZER DESIGN (Separate Grid & Classes) --- */
.floating-player-card .rtp-vu-equalizer-section {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Center vertically inside middle area */
    width: 100%;
    height: 114px; /* Matches the exact dial height of 114px on iMac for constant card height */
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);
}

.floating-player-card .rtp-vu-equalizer-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20px;
    height: 100%;
    justify-content: center; /* Center the tracks and labels vertically */
}

.floating-player-card .rtp-vu-equalizer-track {
    position: relative;
    width: 1px;
    height: 50px; /* Standard track height matching other tuners (no longer bulky/tall) */
    background-color: var(--border-color);
}

.floating-player-card .rtp-vu-equalizer-track::before {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 7px;
    height: 100%;
    background: repeating-linear-gradient(to bottom,
        var(--text-muted) 0px,
        var(--text-muted) 1px,
        transparent 1px,
        transparent 5px
    );
    opacity: 0.5;
}

.floating-player-card .rtp-vu-equalizer-handle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 12px;
    height: 14px;
    background-color: var(--text-primary);
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 50%;
    transition: bottom 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: grab;
}

.floating-player-card .rtp-vu-equalizer-handle.dragging {
    transition: none;
}

.floating-player-card .rtp-vu-equalizer-handle .handle-dot {
    width: 4px;
    height: 4px;
    background-color: var(--primary-orange);
    border-radius: 50%;
}

.floating-player-card .rtp-vu-equalizer-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1;
    text-align: center;
}

@media (min-width: 992px) {
    .floating-player-card.rtp-design-vu-light,
    .floating-player-card.rtp-design-vu-dark {
        min-height: 205px;
    }
    .rtp-vu-meter-layout .vu-dial-wrapper {
        aspect-ratio: 300 / 148;
    }
    .rtp-vu-meter-layout .rtp-vu-middle-area {
        align-items: center;
    }
}

/* ==========================================================================
   CRITICAL DESIGN RULE - DO NOT TOUCH OR MODIFY
   This styling is specifically optimized and approved for iMac / Mac screens 
   with width 2350px and above. DO NOT change aspect ratios or add height bounds.
   ========================================================================== */
@media (min-width: 2350px) {
    .rtp-vu-meter-layout .vu-dial-wrapper {
        aspect-ratio: 300 / 115;
    }
}

/* --- VU LAYOUT SPECIFIC: CORNER FLOATING MINIMIZE BUTTON --- */
.rtp-design-vu-light .rtp-minimize-btn {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--primary-orange);
    z-index: 100;
}
.rtp-design-vu-light .rtp-minimize-btn:hover {
    background-color: #f4f4f5;
    transform: translate(35%, -35%) scale(1.05);
    opacity: 0.95;
}

.rtp-design-vu-dark .rtp-minimize-btn {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
    background-color: #1c1c1e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    color: var(--primary-orange);
    z-index: 100;
}
.rtp-design-vu-dark .rtp-minimize-btn:hover {
    background-color: #2c2c2e;
    transform: translate(35%, -35%) scale(1.05);
    opacity: 0.95;
}
/* ==========================================================================
   FM-AM 5-Column Theme Styles
   ========================================================================== */

/* Theme variables and layout overrides */
.floating-player-card.rtp-design-fm-am-light,
.floating-player-card.rtp-design-fm-am-dark {
    display: grid;
    grid-template-columns: 32% 40% 28%;
    align-items: stretch;
    padding: 16px;
    box-sizing: border-box;
}

.floating-player-card.rtp-design-fm-am-light {
    --bg-color: #ffffff;
    --card-bg: #ffffff;
    --text-primary: #181816;
    --text-secondary: #6e6c64;
    --text-muted: #a3a096;
    --border-color: rgba(229, 226, 217, 0.6);
    --active-bg: rgba(var(--rtp-accent-rgb), 0.08);
    --shadow-premium: 0 20px 40px rgba(24, 24, 22, 0.08);
    --tuner-lines-color: rgba(229, 226, 217, 0.9);
    --cover-bg: var(--bg-color);
    --cover-border: 1px solid var(--border-color);
}

.floating-player-card.rtp-design-fm-am-dark {
    --bg-color: #0b0b0c;
    --card-bg: #0b0b0c;
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --border-color: rgba(255, 255, 255, 0.18);
    --active-bg: rgba(var(--rtp-accent-rgb), 0.15);
    --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --tuner-lines-color: rgba(255, 255, 255, 0.55);
    --cover-bg: transparent;
    --cover-border: 1px solid rgb(255 255 255 / 49%);
}

/* Experimental Tuner Scale Backlight (fm-am-dark) - widened soft needle center spotlight */
.floating-player-card.rtp-design-fm-am-dark .tuner-needle::before {
    content: '';
    position: absolute;
    top: -2.5px; /* centered vertically along the needle height (55px) with 60px height */
    left: 50%;
    transform: translateX(-50%);
    width: 190px; /* widened backlight */
    height: 60px; /* taller backlight */
    background: radial-gradient(ellipse at center, rgba(234, 88, 12, 0.18) 0%, rgba(234, 88, 12, 0.04) 55%, transparent 75%);
    pointer-events: none;
    z-index: 1; /* render on top of lines for illumination effect */
    mix-blend-mode: screen;
}

.floating-player-card.rtp-design-fm-am-dark .tuner-needle .needle-line {
    box-shadow: 0 0 5px rgba(234, 88, 12, 0.5);
    position: relative;
    z-index: 2; /* render needle line strictly on top of spotlight glow */
}

/* Column 1: Station Details */
.floating-player-card.rtp-design-fm-am-light .player-station-info,
.floating-player-card.rtp-design-fm-am-dark .player-station-info {
    border-right: 1px solid var(--border-color);
    padding-right: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: auto;
}

/* Column 2: Band Switcher */
.floating-player-card.rtp-design-fm-am-light .player-band-section,
.floating-player-card.rtp-design-fm-am-dark .player-band-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
    border-right: 1px solid var(--border-color);
    align-items: center;
}

.floating-player-card.rtp-design-fm-am-light .band-btn,
.floating-player-card.rtp-design-fm-am-dark .band-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    transition: var(--transition-smooth);
}

.floating-player-card.rtp-design-fm-am-light .band-btn {
    color: var(--text-secondary);
}

.floating-player-card.rtp-design-fm-am-dark .band-btn {
    color: var(--text-secondary);
}

.floating-player-card.rtp-design-fm-am-light .band-btn:hover,
.floating-player-card.rtp-design-fm-am-dark .band-btn:hover {
    border-color: var(--primary-orange);
    color: var(--text-primary);
}

html body .floating-player-card.rtp-design-fm-am-light .band-btn.active,
html body .floating-player-card.rtp-design-fm-am-dark .band-btn.active {
    background-color: var(--primary-orange);
    border-color: var(--primary-orange);
    color: #ffffff;
}

/* Experimental Tuner Band Toggle */
html body .floating-player-card.rtp-design-fm-am-light .tuner-band-toggle,
html body .floating-player-card.rtp-design-fm-am-dark .tuner-band-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-radius: 6px;
    box-sizing: border-box;
    height: 28px;
    overflow: hidden;
}

html body .floating-player-card.rtp-design-fm-am-dark .tuner-band-toggle {
    background: #121214;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html body .floating-player-card.rtp-design-fm-am-light .tuner-band-toggle {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

html body .floating-player-card.rtp-design-fm-am-light .tuner-band-toggle .band-btn,
html body .floating-player-card.rtp-design-fm-am-dark .tuner-band-toggle .band-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: var(--transition-smooth);
}

html body .floating-player-card.rtp-design-fm-am-light .tuner-band-toggle .band-btn + .band-btn {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

html body .floating-player-card.rtp-design-fm-am-dark .tuner-band-toggle .band-btn + .band-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

html body .floating-player-card.rtp-design-fm-am-light .tuner-band-toggle .band-btn.active,
html body .floating-player-card.rtp-design-fm-am-light .tuner-band-toggle .band-btn.active + .band-btn {
    border-left-color: transparent;
}

html body .floating-player-card.rtp-design-fm-am-dark .tuner-band-toggle .band-btn.active,
html body .floating-player-card.rtp-design-fm-am-dark .tuner-band-toggle .band-btn.active + .band-btn {
    border-left-color: transparent;
}

html body .floating-player-card.rtp-design-fm-am-dark .tuner-band-toggle .band-btn {
    color: #a1a1aa;
}

html body .floating-player-card.rtp-design-fm-am-light .tuner-band-toggle .band-btn {
    color: #71717a;
}

html body .floating-player-card.rtp-design-fm-am-dark .tuner-band-toggle .band-btn:hover:not(.active) {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}

html body .floating-player-card.rtp-design-fm-am-light .tuner-band-toggle .band-btn:hover:not(.active) {
    color: #111111;
    background: rgba(0, 0, 0, 0.03);
}

html body .floating-player-card.rtp-design-fm-am-light .tuner-band-toggle .band-btn.active,
html body .floating-player-card.rtp-design-fm-am-dark .tuner-band-toggle .band-btn.active {
    background-color: var(--primary-orange);
    color: #ffffff;
}

/* Column 3: Tuner section */
.floating-player-card.rtp-design-fm-am-light .player-tuner-section,
.floating-player-card.rtp-design-fm-am-dark .player-tuner-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 16px;
    border-right: 1px solid var(--border-color);
}

.floating-player-card.rtp-design-fm-am-light .active-station-location,
.floating-player-card.rtp-design-fm-am-dark .active-station-location {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.floating-player-card.rtp-design-fm-am-light .active-station-location {
    color: var(--text-secondary);
}

.floating-player-card.rtp-design-fm-am-dark .active-station-location {
    color: var(--text-secondary);
}



.floating-player-card.rtp-design-fm-am-light .vu-meters-container,
.floating-player-card.rtp-design-fm-am-dark .vu-meters-container {
    display: flex;
    gap: 12px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.floating-player-card.rtp-design-fm-am-light .vu-meter-box,
.floating-player-card.rtp-design-fm-am-dark .vu-meter-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 50%;
    width: 50%;
}

.floating-player-card.rtp-design-fm-am-light .vu-dial-wrapper,
.floating-player-card.rtp-design-fm-am-dark .vu-dial-wrapper {
    width: 100%;
    aspect-ratio: 300 / 150;
    margin: 0 auto;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.floating-player-card.rtp-design-fm-am-light .vu-dial-wrapper::after,
.floating-player-card.rtp-design-fm-am-dark .vu-dial-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 8px;
    box-sizing: border-box;
}

.floating-player-card.rtp-design-fm-am-light .vu-dial-wrapper::after {
    box-shadow: 
        inset 0 8px 12px rgba(0, 0, 0, 0.16),
        inset 4px 0 6px rgba(0, 0, 0, 0.06),
        inset -4px 0 6px rgba(0, 0, 0, 0.06),
        inset 0 -2px 4px rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.floating-player-card.rtp-design-fm-am-dark .vu-dial-wrapper::after {
    box-shadow: 
        inset 0 8px 12px rgba(0, 0, 0, 0.65),
        inset 4px 0 6px rgba(0, 0, 0, 0.4),
        inset -4px 0 6px rgba(0, 0, 0, 0.4),
        inset 0 -2px 4px rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.5);
}

.floating-player-card.rtp-design-fm-am-light .vu-dial-svg,
.floating-player-card.rtp-design-fm-am-dark .vu-dial-svg {
    width: 100%;
    height: auto;
    display: block;
}

.floating-player-card.rtp-design-fm-am-light .vu-dial-label,
.floating-player-card.rtp-design-fm-am-dark .vu-dial-label {
    font-size: 9px;
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0.1em;
}

.floating-player-card.rtp-design-fm-am-light .vu-dial-label {
    color: var(--text-secondary);
}

.floating-player-card.rtp-design-fm-am-dark .vu-dial-label {
    color: var(--text-secondary);
}

/* EQ section for FM-AM light/dark */




/* Minimize button styling for FM-AM themes */
.rtp-design-fm-am-light .rtp-minimize-btn {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--primary-orange);
    z-index: 100;
}

.rtp-design-fm-am-light .rtp-minimize-btn:hover {
    color: var(--primary-orange);
    background-color: rgba(var(--rtp-accent-rgb), 0.08);
}

.rtp-design-fm-am-dark .rtp-minimize-btn {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
    background-color: #1c1c1e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    color: var(--primary-orange);
    z-index: 100;
}

.rtp-design-fm-am-dark .rtp-minimize-btn:hover {
    color: var(--primary-orange);
    background-color: rgba(var(--rtp-accent-rgb), 0.15);
}



.floating-player-card.rtp-design-fm-am-light .volume-icon-btn svg.icon-volume,
.floating-player-card.rtp-design-fm-am-dark .volume-icon-btn svg.icon-volume {
    width: 18px;
    height: 18px;
}

.floating-player-card.rtp-design-fm-am-light .player-play-btn,
.floating-player-card.rtp-design-fm-am-dark .player-play-btn {
    font-size: 14px;
}

.floating-player-card.rtp-design-fm-am-light .volume-slider-wrapper,
.floating-player-card.rtp-design-fm-am-dark .volume-slider-wrapper {
    margin: 0 6px;
}

/* Volume Slider thumb override for FM-AM layouts - skeuomorphic dark thumb */
.floating-player-card.rtp-design-fm-am-light .volume-slider::-webkit-slider-thumb,
.floating-player-card.rtp-design-fm-am-dark .volume-slider::-webkit-slider-thumb {
    background: #2d2d2d;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    margin-top: 0px;
}
.floating-player-card.rtp-design-fm-am-light .volume-slider::-moz-range-thumb,
.floating-player-card.rtp-design-fm-am-dark .volume-slider::-moz-range-thumb {
    background: #2d2d2d;
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.floating-player-card.rtp-design-fm-am-light .volume-slider::-webkit-slider-thumb:hover,
.floating-player-card.rtp-design-fm-am-dark .volume-slider::-webkit-slider-thumb:hover {
    background: #111111;
    transform: scale(1.1);
}
.floating-player-card.rtp-design-fm-am-light .volume-slider::-moz-range-thumb:hover,
.floating-player-card.rtp-design-fm-am-dark .volume-slider::-moz-range-thumb:hover {
    background: #111111;
    transform: scale(1.1);
}

/* Media query to make VU dials wider and taller on desktops and keep grid ratios */
@media (min-width: 992px) {
    .floating-player-card.rtp-design-fm-am-light,
    .floating-player-card.rtp-design-fm-am-dark {
        grid-template-columns: 32% 38% 30%;
    }
    .floating-player-card.rtp-design-fm-am-light .rtp-vu-middle-area,
    .floating-player-card.rtp-design-fm-am-dark .rtp-vu-middle-area {
        margin: 0px 0 2px 0;
    }
}

/* User-requested: Below 1350px screen width but not on mobile, set player cover to 175px width */
@media (max-width: 1350px) and (min-width: 769px) {
    .floating-player-card .player-cover {
        width: 175px;
        max-width: 100%;
    }
}

/* Custom dimmer backlight and optimized spacing for 2K/4K/5K large monitors (above 2000px width) */
@media (min-width: 2000px) {
    .floating-player-card.rtp-design-fm-am-dark .tuner-needle::before {
        background: radial-gradient(ellipse at center, rgba(234, 88, 12, 0.10) 0%, rgba(234, 88, 12, 0.02) 55%, transparent 75%);
    }
    /* Generous premium card padding for high resolution displays */
    .floating-player-card {
        padding: 22px 24px;
    }
    .floating-player-card .player-station-info {
        padding-right: 28px;
        gap: 24px;
    }
    .floating-player-card .player-tuner-section {
        padding: 0 48px;
    }
    .floating-player-card .player-controls-section {
        padding-left: 28px;
        padding-right: 14px;
    }
}

/* Equalizer and VU Meters width boundary to prevent controls stretching too far on large screens */
html body .floating-player-card .player-equalizer-section,
html body .floating-player-card .rtp-vu-equalizer-section,
html body .floating-player-card .vu-meters-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}







/* Fix VU needle rotation center pivot */
.floating-player-card .vu-needle-left,
.floating-player-card .vu-needle-right {
    transform-origin: 150px 145px;
}

/* ==========================================================================
   Template fix on top of the plugin: its fm-am design block sets display:
   grid with more weight than the mobile rule higher in the file, so on a
   phone the card stayed in three columns and they got squashed. Fold it into
   one column — the plugin's other mobile rules are already written for that.
   ========================================================================== */
@media (max-width: 991px) {
    .floating-player-card.rtp-design-fm-am-light,
    .floating-player-card.rtp-design-fm-am-dark {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
}

/* --------------------------------------------------------------------------
   Corners: in the plugin the card is rounded at 24px, the cover at 14/10, the
   meters and the FM/AM switch at 8 and 6. The site has sharp corners — the
   rounding is removed. Round buttons (tuning arrows) stay round, that is the
   button's shape.
   -------------------------------------------------------------------------- */
.floating-player-card,
.floating-player-card .player-cover,
.floating-player-card .player-cover-img,
.floating-player-card.rtp-design-fm-am-light .vu-dial-wrapper,
.floating-player-card.rtp-design-fm-am-dark .vu-dial-wrapper,
.floating-player-card.rtp-design-fm-am-light .vu-dial-wrapper::after,
.floating-player-card.rtp-design-fm-am-dark .vu-dial-wrapper::after,
.floating-player-card .rtp-vu-meter-layout .vu-dial-wrapper,
.floating-player-card .rtp-vu-meter-layout .vu-dial-wrapper::after,
.floating-player-card .rtp-vu-meter-layout .vu-dial-wrapper::after {
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   Scale labels. In the plugin the script assigns left to every digit when it
   splits the range; in static markup left is unset and all eleven numbers
   collapsed into one point at the left edge. Lay them out at an even step.
   -------------------------------------------------------------------------- */
.floating-player-card .tuner-labels span:nth-child(1)  { left: 0; }
.floating-player-card .tuner-labels span:nth-child(2)  { left: 10%; }
.floating-player-card .tuner-labels span:nth-child(3)  { left: 20%; }
.floating-player-card .tuner-labels span:nth-child(4)  { left: 30%; }
.floating-player-card .tuner-labels span:nth-child(5)  { left: 40%; }
.floating-player-card .tuner-labels span:nth-child(6)  { left: 50%; }
.floating-player-card .tuner-labels span:nth-child(7)  { left: 60%; }
.floating-player-card .tuner-labels span:nth-child(8)  { left: 70%; }
.floating-player-card .tuner-labels span:nth-child(9)  { left: 80%; }
.floating-player-card .tuner-labels span:nth-child(10) { left: 90%; }
.floating-player-card .tuner-labels span:nth-child(11) { left: 100%; }

/* the outer digits must not stick halfway out of the scale */
.floating-player-card .tuner-labels span:first-child { transform: none; }
.floating-player-card .tuner-labels span:last-child  { transform: translateX(-100%); }

/* frequency: font and colour as in the site's previous tuner — Orbitron,
   white */
.floating-player-card .active-station-freq {
    font-family: "Orbitron", "DM Mono", ui-monospace, monospace;
    font-weight: 700;
    color: #F5F4F1;
}

/* --------------------------------------------------------------------------
   Typography: the plugin is built on Outfit, the template on its own fonts.
   The card's base font switches to the site's text font, and the service rows
   (on air, frequency, scale labels, equaliser) to monospace, as in the
   previous tuner.
   -------------------------------------------------------------------------- */
.floating-player-card {
    --font-main: "Archivo", Helvetica, Arial, sans-serif;
}

/* meta rows: LIVE ON AIR, station frequency, EQ OFF, the equaliser link */
.floating-player-card .live-status,
.floating-player-card .track-artist-desc,
.floating-player-card .eq-status-indicator,
.floating-player-card .rtp-vu-eq-toggle-link {
    font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* station name — the site's text font, as .tuner__name was before */
.floating-player-card .track-title-name {
    font-family: "Archivo", Helvetica, Arial, sans-serif;
    font-size: clamp(14px, .94vw, 20px);
    font-weight: 600;
    line-height: 1.2;
}

.floating-player-card .tuner-labels span {
    font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    letter-spacing: .1em;
}

.floating-player-card .tuner-suffix {
    font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* the monospace font is wider than Outfit and '94.8 FM · Lounge' hit the
   ellipsis; the row may wrap, the clipping is removed */
.floating-player-card .track-artist-desc {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* only the scale moves down — ticks, digits and the tuning needle. The
   frequency row stays where it stood with centre alignment: the column is
   laid out from the top, and its previous 13px offset is set explicitly,
   otherwise 94.8 drifted to the very top of the column */
.floating-player-card.rtp-design-fm-am-light .player-tuner-section,
.floating-player-card.rtp-design-fm-am-dark .player-tuner-section {
    justify-content: flex-start;
    padding-top: 13px;
}

.floating-player-card .tuner-scale-wrapper {
    margin-top: 21px;
}

/* cover without a frame: in the plugin it has a light line and 3px of padding
   around it */
.floating-player-card.rtp-design-fm-am-light .player-cover,
.floating-player-card.rtp-design-fm-am-dark .player-cover {
    border: 0;
    padding: 0;
    background-color: transparent;
}

/* --------------------------------------------------------------------------
   Equaliser status row. On — yellow text, green dot; off — grey text, crimson
   dot. The state comes from the script through the aria-pressed attribute, no
   separate class needed.
   -------------------------------------------------------------------------- */
.floating-player-card .eq-status-indicator .status-text {
    color: var(--text-muted);
}

.floating-player-card .eq-status-indicator[aria-pressed="true"] .status-text {
    color: var(--rtp-accent-color);
}

.floating-player-card .eq-status-indicator .status-dot {
    background-color: #E0245E;
    box-shadow: 0 0 4px rgba(224, 36, 94, .6);
}

.floating-player-card .eq-status-indicator[aria-pressed="true"] .status-dot,
.floating-player-card .eq-status-indicator[aria-pressed="true"].active .status-dot {
    background-color: #2FBF5F;
    box-shadow: 0 0 4px rgba(47, 191, 95, .7);
}

/* everything clickable shows a hand cursor — otherwise it is not obvious that
   the EQ label and the EQUALIZER link are buttons */
.floating-player-card .eq-status-indicator,
.floating-player-card .rtp-vu-eq-toggle-link,
.floating-player-card button {
    cursor: pointer;
}

/* the card border thinner than a hairline: 0.8px instead of a full pixel */
.floating-player-card {
    border-width: 0.8px;
}

/* --------------------------------------------------------------------------
   Meter frame ratio. In the plugin it is 300/150 with the height capped at
   125px: on a wide screen the dial does not fit the frame and its bottom is
   cut off — there the meter looks compact. At 1920 it fits entirely and an
   empty strip hangs underneath. Give the frame the ratio that results at 2560
   (300/110) — then the crop is identical at any width, and at 2560 the size
   does not change at all.
   -------------------------------------------------------------------------- */
.floating-player-card.rtp-design-fm-am-light .vu-dial-wrapper,
.floating-player-card.rtp-design-fm-am-dark .vu-dial-wrapper {
    aspect-ratio: 300 / 110;
}

/* --------------------------------------------------------------------------
   Card size. In the plugin the height is held by fixed pixels (cover 159,
   padding 16, frequency 48), so the tuner is the same height on any screen
   while everything around it scales with the window width — at 1920 it looks
   heavy. Vertical metrics switch to vw. Each value's ceiling equals the
   previous number at 2560, so on a wide screen the sizes are unchanged and
   below it the tuner shrinks with the page.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .floating-player-card.rtp-design-fm-am-light,
    .floating-player-card.rtp-design-fm-am-dark {
        padding: clamp(12px, .63vw, 16px);
    }

    .floating-player-card .player-cover {
        height: clamp(112px, 6.21vw, 159px);
    }

    .floating-player-card .active-station-freq {
        font-size: clamp(34px, 1.88vw, 48px);
    }

    .floating-player-card .tuner-arrow {
        width: clamp(28px, 1.41vw, 36px);
        height: clamp(28px, 1.41vw, 36px);
    }

    .floating-player-card .tuner-scale-container {
        height: clamp(46px, 2.54vw, 65px);
    }

    .floating-player-card .tuner-needle {
        height: clamp(39px, 2.15vw, 55px);
    }

    .floating-player-card .needle-line {
        height: clamp(32px, 1.76vw, 45px);
    }

    .floating-player-card .tuner-scale-wrapper {
        margin-top: clamp(12px, .82vw, 21px);
    }

    .floating-player-card.rtp-design-fm-am-light .player-tuner-section,
    .floating-player-card.rtp-design-fm-am-dark .player-tuner-section {
        padding-top: clamp(8px, .51vw, 13px);
    }
}

/* --------------------------------------------------------------------------
   The equaliser faders took a fixed 114px — sized for the previous fixed
   meter size. Now the meters are fluid, and the card jumped in height when
   switching. Compute the fader height with the same ratio as the dial: it
   takes half the column, so across the full width that is 300/55.
   -------------------------------------------------------------------------- */
.floating-player-card .rtp-vu-equalizer-section {
    height: auto;
    aspect-ratio: 300 / 55;
}

/* --------------------------------------------------------------------------
   AVAVA Radio Station: initial states that the Online template kept as inline
   styles. The card script toggles them at run time.
   -------------------------------------------------------------------------- */
.floating-player-card .player-now-playing { display: none; }
.floating-player-card .vu-meters-container { display: flex; }
.floating-player-card .rtp-vu-equalizer-section { display: none; }
.floating-player-card .vu-needle-left,
.floating-player-card .vu-needle-right { transform-origin: 150px 145px; transform: rotate(-50deg); }