/* Émotes : roue (touche E tenue, RB, bouton tactile) et bouton du téléphone. Tout en pixels : cadres de la ROM, icônes ×3, pas de flou. */
#emote-roue { position: fixed; left: 50%; top: 50%; width: 264px; height: 264px; margin: -132px 0 0 -132px; z-index: 60; display: none; pointer-events: none; }
#emote-roue.on { display: block; pointer-events: auto; animation: erOuvre .16s steps(3) both; }
@keyframes erOuvre { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#emote-roue::before { content: ''; position: absolute; inset: 30px; border-radius: 50%; background: rgba(7,13,36,.55); box-shadow: 0 0 0 2px #101018, 0 0 0 4px var(--line); }
#emote-roue .er-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 112px; text-align: center; pointer-events: none;
  border: 12px solid transparent; border-image: url('assets/ui/cadres/cadre1_blue_fin.png') 8 fill / 12px stretch; image-rendering: pixelated; }
#emote-roue .er-nom { display: block; color: var(--gold); font-size: 16px; line-height: 16px; white-space: nowrap; font-weight: normal; }
#emote-roue .er-aide { display: block; color: var(--dim); font-size: 8px; line-height: 10px; margin-top: 2px; }
#emote-roue .er-slot { position: absolute; left: calc(50% + var(--ex) * 1px); top: calc(50% + var(--ey) * 1px); width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: none; touch-action: none;
  border: 12px solid transparent; border-image: url('assets/ui/cadres/cadre1_blue_fin.png') 8 fill / 12px stretch; image-rendering: pixelated; }
#emote-roue .er-slot img { width: auto; height: auto; transform: scale(2); image-rendering: pixelated; pointer-events: none; }
#emote-roue .er-slot.sel { border-image-source: url('assets/ui/cadres/cadre1_or_fin.png'); transform: translateY(-3px); }
#emote-roue .er-slot.sel img { animation: erSaut .4s steps(2) infinite; }
@keyframes erSaut { 0% { transform: scale(2) translateY(0); } 50% { transform: scale(2) translateY(-1px); } }

/* Bouton du téléphone : sous la discussion, dans la colonne d'outils à droite. */
#emote-btn { display: none; position: fixed; right: var(--tools-r); top: 112px; z-index: 13; width: 30px; height: 30px; padding: 0; cursor: pointer;
  align-items: center; justify-content: center; border: 1px solid var(--line); background: rgba(8,15,40,.85); border-radius: 4px; touch-action: none; }
#emote-btn img { image-rendering: pixelated; pointer-events: none; }
body.is-touch #emote-btn.on { display: flex; }
#emote-btn:active { transform: scale(.9); }
body.is-touch.in-donjon #emote-btn { top: 146px; }