/* ==========================================================================
   WINNER'S CLUB · tema condiviso delle schermate di gioco
   Caricato DOPO lo <style> di ogni gioco, quindi vince sulle regole locali.
   Obiettivi: un solo linguaggio visivo per tutti i giochi, nessun selettore
   della lingua dentro il gioco (sta nella barra del sito), due impaginazioni
   (desktop e mobile) senza misure che dipendano dai testi.
   ========================================================================== */

:root{
  --wc-bg:#070c18; --wc-bg2:#111a33;
  --wc-panel:#101b33; --wc-panel2:#0c1526; --wc-panel3:#0a1322;
  --wc-line:#22345c; --wc-line2:#2d4370;
  --wc-text:#eaf0ff; --wc-muted:#9fb0d4;
  --wc-gold:#f4c33a; --wc-goldHi:#ffe08a; --wc-red:#d21f2f;
  --wc-serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --wc-ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wc-goldgrad:linear-gradient(180deg,#ffe488,#f4c33a 45%,#e2a51c);
}

body{
  background:radial-gradient(120% 90% at 50% -10%,var(--wc-bg2),var(--wc-bg) 60%) !important;
  color:var(--wc-text);
  font-family:var(--wc-ui);
}

/* --- la fascia informativa non serve piu': il chip della lingua e' nella pagina --- */
.tsband{display:none !important}

/* --- intestazione del gioco --- */
header{border-bottom:1px solid #1a2a4a}
header h1,.brand h1,#ttl{
  font-family:var(--wc-serif) !important; font-weight:400 !important;
  color:var(--wc-goldHi) !important; letter-spacing:.01em !important; text-transform:none !important;
}
.brand .sub,header .sub,#sub{color:var(--wc-muted) !important; letter-spacing:.02em !important; text-transform:none !important}
.rule{display:none}

/* --- barra strumenti --- */
.tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* pulsanti icona / testo brevi */
.icon-btn,.btn.ghost.sm{
  background:var(--wc-panel3) !important; border:1px solid var(--wc-line) !important;
  color:var(--wc-muted) !important; border-radius:10px !important;
  font-family:var(--wc-ui) !important; font-weight:700; cursor:pointer;
  display:inline-grid; place-items:center; box-shadow:none !important;
}
.icon-btn:hover,.btn.ghost.sm:hover{border-color:var(--wc-line2) !important; color:#fff !important}
.icon-btn.active,.icon-btn.on{
  background:linear-gradient(180deg,#263b68,#18274a) !important; color:#fff !important; border-color:var(--wc-line2) !important;
}
.icon-btn:focus-visible,.btn:focus-visible,.seg button:focus-visible{outline:2px solid var(--wc-gold); outline-offset:2px}

/* controlli segmentati (difficolta', lunghezze, temi...) */
.seg{background:var(--wc-panel3) !important; border:1px solid var(--wc-line) !important; border-radius:11px !important; overflow:hidden}
.seg .cap{
  color:var(--wc-muted) !important; font-size:10.5px !important; letter-spacing:.12em !important;
  text-transform:uppercase !important; font-weight:800 !important; padding:7px 10px !important;
  border-right:1px solid var(--wc-line) !important; display:grid; place-items:center; background:transparent !important;
}
.seg button{
  background:transparent !important; border:0 !important; color:var(--wc-muted) !important;
  font-family:var(--wc-ui) !important; font-weight:800 !important; font-size:12.5px !important;
  padding:7px 12px !important; cursor:pointer; white-space:nowrap;
}
.seg button:hover{color:#fff !important}
.seg button.on,.seg button.active{background:linear-gradient(180deg,#263b68,#18274a) !important; color:#fff !important}

/* pulsanti principali */
.btn{
  border:none; border-radius:11px; cursor:pointer; font-family:var(--wc-ui) !important; font-weight:800;
  background:var(--wc-goldgrad) !important; color:#20180a !important; box-shadow:none !important;
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent !important; border:1px solid var(--wc-line) !important; color:var(--wc-text) !important}
.btn.ghost:hover{border-color:var(--wc-line2) !important}
.btn:disabled{opacity:.45; cursor:default; filter:none}

/* --- riquadri: punteggi, indizi, elenchi --- */
.hud{display:flex; gap:8px; flex-wrap:wrap}
.hud .box,.box,.side-card,.card,.imgcard,.scoreboard,.statusbar,.status{
  background:linear-gradient(180deg,var(--wc-panel),var(--wc-panel2)) !important;
  border:1px solid var(--wc-line) !important; border-radius:14px !important; box-shadow:none !important;
}
.hud .box{border-radius:12px !important; padding:8px 12px !important; text-align:center; min-width:74px}
.hud .box .k,.box .k{
  font-size:9.5px !important; color:var(--wc-muted) !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; font-weight:800 !important;
}
.hud .box .v,.box .v{
  font-family:var(--wc-serif) !important; font-weight:800 !important; font-size:19px !important;
  background:var(--wc-goldgrad); -webkit-background-clip:text; background-clip:text; color:transparent !important;
}
.side-card h3,.card h3,.th{
  font-family:var(--wc-serif) !important; font-weight:400 !important; color:var(--wc-goldHi) !important;
}

/* --- modali --- */
.overlay{background:rgba(4,7,14,.76) !important}
.modal{
  background:linear-gradient(180deg,var(--wc-panel),var(--wc-panel2)) !important;
  border:1px solid var(--wc-line) !important; border-radius:16px !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important;
}
.modal h2{font-family:var(--wc-serif) !important; font-weight:400 !important; color:var(--wc-goldHi) !important}
.modal p,.modal li{color:#c9d5ea !important}
.modal .close{color:var(--wc-muted) !important}
.note{color:var(--wc-muted) !important; font-size:12px}

/* --- selettori della lingua dentro al gioco: NON devono esistere ---
   (regola di sicurezza: se un gioco ne conserva uno, resta nascosto) */
#lang-btn,#dial-btn,#lang-overlay,#dial-overlay,.lang-opt,.dial-opt{display:none !important}

/* .seg = controllo segmentato unito (una pillola).
   .seg.spaced = gruppo di pulsanti separati: stesso linguaggio visivo, senza cornice unica. */
.seg{display:inline-flex; width:auto}
.seg.spaced{display:flex; width:100%; background:transparent !important; border:0 !important; overflow:visible; gap:8px; flex-wrap:wrap; justify-content:center}
.seg.spaced button{
  background:var(--wc-panel3) !important; border:1px solid var(--wc-line) !important;
  border-radius:10px !important; padding:9px 15px !important; font-size:13px !important; color:var(--wc-muted) !important;
}
.seg.spaced button.on,.seg.spaced button.active{
  background:linear-gradient(180deg,#263b68,#18274a) !important; color:#fff !important; border-color:var(--wc-line2) !important;
}

/* ===== telefono: aree di tocco e testi leggibili ===== */
@media (max-width:900px){
  /* nessun pulsante piu' basso di 36px: si deve poter premere col dito */
  .seg button,.icon-btn,.btn,.opt,#pad button,.pad button,.key{min-height:36px}
  .seg .cap{min-height:36px; font-size:10.5px !important}
  /* etichette dei riquadri: niente sotto gli 10.5px */
  .hud .box .k,.box .k,.k{font-size:10.5px !important}
}