/* ============================================================
   TAVLA-EXTRAS.CSS — Dice cinematic + badges + streak
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   3D DICE ROLL — keyframe-based barrel roll on .tg-die.rolling
   ───────────────────────────────────────────────────────────── */
@keyframes tvDiceTumble {
  0%   { transform: translate(40px, 80px) rotate(720deg) scale(0.3); opacity: 0; }
  20%  { opacity: 1; }
  60%  { transform: translate(-6px, -10px) rotate(-30deg) scale(1.15); }
  78%  { transform: translate(4px, 5px) rotate(10deg) scale(0.96); }
  92%  { transform: translate(-2px, -2px) rotate(-4deg) scale(1.03); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
}
.tg-die.rolling {
  animation: tvDiceTumble 0.7s cubic-bezier(0.2, 0.8, 0.4, 1) forwards !important;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.7));
}

/* Tavla streak badge — for consecutive hits */
.tv-streak-badge {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(0,0,0,0.92), rgba(0,0,0,0.78));
  border: 1.5px solid var(--neon-1);
  border-radius: 100px;
  color: #fff;
  font-family: var(--editorial-2);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.7),
    0 0 22px rgba(var(--neon-1-rgb), 0.55);
  animation: tvStreakIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tv-streak-badge[data-side="bottom"] { bottom: 80px; left: 30px; }
.tv-streak-badge[data-side="top"]    { top: 30px; left: 30px; }
@keyframes tvStreakIn {
  from { opacity: 0; transform: scale(0.5) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.tv-streak-badge .tv-streak-flame {
  font-size: 0.9em;
  filter: drop-shadow(0 0 6px currentColor);
  margin-left: 4px;
}

/* Tavla match-end badges — appended to tg-win-overlay */
.tv-win-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.tv-win-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4));
  border: 1px solid var(--line-2);
  border-radius: 100px;
  font-family: var(--body-font);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-2);
  animation: tvBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes tvBadgePop {
  from { opacity: 0; transform: scale(0.6) translateY(6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.tv-win-badge b {
  color: #fff;
  font-family: var(--editorial-2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-right: 4px;
}
.tv-win-badge-emoji {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  background: rgba(255,255,255,0.06);
  filter: drop-shadow(0 0 8px currentColor);
}
.tv-win-badge.kind-gold    { border-color: rgba(var(--accent-warm-rgb), 0.55); background: linear-gradient(135deg, rgba(var(--accent-warm-rgb), 0.12), rgba(0,0,0,0.5)); }
.tv-win-badge.kind-magenta { border-color: rgba(var(--neon-1-rgb), 0.55);    background: linear-gradient(135deg, rgba(var(--neon-1-rgb), 0.12),    rgba(0,0,0,0.5)); }
.tv-win-badge.kind-cyan    { border-color: rgba(var(--neon-2-rgb), 0.55);    background: linear-gradient(135deg, rgba(var(--neon-2-rgb), 0.12),    rgba(0,0,0,0.5)); }
.tv-win-badge.kind-green   { border-color: rgba(40,224,140, 0.55);            background: linear-gradient(135deg, rgba(40,224,140, 0.12),            rgba(0,0,0,0.5)); }