/* Emotes (js/emotes.js, docs/emotes.md) : bouton du HUD, grille, bulles, barre de l'écran de fin.
   Copié dans mockups/js/emotes.css à l'intégration (docs/emotes/faire-diff.js). Cadre pixel : le même que index.html. */
.emo-px { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.emo-ico { width: 24px; height: 20px; fill: currentColor; }

/* ---------- bouton du HUD, sous le bouton du son ---------- */
.emo-btn { grid-column: 2; position: relative; width: 36px; height: 36px; min-height: 36px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 0;
  cursor: pointer; overflow: hidden; background: var(--paper-2, #E8D6AF); color: var(--inkc, #2B1D14);
  box-shadow: inset 0 -3px 0 var(--paper-edge, #B89C70), 0 0 0 2px var(--wood-0, #24150C); }
.emo-btn[hidden] { display: none; }
.emo-btn:active { transform: translateY(1px); }
.emo-btn .emo-ico { width: 20px; height: 16px; position: relative; z-index: 1; }
.emo-btn[aria-expanded="true"] { background: var(--cream, #F8EED6); }
/* délai entre deux envois : un voile qui se vide */
.emo-btn.attente { color: var(--ink-faint, #9C8A70); }
.emo-btn.attente::after { content: ''; position: absolute; inset: 0; background: rgba(36, 21, 12, .38); transform-origin: bottom; animation: emoVide var(--attente, 3s) linear forwards; }
@keyframes emoVide { from { transform: scaleY(1); } to { transform: scaleY(0); } }
/* emotes de l'adversaire coupées : petit trait rouge */
.emo-btn.muet::before { content: ''; position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; z-index: 2;
  background: linear-gradient(45deg, transparent 40%, var(--bad, #C8322E) 40%, var(--bad, #C8322E) 60%, transparent 60%); }
.emo-btn.non { animation: emoNon .3s steps(4); }
@keyframes emoNon { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

/* ---------- grille ---------- */
.emo-grille { color: var(--inkc, #2B1D14); font-family: var(--font, system-ui); }
.emo-panneau { position: absolute; z-index: 30; padding: 8px; background: var(--paper, #F1E3C2);
  box-shadow: 0 0 0 2px var(--wood-0, #24150C), inset 0 2px 0 var(--cream, #F8EED6), inset 0 -4px 0 var(--paper-3, #D9C49A), 0 6px 0 2px rgba(20, 10, 4, .45); }
.emo-panneau[hidden] { display: none; }
.emo-cases { display: grid; grid-template-columns: repeat(4, 54px); gap: 6px; }
.emo-c { position: relative; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--paper-2, #E8D6AF); box-shadow: 0 0 0 2px var(--wood-0, #24150C), inset 0 -3px 0 var(--paper-edge, #B89C70); }
.emo-c:hover, .emo-c:focus-visible { background: var(--cream, #F8EED6); outline: none; }
.emo-c:active { transform: translateY(2px); }
.emo-c .emo-px { width: 48px; height: 48px; margin-top: -2px; }
.emo-c kbd, html.px .emo-grille .emo-c kbd { position: absolute; left: 3px; top: 2px; min-width: 0; padding: 0; font: 400 13px/1 var(--font, system-ui); color: var(--ink-muted, #6E5A44); background: none; box-shadow: none; }
@media (hover: none) { .emo-c kbd { display: none; } }
.emo-grille.attente .emo-c { opacity: .5; }
.emo-muet { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 10px; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 0; cursor: pointer;
  font: 400 15px var(--font, system-ui); text-align: left; color: var(--ink-muted, #6E5A44); background: transparent; box-shadow: 0 0 0 1px var(--paper-edge, #B89C70); }
.emo-muet[aria-pressed="true"] { color: var(--bad, #C8322E); background: rgba(200, 50, 46, .08); }
.emo-muet .emo-ico { flex: none; width: 18px; height: 15px; }

/* ---------- bulles ---------- */
.emo-bulle { position: absolute; z-index: 25; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px 7px;
  background: var(--cream, #F8EED6); color: var(--inkc, #2B1D14);
  box-shadow: 0 0 0 3px var(--wood-0, #24150C), inset 0 -3px 0 var(--paper-3, #D9C49A), 0 6px 0 3px rgba(20, 10, 4, .35);
  animation: emoPop .24s steps(4) both; transform-origin: 50% 100%; }
.emo-bulle.camp0 { border-top: 4px solid var(--us, #2A4FBF); }
.emo-bulle.camp1 { border-top: 4px solid var(--them, #C8322E); }
.emo-bulle.sort { animation: emoSort .22s steps(3) both; }
.emo-bulle .emo-txt { font: 400 19px/1 var(--font, system-ui); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.emo-bulle .emo-nom { font: 400 13px/1 var(--font, system-ui); color: var(--ink-muted, #6E5A44); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* queue : petit triangle vers la tour (couleur du contour) */
.emo-bulle::after { content: ''; position: absolute; width: 0; height: 0; border: 0 solid transparent; }
.emo-bulle.q-droite::after { right: -14px; bottom: 14px; border-width: 9px 0 9px 12px; border-left-color: var(--wood-0, #24150C); }
.emo-bulle.q-gauche::after { left: -14px; top: 14px; border-width: 9px 12px 9px 0; border-right-color: var(--wood-0, #24150C); }
.emo-bulle.q-bas::after { left: 50%; bottom: -14px; margin-left: -9px; border-width: 12px 9px 0 9px; border-top-color: var(--wood-0, #24150C); }
.emo-bulle.q-haut::after { left: 50%; top: -16px; margin-left: -9px; border-width: 0 9px 12px 9px; border-bottom-color: var(--wood-0, #24150C); }
@keyframes emoPop { 0% { transform: scale(.3); opacity: 0; } 50% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes emoSort { to { transform: scale(.6); opacity: 0; } }

/* ---------- écran de fin ---------- */
.emo-fin { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px auto 2px; flex-wrap: wrap; }
.emo-fin[hidden] { display: none; }
.emo-fin-q { font: 400 15px var(--font, system-ui); color: var(--paper-3, #D9C49A); }
.emo-fin-g .emo-cases { grid-template-columns: repeat(3, 44px); gap: 8px; }
.emo-fin-g .emo-c { width: 44px; height: 44px; }
.emo-fin-g .emo-c .emo-px { width: 32px; height: 32px; margin: 0; }
.emo-fin .emo-bulle { bottom: calc(100% + 16px); top: auto; z-index: 40; }
.emo-fin .emo-bulle.emo-fin-moi { left: 0; }
.emo-fin .emo-bulle.emo-fin-adv { right: 0; }

/* lecteurs d'écran seulement */
.emo-annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.emo-kbd-t { color: inherit; }

@media (prefers-reduced-motion: reduce) { .emo-bulle, .emo-bulle.sort, .emo-btn.non { animation: none; } .emo-btn.attente::after { animation: none; transform: scaleY(.5); } }