/* SETTENOTE — vivace e a blocchi: fondo scuro, due campi accesi a tutto
   colore, un tastone bianco per ciascuno, card bianca per il brano. Il
   telefono sta in mezzo ai due giocatori: la meta' di sopra e' ruotata di
   180°, cosi' chi sta di fronte legge dritto. */

:root{
  --fondo:#16121C; --fondo2:#241A2E;
  --carta:#FFFFFF; --inchiostro:#1B1524; --tenue:#6F6580;
  --caldo1:#FF5864; --caldo2:#FF7854; --caldo3:#FD267D;   /* il gradiente d'accento */
  --verde:#22C55E; --verde2:#A7FF3E; --rosso:#EF4444;
  --tondone:28px;
  --alone:0 12px 30px rgba(0,0,0,.35);
  --font:'Avenir Next','Nunito','Segoe UI Variable','Segoe UI',system-ui,-apple-system,sans-serif;
  --lento:.28s; --svelto:.15s;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
html,body{height:100%; margin:0; overflow:hidden; overscroll-behavior:none;
  font-family:var(--font); color:var(--carta);
  background:radial-gradient(120% 80% at 50% 0%, var(--fondo2) 0%, var(--fondo) 60%)}
body{display:grid; grid-template-rows:1fr auto 1fr;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font-family:var(--font); cursor:pointer}
button:focus-visible{outline:3px solid #fff; outline-offset:3px}
svg{width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em}

/* ---------- le due meta' ---------- */
.campo{position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; padding:22px 20px; min-height:0; overflow:hidden}
.campo-1{transform:rotate(180deg)}
.campo::before{content:''; position:absolute; inset:8px; border-radius:var(--tondone); box-shadow:var(--alone);
  transition:filter var(--lento) ease, opacity var(--lento) ease}
.campo-1::before{background:linear-gradient(150deg,#00E5FF 0%,#2B7BFF 55%,#7C3AED 100%)}
.campo-2::before{background:linear-gradient(150deg,#FFD166 0%,#FF7854 45%,#FD267D 100%)}
.campo.attivo::before{background:linear-gradient(150deg,#A7FF3E 0%,#22C55E 60%,#0EA5A0 100%)}
.campo.spento::before{filter:saturate(.3) brightness(.55)}
.campo.spento .buzz{opacity:.45}
.campo>*{position:relative}

/* Nome e punteggio su una targhetta scura: i campi sono accesi e sfumati, e il
   bianco sul giallo o sul ciano chiaro non si leggerebbe. Col velo al 55% si
   va oltre 5:1 su tutta la sfumatura. */
.testa{display:flex; align-items:center; gap:14px; max-width:520px;
  background:rgba(18,12,26,.55); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:6px 10px 6px 20px; backdrop-filter:blur(8px)}
.nome{max-width:52vw; font-size:clamp(.75rem,3.2vw,.9rem); font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.92);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.punti{min-width:2.2em; padding:2px 10px; border-radius:999px; background:#fff; color:var(--inchiostro);
  font-size:clamp(1.2rem,5vw,1.7rem); font-weight:900; line-height:1.2; text-align:center;
  transition:transform var(--lento) cubic-bezier(.2,1.6,.4,1)}

/* Il tastone: bianco pieno sul colore, si vede da lontano. Mentre suona la
   musica pulsa: e' l'invito a prenotare. */
.buzz{flex:1 1 auto; width:100%; max-width:520px; min-height:120px;
  font-size:clamp(2rem,10vw,4rem); font-weight:900; letter-spacing:.04em;
  border:0; border-radius:var(--tondone);
  background:#fff; color:#E1156B;
  box-shadow:0 12px 30px rgba(0,0,0,.3), inset 0 -4px 0 rgba(0,0,0,.07);
  transition:transform var(--svelto) ease, opacity var(--lento) ease, background var(--lento) ease, color var(--lento) ease}
.campo-1 .buzz{color:#1D4ED8}
.buzz:active:not(:disabled){transform:scale(.96); box-shadow:0 4px 12px rgba(0,0,0,.3)}
.buzz:disabled{background:rgba(255,255,255,.25); color:rgba(255,255,255,.85);
  box-shadow:none; cursor:default; text-shadow:0 1px 4px rgba(0,0,0,.2)}
.campo.suona .buzz{animation:pulsa 1s ease-in-out infinite}
.campo.attivo .buzz{background:#052E16; color:var(--verde2); animation:none}
@keyframes pulsa{0%,100%{transform:scale(1); box-shadow:0 12px 30px rgba(0,0,0,.3), 0 0 0 0 rgba(255,255,255,.6)}
  50%{transform:scale(1.025); box-shadow:0 12px 30px rgba(0,0,0,.3), 0 0 0 14px rgba(255,255,255,0)}}
.campo.scossa{animation:scossa .45s ease}
@keyframes scossa{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.campo-1.scossa{animation:scossa1 .45s ease}
@keyframes scossa1{20%{transform:rotate(180deg) translateX(-8px)}40%{transform:rotate(180deg) translateX(8px)}60%{transform:rotate(180deg) translateX(-5px)}80%{transform:rotate(180deg) translateX(5px)}}

.msg{min-height:2.6em; width:100%; max-width:520px; font-size:clamp(.85rem,3.6vw,1rem); font-weight:700;
  text-align:center; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.35)}
.msg .ascolto{display:flex; align-items:center; justify-content:center; gap:8px; font-size:1.05em}
.msg .ascolto svg{animation:pulsa-mic 1s ease-in-out infinite}
@keyframes pulsa-mic{50%{transform:scale(1.25); opacity:.7}}
.msg .nota-msg{margin-bottom:8px; font-weight:700}
.rispostabox{display:flex; gap:8px; width:100%; justify-content:center; flex-wrap:wrap}
.rispostabox input{flex:1; min-width:0; font-family:var(--font); font-size:max(16px,1rem); font-weight:600;
  padding:12px 16px; border:0; border-radius:999px; background:rgba(255,255,255,.94); color:var(--inchiostro)}
.rispostabox .btn{white-space:nowrap}

/* il tempo per rispondere, grande sopra il tastone di chi ha prenotato */
.conto{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none;
  width:1.6em; height:1.6em; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:clamp(3rem,16vw,5.5rem); font-weight:900; line-height:1; color:#fff;
  background:rgba(18,12,26,.72); box-shadow:0 12px 30px rgba(0,0,0,.4); font-variant-numeric:tabular-nums}
.conto[hidden]{display:none}
.campo:has(.conto:not([hidden])) .buzz{color:transparent}   /* sotto il conto la scritta non serve */
.conto.urgente{background:var(--rosso); animation:batti .5s ease-in-out infinite}
.conto.grazia{background:rgba(18,12,26,.72); animation:none; font-size:clamp(2rem,10vw,3.5rem)}
@keyframes batti{50%{transform:translate(-50%,-50%) scale(1.12)}}

/* coriandoli: chi fa punto se li vede piovere nel suo campo */
.coriandolo{position:absolute; width:14px; height:20px; border-radius:3px; pointer-events:none; z-index:2;
  box-shadow:0 2px 6px rgba(0,0,0,.25); animation:esplodi var(--d) cubic-bezier(.15,.8,.3,1) forwards}
@keyframes esplodi{0%{transform:translate(-50%,-50%) scale(.4); opacity:0}
  10%{opacity:1; transform:translate(-50%,-50%) scale(1.15)}
  70%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(.8); opacity:0}}

/* ---------- striscia centrale ---------- */
.centro{background:rgba(255,255,255,.06); border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px);
  padding:10px 14px 12px; display:grid; gap:8px; justify-items:center}
.marchio{display:flex; align-items:center; gap:8px; font-size:.68rem; font-weight:800; letter-spacing:.24em; color:rgba(255,255,255,.45)}
.marchio img{width:18px; height:18px; border-radius:5px}
.marchio span{background:linear-gradient(135deg,var(--caldo3),var(--caldo2));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.scena{text-align:center; font-size:clamp(.85rem,3.6vw,1rem); font-weight:600; line-height:1.25;
  min-width:0; color:rgba(255,255,255,.92); display:grid; gap:2px}
.scena b{font-size:clamp(1.05rem,4.6vw,1.35rem); font-weight:800}
.scena b.grande{font-size:clamp(1.6rem,8vw,2.4rem); font-weight:900; letter-spacing:.06em}
.scena .sotto{font-size:.78rem; font-weight:600; color:rgba(255,255,255,.55)}

/* la barra dei secondi: corre solo mentre la musica suona davvero */
.barra{width:min(100%,520px); height:8px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden}
.barra i{display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--caldo3),#FFD166); border-radius:inherit}
.barra.va i{animation:scorri var(--sec,3s) linear forwards}
.barra.ferma i{animation-play-state:paused}
@keyframes scorri{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.azioni{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; font-size:1rem; font-weight:800; letter-spacing:.03em; padding:12px 22px; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; transition:transform var(--svelto) ease, filter var(--svelto) ease}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.4; cursor:default}
.btn[hidden]{display:none}
.btn.via{background:linear-gradient(135deg,var(--caldo3),var(--caldo2)); border:0;
  box-shadow:0 8px 20px rgba(253,38,125,.35); font-size:1.15rem; padding:14px 34px; min-height:56px}
.btn.si{background:linear-gradient(135deg,#34D399,var(--verde)); border:0; color:#08210F}
.btn.no{background:rgba(20,10,20,.55); border:1px solid rgba(255,255,255,.25)}
.btn.chiaro{background:rgba(255,255,255,.92); color:var(--inchiostro); border:0}
.btn.tondo{width:48px; padding:0}
.btn.largo{width:100%; margin-top:20px}

/* ---------- la card che rivela il brano ---------- */
.velo{position:fixed; inset:0; background:rgba(10,7,14,.82); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:12px; z-index:10; overflow:auto}
.velo[hidden]{display:none}   /* hidden da solo perderebbe contro display:flex */
/* Sdoppiata come i campi: sopra ruotata per chi sta di fronte, sotto dritta,
   le azioni in mezzo dove arrivano tutti e due. */
.card{position:relative; background:var(--carta); color:var(--inchiostro); border-radius:var(--tondone);
  box-shadow:0 24px 60px rgba(0,0,0,.55); width:100%; max-width:420px; height:100%; overflow:hidden;
  display:grid; grid-template-rows:1fr auto 1fr;
  animation:sali var(--lento) cubic-bezier(.2,.9,.3,1)}
@keyframes sali{from{transform:translateY(24px) scale(.94); opacity:0}}
.card .meta{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:14px 16px; min-height:0; text-align:center; overflow:hidden}
.card .meta.ruotata{transform:rotate(180deg); background:#F6F2FA}
.card .copertina{width:min(48vw,200px); max-height:26vh; aspect-ratio:1; object-fit:cover; display:block;
  border-radius:18px; box-shadow:0 10px 24px rgba(0,0,0,.25); background:#EFEAF3; flex:0 1 auto; min-height:0}
.card .copertina[hidden]{display:none}
.chip{padding:6px 12px; border-radius:999px; margin-top:4px;
  font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#fff}
.chip.si{background:linear-gradient(135deg,#34D399,var(--verde)); color:#08210F}
.chip.no{background:linear-gradient(135deg,var(--rosso),var(--caldo3))}
.chip.niente{background:rgba(27,21,36,.85)}
.card .titolo{font-size:clamp(1.15rem,5vw,1.45rem); font-weight:900; line-height:1.15; text-wrap:balance}
.card .artista{font-size:.95rem; font-weight:700; color:var(--tenue)}
.card .dette{display:grid; gap:2px; font-size:.78rem; font-weight:600; color:var(--tenue)}
.card .detta b{color:var(--inchiostro)}
.card .detta.si b{color:#15803D}
.card .mezzo{position:relative; padding:10px 16px; border-top:1px solid #EAE4EF; border-bottom:1px solid #EAE4EF}
.card .mezzo .chiudi{position:absolute; right:12px; top:50%; transform:translateY(-50%); width:40px; height:40px; flex-basis:40px}
.card .azioni{flex-direction:column; gap:8px; padding-right:48px}
.card .azioni .btn{width:100%}
.card .correzione{display:flex; gap:8px; width:100%}
.card .correzione .btn{flex:1; background:#F1EDF5; color:var(--inchiostro); font-size:.85rem; padding:10px 8px; min-height:44px}
.card .correzione-nota{font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue); text-align:center}

/* il tasto che interrompe la partita: piccolo, e chiede conferma */
.btn.stop{color:rgba(255,255,255,.7); gap:6px}
.btn.stop.armato{width:auto; padding:0 14px; background:var(--rosso); border-color:var(--rosso); color:#fff}
.btn.stop span:empty{display:none}
.btn.stop span{font-size:.8rem}

/* ---------- opzioni ---------- */
.foglio{background:var(--carta); color:var(--inchiostro); border-radius:var(--tondone);
  box-shadow:0 24px 60px rgba(0,0,0,.5); padding:20px; width:100%; max-width:460px;
  max-height:100%; overflow:auto}
.foglio-testa{display:flex; align-items:center; justify-content:space-between; gap:10px}
.foglio h2{margin:0; font-size:1.35rem; font-weight:800}
.chiudi{width:44px; height:44px; flex:0 0 44px; border:0; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#F1EDF5; color:var(--tenue); transition:transform var(--svelto) ease}
.chiudi:active{transform:scale(.94)}
.foglio label{display:block; margin:18px 0 8px; font-size:.7rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tenue)}
.scelte{display:flex; flex-wrap:wrap; gap:8px}
.scelte button{font-size:.9rem; font-weight:700; padding:11px 16px; min-height:44px;
  background:#F1EDF5; color:var(--inchiostro); border:1px solid transparent;
  border-radius:999px; transition:background var(--svelto) ease, color var(--svelto) ease}
.scelte button.on{background:linear-gradient(135deg,var(--caldo3),var(--caldo2)); color:#fff}
.riga{display:flex; gap:8px}
.riga input{flex:1; min-width:0; font-family:var(--font); font-size:max(16px,.95rem); font-weight:600;
  padding:12px 18px; border:1px solid #E3DCEA; border-radius:999px; background:#F8F5FB; color:var(--inchiostro)}
.nota{margin:6px 0 0; font-size:.8rem; font-weight:600; color:var(--tenue); line-height:1.4}
.largo-input{width:100%; font-family:var(--font); font-size:max(16px,.95rem); font-weight:600;
  padding:12px 18px; border:1px solid #E3DCEA; border-radius:999px; background:#F8F5FB; color:var(--inchiostro)}
.versione{text-align:center; margin-top:14px; font-size:.7rem; letter-spacing:.08em}
.chi{text-transform:none; letter-spacing:0; color:var(--caldo3); margin-left:6px}
.utenti{display:grid; gap:6px}
.utente{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px;
  background:#F8F5FB; border-radius:16px; font-size:.9rem}
.utente .nota{margin:0 auto 0 0; font-size:.72rem}
.btn.piccolo{min-height:36px; padding:6px 12px; font-size:.75rem}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .barra.va i{animation:none; transform:scaleX(1); transition:transform var(--sec,3s) linear}
}