/* ============================================================
   ALERT DONATE — hình thức + hiệu ứng dùng CHUNG cho overlay.html
   và khung "Xem trước" ở dashboard (Studio Donate). Tự chứa (không
   phụ thuộc biến app) để overlay OBS nạp độc lập vẫn đúng.
   Màu tên/số tiền/lời nhắn nhận qua biến --c-name/--c-amount/--c-msg.
   ============================================================ */

.gl-alert {
  --c-name: var(--pink); --c-amount: var(--gold); --c-msg: #EAE4FF;
  position: relative; min-width: 280px; max-width: min(680px, 92vw); text-align: center;
  padding: 22px 30px 26px; border-radius: 22px; color: var(--on-accent);
}
/* ---- Giao diện khung (layout) — tham khảo zypage ---- */
/* Nền đầy: thẻ gradient đậm + viền + glow (mặc định, giữ như cũ) */
.gl-alert--solid {
  background: linear-gradient(160deg, rgba(var(--surface2-rgb), .92), rgba(var(--bg2-rgb), .92));
  border: 2px solid rgba(var(--pink-rgb), .5);
  box-shadow: 0 20px 60px rgba(var(--shadow-rgb), .5), 0 0 44px rgba(var(--pink-rgb), .3);
  backdrop-filter: blur(4px);
}
/* Nền kính mờ: thẻ trong mờ nhẹ, viền mảnh, blur mạnh — chữ nổi mà nền vẫn thấy cảnh sau */
.gl-alert--glass {
  background: rgba(var(--bg-rgb), .34);
  border: 1px solid rgba(var(--hl-rgb), .16);
  box-shadow: 0 16px 44px rgba(var(--shadow-rgb), .4);
  backdrop-filter: blur(12px) saturate(1.1);
}
/* Trong suốt: không nền/viền — chỉ chữ + ảnh, bóng chữ đậm để đọc trên mọi cảnh */
.gl-alert--plain { background: none; border: 0; box-shadow: none; }
.gl-alert--plain .gl-alert__head,
.gl-alert--plain .gl-alert__msg { text-shadow: 0 2px 10px rgba(var(--shadow-rgb), .9), 0 0 4px rgba(var(--shadow-rgb), .8); }
.gl-alert--plain .gl-alert__ic  { filter: drop-shadow(0 4px 14px rgba(var(--shadow-rgb), .8)); }
.gl-alert__ic {
  font-size: 60px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(var(--pink-rgb), .5));
  animation: gl-bob 1s ease-in-out infinite alternate;
}
.gl-alert__img { display: block; margin: 0 auto; max-width: 190px; max-height: 130px; object-fit: contain; }
@keyframes gl-bob { to { transform: translateY(-8px) rotate(-5deg); } }
.gl-alert__head { margin-top: 10px; font-weight: 700; line-height: 1.35; }
.gl-alert__head .gl-name { color: var(--c-name); }
.gl-alert__head .gl-amt  { color: var(--c-amount); font-family: 'Space Grotesk','Space Mono',monospace; }
.gl-alert__msg {
  margin-top: 12px; font-size: .8em; line-height: 1.5; color: var(--c-msg);
  font-style: italic; word-break: break-word;
}

