/* Duel en ligne : ecrans d'attente et d'invitation, message, puce du delai.
   Les ecrans reprennent les couleurs du jeu (bleu nuit, dorure). */

.duel-ecran {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(3, 10, 32, 0.78);
  z-index: 60;
}
.duel-ecran.hidden { display: none; }

.duel-panneau {
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 22px 18px;
  border-radius: 20px;
  border: 2px solid #42d0ff;
  background: radial-gradient(ellipse at top, #115ce8, #061957);
  box-shadow: 0 0 36px rgba(8, 124, 255, 0.55);
  color: #fff;
  text-align: center;
}
.duel-titre { margin: 0 0 8px; font: 900 italic 1.6rem/1.1 var(--font, system-ui); color: #ffe238; text-transform: uppercase; }
.duel-texte { margin: 6px 0 12px; font-size: 1rem; line-height: 1.4; }
.duel-lien {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.35); font: 600 0.95rem/1.3 ui-monospace, monospace;
  word-break: break-all; -webkit-user-select: all; user-select: all;
}
/* Le code a dicter : gros, espace, lisible de loin sur un telephone. */
.duel-code {
  margin: 4px 0 10px; font: 900 2.6rem/1 ui-monospace, monospace;
  letter-spacing: 0.12em; color: #ffe238; -webkit-user-select: all; user-select: all;
}
/* Le champ de saisie reprend la taille du code affiche chez l'hote. */
.duel-saisie {
  width: calc(9.5ch + 32px); padding: 8px 12px; border: 2px solid #6addff; border-radius: 14px;
  background: rgba(0, 0, 0, 0.35); text-align: center;
}
.duel-saisie:focus { outline: none; border-color: #ffe238; }
.duel-statut { min-height: 1.3em; margin: 12px 0 10px; font-size: 0.95rem; color: #bfe6ff; }
.duel-boutons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.duel-bouton {
  min-height: 44px; padding: 10px 20px; border-radius: 999px; cursor: pointer;
  border: 2px solid #fff69b; font: 900 0.95rem/1 var(--font, system-ui); color: #0b153b;
  background: linear-gradient(#ffff90 0, #ffdf26 28%, #ffcb0e 70%, #eeac07);
}
/* WhatsApp et e-mail sont des liens <a> : sans cela ils sortent souligne,
   et le texte ne se centre pas dans la pastille. */
a.duel-bouton { display: inline-flex; align-items: center; text-decoration: none; }
.duel-bouton.fantome { background: transparent; color: #fff; border-color: #6addff; }
.duel-bouton:disabled { opacity: 0.45; cursor: default; }

.duel-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px;
  max-height: 46vh; overflow-y: auto; padding: 2px;
}
.duel-carte {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px;
  min-height: 44px; border-radius: 12px; cursor: pointer; color: #fff;
  border: 2px solid rgba(124, 224, 255, 0.35); background: rgba(4, 28, 104, 0.6);
  font: 800 0.72rem/1.1 var(--font, system-ui); text-transform: uppercase;
}
.duel-carte img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #074b9c; }
.duel-carte[aria-pressed="true"] { border-color: #ffe238; box-shadow: 0 0 14px rgba(255, 226, 56, 0.6); }

.duel-message { z-index: 80; }

/* Depart synchronise : bandeau d'attente, puis 3, 2, 1. Au-dessus de la
   presentation, sans capter les taps. */
.duel-depart { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; pointer-events: none; z-index: 60; }
.duel-depart p {
  margin: 16vh 0 0; padding: 10px 18px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font: 800 1.1rem/1.2 var(--font, system-ui);
}
.duel-depart.compte p {
  margin-top: 28vh; padding: 0; background: none; color: #ffe238;
  font: 900 italic 5rem/1 var(--font, system-ui); text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}
/* Fond sombre : en bouton fantome, le texte blanc se perdait sur l'arene. */
#duel-depart-quitter { pointer-events: auto; margin-top: 12px; background: rgba(0, 0, 0, 0.55); }
.duel-depart.compte #duel-depart-quitter { display: none; }

/* Bouton du menu, a cote de « Valider le duel ». */
.duel-confirm.duel-en-ligne { background: linear-gradient(#5fe1ff, #1286ff); color: #031a4a; }

/* Puce du delai, pendant la partie. */
.duel-puce {
  position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translate(-50%, 44px);
  padding: 3px 10px; border-radius: 999px; font: 700 12px/1.4 system-ui; color: #fff;
  background: rgba(0, 0, 0, 0.45); pointer-events: none;
}
.duel-puce.bon { color: #7dffa1; }
.duel-puce.moyen { color: #ffd166; }
.duel-puce.mauvais { color: #ff7a7a; }

/* En ligne : pas de pause (on ne fige pas l'autre telephone), pas d'arene
   suivante. La croix remplace la pause : sans elle, un joueur dont l'ami a
   disparu n'avait aucune sortie, l'ecran de pause portant le seul bouton
   « Menu principal ». */
#btn-abandon { display: none; }
body.en-ligne #btn-abandon { display: flex; }
body.en-ligne #btn-pause { display: none; }
/* Le plan nommait #btn-quit, qui appartient a l'ecran de pause ; les boutons de l'ecran de resultat sont btn-again, btn-next-scene et btn-result-menu. */
body.en-ligne #btn-next-scene { display: none; }
/* En ligne, le depart est donne par le compte a rebours : un tap ne saute rien. */
body.en-ligne .intro-skip { display: none; }

@media (max-height: 500px) and (orientation: landscape) {
  .duel-panneau { padding: 12px 16px 10px; }
  .duel-titre { font-size: 1.2rem; margin-bottom: 4px; }
  .duel-texte { margin: 4px 0 8px; font-size: 0.9rem; }
  .duel-code { font-size: 2rem; margin: 2px 0 6px; }
  .duel-grille { max-height: 38vh; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .duel-carte img { width: 40px; height: 40px; }
}

/* ---- Les messages du duel (Frederic, 17/09) ----------------------------
   Tout est a gauche, en colonne sous le bouton du super shot (Frederic,
   19/09 : « les info-bulles pour les phrases sous le power shot », puis
   « elle est toujours en haut a droite pendant les matchs ») : le bouton
   bulle juste dessous, centre sur lui ; le tiroir des phrases s'ouvre a sa
   droite, cale en bas de l'ecran ; les bulles recues tombent sous le
   bouton. En haut, sous les noms, elles couvraient le score.

   Le super shot est centre en hauteur au bord gauche : 72 px (css/style.css),
   64 px sur telephone couche (css/mobile.css). */
.btn-messages {
  position: absolute; z-index: 22;
  top: calc(50% + 36px + 10px); left: 26px; right: auto;
}
.btn-messages[hidden] { display: none; }

.messagerie {
  position: absolute; z-index: 23;
  left: calc(26px + 40px + 10px); right: auto; top: auto;
  bottom: max(8px, env(safe-area-inset-bottom));
  max-height: calc(100% - 16px); overflow-y: auto;
  width: min(330px, calc(100vw - 16px));
  padding: 10px;
  border-radius: 16px;
  border: 2px solid #42d0ff;
  background: rgba(6, 25, 87, 0.96);
  box-shadow: 0 0 26px rgba(8, 124, 255, 0.5);
  color: #fff;
}
.messagerie[hidden] { display: none; }
.messagerie-phrases { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.messagerie-phrase {
  padding: 8px 6px; border-radius: 12px; border: 1px solid rgba(106, 221, 255, 0.5);
  background: rgba(4, 16, 58, 0.9); color: #fff; font: 600 0.85rem/1.15 var(--font, system-ui);
  cursor: pointer;
}
.messagerie-phrase:active { background: #1160e0; }
.messagerie-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 8px; }
.messagerie-emoji {
  padding: 4px 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.08);
  font-size: 1.3rem; line-height: 1.2; cursor: pointer;
}
.messagerie-emoji:active { background: #1160e0; }
.messagerie-clavier { display: flex; gap: 6px; margin-top: 8px; }
.messagerie-saisie {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 12px;
  border: 2px solid #6addff; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 1rem;
}
.messagerie-saisie:disabled { opacity: 0.45; }
.messagerie-envoyer {
  flex: none; width: 40px; border-radius: 12px; border: 0;
  background: linear-gradient(180deg, #ffe97a, #f39c00); color: #0f2360; cursor: pointer;
}
.messagerie-envoyer:disabled { opacity: 0.45; }
.messagerie-aide { margin: 6px 2px 0; font-size: 0.8rem; color: #ffe238; }

.messagerie-flux {
  position: absolute; z-index: 21;
  /* Sous le bouton bulle (40 px), lui-meme 10 px sous le super shot : la
     pile ne deborde jamais du bas de l'ecran. La bulle la plus recente est
     en haut. */
  top: calc(50% + 36px + 10px + 40px + 8px); left: 10px;
  max-height: calc(50% - 36px - 10px - 40px - 8px - max(8px, env(safe-area-inset-bottom)));
  overflow: hidden;
  display: flex; flex-direction: column; gap: 5px;
  max-width: min(60vw, 380px);
  pointer-events: none;
}
.messagerie-bulle {
  padding: 6px 10px; border-radius: 14px;
  background: rgba(6, 25, 87, 0.86); border: 1px solid rgba(106, 221, 255, 0.55);
  color: #fff; font-size: 0.92rem; line-height: 1.25;
  animation: messagerie-entree 0.18s ease-out both;
}
.messagerie-bulle b { margin-right: 6px; color: #ffe238; font-weight: 800; }
.messagerie-bulle.moi { border-color: rgba(255, 226, 56, 0.55); }
.messagerie-bulle.partie { opacity: 0; transition: opacity 0.4s ease; }
@keyframes messagerie-entree { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* Telephone couche : super shot de 64 px, bouton bulle de 44 px, decales de
   la zone sure. Ces regles sont ICI et non dans css/mobile.css : charge
   avant ce fichier, il perdait contre les regles ci-dessus (meme poids) —
   c'est ce qui laissait le bouton en haut a droite. */
@media (max-height: 500px) and (orientation: landscape) {
  .btn-messages {
    top: calc(50% + 32px + 8px); left: calc(max(10px, env(safe-area-inset-left)) + 10px); right: auto;
  }
  .messagerie { left: calc(max(10px, env(safe-area-inset-left)) + 64px + 10px); }
  .messagerie-flux {
    top: calc(50% + 32px + 8px + 44px + 6px); left: max(10px, env(safe-area-inset-left));
    max-height: calc(50% - 32px - 8px - 44px - 6px - max(8px, env(safe-area-inset-bottom)));
  }
}

/* Match de tournoi (19/09) : l'adversaire est deja designe, il rejoint seul.
   Pas de code a donner, ni de lien a partager, ni d'invitation par ID. */
#duel-attente.mode-tournoi .duel-texte, #duel-attente.mode-tournoi #duel-code,
#duel-attente.mode-tournoi #duel-lien, #duel-attente.mode-tournoi .duel-boutons,
#duel-attente.mode-tournoi #inv-bloc { display: none !important; }