:root {
    --leather-dark: #2E1B0F;
    --leather-main: #5C3A21;
    --leather-light: #8B5A2B;
    --sand: #F5DEB3;
    --accent: #FF8C00; 
    --text-light: #FFF8DC;
}

* { box-sizing: border-box; }
body { 
    margin: 0; 
    padding: 40px 10px 10px 10px; 
    background-color: var(--leather-dark); 
    font-family: 'Roboto', sans-serif; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start; 
    min-height: 100vh; 
    gap: 20px;
}

.player-container {
    background: linear-gradient(145deg, var(--leather-main), var(--leather-dark));
    border: 5px solid var(--leather-light);
    border-radius: 20px; width: 100%; max-width: 450px; padding: 25px; 
    position: relative; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.9);
}

/* === STICKER SENTENZA IN ALTO A SINISTRA === */
.sticker.sentenza {
    position: absolute;
    width: 45px; 
    height: auto;
    top: -12px;  
    left: -12px; 
    transform: rotate(-15deg); 
    z-index: 10; 
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.7)); 
}

/* FORI DI PROIETTILE */
.bullet-hole {
    position: absolute;
    width: 15px;
    height: 15px;
    background: rgba(0,0,0,0.9);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: inset 0 0 5px #000, 0 0 4px #000;
    z-index: 2;
}
.hole-1 { top: 15px; left: 45px; }
.hole-2 { bottom: 20px; right: 35px; }

/* WANTED TRIGGER */
.wanted-trigger {
    width: 75px; cursor: pointer; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(-10deg); flex-shrink: 0;
}
.wanted-trigger img { width: 100%; border: 1px solid rgba(0,0,0,0.4); }
.wanted-trigger.is-favorite {
    transform: rotate(0deg) scale(1.1);
    filter: drop-shadow(0 0 10px var(--accent));
}

.player-header { padding-top: 5px; }
.player-header h1 { 
    font-family: 'Rye', cursive; 
    font-size: 1.8rem; 
    color: var(--sand); 
    text-align: center; 
    margin: 0; 
}

