/*
 * RT Now Playing Panel — rt-nowplaying.css
 * Design: Cover-Karten mit kanalspezifischen Akzentfarben
 * Version: 2.20.9
 */

/* ── Headline ────────────────────────────────────────────────── */
.rt-nowplaying-header {
    margin: 0 0 1.25rem;
}
.rt-nowplaying-headline {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
.rt-nowplaying-headline::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: #c0272d;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Kanal-Farbpaletten ─────────────────────────────────────── */
.rtnp-c1 { --rtnp-accent: #c0392b; --rtnp-bg: #2d1010; --rtnp-glow: rgba(192,57,43,.35); }  /* Hauptkanal – Rot    */
.rtnp-c2 { --rtnp-accent: #8b5cf6; --rtnp-bg: #1e1230; --rtnp-glow: rgba(139,92,246,.35); } /* Konzertant  – Violett */
.rtnp-c3 { --rtnp-accent: #10b981; --rtnp-bg: #0d2b1e; --rtnp-glow: rgba(16,185,129,.35); } /* Bodenständig – Grün  */
.rtnp-c4 { --rtnp-accent: #f59e0b; --rtnp-bg: #2a1f08; --rtnp-glow: rgba(245,158,11,.35);  } /* Jodel – Amber       */
.rtnp-c5 { --rtnp-accent: #3b82f6; --rtnp-bg: #0d1f38; --rtnp-glow: rgba(59,130,246,.35); } /* Blasmusik – Blau    */

/* ── Panel-Grid ─────────────────────────────────────────────── */
.rt-nowplaying-panel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 0 0 2rem;
    box-sizing: border-box;
}

/* ── Karte ──────────────────────────────────────────────────── */
.rtnp-card {
    background: var(--rtnp-bg);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, border-color .2s ease;
}
.rtnp-card:hover {
    transform: translateY(-3px);
    border-color: var(--rtnp-accent);
}

/* ── Cover ──────────────────────────────────────────────────── */
.rtnp-cover-wrap {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    overflow: hidden;
}
.rtnp-cover {
    width: 100%;
    height: 100%;
    background: color-mix(in srgb, var(--rtnp-bg) 60%, #000 40%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rtnp-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    transition: opacity .4s ease;
}
.rtnp-cover-placeholder svg {
    width: 36px;
    height: 36px;
    color: var(--rtnp-accent);
    opacity: .45;
}
.rtnp-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}
.rtnp-cover-img.rtnp-loaded {
    opacity: 1;
}
.rtnp-cover-img.rtnp-loaded + .rtnp-cover-placeholder,
.rtnp-has-cover .rtnp-cover-placeholder {
    opacity: 0;
    pointer-events: none;
}

/* Glow unter Cover */
.rtnp-cover-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, var(--rtnp-bg), transparent);
    pointer-events: none;
}

/* ── Badge (Kanalname) — in .rtnp-info flow ────────────────── */
.rtnp-badge {
    display: inline-block;
    width: fit-content;
    align-self: flex-start;
    margin-top: auto;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--rtnp-bg);
    color: var(--rtnp-accent);
    border: 1px solid var(--rtnp-accent);
    line-height: 1.4;
    margin-bottom: 2px;
    flex-shrink: 0;
}

/* ── Live-Dot ───────────────────────────────────────────────── */
.rtnp-live-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rtnp-accent);
    box-shadow: 0 0 0 0 var(--rtnp-glow);
    animation: rtnp-pulse 2s ease-in-out infinite;
    z-index: 2;
}
@keyframes rtnp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--rtnp-glow); }
    50%       { box-shadow: 0 0 0 5px transparent; }
}

