/* Scoped to the existing table surface. Emoji top layer remains above these effects. */
.table-joker-effect { position:absolute; z-index:65; width:180px; height:126px; margin:-63px 0 0 -90px; pointer-events:none!important; contain:layout style; }
.table-joker-effect * { pointer-events:none!important; }
.joker-effect-halo,.joker-effect-ring { position:absolute; inset:12px 36px; border-radius:50%; }
.joker-effect-halo { background:radial-gradient(ellipse,#ffe6a96b,transparent 68%); animation:jokerHalo 1050ms ease-out both; }
.joker-effect-ring { border:2px solid #ffe9a2; box-shadow:0 0 10px #ffd17499,inset 0 0 8px #ffdb8655; animation:jokerRing 900ms cubic-bezier(.15,.65,.2,1) both; }
.joker-clash-effect .joker-effect-ring { border-color:#ffeab5; border-left-color:#b49cff; border-right-color:#b49cff; }
.joker-clash-effect::before,.joker-clash-effect::after { content:""; position:absolute; top:58px; left:10px; width:160px; height:2px; background:linear-gradient(90deg,transparent,#fff5ce,#b69cff,transparent); animation:jokerSlash 650ms ease-out both; transform:rotate(-28deg); }
.joker-clash-effect::after { transform:rotate(28deg); animation-delay:65ms; }
.joker-effect-caption { position:absolute; left:0; right:0; top:39px; padding:6px 12px; border:1px solid #e9bd68; border-radius:22px; color:#fff0bc; background:linear-gradient(110deg,#172b21f2,#342819f5,#172b21f2); box-shadow:0 3px 12px #0008,0 0 12px #eeb54835; font:700 clamp(17px,2.4vh,22px)/1.3 Georgia,serif; text-align:center; white-space:nowrap; animation:jokerCaption 1100ms ease-out both; }
.joker-give-effect .joker-effect-caption { color:#ffedb4; letter-spacing:.06em; }
.joker-effect-spark { position:absolute; left:88px; top:61px; width:4px; height:13px; border-radius:50%; background:linear-gradient(#fff9d7,#e7ab3e); transform-origin:2px 2px; animation:jokerSpark 800ms ease-out both; --spark-angle:0deg; }
.joker-effect-victor { animation:jokerVictor 750ms ease-out both!important; }
.joker-effect-defeated { animation:jokerDefeated 750ms ease-out both!important; }
.joker-effect-giving { animation:jokerGiving 800ms ease-out both!important; }
@keyframes jokerHalo { 0%{opacity:0;transform:scale(.45)} 22%{opacity:1} 100%{opacity:0;transform:scale(1.4)} }
@keyframes jokerRing { 0%{opacity:0;transform:scale(.4)} 20%{opacity:1} 100%{opacity:0;transform:scale(1.5)} }
@keyframes jokerSlash { 0%{opacity:0;scale:.2 1} 20%{opacity:1;scale:1 1} 100%{opacity:0;scale:1.15 1} }
@keyframes jokerCaption { 0%{opacity:0;translate:0 7px} 18%,70%{opacity:1;translate:0 0} 100%{opacity:0;translate:0 -12px} }
@keyframes jokerSpark { 0%{opacity:0;transform:rotate(var(--spark-angle)) translateY(-15px) scale(.4)} 18%{opacity:1} 100%{opacity:0;transform:rotate(var(--spark-angle)) translateY(-72px) scale(.2)} }
@keyframes jokerVictor { 0%,100%{filter:none} 35%{filter:drop-shadow(0 0 9px #ffdc81)} }
@keyframes jokerDefeated { 0%,100%{filter:none} 35%{filter:brightness(.66) saturate(.65)} }
@keyframes jokerGiving { 0%,100%{filter:none} 35%{filter:drop-shadow(0 0 6px #f4d389)} }
.joker-effect-still .joker-effect-ring { opacity:.5; border-width:1px; }
.joker-effect-still .joker-effect-halo,.joker-effect-still::before,.joker-effect-still::after { display:none; }
.joker-effect-still .joker-effect-caption,.joker-effect-still .joker-effect-ring { animation:none; }
@media(prefers-reduced-motion:reduce) { .table-joker-effect *,.table-joker-effect::before,.table-joker-effect::after,.joker-effect-victor,.joker-effect-defeated,.joker-effect-giving { animation:none!important; } .joker-effect-halo,.joker-effect-spark,.joker-clash-effect::before,.joker-clash-effect::after { display:none; } }