/* =========================================================
   RadioRandom.Net - THEMES (override di style.css)
   Caricare DOPO style.css. Temi: vivid (default), sunset,
   aurora, gold, classic (= nessun override, look originale).
   ========================================================= */

/* ---------- Palette: VIVID (default) ---------- */
:root:not([data-theme="classic"]) {
  --a: #00f0ff;  /* primario   */
  --b: #ff2bd6;  /* secondario */
  --c: #8a3dff;  /* ponte      */
  --d: #b6ff1a;  /* orologio   */
  --bg1: #0b0830; --bg2: #190a4a; --bg3: #2a0a52;
  --i1: #3dff6b; --i2: #00d0ff; --i3: #ffb02e; --i4: #2f8bff;
  --i5: #ff4500; --i6: #ff2bd6; --i7: #00f0ff; --i8: #3dff6b;
  --ink: #0b0830;

  /* le variabili originali seguono il tema (anche gli stili inline) */
  --fluorescent-cyan: var(--a);
  --fluorescent-pink: var(--b);
  --neon-green: var(--i1);
  --travel-blue: var(--i4);
  --text-color: #f4f1ff;
}

/* ---------- Altre palette ---------- */
/* White Crystal: base luminosa, bianco e avorio */
:root[data-theme="whitecrystal"] {
  --a: #0fa3c9; --b: #7c5cff; --c: #4f8dff; --d: #d99a00;
  --bg1: #fffdf3; --bg2: #f7f1de; --bg3: #efe7d0;
  --i1: #12a37f; --i2: #0e9ac4; --i3: #d99a00; --i4: #3b6cf0;
  --i5: #e8552d; --i6: #d63a8a; --i7: #0e9ac4; --i8: #2fa84f;
  --ink: #ffffff;
  --text-color: #1c2233;
}

/* Black Night: nero + grigi + bianco puro */
:root[data-theme="blacknight"] {
  --a: #ffffff; --b: #8f96a4; --c: #3b404b; --d: #ffffff;
  --bg1: #030304; --bg2: #0e0f12; --bg3: #17181c;
  --i1: #ffffff; --i2: #b9bec8; --i3: #ffffff; --i4: #8f96a4;
  --i5: #d9dce2; --i6: #6f7685; --i7: #ffffff; --i8: #a9afba;
  --ink: #030304;
  --text-color: #eceef2;
}

/* Mirror: base a specchio (argento lucido), icone colorate */
:root[data-theme="mirror"] {
  --a: #1aa7d6; --b: #8b5cf6; --c: #5b7cfa; --d: #e0a100;
  --bg1: #f4f6fa; --bg2: #dde1e9; --bg3: #c9cfda;
  --i1: #10b981; --i2: #06a6d6; --i3: #f59e0b; --i4: #3b6cf0;
  --i5: #ef4f2d; --i6: #d946a8; --i7: #0ea5c6; --i8: #22a652;
  --ink: #ffffff;
  --text-color: #1b2030;
}

