/*! Card Battle Lab. Copyright (c) 2026 Dave Skilton. All rights reserved. See /LICENSE. https://cardbattlelab.com/ */
html.chat-panel-on .chp-tab.emo-tab {
  --tc: var(--c-game-pair);
}
html.chat-panel-on .chp-tab.emo-tab.emo-open {
  color: var(--tc-hi);
  background: color-mix(in srgb, var(--tc) 16%, transparent);
}
html.chat-panel-on .chp-tab.emo-tab.emo-cooling {
  cursor: default;
}
html.chat-panel-on .chp-tab.emo-tab.emo-cooling:hover {
  color: color-mix(in srgb, var(--tc) 55%, var(--c-text-faint));
}
html.chat-panel-on .chp-tab.emo-tab {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.emo-cd {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(color-mix(in srgb, var(--c-game-pair) 38%, transparent) calc(var(--emo-cd, 0) * 1turn), transparent 0);
  pointer-events: none;
}
.emo-cooling .emo-cd {
  display: block;
}
.chp-tab.emo-tab.emo-cooling > :not(.emo-cd) {
  opacity: .38;
}
html.chat-panel-on #chatPanel.is-sheet .chp-tab.emo-tab .emo-cd {
  width: 28px;
  height: 28px;
}
html.emo-live-bb #bottomBar .chp-bbbtn {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
html.chat-panel-on #bottomBar .chp-bbbtn .g {
  position: relative;
}
html.chat-panel-on #bottomBar .chp-bbbtn .emo-cd {
  width: 26px;
  height: 26px;
}
html:not(.emo-live-bb) #bottomBar .chp-bbbtn .emo-cd {
  display: none;
}
.emo-arc {
  position: fixed;
  inset: 0;
  z-index: var(--chp-menu-z, 16010);
  pointer-events: none;
}
.emo-slot {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  padding: 5px;
  margin: 0;
  translate: var(--x, 0) var(--y, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-modal-bg);
  -webkit-backdrop-filter: var(--glass-modal-blur);
  backdrop-filter: var(--glass-modal-blur);
  border: 1px solid var(--c-border-strong);
  box-shadow: 0 6px 20px var(--scrim);
  color: var(--c-text-hi);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  animation: emo-slot-in 140ms ease-out backwards;
  animation-delay: calc(var(--i, 0) * 18ms);
  transition:
    scale 160ms ease,
    opacity 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.emo-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.emo-slot .gcg-tbi {
  width: 20px;
  height: 20px;
}
.emo-slot.hot {
  scale: var(--emo-hot, 1.75);
  z-index: 2;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.emo-arc.emo-aim .emo-slot:not(.hot) {
  opacity: .4;
}
.emo-arc.emo-cooling .emo-slot:not(.emo-mute) {
  opacity: .38;
  cursor: default;
}
.emo-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--emo-gs, 84px);
  height: var(--emo-gs, 84px);
  padding: 8px;
  box-sizing: border-box;
  translate: var(--x, 0) var(--y, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-modal-bg);
  border: 1px solid var(--c-border-strong);
  box-shadow: 0 6px 20px var(--scrim);
  z-index: calc(var(--chp-menu-z, 16010) + 1);
  pointer-events: none;
  transition: none;
}
.emo-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.emo-ghost.over {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.emo-slot:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.emo-slot.emo-mute.on {
  background: color-mix(in srgb, var(--c-toggle-on) 54%, var(--c-panel-2));
  color: var(--c-white);
}
.emo-slot.emo-mute.on.hot,
.emo-slot.emo-mute.on:hover {
  background: color-mix(in srgb, var(--c-toggle-on) 72%, var(--c-panel-2));
}
@media (pointer: coarse) {
  .emo-slot {
    width: 52px;
    height: 52px;
  }
}
@keyframes emo-slot-in {
  from {
    opacity: 0;
    scale: .5;
  }
}
.emo-layer {
  position: fixed;
  inset: 0;
  z-index: 3001;
  pointer-events: none;
  overflow: hidden;
}
.emo-pop {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--emo-s, 72px);
  height: var(--emo-s, 72px);
  translate: var(--emo-x, 0) var(--emo-y, 0);
}
.emo-mirror {
  width: 100%;
  height: 100%;
}
.emo-mirror.is-mirrored {
  scale: -1 1;
}
.emo-pop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
:root {
  --emo-pop-scale: 3;
  --emo-pop-min: 106px;
  --emo-pop-max: 170px;
  --emo-pop-gap: 0px;
  --emo-start-x: -94px;
  --emo-start-y: 0px;
  --emo-end-x: -25px;
  --emo-end-y: 0px;
  --emo-in-ms: 500;
  --emo-linger-ms: 400;
  --emo-out-ms: 1000;
}
@media (prefers-reduced-motion: reduce) {
  .emo-slot {
    animation: none;
    transition: none;
  }
}