/* ============================================================
   IMPOSTORE — Design System
   Mobile-first, dark, party-game energy.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Surfaces — near-black with a cool cast */
  --bg:            #08090f;
  --bg-elev-1:     #101320;
  --bg-elev-2:     #171b2c;
  --bg-elev-3:     #1e2338;
  --hairline:      rgba(255,255,255,.09);
  --hairline-soft: rgba(255,255,255,.055);

  /* Text */
  --txt:        #f2f4fb;
  --txt-soft:   #a7aec6;
  --txt-mute:   #6b7391;
  --txt-invert: #0a0b12;

  /* Roles */
  --civil:      #2fd6a3;   /* verde: civile */
  --civil-deep: #128f6c;
  --impostor:   #ff3d6e;   /* rosso: impostore */
  --impostor-deep:#c11342;
  --neutral:    #8b93ff;   /* viola: Mr. White / speciale */
  --neutral-deep:#4b52d6;
  --gold:       #ffc84a;

  /* Brand accent (interattivo) */
  --accent:      #ff4d6d;
  --accent-2:    #a04bff;
  --accent-grad: linear-gradient(135deg,#ff5c7a 0%,#ff4d6d 40%,#a04bff 100%);

  /* Feedback */
  --ok:    #2fd6a3;
  --warn:  #ffb020;
  --error: #ff4d5e;

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-pill:999px;

  /* Spacing (4pt grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 16px rgba(0,0,0,.45);
  --sh-3: 0 12px 32px -8px rgba(0,0,0,.6);
  --sh-4: 0 24px 60px -12px rgba(0,0,0,.75);

  /* Motion */
  --ease-out:   cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --spring:     cubic-bezier(.34,1.56,.64,1);
  --t-fast:140ms; --t-med:260ms; --t-slow:420ms;

  /* Safe areas — overridden by the simulator via postMessage */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Type scale */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Inter, system-ui, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", var(--font);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% ; overflow:hidden }
/* su iOS il 100% non segue la barra di Safari che si ritira: resta una
   banda piatta sotto la dock. dvh misura il viewport dinamico vero */
@supports (height:100dvh){ html,body{ height:100dvh } }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer; -webkit-appearance:none }
ul,ol{ list-style:none }
img,svg{ display:block; max-width:100% }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }
::selection{ background:var(--accent); color:#fff }

/* Ambient background wash */
/* z-index negativo: così resta dietro all'app senza che #app debba creare
   un contesto di impilamento. */
body::before{
  /* sborda sotto: l'area della barra di Safari e del safe-area deve
     ricevere il gradiente, non il colore piatto (si vedeva una riga) */
  content:""; position:fixed; left:0; right:0; top:0; bottom:-120px;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(90% 55% at 50% -8%,  rgba(160,75,255,.20) 0%, transparent 62%),
    radial-gradient(80% 50% at 12% 104%, rgba(255,77,109,.16) 0%, transparent 60%),
    radial-gradient(70% 45% at 92% 82%,  rgba(47,214,163,.09) 0%, transparent 60%);
  transition:opacity var(--t-slow) var(--ease-out);
}

/* ---------- 3. App shell & screen router ---------- */
#app{
  position:relative;   /* niente z-index: vedi nota su body::before */
  height:100%; width:100%;
  display:grid;
}
.screen{
  grid-area:1/1;
  display:flex; flex-direction:column;
  height:100%; width:100%;
  padding:calc(var(--safe-top) + var(--s4)) var(--s5) calc(var(--safe-bottom) + var(--s4));
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t-med) var(--ease-out),
             transform var(--t-med) var(--ease-out),
             visibility var(--t-med);
  transform:translateY(14px) scale(.985);
  overflow:hidden;
}
.screen.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
}
.screen.is-leaving{ transform:translateY(-10px) scale(.985) }

/* ---------- Home: composizione a tutta altezza ----------
   Il logo va centrato otticamente sull'intero schermo e la dock ancorata in
   basso: le due parti stanno nella stessa cella di griglia e si sovrappongono
   solo nello spazio, mai nei contenuti. Così sparisce il vuoto sospeso fra
   logo e pulsante (che sembrava un taglio) e la composizione resta in
   equilibrio su qualunque altezza. Il tetto d'altezza del logo gli dà respiro
   anche sui telefoni corti, dove non deve mai toccare la dock. */
#screen-home{ display:grid; grid-template-rows:1fr }
#screen-home > .flex-1{ grid-area:1 / 1; align-self:center }
#screen-home > .dock{   grid-area:1 / 1; align-self:end }
#screen-home .logo{
  max-height:min(44vh, 420px);   /* fallback per browser senza dvh */
  max-height:min(44dvh, 420px);
}

