/* L'ecran de chargement du match : l'affiche du duel (maquette de Frederic
   du 15/09). Tout se regle en hauteur d'ecran (vh) : l'affiche garde ses
   proportions de l'ordinateur au telephone couche. La photo de l'arene est
   posee en fond par js/ui/chargement.js. */

#loading.chargement {
  padding: 0;
  overflow: hidden;
  display: block;
  background-color: #0b1a4a;
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Montserrat', var(--font);
  --lettrage: 'Lilita One', 'Arial Rounded MT Bold', 'Segoe UI Black', var(--font);
}

/* Un voile bleu nuit : le haut et le bas assombris pour que le logo, les
   plaques et la barre se lisent sur n'importe quelle photo. */
.ch-voile {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 50% 42%, rgba(30, 70, 190, 0) 0%, rgba(12, 28, 90, 0.35) 100%),
    linear-gradient(180deg, rgba(10, 24, 80, 0.55) 0%, rgba(10, 24, 80, 0.1) 32%, rgba(10, 24, 80, 0.15) 60%, rgba(6, 14, 48, 0.88) 100%);
}

/* Les deux joueurs, en pied, face a face. */
.ch-joueur {
  position: absolute;
  bottom: 0;
  height: 86vh;
  max-width: 34vw;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 1.2vh 1.6vh rgba(0, 0, 0, 0.45));
  animation: ch-entree 0.5s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
/* Rapproches du VS (Frederic, 15/09) : le bord interieur de chaque joueur
   s'arrete pres du VS, quelle que soit la largeur de l'ecran — le VS et les
   joueurs se mesurent en hauteur d'ecran, le centre en largeur. */
