/* Quiz della Serra — stile condiviso (host + player)
   Stessi design token del sito principale: nero/panna, Anton/Space Mono/Archivo,
   nessun border-radius, nessuna ombra, bordi 2px, gap 2px tra i blocchi. */

:root{
  --nero:#0A0A0A;
  --panna:#EDE4C8;
  --accento:#D97F4E;
  --verde:#8CE06C;
  --magenta:#ED2A8B;
  --giallo:#E8B93C;
  --terracotta:#D97F4E;
  --f-display:'Anton', sans-serif;
  --f-mono:'Space Mono', monospace;
  --f-body:'Archivo', sans-serif;
}

*{ box-sizing:border-box; }
html{ height:100%; }
body{
  margin:0; min-height:100%;
  background:var(--nero); color:var(--panna);
  font-family:var(--f-body);
  position:relative; overflow-x:hidden;
}
a{ color:var(--panna); text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accento); color:var(--nero); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:0.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

.wrap{ max-width:900px; margin:0 auto; padding:0 20px; }
.wrap.wide{ max-width:1180px; }

/* mini top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0 16px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
}
.topbar a{ opacity:0.72; border-bottom:1px solid transparent; transition:opacity 0.15s ease; }
.topbar a:hover{ opacity:1; border-bottom-color:var(--panna); }
.topbar .brand{ font-family:var(--f-display); font-size:20px; letter-spacing:0; text-transform:uppercase; }
.topbar .brand .dot{ color:var(--accento); }

/* generic section head, riuso pattern del sito */
.qhead{ display:flex; align-items:center; gap:16px; margin:8px 0 22px; }
.qhead h2{
  font-family:var(--f-mono); font-weight:700; font-size:12px; letter-spacing:0.22em;
  text-transform:uppercase; margin:0;
}
.qhead .rule{ flex:1; height:1px; background:var(--panna); opacity:0.3; }
.qhead .data{ font-family:var(--f-mono); font-size:12px; letter-spacing:0.14em; opacity:0.6; }

/* card di base: fascia panna, testo nero, niente radius/ombra — coerente col sito */
.card{ background:var(--panna); color:var(--nero); padding:26px; }
.card-outline{ border:2px solid var(--panna); padding:26px; }

/* ===== schermata: intro / hero ===== */
.hero{ padding:20px 0 8px; }
.hero h1{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(44px,10vw,120px); line-height:0.85; letter-spacing:-0.02em;
  margin:0; text-transform:uppercase;
}
.hero h1 .accent{ color:var(--accento); }
.hero p.lead{
  max-width:520px; margin:20px 0 0; font-size:16px; line-height:1.55; opacity:0.85; text-wrap:pretty;
}

.how-it-works{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:2px; margin-top:28px; }
.how-it-works .step{ background:var(--panna); color:var(--nero); padding:18px 20px; }
.how-it-works .step .n{
  font-family:var(--f-display); font-size:34px; line-height:1; color:var(--accento); margin:0 0 8px;
}
.how-it-works .step p{ margin:0; font-family:var(--f-mono); font-size:12px; letter-spacing:0.04em; line-height:1.5; text-transform:uppercase; }

