/* ===============================
   Passerelles Express (dossier bridge) – styles spécifiques
   =============================== */

.br-root {
  /* Barre commune (css/games.css) aux couleurs du port */
  --mg-jeu-largeur: 984px;
  --mgb-fond: radial-gradient(120% 160% at 0% 0%, rgba(110, 200, 255, 0.25), transparent 55%),
    linear-gradient(120deg, #0f2238, #28557e);
  --mgb-texte: #eaf4fc;
  --mgb-doux: #9fbfdb;
  --mgb-accent: #ffb347;
  --mgb-titre: linear-gradient(100deg, #8fd6ff, #ffffff 50%, #ffb347);
  --mg-fs-fond: radial-gradient(circle at 50% 40%, #28557e, #0f2238);
  --mg-bulle-fond: #0f2238;
  align-items: center;
}

.br-root,
.br-root * {
  font-family:
    "Outfit",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

/* Bouées : une par plongeon encore permis */
.br-misses {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}

.br-misses i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(#e8452c 0 25%, #fff 0 50%, #e8452c 0 75%, #fff 0);
  -webkit-mask: radial-gradient(circle, transparent 0 4px, #000 4.5px);
  mask: radial-gradient(circle, transparent 0 4px, #000 4.5px);
  transition:
    opacity 0.3s,
    transform 0.3s,
    filter 0.3s;
}

.br-misses i.perdu {
  opacity: 0.35;
  filter: grayscale(1);
  transform: scale(0.8);
}

.br-misses i.flash {
  animation: br-flash 0.6s ease-out;
}

@keyframes br-flash {
  0% {
    transform: scale(1.6);
  }
  100% {
    transform: scale(1);
  }
}

.br-canvas-wrap {
  position: relative;
}

#br-canvas {
  display: block;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(20, 50, 90, 0.35);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

/* ---------- Plein écran ---------- */
.br-root.mg-fs {
  justify-content: center;
  overflow: hidden;
  --mgc-fond: rgba(255, 255, 255, 0.08);
  --mgc-bord: rgba(255, 255, 255, 0.12);
  --mgc-texte: #dbe9f5;
}