.ch-joueur-g { left: calc(50vw - 66vh); }
.ch-joueur-d { right: calc(50vw - 66vh); animation-name: ch-entree-d; }
/* Joueur sans dessin : son portrait, dans un medaillon. */
.ch-joueur.medaillon {
  height: 34vh;
  bottom: 30vh;
  border-radius: 50%;
  border: 0.6vh solid #fff;
}
@keyframes ch-entree { from { transform: translateX(-12vw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ch-entree-d { from { transform: translateX(12vw); opacity: 0; } to { transform: none; opacity: 1; } }

.ch-logo {
  position: absolute;
  top: 2vh; left: 50%;
  height: 27vh;
  transform: translateX(-50%);
  filter: drop-shadow(0 0.8vh 1.4vh rgba(0, 0, 0, 0.4));
}
.ch-vs {
  position: absolute;
  top: 34vh; left: 50%;
  height: 23vh;
  transform: translateX(-50%);
  filter: drop-shadow(0 0.8vh 1.6vh rgba(0, 0, 0, 0.45));
  animation: ch-vs 1.6s ease-in-out infinite;
}
@keyframes ch-vs {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
}

/* Les plaques des joueurs : bleue a gauche, rouge a droite. */
.ch-plaque {
  position: absolute;
  bottom: 9vh;
  display: flex;
  align-items: center;
  gap: 1.4vw;
  padding: 1vh 2.2vw 1vh 1vh;
  border-radius: 99vh;
  border: 0.45vh solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.35), inset 0 -0.8vh 0 rgba(0, 0, 0, 0.18);
}
.ch-plaque-g { left: 3vw; background: linear-gradient(180deg, #4fb2ff 0%, #1a5fe0 100%); }
.ch-plaque-d { right: 3vw; padding: 1vh 1vh 1vh 2.2vw; background: linear-gradient(180deg, #ff6b78 0%, #cc1a36 100%); }
/* Le drapeau garde ses proportions (3:2, celles des dessins) et se tient a
   distance de l'arrondi de la plaque : colle au bord, l'arrondi le rognait
   (Frederic, 15/09). Le liseré blanc est une bordure, pas une ombre. */
.ch-drapeau {
  flex: none;
  display: block;
  box-sizing: content-box;
  width: 9vh; height: 6vh;
  border: 0.45vh solid #fff;
  border-radius: 1.1vh;
  overflow: hidden;
  background: #fff;
}
.ch-plaque-g .ch-drapeau { margin-left: 1.6vh; }
.ch-plaque-d .ch-drapeau { margin-right: 1.6vh; }
.ch-drapeau svg { display: block; width: 100%; height: 100%; }
.ch-identite { display: flex; flex-direction: column; align-items: center; }
.ch-nom {
  font-family: var(--lettrage);
  font-weight: 400;
  font-size: 7vh;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  -webkit-text-stroke: 0.35vh #0a1c4e;
  paint-order: stroke fill;
  text-shadow: 0 0.5vh 0 #0a1c4e;
}
.ch-pays {
  margin-top: 0.6vh;
  padding: 0.2vh 1.4vw;
  border-radius: 99vh;
  background: rgba(10, 28, 78, 0.35);
  color: #fff;
  font-size: 2.2vh;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Au centre, en bas : l'arene, le chargement et la barre. */
.ch-centre {
  position: absolute;
  bottom: 3vh; left: 50%;
  width: min(34vw, 620px);
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
}
.ch-arene {
  display: inline-flex;
  align-items: center;
  gap: 0.8vw;
  margin: 0;
  padding: 0.9vh 2.4vw;
  border-radius: 99vh;
  background: linear-gradient(180deg, #2f7df7 0%, #1648b8 100%);
  border: 0.35vh solid rgba(190, 220, 255, 0.9);
  box-shadow: 0 0.8vh 1.6vh rgba(0, 0, 0, 0.35);
  font-weight: 800;
  font-size: 3.1vh;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ch-epingle { width: 3.2vh; height: 3.2vh; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ch-titre {
  margin: 1.6vh 0 1.2vh;
  font-weight: 800;
  font-size: 2.9vh;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.6);
}
.ch-barre {
  position: relative;
  height: 3.8vh;
  border-radius: 99vh;
  background: #0b1c52;
  border: 0.35vh solid rgba(150, 195, 255, 0.75);
  box-shadow: inset 0 0.5vh 1vh rgba(0, 0, 0, 0.45);
}
.ch-remplissage {
  width: 0;
  height: 100%;
  border-radius: 99vh;
  background: linear-gradient(90deg, #36c8ff 0%, #7ef0c0 55%, #ffd23a 100%);
  box-shadow: 0 0 1.4vh rgba(120, 220, 255, 0.7);
}
.ch-balle {
  position: absolute;
  top: 50%; left: 0;
  width: 4.8vh; height: 4.8vh;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #f1f1f1 45%, #c9c9c9 100%);
  box-shadow: 0 0 1.6vh rgba(255, 255, 255, 0.9);
}
.ch-conseil {
  margin: 1.4vh 0 0;
  font-weight: 800;
  font-size: 2.5vh;
  text-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.6);
}

/* Connexion lente : meme place que le conseil, en jaune (16/09). */
.ch-etat {
  margin: 1.4vh 0 0;
  font-weight: 800;
  font-size: 2.5vh;
  color: #ffd23a;
  text-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.7);
}

/* Reseau coupe : le message et deux boutons, au standard des panneaux
   (jaune pour l'action principale, bleu pour le menu). */
.ch-panne { margin: 1.4vh 0 0; }
.ch-panne-texte {
  margin: 0 0 1.2vh;
  font-weight: 800;
  font-size: max(2.4vh, 13px);
  text-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.7);
}
.ch-panne-boutons { display: flex; gap: max(1.6vh, 10px); justify-content: center; }
/* Au telephone couche, 6,4vh ne faisait que 23 px : trop petit pour un
   doigt. Au moins 44 px de haut. */
.ch-bouton {
  min-width: max(16vh, 110px);
  height: max(6.4vh, 44px);
  padding: 0 max(3vh, 16px);
  border: 0;
  border-radius: 99vh;
  font-family: var(--lettrage);
  font-size: max(2.9vh, 16px);
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.ch-bouton-jaune {
  background: linear-gradient(180deg, #ffe97a 0%, #ffc61f 55%, #f39c00 100%);
  box-shadow: inset 0 -0.6vh 0 rgba(160, 80, 0, 0.35), 0 0.6vh 0 #0a1a4a;
  color: #0f2360;
}
.ch-bouton-bleu {
  background: linear-gradient(180deg, #6fd3ff 0%, #2b9bff 50%, #1466e0 100%);
  box-shadow: inset 0 -0.6vh 0 rgba(0, 40, 120, 0.35), 0 0.6vh 0 #0a1a4a;
  color: #fff;
}