/* ═══════════════════════════════════════════════════════════════════════════
   MasterMindParty — foglio di stile condiviso (giocatore, admin, tabellone)
   Palette presa dal logo: navy profondo + oro festa.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#081428; --bg2:#123a6b; --card:#14264a; --card2:#1b3260;
  --ink:#eef4ff; --muted:#93a6c9; --line:#27406f;
  --gold:#f7b32b; --gold2:#ffd166;
  --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(130% 85% at 50% 0%,var(--bg2),var(--bg));
  color:var(--ink); min-height:100vh; min-height:100dvh; overscroll-behavior:none;
}
#app{max-width:540px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}

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

/* ── Logo / testata ─────────────────────────────────────────────────────── */
.hero{display:flex;justify-content:center;padding-top:12px}
.logo{width:200px;max-width:60vw;object-fit:contain;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.5))}
.claim{text-align:center;color:var(--muted);font-size:14px;margin:0}

/* ── Card ───────────────────────────────────────────────────────────────── */
.card{background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--r);padding:16px;
  display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.card.tight{padding:12px;gap:8px}
.card h2{margin:0;font-size:17px}
.card h3{margin:0;font-size:14px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.6px}

label{font-size:13px;color:var(--muted);font-weight:600;display:block;margin-bottom:6px}
input,select{background:#0b1730;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:13px 15px;font-size:17px;outline:none;width:100%;
  font-family:inherit}
input:focus,select:focus{border-color:var(--gold)}
input[type=checkbox]{width:auto;accent-color:var(--gold);transform:scale(1.3)}
.row{display:flex;gap:10px;align-items:center}
.row>*{flex:1}
.row.auto>*{flex:none}

/* ── Bottoni ────────────────────────────────────────────────────────────── */
.btn{border:0;border-radius:14px;padding:15px 18px;font-size:16px;font-weight:800;
  cursor:pointer;color:#fff;transition:transform .05s,filter .15s;width:100%;
  font-family:inherit}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:linear-gradient(90deg,var(--gold),var(--gold2));color:#26180a}
.btn-blue{background:linear-gradient(90deg,var(--primary),var(--primary2))}
.btn-secondary{background:#22366a;border:1px solid var(--line)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn-bad{background:var(--bad)}
.btn.small{padding:10px 12px;font-size:14px}
.btn.tiny{padding:7px 10px;font-size:13px;border-radius:10px}

.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}
.hint.bad{color:var(--bad)}
.hint.ok{color:var(--ok)}

/* ── Barra superiore di gioco ───────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pill{background:#0b1730;border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:13px;font-weight:700;white-space:nowrap}
.pill.gold{background:linear-gradient(90deg,var(--gold),var(--gold2));color:#26180a;border-color:transparent}
.pill.ok{background:var(--ok);color:#04210f;border-color:transparent}
.pill.bad{background:var(--bad);border-color:transparent}
.timer{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--gold)}
.timer.urgent{color:var(--bad);animation:pulse .8s infinite}
@keyframes pulse{50%{opacity:.45}}

/* ── Pioli ──────────────────────────────────────────────────────────────── */
.peg{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.18);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.35);
  flex:none;display:inline-block}