/* ── Info-Bereich ───────────────────────────────────────────── */
.rtnp-info {
    padding: .625rem .875rem .75rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.rtnp-show {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--rtnp-accent);
    min-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rtnp-title {
    font-size: 13px;
    font-weight: 600;
    color: #f0f0f0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rtnp-artist {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    min-height: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── CTA-Button ─────────────────────────────────────────────── */
.rtnp-action {
    display: block !important;
    margin-top: .625rem !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    background: #c0272d !important;
    color: #ffffff !important;
    border: none !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    width: auto !important;
    min-height: 0 !important;
    transition: background .18s ease !important;
}
.rtnp-action:hover {
    background: #a01f24 !important;
    color: #ffffff !important;
}
.rtnp-action:visited {
    color: #ffffff !important;
}

/* ── Ladezustand ────────────────────────────────────────────── */
.rtnp-card.rtnp-loading .rtnp-title,
.rtnp-card.rtnp-loading .rtnp-artist,
.rtnp-card.rtnp-loading .rtnp-show {
    opacity: .4;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
    .rt-nowplaying-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .rt-nowplaying-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}
@media (max-width: 380px) {
    .rt-nowplaying-panel {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * SHORTCODE 2: Hero + Seitenleiste  [rt_now_playing_hero]
 * ═══════════════════════════════════════════════════════════════ */

.rtnp-hero-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    background: #111;
    border-radius: 12px;
    padding: 8px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box !important;
    margin: 0 0 2rem;
}

/* ── Hero-Karte (links) ─────────────────────────────────────── */
.rtnp-hero-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--rtnp-bg, #2d1010);
    min-height: 260px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.rtnp-hero-cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rtnp-hero-cover-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    transition: opacity .4s ease;
}

.rtnp-hero-cover-ph svg {
    width: 52px;
    height: 52px;
    opacity: .3;
}

.rtnp-hero-card .rtnp-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}

.rtnp-hero-card .rtnp-cover-img.rtnp-loaded {
    opacity: 1;
}

.rtnp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}

.rtnp-hero-info {
    position: relative;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rtnp-hero-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--rtnp-acc, #c0272d);
    color: #fff;
    margin-bottom: 4px;
    align-self: flex-start;
}

.rtnp-hero-show {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rtnp-acc, #c0272d);
    min-height: 14px;
}

.rtnp-hero-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.rtnp-hero-artist {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    margin-bottom: 6px;
}

.rtnp-hero-btn {
    display: inline-block !important;
    align-self: flex-start !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    padding: 7px 18px !important;
    border-radius: 5px !important;
    background: #c0272d !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
}

.rtnp-hero-btn:hover {
    background: #a01f24 !important;
    color: #ffffff !important;
}

/* ── Seitenleiste (rechts) ──────────────────────────────────── */
.rtnp-hero-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rtnp-side-row {
    background: var(--rtnp-bg, #1e1e22);
    border-radius: 8px;
    padding: .5rem .625rem;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 0 .625rem;
    align-items: center;
    transition: background .15s;
    flex: 1;
    position: relative;
    overflow: visible;
}

.rtnp-side-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 20%;
    border-radius: 8px 0 0 8px;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--rtnp-acc) 40%, transparent) 0%,
        color-mix(in srgb, var(--rtnp-acc) 15%, transparent) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.rtnp-side-cover,
.rtnp-side-info,
.rtnp-side-btn {
    position: relative;
    z-index: 1;
}

.rtnp-side-cover {
    width: 56px;
    height: 56px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--rtnp-bg) 60%, #000 40%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rtnp-side-cover-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    transition: opacity .4s ease;
}

.rtnp-side-cover-ph svg {
    width: 22px;
    height: 22px;
    opacity: .4;
}

.rtnp-side-row .rtnp-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}

.rtnp-side-row .rtnp-cover-img.rtnp-loaded {
    opacity: 1;
}

.rtnp-side-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 2px;
}

.rtnp-side-badge {
    display: inline-block;
    width: fit-content;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 7px 2px;
    border-radius: 3px;
    background: transparent;
    color: var(--rtnp-acc);
    border: 1px solid var(--rtnp-acc);
    margin-bottom: 3px;
    align-self: flex-start;
    flex-shrink: 0;
    line-height: 1.4;
}

