/* QuizZ: inchiostro e magenta, caselle piene, niente effetti. */
@font-face {
  font-family: "Lilita One";
  src: url("font/LilitaOne-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ink: #15101c;
  --panel: #231a2d;
  --panel-2: #2f2439;
  --line: #43354f;
  --text: #f7f2ea;
  --dim: #b5a9ba;
  --pink: #ff3d81;
  --sun: #ffc83d;
  --mint: #3ddbb0;
  --red: #ff6259;
  --title: "Lilita One", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--ink);
  color: var(--text);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { font-family: var(--title); font-weight: 400; letter-spacing: .3px; margin: 0; line-height: 1.1; }
p { margin: 0; }
.dim { color: var(--dim); }
.pagina { max-width: 980px; margin: 0 auto; padding: 16px; }
.stretta { max-width: 460px; margin: 0 auto; padding: 16px; }
.riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spazio { flex: 1; }
.colonna { display: flex; flex-direction: column; gap: 12px; }

/* ---- marchio ---- */
.marchio { font-family: var(--title); color: var(--pink); text-decoration: none; font-size: 26px; }
.testata { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 2px solid var(--panel-2); }

/* ---- pulsanti e campi ---- */
button, .bottone {
  font: 700 16px system-ui, sans-serif;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--pink);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button:hover, .bottone:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, .bottone:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
button.secondo, .bottone.secondo { background: var(--panel-2); color: var(--text); }
button.giusta { background: var(--mint); color: #08261d; }
button.sbagliata { background: var(--red); color: #2c0705; }
button.piccolo { min-height: 34px; padding: 0 10px; font-size: 13px; border-radius: 8px; }

input, textarea, select {
  font: 16px system-ui, sans-serif;
  width: 100%;
  padding: 12px;
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 10px;
}
textarea { resize: vertical; min-height: 64px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--dim); }
.errore { color: var(--red); font-weight: 700; }

.scheda { background: var(--panel); border-radius: 14px; padding: 16px; }
.etichetta { font: 12px ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* ---- home ---- */
.home { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.home h1 { font-size: clamp(72px, 22vw, 130px); color: var(--pink); }
.home .tag { font-size: 20px; }
.codice { text-transform: uppercase; letter-spacing: .3em; font: 800 30px ui-monospace, Consolas, monospace; text-align: center; }

/* ---- tabellone ---- */
.tabellone { display: grid; gap: 6px; }
.categoria {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px 4px; min-height: 64px;
  background: var(--pink); color: #fff; border-radius: 8px;
  font-family: var(--title); font-size: clamp(11px, 2.4vw, 20px); overflow-wrap: anywhere;
}
.casella {
  min-height: clamp(48px, 10vh, 110px); padding: 0; border-radius: 8px;
  background: var(--panel-2); color: var(--sun);
  font-family: var(--title); font-size: clamp(15px, 3.4vw, 40px); font-weight: 400;
}
.casella:disabled { opacity: 1; }
.casella.usata { background: transparent; border: 2px dashed var(--panel-2); color: transparent; }
.casella.speciale { box-shadow: inset 0 0 0 3px var(--sun); }

/* ---- indizio ---- */
.indizio { background: var(--panel); border-radius: 14px; padding: clamp(18px, 4vw, 44px); text-align: center; }
.indizio .testo { font-size: clamp(22px, 4.6vw, 44px); font-weight: 700; line-height: 1.25; margin-top: 10px; }
.soluzione { color: var(--mint); font-family: var(--title); font-size: clamp(22px, 4vw, 36px); margin-top: 14px; }
.barra-tempo { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.barra-tempo > div { height: 100%; background: var(--sun); }

/* ---- pulsante del giocatore ---- */
.pulsante {
  width: 100%; min-height: 34vh; border-radius: 22px; font-family: var(--title); font-size: clamp(34px, 11vw, 64px); font-weight: 400;
  background: var(--panel-2); color: var(--dim); touch-action: manipulation; user-select: none;
}
.pulsante:disabled { opacity: 1; }
.pulsante.aperto { background: var(--mint); color: #08261d; }
.pulsante.bloccato { background: var(--red); color: #2c0705; }
.pulsante.preso { background: var(--sun); color: #2c2100; }

/* ---- punteggi ---- */
.punteggi { display: flex; gap: 8px; flex-wrap: wrap; }
.punteggio { flex: 1 1 110px; background: var(--panel); border-radius: 10px; padding: 8px 12px; border-bottom: 4px solid transparent; min-width: 0; }
.punteggio.turno { border-bottom-color: var(--sun); }
.punteggio.risponde { border-bottom-color: var(--mint); }
.punteggio .nome { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.punteggio .punti { font-family: var(--title); font-size: 24px; color: var(--sun); }
.punteggio .punti.negativo { color: var(--red); }
.punteggio.fuori .nome::after { content: " · offline"; color: var(--dim); font-weight: 400; }

.avviso { background: var(--sun); color: #2c2100; font-weight: 700; padding: 8px 14px; text-align: center; }

/* ---- classifica finale ---- */
.classifica { display: flex; flex-direction: column; gap: 8px; }
.classifica .riga-punti { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 10px; padding: 12px 16px; }
.classifica .riga-punti:first-child { background: var(--pink); }
.classifica .pos { font-family: var(--title); font-size: 26px; width: 34px; }
.classifica .nome { flex: 1; font-weight: 700; font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
.classifica .punti { font-family: var(--title); font-size: 26px; }

/* ---- schermo TV ---- */
.schermo { min-height: 100vh; display: flex; flex-direction: column; gap: 14px; padding: 2vh 2vw; }
.schermo .centro { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.schermo .tabellone { flex: 1; }
.schermo .indizio .testo { font-size: clamp(28px, 5vw, 72px); }
.ingresso { display: flex; align-items: center; justify-content: center; gap: 5vw; flex-wrap: wrap; }
.ingresso img { width: min(42vh, 80vw); background: #fff; border-radius: 12px; }
.ingresso .codice { font-size: clamp(40px, 8vw, 96px); color: var(--sun); }

/* ---- conduttore ---- */
.giocatore-riga { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--panel-2); }
.giocatore-riga .nome { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; }
.punto.su { background: var(--mint); }
.griglia-host { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.tipizzata { background: var(--panel-2); border-radius: 10px; padding: 10px 14px; font-size: 20px; font-weight: 700; }

/* ---- editor ---- */
.round-editor { display: flex; flex-direction: column; gap: 12px; }
.cat-editor { background: var(--panel); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.domanda { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.lista-tabelloni { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 760px) {
  .griglia-host { grid-template-columns: minmax(0, 1fr); }
  .domanda { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .domanda textarea.risposta { grid-column: 1 / -1; }
}

/* Sul telefono l'indizio lascia spazio al pulsante. */
.stretta .indizio { padding: 14px 16px; }
.stretta .indizio .testo { font-size: clamp(18px, 5.4vw, 26px); }
.stretta .pulsante { min-height: 38vh; }
.pagina .ingresso img { width: 220px; }
.pagina .ingresso .codice { font-size: 44px; }

/* ---- finestra nuova partita ---- */
.finestra { background: var(--panel); color: var(--text); border: 0; border-radius: 16px; padding: 20px; width: min(460px, calc(100vw - 32px)); }
.finestra::backdrop { background: rgb(0 0 0 / .65); }
.scelta { flex-direction: row; align-items: flex-start; gap: 10px; background: var(--panel-2); border-radius: 10px; padding: 12px; color: var(--text); cursor: pointer; }
.scelta input { width: auto; margin-top: 3px; accent-color: var(--pink); }
.scelta span { display: flex; flex-direction: column; font-weight: 400; }
[hidden] { display: none !important; }
.piccolo { font-size: 13px; }
details { color: var(--dim); }
summary { cursor: pointer; font-weight: 700; color: var(--text); }
details p { margin-top: 8px; }
.turno-di { font-family: var(--title); font-size: 22px; }
.turno-di.mio { color: var(--mint); }
.badge { font: 12px ui-monospace, Consolas, monospace; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--dim); }
.badge.public { background: var(--mint); color: #08261d; }
.badge.link { background: var(--sun); color: #2c2100; }
.qr { width: 200px; background: #fff; border-radius: 10px; margin-top: 12px; }

/* ---- immagini delle domande ---- */
.immagine-domanda { display: block; max-width: 100%; max-height: 42vh; margin: 12px auto 0; border-radius: 10px; object-fit: contain; }
.schermo .immagine-domanda { max-height: 52vh; }
.scegli-immagine { grid-column: 2 / -2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.scegli-immagine .immagine-domanda { max-height: 96px; margin: 0; }
.nascosto { position: absolute; width: 1px; height: 1px; opacity: 0; }
label.bottone { flex-direction: row; cursor: pointer; position: relative; }
label.bottone.piccolo { min-height: 34px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
label.bottone:focus-within { outline: 2px solid var(--sun); }
@media (max-width: 720px) { .scegli-immagine { grid-column: 1 / -1; } }

/* ---- PC: tastiera e mouse ---- */
.solo-pc { display: none; }
@media (hover: hover) and (pointer: fine) {
  .solo-pc { display: block; }
  .casella:not(:disabled):not(.usata):hover { background: var(--sun); color: #2c2100; filter: none; }
}

/* ---- PC: schermo largo ---- */
@media (min-width: 900px) {
  .pagina { max-width: 1280px; padding: 24px; }
  .griglia-host { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
  .lista-tabelloni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .lista-tabelloni > p { grid-column: 1 / -1; }

  /* Home: titolo e regole a sinistra, ingresso a destra. */
  .stretta.home {
    max-width: 1080px; padding: 32px;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 28px 72px; align-content: center;
  }
  .home > div:first-child { grid-column: 1; grid-row: 1; }
  .home > details { grid-column: 1; grid-row: 2; }
  .home > p { grid-column: 1; grid-row: 3; }
  .home > form { grid-column: 2; grid-row: 1; align-self: center; }
  .home > .riga { grid-column: 2; grid-row: 2; align-self: start; }

  /* Partita: gioco al centro, punteggi di lato, tutta l'altezza. */
  .stretta.partita {
    max-width: 1400px; min-height: 100vh; padding: 20px 32px;
    display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto minmax(0, 1fr);
    gap: 14px 24px;
  }
  .partita > .riga { grid-column: 1 / -1; }
  .partita > #gioco { grid-column: 1; grid-row: 2; }
  .partita > #punteggi { grid-column: 2; grid-row: 2; }
  .partita:has(#punteggi:empty) { grid-template-columns: minmax(0, 1fr); }
  .partita:has(#punteggi:empty) > #gioco { grid-column: 1; }
  .partita .punteggi { flex-direction: column; }
  .partita .punteggio { flex: none; padding: 12px 16px; }
  .partita .punteggio .nome { font-size: 16px; }
  .partita .punteggio .punti { font-size: 32px; }
  .partita .tabellone { min-height: calc(100vh - 215px); }
  .partita .casella { font-size: clamp(24px, 3vw, 44px); }
  .partita .categoria { font-size: clamp(14px, 1.5vw, 22px); }
  .partita .indizio { padding: clamp(24px, 4vh, 52px); }
  .partita .indizio .testo { font-size: clamp(26px, 2.8vw, 44px); }
  .partita .immagine-domanda { max-height: 44vh; }
  .partita .pulsante { min-height: 30vh; font-size: 64px; }
  .partita #gioco form { width: min(520px, 100%); margin-inline: auto; }
  .partita #gioco > .colonna > button, .partita #gioco > button { align-self: center; min-width: 280px; }
}