/* ============================================================================
   JoeQUIZ · telefono del giocatore.
   Verticale, una mano sola. Le azioni stanno nei due terzi bassi, a portata di
   pollice; la barra del tempo e' appesa in cima, dove non la copre nulla.
   Verificato a 360px e a 430px.
   ============================================================================ */

.jq-telefono {
  min-height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.jq-schermata {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
}
.jq-schermata[hidden] { display: none; }

/* Ingresso e attesa respirano dal basso: il pulsante deve stare sotto il pollice,
   non a meta' schermo. */
.jq-schermata[data-schermata="ingresso"] > .jq-bottone,
.jq-schermata[data-schermata="ingresso"] > .jq-secondario { margin-top: auto; }
.jq-schermata[data-schermata="ingresso"] > .jq-secondario { margin-top: 4px; }

.jq-aiuto      { color: var(--muted-ink); font-size: 0.9rem; margin: 0; }
.jq-secondario { color: var(--azzurro); text-align: center; text-decoration: none;
                 font-weight: 700; padding: 10px; }

.jq-codice { margin: 0 0 8px; }

.jq-testata { display: flex; justify-content: space-between; align-items: baseline; }

/* La domanda qui e' un PROMEMORIA: il posto dove si legge e' il display, se c'e'.
   Tre righe al massimo, cosi' le quattro risposte restano sempre visibili senza
   scorrere — e su un gioco a tempo scorrere e' un modo di perdere. */
.jq-domanda {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 4.6vw, 1.5rem);
  line-height: 1.22;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Le risposte occupano i due terzi bassi. */
.jq-schermata[data-schermata="domanda"] .jq-risposte { margin-top: auto; }

.jq-risposta__lettera { opacity: 0.7; font-size: 0.85rem; }
.jq-risposta__testo   { flex: 1 1 auto; }

.jq-attesa { text-align: center; color: var(--muted-ink); margin: 0; }

/* L'esito si legge in un secondo, a colpo d'occhio. */
.jq-schermata[data-schermata="esito"] { justify-content: center; text-align: center; }
.jq-schermata[data-schermata="esito"] h1 { font-size: clamp(2.2rem, 12vw, 3.4rem); margin: 0; }
.jq-punti { font-size: clamp(1.6rem, 9vw, 2.4rem); color: var(--azzurro); margin: 0; }

.jq-elenco, .jq-classifica { display: flex; flex-direction: column; gap: 8px; }

.jq-schermata[data-schermata="disconnesso"] { justify-content: center; text-align: center; }
.jq-schermata[data-schermata="disconnesso"] .jq-bottone { margin-top: 18px; }

/* La barra del tempo e' a filo del bordo superiore: niente margini, niente angoli. */
.jq-schermata[data-schermata="domanda"] > .jq-bar {
  margin: 0 -18px 6px;
  width: calc(100% + 36px);
}

@media (max-height: 680px) {
  .jq-schermata { gap: 10px; padding-top: 14px; }
  .jq-risposta  { min-height: 64px; }
}

/* ------------------------------------------------------------- P6 · menu laterale */

/* Il tasto sta in alto a destra, fuori dai due terzi bassi: non deve capitare di
   aprirlo mentre si cerca di rispondere. */
.jq-menu-tasto {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 30;
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: color-mix(in oklch, var(--ink-soft) 90%, transparent);
  color: var(--paper); font-size: 1.1rem; cursor: pointer;
}

.jq-menu { position: fixed; inset: 0; z-index: 40; }
.jq-menu[hidden] { display: none; }
.jq-menu__fondo { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.jq-menu__pannello {
  position: absolute; inset: 0 0 0 auto; width: min(400px, 88vw);
  background: var(--ink); padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  animation: jq-entra 180ms ease-out;
}
@keyframes jq-entra { from { transform: translateX(100%); } to { transform: none; } }

.jq-menu__chiudi { align-self: flex-end; width: 40px; height: 40px; border: none;
                   background: transparent; color: var(--paper); font-size: 1.1rem; cursor: pointer; }

/* -------------------------------------------------------------- P8 · il MOMENTO */

/* Prende tutto lo schermo e blocca l'input: e' un fatto condiviso, non una notifica.
   Lo toglie il server (o il timeout), non il giocatore — se si potesse chiudere non
   sarebbe piu' un momento comune. */
.jq-momento {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 10px; padding: 24px; text-align: center;
  background: var(--ink);
  animation: jq-momento-entra 260ms ease-out;
}
.jq-momento[hidden] { display: none; }
.jq-momento h1 { margin: 0; font-size: clamp(2rem, 10vw, 3rem); line-height: 1.05; }
.jq-momento__riga { font-family: var(--font-mono); font-size: 1.6rem; color: var(--flame); margin: 0; }

@keyframes jq-momento-entra { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

.jq-schermata[data-schermata="pronti"] { justify-content: center; text-align: center; }
.jq-schermata[data-schermata="pronti"] .jq-bottone { margin-top: 18px; }

/* La foto facoltativa: stesso cerchio per la foto e per le iniziali, cosi' saltarla non
   lascia un buco ma un'alternativa. */
.jq-foto { display: flex; align-items: center; gap: 14px; }
.jq-foto__cerchio {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azzurro) center/cover no-repeat; color: var(--ink);
  font-family: var(--font-mono); font-weight: 700; font-size: 1.3rem;
}

/* ------------------------------------------------- V1 · slider numerico */

.jq-input-numero { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.jq-numero-grande { font-size: clamp(2.6rem, 16vw, 4rem); text-align: center; margin: 0;
                    color: var(--azzurro); line-height: 1; }
.jq-input-numero .jq-etichetta { text-align: center; }

/* Il pollice deve poterlo usare senza guardare: la maniglia e' grande. */
.jq-slider { width: 100%; height: 44px; -webkit-appearance: none; appearance: none;
             background: transparent; }
.jq-slider::-webkit-slider-runnable-track { height: 10px; background: var(--ink-soft); }
.jq-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px;
                                   margin-top: -15px; border-radius: 50%;
                                   background: var(--azzurro); cursor: pointer; }
.jq-slider::-moz-range-track { height: 10px; background: var(--ink-soft); }
.jq-slider::-moz-range-thumb { width: 40px; height: 40px; border: none; border-radius: 50%;
                               background: var(--azzurro); }

.jq-estremi { display: flex; justify-content: space-between; color: var(--muted-ink);
              font-size: 0.85rem; }

/* ------------------------------------------------- V2 · ordinamento */

.jq-input-ordine { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.jq-ordine { list-style: none; margin: 0; padding: 0; display: flex;
             flex-direction: column; gap: 8px; counter-reset: pos; }
.jq-ordine__riga { display: flex; align-items: center; gap: 10px;
                   background: var(--ink-soft); border-radius: var(--radius); padding: 10px 12px; }
.jq-ordine__riga::before { counter-increment: pos; content: counter(pos);
                           font-family: var(--font-mono); color: var(--muted-ink);
                           width: 20px; flex: 0 0 auto; }
.jq-ordine__nome { flex: 1 1 auto; font-weight: 700; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.jq-ordine__frecce { display: flex; gap: 6px; flex: 0 0 auto; }

/* Bersagli grandi: le frecce sono il percorso principale, non un ripiego per il drag. */
.jq-freccia { width: 44px; height: 44px; border: none; border-radius: 10px;
              background: var(--ink); color: var(--paper); font-size: 0.9rem; cursor: pointer; }
.jq-freccia:disabled { opacity: 0.35; }

/* ------------------------------------------------- V3 · testo libero */

.jq-input-testo { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }

/* Le cinque parole restano sopra il campo anche con la tastiera aperta: sono
   l'indovinello, toglierle mentre si scrive sarebbe come nascondere la domanda. */
.jq-parole { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.jq-parola { background: var(--ink-soft); border-radius: 10px; padding: 10px 14px;
             font-family: var(--font-display); font-size: 1.05rem; }