/* Pita kemenangan beranda Theme B (templates/core/_win_ticker.html), 1 Okt 2026.
   Token --tg-* (Theme B) lebih dulu, lalu token klasik (--gold/--navy2/--line/--ink)
   untuk tenant Theme A yang diaktifkan di ENABLED_SITE_CODES (FORE77 neon_cyber).
   Tema klasik BERLATAR TERANG belum disesuaikan — cek dulu sebelum mengaktifkan. */
.win-ticker {
  display: flex;
  align-items: stretch;
  width: min(var(--tg-col, 1200px), calc(100% - 24px));
  margin: 12px auto;
  border: 1px solid var(--tg-panel-line, var(--line, #1f394a));
  border-radius: 12px;
  background: var(--tg-surface, var(--navy2, #12242f));
  overflow: hidden;
  box-sizing: border-box;
}
.win-ticker-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--tg-panel, var(--gold, #2fe3a5));
  color: #06141c;
  font: 800 11px/1.15 system-ui, sans-serif;
  letter-spacing: .04em;
}
.win-ticker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06141c;
  animation: win-ticker-pulse 1.4s ease-in-out infinite;
}
.win-ticker-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.win-ticker-track {
  display: flex;
  width: max-content;
  animation: win-ticker-scroll calc(var(--wt-count, 10) * 4s) linear infinite;
}
.win-ticker:hover .win-ticker-track,
.win-ticker:focus-within .win-ticker-track { animation-play-state: paused; }
.win-ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 12px;
  border-right: 1px solid var(--tg-panel-line, var(--line, #1f394a));
  white-space: nowrap;
}
.win-ticker-item img,
.win-ticker-noimg {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--tg-tile, var(--navy, #0f2230));
}
.win-ticker-noimg {
  display: grid;
  place-items: center;
  font-style: normal;
  color: var(--tg-panel, var(--gold, #2fe3a5));
}
.win-ticker-item p {
  margin: 0;
  font: 500 12px/1.35 system-ui, sans-serif;
  color: var(--tg-panel-ink-soft, var(--muted, #8ba7b5));
}
.win-ticker-item p b { color: var(--tg-panel-ink, var(--ink, #e6f2f0)); font-weight: 700; }
.win-ticker-item p span { color: var(--tg-panel-ink, var(--ink, #e6f2f0)); }
.win-ticker-amount {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: var(--tg-panel, var(--gold, #2fe3a5)) !important;
  font-variant-numeric: tabular-nums;
}
.win-ticker-amount em {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--tg-panel-2, var(--gold2, #12b98a));
  color: #06141c;
  font: 800 10px/1.5 system-ui, sans-serif;
  font-style: normal;
}
@keyframes win-ticker-scroll { to { transform: translateX(-50%); } }
@keyframes win-ticker-pulse { 50% { opacity: .25; } }
@media (max-width: 640px) {
  .win-ticker { margin: 10px auto; }
  .win-ticker-label { padding: 0 10px; font-size: 10px; }
  .win-ticker-item { padding: 7px 14px 7px 10px; }
  .win-ticker-item img, .win-ticker-noimg { width: 34px; height: 34px; flex-basis: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .win-ticker-track { animation-duration: calc(var(--wt-count, 10) * 12s); }
}