/* app/manette-distante.css — le téléphone du joueur 2 (app/manette-distante.js) : l'écran de J1 (miroir.html) à
   l'échelle, les pouces invisibles par-dessus, et seulement hors partie (menus, pause), son état et Quitter, dans un
   coin où l'écran de J1 n'a rien (sinon caché) ; le retour du téléphone l'ouvre au milieu, sur un voile. */
.md { position: fixed; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; background: #000; overflow: hidden; }
.md-ecran { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #07060f; opacity: 0; transition: opacity .25s; }
.md-vu .md-ecran { opacity: 1; }
.md-moitie { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; }
.md-moitie.g { left: 0; }
.md-moitie.d { right: 0; }
.md-charge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; max-width: 30em; padding: 0 20px; box-sizing: border-box; text-align: center; color: #b4c0dc; font: 15px/1.45 system-ui, sans-serif; pointer-events: none; z-index: 2; }
.md-vu .md-charge { display: none; }
.md-bas { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); z-index: 3; display: none; align-items: center; gap: 8px; padding: 3px 3px 3px 10px; border-radius: 999px; background: rgba(10, 10, 24, .82); border: 1px solid rgba(255, 154, 60, .45); font: 13px/1.2 system-ui, sans-serif; color: #b4c0dc; }
.md-menus .md-bas, .md:not(.md-vu) .md-bas, .md-demande .md-bas { display: flex; }
.md-menus .md-bas[style*="left"] { right: auto; bottom: auto; }
.md-bas.md-cache { visibility: hidden; }
.md-rester, .md-question { display: none; }
.md-demande::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(4, 4, 12, .6); }
.md-demande .md-bas { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); padding: 8px 8px 8px 16px; gap: 10px; font-size: 15px; visibility: visible; }
.md-demande .md-rester, .md-demande .md-question { display: inline-block; }
.md-demande .md-etat { display: none; }
.md-question { color: #e8ecf8; margin-right: 4px; }
.lien-zone .md-demande .md-bas button.md-quitter, .lien-zone .md-demande .md-bas button.md-rester { padding: 8px 16px; border-radius: 999px; font-size: 14px; }
.md-etat b { color: #ff9a3c; }
.lien-zone .md-bas button.md-quitter { padding: 4px 11px; border-radius: 999px; font-size: 12px; }