:root {
    --neon-cyan: #00f0ff; /* Il cyan neon distintivo di RadioRandom */
    --neon-green: #00ff41;
    --neon-white: #ffffff;
    --neon-red: #ff003c;
    --neon-yellow: #fff200;
    --gold-star: #ffd700;
    --midnight-blue: #000033;
    --bg-dark: #050505;
    --glass-bg: rgba(10, 10, 10, 0.98);
}

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

body {
    background-color: var(--bg-dark);
    color: white;
    font-family: 'Segoe UI', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* --- PLANCIA BASE ORIZZONTALE (LOGICA STRUTTURALE COUNTRY) --- */
.player-container {
    position: relative;
    width: 100%;
    max-width: 780px;
    background: var(--glass-bg);
    padding: 25px;
    border-radius: 40px;
    
    /* Nella pagina normale resta il tricolore dinamico originale */
    border: 5px solid var(--neon-green);
    animation: tricolorePulse 6s infinite linear;
    
    backdrop-filter: blur(15px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.9);
    
    /* Layout a due colonne asimmetriche */
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 25px;
    align-items: center;
}

/* Colonna Sinistra: Info e Controlli */
.info-section {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Colonna Destra: Selezione Stazioni e Utility (SFONDO BLU NOTTE SPAZIALE CON STELLE) */
.controls-section {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;

    /* Sfondo blu notte spaziale */
    background: linear-gradient(135deg, #020208 0%, #000022 50%, #050515 100%);
}

/* Generazione dello strato di stelline tramite gradienti radiali */
.controls-section::before,
.controls-section::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background-repeat: repeat;
}

/* Primo strato di stelle */
.controls-section::before {
    background-image: 
        radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 60px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 120px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 180px 150px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 240px 90px, #fff, rgba(0,0,0,0));
    background-size: 260px 200px;
    animation: spaceStarsBlink 4s infinite ease-in-out alternate;
}

/* Secondo strato di stelle sfalsato per dinamismo */
.controls-section::after {
    background-image: 
        radial-gradient(1.5px 1.5px at 40px 140px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 90px 20px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 150px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 220px 130px, #fff, rgba(0,0,0,0));
    background-size: 280px 180px;
    animation: spaceStarsBlink 6s infinite ease-in-out alternate-reverse;
}

/* Animazione per la pulsazione a intermittenza delle stelle */
@keyframes spaceStarsBlink {
    0% { opacity: 0.2; }
    50% { opacity: 0.9; }
    100% { opacity: 0.4; }
}

.station-selector-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.decade-btn {
    width: 45px; height: 45px;
    background: var(--bg-dark); border: 3px solid white; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 0.7rem; font-weight: bold; cursor: pointer; transition: transform 0.2s;
    flex-shrink: 0;
}

.rock-btn {
    width: 70px; height: 70px;
    background: var(--midnight-blue); border: 3px solid #0044ff; border-radius: 50%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    cursor: pointer; box-shadow: 0 0 15px #0044ff; transition: transform 0.2s;
    flex-shrink: 0;
}

.decade-btn:hover, .rock-btn:hover { transform: scale(1.08); }
.rock-icon { font-size: 1.4rem; }
.rock-label { font-size: 0.6rem; font-weight: 900; }

/* Animazione Tricolore (Usata solo in modalità normale) */
@keyframes tricolorePulse {
    0% { border-color: var(--neon-green); box-shadow: 0 0 25px var(--neon-green); }
    33% { border-color: var(--neon-white); box-shadow: 0 0 25px var(--neon-white); }
    66% { border-color: var(--neon-red); box-shadow: 0 0 25px var(--neon-red); }
    100% { border-color: var(--neon-green); box-shadow: 0 0 25px var(--neon-green); }
}

.station-name { font-size: 2.1rem; font-weight: 900; text-transform: uppercase; margin-bottom: 5px; }
.sub-station { font-style: italic; font-size: 0.85rem; color: rgba(255,255,255,0.4); display: block; }
.italian-time { margin: 10px 0; color: var(--neon-yellow); font-size: 1.5rem; font-family: monospace; }

.play-pause-btn {
    background: transparent; border: 4px solid white; color: white;
    width: 90px; height: 90px; border-radius: 50%; cursor: pointer;
    font-weight: bold; text-transform: uppercase; margin-bottom: 10px; transition: all 0.2s;
}

/* Sezione Volume & Fullscreen in linea */
.volume-control-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.volume-container { flex: 1; position: relative; display: flex; align-items: center; }
#vol-control { -webkit-appearance: none; width: 100%; height: 4px; background: #333; outline: none; border-radius: 2px; }
#vol-control::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: var(--gold-star);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    cursor: pointer; box-shadow: 0 0 8px var(--gold-star);
}
#vol-control::-moz-range-thumb {
    width: 25px; height: 25px; background: var(--gold-star);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border: none; cursor: pointer;
}

.fullscreen-btn {
    background: transparent; border: none;
    cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.fullscreen-btn svg rect {
    transition: stroke 0.2s;
}
.fullscreen-btn:hover svg rect {
    stroke: var(--neon-cyan);
}

.seo-greeting-container { margin-top: 30px; text-align: center; }
#web-link, #partner-link { font-style: italic; color: rgba(255, 255, 255, 0.3); font-size: 0.8rem; display: block; margin-top: 5px; }

/* RESPONSIVE SMARTPHONE VERTICALE */
@media (max-width: 600px) {
    .player-container {
        max-width: 360px;
        grid-template-columns: 1fr;
        padding: 30px 20px;
        gap: 20px;
    }
    .info-section { grid-column: 1; }
    .controls-section { grid-column: 1; }
}

/* --- REGOLE PER LO SCHERMO INTERO STILE COUNTRY PRO.CSS --- */
::backdrop {
    background-color: var(--bg-dark) !important;
}

:fullscreen body, :-webkit-full-screen body {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    background-color: var(--bg-dark) !important;
}

/* Nasconde i link SEO in fullscreen */
:fullscreen .seo-greeting-container,
:-webkit-full-screen .seo-greeting-container,
.ios-fullscreen-active .seo-greeting-container {
    display: none !important;
}

/* Centratura per Fallback iOS (iPhone) */
body.ios-fullscreen-active {
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    background-color: var(--bg-dark) !important;
}

/* Forza la visualizzazione orizzontale fissa a due colonne stabili in Schermo Intero */
:fullscreen .player-container,
:-webkit-full-screen .player-container,
.player-container.web-fullscreen {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 25px !important;
    width: 92vw !important;
    max-width: 800px !important;
    height: auto !important;
    max-height: 90vh !important;
    padding: 30px !important;
    align-items: center !important;
    background: var(--glass-bg) !important;
    border-radius: 40px !important;
    
    /* MODALITÀ PLANCIATO/FULLSCREEN BLINDATA: Disattiva il tricolore e mette il Cyan fisso */
    animation: none !important; 
    border: 5px solid var(--neon-cyan) !important;
    box-shadow: 0 0 30px var(--neon-cyan), 0 20px 50px rgba(0,0,0,0.9) !important;
}

:fullscreen .info-section, :-webkit-full-screen .info-section, .player-container.web-fullscreen .info-section { grid-column: 1; }
:fullscreen .controls-section, :-webkit-full-screen .controls-section, .player-container.web-fullscreen .controls-section { grid-column: 2; }

/* Stile base del pulsante speciale (nascosto di default) */
.special-link-btn {
    display: none;
    margin-top: 15px;
    padding: 10px 20px;
    background: transparent;
    border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.special-link-btn:hover {
    background: var(--neon-cyan);
    color: #000;
    box-shadow: 0 0 20px var(--neon-cyan);
    transform: scale(1.05);
}

/* FORZATURA: Facciamo comparire il pulsante SOLO in Schermo Intero */
:fullscreen #next-page-btn,
:-webkit-full-screen #next-page-btn,
.player-container.web-fullscreen #next-page-btn {
    display: inline-block !important;
}