/* Tema chiaro della Sala Giochi.
   Va incluso in ogni pagina insieme a tema.js:

       <link rel="stylesheet" href="tema.css">        (dalla radice)
       <link rel="stylesheet" href="../tema.css">     (da giochi/ e quiz/)

   Ogni pagina continua a definire i propri colori nel suo blocco <style>: quelli
   restano il tema scuro. Qui ci sono solo le differenze del tema chiaro, che
   scattano quando su <html> compare data-tema="chiaro". Non serve modificare il
   CSS delle singole pagine.

   Attenzione ai nomi di classe ripetuti fra giochi diversi: .cella esiste sia nel
   campo minato sia nel sudoku, .tessera sia in 2048 sia nel gioco del 15,
   .casella in scacchi, reversi e battaglia navale. Per questo quasi ogni regola
   qui sotto parte dal contenitore del gioco. */

/* ---------- colori di base ---------- */
html[data-tema="chiaro"]{
  --feltro:#F4EFE3;
  --tavolo:#FFFFFF;
  --bordo:#DDD2BC;
  --crema:#16292F;
  --tenue:#5E7078;

  --senape:#A97B0C;
  --ciliegia:#A82B4A;
  --salvia:#37795A;
  --cobalto:#3560A8;
  --viola:#6B4BA6;
}

