.draw-player { width:100%; max-width:640px; margin:0 auto; padding:12px 4px 4px; box-sizing:border-box; }
.draw-player-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:0 4px 16px; font-size:13px; color:#64748b; }
.draw-player-status { font-weight:700; color:#334155; }
.draw-player-count { font-variant-numeric:tabular-nums; }
.draw-player .lottery-balls { display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start; gap:clamp(3px,1.1vw,10px); }
.draw-slot { flex:0 1 auto; min-width:0; }
.draw-slot .lottery-ball-wrapper { margin:0; }
.draw-slot.is-next .lottery-ball { animation:api-ball-wait 1.2s ease-in-out infinite; }
.draw-slot.is-new .lottery-ball { animation:api-ball-reveal .65s cubic-bezier(.2,.8,.2,1) both; }
.draw-slot.is-special.is-new .lottery-ball { animation:api-special-reveal .9s cubic-bezier(.2,.8,.2,1) both; }
.draw-player-track { height:3px; overflow:hidden; border-radius:6px; background:#e2e8f0; margin:17px 4px 0; }
.draw-player-track > div { width:100%; height:100%; background:linear-gradient(90deg,#377ef1,#15a79b); transform-origin:left; transition:transform .45s ease; }
.draw-player-timing { text-align:center; min-height:18px; font-size:12px; color:#64748b; margin-top:9px; font-variant-numeric:tabular-nums; }
@keyframes api-ball-wait { 50% { transform:translateY(-3px) scale(1.025); opacity:.55; } }
@keyframes api-ball-reveal { from { transform:translateY(-12px) rotateY(100deg) scale(.65); opacity:.1; } 65% { transform:translateY(2px) rotateY(0) scale(1.08); opacity:1; } to { transform:translateY(0) scale(1); opacity:1; } }
@keyframes api-special-reveal { from { transform:scale(.5) rotateY(120deg); opacity:.1; } 65% { transform:scale(1.15); box-shadow:0 0 0 8px #fbbf2433; opacity:1; } to { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .draw-slot.is-next .lottery-ball,.draw-slot.is-new .lottery-ball { animation:none; } .draw-player-track > div { transition:none; } }