/* Scrollable body region inside a screen */
.scroller{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  margin:0 calc(var(--s5) * -1); padding:0 var(--s5);
  scrollbar-width:none;
}
.scroller::-webkit-scrollbar{ display:none }
/* fade-out mask at the scroll edges */
.scroller.masked{
  /* il contenuto fermo parte sotto la dissolvenza: senza questo respiro
     il bordo del primo elemento spariva (visto in classifica e voto) */
  padding-top:16px; padding-bottom:24px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
}

/* ---------- 4. Typography ---------- */
.display{
  font-size:clamp(34px,10vw,44px); font-weight:800; line-height:1.02;
  letter-spacing:-.035em;
}
.title{ font-size:27px; font-weight:750; line-height:1.12; letter-spacing:-.025em }
.subtitle{ font-size:19px; font-weight:650; line-height:1.25; letter-spacing:-.015em }
.body{ font-size:15.5px; line-height:1.5; color:var(--txt-soft) }
.caption{ font-size:13px; line-height:1.42; color:var(--txt-mute) }
.overline{
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-mute);
}
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:750 }
.grad-text{
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.center{ text-align:center }

/* ---------- 5. Header ---------- */
.topbar{
  display:flex; align-items:center; gap:var(--s3);
  min-height:44px; margin-bottom:var(--s4); flex:0 0 auto;
}
.topbar .spacer{ flex:1 }
.topbar h1{ font-size:17px; font-weight:700; letter-spacing:-.015em }
.icon-btn{
  width:40px; height:40px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);
  border:1px solid var(--hairline);
  color:var(--txt-soft);
  transition:transform var(--t-fast) var(--ease-out), background var(--t-fast), color var(--t-fast);
}
.icon-btn:active{ transform:scale(.9); background:rgba(255,255,255,.12); color:var(--txt) }
.icon-btn svg{ width:20px; height:20px; stroke-width:2.2 }
/* bottone di testata con etichetta (es. «Come si gioca?») */
.pill-btn{
  height:40px; padding:0 14px; flex:0 0 auto; white-space:nowrap;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);
  border:1px solid var(--hairline);
  color:var(--txt-soft); font-size:13.5px; font-weight:650;
  transition:transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.pill-btn:active{ transform:scale(.94); background:rgba(255,255,255,.12) }