/* ---------- Regole (tutte attive tranne nel tema classic) ---------- */
:root:not([data-theme="classic"]) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  .radio-player {
    background:
      linear-gradient(160deg, color-mix(in srgb, var(--bg2) 94%, transparent), color-mix(in srgb, var(--bg1) 96%, transparent)) padding-box,
      linear-gradient(120deg, var(--a), var(--c) 45%, var(--b)) border-box;
    border: 2px solid transparent;
    box-shadow:
      0 0 28px color-mix(in srgb, var(--a) 35%, transparent),
      0 0 60px color-mix(in srgb, var(--b) 25%, transparent),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 0 40px color-mix(in srgb, var(--c) 18%, transparent);
  }

  .titles h1 {
    background: linear-gradient(90deg, #fff 0%, var(--a) 45%, var(--b) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--a) 55%, transparent));
    letter-spacing: 1px;
  }
  .by-choice-text { color: color-mix(in srgb, var(--a) 70%, #fff); text-shadow: 0 0 10px var(--a); }

  #current-station-name { color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--a) 60%, transparent), 0 0 28px color-mix(in srgb, var(--b) 35%, transparent); }
  #current-station-time {
    background: linear-gradient(90deg, var(--d), var(--a));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--d) 50%, transparent));
  }
  #current-station-location { color: color-mix(in srgb, var(--c) 35%, #fff); }

  .exclusive-btn {
    background: linear-gradient(135deg, color-mix(in srgb, var(--a) 14%, transparent), color-mix(in srgb, var(--c) 18%, transparent));
    border: 1px solid var(--a);
    color: color-mix(in srgb, var(--a) 25%, #fff);
    box-shadow: 0 0 10px color-mix(in srgb, var(--a) 25%, transparent), inset 0 0 8px color-mix(in srgb, var(--a) 12%, transparent);
    transition: transform .2s, box-shadow .2s, background .2s;
  }
  .exclusive-btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, var(--a), var(--c)); color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--a) 70%, transparent); }
  .exclusive-btn.active { background: linear-gradient(135deg, var(--b), var(--c)); border-color: var(--b); color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--b) 80%, transparent); }

  .btn-ferrari { background: linear-gradient(135deg, #ff2800, #ff7a1a); box-shadow: 0 0 14px rgba(255,80,0,.6); }
  .btn-ferrari:hover { background: linear-gradient(135deg, #ff4020, #ff9440); }

  .control-btn {
    background: linear-gradient(145deg, color-mix(in srgb, var(--a) 12%, transparent), color-mix(in srgb, var(--c) 20%, transparent));
    border: 2px solid var(--a);
    color: color-mix(in srgb, var(--a) 25%, #fff);
    box-shadow: 0 0 12px color-mix(in srgb, var(--a) 45%, transparent), inset 0 0 10px color-mix(in srgb, var(--a) 15%, transparent);
    transition: transform .2s, box-shadow .2s, background .2s;
  }
  .control-btn:hover { transform: scale(1.08); background: linear-gradient(145deg, var(--a), var(--c)); color: #fff; box-shadow: 0 0 24px color-mix(in srgb, var(--a) 85%, transparent); }
  #play-pause-btn { background: linear-gradient(145deg, var(--b), var(--c)); border-color: color-mix(in srgb, var(--b) 60%, #fff); color: #fff; box-shadow: 0 0 22px color-mix(in srgb, var(--b) 70%, transparent), inset 0 0 10px rgba(255,255,255,.2); }
  #play-pause-btn:hover { background: linear-gradient(145deg, color-mix(in srgb, var(--b) 70%, #fff), var(--c)); box-shadow: 0 0 30px var(--b); }
  #add-favorite-btn.favorited { background: linear-gradient(145deg, var(--b), var(--c)); border-color: var(--b); color: #fff; box-shadow: 0 0 20px var(--b); }
  #volume-slider { accent-color: var(--b); }
  .timer-select { background: color-mix(in srgb, var(--bg2) 90%, transparent); border-color: var(--b); box-shadow: 0 0 8px color-mix(in srgb, var(--b) 35%, transparent); }

  .icons-scroll-wrapper {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bg2) 75%, transparent), color-mix(in srgb, var(--bg1) 80%, transparent));
    border: 1px solid color-mix(in srgb, var(--a) 50%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--a) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .icons-scroll-wrapper.social-wrapper { border-color: color-mix(in srgb, var(--b) 55%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--b) 25%, transparent), inset 0 1px 0 rgba(255,255,255,.08); }

  /* cerchi icone: colore ciclo --iN con gradiente automatico */
  .global-news-circle { --ic: var(--i1); }
  .news-circle        { --ic: var(--i2); }
  .plane-circle       { --ic: var(--i3); }
  .travel-circle      { --ic: var(--i4); }
  .explore-circle     { --ic: var(--i5); }
  .bg-maruka          { --ic: var(--i6); }
  .bg-tech            { --ic: var(--i7); }
  .bg-maruka-green    { --ic: var(--i8); }
  .global-news-circle, .news-circle, .plane-circle, .travel-circle, .explore-circle,
  .bg-maruka, .bg-tech, .bg-maruka-green {
    --ring: var(--ic);
    background: linear-gradient(145deg, color-mix(in srgb, var(--ic) 55%, #fff), var(--ic));
    color: var(--ink);
    box-shadow: 0 0 14px var(--ic);
  }
  .global-news-label { color: var(--i1); } .news-label { color: var(--i2); }
  .plane-label { color: var(--i3); }       .travel-label { color: var(--i4); }
  .explore-label { color: var(--i5); }
  .bg-neon-white { background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--c) 30%, #fff)); }
  .icon-shield-link { transition: transform .2s, filter .2s; }
  .icon-shield-link:hover { transform: translateY(-2px) scale(1.08); filter: brightness(1.2); }

  .favorites-panel {
    background:
      linear-gradient(170deg, color-mix(in srgb, var(--bg3) 90%, transparent), color-mix(in srgb, var(--bg1) 94%, transparent)) padding-box,
      linear-gradient(160deg, var(--b), var(--c) 55%, var(--a)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 0 26px color-mix(in srgb, var(--b) 35%, transparent), inset 0 0 30px color-mix(in srgb, var(--c) 15%, transparent);
  }
  .favorites-panel h3 { color: #fff; text-shadow: 0 0 12px var(--b); }
  #favorites-list li { background: linear-gradient(90deg, color-mix(in srgb, var(--b) 12%, transparent), color-mix(in srgb, var(--a) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--b) 30%, transparent); }
  #favorites-list li:hover { border-color: var(--a); background: linear-gradient(90deg, color-mix(in srgb, var(--b) 28%, transparent), color-mix(in srgb, var(--a) 20%, transparent)); box-shadow: 0 0 12px color-mix(in srgb, var(--a) 40%, transparent); transform: translateX(2px); }
  #favorites-list::-webkit-scrollbar { width: 6px; }
  #favorites-list::-webkit-scrollbar-thumb { background: linear-gradient(var(--b), var(--c)); border-radius: 10px; }
}

/* =========================================================
   Pulsante timer (orologio) + popup Impostazioni
   Attivi solo quando theme-switcher.js ha preso il controllo
   ========================================================= */
html.rr-timer-ready .timer-select,
html.rr-timer-ready .timer-container .fa-clock,
.rr-timer-val { display: none; }
html.rr-timer-ready .timer-container {
  position: relative; width: 40px; height: 40px; padding: 0; gap: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.6); color: #fff; font-size: 1.05rem;
  background: conic-gradient(from 200deg, #00f0ff, #8a3dff, #ff2bd6, #ffb02e, #3dffb0, #00f0ff);
  box-shadow: 0 0 12px rgba(138,61,255,.55), 0 2px 6px rgba(0,0,0,.35);
  user-select: none; -webkit-user-select: none; transition: transform .25s, box-shadow .25s;
}
html.rr-timer-ready .timer-container:hover { transform: scale(1.1) rotate(20deg); box-shadow: 0 0 20px rgba(255,43,214,.75), 0 2px 6px rgba(0,0,0,.35); }
.rr-pal { filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); pointer-events: none; }
.rr-timer-dot { /* puntino: sleep timer attivo */
  position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: #3dff6b; border: 2px solid #0b0830; box-shadow: 0 0 8px #3dff6b; display: none;
}
html.rr-timer-ready .timer-container.on .rr-timer-dot { display: block; }

.rr-pop {
  position: fixed; z-index: 9999; left: 0; top: 0;
  width: min(360px, calc(100vw - 20px)); max-height: min(78vh, 560px); overflow-y: auto;
  padding: 14px; box-sizing: border-box;
  background: rgba(8,7,24,.96); border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
  box-shadow: 0 14px 50px rgba(0,0,0,.7); backdrop-filter: blur(12px);
  font-family: 'Orbitron', sans-serif; color: #fff;
  opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none; visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.rr-pop.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.rr-pop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rr-pop h4 { margin: 0; font-size: .62rem; letter-spacing: 2.5px; text-transform: uppercase; opacity: .85; }
.rr-pop-x { background: none; border: 0; color: #fff; opacity: .7; cursor: pointer; font-size: 1rem; padding: 2px 6px; }
.rr-pop-x:hover { opacity: 1; }
.rr-sec + .rr-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }

.rr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rr-chip {
  flex: 1 1 auto; min-width: 46px; padding: 8px 6px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: #fff;
  font: inherit; font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; transition: background .15s;
}
.rr-chip:hover { background: rgba(255,255,255,.16); }
.rr-chip.active { background: #fff; color: #0a0820; border-color: #fff; font-weight: 700; }

.rr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.rr-card {
  position: relative; display: block; padding: 9px; text-align: left; cursor: pointer; color: #fff; font: inherit;
  border: 2px solid transparent; border-radius: 12px;
  background:
    linear-gradient(160deg, var(--pbg2), var(--pbg1)) padding-box,
    linear-gradient(120deg, var(--pa), var(--pc), var(--pb)) border-box;
  transition: transform .15s, box-shadow .15s;
}
.rr-card:hover { transform: translateY(-2px); box-shadow: 0 0 16px var(--pa); }
.rr-card.active { outline: 2px solid #fff; outline-offset: 2px; }
.rr-card .bar { display: block; height: 6px; border-radius: 3px; margin-bottom: 9px; background: linear-gradient(90deg, #fff, var(--pa), var(--pb)); }
.rr-card .row { display: flex; align-items: center; gap: 5px; margin-bottom: 9px; }
.rr-card .play { width: 20px; height: 20px; border-radius: 50%; margin-right: 3px; background: linear-gradient(145deg, var(--pb), var(--pc)); box-shadow: 0 0 8px var(--pb); }
.rr-card .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 6px var(--dc); }
.rr-card .nm { display: block; font-size: .62rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; }
.rr-card .tg { display: block; font-size: .5rem; opacity: .65; margin-top: 2px; letter-spacing: .5px; }
.rr-card .tick { position: absolute; top: 6px; right: 8px; font-size: .7rem; opacity: 0; }
.rr-card.active .tick { opacity: 1; }

/* ---------- Bandierina + nome paese (accanto al titolo, senza asta) ---------- */
.by-choice-text { white-space: nowrap; } /* "by choice N stations" sempre su una riga */
.rr-country {
  display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; white-space: nowrap;
  -webkit-text-fill-color: initial; text-transform: none; letter-spacing: normal; font-weight: 400;
}
.rr-country-name {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500;
  font-size: .95rem; letter-spacing: .4px; line-height: 1; text-shadow: none;
  -webkit-text-fill-color: currentColor; color: color-mix(in srgb, var(--a, #fff) 55%, #fff); opacity: .92;
}
.rr-wave {
  --amp: 2px; position: relative; display: inline-flex; flex-shrink: 0;
  width: 40px; height: 28px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.rr-wave span { flex: 0 0 5px; height: 100%; background-size: 800% 100%; background-repeat: no-repeat; animation: rr-wave 1.7s ease-in-out infinite; }
.rr-wave i { /* luci e ombre del tessuto */
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(255,255,255,.28) 22%, rgba(0,0,0,.28) 48%, rgba(255,255,255,.22) 74%, rgba(0,0,0,.3));
  background-size: 200% 100%; animation: rr-sheen 1.7s linear infinite;
}
@keyframes rr-wave { 0%, 100% { transform: translateY(calc(var(--amp) * -1)); } 50% { transform: translateY(var(--amp)); } }
@keyframes rr-sheen { from { background-position: 0 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .rr-wave span, .rr-wave i { animation: none; } }
@media (max-width: 480px) {
  .rr-wave { width: 32px; height: 22px; }
  .rr-wave span { flex-basis: 4px; }
  .rr-country-name { font-size: .85rem; }
}

/* ---------- Elenco paesi nel popup ---------- */
.rr-search {
  width: 100%; box-sizing: border-box; margin-top: 8px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); color: #fff;
  font: inherit; font-size: .68rem; letter-spacing: 1px; outline: none;
}
.rr-search:focus { border-color: #fff; }
.rr-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; max-height: 230px; overflow-y: auto; padding-right: 4px; }
.rr-flag-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff;
  font: inherit; font-size: .58rem; letter-spacing: .6px; text-align: left; min-width: 0;
}
.rr-flag-item:hover { background: rgba(255,255,255,.16); }
.rr-flag-item.active { background: #fff; color: #0a0820; border-color: #fff; font-weight: 700; }
.rr-flag-item img { width: 24px; height: 18px; object-fit: cover; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.rr-flag-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-flags::-webkit-scrollbar { width: 5px; }
.rr-flags::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 10px; }

.rr-card.light { color: #1c2233; }

/* ---------- White Crystal + Mirror: testi scuri su fondo chiaro ---------- */
:root[data-theme="whitecrystal"], :root[data-theme="mirror"] {
  .radio-player { box-shadow: 0 10px 34px color-mix(in srgb, var(--a) 28%, transparent), inset 0 1px 0 #fff, inset 0 0 40px rgba(255,255,255,.7); }
  .titles h1 {
    background: linear-gradient(90deg, #1c2233 0%, var(--a) 55%, var(--b) 100%);
    -webkit-background-clip: text; background-clip: text; filter: none;
  }
  .by-choice-text { color: color-mix(in srgb, var(--a) 70%, #1c2233); text-shadow: none; }
  .rr-country-name { color: #3d4560; }
  #current-station-name { color: #1c2233; text-shadow: none; }
  #current-station-time {
    background: linear-gradient(90deg, color-mix(in srgb, var(--a) 55%, #0b1630), color-mix(in srgb, var(--b) 70%, #0b1630));
    -webkit-background-clip: text; background-clip: text; filter: none; font-weight: 700;
  }
  #current-station-location { color: #4a5168; }
  .exclusive-btn {
    color: color-mix(in srgb, var(--a) 70%, #101828);
    background: linear-gradient(135deg, color-mix(in srgb, var(--a) 12%, #fff), color-mix(in srgb, var(--c) 14%, #fff));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--a) 25%, transparent);
  }
  .exclusive-btn:hover, .exclusive-btn.active { color: #fff; }
  .control-btn {
    color: color-mix(in srgb, var(--a) 70%, #101828);
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--a) 14%, #fff));
    box-shadow: 0 3px 10px color-mix(in srgb, var(--a) 30%, transparent);
  }
  .control-btn:hover { color: #fff; background: linear-gradient(145deg, var(--a), var(--c)); }
  #play-pause-btn, #add-favorite-btn.favorited { color: #fff; background: linear-gradient(145deg, var(--b), var(--c)); }
  .timer-select { color: #1c2233; background: #fff; }
  .icons-scroll-wrapper { background: linear-gradient(135deg, rgba(255,255,255,.88), color-mix(in srgb, var(--bg2) 90%, transparent)); }
  .global-news-circle, .news-circle, .plane-circle, .travel-circle, .explore-circle,
  .bg-maruka, .bg-tech, .bg-maruka-green {
    background: linear-gradient(145deg, var(--ic), color-mix(in srgb, var(--ic) 72%, #000));
    color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--ic) 45%, transparent);
  }
  .bg-neon-white { background: #1c2233; color: #fff; box-shadow: 0 3px 10px rgba(28,34,51,.35); }
  .neon-text-white { color: #1c2233 !important; text-shadow: none; }
  .favorites-panel h3 { color: #1c2233; text-shadow: none; }
}

/* ---------- Mirror: superficie a specchio ----------
   Argento lucido con linea d'orizzonte, bordo cromato, riflesso di luce
   che scorre e riflesso del player sul piano (dove il browser lo supporta). */
:root[data-theme="mirror"] {
  .radio-player {
    position: relative;
    margin-bottom: 30px; /* spazio per il riflesso sotto il player */
    border: 3px solid transparent;
    background:
      linear-gradient(115deg, transparent 0 30%, rgba(255,255,255,.55) 38%, transparent 46% 100%) padding-box,
      linear-gradient(180deg, #fbfcfe 0%, #e4e8ef 44%, #b8c0cd 49%, #eef0f5 50%, #dfe3ea 78%, #f6f7fa 100%) padding-box,
      linear-gradient(120deg, #ffffff, #8d97a8 22%, #ffffff 42%, #9aa4b5 62%, #ffffff 82%, #8d97a8) border-box;
    box-shadow:
      0 14px 34px rgba(26,36,64,.35),
      inset 0 2px 0 #fff,
      inset 0 -3px 8px rgba(40,50,80,.18),
      inset 0 0 46px rgba(255,255,255,.65);
    -webkit-box-reflect: below 3px linear-gradient(transparent calc(100% - 38px), rgba(255,255,255,.34));
  }
  .radio-player::after { /* lampo di luce che attraversa lo specchio */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.4) 47%, rgba(255,255,255,.08) 52%, transparent 58%);
    background-size: 260% 100%; background-position: 130% 0;
    animation: rr-mirror-sweep 8s ease-in-out infinite;
  }
  .icons-scroll-wrapper, .favorites-panel {
    border: 2px solid transparent;
    background:
      linear-gradient(180deg, #fbfcfe 0%, #e2e6ee 47%, #b9c1ce 50%, #edf0f5 52%, #f4f6fa 100%) padding-box,
      linear-gradient(120deg, #ffffff, #8d97a8 28%, #ffffff 50%, #9aa4b5 74%, #ffffff) border-box;
    box-shadow: 0 8px 22px rgba(26,36,64,.28), inset 0 1px 0 #fff, inset 0 -2px 6px rgba(40,50,80,.14);
  }
  .station-display { background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(200,207,221,.62)); box-shadow: inset 0 2px 5px rgba(40,50,80,.22), inset 0 -1px 0 #fff; }
  #favorites-list li { background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(210,216,228,.55)); border: 1px solid rgba(110,122,146,.45); color: #1b2030; }
  #favorites-list li:hover { border-color: var(--a); box-shadow: 0 0 10px color-mix(in srgb, var(--a) 45%, transparent); }
  .control-btn, .exclusive-btn { border-color: #8d97a8; }
  .control-btn:hover, .exclusive-btn:hover, .exclusive-btn.active { border-color: var(--a); }
}
@keyframes rr-mirror-sweep { 0%, 15% { background-position: 130% 0; } 55%, 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="mirror"] .radio-player::after { animation: none; } }

/* ---------- Mirror: specchio vero (fotocamera) ----------
   Il video e' specchiato in orizzontale come un vero specchio e sta dietro
   ai comandi; il velo chiaro serve a mantenere leggibili testi e pulsanti.
   Per vedersi di piu' abbassare i due valori .62 / .48 / .58 del velo. */
.rr-mirror-cam { position: absolute; inset: 0; border-radius: 17px; overflow: hidden; pointer-events: none; z-index: 0; background: #cfd5e0; }
.rr-mirror-cam video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scaleX(-1); filter: saturate(1.05) contrast(1.05); }
.rr-mirror-cam.rr-rear video { transform: none; } /* camera posteriore: niente effetto specchio */
.rr-mirror-cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(226,231,240,.48) 50%, rgba(255,255,255,.58)); }
html.rr-cam-live .radio-player > :not(.rr-mirror-cam) { position: relative; z-index: 1; }
.rr-cam { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.rr-cam[hidden] { display: none; }
.rr-cam p { margin: 0 0 8px; font-size: .56rem; line-height: 1.6; letter-spacing: .4px; opacity: .85; }
.rr-cam .rr-chip { flex: none; width: auto; padding: 8px 14px; }
.rr-cam-msg { display: block; margin-top: 6px; font-size: .55rem; line-height: 1.5; color: #ffb4b4; }
.rr-cam-msg:empty { display: none; }

/* Con la fotocamera attiva: via la barra rossa NOVA */
html.rr-cam-live .preferito-speciale { display: none !important; }

/* Tasti camera (Camera off / Flip / Photo / Rec) e flash dello scatto */
.rr-cam-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-cam-actions .rr-chip[hidden] { display: none; }
.rr-cam-actions .rr-chip:disabled { opacity: .45; cursor: default; }
.rr-cam-actions .rr-rec i { color: #ff4040; }
.rr-cam-actions .rr-rec.rec { background: #ff3b30; border-color: #ff3b30; color: #fff; font-weight: 700; }
.rr-cam-actions .rr-rec.rec i { color: #fff; }
.rr-cam-msg.ok { color: #7ee2a8; }
.rr-mirror-cam::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 2; pointer-events: none; }
.rr-mirror-cam.rr-flash::before { animation: rr-cam-flash .35s ease-out; }
@keyframes rr-cam-flash { 0% { opacity: .9; } 100% { opacity: 0; } }

/* ---------- Modalita' fotocamera: pannello essenziale, piu' spazio per l'immagine ----------
   Restano: titolo + numero di stazioni, box della stazione e sfera palette.
   Altezza minima del pannello: cambia --rr-cam-h per un riquadro piu' alto o piu' basso. */
html.rr-cam-live .mode-buttons-container,
html.rr-cam-live #random-station-btn,
html.rr-cam-live .controls-left,
html.rr-cam-live .volume-container { display: none !important; }
html.rr-cam-live .radio-player { display: flex; flex-direction: column; min-height: var(--rr-cam-h, clamp(380px, 64vh, 560px)); }
html.rr-cam-live .radio-player > .player-controls { position: static; height: 0; margin: 0; padding: 0; min-height: 0; }
html.rr-cam-live .radio-player .timer-container { position: absolute !important; top: 14px; right: 14px; margin: 0; z-index: 3; }
html.rr-cam-live .radio-player .titles { max-width: calc(100% - 56px); }
html.rr-cam-live .radio-player > .station-display { margin-top: 0; margin-bottom: 0; }

/* Tasti rapidi semitrasparenti sul pannello (fuori dalle catture): Flip | Foto | Rec */
.rr-cam-ui { position: relative; margin-top: auto; margin-bottom: 14px; display: flex; justify-content: center; align-items: center; gap: 22px; pointer-events: none; }
.rr-cam-fab {
  pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0;
  border-radius: 50%; cursor: pointer; color: #fff; font: inherit; font-size: .8rem; line-height: 1;
  background: rgba(20,28,48,.38); border: 2px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(10,16,32,.35); transition: transform .12s, background .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.rr-cam-fab:active { transform: scale(.92); }
.rr-cam-fab:disabled { opacity: .4; cursor: default; }
.rr-cam-fab.small { width: 44px; height: 44px; }
.rr-cam-fab.big { width: 62px; height: 62px; font-size: 1.25rem; border-width: 3px; background: rgba(255,255,255,.3); }
.rr-cam-fab.rec { width: 44px; height: 44px; }
.rr-cam-fab.rec i { color: #ff3b30; font-size: .95rem; }
.rr-cam-fab.rec.on { width: auto; min-width: 74px; padding: 0 12px; border-radius: 24px; background: rgba(255,59,48,.62); border-color: rgba(255,255,255,.85); }
.rr-cam-fab.rec.on i { color: #fff; font-size: .8rem; }
.rr-cam-fab.rec span { font-size: .7rem; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.rr-cam-fab.rec span:empty { display: none; }
.rr-cam-fab.off { visibility: hidden; pointer-events: none; }
.rr-cam-ui.nocam .rr-cam-fab.rec { display: none; }
.rr-cam-toast {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 10px; transform: translate(-50%, 6px); max-width: min(90vw, 320px);
  padding: 6px 12px; border-radius: 14px; background: rgba(20,28,48,.72); color: #fff; font-size: .62rem; letter-spacing: .6px;
  text-align: center; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.rr-cam-toast.show { opacity: 1; transform: translate(-50%, 0); }