/* phone.css — pagina dei telefoni. Stessi colori e caratteri del deck: carta = ascolto, inchiostro = gioco. */
:root{
  --paper:#F3EEE2; --paper2:#E7DFCB; --ink:#16130F; --ink2:#221E17; --mute:#6F6657;
  --verm:#DF4128; --gold:#F2B820; --good:#2FA66A; --bad:#DE4A33;
  --line:rgba(22,19,15,.2); --lineD:rgba(243,238,226,.26);
  --serif:"Iowan Old Style","Charter","Palatino Linotype",Georgia,serif;
  --sans:-apple-system,"SF Pro Text","Segoe UI","Helvetica Neue",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;background:var(--paper);color:var(--ink);font:400 17px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased;transition:background .3s,color .3s;overscroll-behavior-y:contain}
body.game{background:var(--ink);color:var(--paper)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  max-width:560px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.brand{font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--verm)}
body.game .brand{color:var(--gold)}
.me{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid currentColor;background:none;font:600 15px/1 var(--sans);font-variant-numeric:tabular-nums}
.me[hidden]{display:none}
.me b{font:400 20px/1 var(--serif)}
#view{flex:1;display:flex;flex-direction:column;padding:20px 0 8px;outline:none}

h1{font:400 clamp(30px,9vw,40px)/1.1 var(--serif);letter-spacing:-.015em}
em{color:var(--verm);font-style:italic}
body.game em{color:var(--gold)}
.lead{margin-top:14px;color:var(--mute);font-size:17px}
body.game .lead{color:rgba(243,238,226,.72)}
.kick{font:700 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
body.game .kick{color:var(--gold)}

/* ingresso */
.join{display:flex;flex-direction:column;gap:6px}
.join form{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.join label{font:600 15px/1.2 var(--sans)}
.join input{width:100%;min-height:56px;padding:12px 16px;border:2px solid var(--ink);border-radius:14px;background:#fff9;font:500 22px/1.2 var(--sans)}
.join input:focus{outline:3px solid var(--gold);outline-offset:2px}
.btn{min-height:56px;padding:14px 22px;border:0;border-radius:14px;background:var(--ink);color:var(--paper);font:700 18px/1 var(--sans)}
.btn:disabled{opacity:.4;cursor:default}
.fine{margin-top:6px;font-size:14px;color:var(--mute)}
.problem{margin-top:14px;padding:12px 16px;border-radius:12px;background:rgba(222,74,51,.12);color:#9d2a18;font-weight:600}

/* attesa */
.wait{margin-top:auto;margin-bottom:auto;padding-bottom:10vh}
.wait .sect{margin-top:12px;font:600 15px/1.3 var(--sans);color:var(--mute)}
.dots{display:flex;gap:8px;margin-top:34px}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--ink);opacity:.25;animation:dot 1.4s infinite}
.dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.2;transform:none}40%{opacity:1;transform:translateY(-4px)}}

/* domanda */
.q,.res{display:flex;flex-direction:column;flex:1}
.timer{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.track{flex:1;height:10px;border-radius:999px;background:rgba(243,238,226,.14);overflow:hidden}
.bar{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left center;transform:scaleX(1);transition:transform .25s linear;border-radius:999px}
.bar.low{background:var(--bad)}
.secs{min-width:3ch;text-align:right;font:400 30px/1 var(--serif);font-variant-numeric:tabular-nums}
.mult{display:inline-block;margin-bottom:14px;padding:6px 14px;border-radius:999px;background:var(--bad);color:#fff;font:800 13px/1 var(--sans);letter-spacing:.1em}
.qt{font:400 clamp(24px,7vw,31px)/1.2 var(--serif);letter-spacing:-.01em}
.note{margin-top:10px;font-size:15px;color:rgba(243,238,226,.7)}
.opts{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.opt{display:flex;align-items:center;gap:16px;width:100%;min-height:64px;padding:12px 16px;text-align:left;
  border:2px solid var(--lineD);border-radius:16px;background:rgba(243,238,226,.06);font:500 19px/1.25 var(--sans)}
.opt b{display:grid;place-items:center;flex:none;width:40px;height:40px;border:2px solid currentColor;border-radius:50%;font:700 18px/1 var(--sans)}
.opt[aria-checked=true]{border-color:var(--gold);background:rgba(242,184,32,.16)}
.opt[aria-checked=true] b{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.opt:disabled{cursor:default}
.dock{position:sticky;bottom:0;margin-top:auto;padding:18px 0 4px;background:linear-gradient(to top,var(--ink) 70%,transparent)}
.dock .btn{width:100%;background:var(--gold);color:var(--ink)}
.status{margin-top:22px;padding:16px 18px;border-radius:14px;background:rgba(243,238,226,.08);font-size:17px}
.status b{font-weight:700}
.tick{color:var(--good)}

/* risultato */
.verdict{font:400 clamp(40px,12vw,54px)/1.05 var(--serif);letter-spacing:-.02em}
.verdict.good{color:var(--good)} .verdict.bad{color:var(--bad)} .verdict.none{color:rgba(243,238,226,.8)}
.gain{margin-top:6px;font:700 22px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.gain.zero{opacity:.6;font-weight:500}
.dist{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:10px}
.dist li{position:relative;overflow:hidden;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;min-height:52px;padding:8px 14px;border:2px solid var(--lineD);border-radius:14px;isolation:isolate;font:500 16px/1.25 var(--sans)}
.dist li::before{content:"";position:absolute;inset:0;width:var(--p,0%);background:rgba(243,238,226,.14);z-index:-1;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.dist li.correct{border-color:var(--good)} .dist li.correct::before{background:rgba(47,166,106,.34)}
.dist li.mine:not(.correct){border-color:var(--bad)}
.dist b{font:700 15px/1 var(--sans);opacity:.8}
.dist .pct{font:600 16px/1 var(--sans);font-variant-numeric:tabular-nums}
.dist .tag{display:block;margin-top:2px;font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.rankline{margin-top:24px;font:500 17px/1.4 var(--sans);color:rgba(243,238,226,.82)}
.rankline b{color:var(--gold)}

/* classifica */
.sheet{position:fixed;inset:0;z-index:20;overflow:auto;background:var(--ink);color:var(--paper);
  padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
.sheet[hidden]{display:none}
.sheet-in{max-width:520px;margin:0 auto}
.sheet h2{font:400 36px/1.1 var(--serif);margin:6px 0 20px}
.sheet h2 em{color:var(--gold)}
.lbl{list-style:none;display:flex;flex-direction:column;gap:8px}
.lbl li{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-radius:12px;background:rgba(243,238,226,.07);font:600 18px/1.2 var(--sans)}
.lbl li.you{background:rgba(242,184,32,.2);outline:2px solid var(--gold)}
.lbl .rk{font:italic 400 24px/1 var(--serif);opacity:.8}
.lbl .pt{font:400 24px/1 var(--serif);font-variant-numeric:tabular-nums}
.lbl .sep{background:none;padding:0;text-align:center;opacity:.5;display:block}
.sheet .btn{margin-top:22px;width:100%;background:var(--paper);color:var(--ink)}
.empty{opacity:.7}

.conn{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;padding:12px 20px;border-radius:999px;background:var(--bad);color:#fff;font:700 15px/1.2 var(--sans);box-shadow:0 6px 24px rgba(0,0,0,.3);white-space:nowrap}
.conn[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .dots i{opacity:.7}
}
@media (max-height:640px){
  .opt{min-height:56px;padding:8px 14px} .opts{gap:8px;margin-top:16px}
  .timer{margin-bottom:12px}
}