/*
 * «Prevenire per te»: i colori sbloccati con i livelli del gioco
 * (config('per_te_gioco.sblocchi'): «Alba» al livello 2, «Bosco» al 4,
 * «Notte stellata» al 6). Solo aspetto, mai soldi, sconti o premi.
 *
 * Il colore si sceglie in Io → Aspetto e resta su questo telefono
 * (localStorage «prevenire.perTe.accento»): lo scrive su <html> come
 * data-accento il pezzo per-te.io.partials.tema-app, prima che la pagina si
 * disegni. Ogni tema cambia solo le variabili di base.css, per la notte
 * (predefinita) e per il giorno (html[data-tema="giorno"]); contrasti AA
 * come base.css (testo sui pulsanti pieni bianco su colori scuri, accento
 * chiaro sulle carte scure e scuro sulle carte bianche). In stampa niente
 * colori: solo @media screen.
 */
@media screen {
  /* ---- Alba: arancio e rosa ------------------------------------------- */
  html.per-te[data-accento="alba"] {
    --pt-accento: #FDBA74;
    --pt-link: #FDBA74;
    --pt-link-sopra: #FED7AA;
    --pt-fuoco: #FDBA74;
    --pt-primario: linear-gradient(135deg, #C2410C, #BE185D);
    --pt-fantasma-bordo: rgba(253, 186, 116, .45);
    --pt-fantasma-testo: #FDBA74;
    --pt-alone: rgba(251, 146, 60, .16);
  }
  html.per-te[data-tema="giorno"][data-accento="alba"] {
    --pt-accento: #9A3412;
    --pt-link: #9A3412;
    --pt-link-sopra: #7C2D12;
    --pt-fuoco: #9A3412;
    --pt-fantasma-bordo: #9A3412;
    --pt-fantasma-testo: #9A3412;
    --pt-fantasma-fondo: #FFF4EC;
    --pt-alone: rgba(194, 65, 12, .08);
  }

  /* ---- Bosco: verdi ---------------------------------------------------- */
  html.per-te[data-accento="bosco"] {
    --pt-accento: #6EE7B7;
    --pt-link: #86EFAC;
    --pt-link-sopra: #BBF7D0;
    --pt-fuoco: #6EE7B7;
    --pt-primario: linear-gradient(135deg, #047857, #0F766E);
    --pt-fantasma-bordo: rgba(110, 231, 183, .42);
    --pt-fantasma-testo: #86EFAC;
    --pt-alone: rgba(16, 185, 129, .16);
  }
  html.per-te[data-tema="giorno"][data-accento="bosco"] {
    --pt-accento: #047857;
    --pt-link: #047857;
    --pt-link-sopra: #065F46;
    --pt-fuoco: #047857;
    --pt-fantasma-bordo: #047857;
    --pt-fantasma-testo: #047857;
    --pt-fantasma-fondo: #ECFDF5;
    --pt-alone: rgba(4, 120, 87, .08);
  }

  /* ---- Notte stellata: indaco profondo e oro --------------------------- */
  html.per-te[data-accento="notte_stellata"] {
    --pt-pagina: #0B1026;
    --pt-fuori: #070B1C;
    --pt-carta: #161B3A;
    --pt-carta-velo: rgba(22, 27, 58, .92);
    --pt-barra-fondo: rgba(22, 27, 58, .97);
    --pt-accento: #FDE68A;
    --pt-link: #C7D2FE;
    --pt-link-sopra: #E0E7FF;
    --pt-fuoco: #A5B4FC;
    --pt-primario: linear-gradient(135deg, #4338CA, #6D28D9);
    --pt-fantasma-bordo: rgba(199, 210, 254, .42);
    --pt-fantasma-testo: #C7D2FE;
    --pt-alone: rgba(129, 140, 248, .18);
  }
  html.per-te[data-tema="giorno"][data-accento="notte_stellata"] {
    --pt-pagina: #F8FAFC;
    --pt-fuori: #E5EBF2;
    --pt-carta: #FFFFFF;
    --pt-carta-velo: #FFFFFF;
    --pt-barra-fondo: rgba(255, 255, 255, .98);
    --pt-accento: #4338CA;
    --pt-link: #4338CA;
    --pt-link-sopra: #3730A3;
    --pt-fuoco: #4338CA;
    --pt-fantasma-bordo: #4338CA;
    --pt-fantasma-testo: #4338CA;
    --pt-fantasma-fondo: #EEF2FF;
    --pt-alone: rgba(67, 56, 202, .08);
  }
}

/* ---- I campioni in Io → Aspetto (tondi con i due colori del tema) ---------- */
.io-temi { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 10px; }
.io-tema {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px;
  border: 1px solid var(--pt-bordo-forte); border-radius: 16px; background: var(--pt-incavo); cursor: pointer;
}
.io-tema input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.io-tema:has(input:checked) { border-color: var(--pt-accento); box-shadow: inset 0 0 0 1px var(--pt-accento); }
.io-tema:has(input:focus-visible) { outline: 3px solid var(--pt-fuoco); outline-offset: 2px; }
.io-tema.e-chiuso { cursor: not-allowed; border-style: dashed; color: var(--pt-tenue); }
.io-tema-campione {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #0E7490, #2563EB); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}
.io-tema.e-alba .io-tema-campione { background: linear-gradient(135deg, #C2410C, #BE185D); }
.io-tema.e-bosco .io-tema-campione { background: linear-gradient(135deg, #047857, #0F766E); }
.io-tema.e-notte_stellata .io-tema-campione { background: radial-gradient(circle at 70% 30%, #FDE68A 0 12%, transparent 13%), linear-gradient(135deg, #1E1B4B, #4338CA); }
.io-tema.e-chiuso .io-tema-campione { opacity: .45; }
.io-tema-testi { display: flex; flex-direction: column; min-width: 0; }
.io-tema-nome { font-weight: 700; }
.io-tema-chiuso { font-size: .8125rem; color: var(--pt-tenue); }
/* Senza :has() (browser vecchi) la scelta si vede sul campione. */
.io-tema input:checked + .io-tema-campione { box-shadow: 0 0 0 3px var(--pt-pagina), 0 0 0 5px var(--pt-accento); }
.io-tema input:focus-visible + .io-tema-campione { outline: 3px solid var(--pt-fuoco); outline-offset: 3px; }
.io-tema-campione.e-voce { background: linear-gradient(135deg, #7C3AED, #A855F7); }
.io-sblocchi { margin-top: 18px; }
.io-sblocchi .ac-insieme { margin-top: 14px; }
.io-sblocchi .ac-insieme > legend { margin-bottom: 8px; }
.io-sblocchi .ac-insieme .pt-btn { margin-top: 10px; }