:root {
    --win-bg: #050814;
    --win-border: rgba(255, 255, 255, 0.12);
    --win-text: #f6f7ff;
    --win-muted: #a2a9cf;
}

.win-section {
    max-width: 900px;
    margin: 32px auto 40px;
    padding: 20px 18px 30px;
    font-family:
    "Poppins",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
    color: var(--win-text);
    background: radial-gradient(circle at top,
    rgba(91, 219, 255, 0.12),
    transparent 60%),
    radial-gradient(circle at bottom, rgba(255, 73, 175, 0.12), transparent 55%);
}

.win-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    font-size: 1.2rem;
    background: linear-gradient(120deg, #ffffff, #4df5ff, #ff6ad5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.win-subtitle {
    text-align: center;
    font-size: 0.82rem;
    color: var(--win-muted);
    margin-bottom: 18px;
}

.win-ticker-frame {
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(130deg,
    rgba(77, 245, 255, 0.7),
    rgba(160, 99, 255, 0.7),
    rgba(255, 106, 213, 0.7));
    box-shadow:
    0 0 30px rgba(0, 0, 0, 0.9),
    0 0 28px rgba(120, 80, 255, 0.4);
}

.win-ticker-window {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: radial-gradient(circle at top left, #171c3a, #050814 55%);
    max-height: 230px;
    /* tinggi tampilan jendela */
}

.win-ticker-track {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 12px;
    animation: scrollWinner 18s linear infinite;
}

.win-ticker-window:hover .win-ticker-track {
    animation-play-state: paused;
    /* pause saat hover */
}

.win-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    margin: 2px 0;
    border-radius: 14px;
    background: linear-gradient(135deg,
    rgba(15, 23, 42, 0.92),
    rgba(17, 24, 56, 0.96));
    box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    font-size: 0.82rem;
    white-space: nowrap;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: radial-gradient(circle,
    #5bffb5 0%,
    #0aff87 45%,
    rgba(10, 255, 135, 0) 80%);
    box-shadow: 0 0 14px rgba(0, 255, 171, 0.9);
    flex-shrink: 0;
}

.name {
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.text {
    color: var(--win-muted);
}

.amount {
    color: #4df5ff;
    font-weight: 700;
}

@keyframes scrollWinner {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
        /* karena nanti di-duplicate jadi 2x panjang */
    }
}

@media (max-width: 600px) {
    .win-item {
        font-size: 0.78rem;
    }
}