/* turning-red.css — Turning Red theme styles */

/* ── Toast characters (correct-answer celebration) ──────────────────── */
#tr-toast {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99990;
  display: none;
}
#tr-toast.show { display: block; }

.tr-toast-char {
  position: absolute;
  width: clamp(170px, 27vw, 374px); /* 70% larger than base 100px/16vw/220px */
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation:
    trPopIn 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    trFloat  2.4s ease-in-out infinite,
    trFadeOut 0.4s ease 2.9s forwards;
}

@keyframes trPopIn {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.15) rotate(5deg);  opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg);  opacity: 1; }
}

@keyframes trFloat {
  0%, 100% { margin-top: 0px; }
  50%       { margin-top: -16px; }
}

@keyframes trFadeOut {
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

/* ── Outro bounce ────────────────────────────────────────────────────── */
@keyframes trBounce {
  0%   { transform: translateY(0)    rotate(-2deg) scale(1); }
  50%  { transform: translateY(-22px) rotate( 3deg) scale(1.06); }
  100% { transform: translateY(0)    rotate(-2deg) scale(1); }
}

/* ── Red panda sparkle particle ──────────────────────────────────────── */
@keyframes trSparkle {
  0%   { opacity: 0; transform: scale(0); }
  40%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5) translateY(-30px); }
}