/* Emoticons, presentes e frases — artes dos bundles chat, expression e g_a_* */

.emo-fundo {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 84px;
  background: rgba(4, 1, 12, .55);
}

.emo-painel {
  position: relative;
  width: min(560px, 94vw); max-height: 62vh;
  display: flex; flex-direction: column;
  padding: 14px 16px 10px;
  background-color: #1b1030;
  border: 1px solid #6b45b8; border-radius: 14px 14px 10px 10px;
  box-shadow: 0 -10px 46px rgba(0, 0, 0, .6);
  color: #efe6ff;
}
.emo-painel::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 13px;
  background-image: var(--arte); background-size: 100% 100%; opacity: .35;
}
.emo-painel > * { position: relative; z-index: 1; }

.emo-x {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 26px; height: 26px; padding: 0; background: none; border: 0; cursor: pointer;
}
.emo-x img { width: 100%; height: 100%; object-fit: contain; }

.emo-abas { display: flex; gap: 7px; padding-right: 36px; margin-bottom: 10px; }
.emo-abas button {
  padding: 6px 14px; font: inherit; font-size: 12.5px;
  color: #cfc0f0; background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; cursor: pointer;
}
.emo-abas button.ativa { color: #1b1030; background: #ffd970; border-color: #ffd970; font-weight: 700; }

.emo-corpo { flex: 1; overflow: auto; }
.emo-dica { margin: 0 0 10px; font-size: 12px; opacity: .72; }

/* ---- emoticons */

.emo-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.emo-item {
  aspect-ratio: 1; padding: 6px; cursor: pointer;
  background-color: rgba(255, 255, 255, .05); background-size: 100% 100%;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px;
}
.emo-item img { width: 100%; height: 100%; object-fit: contain; }
.emo-item:hover { background-color: rgba(255, 255, 255, .16); transform: scale(1.07); }

/* ---- presentes */

.emo-presentes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.emo-presente {
  display: grid; justify-items: center; gap: 3px;
  padding: 9px 5px; cursor: pointer;
  color: inherit; background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px;
}
.emo-presente img { width: 46px; height: 46px; object-fit: contain; }
.emo-presente .nome { font-size: 10.5px; text-align: center; line-height: 1.2; opacity: .85; }
.emo-presente .preco { font-size: 11px; font-weight: 700; color: #ffd970; }
.emo-presente:hover { background: rgba(255, 255, 255, .1); }
.emo-presente.sem { opacity: .42; }

/* ---- frases */

.emo-frases {
  display: grid; gap: 5px; padding: 10px;
  background-size: 100% 100%; background-color: rgba(0, 0, 0, .24); border-radius: 10px;
}
.emo-frases h4 {
  margin: 8px 0 2px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .7px; opacity: .6;
}
.emo-frase {
  padding: 7px 11px; text-align: left; font: inherit; font-size: 12.5px;
  color: #efe6ff; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; cursor: pointer;
}
.emo-frase:hover { background: rgba(255, 255, 255, .16); }

.emo-painel footer {
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 9px; margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 11.5px; opacity: .78;
}
.emo-saldo { color: #ffd970; }

/* ---- o que voa na mesa */

.emo-voando {
  position: fixed; z-index: 80; width: 52px; height: 52px;
  object-fit: contain; pointer-events: none;
  transition: transform 1.05s cubic-bezier(.3, 1.4, .5, 1), opacity 1.05s ease-in;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}

.emo-balao {
  position: absolute; bottom: 100%; left: 50%; translate: -50% -6px;
  z-index: 12; max-width: 190px;
  padding: 7px 12px; font-size: 12px; line-height: 1.35; text-align: center;
  color: #2a1a05; background-color: #ffeeb8; background-size: 100% 100%;
  border-radius: 11px; box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  animation: emo-sobe .25s ease-out;
}
@keyframes emo-sobe { from { opacity: 0; translate: -50% 6px; } }

/* botão de emoticon ao lado do chat */
.chat-linha { display: flex; gap: 7px; align-items: center; }
.chat-linha input { flex: 1; }
.chat-emo {
  width: 34px; height: 34px; flex: none;
  font-size: 17px; line-height: 1; cursor: pointer;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px;
}
.chat-emo:hover { background: rgba(255, 255, 255, .18); }

@media (max-width: 620px) {
  .emo-grade { grid-template-columns: repeat(4, 1fr); }
  .emo-presentes { grid-template-columns: repeat(3, 1fr); }
}