.audio-controls { background: rgba(0,0,0,0.4); padding: 15px; border-radius: 12px; border: 1px solid var(--leather-light); }
.station-display { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.current-station { font-weight: bold; color: var(--sand); flex: 1; text-align: center; font-size: 0.9rem; }

/* BOTTONE INGRANAGGIO / ROTAZIONE CAPPELLO COWBOW */
@keyframes spinGear {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.hat-loading i {
    display: inline-block;
    animation: spinGear 2s linear infinite;
}

/* BOTTONI TONDI */
.controls-wrapper { display: flex; justify-content: center; align-items: center; gap: 12px; }
.control-btn { 
    width: 55px; height: 55px; 
    flex-shrink: 0 !important; 
    aspect-ratio: 1/1 !important; 
    border-radius: 50%; border: none; background: var(--accent); color: white; cursor: pointer; font-size: 1.2rem;
    box-shadow: 0 4px 0 #8b4513;
}
.hat-btn { background: var(--leather-light); box-shadow: 0 4px 0 #4a2d1a; }

.volume-control { display: flex; align-items: center; gap: 8px; color: var(--sand); }
#volume-slider { width: 100%; accent-color: var(--accent); }

/* NUOVO BOTTONE FULLSCREEN VICINO AL VOLUME */
.fullscreen-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    flex-shrink: 0;
}
.fullscreen-btn i {
    color: var(--sand);
    font-size: 1.2rem;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
}
.fullscreen-btn:hover i {
    opacity: 1;
    color: var(--accent);
}

/* LISTA MY WANTED CON SCROLLBAR INTERNA BLOCCATA */
.list-section { 
    margin-top: 15px; 
    background: rgba(0,0,0,0.2); 
    padding: 10px; 
    border-radius: 10px;
}
.list-section h2 { 
    display: flex;
    align-items: center;
    font-family: 'Rye', cursive; 
    color: var(--accent); 
    font-size: 1.2rem; 
    margin-bottom: 10px;
    margin-top: 0;
}
.list-icon {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 50%;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}

/* Sotto-box contenitore per bloccare l'altezza e gestire lo scorrimento */
.station-list-wrapper {
    max-height: 180px; /* Limita lo spazio verticale a circa 4-5 stazioni visibili insieme */
    overflow-y: auto;  /* Attiva la barra di scorrimento verticale solo se necessario */
    padding-right: 5px;
}

/* Stile barra di scorrimento per renderla coerente al design del player */
.station-list-wrapper::-webkit-scrollbar {
    width: 6px;
}
.station-list-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.station-list-wrapper::-webkit-scrollbar-thumb {
    background: var(--leather-light);
    border-radius: 10px;
}
.station-list-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

.station-list { 
    list-style: none; 
    padding: 0; 
    margin: 0;
    width: 100%;
}
.station-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 10px 5px; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    gap: 10px;
}
.station-item:last-child {
    border-bottom: none;
}
.fav-name { 
    color: var(--text-light); 
    cursor: pointer; 
    flex: 1; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}
.fav-name:hover { color: var(--accent); }

.remove-btn { 
    color: #ff4444; 
    cursor: pointer; 
    padding: 5px; 
    font-size: 1rem;
    transition: transform 0.2s, color 0.2s;
    flex-shrink: 0;
}
.remove-btn:hover {
    color: #ff0000;
    transform: scale(1.2);
}

/* FOOTER */
.dynamic-footer {
    width: 100%;
    max-width: 450px;
    margin: 20px auto;
    text-align: center;
    display: block;
    clear: both;
}

#greeting-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 2.2rem;
    color: #FF00FF; 
    text-shadow: 0 0 15px #FF00FF;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.festival-title { color: var(--accent); font-size: 1.2rem; margin-bottom: 10px; }
.festival-desc { color: #ccc; font-size: 0.9rem; line-height: 1.5; margin-bottom: 25px; padding: 0 20px; }
.festival-desc span { color: #FF00FF; font-weight: bold; }

.return-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;
    border: 2px solid #FFD700;
    border-radius: 50px;
    color: #FFD700;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
    margin-top: 20px;
    width: auto;
    min-width: 250px;
}
.return-btn:hover {
    background: #FFD700;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.seo-greeting-container { margin-top: 20px; 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: 480px) {
    body { padding: 30px 10px 10px 10px; }
    .player-container { padding: 20px 15px; }
    .sticker.sentenza { width: 35px; top: -10px; left: -10px; }
    .player-header h1 { font-size: 1.45rem; }
    .wanted-trigger { width: 65px; }
    .control-btn { width: 48px; height: 48px; }
    .dynamic-footer { max-width: 90%; }
    #greeting-text { font-size: 1.6rem; }
    .station-list-wrapper { max-height: 150px; }
}

/* INTERFACCIA PLANCIA ORIZZONTALE ADATTIVA DI BASE */
@media screen and (orientation: landscape) and (max-height: 600px) {
    body { padding: 10px; }
    .player-container {
        max-width: 780px;
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 20px;
        padding: 20px;
        align-items: center;
    }
    .player-header { grid-column: 1; margin-bottom: 0; }
    .audio-controls { grid-column: 1; }
    .list-section { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
    .station-list-wrapper { max-height: 160px; }
    .hole-2 { bottom: 10px; right: 10px; }
}

/* === STRUTTURA A DOPPIA COLONNA PER SCHERMO INTERO NATURALE ED ERGONOMICO === */
:fullscreen, :-webkit-full-screen {
    background-color: var(--leather-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(--leather-dark) !important;
}

/* Forza le 2 colonne simmetriche fisse salvaguardando l'altezza del box preferiti */
: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: 820px !important;
    height: auto !important;
    max-height: 90vh !important;
    padding: 25px !important;
    align-items: center !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.9) !important;
}

:fullscreen .player-header, :-webkit-full-screen .player-header, .player-container.web-fullscreen .player-header { grid-column: 1; }
:fullscreen .audio-controls, :-webkit-full-screen .audio-controls, .player-container.web-fullscreen .audio-controls { grid-column: 1; }
:fullscreen .list-section, :-webkit-full-screen .list-section, .player-container.web-fullscreen .list-section { 
    grid-column: 2; 
    grid-row: 1 / span 2; 
    margin-top: 0; 
    width: 100% !important;
}

/* Calibrazione ottimale dell'altezza box preferiti in modalità schermo intero */
:fullscreen .station-list-wrapper,
:-webkit-full-screen .station-list-wrapper,
.player-container.web-fullscreen .station-list-wrapper {
    max-height: 220px !important;
}

/* Nasconde totalmente le scritte esterne sotto in modalità Schermo Intero */
:fullscreen .dynamic-footer, 
:-webkit-full-screen .dynamic-footer,
:fullscreen .seo-greeting-container,
:-webkit-full-screen .seo-greeting-container,
.ios-fullscreen-active .dynamic-footer,
.ios-fullscreen-active .seo-greeting-container {
    display: none !important;
}

/* Centratura e contenimento plancia strutturata 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(--leather-dark) !important;
}