/* ═══════════════════════════════════════════════════════════════════════════
   Prompt Masters — la tablette d'équipe (session B)

   Les composants du prototype de Florent (style.css) qui ne servent qu'ici :
   choix de réponse, duel d'images, saisie de la lettre, buzzer, chargement
   « Matrix », pouvoirs, vote, Mashup. Le socle (couleurs, cartes, boutons,
   champs, scènes, chrono) est dans base.css, chargée avant.

   Une donnée qui change un style (la couleur de l'équipe, l'avancement d'un
   envoi) arrive par une variable CSS posée par equipe.js, jamais par style=.
   Cible : la Galaxy Tab A7 Lite de 2ISD (Chrome d'Android, 1340 × 800, entrée de
   gamme), en portrait comme en paysage ; Safari d'iPadOS 15 et plus reste servi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Chrome d'Android recharge la page quand on tire l'écran vers le bas : sur une
   tablette qu'on manipule à six, ce rechargement ne doit pas arriver par accident. */
html {
  overscroll-behavior-y: contain;
}

.wrap {
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* L'en-tête : marque, équipe et score, état de la connexion. */
.chip-equipe {
  color: var(--couleur, var(--cyan));
  border-color: var(--couleur, var(--line));
}

.statut-pouvoirs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 12px;
}

/* ── Connexion, mention, profil ───────────────────────────────────────────── */