.rtnp-side-title {
    font-size: 12px;
    font-weight: 600;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtnp-side-artist {
    font-size: 10px;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtnp-side-show {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rtnp-acc);
    min-height: 12px;
}

.rtnp-side-btn {
    display: inline-block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    background: #c0272d !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
}

.rtnp-side-btn:hover {
    background: #a01f24 !important;
    color: #ffffff !important;
}

/* ── Responsive Hero ─────────────────────────────────────────── */
@media (max-width: 760px) {
    .rtnp-hero-wrap {
        grid-template-columns: 1fr;
    }
    .rtnp-hero-card {
        min-height: 240px;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * SHORTCODE 3: Listenansicht  [rt_now_playing_list]
 * ═══════════════════════════════════════════════════════════════ */

.rtnp-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #111;
    border-radius: 12px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 2rem;
}

.rtnp-list-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    background: #1c1c20;
    border-radius: 8px;
    overflow: hidden;
    transition: background .15s, box-shadow .15s;
    box-sizing: border-box !important;
    padding: 2px !important;
    box-shadow: inset 5px 0 0 var(--rtnp-acc);
    gap: 0 !important;
}

.rtnp-list-row:hover {
    background: #252528;
    box-shadow: inset 5px 0 0 var(--rtnp-acc), inset 0 0 40px rgba(var(--rtnp-acc-rgb, 255,255,255), .05);
}

.rtnp-list-cover {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #1c1c20;
    transition: background .15s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rtnp-list-row:hover .rtnp-list-cover {
    background: #242428;
}

.rtnp-list-cover-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    transition: opacity .4s ease;
}

.rtnp-list-cover-ph svg {
    width: 26px;
    height: 26px;
    opacity: .35;
}

.rtnp-list-row .rtnp-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}

.rtnp-list-row .rtnp-cover-img.rtnp-loaded {
    opacity: 1;
}

.rtnp-list-info {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 .875rem 0 .875rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
}

.rtnp-list-badge {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px 3px;
    border-radius: 3px;
    background: transparent;
    color: var(--rtnp-acc);
    border: 1px solid var(--rtnp-acc);
    margin-bottom: 3px;
    align-self: flex-start;
    flex-shrink: 0;
    box-sizing: border-box;
    line-height: 1.5;
}

.rtnp-list-title {
    font-size: 17px;
    font-weight: 600;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.rtnp-list-title span,
.rtnp-list-artist span {
    display: inline-block;
    white-space: nowrap;
}

.rtnp-list-title span.rtnp-scroll,
.rtnp-list-artist span.rtnp-scroll {
    animation: rtnp-marquee 12s linear infinite;
    padding-right: 3rem;
}

@keyframes rtnp-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.rtnp-list-artist {
    font-size: 15px;
    color: rgba(255,255,255,.45);
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.rtnp-list-show {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rtnp-acc);
    margin-top: 2px;
    min-height: 12px;
}

.rtnp-list-right {
    padding: 2px .875rem;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.rtnp-list-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rtnp-acc);
    flex-shrink: 0;
    animation: rtnp-pulse 2s ease-in-out infinite;
}

.rtnp-list-btn {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 5px !important;
    background: #c0272d !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
}

.rtnp-list-btn:hover {
    background: #a01f24 !important;
    color: #ffffff !important;
}