.peg.empty{background:#0b1730;border-style:dashed;border-color:var(--line);box-shadow:none}
.peg.small{width:22px;height:22px;border-width:1px}
.peg.big{width:46px;height:46px}
.peg.sel{outline:3px solid var(--gold);outline-offset:2px}

.pegrow{display:flex;gap:8px;align-items:center}
.picker{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.picker .peg{cursor:pointer}

/* Feedback neri/bianchi */
.feedback{display:grid;grid-template-columns:repeat(3,10px);gap:3px;flex:none}
.fb{width:10px;height:10px;border-radius:50%;background:#0b1730;border:1px solid var(--line)}
.fb.nero{background:#0a0f1e;border-color:#000;box-shadow:inset 0 0 0 2px #fff2}
.fb.bianco{background:#fff;border-color:#fff}

/* ── Righe tentativo ────────────────────────────────────────────────────── */
.tentativi{display:flex;flex-direction:column;gap:8px}
.tentativo{display:flex;align-items:center;gap:10px;background:#0b1730;
  border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.tentativo .n{font-size:12px;color:var(--muted);font-weight:800;width:18px;flex:none}
.tentativo .who{font-size:11px;color:var(--muted);margin-left:auto;text-align:right;
  max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tentativo.vinto{border-color:var(--ok);background:rgba(52,199,89,.12)}

/* ── Proposte ───────────────────────────────────────────────────────────── */
.proposte{display:flex;flex-direction:column;gap:8px}
.proposta{display:flex;align-items:center;gap:10px;background:#0b1730;
  border:1px dashed var(--line);border-radius:12px;padding:8px 10px;cursor:pointer}
.proposta:active{border-color:var(--gold)}
.proposta .who{font-size:12px;font-weight:700;color:var(--gold);flex:none;
  max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proposta .take{margin-left:auto;font-size:12px;color:var(--muted);flex:none}

/* ── Membri ─────────────────────────────────────────────────────────────── */
.membri{display:flex;flex-wrap:wrap;gap:6px}
.membro{display:flex;align-items:center;gap:6px;background:#0b1730;border:1px solid var(--line);
  border-radius:999px;padding:5px 10px;font-size:13px}
.membro .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.membro.online .dot{background:var(--ok)}
.membro.cap{border-color:var(--gold)}
.membro .cap-badge{font-size:11px}

/* ── Banner ─────────────────────────────────────────────────────────────── */
.banner{border-radius:12px;padding:11px 13px;font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:9px;line-height:1.35}
.banner.warn{background:rgba(255,214,10,.14);border:1px solid var(--warn);color:var(--warn)}
.banner.ok{background:rgba(52,199,89,.14);border:1px solid var(--ok);color:var(--ok)}
.banner.bad{background:rgba(229,50,45,.14);border:1px solid var(--bad);color:#ff8f8b}
.banner.info{background:rgba(47,127,240,.14);border:1px solid var(--primary);color:#a9cbff}

/* ── Classifica ─────────────────────────────────────────────────────────── */
.classifica{display:flex;flex-direction:column;gap:6px}
.riga{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;
  background:#0b1730;border:1px solid var(--line)}
.riga.mia{border-color:var(--gold);background:rgba(247,179,43,.1)}
.riga .pos{font-weight:900;font-size:15px;width:24px;text-align:center;flex:none;color:var(--muted)}
.riga .nome{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.riga .sub{font-size:11px;color:var(--muted);font-weight:500}
.riga .punti{font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;flex:none}
.riga .flag{width:6px;align-self:stretch;border-radius:3px;flex:none}

/* ── Lista squadre da scegliere ─────────────────────────────────────────── */
.squadre-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto}
.squadra-item{display:flex;align-items:center;gap:11px;padding:13px;border-radius:14px;
  background:#0b1730;border:1px solid var(--line);cursor:pointer}
.squadra-item:active{border-color:var(--gold)}
.squadra-item .nome{font-weight:800;font-size:16px}
.squadra-item .meta{font-size:12px;color:var(--muted)}

/* ── Toast ──────────────────────────────────────────────────────────────── */
#toasts{position:fixed;left:0;right:0;top:max(10px,env(safe-area-inset-top));z-index:99;
  display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;padding:0 12px}
.toast{background:#0b1730ee;border:1px solid var(--line);border-radius:12px;
  padding:10px 15px;font-size:14px;font-weight:700;max-width:520px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);animation:toastin .25s ease}
.toast.gold{border-color:var(--gold);color:var(--gold2)}
.toast.ok{border-color:var(--ok);color:#8ef0ab}
.toast.bad{border-color:var(--bad);color:#ff9c98}
@keyframes toastin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ── Podio ──────────────────────────────────────────────────────────────── */
.podio{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:8px 0 4px}
.gradino{flex:1;max-width:120px;border-radius:14px 14px 0 0;padding:10px 6px 12px;
  text-align:center;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
  border:1px solid var(--line);border-bottom:0;animation:salita .6s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes salita{from{transform:translateY(40px) scaleY(.5);opacity:0}to{transform:none;opacity:1}}
.gradino .medaglia{font-size:28px;line-height:1}
.gradino .nome{font-weight:800;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gradino .punti{font-weight:900;font-size:17px}
.gradino.g1{height:150px;background:linear-gradient(180deg,#f7b32b55,#f7b32b22);border-color:var(--gold);animation-delay:.35s}
.gradino.g2{height:118px;background:linear-gradient(180deg,#c8d4e855,#c8d4e822);animation-delay:.15s}
.gradino.g3{height:96px;background:linear-gradient(180deg,#cd7f3255,#cd7f3222);animation-delay:0s}

/* Coriandoli (canvas a tutto schermo, niente librerie) */
#coriandoli{position:fixed;inset:0;pointer-events:none;z-index:98;display:none}
#coriandoli.on{display:block}

.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:13px}
.mono{font-variant-numeric:tabular-nums}
.grow{flex:1}
.hidden{display:none!important}
.spacer{flex:1}