/* sui telefoni strettissimi il titolo cede il posto al pulsante */
@media (max-width:345px){ #screen-players .topbar h1{ display:none } }

/* ---------- 6. Buttons ---------- */
.btn{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:56px; padding:0 var(--s6);
  border-radius:var(--r-md);
  font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  transition:transform var(--t-fast) var(--ease-out), filter var(--t-fast), opacity var(--t-fast);
  will-change:transform;
}
.btn:active{ transform:scale(.965) }
.btn[disabled]{ opacity:.32; pointer-events:none }
.btn svg{ width:20px; height:20px; flex:0 0 auto }

.btn-primary{
  background:var(--accent-grad); color:#fff;
  box-shadow:0 8px 24px -6px rgba(255,77,109,.55), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:active{ filter:brightness(.94) }

.btn-secondary{
  background:rgba(255,255,255,.07);
  border:1px solid var(--hairline);
  color:var(--txt);
  backdrop-filter:blur(12px);
}
.btn-secondary:active{ background:rgba(255,255,255,.13) }

.btn-ghost{ color:var(--txt-soft); min-height:48px }
.btn-ghost:active{ color:var(--txt) }

.btn-danger{
  background:linear-gradient(135deg,#ff5470,#d81b47); color:#fff;
  box-shadow:0 8px 24px -6px rgba(216,27,71,.5), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-success{
  background:linear-gradient(135deg,#38e6b0,#12a37b); color:#04231a;
  box-shadow:0 8px 24px -6px rgba(47,214,163,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-lg{ min-height:64px; font-size:18px; border-radius:var(--r-lg) }
.btn-sm{ min-height:42px; font-size:14.5px; padding:0 var(--s4); border-radius:var(--r-sm) }
.btn-block{ width:100% }

/* Bottom action dock — thumb zone */
.dock{
  flex:0 0 auto; display:flex; flex-direction:column; gap:var(--s2);
  padding-top:var(--s4);
}
.dock-row{ display:flex; gap:var(--s2) }
.dock-row > *{ flex:1 }

/* ---------- 7. Cards & surfaces ---------- */
.card{
  background:linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev-1));
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  padding:var(--s5);
  box-shadow:var(--sh-2);
}
.card-flat .avatar img{
  width:132%; height:132%; left:-16%; top:-16%;
}
/* nelle righe fitte dei risultati le maschere quasi non sbordano:
   tra file vicine si toccavano */
.card .flex > .avatar img{
  width:126%; height:126%; left:-13%; top:-13%;
}
.card-flat{
  background:rgba(255,255,255,.045);
  border:1px solid var(--hairline-soft);
  border-radius:var(--r-md);
  padding:var(--s4);
}
.divider{ height:1px; background:var(--hairline-soft); margin:var(--s4) 0 }

/* ---------- 8. Chips / toggles ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);
  border:1px solid var(--hairline);
  font-size:14px; font-weight:600; color:var(--txt-soft);
  transition:all var(--t-fast) var(--ease-out);
}
.chip:active{ transform:scale(.94) }
.chip[aria-pressed="true"]{
  background:linear-gradient(135deg,#f6dfa4 0%,#e0b45c 55%,#c9962e 100%);
  border-color:transparent; color:#2a1f0b;
  box-shadow:0 4px 14px -3px rgba(231,189,107,.45);
}
.chip-row{ display:flex; flex-wrap:wrap; gap:var(--s2) }

/* Stepper (numero giocatori, timer…) */
.stepper{
  display:flex; align-items:center; gap:var(--s3);
  background:rgba(255,255,255,.05);
  border:1px solid var(--hairline);
  border-radius:var(--r-pill); padding:5px;
}
.stepper button{
  width:38px; height:38px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:var(--txt);
  font-size:20px; font-weight:700; line-height:1;
  transition:transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.stepper button:active{ transform:scale(.86); background:rgba(255,255,255,.16) }
.stepper button[disabled]{ opacity:.28; pointer-events:none }
.stepper .val{ min-width:44px; text-align:center; font-size:20px; font-family:var(--font-num); font-weight:750 }

/* area tattile estesa senza crescere alla vista */
.info-btn::after{ content:""; position:absolute; inset:-11px }
/* la spiegazione dei ruoli in oro: si distingue dalla CTA «Inizia» */
.roles-btn{
  min-height:36px; padding:0 14px; flex:0 0 auto;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,#f6dfa4 0%,#e0b45c 55%,#c9962e 100%);
  color:#2a1f0b;
  font-size:13px; font-weight:750; letter-spacing:-.01em;
  box-shadow:0 4px 14px -4px rgba(231,189,107,.5);
  transition:transform var(--t-fast) var(--ease-out), filter var(--t-fast);
}
.roles-btn:active{ transform:scale(.95); filter:brightness(.94) }
.stepper button{ position:relative }
.stepper button::after{ content:""; position:absolute; inset:-4px }

/* Switch */
.switch{
  position:relative; width:52px; height:32px; flex:0 0 auto;
  border-radius:var(--r-pill); background:rgba(255,255,255,.13);
  border:1px solid var(--hairline);
  transition:background var(--t-med) var(--ease-out);
}
.switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:var(--sh-1);
  transition:transform var(--t-med) var(--spring);
}
.switch[aria-checked="true"]{ background:linear-gradient(135deg,#ff5c7a,#a04bff) }
.switch[aria-checked="true"]::after{ transform:translateX(20px) }

/* Row with label + control */
.row{
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) 0;
}
.row + .row{ border-top:1px solid var(--hairline-soft) }
.row .row-text{ flex:1; min-width:0 }
.row .row-text .t{ font-size:15.5px; font-weight:650; letter-spacing:-.01em }
.row .row-text .s{ font-size:13px; color:var(--txt-mute); margin-top:2px; line-height:1.35 }

/* sotto i 340px lo stepper scende sotto il testo: niente colonne strozzate */
@media (max-width:340px){
  #setup-body .row{ flex-wrap:wrap }
  /* il min-width impedisce al flex di strizzare il testo:
     sotto i 340px lo stepper scende sulla riga dopo */
  #setup-body .row .row-text{ min-width:180px }
  #setup-body .row .stepper,
  #setup-body .row .switch{ margin-left:auto }
}

/* Telefono orizzontale: il gioco è pensato in verticale */
#ruota{ display:none }
@media (orientation:landscape) and (max-height:520px){
  #ruota{
    display:grid; position:fixed; inset:0; z-index:80;
    background:var(--bg); place-content:center; justify-items:center;
    gap:var(--s3); text-align:center; padding:var(--s6);
  }
  #ruota svg{ width:44px; height:44px; stroke:var(--gold); fill:none;
    stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
}

/* ---------- 9. Inputs ---------- */
.input{
  width:100%; min-height:52px;
  padding:0 var(--s4);
  background:rgba(255,255,255,.06);
  border:1.5px solid var(--hairline);
  border-radius:var(--r-md);
  font-size:16px; font-weight:600; color:var(--txt);
  transition:border-color var(--t-fast), background var(--t-fast);
  user-select:text; -webkit-user-select:text;
}
.input::placeholder{ color:var(--txt-mute); font-weight:500 }
.input:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,.09) }

/* ---------- 10. Player list ---------- */
.player-item{
  display:flex; align-items:center; gap:var(--s5);
  padding:var(--s3); margin-bottom:var(--s2);
  background:rgba(255,255,255,.05);
  border:1px solid var(--hairline-soft);
  border-radius:var(--r-md);
  animation:slideIn var(--t-med) var(--ease-out) backwards;
}
.avatar{
  width:52px; height:52px; flex:0 0 auto;
  border-radius:var(--r-pill);
  display:grid; place-items:center;
  line-height:1;
  background:rgba(255,255,255,.08);
  border:1px solid var(--hairline);
}
.player-item .name{ flex:1; font-size:16px; font-weight:650; letter-spacing:-.01em; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ---------- 11. Role card (la carta che si scopre) ---------- */
.role-stage{
  flex:1; min-height:0;
  display:grid; place-items:center;
  perspective:1400px;
  padding:var(--s2) 0;
}
.role-card{
  position:relative;
  /* L'altezza guida il rapporto d'aspetto, non la larghezza: su schermi bassi
     (iPhone SE) la carta si accorcia invece di sbordare sotto il pulsante. */
  height:min(100%, 460px);
  width:auto; aspect-ratio:.68;
  max-width:min(100%, 320px);
  transform-style:preserve-3d;
  transition:transform 620ms var(--ease-in-out);
  cursor:pointer;
}
.role-card.flipped{ transform:rotateY(180deg) }
.role-face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--r-xl);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s3); padding:var(--s6);
  box-shadow:var(--sh-4);
  overflow:hidden;
}
.role-back{
  background:linear-gradient(150deg,#232a45,#141828 60%,#1c2138);
  border:1px solid rgba(255,255,255,.11);
}
/* pattern on the card back */
.role-back::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 13px);
}
.role-front{
  transform:rotateY(180deg);
  background:linear-gradient(160deg,#1b2036,#0f1322);
  border:1.5px solid var(--hairline);
}
.role-front.is-civil{
  border-color:rgba(47,214,163,.42);
  box-shadow:var(--sh-4), inset 0 0 90px -20px rgba(47,214,163,.32);
}
.role-front.is-impostor{
  border-color:rgba(255,61,110,.45);
  box-shadow:var(--sh-4), inset 0 0 90px -20px rgba(255,61,110,.35);
}
.role-front.is-white{
  border-color:rgba(139,147,255,.45);
  box-shadow:var(--sh-4), inset 0 0 90px -20px rgba(139,147,255,.35);
}
.role-word{
  font-size:clamp(28px,8.5vw,40px); font-weight:800;
  letter-spacing:-.03em; line-height:1.06; text-align:center;
  overflow-wrap:anywhere;
}
.role-emoji{ font-size:64px; line-height:1; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)) }
/* Le maschere del teatro sulla carta della parola, al posto dell'emoji */
.role-mark{ width:84px; height:84px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)) }

