:root {
    --bg-color: #000000;
    /* Deep black for LED */
    --text-color: #ffffff;
    --accent-color: #00ffcc;
    /* Bright cyan/teal for high contrast */
    --accent-color-dim: rgba(0, 255, 204, 0.2);
    --font-family: 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: transparent;
    color: var(--text-color);
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    /* Prevent text selection since it's a display panel */
    user-select: none;
    cursor: none;
    /* Hide cursor on the LED panel */
}

body.bg-dark {
    background-color: var(--bg-color);
}

.player-container {
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    padding: clamp(1rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.player-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    width: 100%;
    max-width: 1600px;
    margin-bottom: clamp(1rem, 3vh, 3rem);
}

#album-art {
    width: 100%;
    max-width: clamp(150px, 45vmin, 500px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: clamp(8px, 1.5vmin, 24px);
    box-shadow: 0 10px 30px rgba(0, 255, 204, 0.15);
    transition: opacity 0.5s ease;
}

#album-art.hidden {
    display: none;
}

/* ── CUSTOM BANNER (Royalty Free template) ── */
#rf-custom-text {
    display: none; /* hidden in Office template by default */
    width: 100%;
    max-width: 1600px;
    text-align: left;
    font-size: clamp(1.2rem, 3.5vmin, 3rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-color);
    opacity: 0.85;
    margin-bottom: clamp(0.5rem, 2vh, 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: clamp(300px, 60vw, 1000px);
    flex: 1;
    overflow: hidden;
}

/* Minimalist Visualizer */
.visualizer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 40px;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.visualizer .bar {
    width: 12px;
    background-color: var(--accent-color);
    border-radius: 6px;
    height: 10px;
    transition: height 0.1s ease;
    box-shadow: 0 0 10px var(--accent-color-dim);
}

/* When playing, we add a class to animate */
.visualizer.playing .bar {
    animation: bounce 1.2s infinite ease-in-out alternate;
}

.visualizer.playing .bar:nth-child(1) {
    animation-delay: 0s;
}

.visualizer.playing .bar:nth-child(2) {
    animation-delay: 0.2s;
}

.visualizer.playing .bar:nth-child(3) {
    animation-delay: 0.4s;
}

.visualizer.playing .bar:nth-child(4) {
    animation-delay: 0.2s;
}

.visualizer.playing .bar:nth-child(5) {
    animation-delay: 0s;
}

@keyframes bounce {
    0% {
        height: 10px;
    }

    100% {
        height: 40px;
    }
}

.text-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.text-container.overflowing {
    mask-image: linear-gradient(to right, transparent, black 0.5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 0.5%, black 95%, transparent);
}

h1#song-title {
    font-size: 8vmin;
    /* Fallback for older Smart TV browsers */
    font-size: clamp(2rem, 8vmin, 6rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    margin-bottom: clamp(0.2rem, 1vh, 0.8rem);
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    display: inline-block;
    padding-right: 50px;
    /* Gap before repeat in marquee */
}

h2#song-artist {
    font-size: 5vmin;
    font-size: clamp(1.2rem, 5vmin, 4rem);
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: clamp(0.2rem, 1vh, 0.8rem);
    text-transform: uppercase;
    display: inline-block;
    padding-right: 50px;
}

h3#song-album {
    font-size: 3vmin;
    font-size: clamp(1rem, 3vmin, 2.5rem);
    font-weight: 400;
    color: #888;
    margin-bottom: clamp(0.5rem, 2vh, 1.5rem);
    display: inline-block;
    padding-right: 50px;
}

.progress-wrapper {
    width: 100%;
    max-width: clamp(300px, 80vw, 1400px);
}

.progress-container {
    width: 100%;
    height: 8px;
    background-color: #222;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

#progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00bfff, var(--accent-color));
    border-radius: 4px;
    box-shadow: 0 0 15px var(--accent-color);
    transition: width 0.1s linear;
}

.time-container {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: 700;
    color: #888;
    font-variant-numeric: tabular-nums;
    /* Monospaced numbers prevent jittering */
}

#status-message {
    margin-top: 2rem;
    font-size: 1rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity 0.5s;
}

#status-message.visible {
    opacity: 1;
}