/* ===== form pin + nickname ===== */
.join-box{ border:2px solid var(--accento); padding:26px; margin-top:30px; }
.join-box h3{
  font-family:var(--f-display); font-size:28px; margin:0 0 4px; text-transform:uppercase; color:var(--accento);
}
.join-box p.hint{ margin:0 0 18px; font-family:var(--f-mono); font-size:12px; letter-spacing:0.06em; opacity:0.75; text-transform:uppercase; }
.join-form{ display:flex; flex-direction:column; gap:2px; }
.join-form input{
  background:transparent; border:2px solid var(--panna); color:var(--panna);
  font-family:var(--f-mono); letter-spacing:0.1em; padding:14px 14px;
}
.join-form input::placeholder{ color:var(--panna); opacity:0.5; }
.join-form input#pinInput{
  font-family:var(--f-display); font-size:32px; letter-spacing:0.3em; text-align:center;
  text-transform:uppercase;
}
.join-form button{
  background:var(--accento); color:var(--nero); border:none;
  font-family:var(--f-mono); font-weight:700; font-size:13px; letter-spacing:0.14em;
  text-transform:uppercase; padding:16px; transition:opacity 0.15s ease;
}
.join-form button:disabled{ opacity:0.4; cursor:not-allowed; }
.join-form button:not(:disabled):hover{ opacity:0.85; }
.form-msg{
  min-height:16px; margin-top:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em;
}
.form-msg[data-state="error"]{ color:var(--magenta); }
.form-msg[data-state="ok"]{ color:var(--verde); }

/* ===== lobby ===== */
.pin-display{
  border:2px solid var(--panna); padding:22px 26px; text-align:center; margin-top:24px;
}
.pin-display .label{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; opacity:0.65; text-transform:uppercase; }
.pin-display .pin{
  font-family:var(--f-display); font-size:clamp(48px,12vw,110px); letter-spacing:0.16em; line-height:1.1;
  color:var(--accento);
}
.pin-display .join-url{ font-family:var(--f-mono); font-size:13px; letter-spacing:0.06em; opacity:0.8; }

.players-list{ display:flex; flex-wrap:wrap; gap:2px; margin-top:24px; }
.player-chip{
  background:var(--panna); color:var(--nero); padding:9px 14px;
  font-family:var(--f-mono); font-weight:700; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
}
.players-count{ font-family:var(--f-mono); font-size:12px; letter-spacing:0.14em; opacity:0.65; text-transform:uppercase; margin-top:14px; }

.waiting-msg{
  margin-top:26px; font-family:var(--f-mono); font-size:13px; letter-spacing:0.08em; opacity:0.75;
  text-transform:uppercase;
}

/* ===== domanda ===== */
.q-topline{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.7;
}
.countdown-track{ height:6px; background:rgba(237,228,200,0.18); margin-top:10px; overflow:hidden; }
.countdown-fill{ height:100%; background:var(--accento); transform-origin:left; will-change:transform; }

.q-text{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,4.4vw,48px); line-height:1.02; letter-spacing:-0.01em;
  margin:20px 0 0;
}

.answer-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:2px; margin-top:22px;
}
.answer-btn{
  border:none; padding:20px 16px; min-height:96px;
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-weight:700; font-size:14px; letter-spacing:0.03em; text-align:left;
  color:var(--nero); transition:transform 0.1s ease, filter 0.1s ease;
}
.answer-btn svg{ flex:0 0 auto; width:26px; height:26px; }
.answer-btn:active{ transform:scale(0.98); }
.answer-btn[data-a="0"]{ background:var(--verde); }
.answer-btn[data-a="1"]{ background:var(--magenta); color:var(--panna); }
.answer-btn[data-a="2"]{ background:var(--giallo); }
.answer-btn[data-a="3"]{ background:var(--terracotta); }
.answer-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.answer-btn.dim{ opacity:0.28; filter:grayscale(0.4); }
.answer-btn.chosen{ outline:3px solid var(--panna); outline-offset:-3px; }

@media (min-width:640px){
  .answer-btn{ font-size:18px; padding:26px 22px; min-height:120px; }
}

/* stato "risposta inviata" lato player */
.sent-state{ text-align:center; padding:60px 20px; }
.sent-state .big{
  font-family:var(--f-display); font-size:clamp(30px,7vw,58px); line-height:1; text-transform:uppercase;
}
.sent-state.correct .big{ color:var(--verde); }
.sent-state.wrong .big{ color:var(--magenta); }
.sent-state .points{ font-family:var(--f-mono); font-size:14px; letter-spacing:0.1em; opacity:0.8; margin-top:10px; text-transform:uppercase; }