/* ---------- 12. Timer ring ---------- */
.timer-ring{ position:relative; width:200px; height:200px; margin:0 auto }
.timer-ring svg{ width:100%; height:100%; transform:rotate(-90deg) }
.timer-ring circle{ fill:none; stroke-linecap:round }
.timer-ring .track{ stroke:rgba(255,255,255,.08); stroke-width:10 }
.timer-ring .prog{
  stroke:url(#timerGrad); stroke-width:10;
  transition:stroke-dashoffset 1s linear;
}
.timer-ring .readout{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-num); font-size:46px; font-weight:750;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.timer-ring.urgent .prog{ stroke:var(--error) }
.timer-ring.urgent .readout{ color:var(--error); animation:pulse 1s var(--ease-in-out) infinite }

/* ---------- 13. Vote grid ---------- */
.vote-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3);
  padding:4px 0;
}
.vote-cell{
  display:flex; flex-direction:column; align-items:center; gap:var(--s5);
  padding:var(--s5) var(--s3) var(--s4);
  background:rgba(255,255,255,.05);
  border:1.5px solid var(--hairline);
  border-radius:var(--r-md);
  transition:all var(--t-fast) var(--ease-out);
}
.vote-cell:active{ transform:scale(.95) }
.vote-cell[aria-pressed="true"]{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(255,77,109,.22), rgba(255,77,109,.08));
  box-shadow:0 0 0 3px rgba(255,77,109,.16);
}
.vote-cell.is-out{ opacity:.35; pointer-events:none }
.vote-cell .name{ font-size:14.5px; font-weight:650; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% }