/* Animations for switching songs */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    90% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.song-transition {
    animation: fadeInOut 0.5s ease-in-out;
}

/* ── PLAYLIST QUEUE (vertical box) ── */
#playlist-queue {
    width: 100%;
    max-width: clamp(300px, 80vw, 1400px);
    height: clamp(100px, 20vh, 200px);
    /* change this to show more/fewer rows */
    margin-top: clamp(1rem, 3vh, 2rem);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    /* Fade in/out top and bottom edges — adjust % values to control fade length */
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 18%,
            black 82%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 18%,
            black 82%,
            transparent 100%);
}

#playlist-queue.hidden {
    display: none;
}

#queue-inner {
    display: flex;
    flex-direction: column;
    animation: queue-scroll-v linear infinite;
    will-change: transform;
}

@keyframes queue-scroll-v {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.8rem;
    font-family: var(--font-family);
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.queue-item .q-icon {
    font-size: 0.6rem;
    opacity: 0;
    flex-shrink: 0;
    color: var(--accent-color);
}

.queue-item.queue-current {
    color: var(--accent-color);
    background: rgba(0, 255, 204, 0.06);
}

.queue-item.queue-current .q-icon {
    opacity: 1;
}

.queue-item .q-title {
    font-weight: 600;
}

.queue-item .q-sep {
    color: rgba(255, 255, 255, 0.15);
    margin: 0 0.3rem;
}

.queue-item .q-artist {
    color: inherit;
    opacity: 0.7;
}

/* Interaction Overlay for Autoplay Blocks */
#interaction-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s;
}

#interaction-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.overlay-content {
    text-align: center;
    color: var(--accent-color);
    animation: pulse 2s infinite;
}

.overlay-content svg {
    margin-bottom: 1rem;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

/* ── AZAN OVERLAY ── */
#azan-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 15, 0.95);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    opacity: 1;
    transition: opacity 1s;
}

#azan-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.azan-content {
    text-align: center;
    color: var(--text-color);
    font-family: var(--font-family);
    animation: pulse-azan 4s infinite ease-in-out;
}

.azan-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.azan-title {
    font-size: 1.5rem;
    color: var(--text-color);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.azan-name {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}

.azan-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

@keyframes pulse-azan {

    0%,
    100% {
        opacity: 0.8;
        transform: scale(0.98);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── RESPONSIVE ADAPTATIONS ── */
@media (max-width: 768px) {
    .player-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .song-info {
        align-items: center;
        text-align: center;
    }

    #album-art {
        max-width: clamp(150px, 50vw, 300px);
    }

    .visualizer {
        justify-content: center;
        width: 100%;
    }
}

/* ═══════════════════════════════
   TEMPLATE SYSTEM
   Toggle via data-template on <body>
═══════════════════════════════ */

/* ── Office Template (default) ── */
body[data-template="office"] #rf-custom-text {
    display: none;
}

body[data-template="office"] #rf-now-playing {
    display: none;
}

/* ── Royalty Free Template ── */
body[data-template="royalty-free"] #rf-custom-text {
    display: block;
}

/* Hide the full song-info block — replaced by the slim strip */
body[data-template="royalty-free"] .player-content {
    display: none;
}

/* Slim "Now Playing" strip */
#rf-now-playing {
    display: none; /* shown only in royalty-free via template rule below */
    align-items: center;
    gap: clamp(0.4rem, 1vmin, 0.75rem);
    width: 100%;
    max-width: 1600px;
    margin-bottom: clamp(0.5rem, 2vh, 1.5rem);
    opacity: 0.55;
    transition: opacity 0.4s ease;
}

#rf-now-playing:hover {
    opacity: 0.8;
}

#rf-now-playing-icon {
    font-size: clamp(0.85rem, 2vmin, 1.4rem);
    color: var(--accent-color);
    animation: pulse-note 3s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulse-note {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1;   }
}

#rf-now-playing-text {
    font-size: clamp(0.75rem, 1.8vmin, 1.1rem);
    font-weight: 500;
    color: var(--text-color);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-template="royalty-free"] #rf-now-playing {
    display: flex;
}

body[data-template="royalty-free"] .progress-wrapper,
body[data-template="royalty-free"] #status-message,
body[data-template="royalty-free"] #playlist-queue {
    display: none !important;
}