:root{
  --bg:#0e1330; --bg2:#161d47; --card:#1b2350; --card2:#232c63;
  --ink:#eef1ff; --muted:#9aa3d4; --line:#2c3670;
  --primary:#2f7ff0; --primary2:#6a5cff;
  --ok:#34c759; --warn:#ffd60a; --bad:#e5322d;
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:radial-gradient(120% 80% at 50% 0%,var(--bg2),var(--bg));
  color:var(--ink);
  min-height:100vh; min-height:100dvh;
  overscroll-behavior:none;
}
#app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}

/* ── Screens ── */
.screen{display:none;flex-direction:column;flex:1;padding:16px;padding-top:max(16px,env(safe-area-inset-top));gap:14px;animation:fade .25s ease}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Hero / logo ── */
.hero{display:flex;justify-content:center;padding-top:24px}
.logo{width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 12px 30px rgba(0,0,0,.4));border-radius:32px}

/* ── Brand wordmark ── */
.brand{font-weight:800;font-size:20px;letter-spacing:-.3px}
.brand.small{font-size:16px}
.brand-i{background:linear-gradient(90deg,#8b5cf6,#2f7ff0,#34c759,#ff8f1f,#e5322d);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Cards ── */
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}

label{font-size:13px;color:var(--muted);font-weight:600}
input{background:#0f1436;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:14px 16px;font-size:17px;outline:none;width:100%}
input:focus{border-color:var(--primary)}
.code-input,.room-code{letter-spacing:4px;text-transform:uppercase;font-weight:800;text-align:center}

/* ── Buttons ── */
.btn{border:0;border-radius:14px;padding:15px 18px;font-size:16px;font-weight:700;
  cursor:pointer;color:#fff;transition:transform .05s,filter .15s;width:100%}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary2))}
.btn-secondary{background:#2b3574;border:1px solid var(--line)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn.small{padding:10px;font-size:14px}

.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.hint{font-size:13px;color:var(--muted);margin:0;text-align:center;min-height:16px}

/* ── Topbar ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:2px}
.topbar .me{font-size:13px;color:var(--muted)}
.game-top{gap:8px}
.turn-pill{background:#0f1436;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:13px;font-weight:700;flex:1;text-align:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.turn-pill.mine{background:linear-gradient(90deg,var(--ok),#0fa958);border-color:transparent;color:#04210f}
.timer{font-size:14px;font-weight:700;color:var(--warn);min-width:56px;text-align:right}
.timer.urgent{color:var(--bad)}

/* ── Lobby ── */
.lobby-label{color:var(--muted);font-size:13px;margin:0;font-weight:600}
.room-code{font-size:40px;background:#0f1436;border:1px dashed var(--line);border-radius:14px;padding:14px}
.players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.players li{display:flex;align-items:center;gap:10px;background:#0f1436;border:1px solid var(--line);
  border-radius:12px;padding:12px}
.dot{width:14px;height:14px;border-radius:50%;flex:none}
.players .host-badge{margin-left:auto;font-size:11px;background:var(--primary);border-radius:6px;padding:2px 6px}

/* ── Players strip (in game) ── */
.players-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.pchip{flex:none;background:#0f1436;border:1px solid var(--line);border-radius:12px;
  padding:8px 10px;min-width:84px;text-align:center}
.pchip-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.pchip-info{font-size:11px;color:var(--muted);margin-top:2px}
.pchip.active{border-color:var(--ok);box-shadow:0 0 0 2px rgba(52,199,89,.25)}
.pchip.win{background:linear-gradient(180deg,#12351f,#0f1436)}
.pchip.out{opacity:.5}

/* ── Board ── */
.board{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 0}
.row{display:flex;align-items:center;gap:10px;background:#0f1436;border:1px solid var(--line);
  border-radius:12px;padding:8px 10px;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.row .n{font-size:12px;color:var(--muted);width:20px;text-align:center;flex:none}
.pegs{display:flex;gap:6px;flex:1}
.peg{width:30px;height:30px;border-radius:50%;flex:none;box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.3)}
.peg.empty{background:#0b0f28;border:2px dashed var(--line);box-shadow:none}
.peg.timeout{background:#0b0f28;border:2px solid var(--bad)}
.feedback{display:flex;align-items:center;gap:7px;flex:none}
.fb-dots{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.fb{display:inline-block;width:12px;height:12px;border-radius:50%;background:transparent;border:1.5px solid #3a4278}
.fb.black{background:#0a0d18;border:2px solid #eef1ff;box-shadow:0 0 3px rgba(255,255,255,.35)}
.fb.white{background:#fff;border:1.5px solid #aab2d8}
.fbcount{font-size:12px;font-weight:800;white-space:nowrap;letter-spacing:.5px}
.fbcount .b{color:#eef1ff}
.fbcount .w{color:#aab2d8}
.row.win{border-color:var(--ok);box-shadow:0 0 0 2px rgba(52,199,89,.35);background:linear-gradient(90deg,rgba(52,199,89,.14),#0f1436)}
.row .win-tag{margin-left:6px;font-size:11px;font-weight:800;color:var(--ok);flex:none}

/* ── Legenda pioli ── */
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;font-size:11px;color:var(--muted);padding:2px 0}
.lg{display:inline-flex;align-items:center;gap:5px}
.legend .fb{width:12px;height:12px}

/* ── Progresso avversari ── */
.opponents{display:flex;flex-direction:column;gap:8px}
.opp{background:#0f1436;border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.opp.active{border-color:var(--ok);box-shadow:0 0 0 1px rgba(52,199,89,.3)}
.opp.out{opacity:.55}
.opp-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.opp-head .status{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
.opp-head .status.win{color:var(--ok)}
.opp-rows{display:flex;gap:7px;overflow-x:auto;padding-top:7px}
.opp-empty{font-size:11px;color:var(--muted);padding-top:5px}
.opp-att{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px}
.opp-att .mini{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.opp-att .mini .fb{width:9px;height:9px;border-width:1.2px}
.opp-att .mini .fb.black{border-width:1.6px}
.opp-att .idx{font-size:9px;color:#6b74a8;font-weight:700}
.opp-att.win .idx{color:var(--ok)}
.opp-att .to{font-size:11px}

/* ── Controls ── */
.controls{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--bg) 22%);
  padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.current-guess{display:flex;gap:8px;justify-content:center}
.slot{width:42px;height:42px;border-radius:50%;border:2px dashed var(--line);background:#0f1436;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .08s}
.slot:active{transform:scale(.92)}
.slot.filled{border-style:solid;border-color:transparent}
.slot.sel{box-shadow:0 0 0 3px rgba(47,127,240,.6)}
.palette{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.swatch{width:44px;height:44px;border-radius:50%;cursor:pointer;border:3px solid rgba(255,255,255,.15);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.25);transition:transform .08s}
.swatch:active{transform:scale(.9)}

/* ── Result ── */
.result-card{text-align:center;gap:16px;margin-top:20px}
.result-card h2{margin:0;font-size:26px}
.secret-reveal{display:flex;gap:8px;justify-content:center}
.winner-line{font-size:18px;font-weight:800;color:var(--ok);margin:6px 0}
.tie{color:var(--warn)}
.scoreboard{width:100%;border-collapse:collapse;font-size:14px}
.scoreboard th,.scoreboard td{padding:8px;border-bottom:1px solid var(--line);text-align:left}
.scoreboard th{color:var(--muted);font-weight:600;font-size:12px}
.scoreboard .win-row td{color:var(--ok);font-weight:700}

.guide-link{display:block;text-align:center;color:var(--muted);text-decoration:none;
  font-size:14px;padding:10px;border:1px solid var(--line);border-radius:12px}
.guide-link:active{background:#0f1436}

/* ── Impostazioni (crea partita) ── */
.settings{display:flex;flex-direction:column;gap:10px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.set-row label{font-size:14px;color:var(--ink);font-weight:600}
.set-row select{background:#0f1436;border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:9px 12px;font-size:15px;font-weight:700;min-width:96px;text-align:center}
.home-actions{display:flex;gap:10px}
.home-actions .btn{flex:1}
.btn-back{background:transparent;border:0;color:var(--muted);font-size:15px;font-weight:700;cursor:pointer;padding:4px 2px}
.btn-xl{font-size:19px;padding:18px}
.btn-link{background:none;border:0;color:var(--primary);font-weight:700;cursor:pointer;font-size:14px;padding:6px}
.card-title{font-weight:800;font-size:15px;margin:0 0 2px}

/* ── Home hub ── */
.home-hub{align-items:center;justify-content:center;text-align:center;gap:20px}
.hub-logo{margin-top:6px}
.hub-logo .logo{width:150px;height:150px;border-radius:30px;
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.hub-hi{font-size:16px;color:var(--muted);margin:0}
.hub-hi b{color:var(--ink)}
.home-hub .btn-xl{width:100%;max-width:360px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:360px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:16px;padding:20px 10px;color:var(--ink);text-decoration:none;
  font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.2);transition:transform .06s}
.tile:active{transform:scale(.97)}
.tile .ico{font-size:28px;line-height:1}

.settings-summary{margin:2px 0 0;font-size:13px;color:var(--muted);text-align:center}

/* ── Pulsante uscita in partita ── */
.btn-exit{background:#0f1436;border:1px solid var(--line);border-radius:10px;font-size:16px;
  padding:6px 11px;cursor:pointer;color:var(--ink);flex:none}
.btn-exit:active{transform:scale(.94)}

/* ── Input numerico impostazioni ── */
.set-row input[type=number]{background:#0f1436;border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:9px 12px;font-size:15px;font-weight:700;width:100px;text-align:center}

/* ── Solitario ── */
.solo-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.solo-day{font-size:13px;color:var(--muted)}
.streak-badge{background:#0f1436;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-weight:800;font-size:13px;white-space:nowrap}
.solo-msg{text-align:center;font-size:16px;font-weight:800;padding:6px}
.solo-msg.win{color:var(--ok)} .solo-msg.lose{color:var(--warn)}
.solo-secret{display:flex;gap:8px;justify-content:center;margin:6px 0}

/* ── Team ── */
.teams-forms{display:flex;flex-direction:column;gap:10px}
.team-card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.team-card .th{display:flex;align-items:center;gap:10px}
.team-card .tn{font-weight:800;font-size:16px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-code{font-family:ui-monospace,monospace;font-weight:800;letter-spacing:2px;background:#0f1436;
  border:1px dashed var(--line);border-radius:8px;padding:5px 10px;font-size:14px}
.team-actions{display:flex;gap:8px;flex-wrap:wrap}
.team-actions .btn{flex:1;min-width:120px;padding:11px}
.mini-note{font-size:12px;color:var(--muted);margin:0}
.section-title{font-weight:800;font-size:14px;color:var(--muted);margin:6px 2px 0}

/* Le schermate a contenuto scorrono se superano lo schermo */
.home-hub{justify-content:flex-start}
#screen-home,#screen-play,#screen-settings,#screen-stats,#screen-leaderboard,#screen-solo,#screen-teams{overflow-y:auto}

/* ── Rivincita ── */
#rematch-area{display:flex;flex-direction:column;gap:8px}

/* ── Statistiche & Classifica ── */
#stats-content,#lb-content{display:flex;flex-direction:column;gap:14px}
.panel{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.panel h3{margin:0 0 12px;font-size:15px;display:flex;justify-content:space-between;align-items:baseline}
.panel h3 .sub{color:var(--muted);font-size:12px;font-weight:500}

.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:14px;padding:14px 12px;text-align:center;position:relative}
.kpi .v{font-size:26px;font-weight:800;line-height:1}
.kpi .l{font-size:12px;color:var(--muted);margin-top:5px}
.kpi .medal{position:absolute;top:8px;right:10px;font-size:15px}
.kpi.hl{border-color:var(--ok);box-shadow:0 0 0 1px rgba(52,199,89,.3)}

.ring-wrap{display:flex;align-items:center;gap:18px}
.ring{--p:0;width:110px;height:110px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:conic-gradient(var(--ok) calc(var(--p)*1%),#2a3160 0);position:relative}
.ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#20285a}
.ring .rv{position:relative;font-size:24px;font-weight:800}
.ring-info{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.ring-info b{color:var(--ink);font-size:16px}

.dist{display:flex;flex-direction:column;gap:7px}
.dist-row{display:flex;align-items:center;gap:8px}
.dist-row .k{width:22px;text-align:center;font-weight:800;font-size:13px;color:var(--muted);flex:none}
.dist-row .bar{flex:1;background:#0f1436;border-radius:6px;height:22px;position:relative;overflow:hidden}
.dist-row .fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:6px;min-width:3px}
.dist-row.best .fill{background:linear-gradient(90deg,var(--ok),#0fa958)}
.dist-row .c{position:absolute;right:8px;top:0;line-height:22px;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}

.stacked{display:flex;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.stacked .seg{height:100%}
.stack-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;font-size:12px;color:var(--muted)}
.stack-legend .li{display:inline-flex;align-items:center;gap:6px}
.stack-legend .sw{width:11px;height:11px;border-radius:3px;flex:none}

.form-dots{display:flex;gap:6px;flex-wrap:wrap}
.fd{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff}
.fd.V{background:var(--ok)}.fd.P{background:var(--warn);color:#3a2b00}
.fd.L{background:#3a4278}.fd.A{background:var(--bad)}

.insights{display:flex;flex-direction:column;gap:10px}
.insight{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#dfe3ff}
.insight .ic{flex:none;font-size:16px}

.lb{display:flex;flex-direction:column;gap:8px}
.lb-row{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.lb-row.me{border-color:var(--primary);box-shadow:0 0 0 1px rgba(47,127,240,.45)}
.lb-rank{font-size:18px;font-weight:800;width:36px;text-align:center;flex:none}
.lb-name{font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-stat{text-align:right;font-size:13px;line-height:1.2}
.lb-stat b{font-size:16px}
.lb-stat span{color:var(--muted);font-size:11px;display:block}

.empty-note{text-align:center;color:var(--muted);padding:34px 12px;font-size:14px}

.stats{gap:8px}
.stats .row-stat{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.stats .row-stat b{color:var(--ink)}

/* ── Toast ── */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:#000c;backdrop-filter:blur(8px);border:1px solid var(--line);color:#fff;
  padding:12px 18px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;
  transition:.25s;max-width:90%;text-align:center;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}