/* Tally bar */
.tally{ display:flex; align-items:center; gap:var(--s4); padding:var(--s3) 0 }
.tally .bar{
  flex:1; height:10px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); overflow:hidden;
}
.tally .fill{
  height:100%; border-radius:var(--r-pill);
  background:var(--accent-grad);
  transition:width var(--t-slow) var(--ease-out);
}

/* ---------- 14. Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:var(--r-pill);
  font-size:12px; font-weight:700; letter-spacing:.02em;
}
.badge-civil   { background:rgba(47,214,163,.16);  color:var(--civil);    border:1px solid rgba(47,214,163,.3) }
.badge-impostor{ background:rgba(255,61,110,.16);  color:var(--impostor); border:1px solid rgba(255,61,110,.3) }
.badge-white   { background:rgba(139,147,255,.16); color:var(--neutral);  border:1px solid rgba(139,147,255,.3) }
.badge-gold    { background:rgba(255,200,74,.16);  color:var(--gold);     border:1px solid rgba(255,200,74,.3) }

/* ---------- 15. Sheet / modal ---------- */
.sheet-backdrop{
  position:fixed; inset:0; z-index:60;
  background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity var(--t-med) var(--ease-out);
}
.sheet-backdrop.open{ opacity:1; pointer-events:auto }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:61;
  max-height:88%; display:flex; flex-direction:column;
  background:var(--bg-elev-1);
  border:1px solid var(--hairline); border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s3) var(--s5) calc(var(--safe-bottom) + var(--s5));
  box-shadow:0 -20px 60px rgba(0,0,0,.6);
  transform:translateY(101%);
  transition:transform var(--t-slow) var(--ease-out);
}
.sheet.open{ transform:none }
.sheet .grabber{
  width:40px; height:5px; border-radius:3px; background:rgba(255,255,255,.22);
  margin:0 auto var(--s4);
}

/* ---------- 16. Toast ---------- */
.toast{
  position:fixed; left:50%; z-index:80;
  top:calc(var(--safe-top) + 12px);
  transform:translate(-50%,-160%);
  max-width:88%;
  padding:12px 20px; border-radius:var(--r-pill);
  background:rgba(30,35,56,.94); backdrop-filter:blur(20px);
  border:1px solid var(--hairline);
  font-size:14.5px; font-weight:650; text-align:center;
  box-shadow:var(--sh-3);
  transition:transform var(--t-slow) var(--spring);
}
.toast.show{ transform:translate(-50%,0) }

/* ---------- 17. Animations ---------- */
@keyframes slideIn{
  from{ opacity:0; transform:translateY(10px) }
  to  { opacity:1; transform:none }
}
@keyframes popIn{
  0%  { opacity:0; transform:scale(.8) }
  100%{ opacity:1; transform:scale(1) }
}
@keyframes pulse{
  0%,100%{ opacity:1 } 50%{ opacity:.45 }
}
@keyframes shake{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-9px) } 40%{ transform:translateX(8px) }
  60%{ transform:translateX(-5px) } 80%{ transform:translateX(3px) }
}
@keyframes floatUp{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}
.anim-pop{ animation:popIn var(--t-med) var(--spring) backwards }
.anim-shake{ animation:shake 500ms var(--ease-in-out) }
.anim-float{ animation:floatUp var(--t-slow) var(--ease-out) backwards }
.stagger > *{ animation:floatUp var(--t-med) var(--ease-out) backwards }
.stagger > *:nth-child(1){ animation-delay:40ms }
.stagger > *:nth-child(2){ animation-delay:90ms }
.stagger > *:nth-child(3){ animation-delay:140ms }
.stagger > *:nth-child(4){ animation-delay:190ms }
.stagger > *:nth-child(5){ animation-delay:240ms }
.stagger > *:nth-child(6){ animation-delay:290ms }
.stagger > *:nth-child(7){ animation-delay:340ms }
.stagger > *:nth-child(8){ animation-delay:390ms }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- 18. Componenti di schermata ---------- */

/* ---------- Logo home ---------- */
/* L'artwork ha l'alfa vero: il nero di contorno è stato scontornato e
   i bordi sfumano da soli su qualunque sfondo (niente più blend mode,
   che su certi telefoni si rompeva e mostrava il rettangolo nero). */
.logo{
  /* vincolo sulla viewport, non su un % ambiguo dentro <picture>: così non
     sfora mai in larghezza e «L'IMPOSTORE» resta intero su ogni telefono */
  width:min(86vw, 420px); max-width:100%; height:auto;
  object-fit:contain;
}
.logo.missing{ display:none }
picture:has(.logo.missing) + .logo-fallback{ display:flex }

