/* ============================================================
   Quiz Panico! — clone di studio (grafica originale)
   Mobile-first. Su desktop il gioco vive in un "phone frame".
   ============================================================ */

:root{
  /* ---------- tipografia ----------
     Un solo posto per font e misure: cambiare qui si riflette ovunque.
     Fredoka per il latino, Baloo 2 come riserva (copre il devanagari
     dell'hindi, che Fredoka non ha), poi i font di sistema. */
  --font-ui: 'Fredoka', 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;

  /* scala tipografica: passi regolari invece di misure improvvisate */
  --t-xs: clamp(10px, 2.9vw, 12px);   /* etichette minime, nomi sui Quizzy */
  --t-sm: clamp(12px, 3.4vw, 14px);   /* testi di servizio */
  --t-md: clamp(14px, 4.0vw, 17px);   /* corpo, voci di classifica */
  --t-lg: clamp(16px, 4.6vw, 20px);   /* risposte, pulsanti */
  --t-xl: clamp(19px, 5.4vw, 24px);   /* domanda */
  --t-2xl: clamp(26px, 7.5vw, 34px);  /* titoli di schermata */
  --t-3xl: clamp(38px, 12vw, 60px);   /* logo, numeroni */

  /* pesi: 700 è il "normale" di questo gioco, 500 per i testi quieti */
  --w-soft: 500;
  --w-bold: 600;
  --w-black: 700;

  /* ---------- elevazione ----------
     Ombre a due livelli e tinte di caldo: il nero puro su fondo arancione
     fa "sporco". Ogni livello = una distanza dal piano. */
  --sh-1: 0 1px 2px rgba(120,55,10,.18), 0 2px 6px rgba(120,55,10,.12);
  --sh-2: 0 2px 3px rgba(120,55,10,.20), 0 6px 14px rgba(120,55,10,.16);
  --sh-3: 0 4px 6px rgba(110,45,5,.22), 0 12px 26px rgba(110,45,5,.20);

  --field:#f5a832;
  --field-dark:#dd8f1f;
  --field-spot:#c98a1c;
  --ray-a:#d0402b;
  --ray-b:#e8542f;
  /* schede risposta: crema chiaro come nell'originale, così il testo scuro
     stacca e i Quizzy colorati risaltano invece di impastarsi col fondo */
  --panel:#fbd9c8;
  --panel-edge:#e8a98c;
  --panel-inner:#f6c4ab;
  --panel-light:#f7b3a6;
  --panel-lighter:#fcd9d1;
  --panel-red:#e63c2a;
  --panel-green:#7cc242;
  --panel-green-dark:#5da32c;
  --ink:#2b1a12;
  --brown:#5d2e1e;
  --brown-dark:#41200f;
  --white:#ffffff;
  --cream:#fff4e3;
  --accent:#ffcf3f;
  --blue-sel:#59d7e8;
  --red-text:#e8321f;
  --pill:#ffffff;
  --shadow:rgba(60,20,5,.35);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-ui);
  background:#1c0f08;
  color:var(--ink);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

/* ---------- stage / phone frame ---------- */
#stage{height:100dvh;display:flex;align-items:center;justify-content:center}
#app{
  position:relative;width:100%;height:100dvh;overflow:hidden;
  background:var(--field);
}
@media (min-width:520px){
  #app{
    width:min(430px,100vw);height:min(880px,96dvh);
    border-radius:36px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 10px #120a05;
  }
}

/* ---------- schermate ---------- */
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  animation:screenIn .28s ease-out;
  overflow:hidden;
}
@keyframes screenIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

/* sfondo a raggiera rossa */
.bg-rays{
  position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
    repeating-conic-gradient(from 0deg at 50% 42%,
      var(--ray-a) 0deg 9deg, var(--ray-b) 9deg 18deg);
}
.bg-rays::after{ /* vignetta morbida */
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(90,10,0,.35) 100%);
}

/* ============================================================
   CAMPO A PIÙ LIVELLI
   Come nell'originale, la scena è costruita per piani sovrapposti:
     1. fondale  → raggiera calda in profondità
     2. pedana   → il piano su cui stanno i Quizzy
     3. sipario  → fascia rossa che chiude la scena in basso
   Le schede risposta stanno sopra tutto, con la loro elevazione.
   ============================================================ */
/* Il campo resta saturo: è il contrasto col fondo che fa "saltare fuori"
   le schede chiare. Se schiarisco troppo qui, le schede si impastano. */
.ground{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 110% 55% at 50% 2%, rgba(255,196,95,.45) 0%, transparent 58%),
    linear-gradient(#eda02c 0%, #e59122 52%, #d97c14 100%);
}

/* 1. fondale: raggiera tenue che parte dall'alto, dà profondità senza rumore */
.ground::before{
  content:"";position:absolute;inset:-10% -20% 0;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 8%,
    rgba(255,255,255,.06) 0deg 6deg, transparent 6deg 12deg);
  mask-image:linear-gradient(#000 0%, transparent 62%);
  -webkit-mask-image:linear-gradient(#000 0%, transparent 62%);
}

/* 1b. disegno del campo: poligoni, linee e sassolini.
   È il presupposto della trasparenza delle schede — senza qualcosa da vedere
   sotto, una carta semitrasparente sembra semplicemente tinta unita. */
.ground::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../img/field-pattern.svg) center/cover no-repeat;
}

/* 2. pedana: la "piazza" centrale dove i Quizzy aspettano */
.stage-floor{
  position:absolute;left:50%;top:39%;z-index:1;pointer-events:none;
  width:min(92%, 440px);height:26%;transform:translateX(-50%);
  border-radius:50%/26%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,208,128,.40) 0%, rgba(250,190,100,.22) 58%, transparent 74%);
  box-shadow:inset 0 -6px 18px rgba(160,86,10,.10);
}

