/* Talenta — «La tua giornata» (24/09/2026, al posto del medagliere del 23/09): bottone 📋
   accanto a ↻ col numero delle todo di oggi, pannello che si apre solo al click — a destra
   sotto la barra su Mac e iPad, foglio dal basso sull'iPhone. Variabili di style.css. */

/* --- il bottone: quadrato come ↻, col numero delle todo in un pallino --- */
.utente-chip #btn-gioco{position:relative;padding:4px 8px;font-size:14px;line-height:1;min-width:30px}
#btn-gioco .gi-n{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--card)}

/* --- il pannello --- */
.gi-velo{position:fixed;inset:0;z-index:44;background:rgba(16,24,40,.18);opacity:0;transition:opacity .2s;pointer-events:none}
.gi-velo.visibile{opacity:1;pointer-events:auto}
#gioco{position:fixed;z-index:45;top:calc(56px + env(safe-area-inset-top));right:14px;width:min(400px,calc(100vw - 28px));
  max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;background:var(--card);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 44px rgba(16,24,40,.22);padding:12px 14px 14px;
  opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .18s ease,transform .18s ease}
#gioco.visibile{opacity:1;transform:none}
.gi-testa{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gi-testa b{font-size:15px}
.gi-testa span{color:var(--muted);font-size:12px}
.gi-x{margin-left:auto;border:0;background:none;color:var(--muted);font-size:15px;width:32px;height:32px;
  border-radius:8px;cursor:pointer}
.gi-x:hover{background:var(--chip);color:var(--fg)}

.gi-sez{border-top:1px solid var(--line);padding:8px 0 6px}
.gi-tit{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:var(--fg);
  font-size:13px;font-weight:700;padding:4px 2px;cursor:pointer;text-align:left}
.gi-tit i{font-style:normal;color:var(--muted);font-weight:600}
.gi-tit em,.gi-posta em{margin-left:auto;font-style:normal;color:var(--muted);font-size:16px}
.gi-riga{display:flex;align-items:baseline;gap:8px;width:100%;border:0;background:none;color:var(--fg);
  text-align:left;padding:6px 6px;border-radius:9px;cursor:pointer;font-size:13.5px;line-height:1.35}
.gi-riga:hover{background:var(--chip)}
.gi-riga .gi-testo{flex:1;min-width:0;overflow-wrap:anywhere}
.gi-riga small{color:var(--muted);font-size:11.5px;flex:none;max-width:40%;text-align:right;overflow-wrap:anywhere}
.gi-riga.scaduta small{color:var(--err)}
.gi-pal{flex:none;width:18px;text-align:center;font-size:12px}
.gi-ora{flex:none;min-width:44px;font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);font-size:12.5px}
.gi-vuoto{color:var(--muted);font-size:12.5px;padding:4px 6px}
.gi-altre{border:0;background:none;color:var(--accent);font-size:12.5px;font-weight:600;padding:4px 6px;cursor:pointer}
.gi-posta{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;text-align:left;font-size:13.5px}
.gi-posta b{font-size:20px;font-variant-numeric:tabular-nums}
.gi-posta.caldo{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--card))}
.gi-posta.caldo b{color:var(--accent)}

/* iPhone: foglio dal basso */
@media(max-width:600px){
  #gioco{top:auto;right:0;left:0;bottom:0;width:100%;max-height:84vh;max-height:84dvh;border-radius:18px 18px 0 0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));transform:translateY(105%)}
  #gioco.visibile{transform:none}
  .gi-velo{background:rgba(16,24,40,.32)}
  .utente-chip #btn-gioco{min-height:36px}
  .gi-riga{padding:9px 6px}
}
@media(prefers-reduced-motion:reduce){
  #gioco,.gi-velo{transition:none}
}