/* ============================================
   THEME: ROS – Matrix / Cyber Green
   ============================================ */

/* 1. Variablen überschreiben Basis */
body.station-ros {
    --accent:         #22c55e;
    --accent-hover:   #4ade80;
    --accent-glow:    rgba(34, 197, 94, 0.5);

    --bg-gradient-1:  #020502;
    --bg-gradient-2:  #0a1f0a;

    --text-primary:   #e5e7eb;
    --text-secondary: #86efac;   /* Footer, Track-Artist, etc. */
    --text-heading:   #ffffff;

    --card-bg:        rgba(5, 10, 5, 0.95);
    --card-border:    rgba(34, 197, 94, 0.35);
}

/* 2. Body-Hintergrund (ersetzt den Basis-Gradient) */
body.station-ros {
    background: linear-gradient(
        180deg,
        #000000 0%,
        #050a05 35%,
        #0a1f0a 70%,
        #0f2f0f 100%
    );
}

/* 3. Ambiente Glow-Overlay */
body.station-ros::before {
    content: "";
    position: fixed;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(
        circle,
        rgba(74, 222, 128, 0.12) 0%,
        rgba(34, 197, 94, 0.05) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: ros-pulse 8s ease-in-out infinite;
}

@keyframes ros-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

/* 4. Headlines / Brand (nur Farbe & Font, keine Größen!) */
.station-ros h1, .station-ros .h1,
.station-ros h2, .station-ros .h2,
.station-ros h3, .station-ros .h3,
.station-ros .brand-name {
    font-family: "Orbitron", "Montserrat", "Oswald", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-heading);
    text-shadow: 0 0 12px rgba(57, 255, 20, 0.3),
                 0 2px 4px rgba(0,0,0,0.8);
}

/* Brand-Name als Gradient-Text */
.station-ros .brand-name {
    background: linear-gradient(135deg, #86efac, #22c55e, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
}

/* 5. Buttons – nur Hintergrund/Farbe, Layout bleibt Basis */
.station-ros .btn-primary,
.station-ros .btn-play {
    background: linear-gradient(135deg, #0a1f0a, #14532d, #052e05);
    border-color: var(--accent);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.station-ros .btn-primary:hover,
.station-ros .btn-play:hover {
    background: linear-gradient(135deg, #14532d, #22c55e, #14532d);
    border-color: var(--accent-hover);
    color: #000000;
    box-shadow: 0 0 25px var(--accent-glow);
}

.station-ros .btn-secondary {
    background: linear-gradient(135deg, #10b981, #065f46);
    border-color: #10b981;
    color: #fff;
}

.station-ros .btn-secondary:hover {
    background: linear-gradient(135deg, #34d399, #059669);
}

/* 6. Links */
.station-ros a {
    color: var(--accent-hover);
}
.station-ros a:hover {
    color: #ffffff;
}

/* 7. Komponenten-Farben */
.station-ros .player-footer {
    color: var(--text-secondary);
}

.station-ros .track-artist {
    color: var(--text-secondary);
}

.station-ros .status-dot.live {
    background-color: #10b981;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Volume-Slider Thumb */
.station-ros #volumeSlider::-webkit-slider-thumb {
    background-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}
.station-ros #volumeSlider::-moz-range-thumb {
    background-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Cover leicht gepuscht */
.station-ros .cover-image {
    filter: contrast(1.05) saturate(1.1);
}

/* 8. Station-Switcher Buttons (Outline → Akzent) */
.station-ros .station-btn.btn-outline-light {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-color: #000;
}