/* ============================================================
   emoji-rate.css — Emoji rate interaction styles
   ============================================================ */

.emoji-rows { display: flex; flex-direction: column; gap: 8px; }
.emoji-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 8px 12px;
}
.emoji-row-label { flex: 1; font-size: 13px; font-weight: 600; color: white; }
.emoji-btns { display: flex; gap: 6px; }
.emoji-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 8px; min-width: 48px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 8px; cursor: pointer; transition: all 0.15s;
  touch-action: manipulation;
}
@media (hover: hover) {
  .emoji-btn:hover { background: rgba(255,255,255,0.14); transform: scale(1.06); }
}
.emoji-btn.selected {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px currentColor, 0 4px 12px rgba(0,0,0,0.4);
}
.emoji-btn.selected .em { transform: scale(1.2); display: inline-block; }
.emoji-btn.selected .em-label { font-weight: 700; color: white; }
.emoji-btn .em { font-size: 22px; transition: transform 0.15s; }
.emoji-btn .em-label { font-size: 9px; color: rgba(255,255,255,0.6); transition: color 0.15s; }