.code-saisie {
  font-size: 30px;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.mention {
  margin: 12px 0;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
  background: rgba(8, 14, 38, .6);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.mention ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.mention li + li {
  margin-top: 6px;
}

.prenoms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.erreur-champ {
  margin: 8px 0 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--red-hi);
}

.membres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* Le choix FR/EN d'avant la soirée, sous le formulaire. base.css (S0) le dessine pour une
   souris ; sur la tablette, il se centre et prend la taille du doigt (44 px au moins). */
.langues {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.langues .chip {
  min-height: 44px;
  min-width: 96px;
  justify-content: center;
}

/* ── Réponses ─────────────────────────────────────────────────────────────── */

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.choices.deux {
  grid-template-columns: 1fr;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 16px;
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: 18px;
  text-align: left;
  color: var(--ink);
  background: rgba(20, 30, 70, .5);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.choice .k {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  border-radius: 8px;
}

.k.k0 { background: #1e9bff; }
.k.k1 { background: #b14dff; }
.k.k2 { background: #e83bff; }
.k.k3 { background: #37e0ff; color: #06112a; }
.k.k4 { background: #34e0a8; color: #06112a; }
.k.k5 { background: #ffb14d; color: #06112a; }

.choice.sel {
  border-color: var(--cyan);
  background: rgba(30, 80, 160, .35);
}

.choice.ok {
  border-color: var(--ok);
  background: rgba(52, 224, 168, .16);
}

.choice.ko {
  opacity: .35;
}

.choice:disabled {
  cursor: default;
}

/* Les réponses ne deviennent cliquables qu'à l'ouverture du chrono. */
.choices.attente .choice {
  opacity: .5;
}

.ab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.ab .stage {
  aspect-ratio: 4 / 3;
  border-width: 2px;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.ab .stage.sel { border-color: var(--cyan); box-shadow: 0 0 24px -6px var(--cyan); }
.ab .stage.ok { border-color: var(--ok); box-shadow: 0 0 24px -6px var(--ok); }
.ab .stage.ko { opacity: .4; }

.qimg {
  display: block;
  width: 100%;
  max-height: 34vh;
  margin-top: 12px;
  object-fit: contain;
  background: var(--scene);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.letterbox {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.letterbox .field {
  font-family: var(--police-titre);
  font-size: 24px;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
}

.resultat {
  margin: 14px 0 0;
  font-weight: 700;
  font-size: 21px;
}

.resultat .points {
  color: var(--ok);
}

.fact {
  margin-top: 14px;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1.45;
  color: #eaf0ff;
  background: rgba(30, 80, 160, .18);
  border-left: 3px solid var(--cyan);
  border-radius: 0 10px 10px 0;
}

.fact b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--police-titre);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cyan);
}

/* ── Pouvoirs ─────────────────────────────────────────────────────────────── */

.carte-pouvoir {
  margin-bottom: 12px;
  border-color: rgba(255, 209, 102, .5);
}

.carte-pouvoir .eyebrow {
  color: var(--gold);
}

.pbtn {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: left;
  color: var(--ink);
  background: rgba(60, 45, 0, .35);
  border: 1px solid rgba(255, 209, 102, .4);
  border-radius: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.pbtn .pt {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
}

.pbtn .pd {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--dim);
}

.cibles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.cibles .chip {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 15px;
  color: var(--couleur, var(--cyan));
  cursor: pointer;
}

/* ── Défis : photos, prompt, envoi ────────────────────────────────────────── */

.twin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Plafonnée : sur une tablette en paysage, le prompt et le bouton GO restent sous les yeux. */
.photo .stage {
  aspect-ratio: 3 / 2;
  max-height: 38vh;
}

.twin .photo .stage {
  aspect-ratio: 1 / 1;
}

.photo .stage span {
  padding: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--dim);
}

.photo .btn {
  width: 100%;
  margin-top: 8px;
}

/* Le champ fichier est caché ; c'est son <label> stylé en bouton qu'on touche. */
.photo input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.compteur {
  margin-top: 6px;
  font-size: 13px;
  color: var(--dim);
  text-align: right;
}

.envoi {
  height: 10px;
  margin-top: 12px;
  overflow: hidden;
  background: rgba(120, 150, 255, .16);
  border-radius: 99px;
}

.envoi i {
  display: block;
  width: var(--avance, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width .2s linear;
}

.chrono-defi {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 2px;
  text-align: center;
  margin: 8px 0 4px;
}

.chrono-defi.urgent {
  color: var(--red-hi);
  animation: pulse 1s ease-in-out infinite;
}

/* Le gros bouton rouge du prototype, pour GO et BUZZ. */
.buzzer {
  position: relative;
  display: block;
  width: 150px;
  height: 150px;
  margin: 16px auto 6px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 38% 30%, var(--red-hi), var(--red) 45%, #8a0a16 100%);
  box-shadow: 0 14px 0 -2px #4a0610, 0 22px 40px -10px rgba(255, 40, 60, .6),
    inset 0 -10px 20px rgba(0, 0, 0, .4), inset 0 8px 18px rgba(255, 180, 180, .45);
  transition: transform .08s;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.buzzer::before {
  content: "";
  position: absolute;
  inset: -18px;
  border: 2px solid rgba(255, 60, 80, .35);
  border-radius: 50%;
  animation: anneau 1.8s ease-out infinite;
}

@keyframes anneau {
  0% { transform: scale(.85); opacity: .8; }
  100% { transform: scale(1.25); opacity: 0; }
}

.buzzer span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 26px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.buzzer:active {
  transform: translateY(10px);
}

.buzzer:disabled {
  cursor: not-allowed;
  filter: grayscale(.7) brightness(.6);
}

.buzzer:disabled::before {
  display: none;
}

/* Le chargement « Matrix » du prototype. */
.matrix {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  margin-top: 14px;
  overflow: hidden;
  background: #020a06;
  border: 1px solid rgba(52, 224, 168, .35);
  border-radius: 12px;
}

.matrix canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.matrix .mtxt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  font-family: var(--police-code);
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
  color: #5cff9d;
  text-shadow: 0 0 10px #34e0a8;
  background: radial-gradient(ellipse at center, rgba(2, 10, 6, .55), rgba(2, 10, 6, .85));
}

.matrix .mtxt b {
  font-family: var(--police-titre);
  font-size: 16px;
  letter-spacing: 3px;
  color: #9dffc6;
}

.matrix .cur::after {
  content: "▌";
  animation: clignote .8s steps(1) infinite;
}

@keyframes clignote {
  50% { opacity: 0; }
}

/* ── Vote et Mashup ───────────────────────────────────────────────────────── */

.wownum {
  margin-top: 12px;
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 56px;
  text-align: center;
  color: transparent;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
}

.buylabel {
  margin-top: 6px;
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 20px;
  text-align: center;
}

.slider {
  width: 100%;
  height: 44px;
  accent-color: var(--magenta);
}

.candidats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.candidats .chip {
  min-height: 48px;
  padding: 10px 16px;
  font-size: 17px;
  cursor: pointer;
}

.mention-ia {
  margin-top: 8px;
  font-size: 13px;
  color: var(--dim);
}

/* ── Classement (podium) ──────────────────────────────────────────────────── */

.lb {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.lbrow {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(14, 22, 54, .5);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.lbrow.moi {
  border-color: var(--cyan);
  box-shadow: 0 0 18px -6px var(--cyan);
}

.lbrow .rk {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 16px;
  color: var(--dim);
}

.lbrow:nth-child(1) .rk { color: var(--gold); }
.lbrow:nth-child(2) .rk { color: #cfd8ff; }
.lbrow:nth-child(3) .rk { color: #e0a37a; }

.lbrow .nm {
  font-weight: 700;
  font-size: 16px;
  color: var(--couleur, var(--ink));
}

.lbrow .sc {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 15px;
  color: var(--cyan);
}

.place {
  font-family: var(--police-titre);
  font-weight: 900;
  font-size: 64px;
  text-align: center;
  margin: 10px 0;
}

/* ── Messages et confirmation ─────────────────────────────────────────────── */

.flash {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  left: 50%;
  z-index: 70;
  max-width: 90vw;
  padding: 12px 18px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: rgba(10, 16, 46, .95);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 50px -20px #000;
  transform: translateX(-50%);
  animation: rise .3s both;
}

.flash.erreur {
  color: var(--red-hi);
  border-color: rgba(255, 80, 100, .45);
}

.voile {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 8, 28, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.voile .card {
  width: 100%;
  max-width: 460px;
}

.connexion-etat {
  margin-left: 4px;
}