/*
 * Titan gift alert + speech bubble.
 * Everything is sized in em, so the same markup works at OBS size (font-size ~26px on a
 * 1080px canvas) and inside small previews (font-size ~8px).
 */

/* ---------------- Gift alert ---------------- */
.t-alert {
  --tier-a: #ff5c7a;
  --tier-b: #ff9a5c;
  --tier-glow: rgba(255, 92, 122, .45);
  /* ~32px on a 1080x1920 OBS canvas, scales down inside small preview iframes */
  font-size: min(3vw, 1.7vh);
  transform: translate(-50%, -140%) scale(.9);
  opacity: 0;
  width: 18em;
  max-width: 92vw;
  pointer-events: none;
  direction: rtl;
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
.t-alert.tier-big { --tier-a: #ffc93c; --tier-b: #ff8a3d; --tier-glow: rgba(255, 190, 60, .5); }
.t-alert.tier-mega { --tier-a: #c084fc; --tier-b: #ffcf4d; --tier-glow: rgba(192, 132, 252, .55); }

.t-alert.show { animation: tAlertIn .7s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.t-alert.hide { animation: tAlertOut .5s ease-in forwards; }
@keyframes tAlertIn {
  0% { opacity: 0; transform: translate(-50%, -140%) scale(.85); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes tAlertOut {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -40%) scale(.92); }
}

.t-alert-glow {
  position: absolute; inset: -.6em; border-radius: 1.6em; z-index: -1;
  background: radial-gradient(ellipse at center, var(--tier-glow), transparent 70%);
  filter: blur(.6em);
}

/* Gradient border via padding + background-clip */
.t-alert-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .7em;
  padding: .65em .8em .65em 1em;
  border-radius: 1.1em;
  border: .09em solid transparent;
  background:
    linear-gradient(135deg, rgba(22, 16, 22, .96), rgba(12, 10, 14, .97)) padding-box,
    linear-gradient(120deg, var(--tier-a), var(--tier-b), var(--tier-a)) border-box;
  box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5);
}
/* Light sweep across the card */
.t-alert-card::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent);
  transform: skewX(-18deg);
}
.t-alert.show .t-alert-card::after { animation: tSweep 1.6s .5s ease-out; }
@keyframes tSweep { to { left: 130%; } }

.t-alert-avatar {
  position: relative; flex-shrink: 0; width: 3.1em; height: 3.1em; border-radius: 50%; padding: .12em;
  background: conic-gradient(from 0deg, var(--tier-a), var(--tier-b), var(--tier-a));
}
.t-alert.show .t-alert-avatar { animation: tSpin 4s linear infinite; }
.t-alert-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  border: .1em solid #120d12; background: #2a1d24;
}
.t-alert.show .t-alert-avatar img { animation: tSpin 4s linear infinite reverse; }
@keyframes tSpin { to { transform: rotate(360deg); } }

.t-alert-body { min-width: 0; flex: 1; }
.t-alert-user {
  font-size: 1.05em; font-weight: 700; line-height: 1.25;
  background: linear-gradient(90deg, var(--tier-a), var(--tier-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-alert-gift { font-size: .74em; font-weight: 600; color: #f3eef2; line-height: 1.4; }
.t-alert-meta { display: flex; gap: .35em; margin-top: .3em; align-items: center; }
.t-alert-coins, .t-alert-combo {
  display: inline-flex; align-items: center; gap: .2em;
  font-size: .62em; font-weight: 700; padding: .15em .6em; border-radius: 1em; direction: ltr;
}
.t-alert-coins { background: linear-gradient(90deg, var(--tier-a), var(--tier-b)); color: #1a1012; }
.t-alert-combo { background: rgba(255, 255, 255, .1); color: #fff; border: .06em solid rgba(255, 255, 255, .2); }
.t-alert-thanks { font-size: .6em; color: #d8cfd6; margin-top: .35em; line-height: 1.45; }

/* ---------------- Speech bubble ---------------- */
.t-bubble {
  font-size: min(3.2vw, 1.8vh);
  transform: translate(-50%, -100%) scale(.6);
  transform-origin: 50% 100%;
  opacity: 0;
  max-width: 13em;
  min-width: 5em;
  pointer-events: none;
  direction: rtl;
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
.t-bubble.show { animation: tPop .45s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes tPop { to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }

.t-bubble-text {
  position: relative;
  padding: .55em .85em;
  border-radius: .9em;
  background: rgba(255, 255, 255, .97);
  color: #17121a;
  font-weight: 700;
  font-size: .82em;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .35), 0 0 0 .08em rgba(255, 92, 122, .55);
  overflow-wrap: anywhere;
}
/* Tail pointing down at the character's head */
.t-bubble-text::after {
  content: ''; position: absolute; left: 50%; bottom: -.5em; transform: translateX(-50%);
  border-width: .55em .45em 0; border-style: solid;
  border-color: rgba(255, 255, 255, .97) transparent transparent;
}