.logo-fallback{
  display:none;
  flex-direction:column; align-items:center; gap:var(--s3);
  animation:popIn 600ms var(--spring) backwards;
}
.logo-mark{
  font-size:80px; line-height:1;
  filter:drop-shadow(0 10px 30px rgba(255,77,109,.35));
}
.logo-fallback .display{
  font-size:clamp(36px,11.5vw,50px); letter-spacing:-.045em;
  background:linear-gradient(180deg,#f6dfa4,#c9a24a 60%,#8f6c22);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logo-o{
  -webkit-text-fill-color:var(--impostor);
  color:var(--impostor);
}

/* Firma dell'editore, agganciata otticamente al logo.
   Il margine negativo recupera il nero vuoto in fondo all'artwork (~3%),
   altrimenti la firma resta staccata invece che appoggiata al lettering. */
.publisher{
  text-align:center;
  margin-top:calc(var(--s2) * -1);
  font-size:11.5px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt-mute);
  animation:floatUp var(--t-slow) var(--ease-out) 260ms backwards;
}

/* ---------- Splash: la firma Eureka Games prima del logo ----------
   Copre l'app al primo avvio e si dissolve mentre il logo fa il pop:
   i ritardi qui sotto tengono fermi logo, firma e bottone della home
   finché la scritta non ha fatto la sua parte. */
