/* Emotes na partida (ui/emotes.js): botão no topo, roda de carinhas e os balões de cada lado. */
.emote-btn canvas {
  display: block;
}

.emote-btn.is-cooling canvas {
  opacity: 0.45;
  filter: grayscale(0.7);
}

.emote-btn[aria-expanded="true"] {
  background: linear-gradient(#6a5f99, #463d68);
}

/* Roda: uma grade de 3 colunas pendurada logo abaixo do botão, no canto direito da coluna. */
.emote-wheel {
  position: absolute;
  z-index: 9;
  top: calc(var(--top-bar-bottom, 44px) + 6px);
  right: calc(100vw - var(--column-x, 0px) - var(--column-w, 100vw) + 6px);
  display: grid;
  grid-template-columns: repeat(3, 58px);
  gap: 6px;
  padding: 8px;
  border: 3px solid var(--outline);
  border-radius: 18px;
  background: rgba(20, 16, 40, 0.94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  animation: emote-wheel-in 140ms ease-out;
}

.emote-wheel.is-wide {
  grid-template-columns: repeat(4, 58px);
}

.emote-option[hidden] {
  display: none;
}

.emote-wheel[hidden] {
  display: none;
}

.emote-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 2px solid var(--outline);
  border-radius: 14px;
  background: linear-gradient(#3e3760, #2a2444);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 2px 0 #120e1f;
  cursor: pointer;
  touch-action: manipulation;
}

.emote-option:active {
  transform: translateY(2px) scale(0.96);
}

.emote-option:disabled {
  opacity: 0.4;
  cursor: default;
}

.emote-option:focus-visible {
  outline: 2px solid #c9a8ff;
  outline-offset: 2px;
}

.emote-mute.is-on {
  background: linear-gradient(#5a2a3e, #3a1c2c);
}

/* Balões: o do oponente perto do Bastião de cima, o seu logo acima da mão, os dois no canto esquerdo. */
.emote-bubble {
  position: absolute;
  z-index: 7;
  left: calc(var(--column-x, 0px) + 10px);
  padding: 6px;
  border: 3px solid var(--outline);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.emote-bubble[hidden] {
  display: none;
}

.emote-bubble canvas {
  display: block;
}

.emote-bubble--opponent {
  top: calc(var(--top-bar-bottom, 44px) + 34px);
  background: rgba(255, 214, 218, 0.94);
  border-top-left-radius: 6px;
}

.emote-bubble--me {
  bottom: calc(var(--hud-bottom-gap, 20vh) + 12px);
  background: rgba(214, 232, 255, 0.94);
  border-bottom-left-radius: 6px;
}

/* Sobre o Bastião de cada jogador (ui/emotes.js, setAnchors): o centro do balão no centro do castelo. */
.emote-bubble.is-anchored {
  bottom: auto;
  translate: -50% -50%;
  border-radius: 22px;
}

.emote-bubble.is-in {
  animation: emote-pop 2600ms ease-out both;
}

@keyframes emote-pop {
  0% { opacity: 0; transform: scale(0.3); }
  6% { opacity: 1; transform: scale(1.12); }
  11% { transform: scale(1); }
  88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85); }
}

@keyframes emote-wheel-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .emote-bubble.is-in,
  .emote-wheel {
    animation: none;
  }
}