/* ============================================================
   WIDGETS — hình thức các widget donate, DÙNG CHUNG overlay-w.html +
   khung "Xem trước" ở Studio. Tự chứa (overlay OBS nạp độc lập).
   Cặp với js/widgets.js.
   ============================================================ */

.gl-w {
  color: var(--on-accent); min-width: 280px; max-width: min(560px, 92vw);
  padding: 16px 20px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(var(--surface2-rgb), .92), rgba(var(--bg2-rgb), .92));
  border: 2px solid rgba(var(--violet-rgb), .45);
  box-shadow: 0 18px 50px rgba(var(--shadow-rgb), .5), 0 0 34px rgba(var(--violet-rgb), .24);
  backdrop-filter: blur(4px);
}
.gl-w__title { font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.gl-w__empty { color: rgba(var(--hl-rgb), .5); font-size: 14px; text-align: center; padding: 10px 0; }
.gl-w__hint { margin-top: 10px; font-size: 11.5px; color: rgba(var(--hl-rgb), .45); text-align: center; }

/* 🏆 Bảng xếp hạng */
.gl-lb__row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(var(--hl-rgb), .07); }
.gl-lb__row:first-of-type { border-top: 0; }
.gl-lb__rank { flex: none; width: 26px; text-align: center; font-weight: 700; font-size: 16px; }
.gl-lb__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gl-lb__amt { flex: none; font-family: 'Space Grotesk','Space Mono',monospace; font-weight: 700; }

/* 🏆 Mẫu "Chữ chạy ngang" (marquee) — 1 dải ngang cuộn liên tục */
.gl-lbm { display: flex; align-items: center; gap: 12px; max-width: min(780px, 96vw); padding: 12px 18px; overflow: hidden; }
.gl-lbm__title { flex: none; font-weight: 700; font-size: 15px; }
.gl-lbm__vp {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(var(--shadow-rgb),1) 6%, rgba(var(--shadow-rgb),1) 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, rgba(var(--shadow-rgb),1) 6%, rgba(var(--shadow-rgb),1) 94%, transparent);
}
.gl-lbm__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: gl-lbm-scroll 20s linear infinite; }
.gl-lbm__item { font-weight: 600; font-size: 15px; }
.gl-lbm__rank { margin-right: 6px; }
.gl-lbm__sep  { margin: 0 14px; color: rgba(var(--hl-rgb), .4); }
@keyframes gl-lbm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gl-lbm__track { animation: none; } }

/* ⏱️ Đếm ngược */
.gl-cd { text-align: center; }
.gl-cd__time { font-family: 'Space Grotesk','Space Mono',monospace; font-weight: 700; font-size: 54px; line-height: 1; letter-spacing: 1px; text-shadow: 0 4px 20px rgba(var(--cyan-rgb), .4); }

/* 🗳️ Bình chọn */
.gl-poll__opt { margin-bottom: 10px; }
.gl-poll__top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 4px; }
.gl-poll__top b { font-family: 'Space Grotesk',monospace; }
.gl-poll__bar { height: 12px; border-radius: 999px; overflow: hidden; background: rgba(var(--hl-rgb), .1); }
.gl-poll__fill { height: 100%; border-radius: 999px; min-width: 3px; transition: width .5s cubic-bezier(.3,1,.4,1); }

/* 🎵 Yêu cầu nhạc */
.gl-music__row { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(var(--hl-rgb), .07); }
.gl-music__row:first-of-type { border-top: 0; }
.gl-music__i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--hl-rgb), .12); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.gl-music__b { flex: 1; min-width: 0; }
.gl-music__d { font-size: 12.5px; color: rgba(var(--hl-rgb), .65); }
.gl-music__m { font-size: 14px; word-break: break-word; }

/* 🎡 Vòng quay */
.gl-wheel { text-align: center; }
.gl-wheel__name { font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.gl-wheel__wrap { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.gl-wheel__disc {
  width: 100%; height: 100%; border-radius: 50%;
  border: 5px solid rgba(var(--hl-rgb), .85);
  box-shadow: 0 10px 34px rgba(var(--shadow-rgb), .5), inset 0 0 22px rgba(var(--shadow-rgb), .35);
  transition: transform 4s cubic-bezier(.15,.85,.25,1);
  position: relative; overflow: hidden;
}
.gl-wheel__lab {
  position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12px; transform-origin: 50% 50%; pointer-events: none;
}
.gl-wheel__lab span {
  max-width: 96px; font-size: 11px; font-weight: 700; color: #16112e;
  text-align: center; line-height: 1.1; text-shadow: 0 1px 2px rgba(var(--hl-rgb), .5);
}
.gl-wheel__hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 48px; height: 48px; border-radius: 50%; background: #16112e;
  border: 4px solid rgba(var(--hl-rgb), .85); display: grid; place-items: center; font-size: 22px;
}
.gl-wheel__ptr {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 22px solid var(--gold, var(--gold)); filter: drop-shadow(0 3px 4px rgba(var(--shadow-rgb), .5));
}

/* Bản trong khung xem trước (thu nhỏ vừa cột) */
.gl-stage--preview .gl-w { min-width: 0; width: 100%; }
.gl-stage--preview .gl-wheel__wrap { width: 200px; height: 200px; }
.gl-stage--preview .gl-cd__time { font-size: 44px; }