/* =========================================================================
   POTOS — Menu ⋯ commun des jeux (js/menu-jeu.js) et « Masquer ses messages » (js/masque.js), lot 15.
   Charte « Soirée jeux » §5 : jetons seulement ; animations transform / opacity (docs/fluidite.md) ; aucune mesure :
   le menu se place en CSS sous la barre du haut, à droite.
   ========================================================================= */

/* ---------- Bouton ⋯ (fin de l'en-tête) et point rouge ---------- */
.menu-jeu-btn { position: relative; flex: 0 0 auto; }
.menu-jeu-btn > span { font-size: 1.35rem; line-height: 1; font-weight: 700; }
.mj-point {
  position: absolute; top: 5px; right: 5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--surface); pointer-events: none;
  animation: mj-point-in .3s var(--spring, ease-out) both;
}
.mj-point[hidden] { display: none; }
@keyframes mj-point-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
/* Le son de l'en-tête est replié dans le menu ⋯ (même place pour tous les jeux, titre jamais rogné) */
.mj-replie { display: none !important; }

/* ---------- Menu (popover sous l'en-tête, à droite) ---------- */
.mj-menu {
  position: fixed; z-index: 95; right: max(8px, env(safe-area-inset-right)); top: calc(max(8px, env(safe-area-inset-top)) + 52px);
  width: min(calc(100vw - 16px), 320px); padding: 6px; display: grid; gap: 2px;
  color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--ombre-3); font-family: var(--font-ui); contain: layout paint;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .16s ease, transform .18s var(--ease-out, ease-out);
}
.mj-menu[hidden] { display: none; }
.mj-menu.is-in { opacity: 1; transform: none; }
.mj-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap, 44px); padding: 8px 10px;
  text-align: left; color: var(--text); background: transparent; border: 0; border-radius: var(--r-md); cursor: pointer;
  font: 600 .95rem/1.2 var(--font-ui);
}
.mj-item:hover, .mj-item:focus-visible { background: var(--surface-3); }
.mj-item[aria-disabled="true"] { opacity: .7; }
.mj-item .mj-i { flex: 0 0 26px; font-size: 1.15rem; text-align: center; }
.mj-item .mj-l { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.mj-item small { font-weight: 500; font-size: .76rem; line-height: 1.25; color: var(--muted); }
.mj-item.is-alerte .mj-i { position: relative; }
.mj-item.is-alerte .mj-i::after { content: ''; position: absolute; top: -2px; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.mj-sw { flex: 0 0 auto; position: relative; width: 38px; height: 22px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--line-2); }
.mj-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .18s var(--ease-out, ease-out); }
.mj-sw.is-on { background: rgb(var(--ok-rgb) / .3); border-color: var(--ok); }
.mj-sw.is-on::after { transform: translateX(16px); background: var(--ok); }
.mj-vide { margin: 6px 10px; font-size: .88rem; color: var(--muted); }

/* ---------- Feuille « Masquer les messages » (glisse du bas au téléphone, centrée sur ordinateur) ---------- */
.mj-feuille { position: fixed; inset: 0; z-index: 97; display: flex; align-items: flex-end; justify-content: center; }
.mj-feuille .mjf-fond { position: absolute; inset: 0; background: rgb(var(--bg-rgb) / .62); opacity: 0; transition: opacity .25s ease; }
.mj-feuille .mjf-carte {
  position: relative; width: min(100vw, 480px); max-height: min(86vh, 620px); overflow: auto; overscroll-behavior: contain;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 12px;
  color: var(--text); background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--ombre-3);
  font-family: var(--font-ui); transform: translateY(100%); transition: transform .26s var(--ease-out, ease-out);
}
.mj-feuille.is-open .mjf-fond { opacity: 1; }
.mj-feuille.is-open .mjf-carte { transform: none; }
.mj-feuille .mjf-poignee { justify-self: center; width: 44px; height: 5px; border-radius: 99px; background: var(--line-2); }
.mj-feuille h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.mj-feuille .mjf-regle { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--muted); }
.mj-feuille .mjf-liste { display: grid; gap: 8px; }
.mj-feuille .mjf-joueur { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.mj-feuille .mjf-joueur > b { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; min-width: 0; overflow-wrap: anywhere; }
.mj-feuille .mjf-joueur.is-on > b { color: var(--muted); }
.mj-feuille .mjf-joueur .btn { flex: 0 0 auto; min-height: var(--tap, 44px); }
.mj-feuille .mjf-vide { margin: 0; color: var(--muted); }
@media (min-width: 700px) {
  .mj-feuille { align-items: center; }
  .mj-feuille .mjf-carte { border-radius: var(--r-xl); transform: translateY(16px); opacity: 0; transition: transform .22s var(--ease-out, ease-out), opacity .22s ease; }
  .mj-feuille.is-open .mjf-carte { opacity: 1; }
  .mj-feuille .mjf-poignee { display: none; }
}

/* ---------- Salon : bouton 🙈 sur la carte d'un joueur, bulles masquées ---------- */
.masque-btn {
  position: absolute; z-index: 2; top: 38%; right: -9px; display: grid; place-items: center; /* bord droit : coins = exclure (hôte) et prêt */
  width: 28px; height: 28px; font-size: 13px; line-height: 1; cursor: pointer;
  color: var(--text); background: var(--surface-2); border: 2px solid var(--bg); border-radius: 50%;
  box-shadow: var(--ombre-1); opacity: .8;
}
.masque-btn::before { content: ''; position: absolute; inset: -8px; } /* zone tactile ≈ 44 px */
.masque-btn.is-on { opacity: 1; background: var(--surface-3); border-color: var(--danger); }
@media (hover: hover) {
  .masque-btn:not(.is-on) { opacity: 0; }
  #players > li:hover .masque-btn, .masque-btn:focus-visible { opacity: 1; }
}
#chat-log .msg.is-masque { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mj-point { animation: none; }
  .mj-menu, .mj-sw::after, .mj-feuille .mjf-carte, .mj-feuille .mjf-fond { transition: none; }
}
html.perf-lite .mj-menu { box-shadow: var(--ombre-2); }