/* public/player/assets/css/player.css — interfaccia Player (smartphone, no-scroll) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800&family=Exo+2:wght@400;600&display=swap');

:root{
  --bg:#050810;
  --neon-cyan:#0ff0fc;
  --neon-pink:#ff2d8f;
  --neon-purple:#9d4dff;
  --neon-yellow:#ffe700;
  --text:#eafcff;
  --green:#3dffb0;
  --red:#ff4d6d;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
html,body{
  height:100vh;
  height:100dvh; /* tiene conto della barra degli strumenti dinamica dei browser mobili */
  overflow:hidden;
  overscroll-behavior:none;
}
body{
  background:radial-gradient(ellipse at top, #0c1424 0%, var(--bg) 70%);
  color:var(--text);font-family:'Exo 2',sans-serif;
  display:flex;flex-direction:column;
  padding:clamp(8px, 2vh, 20px) clamp(10px, 4vw, 20px);
}
h1,h2,h3{font-family:'Orbitron',sans-serif;}
.hidden{display:none !important;}
.screen{
  flex:1 1 auto;
  min-height:0; /* essenziale: permette al contenuto di restringersi invece di sforare */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(8px, 2vh, 16px);
  overflow:hidden;
  width:100%;
}

h1{font-size:clamp(1.2rem, 5vw, 1.6rem);}

/* Join */
#join input{width:100%;max-width:320px;padding:clamp(10px,3vh,16px);font-size:1.1rem;border-radius:12px;border:1px solid var(--neon-cyan);background:#0d1220;color:var(--text);text-align:center;margin-bottom:10px;}
#join button{width:100%;max-width:320px;padding:clamp(10px,3vh,16px);font-size:1.1rem;border-radius:12px;border:none;background:var(--neon-cyan);color:#001;font-weight:bold;font-family:'Orbitron';}
#join-error{color:var(--red);min-height:20px;font-size:0.9rem;}

/* Lobby */
#lobby .msg{font-size:clamp(1rem, 4vw, 1.3rem);}
#lobby .nome-giocatore{color:var(--neon-cyan);font-weight:bold;}

/* Domanda attiva (solo testo, mai media) */
#question-waiting .fase-label{color:var(--neon-purple);text-transform:uppercase;letter-spacing:0.1em;font-size:0.85rem;}
#question-text-player{font-size:clamp(1.1rem, 5vw, 1.5rem);font-weight:600;max-width:90vw;}
.countdown-player{font-size:clamp(1.8rem, 8vh, 2.4rem);font-family:'Orbitron';color:var(--neon-pink);line-height:1;}

/* Pulsantiera: 2 colonne fino a 4 opzioni, 3 colonne (più compatte in verticale) da 5 in su */
#pulsantiera{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(8px, 2vh, 14px);
  width:100%;
  max-width:460px;
  flex:0 1 auto;
}
#pulsantiera.cols-3{grid-template-columns:repeat(3, 1fr);max-width:520px;}
.answer-btn{
  padding:clamp(10px, 2.5vh, 28px) 6px;
  border-radius:14px;
  font-size:clamp(1.4rem, 6vh, 2.2rem);
  font-weight:800;font-family:'Orbitron';
  border:none;color:#fff;
  aspect-ratio:1.3 / 1;
  transition:transform 0.1s;
  display:flex;align-items:center;justify-content:center;
}
.answer-btn:active{transform:scale(0.95);}
.answer-btn.A{background:var(--answer-a);color:#001018;}
.answer-btn.B{background:var(--answer-b);color:#001018;}
.answer-btn.C{background:var(--answer-c);color:#001018;}
.answer-btn.D{background:var(--answer-d);color:#001018;}
.answer-btn.E{background:var(--answer-e);color:#001018;}
.answer-btn.F{background:var(--answer-f);color:#001018;}
.answer-btn:disabled{opacity:0.4;}
.answer-btn.selected{outline:4px solid #fff;}

/* Feedback */
#feedback .points{font-size:clamp(2rem, 10vh, 3rem);font-family:'Orbitron';}
#feedback .points.positive{color:var(--green);}
#feedback .points.negative{color:var(--red);}
#feedback .rank{font-size:1rem;color:#9fd;margin-top:6px;}

/* Mini classifica */
#mini-leaderboard-list{width:100%;max-width:400px;max-height:45vh;overflow-y:auto;}
.lb-row-player{display:flex;justify-content:space-between;padding:8px 14px;margin-bottom:6px;border-radius:10px;background:rgba(0,240,252,0.08);border:1px solid rgba(0,240,252,0.25);font-size:0.95rem;}
.lb-row-player.me{border-color:var(--neon-pink);background:rgba(255,45,143,0.15);}

/* Riconnessione */
#reconnect-banner-p{position:fixed;top:0;left:0;right:0;background:var(--neon-pink);color:#fff;text-align:center;padding:8px;font-weight:bold;z-index:100;font-size:0.85rem;}

/* Barra back + ricarica, sempre in basso al centro. "Back" (torna alla home)
   visibile solo nella schermata di join (PIN+nome); "Ricarica" sempre visibile. */
#player-nav{position:fixed;bottom:14px;left:0;right:0;z-index:90;display:flex;gap:10px;justify-content:center;align-items:center;}

#player-name-chip{
  position:fixed;top:10px;right:10px;z-index:90;
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(10,14,23,0.8);border:1px solid var(--neon-cyan);color:var(--neon-cyan);
  padding:6px 12px;border-radius:20px;font-family:'Exo 2',sans-serif;font-size:0.8rem;
  max-width:45vw;overflow:hidden;
}
#player-name-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#player-name-chip.hidden{display:none !important;}
#player-nav a{
  background:rgba(10,14,23,0.85);border:1px solid var(--neon-cyan);color:var(--neon-cyan);
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font-family:'Exo 2',sans-serif;font-size:1.15rem;
}
#nav-back.hidden{display:none !important;}

button.secondary-btn{margin-top:10px;background:transparent;border:1px solid var(--neon-cyan);color:var(--neon-cyan);padding:8px 18px;border-radius:10px;font-family:'Exo 2';font-size:0.9rem;}

.qz-brand-header img{max-height:clamp(24px, 6vh, 36px) !important;}

/* Su schermi molto bassi (landscape su telefoni piccoli), riduce ulteriormente gli ingombri */
@media (max-height: 480px){
  .qz-brand-header, #site-footer{display:none;}
  .countdown-player{font-size:1.4rem;}
  .answer-btn{aspect-ratio:2/1;font-size:1.2rem;}
}