/* =========================================================================
   POTOS — « Sans limite » : carte « joueur absent » (js/attente.js), commune à tous les jeux en ligne.
   Charte « Soirée jeux » §5 : jetons seulement (aucune couleur en dur), Fredoka / Space Grotesk, une carte posée
   (surface, filet coloré à gauche comme un toast), apparition en transform / opacity uniquement (docs/fluidite.md).
   Sous les toasts (z 88) et les fenêtres (règles z 96), au-dessus des plateaux. En haut, sous l'en-tête du jeu.
   ========================================================================= */
.attente {
  position: fixed; z-index: 86; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 54px);
  width: min(calc(100vw - 24px), 440px); translate: -50% 0;
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px;
  color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-left: 4px solid var(--accent);
  border-radius: var(--r-md); box-shadow: var(--ombre-3);
  font-family: var(--font-ui); contain: layout paint;
  animation: attente-in .32s var(--ease-out, ease-out) both;
}
.attente[hidden] { display: none; }
.attente.is-pilote { border-left-color: var(--warn); }
.attente.is-moi { border-left-color: var(--accent-2); }
.attente .at-txt { flex: 1 1 auto; min-width: 0; margin: 0; display: grid; gap: 2px; }
.attente .at-txt b { font-family: var(--font-display); font-weight: 600; font-size: .98rem; line-height: 1.2; }
.attente .at-txt small { font-size: .78rem; line-height: 1.3; color: var(--muted); }
.attente .at-btn { flex: 0 0 auto; min-height: var(--tap, 44px); white-space: nowrap; }
@keyframes attente-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) {
  .attente { flex-wrap: wrap; }
  .attente .at-btn { flex: 1 1 100%; }
}
/* Paysage bas (téléphone couché) : à droite sous l’en-tête (au-dessus de ma zone), plus étroite : la table et les boutons
   « Règles », vocal et son restent visibles */
@media (max-height: 500px) and (orientation: landscape) {
  .attente { top: calc(max(8px, env(safe-area-inset-top)) + 50px); left: auto; right: max(8px, env(safe-area-inset-right)); translate: none; width: min(46vw, 380px); }
}
@media (prefers-reduced-motion: reduce) { .attente { animation: none; } }
html.perf-lite .attente { animation: none; box-shadow: var(--ombre-2); }

/* Pause lecture (Lot 10, js/theme.js Potos.Lecture) : « ⏸️ Ton chrono est en pause pendant que tu lis ».
   Dans la fenêtre des règles (.regles-pause), sinon pastille au-dessus de l’aide de Dernière carte ! et du tutoriel. */
.regles-pause {
  margin: 0 0 10px; padding: 8px 10px; border-radius: var(--r-sm, 8px);
  font-family: var(--font-ui); font-size: .84rem; line-height: 1.35; font-weight: 600;
  color: var(--ok-text, var(--text)); background: rgb(var(--ok-rgb) / .12); border: 1px solid rgb(var(--ok-rgb) / .35);
}
.regles-pause[hidden], .lecture-pause[hidden] { display: none; }
.lecture-pause {
  position: fixed; z-index: 99; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 8px); translate: -50% 0;
  width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 8px 14px;
  font-family: var(--font-ui); font-size: .84rem; font-weight: 600; line-height: 1.3; text-align: center;
  color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-left: 4px solid var(--ok);
  border-radius: var(--r-pill, 999px); box-shadow: var(--ombre-3); pointer-events: none; contain: layout paint;
  animation: attente-in .32s var(--ease-out, ease-out) both;
}
/* « 📖 Léa lit les règles : son chrono est en pause » (les autres) : en haut, comme la carte du joueur absent, sous les fenêtres */
.lecture-pause.is-autre { z-index: 86; top: calc(max(12px, env(safe-area-inset-top)) + 54px); bottom: auto; border-left-color: var(--accent); }
@media (max-height: 500px) and (orientation: landscape) {
  .lecture-pause.is-autre { top: calc(max(8px, env(safe-area-inset-top)) + 50px); left: auto; right: max(8px, env(safe-area-inset-right)); translate: none; max-width: min(46vw, 380px); }
}
@media (prefers-reduced-motion: reduce) { .lecture-pause { animation: none; } }
html.perf-lite .lecture-pause { animation: none; box-shadow: var(--ombre-2); }