/* ── Responsive List ─────────────────────────────────────────── */
@media (max-width: 520px) {
    .rtnp-list-row {
        grid-template-columns: 64px 1fr auto;
    }
    .rtnp-list-cover {
        width: 60px;
        height: 60px;
    }
    .rtnp-list-right {
        padding: 0 .5rem;
        gap: 6px;
    }
    .rtnp-list-dot {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * SHORTCODE 4: Blur-Cover  [rt_now_playing_blur]
 * ═══════════════════════════════════════════════════════════════ */

.rtnp-blur-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    height: 240px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 2rem;
}

.rtnp-blur-ch {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    transition: flex .35s ease;
}

.rtnp-blur-grid:has(.rtnp-blur-ch:hover) .rtnp-blur-ch {
    flex: 0.7;
}

.rtnp-blur-grid:has(.rtnp-blur-ch:hover) .rtnp-blur-ch:hover {
    flex: 2;
}

.rtnp-blur-bg {
    position: absolute;
    inset: -10px;
    background: var(--rtnp-bg);
    background-size: cover;
    background-position: center;
    filter: blur(8px) brightness(.5);
    transition: transform .4s ease, filter .3s ease;
    z-index: 0;
}

.rtnp-blur-ch:hover .rtnp-blur-bg {
    transform: scale(1.05);
    filter: blur(6px) brightness(.6);
}

.rtnp-blur-cover-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.rtnp-blur-cover-wrap .rtnp-cover-img {
    position: absolute;
    inset: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    object-fit: cover;
    opacity: 0;
    filter: blur(8px) brightness(.5);
    transition: opacity .5s ease;
}

.rtnp-blur-cover-wrap .rtnp-cover-img.rtnp-loaded {
    opacity: 1;
}

.rtnp-blur-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: rgba(255,255,255,.1);
    z-index: 3;
}

.rtnp-blur-content {
    position: relative;
    z-index: 2;
    padding: .875rem .75rem .75rem;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 100%);
}

.rtnp-blur-badge {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid var(--rtnp-acc);
    color: var(--rtnp-acc);
    margin-bottom: 5px;
    line-height: 1.4;
}

.rtnp-blur-show {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rtnp-acc);
    min-height: 13px;
    margin-bottom: 2px;
}

.rtnp-blur-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtnp-blur-artist {
    font-size: 10px;
    color: rgba(255,255,255,.55);
    margin-bottom: .625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtnp-blur-btn {
    display: inline-block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 3px !important;
    background: #c0272d !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
}

.rtnp-blur-btn:hover {
    background: #a01f24 !important;
    color: #ffffff !important;
}

@media (max-width: 640px) {
    .rtnp-blur-grid {
        grid-template-columns: 1fr 1fr;
        height: auto;
    }
    .rtnp-blur-ch { min-height: 180px; }
}

/* ═══════════════════════════════════════════════════════════════
 * SHORTCODE 5: Broadcast Board  [rt_now_playing_board]
 * ═══════════════════════════════════════════════════════════════ */

.rtnp-board-wrap {
    background: #0d0d0d;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 2rem;
}

.rtnp-board-header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-bottom: 1px solid #1a1a1a;
    transition: grid-template-columns .3s ease;
}

.rtnp-board-hcol {
    padding: .5rem .75rem;
    border-right: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: default;
    overflow: hidden;
}

.rtnp-board-hcol:last-child { border-right: none; }

.rtnp-board-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rtnp-acc);
    flex-shrink: 0;
    animation: rtnp-pulse 2s ease-in-out infinite;
}

.rtnp-board-hname {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rtnp-acc);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtnp-board-body {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    transition: grid-template-columns .3s ease;
}

.rtnp-board-col {
    padding: .75rem;
    border-right: 1px solid #111;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    transition: background .2s ease;
    overflow: hidden;
}

.rtnp-board-col:last-child { border-right: none; }

