/* Arena Battle — hareket kütüphanesi. Token'lar tokens.css'te. Demo: Slot Savaslari Motion.dc.html */
@keyframes ssPulse{0%{box-shadow:0 0 0 0 rgba(255,91,54,.6)}70%{box-shadow:0 0 0 10px rgba(255,91,54,0)}100%{box-shadow:0 0 0 0 rgba(255,91,54,0)}}
@keyframes ssRise{0%{opacity:0;transform:translateY(16px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes ssPop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes ssBurst{0%{transform:scale(.2);opacity:0}40%{opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes ssConf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}
@keyframes ssTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes ssToastIn{0%{transform:translateX(120%);opacity:0}100%{transform:none;opacity:1}}
@keyframes ssToastOut{0%{transform:none;opacity:1}100%{transform:translateX(120%);opacity:0}}
@keyframes ssShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes ssSpin{to{transform:rotate(360deg)}}
@keyframes ssSheetIn{0%{transform:translateY(100%)}100%{transform:none}}
@keyframes ssSlideIn{0%{opacity:0;transform:translateX(40px)}100%{opacity:1;transform:none}}
@keyframes ssReact{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:1}100%{transform:translateY(-140px) scale(1.6);opacity:0}}
@keyframes ssGlow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes ssSeatFlash{0%{border-color:rgba(255,255,255,.14);background:transparent}40%{border-color:#57E39A;background:rgba(87,227,154,.25)}100%{border-color:rgba(87,227,154,.55);background:#1B1D24}}

/* hazır sınıflar */
.ss-live-dot{animation:ssPulse 1.6s var(--ease-out,ease-out) infinite}
.ss-rise{animation:ssRise 320ms var(--ease-out) both}
.ss-rise > *:nth-child(n){animation:ssRise 320ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms)}  /* --i: index, en fazla 8 */
.ss-card-hover{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.ss-card-hover:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.ss-btn{transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast),box-shadow var(--dur-fast)}
.ss-btn:active{transform:scale(.95)}
.ss-btn-primary:hover{background:var(--accent-2);box-shadow:0 6px 20px rgba(255,91,54,.35)}
.ss-turn-ring{transition:left var(--dur-slow) var(--ease-in-out),width var(--dur-slow) var(--ease-in-out)}
.ss-score-bar{transition:width 600ms var(--ease-out)}
.ss-score-bar.is-lead{animation:ssGlow 2s ease-in-out infinite}
.ss-win-ring{animation:ssBurst 600ms var(--ease-out) both}
.ss-win-name{animation:ssPop 700ms var(--ease-spring) 200ms both}
.ss-confetti{position:absolute;left:50%;top:50%;width:7px;height:10px;border-radius:2px;animation:ssConf 900ms var(--ease-out) both} /* her parçaya --dx/--dy ver */
.ss-ticker{display:flex;width:max-content;animation:ssTicker 28s linear infinite}
.ss-ticker:hover{animation-play-state:paused}
.ss-toast{animation:ssToastIn var(--dur-base) var(--ease-out) both}
.ss-toast.is-leaving{animation:ssToastOut var(--dur-base) var(--ease-out) both}
.ss-skeleton{background:linear-gradient(90deg,#14161B 25%,#1F222A 50%,#14161B 75%);background-size:200% 100%;animation:ssShimmer 1.4s linear infinite;border-radius:6px}
.ss-spinner{width:20px;height:20px;border-radius:50%;border:3px solid rgba(26,10,5,.25);border-top-color:#1A0A05;animation:ssSpin .8s linear infinite}
.ss-sheet{animation:ssSheetIn var(--dur-slow) var(--ease-out) both}
.ss-scrim{transition:opacity var(--dur-slow) var(--ease-out)}
.ss-page{animation:ssSlideIn var(--dur-base) var(--ease-out) both}
.ss-react{position:absolute;animation:ssReact 1.6s var(--ease-out) both;pointer-events:none}
.ss-seat-fill{animation:ssSeatFlash 500ms var(--ease-out) both}
.ss-seat-fill .avatar{animation:ssPop 320ms var(--ease-spring) 150ms both}
.ss-count{font-variant-numeric:tabular-nums;transition:color var(--dur-base),text-shadow var(--dur-base)}
.ss-count.is-updating{color:#FFE08A;text-shadow:0 0 24px rgba(245,196,81,.6)}
.ss-stream-controls{opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.ss-stream:hover .ss-stream-controls,.ss-stream.is-touch .ss-stream-controls{opacity:1}

@media (prefers-reduced-motion:reduce){
  .ss-rise,.ss-rise>*,.ss-page,.ss-sheet,.ss-toast{animation:none;opacity:1;transform:none}
  .ss-confetti,.ss-react,.ss-win-ring{display:none}
  .ss-ticker{animation:none}
  .ss-card-hover:hover{transform:none}
}