/* ---- Hiệu ứng chữ (lặp) — áp vào .gl-alert__head ---- */
.gl-tx--bounce { animation: gl-bounce 1s ease infinite; }
.gl-tx--pulse  { animation: gl-pulse 1.2s ease infinite; }
.gl-tx--tada   { animation: gl-tada 1.6s ease infinite; }
.gl-tx--shake  { animation: gl-shake .5s ease infinite; }
@keyframes gl-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes gl-pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes gl-tada {
  0% { transform: scale(1); } 10%,20% { transform: scale(.9) rotate(-3deg); }
  30%,50%,70%,90% { transform: scale(1.1) rotate(3deg); }
  40%,60%,80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1); }
}
@keyframes gl-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---- Hiệu ứng VÀO / RA ---- */
.gl-anim { animation-duration: .6s; animation-fill-mode: both; }
.gl-fadeInDown  { animation-name: gl-fadeInDown; }
.gl-fadeInUp    { animation-name: gl-fadeInUp; }
.gl-zoomIn      { animation-name: gl-zoomIn; }
.gl-slideInLeft { animation-name: gl-slideInLeft; }
.gl-bounceIn    { animation-name: gl-bounceIn; }
.gl-fadeOutUp    { animation-name: gl-fadeOutUp; }
.gl-fadeOutDown  { animation-name: gl-fadeOutDown; }
.gl-zoomOut      { animation-name: gl-zoomOut; }
.gl-slideOutRight{ animation-name: gl-slideOutRight; }
.gl-fadeOut      { animation-name: gl-fadeOut; }
@keyframes gl-fadeInDown  { from { opacity: 0; transform: translateY(-42px); } to { opacity: 1; transform: none; } }
@keyframes gl-fadeInUp    { from { opacity: 0; transform: translateY(42px); }  to { opacity: 1; transform: none; } }
@keyframes gl-zoomIn      { from { opacity: 0; transform: scale(.7); }         to { opacity: 1; transform: none; } }
@keyframes gl-slideInLeft { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } }
@keyframes gl-bounceIn {
  0% { opacity: 0; transform: scale(.3); } 55% { opacity: 1; transform: scale(1.1); }
  75% { transform: scale(.95); } 100% { transform: scale(1); }
}
@keyframes gl-fadeOutUp    { to { opacity: 0; transform: translateY(-30px); } }
@keyframes gl-fadeOutDown  { to { opacity: 0; transform: translateY(30px); } }
@keyframes gl-zoomOut      { to { opacity: 0; transform: scale(.7); } }
@keyframes gl-slideOutRight{ to { opacity: 0; transform: translateX(80px); } }
@keyframes gl-fadeOut      { to { opacity: 0; } }

/* ---- Sân khấu (vị trí alert) ---- */
.gl-stage { position: fixed; inset: 0; display: flex; padding: 5vh 5vw; pointer-events: none; }
.gl-pos--top-left     { align-items: flex-start; justify-content: flex-start; }
.gl-pos--top-center   { align-items: flex-start; justify-content: center; }
.gl-pos--top-right    { align-items: flex-start; justify-content: flex-end; }
.gl-pos--center       { align-items: center;     justify-content: center; }
.gl-pos--bottom-center{ align-items: flex-end;   justify-content: center; }

/* Bản dùng trong khung xem trước (không full màn) */
.gl-stage--preview {
  position: relative; inset: auto; min-height: 210px; padding: 18px; border-radius: 14px;
  overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, rgba(var(--violet-rgb), .18), transparent 60%), #16112e;
  border: 1px solid rgba(var(--hl-rgb), .07);
}
.gl-stage--preview .gl-alert { min-width: 0; max-width: 100%; transform: scale(.9); }

/* ============================================================
   GOAL BAR (Mục tiêu) — dùng chung overlay-goal.html + xem trước
   ============================================================ */
.gl-goal {
  min-width: 300px; max-width: min(560px, 92vw); color: var(--on-accent);
  padding: 16px 20px 18px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(var(--surface2-rgb), .92), rgba(var(--bg2-rgb), .92));
  border: 2px solid rgba(var(--violet-rgb), .5);
  box-shadow: 0 18px 50px rgba(var(--shadow-rgb), .5), 0 0 36px rgba(var(--violet-rgb), .28);
  backdrop-filter: blur(4px);
}
.gl-goal__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gl-goal__title { font-weight: 700; font-size: 17px; }
.gl-goal__pct { font-family: 'Space Grotesk','Space Mono',monospace; font-weight: 700; font-size: 20px; color: var(--on-accent); }
.gl-goal__bar {
  height: 16px; border-radius: 999px; overflow: hidden;
  background: rgba(var(--hl-rgb), .1); box-shadow: inset 0 1px 3px rgba(var(--shadow-rgb), .4);
}
.gl-goal__fill {
  height: 100%; border-radius: 999px; min-width: 4px;
  transition: width .6s cubic-bezier(.3,1,.4,1);
  box-shadow: 0 0 16px rgba(var(--pink-rgb), .5);
}
.gl-goal__nums {
  margin-top: 9px; display: flex; align-items: baseline; gap: 6px;
  font-family: 'Space Grotesk','Space Mono',monospace;
}
.gl-goal__nums b { font-size: 18px; color: var(--c-amount, var(--gold)); }
.gl-goal__nums span { font-size: 13px; color: rgba(var(--hl-rgb), .6); }
.gl-stage--preview .gl-goal { min-width: 0; width: 100%; transform: none; }