@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bannerSlideIn {
  from { opacity: 0; transform: translateY(-120%); max-height: 0; padding-top: 0; padding-bottom: 0; }
  40%  { opacity: 1; transform: translateY(12px); }
  60%  { transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); max-height: 80px; padding-top: 12px; padding-bottom: 12px; }
}
@keyframes bannerSlideOut {
  from { opacity: 1; transform: translateY(0) scale(1); max-height: 80px; padding-top: 12px; padding-bottom: 12px; }
  to   { opacity: 0; transform: translateY(-100%) scale(0.9); max-height: 0; padding-top: 0; padding-bottom: 0; }
}
@keyframes eqBar { from { width: 100%; } to { width: 0%; } }
@keyframes evtPulse {
  from { box-shadow: 0 0 6px #4338ca33; transform: scale(1); }
  to   { box-shadow: 0 0 24px #4338cacc, 0 0 40px #4338ca66; transform: scale(1.02); }
}
@keyframes qFloat {
  from { transform: translateY(0) rotate(-5deg); }
  to   { transform: translateY(-24px) rotate(5deg); }
}
@keyframes qIn {
  from { opacity: 0; transform: scale(0.1) rotate(-20deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes evFlash {
  0%   { background: rgba(99,102,241,0.45); transform: scale(1.02); }
  50%  { background: rgba(99,102,241,0.25); transform: scale(1); }
  100% { background: transparent; transform: scale(1); }
}
@keyframes symDown {
  from { transform: translateY(-120px); }
  to   { transform: translateY(110vh); }
}
@keyframes symUp {
  from { transform: translateY(110vh); }
  to   { transform: translateY(-120px); }
}
@keyframes timerPulse { to { opacity: 0.3; } }
@keyframes numGrow {
  0%   { transform: scale(1);    filter: brightness(1);   text-shadow: none; }
  35%  { transform: scale(1.12); filter: brightness(1.6); text-shadow: 0 0 20px #4ade8099; }
  100% { transform: scale(1);    filter: brightness(1);   text-shadow: none; }
}
@keyframes numShrink {
  0%   { transform: scale(1);    filter: brightness(1);   text-shadow: none; }
  35%  { transform: scale(0.9);  filter: brightness(1.5); text-shadow: 0 0 20px #f8717199; }
  100% { transform: scale(1);    filter: brightness(1);   text-shadow: none; }
}
@keyframes numShake {
  0%, 100% { transform: translateX(0); }
  12%  { transform: translateX(-8px) rotate(-2deg); }
  25%  { transform: translateX(8px)  rotate(2deg); }
  37%  { transform: translateX(-6px) rotate(-1deg); }
  50%  { transform: translateX(6px)  rotate(1deg); }
  62%  { transform: translateX(-4px); }
  75%  { transform: translateX(4px); }
  87%  { transform: translateX(-2px); }
}
.anim-up    { animation: numGrow   0.55s cubic-bezier(0.22,1,0.36,1) both; }
.anim-down  { animation: numShrink 0.55s cubic-bezier(0.22,1,0.36,1) both; }
.anim-shake { animation: numShake  0.5s  cubic-bezier(0.36,0.07,0.19,0.97) both; }
@keyframes toastIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes shufflePop {
  from { opacity: 0; transform: scale(0.3) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes swapBgPulse {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}
@keyframes swapArrowDown {
  from { opacity: 0; transform: translateY(-30px) scale(0.5); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes swapTextIn {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qmarksIntro {
  from { opacity: 0; transform: scale(0.6) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes qmarkBurst {
  0%   { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(2) translateY(-40px); }
}
@keyframes mixupBgSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes mixupIn {
  from { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes swapGlow {
  from { box-shadow: 0 0 8px rgba(124,58,237,0.2); }
  to   { box-shadow: 0 0 24px rgba(124,58,237,0.6); }
}
@keyframes settingsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes settingsSlideIn {
  from { opacity: 0; transform: translateY(-24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes settingsFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(37,99,235,0.3); }
  50%       { box-shadow: 0 0 24px rgba(37,99,235,0.8); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}
@keyframes coinBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.15) rotate(-5deg); }
  75%  { transform: scale(1.1) rotate(5deg); }
}
.menu-title {
  animation: float 4s ease-in-out infinite;
}
@keyframes resultAppear {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.result-title {
  animation: resultAppear 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes resultSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.result-rows {
  animation: resultSlideUp 0.4s 0.15s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes cardSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.opponent-card {
  animation: cardSlideDown 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.calculator-area {
  animation: cardSlideUp 0.4s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
.menu-currency {
  animation: menuItemIn 0.35s 0.05s cubic-bezier(0.22,1,0.36,1) both;
}
.menu-profile {
  animation: menuItemIn 0.35s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes menuItemIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.menu-btns .mbtn:nth-child(1) { animation: menuBtnIn 0.4s 0.05s cubic-bezier(0.22,1,0.36,1) both; }
.menu-btns .mbtn:nth-child(2) { animation: menuBtnIn 0.4s 0.10s cubic-bezier(0.22,1,0.36,1) both; }
.menu-btns .mbtn:nth-child(3) { animation: menuBtnIn 0.4s 0.15s cubic-bezier(0.22,1,0.36,1) both; }
.menu-btns .mbtn:nth-child(4) { animation: menuBtnIn 0.4s 0.20s cubic-bezier(0.22,1,0.36,1) both; }
.menu-btns .mbtn:nth-child(5) { animation: menuBtnIn 0.4s 0.25s cubic-bezier(0.22,1,0.36,1) both; }
.menu-btns .mbtn:nth-child(6) { animation: menuBtnIn 0.4s 0.30s cubic-bezier(0.22,1,0.36,1) both; }
.menu-btns .mbtn:nth-child(7) { animation: menuBtnIn 0.4s 0.35s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes menuBtnIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.auth-card {
  animation: authCardIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.menu-sub {
  animation: subtitleIn 0.6s 0.3s ease both;
}
@keyframes subtitleIn {
  from { opacity: 0; letter-spacing: 8px; }
  to   { opacity: 1; letter-spacing: 4px; }
}
@keyframes hudAvatarIn {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.hud-avatar-ph, .hud-avatar {
  animation: hudAvatarIn 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes searchPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.searching-text { animation: searchPulse 1.8s ease-in-out infinite; }
#btn-menu {
  animation: menuBtnIn 0.4s 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes timerCardGlow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%       { box-shadow: 0 0 16px rgba(37,99,235,0.18); }
}
@keyframes inputFocusGlow {
  from { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
  to   { box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
}
@keyframes authSubShine {
  from { opacity: 0; letter-spacing: 6px; }
  to   { opacity: 1; letter-spacing: 3px; }
}
.auth-sub { animation: authSubShine 0.5s 0.2s ease both; }
.op-btn:active { animation: opBtnPress 0.12s ease both; }
@keyframes opBtnPress {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.85); }
  100% { transform: scale(0.9); }
}
@keyframes equalizerPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(251,191,36,0.3); }
  50%       { box-shadow: 0 0 28px rgba(251,191,36,0.8); }
}
#btn-equalizer { animation: equalizerPulse 1.2s ease-in-out infinite; }
@keyframes loadingShine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes modalTitleIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes reactionPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes reactionMyIn {
  0%   { opacity: 0; transform: scale(0.3) translateY(20px) rotate(-20deg); }
  15%  { opacity: 1; transform: scale(1.3) translateY(-10px) rotate(5deg); }
  30%  { transform: scale(1) translateY(0) rotate(0deg); }
  85%  { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.5) translateY(-30px) rotate(15deg); }
}
@keyframes reactionOppIn {
  0%   { opacity: 0; transform: translateY(-50%) scale(0.2) rotate(-30deg); }
  12%  { opacity: 1; transform: translateY(-50%) scale(1.3) rotate(8deg); }
  20%  { transform: translateY(-50%) scale(1.1) rotate(-3deg); }
  28%  { transform: translateY(-50%) scale(1.2) rotate(2deg); }
  35%  { transform: translateY(-50%) scale(1.15) rotate(0deg); }
  80%  { opacity: 1; transform: translateY(-50%) scale(1.15) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-50%) scale(0.3) rotate(20deg); }
}
@keyframes chatNotif {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes chatBubbleIn {
  from { opacity: 0; transform: translateX(-20px) scale(0.8); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}