#splash{
  position:fixed; inset:0; z-index:90;
  display:grid; align-content:center; justify-items:center; gap:var(--s4);
  background:var(--bg);
  pointer-events:none;
  animation:splashOut 380ms var(--ease-out) 1700ms forwards;
}
.splash-bulb{
  width:60px; height:60px; overflow:visible;
  animation:popIn var(--t-med) var(--spring) 150ms backwards;
}
.splash-bulb .glow{ fill:#ffc84a; opacity:.22; filter:blur(5px); animation:glowDip 1500ms linear both }
.splash-bulb .glass{ fill:rgba(255,200,74,.13); stroke:#e7bd6b; stroke-width:2.5 }
.splash-bulb .base line{ fill:none; stroke:#e7bd6b; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.splash-bulb .base rect{ fill:rgba(231,189,107,.25); stroke:#e7bd6b; stroke-width:2 }
.splash-bulb .bulb{
  transform-box:fill-box; transform-origin:50% 65%;
  animation:chompJolt 480ms var(--spring) 950ms both;
}
/* i due cerchi della mask: ognuno scatta a scala piena = un "cronch" */
.splash-bulb .bite circle{
  transform-box:fill-box; transform-origin:center;
  transform:scale(0);
  animation:biteIn 90ms var(--ease-out) 950ms forwards;
}
.splash-bulb .bite circle:last-child{ animation-delay:1120ms }
.splash-bulb .crumbs circle{
  fill:#e7bd6b; opacity:0;
  animation:crumbFall 620ms var(--ease-out) 1000ms forwards;
}
.splash-bulb .crumbs circle:nth-child(2){ animation-delay:1150ms }
.splash-bulb .crumbs circle:nth-child(3){ animation-delay:1220ms }
@keyframes biteIn{ to{ transform:scale(1) } }
@keyframes chompJolt{
  0%   { transform:rotate(0) }
  22%  { transform:rotate(-7deg) }
  45%  { transform:rotate(2.5deg) }
  62%  { transform:rotate(-4deg) }
  100% { transform:rotate(0) }
}
@keyframes crumbFall{
  0%  { opacity:0; transform:translateY(0) }
  18% { opacity:1 }
  100%{ opacity:0; transform:translateY(13px) }
}
/* al morso la luce sfarfalla e muore: il buco resta pulito sul fondo scuro */
@keyframes glowDip{
  0%,60%{ opacity:.22 }
  66%   { opacity:.03 }
  73%   { opacity:.14 }
  80%   { opacity:.02 }
  100%  { opacity:.05 }
}
.splash-name{
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  text-transform:uppercase; text-align:center;
}
/* il margine negativo compensa il letter-spacing dopo l'ultima lettera,
   altrimenti la parola pende a sinistra */
.splash-name b{
  font-size:clamp(30px,10vw,44px); font-weight:800; line-height:1;
  letter-spacing:.18em; margin-right:-.18em;
  background:linear-gradient(180deg,#f6dfa4,#c9a24a 60%,#8f6c22);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:splashWord 700ms var(--ease-out) backwards;
}
.splash-name span{
  font-size:13px; font-weight:700;
  letter-spacing:.42em; margin-right:-.42em;
  color:var(--txt-mute);
  animation:splashWord 700ms var(--ease-out) 240ms backwards;
}
@keyframes splashWord{
  0%  { opacity:0; letter-spacing:.6em; filter:blur(6px) }
  100%{ opacity:1; filter:blur(0) }
}
@keyframes splashOut{
  to{ opacity:0; transform:scale(1.03); visibility:hidden }
}
.splashing #screen-home .anim-pop{ animation-delay:1850ms }
.splashing #screen-home .publisher{ animation-delay:2000ms }
@media (prefers-reduced-motion: reduce){
  #splash{ display:none }
  .splashing #screen-home .anim-pop,
  .splashing #screen-home .publisher{ animation-delay:0ms }
}

/* Link legali sotto "Gioca ora" */
.legal-links{
  display:flex; gap:var(--s2); justify-content:center; align-items:baseline;
  margin-top:var(--s3);
  font-size:11px; color:var(--txt-mute);
}
.link-quiet{
  background:none; border:0; padding:0 var(--s2);
  min-height:44px; display:inline-flex; align-items:center;
  font:inherit; font-weight:600; color:var(--txt-mute);
  text-decoration:underline; text-underline-offset:2px;
  cursor:pointer;
}

/* Pastiglia col punteggio nella spiegazione della classifica */
.score-pill{
  min-width:44px; height:44px; flex:0 0 auto; padding:0 10px;
  display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--accent-grad); color:#fff;
  font-family:var(--font-num); font-size:17px; font-weight:750;
  box-shadow:0 4px 14px -4px rgba(255,77,109,.5);
}

/* Riga cliccabile che porta a un'altra schermata (es. Modalità) */
.nav-card{
  display:block; width:100%; text-align:left;
  border:1.5px solid var(--hairline);
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.nav-card:active{ transform:scale(.985); background:rgba(255,255,255,.06) }
.nav-chevron{
  font-size:30px; line-height:1; color:var(--txt-mute);
  flex:0 0 auto; align-self:center; font-weight:300;
}

/* Didascalia sotto il cronometro */
.round-caption{
  font-size:16px; line-height:1.45; color:var(--txt-soft);
  max-width:30ch; margin-inline:auto;
}
.round-caption b{ color:var(--txt); font-weight:750 }

/* Verdetto sull'impostore, in fondo alla sua carta */
.verdict{
  margin-top:var(--s3);
  padding-top:var(--s3);
  border-top:1px solid var(--hairline-soft);
  font-size:17px; font-weight:750; letter-spacing:-.015em;
  text-align:center;
}
.verdict.is-win{ color:var(--impostor) }
.verdict.is-loss{ color:var(--civil) }

/* Riscontro sul tentativo dell'impostore */
.steal-feedback{
  font-size:19px; font-weight:700; letter-spacing:-.015em;
  color:var(--txt);
  animation:popIn var(--t-med) var(--spring) backwards;
}
.steal-feedback .wrong{
  color:var(--error);
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:4px;
}

/* Card modalità */
.mode-card{
  display:block; width:100%; text-align:left;
  border:1.5px solid var(--hairline);
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-out);
  animation:floatUp var(--t-med) var(--ease-out) backwards;
}
.mode-card:active{ transform:scale(.985) }
.mode-card.is-selected{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(255,77,109,.14), rgba(160,75,255,.06));
  box-shadow:0 0 0 3px rgba(255,77,109,.14), var(--sh-2);
}
.mode-card.is-locked{ opacity:.45 }
.mode-emoji{
  font-size:32px; line-height:1; width:44px; flex:0 0 auto; text-align:center;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.mode-check{
  width:26px; height:26px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:var(--r-pill);
  font-size:14px; font-weight:800; color:#fff;
  background:var(--accent-grad);
  opacity:0; transform:scale(.5);
  transition:opacity var(--t-fast), transform var(--t-med) var(--spring);
}
.mode-card.is-selected .mode-check{ opacity:1; transform:none }
.mode-desc{ margin-top:var(--s3); font-size:14px; line-height:1.45 }

/* Intestazione turno di voto */
.vote-turn{
  justify-content:center; text-align:center;
  display:flex; align-items:center; gap:var(--s5);
}
/* maschera e nome centrati come coppia: senza, il testo si prende
   tutta la larghezza e la maschera resta appoggiata al bordo */
.vote-turn .flex-1{ flex:0 1 auto }
.vote-turn{
  padding:var(--s3) var(--s4);
  background:rgba(255,255,255,.05);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
}
.vote-turn .overline{ margin-bottom:1px }

/* Numeri passo nelle regole */
.step-num{
  width:30px; height:30px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--accent-grad); color:#fff;
  font-family:var(--font-num); font-size:14px; font-weight:750;
}

/* Verdetto della rivelazione */
.reveal-verdict{
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  margin-top:var(--s2);
}

/* Leader in classifica */
.is-leader{
  border-color:rgba(255,200,74,.35);
  background:linear-gradient(180deg, rgba(255,200,74,.12), rgba(255,255,255,.03));
}

/* Divider a piena larghezza dentro la carta ruolo */
.role-face .divider{ width:60%; margin:var(--s2) 0 }

/* Il timer nascosto non deve lasciare spazio */
#timer.hidden{ display:none }

/* ---------- 19. Utilities ---------- */
.stack   { display:flex; flex-direction:column }
.gap-1{gap:var(--s1)} .gap-2{gap:var(--s2)} .gap-3{gap:var(--s3)}
.gap-4{gap:var(--s4)} .gap-5{gap:var(--s5)} .gap-6{gap:var(--s6)}
.flex   { display:flex; align-items:center }
.flex-1 { flex:1; min-height:0 }
.between{ justify-content:space-between }
.middle { justify-content:center }
/* nelle colonne "center" anche i blocchi con max-width vanno in mezzo,
   non solo il testo al loro interno */
.stack.center{ align-items:center }
.wrap   { flex-wrap:wrap }
.mt-2{margin-top:var(--s2)} .mt-3{margin-top:var(--s3)} .mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)} .mt-8{margin-top:var(--s8)}
.mb-2{margin-bottom:var(--s2)} .mb-3{margin-bottom:var(--s3)} .mb-4{margin-bottom:var(--s4)}
.mb-5{margin-bottom:var(--s5)} .mb-6{margin-bottom:var(--s6)}
.hidden{ display:none !important }
.full{ width:100% }

