/* style.css - tema scuro condiviso da palco.php, index.php e ospiti.php.
   I colori principali arrivano da theme_css() (si scelgono in gestione.php). */

:root{
  --bg:#4d4d4d; --accent:#ffdd00; --text:#ffffff; --guest:#6fd3ff;
  --on-accent:#1b1b1b;
  --panel:rgba(255,255,255,.08); --line:rgba(255,255,255,.18);
  --good:#3ecf6e; --bad:#ff6161; --warn:#ffb020;
  --rowh:76px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block}
[hidden]{display:none !important}

/* ---------- animazioni ---------- */
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.enter{animation:enter .55s ease both}

/* ---------- classifica (comune) ---------- */
.board{display:block}
.brow{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.brow .rk{font-weight:800;color:var(--accent);text-align:center;flex:none}
.brow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .pt{font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.brow.guest .rk,.brow.guest .nm,.brow.guest .pt{color:var(--guest)}
.brow.me{background:var(--accent)}
.brow.me .rk,.brow.me .nm,.brow.me .pt{color:var(--on-accent)}
.empty{opacity:.7}

/* opzioni: stati comuni a palco e telefono */
.right{background:rgba(62,207,110,.22) !important;border-color:var(--good) !important}
.wrong{background:rgba(255,97,97,.2) !important;border-color:var(--bad) !important}
.dim{opacity:.35}

/* =====================================================================
   PALCO  (1920 x 1080 fissi: e' la pagina che cattura OBS)
   ===================================================================== */
body.stage{width:1920px;height:1080px;overflow:hidden;position:relative}
.stage .wrap{display:grid;grid-template-columns:1fr 640px;gap:56px;padding:48px 56px;height:1080px}
.stage .main{display:flex;flex-direction:column;min-width:0;min-height:0}
.stage .side{display:flex;flex-direction:column;gap:28px;min-height:0}

.stage .brand{display:flex;align-items:center;gap:28px;height:112px;flex:none}
.stage .brand img{max-height:100px;max-width:280px;object-fit:contain}
.stage .brand h1{margin:0;font-size:46px;font-weight:700;line-height:1.1}
.stage .brand p{margin:4px 0 0;font-size:26px;opacity:.75}

.stage #content{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.stage .sl{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:0}
.stage .sl.top{justify-content:flex-start}

/* spazio 16:9 in alto a destra: immagine della slide oppure area libera per la webcam */
.stage .slot{width:640px;height:360px;flex:none}   /* spazio webcam: sempre vuoto e trasparente */
.stage .photo{width:640px;height:360px;border-radius:18px;overflow:hidden;flex:none;background:rgba(255,255,255,.06)}
.stage .photo:empty{display:none}
.stage .photo img{width:100%;height:100%;object-fit:cover}

.stage .big{font-size:59px;line-height:1.12;font-weight:700;margin:0 0 26px}
.stage .txt{font-size:40px;line-height:1.4;opacity:.92;white-space:pre-line}
.stage .kicker{font-size:30px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin:0 0 18px}

.stage .q-title{font-size:46px;line-height:1.15;font-weight:700;margin:0 0 14px}
.stage .q-body{font-size:32px;opacity:.85;margin:0 0 8px;white-space:pre-line}
.stage .opt{display:flex;align-items:center;gap:26px;background:var(--panel);border:2px solid var(--line);
  border-radius:18px;padding:16px 28px;font-size:44px;margin-top:16px}
.stage .opt .lt{width:66px;height:66px;border-radius:14px;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-weight:800;font-size:38px;flex:none}
.stage .opt .lb{flex:1;min-width:0;overflow-wrap:anywhere}

.pill{display:inline-flex;align-items:center;gap:14px;font-size:30px;padding:10px 28px;border-radius:999px;
  background:var(--panel);margin-top:30px;align-self:flex-start}
.pill i{width:18px;height:18px;border-radius:50%;background:#aaa}
.pill.open i{background:var(--good);animation:pulse 1.2s infinite}
.pill.closing i{background:var(--warn);animation:pulse .8s infinite}
.pill.closed i{background:var(--bad)}

.stage .boardwrap{display:flex;flex-direction:column;min-height:0;height:100%}
.stage .bhead{font-size:56px;font-weight:700;margin:0 0 16px;color:var(--accent);flex:none}
.stage .bscroll{overflow:hidden;flex:1;min-height:0}
.stage .brow{height:var(--rowh);padding:0 28px;gap:28px;font-size:40px}
.stage .brow .rk{width:84px;font-size:44px}
.stage #side{flex:1;min-height:0;overflow:hidden}
.stage .side .boardwrap{height:auto}
.stage .side .bhead{font-size:44px;color:var(--guest)}
.stage .side .brow{height:64px;font-size:34px;padding:0 20px}
.stage .side .brow .rk{width:60px;font-size:36px}
.stage .empty{font-size:34px}

/* =====================================================================
   TELEFONO / PAGINE PUBBLICHE
   ===================================================================== */
body.phone{min-height:100vh;font-size:18px}
.phone .page{max-width:640px;margin:0 auto;padding:14px 16px 48px}
.pbrand{display:flex;align-items:center;gap:12px;padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.pbrand img{max-height:44px;max-width:120px;object-fit:contain}
.pbrand b{display:block;font-size:19px}
.pbrand span{font-size:14px;opacity:.75}
/* punteggio del giocatore, in alto a destra sopra la linea */
.pbrand .myscore{margin-left:auto;flex:none;text-align:right;font-size:15px;line-height:1.1;opacity:.95}
.pbrand .myscore b{display:block;font-size:32px;color:var(--accent);font-variant-numeric:tabular-nums}

.chip{display:inline-block;font-size:14px;padding:5px 12px;border-radius:999px;background:var(--panel);margin-bottom:14px}
.chip b{color:var(--accent)}
.chip.guest b{color:var(--guest)}

/* barra in alto nella pagina del giocatore: "Giochi come ..." a sinistra, Aggiorna a destra */
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.topbar .chip{margin-bottom:0;font-size:19px;padding:8px 16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.refbtn{margin-left:auto;flex:none;font:inherit;font-weight:700;font-size:17px;padding:9px 20px;border-radius:999px;
  border:2px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
.refbtn:disabled{opacity:.5;cursor:default}
.refwrap{margin-left:auto;flex:none;max-width:50%;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.refwrap small{font-size:12px;line-height:1.25;text-align:right;opacity:.7}
@media (min-width:900px){
  .topbar .chip{font-size:23px;padding:10px 20px}
  .refbtn{font-size:20px;padding:11px 24px}
  .refwrap small{font-size:14px}
  .pbrand .myscore{font-size:19px}
  .pbrand .myscore b{font-size:42px}
}

.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px}
.phone h2{margin:0 0 10px;font-size:26px;line-height:1.2}
.phone .kick{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.phone .txt{font-size:18px;line-height:1.5;white-space:pre-line;opacity:.92}
.phone .img16{aspect-ratio:16/9;width:100%;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06);margin:12px 0}
.phone .img16 img{width:100%;height:100%;object-fit:cover}

.phone .popt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;font-size:19px;
  color:var(--text);background:rgba(255,255,255,.10);border:2px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-top:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.phone .popt .lt{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-weight:800;flex:none}
.phone .popt:disabled{cursor:default}
.phone .popt:not(:disabled):active{transform:scale(.99)}
.phone .popt.chosen{border-color:var(--accent);background:rgba(255,221,0,.16)}
.phone .note{margin:14px 0 0;font-size:16px;opacity:.85}
.phone .note.good{color:var(--good);opacity:1}
.phone .note.bad{color:var(--bad);opacity:1}
.phone .score{margin-top:14px;font-size:20px}
.phone .score b{color:var(--accent);font-size:26px}

.phone .brow{padding:11px 12px;gap:14px;font-size:18px}
.phone .brow .rk{width:38px;font-size:19px}
.phone h3{margin:22px 0 8px;font-size:19px;color:var(--guest)}
.phone .mypos{background:var(--accent);color:var(--on-accent);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-weight:700}

/* form di registrazione */
.phone label{display:block;margin:14px 0 6px;font-size:15px;opacity:.85}
.phone input.txtin{width:100%;font:inherit;font-size:20px;padding:13px 14px;border-radius:12px;
  border:2px solid var(--line);background:rgba(0,0,0,.25);color:var(--text)}
.phone input.txtin:focus{outline:none;border-color:var(--accent)}
.phone .btnp{display:block;width:100%;margin-top:16px;font:inherit;font-size:19px;font-weight:700;
  padding:14px;border:0;border-radius:12px;background:var(--accent);color:var(--on-accent);cursor:pointer}
.phone .btnp:disabled{opacity:.5}
.phone .privacy{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,221,0,.12);
  border:1px solid rgba(255,221,0,.45);font-size:15px;line-height:1.45}
.phone .err{margin:12px 0 0;color:var(--bad);font-size:16px}
.phone a.lnk{color:var(--accent)}
.phone h3.gen{color:var(--accent)}
.phone .boards h3{margin:14px 0 8px}

/* =====================================================================
   RESPONSIVE: tablet e computer (la pagina si allarga e si organizza)
   ===================================================================== */
@media (min-width:600px){
  .phone .page{max-width:780px;padding:22px 24px 56px}
}
@media (min-width:900px){
  body.phone{font-size:20px}
  .phone .page{max-width:1120px;padding:30px 40px 72px}
  .pbrand{padding-bottom:18px;margin-bottom:24px}
  .pbrand img{max-height:60px;max-width:180px}
  .pbrand b{font-size:24px}
  .pbrand span{font-size:16px}
  .phone .card{padding:30px 34px}
  .phone h2{font-size:36px}
  .phone .kick{font-size:15px}
  .phone .txt{font-size:21px}
  .phone .note{font-size:19px}
  .phone .img16{max-width:760px}
  /* le opzioni di risposta su due colonne */
  .phone .opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
  .phone .opts .popt{margin-top:0;font-size:21px;padding:18px 20px}
  .phone .popt .lt{width:42px;height:42px}
  .phone .score{font-size:24px}
  .phone .score b{font-size:32px}
  /* classifiche piu' grandi; nel finale le due liste affiancate */
  .phone .brow{padding:13px 16px;font-size:21px}
  .phone .brow .rk{width:52px;font-size:22px}
  .phone .boards.two{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
  .phone .boards h3{font-size:22px;margin:0 0 10px}
  /* form di registrazione centrati e di larghezza comoda */
  #reg .card,.page>.card{max-width:580px;margin-left:auto;margin-right:auto}
  #reg .card{margin-top:5vh}
}
@media (min-width:1500px){
  body.phone{font-size:22px}
  .phone .page{max-width:1280px}
  .phone .txt{font-size:23px}
  .phone .opts .popt{font-size:23px}
}