/* 3. sipario in basso: chiude la scena e "appoggia" il campo */
.stage-curtain{
  position:absolute;left:0;right:0;bottom:0;height:16%;z-index:1;pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg at 50% 140%,
      rgba(180,40,20,.30) 0deg 5deg, rgba(214,64,32,.30) 5deg 10deg),
    linear-gradient(transparent, rgba(198,58,28,.42) 45%, rgba(176,40,16,.62));
  mask-image:linear-gradient(transparent, #000 55%);
  -webkit-mask-image:linear-gradient(transparent, #000 55%);
}

/* ---------- moneta disegnata (le emoji rendono male su alcuni sistemi) ---------- */
.coin{
  display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.12em;
  background:radial-gradient(circle at 35% 30%,#ffe98a,#f5b81d 60%,#c98a00);
  box-shadow:inset 0 0 0 .12em rgba(150,95,0,.45), 0 1px 2px rgba(0,0,0,.25);
}

/* ---------- avatar quizzy: dimensioni base ---------- */
.q-avatar{width:56px;height:56px;flex:none}
.q-avatar svg,.q-svg{width:100%;height:100%;display:block}
.sprite svg{width:100%;height:auto;display:block}

/* ---------- tipografia ---------- */
h1,h2,h3{font-weight:var(--w-black);line-height:1.06}
.title-white{color:var(--white);text-shadow:0 3px 0 rgba(90,20,5,.4)}
.tag-red{color:var(--red-text);font-weight:var(--w-black);text-transform:uppercase;text-align:center}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:var(--w-black);font-size:20px;color:#fff;
  background:var(--panel-red);border:none;border-radius:18px;
  padding:14px 26px;cursor:pointer;
  box-shadow:0 6px 0 #9c2113, 0 10px 18px rgba(0,0,0,.25);
  transform:translateY(0);transition:transform .06s,box-shadow .06s;
  text-transform:uppercase;letter-spacing:.5px;
}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 #9c2113}
.btn.green{background:var(--panel-green);box-shadow:0 6px 0 #4a8a1e,0 10px 18px rgba(0,0,0,.25)}
.btn.green:active{box-shadow:0 1px 0 #4a8a1e}
.btn.yellow{background:var(--accent);color:var(--brown-dark);box-shadow:0 6px 0 #c79a17,0 10px 18px rgba(0,0,0,.25)}
.btn.yellow:active{box-shadow:0 1px 0 #c79a17}
.btn.small{font-size:15px;padding:9px 16px;border-radius:13px}
.btn:disabled{filter:grayscale(.8) brightness(.85);cursor:not-allowed}

.btn-close{
  position:absolute;top:calc(10px + var(--safe-top));right:12px;z-index:40;
  width:44px;height:44px;border:none;border-radius:14px;cursor:pointer;
  background:var(--brown);color:#fff;font-size:22px;font-weight:var(--w-black);
  box-shadow:0 4px 0 var(--brown-dark);display:flex;align-items:center;justify-content:center;
}
.btn-close:active{transform:translateY(3px);box-shadow:0 1px 0 var(--brown-dark)}

/* ============================================================
   HOME / MAPPA
   ============================================================ */
.home-map{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  background:linear-gradient(#bfe6a1,#8fd47a 55%,#7cc98f);
}
#mapScroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
#mapScroll::-webkit-scrollbar{display:none}
#mapCanvas{position:relative;width:100%}
.map-deco{position:absolute;pointer-events:none}

.lvl-bubble{
  position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:var(--w-black);font-size:20px;color:#fff;cursor:pointer;
  background:radial-gradient(circle at 35% 30%, #ff9ec7, #f2589d 70%);
  box-shadow:0 4px 0 rgba(140,20,80,.45), inset 0 -4px 6px rgba(140,20,80,.25);
  border:3px solid #fff;
  text-shadow:0 2px 0 rgba(140,20,80,.5);
}
.lvl-bubble.locked{filter:saturate(.25) brightness(.9);cursor:default}
.lvl-bubble.current{
  width:72px;height:72px;margin:-36px 0 0 -36px;font-size:26px;
  animation:pulse 1.6s ease-in-out infinite;
  background:radial-gradient(circle at 35% 30%, #ffd76e, #f7a520 70%);
  box-shadow:0 0 0 6px rgba(255,255,255,.45),0 5px 0 rgba(150,90,10,.5);
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* barra alta della home */
.home-top{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:calc(8px + var(--safe-top)) 10px 8px;
  display:flex;align-items:center;gap:8px;justify-content:space-between;
  pointer-events:none;
}
.home-top>*{pointer-events:auto}
.chip{
  display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;
  background:rgba(45,20,8,.72);border-radius:20px;color:#fff;
  font-weight:var(--w-black);font-size:16px;backdrop-filter:blur(3px);
  border:2px solid rgba(255,255,255,.25);
}
.chip .sub{font-size:10px;font-weight:700;opacity:.85;line-height:1;display:block;text-align:center}
.chip button{
  width:22px;height:22px;border:none;border-radius:50%;cursor:pointer;
  background:var(--accent);color:var(--brown-dark);font-weight:var(--w-black);font-size:15px;line-height:1;
}
.icon-btn{
  width:44px;height:44px;border:none;border-radius:50%;cursor:pointer;font-size:21px;
  background:rgba(45,20,8,.72);color:#fff;border:2px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
}

.missions-banner{
  position:absolute;top:calc(64px + var(--safe-top));left:0;z-index:5;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  background:rgba(45,20,8,.72);color:#fff;font-weight:var(--w-black);font-size:18px;
  padding:9px 18px 9px 12px;border-radius:0 22px 22px 0;
  border:2px solid rgba(255,255,255,.25);border-left:none;
}
.missions-banner .m-icon{font-size:24px}
.missions-banner .badge-new{
  position:absolute;top:-10px;right:-6px;background:var(--panel-red);color:#fff;
  font-size:11px;font-weight:var(--w-black);padding:3px 8px;border-radius:12px;transform:rotate(8deg);
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}

/* pulsanti modalità in basso */
.home-bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:12px 12px calc(14px + var(--safe-bottom));
  display:flex;gap:10px;
  background:linear-gradient(transparent, rgba(30,12,4,.55) 40%);
}
.mode-btn{
  flex:1;border:none;border-radius:20px;cursor:pointer;padding:10px 6px 12px;
  font-family:inherit;color:#fff;text-align:center;
  transform:translateY(0);transition:transform .06s;
}
.mode-btn:active{transform:translateY(4px)}
.mode-btn .m-name{font-size:19px;font-weight:var(--w-black);text-transform:uppercase;display:block;line-height:1.1}
.mode-btn .m-desc{font-size:11px;font-weight:700;opacity:.92;display:block;margin-top:2px}
.mode-btn .m-cost{font-size:12px;font-weight:var(--w-black);display:block;margin-top:5px}
.mode-btn.panic{background:linear-gradient(#f2694f,#d0402b);box-shadow:0 6px 0 #8f2312}
.mode-btn.chaos{background:linear-gradient(#9b59d0,#6f34a8);box-shadow:0 6px 0 #47206e}
.mode-btn.friends{background:linear-gradient(#4db8e8,#2a7fc9);box-shadow:0 6px 0 #1a4f85}
.mode-btn:disabled{filter:grayscale(.6) brightness(.8)}

/* quizzy del giocatore sulla home */
.home-quizzy{
  position:absolute;z-index:5;bottom:118px;right:14px;width:96px;cursor:pointer;
  filter:drop-shadow(0 6px 6px rgba(30,10,0,.35));
  animation:bounceIdle 2.4s ease-in-out infinite;
}
@keyframes bounceIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.home-quizzy .hq-name{
  text-align:center;font-weight:var(--w-black);color:#fff;font-size:14px;
  text-shadow:0 2px 3px rgba(0,0,0,.45);margin-top:-4px;
}

/* ============================================================
   OVERLAY GENERICI (pannello marrone su raggiera)
   ============================================================ */
.overlay{
  position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(30,10,2,.55);animation:screenIn .2s ease-out;
}
.card{
  position:relative;width:min(92%,380px);max-height:82%;overflow-y:auto;
  background:var(--cream);border-radius:26px;padding:22px 18px 18px;
  box-shadow:0 14px 40px rgba(0,0,0,.45), inset 0 0 0 5px #fff;
  scrollbar-width:none;
}
.card::-webkit-scrollbar{display:none}
.card h2{text-align:center;font-size:26px;color:var(--brown);margin-bottom:10px}
.card .hr{height:3px;background:var(--panel-light);border-radius:2px;margin:6px 0 14px}

/* ============================================================
   LOBBY
   ============================================================ */
.lobby-list{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;gap:8px;padding:14px;overflow-y:auto}
.lobby-row{
  display:flex;align-items:center;gap:12px;background:rgba(255,244,227,.92);
  border-radius:16px;padding:7px 14px;animation:rowIn .3s ease-out;
  box-shadow:0 3px 0 rgba(90,30,10,.25);
}
@keyframes rowIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.lobby-row .q-avatar{width:44px;height:44px}
.lobby-row .l-name{font-weight:var(--w-black);font-size:17px;color:var(--brown-dark)}
.lobby-row .l-level{margin-left:auto;font-weight:700;font-size:13px;color:#a0664a}
.lobby-title{position:relative;z-index:2;text-align:center;padding:calc(16px + var(--safe-top)) 16px 4px}
.lobby-title h2{font-size:30px}
.lobby-status{position:relative;z-index:2;text-align:center;color:#fff;font-weight:700;font-size:16px;padding:6px;text-shadow:0 2px 2px rgba(0,0,0,.3)}
.dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ============================================================
   CAMPO DI GIOCO
   ============================================================ */
#gameScreen{background:var(--field)}
.game-top{
  position:relative;z-index:10;padding:calc(8px + var(--safe-top)) 60px 2px 14px;
  min-height:86px;display:flex;align-items:center;
}
.question-text{
  width:100%;text-align:center;font-weight:var(--w-black);color:var(--ink);
  font-size:var(--t-xl);line-height:1.15;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.timebar-wrap{position:relative;z-index:10;height:12px;margin:2px 14px 4px;background:rgba(90,30,5,.3);border-radius:6px;overflow:hidden}
.timebar{height:100%;width:100%;border-radius:6px;background:linear-gradient(90deg,#7cc242,#ffd23f 60%,#e8542f);transform-origin:left}

/* il margine in basso lascia posto alla barra emoji: prima le schede
   inferiori finivano sotto ai pulsanti e non si leggevano più */
#field{
  position:relative;z-index:5;flex:1;
  margin:2px 8px calc(64px + var(--safe-bottom));
  border-radius:22px;overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.10), inset 0 -16px 30px rgba(150,70,10,.10);
}
.field-inner{position:absolute;inset:0;z-index:2}

/* zone risposta */
/* Scheda risposta: oggetto fisico, non rettangolo colorato.
   Quattro ingredienti, gli stessi che rendono "solidi" i pulsanti del gioco:
     1. cornice più satura del riempimento
     2. luce dall'alto sul bordo superiore
     3. SPESSORE: una fascia piena sotto, non sfumata → è ciò che dà il volume
     4. ombra portata sul campo, staccata dallo spessore
   Il colore dello spessore è una variabile, così cambia col reveal. */
/* Struttura letta dai ritagli ad alto ingrandimento dell'originale:
   - una CORNICE piena e chiara, spessa e con angoli molto tondi
   - una FACCIA dentro la cornice, leggermente più scura e un po' translucida
   - un grande ARCO di luce che taglia la faccia in diagonale: la calotta in alto
     a sinistra è chiara, il resto no. Questo stacco curvo è il "disegno" che si
     nota sulla scheda; non è una sfumatura uniforme.
   La cornice è un `border` e non uno sfondo: con `background-clip:padding-box`
   la faccia non si estende sotto di essa, così ciò che traspare dalla faccia
   è il CAMPO e non il colore della cornice. Se la cornice fosse lo sfondo,
   abbassare --face-a sbiadirebbe la faccia verso il colore della cornice:
   sembrerebbe un cambio di tinta, non una trasparenza. */
.zone{
  --card-edge:#dc9068;
  --card-frame:#fbd4bb;
  --f1:255,243,233; --f2:251,220,201; --f3:245,199,172;
  /* Con la faccia crema su campo arancione la trasparenza non disegna nulla:
     serve solo a far variare appena il calore della carta (il campo è più
     luminoso al centro-alto e più cupo ai bordi), così non sembra tinta stesa.
     Sotto 0.9 il testo scuro perde contrasto senza guadagnare niente. */
  --face-a:.92;
  position:absolute;width:calc(50% - 12px);height:34%;z-index:5;
  border:5px solid var(--card-frame);
  border-radius:26px;
  background:linear-gradient(180deg,
    rgba(var(--f1),var(--face-a)) 0%,
    rgba(var(--f2),var(--face-a)) 46%,
    rgba(var(--f3),var(--face-a)) 100%);
  background-clip:padding-box;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 7px 0 var(--card-edge),
    0 12px 18px rgba(120,52,8,.32);
  transition:background .25s, border-color .25s, box-shadow .25s, filter .25s, transform .18s;
  cursor:pointer;overflow:visible;
}
/* solo l'arco di luce: la faccia sta nello sfondo di .zone, qui sopra ci va
   unicamente la luce, altrimenti tornerebbe una tinta piena sopra al campo */
.zone::before{
  content:"";position:absolute;inset:0;border-radius:21px;
  background:radial-gradient(148% 132% at -22% -36%,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.50) 49%,
    rgba(255,255,255,0)   53%,
    rgba(140,64,18,.07)   56%,
    rgba(140,64,18,.10)  100%);
  pointer-events:none;z-index:0;
}
/* "Semaforo verde": quando si apre la finestra di risposta le schede
   schiariscono di scatto. Nell'originale è il segnale di via, come le luci in
   Formula 1: prima di quel momento il campo è ancora in lettura. */
/* Il cambiamento è volutamente piccolo: nell'originale la faccia si schiarisce
   di una ventina di livelli sul blu, non diventa bianca. A colpire l'occhio è
   lo scatto di luminosità, non il colore nuovo. */
.zone.go{--face-a:1; --card-frame:#fde0cd}
.zone.go::before{animation:zoneGo .45s ease-out}
@keyframes zoneGo{
  0%  {filter:brightness(1)}
  22% {filter:brightness(1.22)}
  100%{filter:brightness(1)}
}
/* la scheda scelta si "alza" dal campo */
.zone.mine{transform:translateY(-2px)}
.zone[data-i="0"]{top:8px;left:8px}
.zone[data-i="1"]{top:8px;right:8px}
.zone[data-i="2"]{bottom:8px;left:8px}
.zone[data-i="3"]{bottom:8px;right:8px}
.zone .z-label{
  text-align:center;font-weight:var(--w-black);color:var(--brown-dark);
  font-size:var(--t-lg);line-height:1.1;padding:8px 8px 3px;
  /* le risposte lunghe vanno a capo (max 2 righe) invece di essere troncate */
  white-space:normal;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow-wrap:break-word;hyphens:auto;
  position:relative;z-index:22; /* sopra gli sprite: la risposta resta sempre leggibile */
  text-shadow:0 0 6px rgba(255,255,255,.55), 0 0 2px rgba(255,255,255,.8);
}
.zone.mine{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    0 0 0 4px var(--blue-sel),
    0 7px 0 var(--card-edge),
    0 12px 18px rgba(120,52,8,.32);
}
.zone.wrong{
  --f1:240,112,92; --f2:229,83,62; --f3:211,64,44;
  --card-edge:#a52a1b; --card-frame:#f6a294; --face-a:.94;
}
.zone.wrong .z-label{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(120,20,5,.5)}
.zone.wrong .slots{background:rgba(120,25,10,.22);box-shadow:inset 0 3px 5px rgba(110,20,5,.30)}
.zone.wrong .slot-band{background:rgba(255,235,225,.62)}
.zone.wrong .slot-band.wide{background:rgba(255,235,225,.40)}
.zone.wrong .slot,.zone.wrong .slot-band.wide .slot{color:#8c2716}
.zone.wrong .slot-rest{color:rgba(255,232,226,.85)}
.zone.wrong .slot.s-medal{background:radial-gradient(circle at 38% 32%,#fff,#ffe2d6)}
.zone.dimmed{filter:grayscale(.5) brightness(.75)}

/* Slot punti: gerarchia di forme come nell'originale — il premio più alto è una
   medaglia rotonda che spicca, poi pillole, poi fasce sempre più discrete.
   Così "arrivare primo" si legge a colpo d'occhio senza contare i numeri. */
/* Le pillole vivono in un incavo scavato nella scheda: l'ombra INTERNA
   (verso il basso) è ciò che legge come "buco", l'opposto dell'ombra
   esterna che legge come "rilievo". */
.slots{
  display:flex;flex-direction:column;gap:5px;
  /* sopra la faccia della scheda (.zone::before), altrimenti l'incavo sparisce */
  position:relative;z-index:1;
  margin:2px 10px 10px;padding:7px 7px 4px;border-radius:15px;
  background:rgba(214,124,80,.17);
  box-shadow:inset 0 3px 5px rgba(150,72,30,.22), inset 0 -1px 0 rgba(255,255,255,.55);
}
.slot-row{display:flex;align-items:center;gap:7px}
/* Fascia condivisa: un solo contenitore chiaro per più premi dello stesso
   valore. È questo che distingue "il gruppo dei secondi" dal primo posto:
   nessun bordo tra i numeri, quindi si leggono come un gradino solo. */
.slot-band{
  flex:1;min-width:0;display:flex;align-items:center;
  height:25px;border-radius:13px;
  background:rgba(255,255,255,.70);
  box-shadow:inset 0 -1px 0 rgba(180,110,60,.22);
}
.slot-band.wide{height:22px;background:rgba(255,255,255,.46)}
.slot{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--w-black);font-size:var(--t-sm);color:#7a4a22;
  transition:opacity .2s, transform .2s;
}
.slot-band.wide .slot{color:#8a5a2e}
/* 1º posto: medaglia bianca, tonda, in rilievo. È l'unica forma diversa
   dalle altre, per questo si nota per prima. */
.slot.s-medal{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff, #ffeccd);
  color:var(--ink);font-size:var(--t-md);
  box-shadow:0 2px 0 rgba(190,120,60,.35), 0 0 0 2px rgba(255,255,255,.9), var(--sh-1);
}
/* premio di consolazione: solo testo, nessuna forma — come nell'originale */
.slot-rest{
  text-align:center;line-height:1;padding:1px 0 2px;
  font-weight:var(--w-black);font-size:var(--t-sm);color:rgba(122,74,34,.68);
}
.slot.taken{opacity:.2;transform:scale(.88)}

/* quizzy sul campo */
/* Il Quizzy è fatto di due pezzi che si muovono in modo diverso:
   - `.sprite` è il PIEDE, cioè la posizione al suolo. Scivola da un punto
     all'altro con la transizione.
   - l'`<svg>` dentro è il CORPO, che rispetto al piede salta su e giù.
   È questa separazione a far leggere il salto: se corpo e ombra si muovono
   insieme, il personaggio sembra scivolare su una slitta. */
/* Andatura lineare: chi cammina tiene una velocità, non un tempo fisso.
   La durata la decide chi muove lo sprite, in base a quanto è lontano. */
.sprite{
  position:absolute;width:52px;margin-left:-26px;z-index:20;
  transition:left .25s linear, top .25s linear;
  pointer-events:none;
}
.sprite svg{
  display:block;
  transform-origin:50% 100%;   /* si schiaccia sui piedi, non sul centro */
  filter:drop-shadow(0 2px 2px rgba(60,20,0,.3));
}
.sprite.me{z-index:26}
/* ombra di contatto: resta a terra mentre il corpo si stacca. Senza, i Quizzy
   sembrano fluttuare sopra al campo. */
.sprite::before{
  content:"";position:absolute;left:50%;bottom:9px;width:56%;height:8px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(120,58,8,.34) 0%, rgba(120,58,8,.16) 55%, transparent 75%);
}
.sprite .s-name{
  text-align:center;font-size:10px;font-weight:var(--w-black);color:#fff;line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.55);margin-top:-3px;
  white-space:nowrap;overflow:hidden;max-width:64px;margin-left:-6px;
}
.sprite.me .s-name{color:var(--accent)}
/* UN SOLO balzo da 250 ms, ripetuto `--hop-n` volte. È la chiave per non
   sembrare in volo: uno spostamento lungo non allunga il salto, ne fa DI PIÙ,
   allo stesso ritmo. Come chi cammina: il passo dura sempre uguale, cambia
   quanti passi servono.
   Dentro ci sono i tre ingredienti classici: anticipo (si accuccia),
   allungamento in volo, schiacciata all'impatto. Senza, sembra un ascensore.
   Inizio e fine coincidono, altrimenti fra un balzo e l'altro si vedrebbe uno
   scatto. */
.sprite.moving svg{animation:hop 250ms linear var(--hop-n,2)}
@keyframes hop{
  0%   {transform:translateY(0)     scale(1,1)       rotate(0)}
  14%  {transform:translateY(1px)   scale(1.16,.84)  rotate(0)}      /* si accuccia */
  38%  {transform:translateY(-13px) scale(.88,1.14)  rotate(-4deg)}  /* stacco, si allunga */
  56%  {transform:translateY(-15px) scale(1,1)       rotate(-2deg)}  /* apice */
  84%  {transform:translateY(0)     scale(1.14,.86)  rotate(0)}      /* atterra */
  100% {transform:translateY(0)     scale(1,1)       rotate(0)}
}
/* l'ombra resta a terra: si stringe e sbiadisce quando il corpo è in aria.
   È lei a dire allo spettatore quanto è alto il salto. */
.sprite.moving::before{animation:hopShadow 250ms linear var(--hop-n,2)}
@keyframes hopShadow{
  0%   {transform:translateX(-50%) scale(1);    opacity:1}
  14%  {transform:translateX(-50%) scale(1.12); opacity:1}
  38%  {transform:translateX(-50%) scale(.66);  opacity:.5}
  56%  {transform:translateX(-50%) scale(.58);  opacity:.42}
  84%  {transform:translateX(-50%) scale(1.1);  opacity:1}
  100% {transform:translateX(-50%) scale(1);    opacity:1}
}
.sprite.gone{opacity:.35;filter:grayscale(1)}
.sprite.hidden-op{opacity:0 !important}

/* starburst punti */
.starburst{
  position:absolute;left:50%;top:46%;z-index:50;transform:translate(-50%,-50%) scale(.2);
  width:230px;height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(circle, #fff 0 38%, transparent 39%),
    repeating-conic-gradient(#fff 0deg 12deg, #ffe3da 12deg 24deg);
  clip-path:polygon(50% 0%,61% 12%,75% 5%,80% 21%,97% 20%,93% 36%,100% 45%,89% 55%,95% 70%,79% 71%,76% 88%,61% 81%,50% 100%,39% 81%,24% 88%,21% 71%,5% 70%,11% 55%,0% 45%,7% 36%,3% 20%,20% 21%,25% 5%,39% 12%);
  animation:burstIn .45s cubic-bezier(.3,1.6,.5,1) forwards;
  pointer-events:none;
}
@keyframes burstIn{to{transform:translate(-50%,-50%) scale(1)}}
.starburst .p-big{font-size:64px;font-weight:var(--w-black);color:var(--ink);line-height:.9}
.starburst .p-small{font-size:20px;font-weight:var(--w-black);letter-spacing:2px;color:var(--ink)}
.starburst.zero .p-big{color:#b34a3a}

/* banner regola pazza */
.rule-overlay{position:absolute;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;pointer-events:none}
.rule-banner{
  transform:rotate(-6deg) scale(.3);opacity:0;
  background:#fff;padding:10px 34px;border-radius:6px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  animation:ruleIn .4s cubic-bezier(.3,1.5,.5,1) .05s forwards;
}
.rule-banner h2{
  color:var(--accent);-webkit-text-stroke:1px #d88f00;
  font-size:clamp(26px,8vw,36px);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;
}
.rule-desc{
  transform:scale(.3);opacity:0;margin-top:-6px;
  background:var(--panel-red);color:#fff;font-weight:var(--w-black);font-size:clamp(18px,5.5vw,24px);
  text-align:center;padding:22px 26px;border-radius:18px;width:min(86%,340px);
  box-shadow:0 10px 26px rgba(0,0,0,.4), inset 0 0 0 4px rgba(255,255,255,.25);
  animation:ruleIn .4s cubic-bezier(.3,1.5,.5,1) .18s forwards;
}
@keyframes ruleIn{to{transform:rotate(-6deg) scale(1);opacity:1}}
.rule-desc{animation-name:ruleIn2}
@keyframes ruleIn2{to{transform:scale(1);opacity:1}}

/* annuncio categoria */
.cat-banner{
  position:absolute;inset:0;z-index:54;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  pointer-events:none;
}
.cat-banner .c-what{color:#fff;font-weight:var(--w-black);font-size:16px;text-shadow:0 2px 3px rgba(0,0,0,.4);text-transform:uppercase;letter-spacing:2px}
.cat-banner .c-name{
  background:var(--brown);color:#fff;font-weight:var(--w-black);font-size:26px;
  padding:14px 30px;border-radius:20px;box-shadow:0 8px 0 var(--brown-dark);
  animation:ruleIn2 .35s cubic-bezier(.3,1.5,.5,1) forwards;transform:scale(.3);opacity:0;
}

/* countdown grande */
.big-count{
  position:absolute;inset:0;z-index:53;display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.big-count span{
  font-size:120px;font-weight:var(--w-black);color:#fff;text-shadow:0 6px 0 rgba(120,20,0,.4);
  animation:countPop .8s ease-out forwards;
}
@keyframes countPop{0%{transform:scale(.2);opacity:0}30%{transform:scale(1.15);opacity:1}80%{transform:scale(1);opacity:1}100%{transform:scale(1.6);opacity:0}}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.lb-head{position:relative;z-index:2;text-align:center;padding:calc(14px + var(--safe-top)) 54px 0 16px}
.lb-head h2{font-size:32px;letter-spacing:1px}
.lb-head .lb-line{height:3px;background:rgba(255,255,255,.7);border-radius:2px;margin:8px 18px}
.lb-warn{color:#fff;font-weight:var(--w-black);font-size:17px;line-height:1.2;padding:2px 18px 8px;text-shadow:0 2px 2px rgba(0,0,0,.3)}
/* Due colonne riempite PER COLONNA (1..10 a sinistra, 11..20 a destra), come
   nell'originale: grid-auto-flow:column più il numero di righe, che arriva
   inline da chi monta la schermata perché dipende da quanti giocatori ci sono. */
.lb-grid{
  position:relative;z-index:2;flex:1;overflow-y:auto;
  display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;
  gap:6px;padding:8px 10px calc(14px + var(--safe-bottom));
  align-content:start;
}
.lb-grid.single{grid-template-columns:1fr;grid-auto-flow:row;max-width:360px;margin:0 auto;width:100%}
/* Quattro colonne invece di sei: nome e tempo stanno incolonnati in verticale,
   e così pure punti guadagnati e totale. Su due colonne è l'unico modo di
   ingrandire tutto: cinque campi in fila su mezzo schermo lasciavano al nome
   una cinquantina di pixel, cioè quattro lettere. */
.lb-row{
  position:relative;display:grid;align-items:center;
  grid-template-columns:18px 40px minmax(0,1fr) auto;
  gap:3px;
  background:linear-gradient(90deg,#c9a06b,#e9dcc8 42%);
  border-radius:15px;height:54px;padding:0 8px 0 3px;
  box-shadow:0 3px 0 rgba(90,40,10,.3);
  animation:rowIn .3s ease-out both;
  transition:background .35s;
  min-width:0; /* gli item di grid non possono restringersi senza questo: righe tagliate */
}
.lb-row .r-rank{font-weight:var(--w-black);font-size:17px;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.4);text-align:center}
.lb-row .q-avatar{width:40px;height:40px;margin-top:-13px}
.lb-row .r-id{min-width:0;display:flex;flex-direction:column;justify-content:center;padding-left:2px}
.lb-row .r-name{
  font-weight:var(--w-black);font-size:15px;color:var(--ink);line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* tempo medio di risposta, sotto il nome */
.lb-row .r-time{
  font-weight:700;font-size:11px;color:#6b4526;line-height:1.1;opacity:.85;
  font-variant-numeric:tabular-nums;
}
.lb-row .r-num{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-width:26px}
/* punti guadagnati in questa manche: compaiono con uno scatto, non ci sono
   già all'apertura (la classifica parte da com'era prima) */
.lb-row .r-gain{
  font-weight:var(--w-black);font-size:13px;color:#c9401f;line-height:1.1;min-height:14px;
  opacity:0;transform:scale(.4);
  transition:opacity .18s, transform .32s cubic-bezier(.3,1.7,.5,1);
}
.lb-row.show-gain .r-gain{opacity:1;transform:none}
.lb-row .r-gain.neg{color:#8d2b12}
.lb-row .r-pts{
  font-weight:var(--w-black);font-size:24px;color:var(--ink);line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.lb-row .r-pts.bump{animation:ptsBump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes ptsBump{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
/* con una sola colonna c'è spazio in abbondanza: tutto più grande */
.lb-grid.single .lb-row{grid-template-columns:24px 50px minmax(0,1fr) auto;gap:6px;height:66px;border-radius:18px}
.lb-grid.single .r-rank{font-size:22px}
.lb-grid.single .q-avatar{width:50px;height:50px;margin-top:-16px}
.lb-grid.single .r-name{font-size:19px}
.lb-grid.single .r-time{font-size:13px}
.lb-grid.single .r-gain{font-size:17px;min-height:18px}
.lb-grid.single .r-pts{font-size:31px}
/* il primo in classifica ha la fascia dorata */
.lb-row.first{background:linear-gradient(90deg,#e0a020,#ffe0a0 42%);box-shadow:0 0 0 2px #ffd782,0 3px 0 rgba(140,80,10,.4)}
.lb-row.me{background:linear-gradient(90deg,#37b6cc,#c2eef6 42%);box-shadow:0 0 0 3px #fff,0 3px 0 rgba(20,80,90,.4)}
/* A rischio eliminazione: la riga si tinge di rosso e il numero di posizione
   diventa un bollino. Il numero NON sparisce: serve a capire quanti posti
   mancano per salvarsi. */
/* si accendono uno alla volta a fine riordino: l'onda che si allarga è ciò
   che fa notare la riga anche se stai guardando un'altra parte dello schermo */
.lb-row.danger{
  background:linear-gradient(90deg,#e0604d,#f8cfc7 42%);
  box-shadow:0 0 0 2px var(--panel-red),0 3px 0 rgba(120,20,5,.35);
  animation:dangerIn .55s ease-out;
}
@keyframes dangerIn{
  0%  {box-shadow:0 0 0 0 rgba(226,60,30,.95), 0 3px 0 rgba(120,20,5,.35)}
  55% {box-shadow:0 0 0 10px rgba(226,60,30,0), 0 3px 0 rgba(120,20,5,.35)}
  100%{box-shadow:0 0 0 2px var(--panel-red), 0 3px 0 rgba(120,20,5,.35)}
}
.lb-row.danger .r-rank{
  justify-self:center;width:21px;height:21px;border-radius:50%;
  background:var(--panel-red);color:#fff;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;text-shadow:none;
}
.lb-grid.single .lb-row.danger .r-rank{width:26px;height:26px;font-size:15px}
.lb-row.out{background:linear-gradient(90deg,#8b8b8b,#dedbd6 42%);}
.lb-row.out .q-avatar{filter:grayscale(1);opacity:.75}
.lb-row.out .r-pts,.lb-row.out .r-name{opacity:.6}
.lb-continue{position:relative;z-index:2;text-align:center;padding:4px 0 calc(16px + var(--safe-bottom))}

/* ============================================================
   ELIMINATO — posizione finale e scelta su come proseguire
   ============================================================ */
.elim-wrap{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  padding:0 22px calc(20px + var(--safe-bottom));
}
/* scheda chiara con l'etichetta ruotata, come nell'originale */
.elim-card{
  position:relative;width:min(300px,86vw);
  background:linear-gradient(180deg, rgba(255,214,203,.96), rgba(250,183,168,.96));
  border-radius:24px;padding:56px 22px 30px;
  box-shadow:0 10px 0 rgba(150,50,30,.35), 0 20px 34px rgba(60,10,0,.4);
  display:flex;flex-direction:column;align-items:center;
}
.elim-tag{
  position:absolute;top:-26px;left:50%;
  transform:translateX(-50%) rotate(-4deg);
  width:88%;background:#fff;border-radius:14px;padding:14px 10px 12px;text-align:center;
  box-shadow:0 6px 14px rgba(60,10,0,.28);
}
.elim-rank{font-size:var(--t-2xl);font-weight:var(--w-black);color:var(--ink);line-height:1}
.elim-sub{font-size:var(--t-md);font-weight:var(--w-bold);color:#8a4b32;margin-top:4px}
.elim-card .elim-quizzy{width:130px;height:130px;margin-top:12px}
.elim-actions{display:flex;flex-direction:column;gap:12px;width:min(300px,86vw)}
.elim-actions .btn{width:100%}

/* durante il resto della partita, al posto della barra delle emote */
.spectator-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:47;
  padding:12px 0 calc(12px + var(--safe-bottom));
  background:linear-gradient(180deg, rgba(30,12,4,.75), rgba(30,12,4,.92));
  color:#fff;text-align:center;font-weight:var(--w-black);font-size:var(--t-sm);
  letter-spacing:2px;text-transform:uppercase;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18);
}

/* ============================================================
   PODIO / RISULTATI
   ============================================================ */
.podium-wrap{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:10px}
.podium{display:flex;align-items:flex-end;gap:10px;margin-bottom:16px}
.pod-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.pod-col .q-avatar{width:64px;height:64px}
.pod-col .pd-name{color:#fff;font-weight:var(--w-black);font-size:14px;text-shadow:0 2px 2px rgba(0,0,0,.4);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-block{
  width:84px;border-radius:10px 10px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background:linear-gradient(#ffd76e,#eda921);box-shadow:inset 0 -8px 0 rgba(140,80,0,.25);
  color:#7a4b05;font-weight:var(--w-black);font-size:30px;padding-top:6px;
}
.pod-col.p1 .pod-block{height:110px}
.pod-col.p2 .pod-block{height:82px;background:linear-gradient(#e8e8e8,#b9b9bd)}
.pod-col.p3 .pod-block{height:62px;background:linear-gradient(#e9a978,#c97a3d)}
.pod-col .pd-pts{font-size:13px;color:#fff;font-weight:var(--w-black);background:rgba(45,20,8,.72);border-radius:10px;padding:2px 10px}
.result-msg{text-align:center;color:#fff;padding:calc(16px + var(--safe-top)) 16px 0;position:relative;z-index:2}
.result-msg h2{font-size:34px}
.result-msg .r-sub{font-weight:var(--w-black);font-size:17px;text-shadow:0 2px 2px rgba(0,0,0,.35);margin-top:4px}
.rewards-line{display:flex;justify-content:center;gap:14px;margin-top:10px}
.reward-pill{background:rgba(45,20,8,.72);border:2px solid rgba(255,255,255,.3);color:#fff;font-weight:var(--w-black);border-radius:16px;padding:6px 14px;font-size:16px}

/* coriandoli */
.confetti{position:absolute;width:10px;height:14px;z-index:1;top:-20px;animation:confFall linear forwards}
@keyframes confFall{to{transform:translateY(110vh) rotate(720deg)}}

/* ============================================================
   MISSIONI / IMPOSTAZIONI / QUIZZY EDITOR
   ============================================================ */
.mission-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px;margin-bottom:8px;box-shadow:0 2px 0 rgba(120,60,20,.15)}
.mission-row .mi-icon{font-size:26px;flex:none}
.mission-row .mi-name{font-weight:var(--w-black);font-size:14px;color:var(--brown-dark);line-height:1.15}
.mission-row .mi-bar{height:8px;background:#eadbc8;border-radius:4px;overflow:hidden;margin-top:5px}
.mission-row .mi-fill{height:100%;background:var(--panel-green);border-radius:4px;transition:width .4s}
.mission-row .mi-reward{margin-left:auto;flex:none;font-weight:var(--w-black);color:#b8860b;font-size:14px;text-align:center}
.mission-row.done{outline:3px solid var(--panel-green)}
.mission-row.done .mi-claim{background:var(--panel-green);border:none;color:#fff;font-family:inherit;font-weight:var(--w-black);border-radius:10px;padding:6px 10px;cursor:pointer;box-shadow:0 3px 0 #4a8a1e}

.set-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:8px;font-weight:var(--w-black);color:var(--brown-dark)}
.toggle{width:56px;height:30px;border-radius:15px;background:#ccc;border:none;position:relative;cursor:pointer;transition:background .2s}
.toggle.on{background:var(--panel-green)}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle.on::after{left:29px}

.q-editor{display:flex;flex-direction:column;align-items:center;gap:12px}
.q-preview{width:130px;height:130px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.swatch{width:38px;height:38px;border-radius:50%;border:3px solid #fff;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.swatch.sel{outline:4px solid var(--blue-sel)}
.swatch.lock{position:relative;filter:grayscale(.7) brightness(.75);cursor:default}
.swatch.lock::after{content:"🔒";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px}
.acc-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.acc-pick{width:52px;height:52px;border-radius:14px;background:#fff;border:3px solid #e8d9c4;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px}
.acc-pick.sel{border-color:var(--blue-sel);outline:2px solid var(--blue-sel)}
.acc-pick.lock{filter:grayscale(.7) opacity(.6);cursor:default;position:relative}
.acc-pick.lock::after{content:"🔒";position:absolute;right:-4px;top:-6px;font-size:14px}
.name-input{
  font-family:inherit;font-weight:var(--w-black);font-size:20px;text-align:center;color:var(--brown-dark);
  border:3px solid var(--panel-light);border-radius:14px;padding:8px 12px;width:200px;background:#fff;outline:none;
}
.name-input:focus{border-color:var(--panel)}

/* ============================================================
   SALA D'ATTESA + EMOTE
   ============================================================ */
.waiting-title{
  position:relative;z-index:10;text-align:center;font-weight:var(--w-black);color:var(--ink);
  font-size:clamp(16px,5vw,21px);padding:calc(14px + var(--safe-top)) 54px 10px 16px;
}
.q-meta{
  text-align:center;font-weight:var(--w-black);font-size:12px;color:rgba(70,35,10,.75);
  letter-spacing:.5px;margin-bottom:2px;
}

.emote-bar{
  position:absolute;left:50%;bottom:calc(10px + var(--safe-bottom));transform:translateX(-50%);
  display:flex;gap:9px;z-index:46;
}
.emote-btn{
  width:46px;height:46px;border:none;border-radius:50% 50% 50% 16%;cursor:pointer;
  background:#fff;box-shadow:0 3px 0 rgba(90,30,10,.3);font-size:22px;
  display:flex;align-items:center;justify-content:center;padding:3px;
  transition:transform .08s;
}
.emote-btn:active{transform:scale(.85)}
.emote-btn svg{width:100%;height:100%}
.emote-bubble{
  position:absolute;z-index:44;width:44px;height:44px;margin-left:-22px;
  background:#fff;border-radius:50% 50% 50% 12%;padding:5px;
  box-shadow:0 3px 8px rgba(0,0,0,.3);pointer-events:none;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  animation:bubblePop .22s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes bubblePop{from{transform:scale(0)}to{transform:scale(1)}}
.emote-bubble.fade{opacity:0;transition:opacity .3s}

/* ============================================================
   INTRO ROUND: pannelli a comparsa + macchina da scrivere
   ============================================================ */
.zone.hidden-zone{transform:scale(0);opacity:0;pointer-events:none}
.zone.pop-in{animation:zonePop .42s cubic-bezier(.3,1.7,.5,1) both}
@keyframes zonePop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* ============================================================
   REVEAL A CATENA
   ============================================================ */
.zone.correct{
  --f1:216,236,122; --f2:195,221,82; --f3:174,207,60;
  --card-edge:#7ea31f; --card-frame:#dcefa0; --face-a:.94;
}
.zone.correct .z-label{color:#2c3a05;text-shadow:0 0 6px rgba(255,255,255,.5)}
.zone.correct .slots{background:rgba(96,130,20,.20);box-shadow:inset 0 3px 5px rgba(70,100,10,.26)}
.zone.reveal-pop{animation:revealPop .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes revealPop{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
/* Punti che volano via dalla testa del Quizzy.
   Niente -webkit-text-stroke: ingrossa le aste del "+" finché il vuoto
   centrale si chiude e il segno sembra un "÷". Il contorno lo fanno quattro
   ombre secche ai lati, che non mangiano la forma della lettera. */
.float-pts{
  position:absolute;z-index:32;pointer-events:none;
  font-weight:var(--w-black);font-size:27px;line-height:1;color:#fff;
  letter-spacing:.5px;
  text-shadow:
    -2px 0 0 rgba(88,36,4,.95),  2px 0 0 rgba(88,36,4,.95),
     0 -2px 0 rgba(88,36,4,.95), 0 2px 0 rgba(88,36,4,.95),
     0 4px 5px rgba(0,0,0,.35);
  margin-left:-12px;transform-origin:50% 100%;
  animation:floatPts 1s cubic-bezier(.25,.9,.35,1) forwards;
}
/* comparsa con un piccolo scatto, poi salita e dissolvenza */
@keyframes floatPts{
  0%   {transform:translateY(4px)   scale(.5);  opacity:0}
  16%  {transform:translateY(-2px)  scale(1.22);opacity:1}
  30%  {transform:translateY(-6px)  scale(1);   opacity:1}
  70%  {transform:translateY(-26px) scale(1);   opacity:.85}
  100% {transform:translateY(-46px) scale(.96); opacity:0}
}

/* ============================================================
   BUIO COL FARO
   ============================================================ */
/* --lr allarga il faro: vale 1 sul campo aperto e cresce quando entro in una
   scheda, così il cono abbraccia tutta la carta e la risposta resta leggibile
   anche se il mio Quizzy è finito in fondo. */
#field .darkness{
  position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle at var(--lx,50%) var(--ly,50%),
    rgba(20,12,4,0) 0 calc(58px * var(--lr,1)),
    rgba(16,10,4,.6) calc(86px * var(--lr,1)),
    rgba(10,7,3,.97) calc(132px * var(--lr,1)));
}
#field.dark .darkness{opacity:1}
/* Al buio la scheda si spegne ma il contorno resta luminoso. Il colore passa
   dalle variabili, così cornice e spessore non si perdono. */
#field.dark .zone{
  --f1:22,28,17; --f2:22,28,17; --f3:22,28,17; --face-a:1;
  /* la cornice prende lo stesso colore della faccia e sparisce: al buio deve
     restare solo il filo verde sottile, altrimenti i 5px di cornice si sommano
     al contorno e sembra una fascia spessa e sfocata */
  --card-frame:#161c11;
  z-index:16;
  box-shadow:0 0 0 2.5px rgba(150,235,150,.85), 0 0 18px 3px rgba(140,230,140,.35), inset 0 0 0 4px rgba(0,0,0,.25);
}
#field.dark .zone .z-label,#field.dark .zone .slots{opacity:0;transition:opacity .25s}
/* scheda spenta: via anche il riflesso, che altrimenti resta una chiazza
   chiara e tradisce la forma della carta nel buio */
#field.dark .zone::before{opacity:0;transition:opacity .25s}
#field.dark .zone.lit::before{opacity:1}
/* La scheda su cui sto va SOTTO il velo (z-index 14 contro 15), non sopra:
   così non si accende tutta insieme come un ritaglio, ma la scopre il cono di
   luce, sfumando ai bordi insieme al resto del campo. Le altre schede restano
   sopra il velo (16) perché il loro filo verde deve restare visibile. */
#field.dark .zone.lit{
  --f1:255,243,233; --f2:251,220,201; --f3:245,199,172; --face-a:1;
  --card-frame:#fbd4bb;
  z-index:14;box-shadow:0 0 26px 8px rgba(255,190,80,.5), inset 0 0 0 4px rgba(255,255,255,.3);
}
#field.dark .zone.lit .z-label,#field.dark .zone.lit .slots{opacity:1}
#field.dark .sprite{transition:left .5s cubic-bezier(.5,1.4,.5,1), top .5s cubic-bezier(.5,1.4,.5,1), opacity .35s}

/* ============================================================
   COLLA (melma bianca sul Quizzy)
   ============================================================ */
.sprite.gooey svg{filter:saturate(.5) brightness(1.5)}
.sprite.gooey::after{
  content:"";position:absolute;left:6%;top:-8%;width:88%;height:80%;pointer-events:none;
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.95) 0 7px, transparent 8px),
    radial-gradient(circle at 68% 6%, rgba(255,255,255,.9) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 34%, rgba(240,250,255,.7) 0 9px, transparent 10px),
    radial-gradient(circle at 82% 40%, rgba(255,255,255,.8) 0 5px, transparent 6px),
    radial-gradient(ellipse at 40% 96%, rgba(255,255,255,.85) 0 8px, transparent 9px);
}

/* ============================================================
   BOMBA
   ============================================================ */
.bomb{
  position:absolute;z-index:26;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;
  animation:bombShake .22s linear infinite alternate;
}
@keyframes bombShake{from{transform:rotate(-9deg) scale(1)}to{transform:rotate(9deg) scale(1.1)}}
.explosion{
  position:absolute;z-index:30;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0 16%,#ffd23f 17% 42%,#e8542f 43% 64%,transparent 65%);
  animation:boomAnim .55s ease-out forwards;
}
@keyframes boomAnim{from{transform:scale(.15);opacity:1}70%{opacity:.9}to{transform:scale(1.5);opacity:0}}
.scorch{
  position:absolute;z-index:6;width:76px;height:52px;margin:-26px 0 0 -38px;pointer-events:none;
  background:radial-gradient(ellipse, rgba(35,22,10,.5) 0 55%, transparent 60%);
}
.sprite.charred svg{filter:brightness(.18) saturate(.1) contrast(1.2)}
.sprite.charred{animation:charJump .4s ease-out}
@keyframes charJump{0%{margin-top:0}30%{margin-top:-26px}100%{margin-top:0}}
.splat{
  position:absolute;z-index:7;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;opacity:.85;
}

/* ============================================================
   CLASSIFICA: riordino animato
   ============================================================ */
.lb-grid .lb-row{animation:none}
/* la durata qui deve restare allineata a BOARD.slide in js/screens/board.js:
   la coreografia aspetta la fine dello scivolamento per accendere i candidati */
.lb-row.flip{transition:transform .8s cubic-bezier(.35,1.25,.45,1), background .35s}

/* toast */
#toast{
  position:absolute;left:50%;bottom:calc(90px + var(--safe-bottom));transform:translateX(-50%) translateY(20px);
  z-index:90;background:rgba(45,20,8,.9);color:#fff;font-weight:var(--w-black);font-size:15px;
  padding:10px 20px;border-radius:16px;opacity:0;transition:all .25s;pointer-events:none;
  white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* splash */
.splash{align-items:center;justify-content:center;gap:18px}
.splash .logo{position:relative;z-index:2;text-align:center}
.splash .logo h1{
  font-size:clamp(44px,13vw,64px);color:#fff;line-height:.95;
  text-shadow:0 5px 0 rgba(120,20,0,.45);transform:rotate(-4deg);
}
.splash .logo h1 em{font-style:normal;color:var(--accent)}
.splash .q-avatar{width:140px;height:140px;position:relative;z-index:2;animation:bounceIdle 2s ease-in-out infinite}
.splash .btn{position:relative;z-index:2}
.splash .fine-print{position:relative;z-index:2;color:rgba(255,255,255,.75);font-size:11px;font-weight:600;text-align:center;padding:0 30px;max-width:360px}