/* ⓘ accanto al titolo di una sezione */
.info-btn{
  position:relative;
  width:22px; height:22px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:var(--r-pill);
  border:1.5px solid var(--hairline);
  background:rgba(255,255,255,.05);
  font-family:var(--font-num); font-size:12px; font-weight:750; font-style:italic;
  color:var(--txt-mute);
  transition:transform var(--t-fast) var(--ease-out), color var(--t-fast), background var(--t-fast);
}
.info-btn:active{ transform:scale(.88); color:var(--txt); background:rgba(255,255,255,.12) }

/* ---------- Popup di conferma ---------- */
/* Sostituisce confirm(): quello del browser compare in cima alla finestra,
   fuori dalla cornice del telefono, e non somiglia al resto dell'app. */
.dialog-backdrop{
  position:fixed; inset:0; z-index:70;
  background:rgba(0,0,0,.65); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none;
  transition:opacity var(--t-med) var(--ease-out);
}
.dialog-backdrop.open{ opacity:1; pointer-events:auto }

.dialog{
  position:fixed; z-index:71;
  left:50%; top:50%;
  width:min(88%, 340px);
  transform:translate(-50%,-50%) scale(.88);
  opacity:0; pointer-events:none;
  background:linear-gradient(180deg, var(--bg-elev-2), var(--bg-elev-1));
  border:1px solid var(--hairline);
  border-radius:var(--r-xl);
  padding:var(--s6) var(--s5) var(--s5);
  box-shadow:var(--sh-4);
  transition:opacity var(--t-med) var(--ease-out),
             transform var(--t-med) var(--spring);
}
.dialog.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1) }
.dialog .dialog-emoji{ font-size:44px; line-height:1; text-align:center; margin-bottom:var(--s3) }
.dialog h2{ font-size:21px; font-weight:750; letter-spacing:-.02em; text-align:center }
.dialog p{ font-size:15px; line-height:1.45; color:var(--txt-soft); text-align:center; margin-top:var(--s2) }
.dialog .dialog-actions{ display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s5) }

/*
 * Avatar: nessun cerchio dietro la maschera — niente disco né velo
 * (provati entrambi e tolti: pesavano più della maschera). Se le
 * maschere scure tornassero a sparire sul fondo nero, la leva giusta
 * è il drop-shadow dell'img qui sotto.
 * L'immagine contiene la maschera INTERA su tela trasparente, non un
 * ritaglio, così può sbordare dallo spazio del cerchio senza tagli.
 */
.avatar{
  overflow:visible; padding:0; position:relative;
  background:none; border:none;
}
.avatar img{
  position:absolute;
  /* centrata: l'immagine è già inquadrata e normalizzata sul volto.
     max-width:none è necessario: il reset img{max-width:100%} la
     schiaccerebbe dentro il cerchio, piccola e fuori centro. */
  width:150%; height:150%; max-width:none;
  left:-25%; top:-25%;
  object-fit:contain;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.55));
  pointer-events:none; user-select:none;
}
/* Nome preceduto dalla maschera (distribuzione carte, colpo di coda) */
#deal-name, #steal-name{
  display:flex; align-items:center; justify-content:center; gap:var(--s4);
  margin-top:4px;
}
/* qui l'avatar è in linea col testo: sbordando troppo coprirebbe
   l'overline sopra (visto a 320-430px) */
#deal-name .avatar img, #steal-name .avatar img{
  width:132%; height:132%; left:-16%; top:-16%;
}