:root { --navy:#1d3557; --blue:#2f6fdb; --bg:#f2f4f8; --card:#fff; --ink:#1b1f2a; --mut:#6b7385;
        --ok:#1f9d55; --okbg:#e3f5ea; --ko:#d64545; --kobg:#fbe7e7; --warn:#b7791f; --line:#dfe3ec; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.4 system-ui,"Segoe UI",Roboto,sans-serif; touch-action:manipulation; }
button,input,select,textarea { font:inherit; color:inherit; }
#bar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:8px; background:var(--navy); color:#fff; padding:8px 12px; min-height:52px; }
#bar h1 { font-size:1.1rem; margin:0; flex:1; font-weight:600; line-height:1.2; display:flex; flex-direction:column; min-width:0; }
#bar h1 .app { font-size:.68rem; font-weight:500; opacity:.75; }
#bar h1 .app:only-child { font-size:1.1rem; font-weight:600; opacity:1; }
#bar h1 .pag { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bar button { background:none; border:0; color:#fff; font-size:1.6rem; width:44px; height:44px; border-radius:10px; }
#bar button:active { background:#ffffff22; }
#drawer { position:fixed; inset:0 30% 0 0; max-width:300px; background:#fff; z-index:50; transform:translateX(-105%); transition:transform .2s; box-shadow:2px 0 14px #0004; padding:12px 0; overflow:auto; }
#drawer.open { transform:none; }
#scrim { position:fixed; inset:0; background:#0006; z-index:40; display:none; }
#scrim.open { display:block; }
#drawer a { display:block; padding:15px 20px; color:var(--ink); text-decoration:none; font-size:1.05rem; }
#drawer a.att { background:#e8eefb; font-weight:600; }
#drawer .chi { padding:6px 20px 12px; color:var(--mut); font-size:.9rem; border-bottom:1px solid var(--line); margin-bottom:6px; }
main { padding:14px; max-width:720px; margin:0 auto; padding-bottom:90px; }
h2 { font-size:1.2rem; margin:6px 0 12px; }
h3 { font-size:1rem; margin:18px 0 8px; color:var(--navy); }
.card { background:var(--card); border-radius:14px; padding:14px; margin-bottom:12px; box-shadow:0 1px 3px #0001; }
.voce { display:block; padding:18px; margin-bottom:10px; background:var(--card); border-radius:14px; color:inherit; text-decoration:none; font-size:1.1rem; box-shadow:0 1px 3px #0002; }
.voce small { display:block; color:var(--mut); font-size:.85rem; margin-top:3px; }
label { display:block; font-size:.88rem; color:var(--mut); margin:12px 0 4px; }
input,select,textarea { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; min-height:48px; }
input[readonly] { background:#eef0f5; }
input[type=checkbox],input[type=radio] { width:22px; height:22px; min-height:0; flex:none; }
.rigac { display:flex; gap:10px; align-items:center; } .rigac label { margin:0; color:var(--ink); font-size:1rem; flex:1; }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .cols3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.btn { display:block; width:100%; padding:14px; border:0; border-radius:12px; background:var(--blue); color:#fff; font-weight:600; font-size:1.05rem; min-height:52px; text-align:center; text-decoration:none; }
.btn:active { filter:brightness(.9); } .btn[disabled] { opacity:.45; }
.btn.sec { background:#e5e9f2; color:var(--ink); } .btn.ko { background:var(--ko); } .btn.ok { background:var(--ok); } .btn.out { background:#fff; color:var(--ink); border:1px solid var(--line); }
.btn.piccolo { display:inline-block; width:auto; padding:8px 14px; min-height:40px; font-size:.95rem; }
.mt { margin-top:12px; } .mut { color:var(--mut); } .pic { font-size:.85rem; } .centro { text-align:center; }
.msg { padding:10px 12px; border-radius:10px; margin:10px 0; font-size:.95rem; }
.msg.ok { background:var(--okbg); } .msg.ko { background:var(--kobg); } .msg.w { background:#fdf3dc; }
.lista .riga { display:flex; align-items:center; gap:10px; padding:12px 4px; border-bottom:1px solid var(--line); }
.lista .riga:last-child { border:0; } .lista .grow { flex:1; min-width:0; } .lista .num { font-weight:700; width:42px; text-align:center; font-size:1.15rem; color:var(--navy); }
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:.78rem; background:#e5e9f2; }
.badge.g { background:var(--okbg); color:#116b38; } .badge.r { background:var(--kobg); color:#9b2121; } .badge.y { background:#fdf3dc; color:#8a5a00; }
.tabs { display:flex; gap:6px; margin-bottom:12px; overflow-x:auto; }
.tabs button { flex:1; padding:11px 12px; border:0; border-radius:10px; background:#e5e9f2; font-weight:600; white-space:nowrap; }
.tabs button.on { background:var(--navy); color:#fff; }
.scroll { overflow-x:auto; margin:0 -14px; padding:0 14px; }
table { border-collapse:collapse; width:100%; font-size:.9rem; background:#fff; }
th,td { padding:8px 9px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th:first-child,td:first-child { text-align:left; position:sticky; left:0; background:#fff; }
th { background:#eef1f7; font-size:.8rem; } tr.sez td { background:#eef1f7; font-weight:700; color:var(--navy); text-align:left; }
.kpi { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .kpi div { background:#fff; border-radius:12px; padding:10px; text-align:center; }
.kpi b { display:block; font-size:1.4rem; color:var(--navy); } .kpi span { font-size:.78rem; color:var(--mut); }
/* gioca partita */
#score { position:sticky; top:52px; z-index:20; background:var(--navy); color:#fff; margin:-14px -14px 14px; padding:10px 14px 12px; }
#score .punti { display:flex; align-items:center; justify-content:center; gap:14px; }
#score .sq { flex:1; text-align:center; font-size:.85rem; opacity:.85; } #score .sq.batte { opacity:1; font-weight:700; }
#score .sq .pallino { display:inline-block; width:10px; height:10px; border-radius:50%; background:#ffd23f; margin-right:5px; }
#score .n { font-size:3.2rem; font-weight:800; line-height:1; display:block; }
#score .sep { font-size:2rem; opacity:.6; }
#score .info { display:flex; justify-content:space-between; align-items:center; font-size:.85rem; margin-top:6px; opacity:.9; }
#score button { background:#ffffff26; border:0; color:#fff; padding:6px 12px; border-radius:8px; }
.grandi { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grandi .btn { min-height:110px; font-size:1.5rem; border-radius:16px; }
.esito { display:block; width:100%; text-align:left; padding:12px 14px; margin-bottom:8px; border-radius:12px; border:2px solid var(--line); background:#fff; min-height:64px; }
.esito b { display:block; font-size:1.05rem; } .esito span { display:block; font-size:.82rem; color:var(--mut); margin-top:2px; }
.esito.v { border-color:var(--ok); } .esito.p { border-color:var(--ko); }
.esito[disabled] { opacity:.4; border-color:var(--line); }
.numeri { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.numeri button { min-height:72px; border-radius:14px; border:2px solid var(--navy); background:#fff; font-size:1.6rem; font-weight:700; color:var(--navy); }
.numeri button small { display:block; font-size:.8rem; font-weight:400; color:var(--mut); }
.numeri button:active { background:var(--navy); color:#fff; }
.storico .riga { padding:9px 4px; font-size:.92rem; }
.storico .sc { font-weight:700; width:64px; text-align:center; flex:none; }
#modale { position:fixed; inset:0; z-index:60; background:#0008; display:none; align-items:flex-end; justify-content:center; }
#modale.open { display:flex; }
#modale .foglio { background:var(--bg); width:100%; max-width:720px; max-height:92vh; overflow:auto; border-radius:18px 18px 0 0; padding:16px 14px 24px; }
#modale .foglio h2 { display:flex; justify-content:space-between; align-items:center; margin-top:0; }
#modale .chiudi { background:none; border:0; font-size:1.6rem; width:40px; height:40px; }
#toast { position:fixed; left:12px; right:12px; bottom:18px; z-index:80; background:#222; color:#fff; padding:12px 14px; border-radius:12px; text-align:center; display:none; }
#toast.ko { background:var(--ko); } #toast.on { display:block; }

.numeri button.in, .formazione button.in { background:var(--ok); border-color:var(--ok); color:#fff; }
.numeri button.in small, .formazione button.in small { color:#e3f5ea; }
.numeri button.out, .formazione button.out { background:#eceef3; border-color:#d9dde6; color:#9aa1b2; }
.numeri button.out small, .formazione button.out small { color:#b1b7c4; }
.numeri.campo button:active { filter:brightness(.92); background:inherit; color:inherit; }
.incampo { display:flex; align-items:center; gap:8px; background:#fff; border-radius:12px; padding:8px 10px; margin-bottom:12px; box-shadow:0 1px 3px #0001; }
.incampo .chips { flex:1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.9rem; color:var(--mut); }
.chip { display:inline-flex; width:36px; height:36px; border-radius:50%; background:var(--ok); color:#fff; align-items:center; justify-content:center; font-weight:700; }
.incampo a { font-weight:700; color:var(--blue); text-decoration:none; padding:8px; }
.incampo.vuoto { background:#fdf3dc; }

.formazione { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:6px; }
.formazione > :nth-child(7) { grid-column:2; }
.formazione button { min-height:78px; border-radius:14px; border:2px solid var(--navy); background:#fff; font-size:1.6rem; font-weight:700; color:var(--navy); }
.formazione button small { display:block; font-size:.8rem; font-weight:400; color:var(--mut); }
.formazione .vuoto { min-height:78px; border:2px dashed #b9c0cf; border-radius:14px; background:#fafbfd; font-size:.95rem; font-weight:600; color:var(--mut); }
.formazione .vuoto small { font-size:.65rem; font-weight:400; }
.formazione button.attiva { outline:4px solid #f5a623; outline-offset:2px; }
.numeri button.sceglibile { background:#fff; border-color:var(--navy); color:var(--navy); }
.numeri button.sceglibile small { color:var(--mut); }