html[data-tema="chiaro"] .btn:hover{background:#F0E8D8}
html[data-tema="chiaro"] select,
html[data-tema="chiaro"] input[type="text"],
html[data-tema="chiaro"] input[type="password"]{background:#FFFFFF}

/* ---------- campo minato ---------- */
html[data-tema="chiaro"] #tabellone .cella{background:#E6DCC7;border-color:#D5C9AF}
html[data-tema="chiaro"] #tabellone .cella:hover{background:#DCD0B6}
html[data-tema="chiaro"] #tabellone .cella.scoperta,
html[data-tema="chiaro"] #tabellone .cella.scoperta:hover{background:#FBF7EC;border-color:#EBE2CE}
html[data-tema="chiaro"] #tabellone .cella[data-v="1"]{color:#2C63A8}
html[data-tema="chiaro"] #tabellone .cella[data-v="2"]{color:#2F7A55}
html[data-tema="chiaro"] #tabellone .cella[data-v="3"]{color:#B4472F}
html[data-tema="chiaro"] #tabellone .cella[data-v="6"]{color:#1F7A76}
html[data-tema="chiaro"] #tabellone .cella[data-v="7"]{color:#7A6A52}
html[data-tema="chiaro"] #tabellone .cella[data-v="8"]{color:#5E7078}

/* ---------- forza quattro ---------- */
html[data-tema="chiaro"] #tabellone{background:#EDE5D3}
html[data-tema="chiaro"] #tabellone .buca{background:#FBF7EC;border-color:#DDD2BC}
html[data-tema="chiaro"] #tabellone .buca:hover{background:#F0E8D8}

/* ---------- memory ---------- */
html[data-tema="chiaro"] #tavolo .carta{background:#E6DCC7;border-color:#D5C9AF}
html[data-tema="chiaro"] #tavolo .carta:hover{background:#DCD0B6}
html[data-tema="chiaro"] #tavolo .carta.girata{background:#FFFFFF;border-color:#B9AE95;color:#16292F}
html[data-tema="chiaro"] #tavolo .carta.presa{background:#F1EADB;border-color:#E1D7C2;color:#8A9AA0}

/* ---------- 2048 ---------- */
html[data-tema="chiaro"] #griglia{background:#EDE5D3}
html[data-tema="chiaro"] #griglia .tessera{background:#E6DECB;color:#16292F}
html[data-tema="chiaro"] #griglia .tessera[data-v="2"]{background:#DCD3BE;color:#16292F}
html[data-tema="chiaro"] #griglia .tessera[data-v="4"]{background:#CFC2A4;color:#16292F}
html[data-tema="chiaro"] #griglia .tessera[data-v="8"],
html[data-tema="chiaro"] #griglia .tessera[data-v="512"],
html[data-tema="chiaro"] #griglia .tessera[data-v="1024"]{color:#FFF6E8}
html[data-tema="chiaro"] #griglia .tessera[data-v="2048"]{background:#FFFFFF;color:#16292F}

/* ---------- gioco del 15 ---------- */
html[data-tema="chiaro"] #quadro{background:#EDE5D3}
html[data-tema="chiaro"] #quadro .tessera{background:#E6DCC7;border-color:#D5C9AF}
html[data-tema="chiaro"] #quadro .tessera:hover,
html[data-tema="chiaro"] #quadro .tessera.mobile{background:#DCD0B6}
html[data-tema="chiaro"] #quadro .tessera.vuota{background:transparent;border-color:transparent}

/* ---------- impiccato ---------- */
html[data-tema="chiaro"] .tasto{background:#E6DCC7;border-color:#D5C9AF}
html[data-tema="chiaro"] .tasto:hover{background:#DCD0B6}
html[data-tema="chiaro"] .tasto.sbagliato{background:#F1EADB;border-color:#E1D7C2;color:#A0AEB3}
html[data-tema="chiaro"] .legno{stroke:#8A7A5C}
html[data-tema="chiaro"] .corpo{stroke:#16292F}

/* ---------- sudoku ---------- */
html[data-tema="chiaro"] #griglia .cella{border-color:#E1D7C2}
html[data-tema="chiaro"] #griglia{border-color:#C9BB9C}
html[data-tema="chiaro"] #griglia .cella{background:#FFFFFF}
html[data-tema="chiaro"] #griglia .cella.fissa{background:#EFE8D8}
html[data-tema="chiaro"] #griglia .cella.uguale{background:#E7DFCB}
html[data-tema="chiaro"] #griglia .cella.scelta{background:#DCD0B4}
html[data-tema="chiaro"] #griglia .bordoDestro{border-right-color:#C9BB9C}
html[data-tema="chiaro"] #griglia .bordoSotto{border-bottom-color:#C9BB9C}

/* ---------- reversi (nel dama le caselle hanno classe chiara/scura) ---------- */
html[data-tema="chiaro"] #tavoliere{background:#E3E9E0}
html[data-tema="chiaro"] #tavoliere .casella:not(.chiara):not(.scura){background:#BCD6C2;border-color:#A9C6B0}
html[data-tema="chiaro"] #tavoliere .casella.valida{background:#A9CCB4}
html[data-tema="chiaro"] #tavoliere .casella.valida::after{background:#16292F40}
html[data-tema="chiaro"] .pedina.b,
html[data-tema="chiaro"] .disco.b{background:#FFFFFF;border:1px solid #C2B69A}

/* ---------- battaglia navale ---------- */
html[data-tema="chiaro"] .mare{background:#E3EAEC}
html[data-tema="chiaro"] .mare .casella{background:#D3E2E8;border-color:#BBCDD6;color:#16292F}
html[data-tema="chiaro"] #nemico .casella:hover{background:#C2D8E2}
html[data-tema="chiaro"] .mare .casella.nave{background:#93B3C2}
html[data-tema="chiaro"] .mare .casella.acqua{background:#F1EADB;color:#8A9AA0}

/* ---------- mastermind ---------- */
html[data-tema="chiaro"] .riga{background:#FFFFFF}
html[data-tema="chiaro"] .piolo{background:#EDE5D3;border-color:#D5C9AF}
html[data-tema="chiaro"] .risposta i.pieno{background:#16292F;border-color:#16292F}
html[data-tema="chiaro"] .risposta i.mezzo{border-color:#16292F}

/* ---------- klondike e freecell ---------- */
html[data-tema="chiaro"] .carta.coperta{
  background:#9FB3BC;border-color:#7E97A2;
  background-image:repeating-linear-gradient(45deg,#B0C2C9 0 6px,#9FB3BC 6px 12px);
}
html[data-tema="chiaro"] .carta.vuota{border-color:#C2B69A;color:#8A7A5C}

/* ---------- quiz ---------- */
html[data-tema="chiaro"] .q-voce{background:#FFFFFF}
html[data-tema="chiaro"] .q-voce:hover{background:#F0E8D8}
html[data-tema="chiaro"] .q-voce.scelta{color:#FFF6E8}
html[data-tema="chiaro"] .q-avanzamento{background:#EDE5D3}
html[data-tema="chiaro"] .q-carta{background:#FFFFFF;border:1px solid #E1D7C2}

/* ---------- tris ---------- */
html[data-tema="chiaro"] #campo .cella{background:#E6DCC7;border-color:#D5C9AF}
html[data-tema="chiaro"] #campo .cella:hover,
html[data-tema="chiaro"] #campo .cella.piena:hover{background:#DCD0B6}
html[data-tema="chiaro"] #campo .cella.piena{background:#E6DCC7}

/* ---------- testo sui fondi colorati ----------
   Nel tema scuro i pulsanti attivi hanno scritta quasi nera su fondo chiaro.
   Nel tema chiaro i colori d'accento diventano scuri, quindi la scritta va
   schiarita, altrimenti resta scuro su scuro. */
html[data-tema="chiaro"] .btn.attivo,
html[data-tema="chiaro"] .btn.principale,
html[data-tema="chiaro"] .tasto.giusto,
html[data-tema="chiaro"] .casella.colpita,
html[data-tema="chiaro"] .casella.affondata,
html[data-tema="chiaro"] .pezzoScelta.nero{color:#FFF6E8}

/* ---------- briscola ---------- */
html[data-tema="chiaro"] #tavoloBriscola{background:#EDE5D3}
html[data-tema="chiaro"] #tavoloBriscola .fila + .fila{border-top-color:#DDD2BC}

/* ---------- mulino ---------- */
html[data-tema="chiaro"] #tria{background:#E3E9E0}
html[data-tema="chiaro"] #tria .linea{stroke:#8A9A86}
html[data-tema="chiaro"] #tria .posto{fill:#CFDCD0;stroke:#8A9A86}
html[data-tema="chiaro"] #tria .posto:hover{fill:#BACCBC}
html[data-tema="chiaro"] #tria .pedina-b{fill:#FFFFFF;stroke:#B9AE95}

/* ---------- torre di hanoi ---------- */
html[data-tema="chiaro"] #torri{background:#EDE5D3}
html[data-tema="chiaro"] #torri .paletto::before,
html[data-tema="chiaro"] #torri .paletto::after{background:#A8977A}

/* ---------- simon ---------- */
html[data-tema="chiaro"] #simon{background:#EDE5D3}

/* ---------- banner dei cookie ---------- */
html[data-tema="chiaro"] .consenso{box-shadow:0 -6px 20px #0000001a}

/* Scacchi, dama, snake e tetris tengono scacchiera e schermo scuri anche nel tema
   chiaro: sono la superficie di gioco, e schiarirla renderebbe illeggibili i pezzi
   bianchi e i blocchi chiari disegnati sulla tela. */
