/* Les tournois en ligne (19/09) : choisir 4 ou 8, puis la salle avec le
   tableau. Le fond, les cartes, le bouton jaune et le rond retour viennent
   de css/profil.css (.pf-*) ; le tableau reprend l'esprit du Pawn Trophy. */

#tournoi.screen { display: block; padding: 0; overflow: hidden; }
.to-page [hidden] { display: none !important; }

.to-vue { position: absolute; inset: 0; box-sizing: border-box; }
.to-vue[data-vue="choix"] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh;
  padding: 16vh 4vw 8vh;
}
.to-choix { display: flex; gap: 4vw; height: 46vh; }
.to-choix .pf-carte { flex: 0 0 22vw; }
.to-nombre { font-family: var(--lettrage); font-weight: 400; font-size: 18vh; line-height: 1; color: #ffd34d; }

/* ---- La salle : le tableau a gauche, les commandes a droite ---- */
.to-tableau {
  position: absolute; left: 3vw; top: 15vh; bottom: 6vh; right: 45vw;
  display: flex; gap: 1.6vw; align-items: stretch; overflow-x: auto;
}
.to-colonne { flex: 1 1 0; min-width: 16vw; display: flex; flex-direction: column; gap: 1.2vh; }
.to-matchs { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 1.2vh; }
.to-colonne h3 {
  margin: 0; text-align: center;
  font: 800 max(2vh, 10px)/1 'Montserrat', var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: #9fc3ff;
}
.to-match {
  border-radius: 1.4vh; overflow: hidden;
  background: rgba(3, 10, 34, 0.85); border: 0.3vh solid rgba(110, 215, 255, 0.45);
}
.to-match.en-cours { border-color: #ffd34d; box-shadow: 0 0 1.6vh rgba(255, 211, 77, 0.5); }
.to-joueur {
  display: flex; align-items: center; gap: 0.8vw; padding: 0.7vh 0.8vw; min-height: 4.6vh;
  font: 700 max(2.4vh, 11px)/1.1 'Montserrat', var(--font); color: #fff;
}
.to-joueur + .to-joueur { border-top: 0.2vh solid rgba(110, 215, 255, 0.2); }
.to-joueur img { width: 4vh; height: 4vh; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.to-joueur .to-drapeau svg { display: block; width: 3vh; height: 2vh; border-radius: 0.3vh; }
.to-joueur b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-joueur.gagnant b { color: #ffe38a; }
.to-joueur.perdant { opacity: 0.45; }
.to-joueur.vide { color: #7f94b8; font-weight: 600; }

.to-vainqueur {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vh;
  color: #ffd34d;
}
.to-vainqueur > svg { width: 12vh; height: 12vh; filter: drop-shadow(0 0 2vh rgba(255, 211, 77, 0.6)); }

.to-cote {
  position: absolute; right: 3vw; top: 15vh; width: 40vw; bottom: 25vh;
  display: flex; flex-direction: column; gap: 1.6vh; overflow-y: auto;
}
.to-message {
  margin: 0; font: 800 max(3vh, 12px)/1.3 'Montserrat', var(--font); color: #ffe38a;
}
.to-inviter .inv-champ { width: 100%; max-width: none; }
.to-inviter .inv-ligne { gap: 0.8vw; }
.to-erreur { position: absolute; left: 3vw; right: 38vw; bottom: 1vh; margin: 0 auto; max-width: none; }

/* Telephone debout : tout en colonne. */
@media (max-aspect-ratio: 1/1) {
  .to-choix { flex-direction: column; height: auto; }
  .to-choix .pf-carte { flex-basis: 20vh; width: 60vw; }
  .to-tableau { position: static; margin: 14vh 4vw 0; }
  .to-cote { position: static; width: auto; margin: 2vh 4vw 16vh; }
}