/* Animazione Errore Nome Doppio */
.shake-error {
    animation: shake-input 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake-input {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

body { 
    justify-content: center; 
    padding: 1rem; 
}
.mobile-container { 
    width: 100%; 
    max-width: 450px; 
    margin: 0 auto; 
    text-align: center; 
}
/* Un piccolo loader animato per l'attesa */
.loader { font-size: 3rem; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }

/* =================================================================
   TIMER CIRCOLARE DI AVVISO INATTIVITÀ (in alto a destra)
   Riusa lo stesso "motore" visivo del timer di gioco di Host/Monitor
   (.timer-circle/.timer-text/.shake-animation, definiti in host.css):
   stesso cerchio SVG (r=65, stroke-dasharray 408), stesso tremolio e
   stesso passaggio al rosso negli ultimi 5 secondi. Qui è solo più
   piccolo e ancorato all'angolo, dato che è un avviso e non l'evento
   principale della schermata.
   ================================================================= */
#inactivity-warning-timer {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 80px;
    height: 80px;
    z-index: 9998;
}

.timer-circle { transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s linear, stroke 0.5s; stroke-dasharray: 408; stroke-dashoffset: 0; }
.timer-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: 900; }
.shake-animation { animation: shake-it 0.3s infinite; }
@keyframes shake-it {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    25% { transform: translate(-1px, -2px) rotate(-1deg); }
    50% { transform: translate(-3px, 0px) rotate(1deg); }
    75% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(2px, -1px) rotate(1deg); }
}

/* Classifica finale sul telefono: con tante persone in partita (es. 100+)
   la lista cresceva senza limite e allungava a dismisura la schermata di
   fine partita sul telefono. Stesso pattern usato per #leaderboard-list /
   #final-leaderboard-list in host.css: altezza massima + scrollbar interna. */
#player-final-leaderboard {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
}