.rtnp-board-col:hover {
    background: color-mix(in srgb, var(--rtnp-bg) 60%, #000 40%);
}

/* Hover expand: hovered col gets more space */
.rtnp-board-body:has(.rtnp-board-col:hover) {
    grid-template-columns: repeat(5, 1fr);
}

.rtnp-board-wrap:hover .rtnp-board-body {
    grid-template-columns: repeat(5, 1fr);
}

.rtnp-board-wrap:has(.rtnp-board-col:nth-child(1):hover) .rtnp-board-body,
.rtnp-board-wrap:has([data-channel-head]:nth-child(1):hover) .rtnp-board-header {
    grid-template-columns: 2fr 0.75fr 0.75fr 0.75fr 0.75fr;
}
.rtnp-board-wrap:has(.rtnp-board-col:nth-child(2):hover) .rtnp-board-body {
    grid-template-columns: 0.75fr 2fr 0.75fr 0.75fr 0.75fr;
}
.rtnp-board-wrap:has(.rtnp-board-col:nth-child(3):hover) .rtnp-board-body {
    grid-template-columns: 0.75fr 0.75fr 2fr 0.75fr 0.75fr;
}
.rtnp-board-wrap:has(.rtnp-board-col:nth-child(4):hover) .rtnp-board-body {
    grid-template-columns: 0.75fr 0.75fr 0.75fr 2fr 0.75fr;
}
.rtnp-board-wrap:has(.rtnp-board-col:nth-child(5):hover) .rtnp-board-body {
    grid-template-columns: 0.75fr 0.75fr 0.75fr 0.75fr 2fr;
}

.rtnp-board-cover {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 5px;
    background: #1a1a1a;
    border-top: 2px solid var(--rtnp-acc);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .375rem;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.rtnp-board-cover-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .4s;
}

.rtnp-board-cover-ph svg { width: 22px; height: 22px; opacity: .25; }

.rtnp-board-col .rtnp-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s;
}

.rtnp-board-col .rtnp-cover-img.rtnp-loaded { opacity: 1; }

.rtnp-board-song {
    font-size: 12px;
    font-weight: 600;
    color: #e8e8e8;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtnp-board-artist {
    font-size: 10px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .25rem;
}

.rtnp-board-show {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rtnp-acc);
    min-height: 13px;
    margin-bottom: .375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtnp-board-btn {
    display: block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: 5px !important;
    border-radius: 3px !important;
    background: #c0272d !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    margin-top: auto !important;
}

.rtnp-board-btn:hover { background: #a01f24 !important; color: #ffffff !important; }

@media (max-width: 640px) {
    .rtnp-board-header,
    .rtnp-board-body { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════
 * SHORTCODE 6: Pinstripe  [rt_now_playing_stripe]
 * ═══════════════════════════════════════════════════════════════ */

.rtnp-stripe-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 2rem;
}

.rtnp-stripe-row {
    display: flex;
    align-items: center;
    height: 88px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.04);
    box-sizing: border-box;
    transition: height .25s ease;
}

.rtnp-stripe-row:last-child { border-bottom: none; }

.rtnp-stripe-row:hover { height: 108px; }

.rtnp-stripe-blur-bg {
    position: absolute;
    inset: -10px;
    background: var(--rtnp-bg);
    background-size: cover;
    background-position: center;
    filter: blur(14px) brightness(.28) saturate(1.3);
    transition: filter .3s ease;
    z-index: 0;
}

.rtnp-stripe-row:hover .rtnp-stripe-blur-bg {
    filter: blur(12px) brightness(.38) saturate(1.5);
}

.rtnp-stripe-bar {
    width: 4px;
    height: 100%;
    background: var(--rtnp-acc);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.rtnp-stripe-cover {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    overflow: hidden;
    transition: width .25s ease, height .25s ease;
}

.rtnp-stripe-row:hover .rtnp-stripe-cover {
    width: 108px;
    height: 108px;
}

.rtnp-stripe-cover-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .4s;
}

.rtnp-stripe-cover-ph svg { width: 24px; height: 24px; opacity: .3; }

.rtnp-stripe-row .rtnp-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s;
}

.rtnp-stripe-row .rtnp-cover-img.rtnp-loaded { opacity: 1; }

.rtnp-stripe-info {
    flex: 1;
    padding: 0 .875rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.rtnp-stripe-badge {
    display: inline-block;
    width: fit-content;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(0,0,0,.3);
    color: var(--rtnp-acc);
    border: 1px solid var(--rtnp-acc);
    line-height: 1.4;
    align-self: flex-start;
}

.rtnp-stripe-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.rtnp-stripe-artist {
    font-size: 12px;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rtnp-stripe-show {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rtnp-acc);
    min-height: 0;
}

.rtnp-stripe-right {
    padding: 0 .875rem;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.rtnp-stripe-btn {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    background: #c0272d !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
}

.rtnp-stripe-btn:hover { background: #a01f24 !important; color: #ffffff !important; }