/* ===== reveal / histogram ===== */
.reveal-answer{
  border:2px solid var(--verde); color:var(--verde); padding:16px 18px; margin-top:18px;
  font-family:var(--f-display); font-size:clamp(22px,3.6vw,34px); text-transform:uppercase; line-height:1.05;
}
.reveal-fact{ margin:14px 0 0; font-style:italic; font-size:15px; line-height:1.5; opacity:0.85; }

.hist{ display:flex; flex-direction:column; gap:8px; margin-top:22px; }
.hist-row{ display:flex; align-items:center; gap:12px; }
.hist-label{ width:26px; flex:0 0 auto; font-family:var(--f-mono); font-weight:700; font-size:12px; }
.hist-track{ flex:1; height:22px; background:rgba(237,228,200,0.12); position:relative; }
.hist-fill{ height:100%; transition:width 0.4s ease; }
.hist-fill[data-a="0"]{ background:var(--verde); }
.hist-fill[data-a="1"]{ background:var(--magenta); }
.hist-fill[data-a="2"]{ background:var(--giallo); }
.hist-fill[data-a="3"]{ background:var(--terracotta); }
.hist-count{ width:34px; flex:0 0 auto; text-align:right; font-family:var(--f-mono); font-size:12px; opacity:0.75; }

/* ===== classifica ===== */
.leaderboard{ display:flex; flex-direction:column; gap:2px; margin-top:20px; }
.lb-row{
  background:var(--panna); color:var(--nero); display:flex; align-items:baseline; gap:16px;
  padding:12px 18px;
}
.lb-row .rank{ font-family:var(--f-mono); font-weight:700; font-size:13px; min-width:26px; }
.lb-row .name{ font-family:var(--f-display); font-size:clamp(18px,2.6vw,26px); text-transform:uppercase; flex:1; line-height:1; }
.lb-row .score{ font-family:var(--f-mono); font-weight:700; font-size:14px; }
.lb-row.me{ outline:2px solid var(--accento); outline-offset:-2px; }
.lb-row.top1 .name{ color:var(--accento); }

/* ===== podio ===== */
.podium{ display:flex; align-items:flex-end; gap:2px; margin-top:36px; }
.pod-col{ flex:1; background:var(--panna); color:var(--nero); padding:18px 14px; text-align:center; }
.pod-col .medal{ font-family:var(--f-mono); font-weight:700; font-size:12px; letter-spacing:0.12em; opacity:0.7; }
.pod-col .name{ font-family:var(--f-display); font-size:clamp(20px,3vw,32px); text-transform:uppercase; line-height:1; margin:8px 0; }
.pod-col .score{ font-family:var(--f-mono); font-size:13px; }
.pod-col.p1{ padding-top:10px; }
.pod-col.p1 .name{ color:var(--accento); }
.pod-col.p2{ padding-top:34px; }
.pod-col.p3{ padding-top:50px; }

/* ===== controlli host ===== */
.host-controls{
  position:sticky; bottom:0; left:0; right:0; margin-top:32px;
  background:var(--nero); border-top:2px solid var(--panna);
  padding:16px 0 22px;
}
.host-controls .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.btn{
  border:2px solid var(--panna); color:var(--panna); background:transparent;
  font-family:var(--f-mono); font-weight:700; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  padding:12px 20px; transition:background 0.15s ease, color 0.15s ease;
}
.btn:hover{ background:var(--panna); color:var(--nero); }
.btn.primary{ background:var(--accento); border-color:var(--accento); color:var(--nero); }
.btn.primary:hover{ opacity:0.85; background:var(--accento); }
.btn:disabled{ opacity:0.35; cursor:not-allowed; }

.pill{
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  border:1px solid var(--panna); opacity:0.75; padding:6px 12px;
}

footer.mini{ padding:40px 0 60px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.1em; opacity:0.5; text-align:center; text-transform:uppercase; }