/*
 * Social delight: the emote wheel, its phone button, and the round-end celebration layer. Field kit per docs/art/STYLE.md:
 * gunmetal plates with clipped top-right and bottom-left corners, an orange corner bracket, bone Barlow Condensed.
 */
.emote-wheel {
  position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 30; pointer-events: none;
  transform: scale(var(--ui, 1));
}
.emote-wheel[hidden] { display: none; }
.emote-wheel.pop .emote-plate, .emote-wheel.pop .emote-hub { animation: emote-pop 180ms cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes emote-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.emote-hub {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 6px 12px;
  font: 800 14px var(--display); letter-spacing: .12em; color: var(--muted); background: rgba(19, 21, 25, .82);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.emote-plate {
  position: absolute; left: var(--ex); top: var(--ey); transform: translate(-50%, -50%); pointer-events: auto;
  width: 84px; padding: 6px 4px 5px; display: grid; justify-items: center; gap: 1px; cursor: pointer;
  background: #3d4450; color: var(--ink); border: 0; font: 800 14px var(--display); letter-spacing: .04em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  box-shadow: inset 0 3px 0 #4f5560, inset 3px 0 0 var(--accent);
}
.emote-plate.on { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 3px 0 var(--accent-hot); transition: background 80ms; }
.emote-icon { width: 30px; height: 30px; }
.emote-plate span { font-size: 13px; line-height: 1; }

/* Phone: an emote button above the ability button, only on touch screens. */
.touch-emote { display: none; }
@media (pointer: coarse) {
  .touch-emote {
    display: grid; place-items: center; position: fixed; right: 118px; bottom: 222px; width: 48px; height: 48px; padding: 0; z-index: 12;
    border-radius: 50%; border: 2px solid rgba(236, 230, 214, .45); background: rgba(19, 21, 25, .62); color: var(--ink); touch-action: none;
  }
  .touch-emote:active { background: rgba(255, 90, 31, .7); }
  .emote-wheel { z-index: 31; }
  .touch-emote canvas { width: 28px; height: 28px; }
}

/* The celebration owns the round-end moment: its canvas replaces the plain winner banner while it plays. */
.celebrate { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }
.celebrate[hidden] { display: none; }
body.celebrating #banner { display: none !important; }
@media (prefers-reduced-motion: reduce) { .emote-wheel.pop .emote-plate, .emote-wheel.pop .emote-hub { animation: none; } }